/* /instrument — Method Instruments.
   Eight episodes, not eight modules. Each has its own density, its own
   composition and its own amount of silence, so the page reads as a sequence
   rather than a repeated card.

   COLOUR — 90% field, ink and structural grey; 10% meaning.
     signal (terracotta)  an event. Something happened here: a record, a mark,
                          a chosen row, a press. Never a fill, never a block.
     system (dusty rose)  the computational layer, and states not yet resolved.
                          It holds the evidence ground and marks the unfinished.
   Neither is a brand colour sprayed across the page. Both mean something.

   SCALE — the range is deliberately violent: a 10px label sits beside a 150px
   declaration, with nothing in between allowed to average them out. */

@font-face{font-family:Plex;src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');font-display:swap;font-weight:400}

:root{
  --paper:#e9e5db;--ink:#3d3831;--muted:#5f5850;--faint:#665f54;--rule:#c9c2b4;
  --sage:#ded8ca;--sage-deep:#cdc5b3;--sage-ink:#7a7163;--light:#f6f3ea;
  --signal:#b5643f;--signal-text:#a04f2c;--signal-soft:#b5643f2e;
  --system:#d9ccd0;--system-deep:#c6b4ba;--system-ink:#7b6870;
  --gut:clamp(22px,5.4vw,110px);
  /* Two rhythms, so the spacing itself changes density between episodes
     instead of repeating one comfortable interval down the page. */
  --episode:clamp(88px,13vh,190px);
  --dense:clamp(60px,8vh,118px);
  color-scheme:light;font-family:Arial,Helvetica,sans-serif;
  background:var(--paper);color:var(--ink);font-synthesis:none
}
*{box-sizing:border-box}
body{margin:0;overflow-x:clip;-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse at 78% 4%,#f7f4ea99 0,transparent 56%),var(--paper)}
img,svg{display:block;width:100%;height:auto}
h1,h2{font-weight:400;letter-spacing:-.036em;line-height:1;margin:0}
p,figure,dl,dd{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
[hidden]{display:none!important}
.micro{font:10px/1.6 Plex,monospace;letter-spacing:.1em}
.label{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;top:12px;left:20px;z-index:100;background:var(--ink);color:#fff;
  width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.skip:focus{width:auto;height:auto;padding:14px 18px;overflow:visible;clip-path:none}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.solid{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;
  min-height:60px;padding:0 26px;background:var(--ink);color:var(--light);
  font-size:15.5px;letter-spacing:-.01em;text-align:left;border-radius:2px;
  transition:background .18s,transform .18s}
.solid>span{font-size:21px;line-height:1;font-weight:300;opacity:.72;transition:transform .18s}
.solid:hover{background:var(--signal);transform:translateY(-1px)}
.solid:hover>span{transform:translateX(3px);opacity:1}
.solid:active{transform:translateY(1px)}
.solid:disabled{background:#9a9084;cursor:default}
.solid.primary{width:100%;max-width:400px;min-height:66px;padding:0 30px;font-size:16.5px;
  background:var(--signal);color:#fdfaf3;box-shadow:0 10px 26px -16px #b5643f9e}
.solid.primary:hover{background:#a2542f;transform:translateY(-2px);box-shadow:0 16px 34px -16px #b5643fb8}
.solid.primary:active{transform:translateY(0)}
.cta-note{color:var(--muted);margin-top:16px;line-height:1.8}
.solid.small{min-height:40px;padding:0 15px;font-size:12px;gap:14px}
.solid.small>span{font-size:16px}
.quiet{font:10px/1.6 Plex,monospace;letter-spacing:.1em;min-height:44px;
  display:inline-flex;align-items:center;gap:12px;color:var(--muted);text-align:left}
.quiet:hover{color:var(--signal-text);text-decoration:underline;text-underline-offset:5px}
.inline-link{font:inherit;color:var(--ink);border-bottom:1px solid var(--rule);padding:0 0 1px;display:inline;min-height:0}
.inline-link:hover{color:var(--signal-text);border-bottom-color:var(--signal)}

/* ── mast ────────────────────────────────────────────────────────────────── */
.mast{display:flex;align-items:center;gap:22px;padding:0 var(--gut);min-height:104px;max-width:1900px;margin-inline:auto}
.wordmark{display:block;width:70px;flex-shrink:0}
.wordmark img{mix-blend-mode:multiply}
.house-description{font-size:8.5px;color:var(--muted)}
.mast-nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.mast-nav a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.mast-nav a:hover{color:var(--ink)}

main>section{padding-inline:var(--gut);max-width:1900px;margin-inline:auto}

/* the register every surface carries */
.register{display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--muted)}
.register .live{display:flex;align-items:center;gap:8px}
.register .live i{width:5px;height:5px;border-radius:50%;background:var(--signal);flex-shrink:0;box-shadow:0 0 0 3px var(--signal-soft)}

/* ░ 01 · THE DECLARATION ─────────────────────────────────────────────────── */
/* One composition: the statement keeps its full measure and the object emerges
   from the lower right, running past the edge so the record reads as still going.
   They overlap rather than sit in two columns — that is the tension. */
.hero{position:relative;padding-block:clamp(36px,4.6vh,72px) clamp(40px,6vh,92px);
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(900px,calc(100svh - 104px))}
.hero-copy{position:relative;z-index:2;max-width:min(100%,980px)}
.hero-label{margin-bottom:clamp(22px,3.4vh,44px)}
.hero h1{font-size:clamp(42px,6.8vw,116px);line-height:.98;letter-spacing:-.042em}
.hero-support{font-size:clamp(16px,1.16vw,19px);line-height:1.55;color:var(--muted);
  max-width:27em;margin-top:clamp(24px,3.4vh,40px)}
.hero-act{margin-top:clamp(26px,3.8vh,44px)}

/* The object sits low and right, behind the language. Its register stays on the
   grid; only the surface itself runs past the edge. */
.hero-object{position:absolute;z-index:1;right:var(--gut);bottom:clamp(26px,6vh,86px);
  width:min(58%,760px);pointer-events:none;display:flex;flex-direction:column-reverse}
/* The register reads beneath the object here, so the statement above it never
   has to share a line with it. */
.hero-object .register{pointer-events:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.hero-object>svg{max-height:min(46vh,430px);overflow:visible;pointer-events:auto;
  transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s cubic-bezier(.22,1,.36,1)}

/* ░ 02 · THE OBJECT, ALONE ───────────────────────────────────────────────── */
.specimen{padding-block:clamp(18px,2.6vh,38px) var(--dense)}
.marks{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);gap:0 clamp(16px,2.4vw,44px)}
.marks li{display:flex;flex-direction:column;gap:10px;padding:18px 0 0;
  font-size:clamp(14px,1.08vw,17px);line-height:1.4;letter-spacing:-.012em}
/* A stamp is ink until its event is the one happening. */
.marks .micro{color:var(--faint);transition:color .4s}
.marks li[data-on] .micro{color:var(--signal-text)}
.specimen-note{font-size:13px;line-height:1.6;color:var(--muted);margin-top:26px;max-width:36em}

/* ░ 03 · ONE SENTENCE, ALMOST EMPTY FIELD ────────────────────────────────── */
.turn{padding-block:clamp(86px,15vh,176px) clamp(62px,10vh,132px);position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,120px);align-items:start}
.turn-rule{position:absolute;inset-inline:0;top:clamp(56px,10vh,130px);
  height:1px;border:0;background:var(--signal);opacity:.9;transform-origin:left;
  transform:scaleX(var(--travel,1));transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.turn h2{font-size:clamp(34px,5.2vw,94px);line-height:1;letter-spacing:-.038em}
.turn-annotation{color:var(--muted);line-height:1.9;padding-top:clamp(8px,1.4vw,22px);
  justify-self:end;text-align:right;white-space:nowrap}

/* ░ 04 · THE SYSTEM, HAPPENING ───────────────────────────────────────────── */
.evidence{padding-block:var(--dense);position:relative}
/* The computational layer gets its own ground, so the episode reads as a change
   of density rather than one more block of the same field. */
.evidence:before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,#d9ccd085 9%,#d9ccd085 91%,transparent);z-index:-1}
.evidence-label{margin-bottom:clamp(30px,5vh,64px);color:var(--system-ink)}
.evidence-stage{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(28px,4.4vw,88px);align-items:center}
.evidence-object{position:relative}
.evidence-object>svg{max-height:min(56vh,560px);overflow:visible}
.evidence-object figcaption{color:var(--system-ink);border-top:1px solid var(--system-deep);
  padding-top:14px;margin-top:22px}

/* the staircase: each state steps further in, the way a record accumulates */
.stair{display:flex;flex-direction:column;gap:clamp(22px,3.4vh,44px)}
.stair li{padding-left:calc((var(--step) - 1) * clamp(14px,2.2vw,46px));
  opacity:var(--stair-op,1);transition:opacity .6s ease}
.stair li[data-step="1"]{--step:1;--w:86px}
.stair li[data-step="2"]{--step:2;--w:146px}
.stair li[data-step="3"]{--step:3;--w:212px}
.stair li[data-step="4"]{--step:4;--w:288px}
[data-staged] .stair li{--stair-op:.24}
[data-staged] .stair li[data-on]{--stair-op:1}
.stair-rule{display:block;height:3px;border-radius:2px;background:var(--signal);width:var(--w,120px)}
.stair .unresolved .stair-rule{background:var(--system-deep)}
.stair-k{margin:14px 0 9px;color:var(--faint);transition:color .4s}
.stair li[data-on] .stair-k{color:var(--signal-text)}
.stair li.unresolved[data-on] .stair-k{color:var(--system-ink)}
.stair-v{font-size:clamp(17px,1.5vw,24px);line-height:1.3;letter-spacing:-.028em;max-width:15em}

.evidence-claim{font-size:clamp(29px,3.8vw,68px);margin-top:clamp(50px,8vh,112px);line-height:1.02}
.evidence-sub{font-size:clamp(16px,1.3vw,21px);line-height:1.5;color:var(--muted);margin-top:26px}

/* ░ 05 · WHAT THE PARTICIPANT SEES ───────────────────────────────────────── */
.moment{padding-block:var(--dense) var(--episode);display:grid;grid-template-columns:.72fr 1.28fr;
  gap:clamp(30px,5vw,100px);align-items:center}
.moment h2{font-size:clamp(27px,3.3vw,58px)}
.moment-note{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:24em;margin-top:24px}
.moment-head .label{margin-top:24px}

.device{border:1px solid var(--rule);border-radius:20px;background:linear-gradient(168deg,var(--light),#e4dfd2);
  padding:12px;box-shadow:0 34px 68px -38px #4a403198;max-width:700px;width:100%;justify-self:end}
.device-top{display:flex;justify-content:space-between;color:var(--faint);padding:12px 20px 16px;font-size:11px}
.device-body{background:var(--paper);border:1px solid #d2ccbc;border-radius:13px;padding:6px 24px 24px}
.device-body li{padding:23px 0;border-bottom:1px solid var(--rule)}
/* Written, not slid in: the stamp lands first, then its line is uncovered. */
[data-staged] .device-body li{opacity:0;transition:opacity .45s ease}
[data-staged] .device-body li[data-on]{opacity:1}
[data-staged] .device-body li .said,[data-staged] .device-body li .reply{
  clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.22,1,.36,1) .12s}
[data-staged] .device-body li[data-on] .said,[data-staged] .device-body li[data-on] .reply{clip-path:inset(0 0 0 0)}
.device-body li:nth-child(2){transition-delay:.12s}
.device-body li:nth-child(3){transition-delay:.24s}
.device-body li:nth-child(4){transition-delay:.36s}
.device-body li:last-child{border-bottom:0;padding-bottom:8px}
.device-body .stamp{color:var(--faint);margin-bottom:12px;font-size:11px;transition:color .4s}
.device-body li[data-on] .stamp{color:var(--signal-text)}
.said{font-size:19px;line-height:1.42;letter-spacing:-.018em}
.said i{font-style:italic;color:var(--muted)}
.device-body .asks{position:relative}
.device-body .asks:before{content:'';position:absolute;left:-20px;top:26px;width:2px;height:17px;background:var(--signal)}
.device-body .asks .said{background:var(--sage);display:inline-block;padding:11px 15px;border-radius:3px}
.reply{font-size:14px;line-height:1.5;color:var(--muted);margin-top:12px}

/* ░ 06 · WHERE YOURS WOULD BEGIN ─────────────────────────────────────────── */
.enters{padding-block:var(--episode) clamp(42px,5vh,72px)}
.enters h2{font-size:clamp(29px,3.8vw,68px)}
.enters-stage{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.6vw,94px);
  align-items:center;margin-top:clamp(36px,6vh,78px)}
.enters-sub{font-size:clamp(16px,1.3vw,21px);line-height:1.45;color:var(--muted);max-width:24em}
.properties{display:flex;flex-direction:column;border-top:1px solid var(--rule);margin-top:32px}
.property{display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  border-bottom:1px solid var(--rule);padding:10px 3px;min-height:60px;position:relative;transition:background .2s}
.property:hover{background:#ded8ca55}
.property[aria-pressed=true]{background:#ded8ca8c}
.property[aria-pressed=true]:before{content:'';position:absolute;left:-11px;top:22px;height:15px;width:2px;background:var(--signal)}
.property-copy{flex:1}
.property strong{font-size:clamp(15px,1.16vw,18px);font-weight:400;letter-spacing:-.012em}
.property-state{color:var(--muted);font-size:15px;font-family:Plex,monospace}
.property[aria-pressed=true] .property-state{color:var(--signal)}

.enters-object>svg{max-height:min(52vh,500px);margin:-6px 0 26px;overflow:visible}
.enters-example{border-top:1px solid var(--rule);margin-bottom:12px}
.enters-example:empty{display:none}
.enters-example li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.4}
.enters-example li>span:first-child{font:10px/1.6 Plex,monospace;letter-spacing:.1em;color:var(--signal-text)}
/* No entrance animation here on purpose: the rows arriving IS the event, and an
   animation that never runs would leave them invisible. */
.enters-object figcaption{color:var(--faint);border-top:1px solid var(--rule);padding-top:13px;font-size:11px}
.enters-note{font-size:clamp(17px,1.5vw,24px);line-height:1.4;letter-spacing:-.025em;
  margin-top:clamp(34px,4.4vh,58px);max-width:22em}

/* ░ 07 · THE CHOICE ──────────────────────────────────────────────────────── */
.begin{padding-block:clamp(46px,6vh,88px) var(--episode)}
.begin h2{font-size:clamp(29px,3.8vw,68px)}
.engagements{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,130px);margin-top:clamp(44px,7vh,96px)}
.engagement{display:flex;flex-direction:column;align-items:flex-start}
.engagement .label{margin-bottom:20px}
.amount{font-size:clamp(58px,7.4vw,132px);line-height:.88;letter-spacing:-.062em;margin-bottom:26px}
.engagement-line{font-size:clamp(16px,1.3vw,20px);line-height:1.5;max-width:19em;margin-bottom:38px;color:var(--muted)}
.engagement .solid{margin-top:auto;width:100%;max-width:340px}
.beyond{margin-top:clamp(48px,7vh,100px);display:flex;flex-direction:column;gap:12px}
.beyond p{font-size:16.5px;line-height:1.6;color:var(--muted)}
.begin-terms{color:var(--faint);line-height:2;margin-top:clamp(40px,6vh,78px)}

/* ░ 08 · THE LAST WORD ───────────────────────────────────────────────────── */
.closing{padding-block:var(--episode)}
.closing h2{font-size:clamp(32px,4.6vw,84px);line-height:1}
.closing-act{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,100px);
  align-items:end;margin-top:clamp(44px,7vh,96px)}
.closing-direct{font-size:15px;line-height:1.7;color:var(--muted);justify-self:end;text-align:right}
.closing-direct a{color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:2px}
.closing-direct a:hover{color:var(--signal-text)}

/* ── foot ────────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding:44px var(--gut) 62px;max-width:1900px;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:26px 60px;align-items:start}
.foot-evidence p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:4px;max-width:30em}
.foot-house{font-size:14px;line-height:1.6;color:var(--muted);max-width:34em}
.foot-nav{grid-column:1/-1;display:flex;gap:28px;border-top:1px solid var(--rule);padding-top:22px;color:var(--muted)}
.foot-nav a{min-height:44px;display:inline-flex;align-items:center}
.foot-nav a:hover{color:var(--ink)}

/* ── the brief ───────────────────────────────────────────────────────────── */
.funnel{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;
  background:var(--paper);color:var(--ink);overflow:hidden}
.funnel::backdrop{background:#3d3831f2}
.funnel[open]{display:flex;flex-direction:column}
.funnel-mast{display:flex;align-items:center;gap:18px;padding:0 var(--gut);min-height:78px;
  border-bottom:1px solid var(--rule);flex-shrink:0}
.funnel-progress{display:flex;gap:5px;flex:1;max-width:280px}
.funnel-progress i{flex:1;height:2px;background:var(--rule);transition:background .3s}
.funnel-progress i[data-on]{background:var(--signal)}
.funnel-mast [data-count]{color:var(--muted)}
.funnel-close{margin-left:auto}

.funnel-stage{flex:1;display:grid;grid-template-columns:48% 52%;gap:clamp(24px,3.4vw,70px);
  align-items:center;padding:clamp(24px,4vh,60px) var(--gut);overflow-y:auto;overscroll-behavior:contain}
.funnel-copy{min-width:0}
.funnel-copy .step-no{color:var(--muted);margin-bottom:24px}
.funnel-copy h2{font-size:clamp(28px,3.5vw,58px)}
.funnel-copy h2:focus,.funnel-copy h2:focus-visible{outline:none}
.funnel-copy .hint{font-size:15.5px;line-height:1.55;color:var(--ink);margin-top:14px;max-width:28em}
.funnel-copy .properties{margin-top:28px}
.funnel-copy .solid{margin-top:26px;width:100%;max-width:340px}
.funnel-object{min-width:0;align-self:center}
.funnel-object>svg{max-height:min(42vh,380px);margin:-6px 0 26px;overflow:visible}

.own-words{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.own-words label{color:var(--muted)}
.own-words input,.contact input{font:15px/1.4 Arial,Helvetica,sans-serif;color:var(--ink);
  background:var(--light);border:1px solid #c2bbab;border-radius:3px;padding:14px;min-height:54px;width:100%;
  max-width:440px;transition:border-color .16s,box-shadow .16s}
.own-words input:focus,.contact input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #3d38311f}

.projection{border-top:1px solid var(--ink);margin-top:28px}
.projection li{display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.projection .micro{color:var(--faint)}
.projection .line{font-size:16px;line-height:1.45;letter-spacing:-.015em}
.projection .theirs{background:var(--sage);padding:3px 8px;border-radius:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.projection-note{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:14px}

.choose-head{margin-top:clamp(30px,3vw,48px);font-size:clamp(22px,2.2vw,34px)!important}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;border-top:1px solid var(--rule);padding-top:26px}
.choose article{display:flex;flex-direction:column;align-items:flex-start}
.choose .amount{font-size:clamp(30px,2.6vw,44px);margin:8px 0 12px;line-height:1}
.choose p:not(.micro):not(.amount){font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:18px;max-width:24em}
.choose .solid{margin-top:auto;width:100%}
.choose-larger{margin-top:22px}

.contact{display:flex;flex-direction:column;gap:18px;margin-top:28px;max-width:440px}
.contact label{display:flex;flex-direction:column;gap:9px}
.contact label>span{color:var(--muted)}
.contact .optional{opacity:.6}
.f-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.verify:empty{display:none}
.status{font-size:13.5px;line-height:1.5;color:var(--signal-text);min-height:20px}
.status:empty{display:none}
.privacy{font-size:12.5px;line-height:1.65;color:var(--muted)}
.privacy a{color:var(--signal-text)}

.done h2{font-size:clamp(30px,3.6vw,60px)}
.done p{font-size:16.5px;line-height:1.6;color:var(--muted);margin-top:22px;max-width:30em}
.done a.quiet,.done button.quiet{margin-top:22px;display:flex}
.done a.quiet{color:var(--ink);border-bottom:1px solid var(--rule);width:fit-content}

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  :root{--episode:clamp(64px,9vh,120px);--dense:clamp(48px,6vh,84px)}
  .evidence-stage,.moment,.enters-stage,.engagements,.closing-act,.foot{grid-template-columns:1fr}
  /* Stacked: the object stops being a backdrop and becomes the next thing seen. */
  .hero{min-height:0;display:block}
  .hero-copy{max-width:none}
  .hero-object{position:static;width:100%;margin-top:clamp(30px,5vh,56px);flex-direction:column}
  .hero-object .register{margin:0 0 10px;padding-top:0;border-top:0}
  .hero-object>svg{max-height:38vh}
  .turn{grid-template-columns:1fr;gap:30px}
  .turn-annotation{justify-self:start;text-align:left}
  .device{justify-self:start;max-width:100%}
  .moment{gap:34px}
  .enters-object{order:-1}
  .closing-direct{justify-self:start;text-align:left}
  .funnel-stage{grid-template-columns:1fr;align-content:start;gap:26px}
  .funnel-object{order:-1}
  .funnel-object>svg{max-height:26vh}
  .engagement .solid{max-width:100%}
}

@media(max-width:760px){
  :root{--gut:20px;--episode:64px;--dense:48px}
  .mast{min-height:74px;gap:14px}
  .wordmark{width:56px}
  .house-description,.mast-nav a{display:none}
  .hero{padding-block:34px 56px}
  .hero-label{margin-bottom:22px;font-size:9px}
  .hero h1{font-size:clamp(38px,11.4vw,60px);line-height:1}
  .hero-foot{margin-top:32px;gap:28px}
  .hero-support{font-size:16px}
  .solid.primary{max-width:100%}
  .hero-object>svg{max-height:240px}
  .marks{grid-template-columns:1fr 1fr;gap:0 18px}
  .marks li{font-size:13.5px;padding-top:14px}
  .marks li:nth-child(n+3){border-top:1px solid var(--rule);margin-top:14px}
  .turn{padding-block:72px}
  .turn h2{font-size:clamp(32px,9.2vw,48px)}
  .closing h2{font-size:clamp(29px,8.2vw,44px)}
  .turn-annotation{line-height:2;font-size:9.5px}
  .evidence-object>svg{max-height:200px}
  .stair{gap:26px}
  .stair li{padding-left:calc((var(--step) - 1) * 10px)}
  .stair li[data-step="1"]{--w:62px}
  .stair li[data-step="2"]{--w:96px}
  .stair li[data-step="3"]{--w:132px}
  .stair li[data-step="4"]{--w:168px}
  .stair-v{font-size:17px}
  .evidence-claim{font-size:clamp(26px,7.4vw,38px);margin-top:44px}
  .moment h2,.enters h2,.begin h2{font-size:clamp(26px,7.4vw,38px)}
  h2 br{display:none}
  .hero h1 br,.turn h2 br,.closing h2 br,.evidence-claim br{display:inline}
  .device-body{padding-inline:16px}
  .device-body li{padding:18px 0}
  .said{font-size:16.5px}
  .amount{font-size:clamp(50px,15vw,66px)}
  .engagement-line{font-size:16px;margin-bottom:26px}
  .enters-note{font-size:18px}
  .beyond p{font-size:15.5px}
  .begin-terms{line-height:1.9}
  .funnel-mast{min-height:62px;gap:12px}
  .funnel-progress{max-width:none}
  .funnel-stage{padding-block:22px 30px;gap:20px}
  .funnel-copy h2{font-size:clamp(25px,7.4vw,36px)}
  .funnel-copy h2 br{display:none}
  .choose-head{font-size:23px!important}
  .funnel-object>svg{max-height:150px;margin-bottom:20px}
  .funnel-copy .solid,.choose .solid{max-width:100%}
  .projection li{grid-template-columns:66px 1fr;gap:14px;padding:13px 0}
  .choose{grid-template-columns:1fr;gap:26px}
  .foot{padding-bottom:48px}
  .foot-nav{gap:16px;flex-wrap:wrap}
}

@media(max-width:380px){
  .hero h1{font-size:36px}
  .amount{font-size:48px}
  .marks{grid-template-columns:1fr}
  .marks li:nth-child(n+2){border-top:1px solid var(--rule);margin-top:12px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .solid:hover,.solid:active{transform:none}
  html{scroll-behavior:auto}
}

@media(forced-colors:active){
  .solid{border:1px solid ButtonText}
  .device,.property,.engagement{border-color:CanvasText}
  .property[aria-pressed=true]{background:Highlight;color:HighlightText}
  .funnel-progress i[data-on],.stair-rule{background:Highlight}
  .evidence:before{display:none}
}

@media print{.mast-nav,.solid,.quiet,.funnel{display:none!important}body{background:#fff}}