/* Thinking Humans · home.css · only what th.css doesn't already cover on the home page (v3.0, COPY §14; v2.9, §13; v2.8, §12).
   Reads ground roles (--fg, --lead, --steel, --frame, --line, --raised), never raw hex, except the plate parts that are
   plate on every ground (stamps, tags, cards) and the first-light sand of the horizon.
   PIN GATE: the global min-height:600px (the photo scenes' blocks in 2 and the stack's .ia blocks in 1) is kept in step
   with scenes.js/.css, proof.css and index.html's second inline gate; #top pinning as a whole has its own, 1160x640 plus
   a fit check (index.html's first inline gate and data-pin-min, the last blocks of 1 below, home.js 6). */

/* GATED (COPY §9 item 22, red beside a role: #floor's and #office's cards), ship-now:
   .th-decide--role::before{border-color:var(--steel)}.th-decide--role[data-state=decided]::before{background:var(--steel)} */

/* 0 · Chrome on home: the header button (GATED, BRAND §9.6; ship-now: remove .hdr__cta--btn in index.html) and the
   floating button, which stays out of the way of the hero and the pinned photo scenes on phones */
.hdr__free{display:none}
.hdr__cta--btn{position:relative;min-height:40px;margin-right:12px;padding:0 14px;gap:10px;border:1px solid var(--frame)}/* r2: 16px from a phone's edge (the header pads 4px for the menu's 48px hit area), on the content's right edge on a desktop */
.hdr__cta--btn::after{content:"";position:absolute;inset:-4px 0}/* 48px hit area */
@media(hover:hover){.hdr__cta--btn:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--frame)}}
.hdr__cta--btn:active{box-shadow:inset 0 0 0 1px var(--frame)}
.hdr--over.is-solid .hdr__cta--btn{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
@media(hover:hover){.hdr--over.is-solid .hdr__cta--btn:hover{background:var(--cta-h);border-color:var(--cta-h);box-shadow:none}}
.hdr--over.is-solid .hdr__cta--btn:active{background:var(--cta-h);border-color:var(--cta-h);box-shadow:none}
.menu-open .hdr__cta--btn{background:none;border-color:var(--frame);color:var(--fg)}
@media(min-width:720px){.hdr__cta--btn .hdr__free{display:inline}}
.hero-on .fab{visibility:hidden}
/* (v3.1: the solid-night header once scrolled over a night or sky hero moved to th.css 7, so /owners gets it too) */
.foot__small+.foot__tm{margin-top:6px}/* the trademark line under the photo line */
.nw{white-space:nowrap}/* "per-seat", "per-token", "60-person": never split at the hyphen on a narrow phone */
@media(max-width:479px){.hero__h1 .nw:first-of-type{display:inline-block;white-space:normal}}/* r2 (WCAG 1.4.12): with text spacing or a scaled font, "eliminate manual" ran off a 375px screen, so it may wrap; r3: as an inline block it wraps only inside itself, so a phone sets "Built to / eliminate manual / back-office work.", never "manual" alone. "back-office" stays whole (it fits 288px even spaced out) */
.h-s{display:inline-block;max-width:100%}/* r3: a sentence of a two- or three-sentence heading wraps inside itself, never across the full stop ("An / agent for every desk") */
.v-off,[data-values=off] .v-on,[data-values=off] .rs__fp b{display:none}
/* r2: home's mono stamps and photo tags break evenly ("· AUG 2026" never alone on a line; the joins are   in index.html) */
:is(.ia__steps .stamp,.ex__stamp,.hero__eye){text-wrap:balance}
[data-values=off] .v-off{display:inline}

/* 1 · #top · the hero (COPY v2.9 §13.1-§13.3): the text, then the Si stack (COPY §10.2's scene A, back on home as the
   hero's own scroll scene). Ink on night: every colour is a ground role, so the drawing, tags and tabs read light on dark.
   Three layouts (index.html's note on #top): the hero pinned (#top is the scene; the last block in this section), the
   stack pinned on its own under the text (.ia is the scene; the block before it), and still (reduced motion, no JS,
   under 600px tall, print: --p is 1, so every formula lands on the final frame, the stack apart under the guarantee,
   then the <ol> as a list ending on the live strip). .ia, its stage and .ia__in are layout wrappers only
   (display:contents) unless .ia is the scene. --gap: the explode gap; --top: room above the still stack for the decision
   callout; --e (declared on .ia, so it follows whichever element carries --p): the explode, .06 → .13, settled before
   step 1's middle (.14), where /#inside, the tabs and the paging keys land. */
#top{padding-block:0}
#stack{--gap:18px;--top:78px;--p:1}/* v3.8: the stack has its own paper section (index.html 1b); still, it lands on the final frame (.ia carries its own --p when it is the scene) */
.ia{--e:clamp(0,(var(--p) - .06) / .07,1)}
#top>.scene__stage{padding:calc(var(--th-header) + clamp(16px,4vw,48px)) 0 clamp(64px,9vw,112px)}
#top:not([data-scene]),#top.scene--static,html:not(.js) #top,html:not(.js) #stack{--p:1!important}/* the markup starts at --p:0 (the first frame), so a
   pinned hero never paints its final frame before scenes.js runs; .ia carries its own --p when it is the scene */
#stack .ia,#stack .ia__stage,#stack .ia__in{display:contents}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.hero__text>*+*{margin-top:20px}
.hero__text>.hero__h1{margin-top:12px}/* under the eyebrow */
.hero__h1{max-width:12em;font-size:clamp(40px,4.4vw,64px);font-weight:400}/* r2: 300 only at 64px and up (BRAND §9.3; th.css sets h1 300 from 1143px), so the block below sets it */
.hero__lead{max-width:24em;color:var(--fg);text-wrap:balance}/* COPY §13.1: lead type in --th-text-n, never display. v3.0: balanced, so a
   three-line lead (phones, the pinned hero under 1280px) breaks "taught / by your best people.", never "best / people." */
.hero__text>.hero__act{margin-top:28px}
.hero__text>.hero__guar{margin-top:14px}
.hero__guar{font-size:16px;line-height:1.45;color:var(--fg);text-wrap:balance}/* v3.3: the longer guarantee breaks evenly at its phrases (.nw in index.html): "…from your own records / by day 10, or your money back.", never "your / own records" or "or" alone at a line end */
.hero__guar .label{display:inline;margin-right:10px}/* PAID AUDIT: steel-n narrow caps, 7.31:1 on night */
@media(max-width:719px){
.hero__text>.hero__lead{margin-top:14px}
.hero__text>.hero__act{margin-top:22px}
.hero__act .btn{width:100%}}
/* One button while the pinned hero is on screen: the header's hides (from first paint; home.js 6 sets hero-off once the
   hero has gone). Stack-pinned and still, the hero's button scrolls away, so the header's stays. */
html.js:not(.hero-off):has(#top[data-scene]:not(.scene--static)) .hdr__cta--btn{visibility:hidden}

/* The stack: six full-box SVG layers in paint order (COPY §10.2). Layer n lifts n gaps as --e runs 0 → 1; the phantom
   plate (03) fades in over .09 → .13; the objects on 01, 02 and 05 come in with the explode. Callouts sit beside the box
   from a 768px screen (--cl, --cr: the widest tag on each side; --w: the box, sized so both sides fit); under that, an
   index chip on each part, the decision callout above, and the list carries the names. The decision callout stands
   over plate 06's top corner (96.91% from the box's foot, lifted 5 gaps), clear of the plate at every size. */
.ia__art{position:relative;container:ia/inline-size;margin-top:clamp(48px,7vw,72px);padding-top:calc(5 * var(--gap) + var(--top))}
.ia__box{--w:min(100cqw,560px);position:relative;width:var(--w);aspect-ratio:390/291;margin-inline:auto}
.ia__l,.ia__ov,.ia__ov>*,.ia__i{position:absolute}
.ia__l,.ia__ov{inset:0}
.ia__l{color:var(--fg);transform:translateY(calc(var(--n) * var(--gap) * var(--e) * -1))}
:is(#top,.ia).is-near .ia__l{will-change:transform}/* translation only, so the layer stays crisp */
.ia__l svg{display:block;width:100%;height:100%;overflow:visible;fill:var(--raised);stroke:currentColor;stroke-width:1.5}
.ia__l svg *{vector-effect:non-scaling-stroke}
.ia__l .f1{fill:var(--bg)}.ia__l .ln{fill:none}.ia__l .px{fill:currentColor;stroke:none}.ia__l .ob{opacity:var(--e)}
.ia__ph{color:var(--steel);opacity:clamp(0,(var(--p) - .09) / .04,1)}
.ia__ph .ph{fill:none;stroke-dasharray:12 3 2 3 2 3}
:is(#top,.ia)[data-scene-step="2"] .ia__l:not(.l1),:is(#top,.ia)[data-scene-step="3"] .ia__l:not(.l2),:is(#top,.ia)[data-scene-step="4"] .ia__l:not(.l3),:is(#top,.ia)[data-scene-step="5"] .ia__l:not(.l4),:is(#top,.ia)[data-scene-step="6"] .ia__l:not(.l5),:is(#top,.ia)[data-scene-step="7"] .ia__l:not(.l6){color:var(--steel)}
.ia__ov .callout:not(.ia__dec),.ia__i{translate:0 -50%}
.ia__ov .callout:not(.ia__dec){--len:24px}
.ia__ov .callout__tag{width:max-content;max-width:var(--cr,26em);white-space:normal}
.ia__ov .callout:not(.callout--decide) .callout__tag{display:grid;justify-items:start;row-gap:0;padding:4px 8px}/* the stamp under the name, the tag as wide as its longer line, 40px tall: two tags a gap apart never meet */
.ia__ov .callout:not(.callout--decide) .callout__note{line-height:1.15}/* 13px x 1.15: the 12px x 1.25 line it replaced, so no tag grows */
.ia__ov .callout--r .callout__tag{max-width:var(--cl,26em)}
.ia__ov .callout__note{font-size:13px;letter-spacing:.06em}
.ia__dec{--len:28px}
/* A tag that would meet the one below it opens upward from its leader (the leader on its last line) */
.ia__ov .callout.ia__up{align-items:flex-end;translate:0 calc(-100% + 14px)}
.ia__ov .ia__up::before{margin-bottom:9.5px}
/* ...and the bottom tag (01: YOUR SYSTEMS, then NO RIP AND REPLACE, then its stamp, three lines) opens downward from its
   leader, into the free space under the stack, so it never meets 02 above */
.ia__ov .callout.ia__dn{align-items:flex-start;translate:0 -14px}
.ia__ov .ia__dn::before{margin-top:9.5px}
.ia__m{left:-50vw;right:-50vw;width:max-content;margin-inline:auto;align-items:center}
.ia__m .callout__tag{max-width:none}
.ia__i,.ia__tb{padding:1px 6px;background:var(--raised);border:1px solid var(--frame)}
.ia__i{margin-right:6px;color:var(--fg)}
.ia__tb{display:grid;width:max-content;max-width:100%;margin:16px 0 0 auto}
/* The mission line (COPY v3.0): small, steel-n caps (7.31:1 on night), centred under the stack. Still: it follows the
   drawing and its title block (from 1180px, two columns, it closes the list under the text instead). Pinned (the blocks
   below): it stands under the closed block in the first frame only and gives way, in one cut, to the tabs (the hero
   pinned) or the captions (the stack pinned) from step 1. */
.ia__mission{max-width:46em;margin:20px auto 0;text-align:center;text-wrap:balance}
#stack .ia:not([data-scene]) .scene__fx{display:none}/* neither pinned: the YOUR Si tag is the first frame's only */
@media(max-width:767px){
.ia__d{display:none}
.ia__box{--w:min(100cqw - 44px,560px);margin-left:max(40px,(100cqw - var(--w)) / 2)}}/* room for the 01 and 02 chips */
@media(min-width:768px){
#stack{--gap:40px}
.ia__box{--cl:170px;--cr:236px;--w:clamp(240px,(100cqw - 48px - var(--cl) - var(--cr)) / .813,560px);margin-left:calc((100cqw - 48px - var(--cl) - var(--cr) - .813 * var(--w)) / 2 + 24px + var(--cl) - .0922 * var(--w))}
.ia__i{display:none}}
@container ia (min-width:1080px){.ia__box{--cl:300px;--cr:380px}}/* a wide still layout: every tag on one line, as drawn */
/* Still, from 1180px: the text left, the stack right (it stays in view while its list is read under the text) */
@media(min-width:1180px){
.hero__in{grid-template-columns:minmax(0,25fr) minmax(0,47fr);grid-template-areas:"text art" "cap art";column-gap:clamp(32px,3.6vw,64px)}
.hero__text{grid-area:text;container-type:inline-size}
.hero__h1{max-width:none;font-size:clamp(48px,14.2cqw,76px)}/* still: three lines in the column ("Built to / eliminate manual / back-office work.", the .nw spans hold the breaks), never smaller than an H2 (r2) */
.ia__art{grid-area:art;position:sticky;top:calc(var(--th-header) + 16px);margin-top:0}
.ia__steps{grid-area:cap}
.ia__mission{grid-column:1;grid-row:3;margin:32px 0 0;text-align:left}}/* the sticky drawing slides over the whole grid's height: the line closes the list */

/* The list: every word of the drawing, one item per frame. Still, it reads as a list; the empty first item (the closed
   block has no caption) never shows. The dimension lines (.ia__x) are for screen readers: the tags carry the stamps, and
   the numbers are on /proof. On phones, still, the six layer items fold behind one button (home.js 6). */
.ia__steps{margin-top:clamp(32px,5vw,48px)}
.ia__steps>li{display:grid;justify-items:start;gap:6px}
.ia__steps>li+li{padding-top:16px;border-top:1px solid var(--line)}
.ia__steps>li.ia__s0,.ia__steps>li.ia__s0+li{padding-top:0;border-top:0}
.ia__steps>.ia__s0{display:none}
.ia__cap{max-width:56ch;font-size:19px;line-height:1.45;color:var(--fg);text-wrap:pretty}
.ia__h{color:var(--fg)}
.ia__x{color:var(--steel)}
.ia__steps .ia__x:not(.ia__pl){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:768px){.ia__steps .ia__pl{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}/* the tag on the drawing says it */
@media(max-width:359px){.ia__cap{font-size:17px}.ia__live .live{font-size:26px}}
.ia__more{display:none}
@media(max-width:767px){
.js #stack .ia.scene--static .ia__more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:2px;padding:0;border:0;background:none;color:var(--fg);font-size:17px;line-height:1.3;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.js #stack .ia.scene--static .ia__more::after{content:"+";font-family:var(--th-font-mono);text-decoration:none}
.js #stack .ia.scene--static .ia__more[aria-expanded=true]::after{content:"\2212"}
.js #stack .ia.scene--static .ia__steps:not(.is-open)>li:nth-child(n+3):not(.ia__fin){display:none}}
/* The live strip (COPY §10.2): one head stamp, the last Brazos draft, the line; only in the final frame */
.ia__live{display:grid;justify-items:start;gap:10px;margin-top:6px;opacity:clamp(0,(var(--p) - .92) / .04,1)}
.ia__live .readout{grid-auto-flow:column;align-items:baseline;gap:10px}
html:not(.js) .ia__live{display:none}
.ia__live .readout[data-empty]{display:none}/* no number read yet: no empty readout (never "--" in Doto) */
.js #top[data-scene]:not(.scene--static) .ia__live .readout[data-empty]{display:grid;visibility:hidden}/* pinned: it keeps its row, so home.js 6 measures the final caption at its full height */

@keyframes ia-drop{0%{translate:0 -56px;opacity:0}72%{translate:0 2px;opacity:1}100%{translate:0 0;opacity:1}}
@keyframes ia-cut{from{visibility:hidden}}

/* The stack pinned on its own (.ia is the scene): every screen the hero itself doesn't pin on, from 720x680 with
   motion allowed (PIN GATE, in step with scenes.js and index.html's second inline gate; r3: phones keep it still). The text stays still above it.
   The stage: the drawing (--mt above the closed block for its YOUR Si tag; the closed block stands in the middle of the
   explode's zone and, as the layers lift, the box moves down by the other half, so the decision callout's top ends
   where the zone begins), then the step's caption, then the tabs from 720px. --D: room for the decision callout above the opened stack. */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px){
.js #stack .ia[data-scene]:not(.scene--static){display:block;margin-top:clamp(8px,2vw,24px)}
.js #stack .ia[data-scene]:not(.scene--static) .ia__stage{display:grid;grid-template-rows:minmax(0,1fr);align-content:stretch;padding:var(--th-header) 0 0}
.js #stack .ia[data-scene]:not(.scene--static) .ia__in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;row-gap:12px;min-height:0;padding-block:8px 16px}
.js #stack .ia[data-scene]:not(.scene--static) .ia__art{grid-area:1/1;position:relative;top:auto;container:ia/size;min-height:0;margin:0;padding:0}
.js #stack .ia[data-scene]:not(.scene--static) .ia__box{--mt:56px;--D:calc(80px - .0231 * var(--w));--w:clamp(160px,min(100cqw - 44px,(100cqh - var(--mt) - 5 * var(--gap) - 84px) / .7229),560px);margin-top:max(var(--mt),(100cqh - .7152 * var(--w) - 5 * var(--gap) - 80px) / 2);transform:translateY(calc((5 * var(--gap) + var(--D)) * (.5 + .5 * var(--e))))}/* the whole explode (.7152w + 5 gaps + the callout) centred when the row has room, else from --mt. r3: the closed block starts in the middle of that zone (it sat at its top, over an empty half-screen of grid) and drops the other half as the layers lift, as in the pinned hero; the final frame is unchanged */
.js #stack .ia[data-scene]:not(.scene--static) .ia__tb,.js #stack .ia[data-scene]:not(.scene--static) .ia__tabs{display:none}
.js #stack .ia[data-scene]:not(.scene--static) .ia__steps{grid-area:2/1;margin:0}
.js #stack .ia[data-scene]:not(.scene--static) .ia__steps>li{align-self:start;justify-items:center;padding-top:0;border-top:0}
.js #stack .ia[data-scene]:not(.scene--static) .ia__steps{justify-self:center;width:min(100%,760px);text-align:center}/* v3.8: one axis: the drawing, the mission line, the tabs and the captions all centred */
.js #stack .ia[data-scene]:not(.scene--static) .ia__live{justify-items:center}
.js #stack .ia[data-scene]:not(.scene--static) .ia__cap{margin-inline:auto}
.js #stack .ia[data-scene]:not(.scene--static) .ia__mission{grid-area:2/1;align-self:start;margin:0 auto;text-align:center}/* the step-0 caption is empty */
.js #stack .ia[data-scene].is-step-1:not(.scene--static) .ia__mission{visibility:hidden}
.js #stack .ia[data-scene]:not(.scene--static) .ia__cap{font-size:clamp(17px,2.3svh,19px)}
.js #stack .ia[data-scene]:not(.scene--static) .ia__live:not([data-stale]) [data-ia-line]{display:none}/* as in the pinned hero */
.js #stack .ia[data-scene]:not(.scene--static):not([data-scene-step]) .ia__steps>li{opacity:0}/* before scenes.js: no caption yet */
.js #stack:not(.is-landed) .ia[data-scene] .ia__steps .scene__step{transition:none}/* the first frame paints in one cut */
}
/* under 768px (720-767 since r3; phones keep the stack still): the YOUR Si tag stands over the closed block's top corner, as the decision callout does over the open one */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (max-width:767px){
.js #stack .ia[data-scene]:not(.scene--static) .ia__si{display:inline-flex;left:-50vw!important;right:-50vw;top:auto!important;bottom:calc(96.91% + 4px);width:max-content;margin-inline:auto;translate:none;flex-direction:column-reverse;align-items:center;--len:20px}
.js #stack .ia[data-scene]:not(.scene--static) .ia__si::before{width:9px;height:calc(var(--len) * var(--m,1));background:linear-gradient(currentColor,currentColor) center bottom/9px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat}
}
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (min-width:720px){
.js #stack .ia[data-scene]:not(.scene--static) .ia__tabs{grid-area:3/1;display:grid;width:min(100%,760px);margin:0 auto 6px}/* v3.8: on the drawing's axis, as the mission line and the captions */
.js #stack .ia[data-scene]:not(.scene--static) .ia__tabs button{min-height:44px;padding:0 4px}
.js #stack .ia[data-scene]:not(.scene--static):not(.is-step-1) .ia__tabs{opacity:0;pointer-events:none}
.js #stack .ia[data-scene]:not(.scene--static) .ia__tabs:focus-within{opacity:1;pointer-events:auto}/* v3.8: hidden by opacity, not visibility, so the six layer tabs stay in the keyboard's tab order and show on focus */
}
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (min-width:768px){
.js #stack .ia[data-scene]:not(.scene--static){--gap:clamp(34px,4.6svh,40px)}
.js #stack .ia[data-scene]:not(.scene--static) .ia__box{--mt:8px;--w:clamp(160px,min((100cqw - 48px - var(--cl) - var(--cr)) / .813,(100cqh - var(--mt) - 5 * var(--gap) - 84px) / .7229),560px)}
.js #stack .ia[data-scene]:not(.scene--static) .ia__h{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}/* the tags say them */
.js #stack .ia[data-scene]:not(.scene--static) .ia__cap{max-width:60ch}
}
/* From 1180px the still layout is two columns; with the stack pinned on its own the hero is one column, as on a tablet */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (min-width:1180px){
.js #top:has(.ia[data-scene]:not(.scene--static)) .hero__in{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
.js #top:has(.ia[data-scene]:not(.scene--static)) .hero__text{grid-area:auto;container-type:normal}
.js #top:has(.ia[data-scene]:not(.scene--static)) .hero__h1{max-width:12em;font-size:clamp(40px,4.4vw,64px)}
}
/* The load intro, stack pinned, from 1024px (phones and tablets: the closed block in one cut, COPY §13.2) */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (min-width:1024px){
.js.th-intro #stack[data-intro=drop]:not(.is-landed) .ia[data-scene]:not(.scene--static) .ia__l:not(.ia__ph){animation:ia-drop 360ms var(--th-ease) calc(var(--n) * 70ms) backwards}
.js.th-intro #stack[data-intro=drop]:not(.is-landed) .ia[data-scene]:not(.scene--static) .ia__si{animation:ia-cut 1ms steps(1,end) 740ms backwards}
}

/* The hero pinned, from 1160x640 (and only if the stage fits, home.js 6; the same size as index.html's inline gate and
   data-pin-min): the text column holds still at the top left; the captions take turns under it (one at a time,
   top-aligned); the stack fills the right column, centred: the closed block in the first frame, the opened stack after
   it (the box drops half the explode as the layers lift, so both are centred). The tabs cut in at .06; the live strip is
   in the last caption from .92; the list's heading and dimension lines are for screen readers here, the tags say them.
   No title block here: the drawing's words are its tags. */
@media screen and (prefers-reduced-motion:no-preference) and (min-width:1160px) and (min-height:640px){
html:not(.bar-off) #top{--bar:48px}
.js #top[data-scene]:not(.scene--static){--gap:clamp(36px,5.4svh,56px)}
.js #top[data-scene]:not(.scene--static)>.scene__stage{grid-template-rows:minmax(0,1fr);align-content:stretch;padding:var(--th-header) 0 var(--bar,0px)}
.js #top[data-scene]:not(.scene--static) .hero__in{grid-template-columns:minmax(0,25fr) minmax(0,47fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"text art" "cap art" "cap tabs";column-gap:clamp(32px,3.6vw,64px);row-gap:12px;padding-block:clamp(20px,4svh,48px) 16px}
.js #top[data-scene]:not(.scene--static) .hero__text{grid-area:text;container-type:inline-size}
.js #top[data-scene]:not(.scene--static) .hero__h1{max-width:none;font-size:clamp(36px,10.3cqw,58px)}/* two lines in the column (under 760px tall, or .h1-fit2 below) */
.js #top[data-scene]:not(.scene--static) .ia__art{grid-area:art;align-self:stretch;container:ia/size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);margin:0;padding:0}
.js #top[data-scene]:not(.scene--static) .ia__box{--D:calc(80px - .0231 * var(--w));--w:clamp(240px,min((100cqw - 48px - var(--cl) - var(--cr)) / .813,(100cqh - 5 * var(--gap) - 88px) / .7229),560px);grid-area:1/1;align-self:center;transform:translateY(calc((5 * var(--gap) + var(--D)) / 2 * var(--e)))}
.js #top[data-scene]:not(.scene--static) .ia__tb{display:none}
.js #top[data-scene]:not(.scene--static) .ia__steps{grid-area:cap;align-self:start;margin-top:clamp(24px,4svh,44px);padding-top:18px;border-top:1px solid transparent}
.js #top.is-step-1[data-scene]:not(.scene--static) .ia__steps{border-top-color:var(--line)}
.js #top[data-scene]:not(.scene--static) .ia__steps>li{align-self:start;padding-top:0;border-top:0}
.js #top[data-scene]:not(.scene--static) .ia__cap{font-size:18px;max-width:34em;text-wrap:balance}
.js #top[data-scene]:not(.scene--static) :is(.ia__h,.ia__x){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js #top[data-scene]:not(.scene--static) .ia__live:not([data-stale]) [data-ia-line]{display:none}/* live, the strip is the stamp and the last draft; the line comes back to say the rack can't be reached */
.js #top[data-scene]:not(.scene--static) .ia__tabs{grid-area:tabs;width:min(100%,760px);margin-bottom:6px}
.js #top[data-scene]:not(.scene--static) .ia__tabs button{padding:0 4px}
.js #top[data-scene]:not(.scene--static):not(.is-step-1) .ia__tabs{visibility:hidden}
.js #top[data-scene]:not(.scene--static) .ia__mission{grid-area:tabs;align-self:center;margin:0 auto 6px;text-align:center}/* the tabs' cell: no new row */
.js #top[data-scene].is-step-1:not(.scene--static) .ia__mission{visibility:hidden}
.js #top[data-scene]:not(.is-landed) .ia__steps .scene__step{transition:none}/* the first frame paints in one cut */
.js #top[data-scene]:not(.scene--static):not([data-scene-step]) .ia__steps>li{opacity:0}/* before scenes.js: no caption yet */
/* The load intro (data-intro="drop", GATED BRAND §9.10, COPY §9 item 36): once per fresh load at the top (th-intro in
   index.html's head; home.js lands it). The six layers drop into place bottom to top and settle as one closed block
   (translate and opacity only, about 0.7 s), then the YOUR Si tag cuts in. No words move. data-intro="cut": the closed
   block in one cut. */
.js.th-intro #top[data-scene][data-intro=drop]:not(.scene--static):not(.is-landed) .ia__l:not(.ia__ph){animation:ia-drop 360ms var(--th-ease) calc(var(--n) * 70ms) backwards}
.js.th-intro #top[data-scene][data-intro=drop]:not(.scene--static):not(.is-landed) .ia__si{animation:ia-cut 1ms steps(1,end) 740ms backwards}
}
/* Hierarchy (r1, r2 reviews: the H1 was the smallest headline on the page, 41-46px beside 59-64px H2s on 1280-1440
   laptops). Still from 1180px it always sets in three lines (above). Pinned from 760px tall it sets in three lines too,
   at 13cqw (52px at 1280x800, 56px at 1366x768), and at the column's full 14.2cqw from 1400x860; if the text column
   then doesn't fit the stage, home.js 6 sets .h1-fit2 and measures again with two lines, before it would unpin the
   hero. Under 760px tall the pinned hero keeps two lines (no height to spare). Weight 300 only where it is 64px and up.
   From 1800x1000 the pinned text column moves down toward the stack's band (the measure stays the site's 1360px). */
@media screen and (prefers-reduced-motion:no-preference) and (min-width:1160px) and (min-height:760px){
.js #top[data-scene]:not(.scene--static) .hero__h1{font-size:clamp(44px,13cqw,64px)}
}
@media(min-width:1400px) and (min-height:860px){
#top .hero__in .hero__h1{font-size:clamp(48px,14.2cqw,76px)}
.js #top[data-scene]:not(.scene--static) .hero__h1{font-size:clamp(48px,14.2cqw,76px)}
}
.js #top.h1-fit2[data-scene]:not(.scene--static) .hero__h1{font-size:clamp(36px,10.3cqw,58px)}
@media(min-width:1440px) and (min-height:860px){#top:not(.h1-fit2) .hero__in .hero__h1{font-weight:300}}
@media screen and (prefers-reduced-motion:no-preference) and (min-width:1800px) and (min-height:1000px){
.js #top[data-scene]:not(.scene--static) .hero__text{padding-top:clamp(0px,(100svh - 940px) * .4,200px)}
}
/* A short pinned hero (under 760px tall): no tab row (the paging keys and the scroll still step) and no mission line (it
   would take a row from the stack; the title and meta carry it), and the captions sit closer under the guarantee, so
   the stack keeps its 300px and the text column its fit */
@media screen and (prefers-reduced-motion:no-preference) and (min-width:1160px) and (min-height:640px) and (max-height:759px){
.js #top[data-scene]:not(.scene--static) .ia__tabs,.js #top[data-scene]:not(.scene--static) .ia__mission{display:none}
.js #top[data-scene]:not(.scene--static) .hero__in{row-gap:0}
.js #top[data-scene]:not(.scene--static) .ia__steps{margin-top:16px;padding-top:14px}
}
/* v3.4 (FUNNEL-AUDIT §4, the shorter pin): 1.6 screens leave each layer about a tenth of a screen of scroll, too little
   to read a caption. Pinned, the drawing's tags (each with its own stamp) carry the six layers, so the layer captions
   01-06 stay in the list for screen readers (opacity only, never display or visibility) and the opening line holds from
   step 1 until the closing caption. Still, reduced-motion and no-JS layouts keep every caption. Under 768px the stack
   has no tags (chips only), so there the captions still take turns. */
@media screen and (prefers-reduced-motion:no-preference) and (min-height:600px) and (min-width:768px){
.js #top[data-scene]:not(.scene--static) .ia__steps>li:nth-child(n+3):not(.ia__fin),
.js #stack .ia[data-scene]:not(.scene--static) .ia__steps>li:nth-child(n+3):not(.ia__fin){opacity:0!important;pointer-events:none}
.js #top.is-step-1[data-scene]:not(.scene--static):not(.is-step-8) .ia__steps>li:nth-child(2),
.js #stack .ia[data-scene].is-step-1:not(.scene--static):not(.is-step-8) .ia__steps>li:nth-child(2){opacity:1}
}
@media print{.ia__live{display:none}#stack .ia__art{break-inside:avoid;page-break-inside:avoid;padding-top:0}#stack .ia__l{transform:none}#stack .ia__ov,#stack .ia__ph,#stack .ia__i{display:none}}

/* (v3.4: blocks 2 to 5, 8 and 10 left home with #office, #floor, #ray, #benefits' cells, #desks' tile, #systems, #model
   and #owners; the new sections are block 11 at the end) */
/* 6 · #pane · paper (COPY §12.6): WATCH IT DRAFT | ASK IT A QUESTION. The pane keeps its own night product surface (scoped
   .on-dark tokens and grain) inside a 1px ink frame. Without JS the toggle stays hidden and both panels show, stacked. */
.pv__toggle{display:flex;width:100%;max-width:520px;margin-bottom:24px}
.pv__toggle button{flex:1 1 0;padding:0 12px}
.pv__panel+.pv__panel{margin-top:72px}
.is-toggled .pv__panel+.pv__panel{margin-top:0}
.pv__intro{margin:16px 0 28px}
#brazos{background:var(--bg);color:var(--fg);border-color:var(--th-ink)}
.pane__head [data-sim-clock]{color:var(--fg)}
.depts li{min-height:24px}
/* Areas (v3.0): home.js 3 groups the desks when /api/sim sends areas: one item per area, its name (.depts__ah) and a nested
   .depts of its desks, so the list counts areas and desks apart; an older read without them renders the plain list */
.depts .depts__area{display:grid;gap:12px}
.depts__ah{margin-top:6px;font:500 13px/1.25 var(--th-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.depts__area:first-child>.depts__ah{margin-top:0}
.ctx__line+.ctx__line{color:var(--lead);font-size:15px}
.ctx .th-decide{line-height:1.35}
.ctx details>div{margin-top:6px;font-size:15px;line-height:1.45;color:var(--lead)}
.ctx details>div>*+*{margin-top:.5em}
.ctx details ul{padding-left:1.1em;list-style:square}
.ctx details strong{font-weight:600;color:var(--fg)}
.feed__empty{font-size:15px;color:var(--steel)}
.pane__stale{padding:14px 16px;border-bottom:1px solid var(--frame);font-size:16px;line-height:1.45;color:var(--fg)}/* inside the frame, under the head (r2) */
#brazos[data-stale] :is(.ctx__line,.depts li){color:var(--steel)}/* a kept reading: steel, stamped LAST READ (BRAND §9.10) */
/* Live values on home (BRAND §9.10): never a placeholder in Doto. A value not read yet is empty and holds its line
   (no jump when the first read lands), its unit waits with it, and the number never wraps away from its unit. A read
   with no value yet (no draft today) says NONE YET in mono. Never read at all (the rack down on load): the pane shows
   its head, NOT ANSWERING and the one line under it, no empty readouts or columns. */
:is(#brazos,.ia__live,.dk__live,[data-gateway]) .readout__v{flex-wrap:nowrap}
:is(#brazos,.ia__live,.dk__live,[data-gateway]) .live:empty{display:inline-block;min-height:1em}
:is(#brazos,.ia__live,.dk__live,[data-gateway]) .live:empty+.unit{visibility:hidden}
#brazos .live[data-none]::before{content:"None yet";font:500 13px/1.4 var(--th-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
#brazos[data-down] .pane__readouts,#brazos[data-down] .pane__col:not(:first-child){display:none}
#brazos[data-down] .pane__cols{display:block}
@media(min-width:600px){#brazos[data-down] #sim-depts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px 24px}#brazos[data-down] .depts__area{align-content:start}#brazos[data-down] .depts__ah{margin-top:0}}
@media(min-width:960px){#brazos[data-down] #sim-depts{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* PAUSE UPDATES (WCAG 2.2.2): pressed, the pane's cards and counts hold still; the stamp still reads the time */
.pane__head{align-items:center}
.pane__pause{min-height:44px;padding:0 12px;border:1px solid var(--frame);border-radius:0;background:none;color:var(--fg);font:500 13px/1.2 var(--th-font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media(hover:hover){.pane__pause:hover{box-shadow:inset 0 0 0 1px var(--frame)}}
.pane__pause:active{box-shadow:inset 0 0 0 1px var(--frame)}
.pane__pause[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.pane__note{margin-top:20px}
/* Ask: the chat keeps its name inside its frame (BRAND §7) */
.chat__name{padding:14px 16px 0}
.chat__log{position:relative}
.chat[data-busy] .chat__form .btn{opacity:.55;pointer-events:none}/* aria-busy sits on #chat-log, so #chat-status stays outside the busy subtree */
.chat__log:focus{outline:none}
.chat__log:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.chat__log>[tabindex="-1"]:focus{outline:none}.chat__log>[tabindex="-1"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chat__form textarea.input{min-height:52px;max-height:200px}
.chat__wait span{font:inherit;letter-spacing:inherit}
.msg__body strong{font-weight:600}
.msg__body code{font-family:var(--th-font-mono);font-size:.88em}
.msg__body .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.msg__body table{border-collapse:collapse;font-size:15px;line-height:1.4}
.msg__body th,.msg__body td{padding:6px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
.msg__body th{font-weight:600}
.msg__foot .example{max-width:100%}
.msg__body .example{margin-top:4px}
.msg__body .th-decide{font-weight:500}
.ask__privacy{margin-top:16px;max-width:72ch}

/* 9 · #start · night (BRAND §9.5): frame-n outlines, header cells with paper fill and ink text; each tier on its own
   line, so a tier name never parts from its price */
#start .compare__head{background:var(--th-paper);color:var(--th-ink)}
#start .actions{column-gap:28px}
.compare .num span{display:block}
.compare .num .num__size{display:block;margin:2px 0 8px;font:500 13px/1.35 var(--th-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lead)}/* r2: the size each tier is for, beside its price */
.compare .num .num__per{display:block;margin-top:4px;font-size:16px;line-height:1.4;letter-spacing:0;color:var(--lead)}
.start__line{margin-top:16px;max-width:72ch}

/* Print (r2): #brazos re-declares the night tokens on itself (.on-dark), which beat th.css's print reset, so its desk
   names and card lines printed light grey on white. Ink on paper here, at ID weight. */
@media print{#brazos{--bg:#fff;--fg:#000;--lead:#222;--steel:#444;--frame:#000;--line:#999;--raised:#fff;background:#fff!important;color:#000!important}}

/* 11 · v3.4 home (FUNNEL-AUDIT §4): about 8 desktop and 12 phone screens. Sections run tighter than th.css's --th-section
   (200px a side at 1440) on home only; the hero keeps its own. */
.ps-list{display:grid;gap:10px;max-width:62ch;padding-left:1.4em;list-style:decimal;color:var(--fg)}
/* Hero: two doors, the status line, the guarantee's terms link */
.hero__text>.hero__act{margin-top:24px}
.hero__act .door2{min-height:40px}
.hero__text>.hero__status{margin-top:16px;color:var(--steel);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hero__text>.hero__status+.hero__guar{margin-top:8px}
:is(.hero__guar,.start__guar) .terms{margin-left:4px;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media(max-width:719px){.hero__act .btn{width:100%}.hero__text>.hero__act{margin-top:20px}}
/* 2 · What Si does: the sentence, the strip and the founding line; then the example (figures left, the lines right) */
#benefits .strip{margin-top:32px}
#benefits .fline{margin-top:14px}
.ex{display:grid;gap:20px 48px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line)}
.ex__stamp{justify-self:start}
.ex__figs{display:grid;gap:8px;align-content:start}
.ex__big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.ex__n{font-size:clamp(56px,7vw,96px);line-height:.95;letter-spacing:-.05em}
.ex__u{font-size:21px;letter-spacing:-.03em}
.ex__v{margin-right:8px;font-size:28px;letter-spacing:-.04em}
.ex__k,.ex__line{color:var(--lead)}
.ex__side{display:grid;gap:14px;align-content:start;justify-items:start;max-width:58ch}
.ex__line{font-size:17px;line-height:1.5}
.ex__pay{display:grid;gap:8px;padding:0;list-style:none}
.ex__pay li{position:relative;padding-left:18px;font-size:17px;line-height:1.45;color:var(--fg)}
.ex__pay li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1.5px;background:var(--fg)}
@media(min-width:900px){.ex{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.ex__stamp{grid-column:1/-1}}
/* 3 · A day with Si: the wide photo panel (v3.5 block below), then three tabs, one panel at a time: the example list,
   and the decision card beside it from 960px (v3.5: no photo in the tabs). No JS: all three, stacked. */
#day>.wrap.day{margin-top:0}
.day__toggle{display:flex;width:100%;max-width:560px;margin-bottom:24px}
.day__toggle button{flex:1 1 0;padding:0 10px}
.day__panel{display:grid;gap:20px 40px;align-items:start}
.day__panel+.day__panel{margin-top:48px}
.is-toggled .day__panel+.day__panel{margin-top:0}
.day__list{display:grid;gap:14px;align-content:start}
.day__list>.stamp{justify-self:start}
.day__card{display:grid;gap:8px;justify-items:start;padding-top:14px;border-top:1px solid var(--line)}
#day .doors{margin-top:24px}
/* 4 · The pane, trimmed to about 1.3 screens: three waiting cards, the log beside them, the desks behind a disclosure */
#brazos .pane__col:last-child{display:none}/* the log stays in the page for home.js, not on screen: home shows the waiting cards (§4) */
#brazos .pane__cols{display:block}
#pane .flow>.visual{margin-top:32px}
#brazos[data-down] .pane__cols{display:none}
.dkx{padding:0 16px}/* r1 fix: the same 16px inset as .pane__head, .pane__col and .pane__foot; the rule above is .pane__col's own border (or .pane__stale's when the pane is down), so no second line */
.dkx>summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;min-height:48px;padding:12px 0;font-weight:500;list-style:none;cursor:pointer}
.dkx>summary::-webkit-details-marker{display:none}
.dkx>summary>span:first-child{text-decoration:underline;text-underline-offset:3px}
.dkx__n{color:var(--steel);font-size:13px}
.dkx #sim-depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 24px;padding-bottom:8px}
.pv__cta{margin-top:32px}
.pv__proof{margin-top:12px}
/* 5 · How it starts: the guarantee under the ladder, then the founding customers, then both doors */
.start__guar{margin-top:20px;font-size:17px;line-height:1.45;color:var(--fg)}
.start__guar .label{display:inline;margin-right:10px}
#start .start__line{margin-top:10px}
#start .flow>.visual{margin-top:clamp(32px,4vw,48px)}
#start .fnd a{color:var(--fg)}
/* 6 + 7 · The rules and the questions, side by side from 960px */
.qa{display:grid;gap:56px}
.qa .rows>*{padding:14px clamp(14px,2vw,22px);font-size:17px;line-height:1.4}
.qa .rows .mono{margin-right:12px;color:var(--steel)}
.qa__sys{max-width:52ch}
.qa__faq .faq summary{min-height:56px;font-size:clamp(17px,1.4vw,19px)}
@media(min-width:960px){.qa{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}.qa h2:not(.label){font-size:clamp(36px,3.4vw,48px)}}
/* 8 + 9 · Founder and the last call to action */
.nx{display:grid;gap:40px}
.nx__who{display:grid;gap:10px;justify-items:start;max-width:52ch;padding-top:18px;border-top:1px solid var(--line)}
.nx__line{font-size:18px;line-height:1.45;color:var(--fg)}
@media(min-width:960px){.nx{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end}}
/* v3.4 r2 (measured 9.7 screens at 1440): tighter sections, the benefits head in two columns, three waiting cards in a
   row, the founding block beside the doors, a smaller day photo */
main>.sec:not(#top){padding-block:max(clamp(48px,5vw,72px),calc(var(--th-header) + 20px)) clamp(48px,5vw,72px)}/* v3.5: the top clears the sticky header, so a section's label never sits under it (phones) */
.bn{display:grid;gap:28px}
.bn__t>*+*{margin-top:0}
@media(min-width:1100px){.bn{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}.bn .lead{max-width:34em}#benefits .bn .strip{margin-top:0}}
@media(min-width:960px){#sim-waiting{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}#sim-waiting>li{margin:0}#sim-waiting>.feed__empty{grid-column:1/-1}}
@media(min-width:960px){.day__list{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:14px 56px}.day__list>.stamp,.day__list>.ps-list{grid-column:1}.day__card{grid-column:2;grid-row:1/span 2;align-self:start}}
.start__end{display:grid;gap:32px;margin-top:clamp(32px,4vw,48px)}
#start .start__end>.doors{margin-top:0}
@media(min-width:1100px){.start__end{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:end}}

/* == v3.5 · the cinematic restyle (owner 2026-10-09). The deep ground, the night header and the statement type are
   th.css 2b/2c (every page); here: the hero screen, the statement screens, the wide photo panels and the inline form.
   Red still only means "a person decides"; the buttons are our own. == */

/* 1 · The hero (v3.8 "Atomic panel", owner 2026-10-09: "the hero image / video you can hardly see"): the words on
   plain night on the left; the film of the office and the shop floor as one large, sharp panel on the right, bleeding
   off the right edge and fading softly into night on its other three sides (.cine, index.html), so the hero never
   ends in a hard edge. Text never sits on the film: the panel starts 8px clear of the text column (--tw) and its
   first 17% is the fade. It is sized by width, so the woman at her desk (left of the frame) and the welder's glow
   through the window (right) both show: the frame's right 14% (a press) is cropped, never the glow. The still is the
   fallback (no JS, reduced motion, Save-Data) and sits in exactly the film's frame (the wider still, cropped at
   37.3%), so the film fades in over it without a jump (home.js 8). People hold still (BRAND §9.8): no drift, no blur.
   Phones and tablets (under 900px): the panel is a full-width band under the header and the words follow it; the
   band is capped at 34% of the screen's height (--band), so on a short phone (375x667, or Safari with its toolbars)
   the Book button stays above the fold and a phone on its side still shows the headline.
   v3.8: the stack left the hero for its own paper section (#stack, index.html 1b), centred, one column; these
   override section 1's side-by-side and pinned-hero layouts, which no longer apply. */
#top{overflow:clip;--tw:clamp(340px,35vw,540px)}
#top>.scene__stage{padding-bottom:0}/* v3.8: the hero is one screen; the paper's fade band (#stack's top edge) is the soft end */
main>#stack.sec{padding-top:0}/* the pinned stage clears the header itself; still, the drawing's own top room (5 gaps + --top) does */
@media(min-width:960px){main>#stack.sec{margin-top:calc(-1 * clamp(40px,8svh,96px))}}/* v3.8: the paper's fade starts in the hero's empty foot (its text's bottom padding, never under the words), so the first screen ends on it */
html:not(.bar-off){--bar-h:48px}
.cine{position:absolute;inset:0 0 auto;z-index:-1;height:calc(100svh - var(--bar-h,0px));overflow:hidden;container-type:size;pointer-events:none}
.cine__still,.cine__film,.cine__si{--tl:max(var(--th-gutter),(100cqw - 1360px) / 2);--wv:min((100cqw - var(--tl) - var(--tw) - 8px) / .86,(100cqh - var(--th-header) - 24px) * 1.7778);position:absolute;top:calc(var(--th-header) + (100cqh - var(--th-header) - var(--wv) * .5625) / 2);right:calc(var(--wv) * -.14);width:var(--wv);max-width:none;height:calc(var(--wv) * .5625);object-fit:cover;object-position:50% 50%;filter:brightness(.94) saturate(.96);-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 8%,#000 17%),linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 8%,#000 17%),linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 100%);mask-composite:intersect}
.cine__still{object-position:37.3% 50%}
.cine__film{opacity:0;transition:opacity 1.2s var(--th-ease)}
.cine__film.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.cine__film{display:none}}
@media print{.cine{display:none}}
#top .hero__in{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}
#top .hero__text{grid-area:auto!important;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--bar-h,0px) - var(--th-header) - clamp(16px,4vw,48px));padding-bottom:clamp(40px,8svh,96px);container-type:normal!important}
@media(min-width:900px){#top .hero__text{max-width:var(--tw)}}
/* Under 900px: the band. 125% of the width at 16:9 shows the frame from 7% to 87% (her desk to the glow); the words
   start where the band has faded out, so they sit on plain night */
@media(max-width:899px){
#top{--band:min(70.4vw,34svh)}
@media(max-height:700px){#top{--band:min(70.4vw,28svh)}}/* a short phone (375x667, Safari with its toolbars): the Book button above the fold */
.cine{height:calc(var(--th-header) + var(--band))}
.cine__still,.cine__film,.cine__si{--wv:125cqw;top:var(--th-header);right:auto;left:calc(var(--wv) * -.07);height:var(--band);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 60%,transparent 100%)}
#top>.scene__stage{padding-top:calc(var(--th-header) + var(--band))}
#top .hero__text{min-height:0;padding-bottom:clamp(40px,8svh,72px)}
.cine__film{object-position:50% 40%}
html:not(.js) #top .hero__guar{padding-right:64px}}/* no JS, no hero-on: the floating button stays, so the last line keeps clear of it */
#top .hero__text>*{max-width:44rem}
#top .hero__h1{max-width:12em!important;font-size:clamp(42px,4.6vw,72px)!important}
@media(min-width:1440px){#top .hero__h1{font-weight:300}}
#top .hero__lead{max-width:26em;font-size:clamp(19px,1.5vw,23px);line-height:1.45}
@media (max-width:899px) and (max-height:620px){#top{--band:min(70.4vw,19svh)}#top .hero__h1{font-size:36px!important}#top .hero__text>*+*{margin-top:14px}}/* v3.8: a short phone with its toolbars (375x548, 390x600): the Book button above the fold */
/* The stack's own section (v3.8): paper, so the drawing is ink on paper (every colour in it is a ground role) */
.stack__in{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
#stack .ia__art{position:relative!important;top:auto!important;grid-area:auto!important;margin-top:0}
#stack .ia__steps{grid-area:auto!important;max-width:760px;margin-inline:auto}/* still and reduced motion: the list's column on the drawing's axis (the words stay left, a list) */
#stack .ia__mission{grid-area:auto!important;grid-row:auto!important;margin-inline:auto!important;text-align:center!important}

/* 2 · Statement screens: the label and the line, then the detail (.say and .say-screen: th.css 2c). A statement takes
   about 0.6 of a screen on a desktop, never a full one; inside a section (--in) a little less. */
.say-screen{min-height:min(38svh,360px)}
.say-screen--short{min-height:min(34svh,320px)}
.say-screen--in{min-height:min(34svh,320px);padding-bottom:clamp(8px,2vw,24px)}
#pane .flow>.say-screen+.visual,#start .flow>.say-screen+.visual{margin-top:8px}
@media(max-width:719px){.say-screen,.say-screen--short,.say-screen--in{min-height:0;padding-block:0 8px}}
@media(max-width:719px){main>.sec:not(#top){padding-bottom:32px}}
#benefits .say-screen{margin-bottom:clamp(16px,2vw,24px)}
#benefits .bn__lead{max-width:34em}
.qa__h{font-size:clamp(30px,3vw,44px)}

/* 3 · Wide photo panels: the photo bleeds off the right edge and fades in from the left; the line stands over its left
   part. Phones: the photo full-bleed on top, the words over its fading foot. Decorative (aria-hidden, empty alt). */
.wp{position:relative;display:grid;align-items:center;min-height:min(58svh,540px);margin-bottom:clamp(24px,3vw,40px)}
.wp__photo{position:absolute;top:0;bottom:0;right:0;width:min(70vw,1320px);margin:0;overflow:hidden}
.wp__photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 40%}
.wp__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111612 0%,rgba(17,22,18,.86) 22%,rgba(17,22,18,.35) 52%,rgba(17,22,18,0) 78%),linear-gradient(0deg,rgba(13,17,14,.6),rgba(13,17,14,0) 40%)}
.wp--rules .wp__photo::after{background:linear-gradient(90deg,#0D110E 0%,rgba(13,17,14,.88) 22%,rgba(13,17,14,.35) 52%,rgba(13,17,14,0) 78%),linear-gradient(0deg,rgba(13,17,14,.6),rgba(13,17,14,0) 40%)}
.wp__text{position:relative;z-index:1}
.wp__text .say{max-width:9.5em;font-size:clamp(40px,calc(5vw + 8px),88px);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.wp__text .lead{max-width:26em;color:var(--fg);text-shadow:0 1px 16px rgba(0,0,0,.7)}
.wp__text .stamp{justify-self:start;width:max-content}
@media(max-width:959px){
.wp{display:block;min-height:0}
.wp__photo{position:relative;width:auto;aspect-ratio:16/10;max-height:52svh}
.wp__photo::after{background:linear-gradient(180deg,rgba(17,22,18,0) 30%,rgba(17,22,18,.8) 70%,#111612 88%)}/* v3.8: night under the label sooner (its contrast over the film, 4.5:1 or better) */
.wp--rules .wp__photo::after{background:linear-gradient(180deg,rgba(13,17,14,0) 40%,#0D110E 100%)}
.wp__text{margin-top:-72px}}

/* 4 · The booking form inline at the foot of home (th.css 17e: the grid, the plate card, the thank-you) */
#next .bk__grid{margin-top:clamp(16px,2vw,24px)}
#next .bk__door{margin:0}
.bk__next a{color:var(--fg)}
#next .nx{margin-top:clamp(40px,4vw,56px)}
@media print{#next .bk__grid{display:none!important}}

/* == v3.7 · light/dark rhythm (th.css 2b+); v3.8: strict alternation, never two night sections back to back (the
   order is in the note at the end of this block). Story on night: the hero, Ray, No rip and replace, the call. Paper
   for reading and deciding: the stack and What Si does, the live pane, How it starts and the questions. == */
/* The night photo panels carry a short muted loop over the photo (home.js 8): invisible until it plays, so a slow or
   missing file leaves the photo; gone with reduced motion or Save-Data. The panel's own fade (::after) stays on top. */
.wp__film{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 40%;opacity:0;transition:opacity 1.2s var(--th-ease)}
.wp__film.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.wp__film{display:none}}
@media print{.wp__film{display:none}}
/* v3.8 (owner 2026-10-09: "two dark sections next to each other don't work"): night and paper strictly alternate on
   home: the hero (night) · the stack and What Si does (one paper run) · Ray (night) · the live pane (paper, the
   approval screen its own night screen on it) · No rip and replace with the four rules (night) · How it starts with
   the questions (paper) · the call and the footer (night). Same-tone runs read as one band: no rule between them. */
/* The four rules, inside #keep under the machinist panel: the heading left, the rows right from 960px */
.kr{display:grid;gap:16px;margin-top:clamp(16px,3vw,40px)}
.kr>*{margin:0}
.kr .rows{margin-top:8px}
.kr .rows>*{padding:14px clamp(14px,2vw,22px);font-size:17px;line-height:1.4}
.kr .rows .mono{margin-right:12px;color:var(--steel)}
@media(min-width:960px){
.kr{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;grid-template-areas:"lab rows" "h rows" "sys rows";gap:16px 64px;align-items:start}
.kr>.label{grid-area:lab}.kr>.qa__h{grid-area:h}.kr>.rows{grid-area:rows;margin:0}.kr>.qa__sys{grid-area:sys;margin-top:8px}}
.qa__sys .link,.start__line .link{display:inline;min-height:0;padding-block:12px}/* v3.8: a link in running text: its tap height from padding, so the paragraph's leading stays even */
/* Questions owners ask, at the foot of How it starts: the label left, the questions right from 960px */
#start .start__faq{display:grid;gap:20px 64px;margin-top:clamp(56px,6vw,96px);padding-top:24px;border-top:1px solid var(--line)}
#start .start__faq>*{margin:0}
@media(min-width:960px){#start .start__faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
#start .start__faq>h2.label{font-size:clamp(30px,3vw,44px);font-stretch:100%;font-weight:400;line-height:1.1;letter-spacing:-.03em;text-transform:none;color:var(--fg);text-wrap:balance}}/* v3.8: the left column carries the heading at the rules' size (Four rules, said once.), not only a small label; the words unchanged */
#start.sec--paper .compare__head{background:var(--th-ink);color:var(--th-paper)}/* on paper the tier heads go back to ink cells */
.wp__film{z-index:0}
.wp__photo::after{z-index:1}/* the panel's fade stays over the film (a playing video is composited on its own layer) */
#keep .wp{margin-bottom:0}
/* v3.7: the panels fade into whatever ground is behind them (the deep ground darkens down the page, so a colour wash
   left a faint box edge): a mask does the edges, the ::after only darkens under the words */
.wp__photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 14%);-webkit-mask-composite:source-in,source-in;mask-image:linear-gradient(90deg,transparent 0,#000 46%),linear-gradient(0deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 14%);mask-composite:intersect}
@media(max-width:959px){.wp__photo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 45%,transparent 100%)}}/* v3.8: the photo comes up out of the night at the top too, never a hard edge under the paper's fade */

/* v3.9 · the mission band (index.html 1a; SITE-AUDIT §2): the umbrella line at display size, under a ruled label row,
   with the two arms beneath. Never larger than the hero H1 (76px cap there). */
#mission{padding-bottom:clamp(40px,6vw,80px)}
.msn__rule{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-bottom:12px;border-bottom:1px solid var(--fg);margin-bottom:clamp(28px,4vw,56px)}
.msn__h{max-width:17ch;margin:0;font-size:clamp(36px,calc(4.4vw + 10px),72px);font-weight:400;line-height:1.03;letter-spacing:-.045em;text-wrap:balance}
@media(min-width:1280px){.msn__h{font-weight:300}}
.msn__lead{max-width:44ch;margin-top:clamp(16px,2vw,28px)}
.msn__arms{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);margin-top:clamp(32px,5vw,64px);border-top:1px solid var(--line)}
.msn__arm{display:flex;flex-direction:column;gap:10px;padding:22px 40px 6px 0}
.msn__arm--2{padding-left:40px;border-left:1px solid var(--line)}
.msn__k{margin:0;color:var(--steel);font-size:13px}
.msn__p{margin:0;max-width:44ch;color:var(--lead)}
.msn__go{align-self:flex-start;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.03em;color:var(--fg);text-underline-offset:6px}
.msn__arm--2 .msn__go{font-size:clamp(17px,1.4vw,21px)}
.msn__fine{margin-top:28px;color:var(--steel)}
@media(max-width:719px){.msn__arms{grid-template-columns:1fr}.msn__arm{padding-right:0}.msn__arm--2{padding:22px 0 6px;border-left:0;border-top:1px solid var(--line);margin-top:16px}}

.ex__v--price{color:var(--fg)}
/* v3.9 · monthly plans (How it starts) */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--frame);border-left:1px solid var(--frame)}
.plan{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;border-right:1px solid var(--frame);border-bottom:1px solid var(--frame)}
.plan>p{margin:0}
.plan__name{margin:0;font-size:15px;font-stretch:75%;font-weight:500;text-transform:uppercase;letter-spacing:.02em;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.plan__tag{font-size:11px;padding:2px 6px;border:1px solid currentColor}
.plan__price{font-size:clamp(28px,2.6vw,40px);line-height:1.05}
.plan__price small{display:block;font-size:13px;letter-spacing:0;color:var(--lead);margin-top:4px}
.plan__who{font-family:var(--th-font-mono);font-size:13px;color:var(--steel)}
.plan--pick{background:var(--th-ink);color:var(--th-paper)}
.plan--pick .plan__price small,.plan--pick .plan__who,.plan--pick>p{color:#C9CFC6}
@media(max-width:899px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){.plans{grid-template-columns:1fr}}

/* v3.9 · page sources (one list per page; no inline markers) */
.srcs{padding:40px 0 8px}
.srcs__l{margin:10px 0 0;padding-left:18px;max-width:90ch;color:var(--lead);display:grid;gap:6px}

/* v3.10 · Si at work, live, over the hero film (index.html .cine__si; home.js 3h). The overlay box shares the film's
   geometry (the rule above), then drops its filter and masks; cards sit over the calm shop floor, bottom right of the
   visible frame (the frame runs 14% off the right edge on desktop, 7% off the left under 900px). */
.cine__si{object-fit:initial;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;font-family:var(--th-font)}
.cine__si[hidden]{display:none}
.cine__col{position:absolute;right:calc(14% + 24px);bottom:14%;width:min(320px,34%);display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cine__tag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:7px 12px;background:rgba(17,22,18,.82);color:var(--th-text-n);font:500 12px/1.3 var(--th-font);font-stretch:75%;letter-spacing:.03em;text-transform:uppercase}
.cine__dot{width:8px;height:8px;border-radius:50%;background:#7BD88F;box-shadow:0 0 0 0 rgba(123,216,143,.6);animation:cine-pulse 2s infinite}
.cine__kpi{color:var(--th-lead-n)}
@keyframes cine-pulse{0%{box-shadow:0 0 0 0 rgba(123,216,143,.55)}70%{box-shadow:0 0 0 8px rgba(123,216,143,0)}100%{box-shadow:0 0 0 0 rgba(123,216,143,0)}}
.cine__cards{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cine__card{padding:11px 14px 12px;background:rgba(246,247,243,.97);color:var(--th-ink);border:1px solid rgba(31,38,32,.18);box-shadow:0 14px 34px rgba(0,0,0,.38);transform-origin:0 100%;animation:cine-in .7s var(--th-ease) both}
.cine__card p{margin:0}
.cine__card .k{font:12px var(--th-font-mono);letter-spacing:.04em;color:var(--th-steel);text-transform:uppercase}
.cine__card .t{margin-top:3px;font-size:15px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.cine__card .s{margin-top:3px;font-size:13px;color:var(--th-lead)}
.cine__card .w{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:7px;border-top:1px solid var(--th-rule);font-size:13px;font-weight:500}
.cine__card .w i{flex:none;width:9px;height:9px;background:var(--th-red)}
.cine__card.is-done .w{color:var(--th-steel);font-weight:400}
.cine__card.is-done .w i{background:none;border:1.5px solid var(--th-steel);width:8px;height:8px}
.cine__card.is-out{animation:cine-out .45s var(--th-ease) both}
@keyframes cine-in{from{opacity:0;transform:translate(-56px,18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cine-out{to{opacity:0;transform:translateY(-14px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.cine__card,.cine__card.is-out{animation:none}.cine__dot{animation:none}}
@media(max-width:1100px){.cine__col{width:min(290px,40%)}.cine__card .t{font-size:14px}}
@media(max-height:820px) and (min-width:900px){.cine__card .s{display:none}}
@media(max-width:899px){
.cine__col{position:static}
.cine__tag{position:absolute;top:10%;left:calc(7% + 12px);padding:5px 9px;font-size:11px}
.cine__kpi{display:none}
.cine__cards{position:absolute;right:calc(13% + 10px);bottom:14%;width:min(250px,52%);gap:6px}
.cine__card:not(:last-child){display:none}
.cine__card{padding:8px 10px 9px}
.cine__card .t{font-size:13px}.cine__card .s{display:none}.cine__card .w{margin-top:5px;padding-top:5px;font-size:12px}}

/* v3.11 · the desk clears as Si works (index.html .cine__desk; home.js 8b). The still is the film's own first frame. */
.cine__still{object-position:50% 50%}
.cine__desk{position:absolute;right:calc(14% + 32px + min(320px,34%));top:17%;display:grid;grid-template-columns:1fr;grid-template-areas:"k" "n" "s" "a";align-items:end;row-gap:2px;width:min(190px,19%);margin:0;padding:10px 14px 12px;background:rgba(17,22,18,.84);color:var(--th-text-n);pointer-events:auto}
.cine__desk-k{grid-area:k;font:500 11px/1.3 var(--th-font);font-stretch:75%;letter-spacing:.04em;text-transform:uppercase;color:var(--th-lead-n)}
.cine__desk-n{grid-area:n;font-size:46px;line-height:1;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .4s}
.cine__desk-s{grid-area:s;padding-bottom:0;font-size:13px;line-height:1.3;color:var(--th-lead-n)}
.cine__desk.is-clear .cine__desk-n{color:#7BD88F}
.cine__again{grid-area:a;justify-self:start;margin-top:8px;padding:0;border:0;background:none;color:var(--th-text-n);font:13px var(--th-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:1100px){.cine__desk{width:min(170px,22%);right:calc(14% + 32px + min(290px,40%))}.cine__desk-n{font-size:36px}}
@media(max-width:899px){
.cine__still{object-position:50% 40%}
.cine__desk{left:auto;right:calc(13% + 10px);top:10%;bottom:auto;grid-template-areas:"k" "n";padding:5px 9px 7px;width:auto}
.cine__desk-n{font-size:26px}.cine__desk-s,.cine__again{display:none!important}.cine__desk-k{font-size:10px}}
@media(min-width:900px) and (max-width:1199px){.cine__desk{display:none}}/* too tight beside her face and the cards: the film and the cards carry it */

/* v3.11.1 · no ghosting: the one-shot shows at once (its first frame is the still), and the still is hidden while it plays */
.cine__film[data-oneshot]{opacity:1;transition:none}
.cine.is-film .cine__still{visibility:hidden}

/* v3.12 · her screen, mid-film (index.html .cine__screen; home.js 8c). Grows out of the laptop (transform-origin on the
   laptop), runs the queue, shrinks back. A dark screen in the pane's colours; the one red is the estimator's square. */
.cine__screen{position:absolute;left:23%;top:19%;width:54%;transform-origin:56% 70%;transform:scale(.1);opacity:0;transition:transform .65s var(--th-ease),opacity .45s var(--th-ease);pointer-events:none}
.cine__screen[hidden]{display:block;visibility:hidden}
.cine__screen.is-open{transform:none;opacity:1}
.cine__si.is-screen .cine__col,.cine__si.is-screen~.x,.cine__si.is-screen .cine__desk{opacity:.08;transition:opacity .4s}
.cine__si .cine__col,.cine__si .cine__desk{transition:opacity .4s}
.cine.is-screen .cine__film,.cine.is-screen .cine__still{filter:brightness(.55) saturate(.8)!important;transition:filter .5s}
.scr{position:relative;background:#0E1310;color:var(--th-text-n);border:1px solid #3A463D;box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:var(--th-font)}
.scr__bar{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #2E3830;background:#151C17}
.scr__dots{display:flex;gap:5px}.scr__dots i{width:8px;height:8px;border-radius:50%;background:#3A463D}
.scr__title{font:500 13px var(--th-font);font-stretch:75%;letter-spacing:.04em;text-transform:uppercase}
.scr__n{margin-left:auto;font:12px var(--th-font-mono);color:var(--th-lead-n)}
.scr__n b{display:inline-block;min-width:2ch;margin-left:6px;color:var(--th-text-n);font:500 18px var(--th-font);text-align:right;font-variant-numeric:tabular-nums}
.scr__n.is-down b{color:#7BD88F}
.scr__tag{margin:0;padding:6px 14px;font:11px var(--th-font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--th-steel-n);border-bottom:1px solid #2E3830}
.scr__rows{margin:0;padding:0;list-style:none}
.scr__rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:10px 14px;border-bottom:1px solid #222B25;transition:background .3s,opacity .3s}
.scr__rows li:last-child{border-bottom:0}
.scr__rows li.is-cur{background:#1B241E}
.scr__rows li.is-done{opacity:.62}
.scr__m p{margin:0}
.scr__k{font:11px var(--th-font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--th-steel-n)}
.scr__t{margin-top:2px!important;font-size:14px;font-weight:500;line-height:1.25}
.scr__s{margin-top:2px!important;font-size:12px;line-height:1.3;color:var(--th-lead-n)}
.scr__btn{padding:6px 12px;border:1px solid var(--th-text-n);font:500 12px var(--th-font);font-stretch:75%;letter-spacing:.04em;text-transform:uppercase;transition:background .15s,color .15s,transform .15s}
.scr__btn.is-press{background:var(--th-text-n);color:#0E1310;transform:scale(.95)}
.scr__rows li.is-done .scr__btn{display:none}
.scr__st{display:none;font-size:12px;color:#9FD9AC;white-space:nowrap}
.scr__rows li.is-done .scr__st{display:inline}
.scr__st--wait{display:inline-flex!important;align-items:center;gap:7px;color:var(--th-text-n);font-weight:500}
.scr__st--wait i{width:9px;height:9px;background:var(--th-red-n)}
.scr__cursor{position:absolute;left:0;top:0;width:20px;height:20px;fill:#F6F7F3;stroke:#0E1310;stroke-width:1.2;opacity:0;transform:translate(60%,60%);transition:transform .55s var(--th-ease),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.scr__cursor.is-on{opacity:1}
@media(max-width:1100px){.cine__screen{left:18%;width:64%}.scr__s{display:none}}
@media(max-width:899px){
.cine__screen{left:8%;top:4%;width:79%;transform-origin:52% 75%}
.scr__bar{padding:5px 8px;gap:8px}.scr__dots{display:none}.scr__title{font-size:10px}.scr__n{font-size:10px}.scr__n b{font-size:13px}
.scr__tag{display:none}
.scr__rows li{padding:5px 8px;gap:4px 8px}.scr__rows li:nth-child(n+4):not(:last-child){display:none}
.scr__k{font-size:9px}.scr__t{font-size:11px}.scr__btn{padding:3px 7px;font-size:10px}.scr__st{font-size:10px}
.scr__cursor{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){.cine__screen{display:none!important}}

/* v3.13 · How we work (index.html 1a2): three steps, two ways in */
#how{padding-top:clamp(24px,3vw,40px)}
.hw__steps{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--fg)}
.hw__steps li{padding:20px 28px 8px 0}
.hw__steps li+li{padding-left:28px;border-left:1px solid var(--line)}
.hw__n{font-size:13px;color:var(--steel)}
.hw__t{margin:10px 0 8px;font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.15;letter-spacing:-.03em}
.hw__steps p{margin:0;max-width:34ch;color:var(--lead)}
.hw__ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,48px)}
.hw__way{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 48px 18px 20px;border:1px solid var(--frame);color:var(--fg);text-decoration:none;transition:background .15s}
.hw__way:hover{background:var(--th-plate)}
.hw__p{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.hw__s{color:var(--lead);font-size:15px}
.hw__way .arr{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px}
.hw__doors{margin-top:28px}
@media(max-width:899px){.hw__steps{grid-template-columns:1fr}.hw__steps li,.hw__steps li+li{padding:18px 0 14px;border-left:0;border-top:1px solid var(--line)}.hw__steps li:first-child{border-top:0}.hw__ways{grid-template-columns:1fr}}
.hw__lead{margin-top:18px;max-width:46ch}

/* ---------- v4 hero (2026-10-10, index.html #top.h4): the words, and the product beside them (the approval screen, .hq,
   its rows from .scr above); no film, no photo, so the H1 is the first paint. Phones: words first, then four rows. ---------- */
#top.h4{padding-block:calc(var(--th-header) + clamp(40px,6vw,72px)) clamp(56px,7vw,96px)}
.h4__in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.h4__eye{color:var(--th-steel-n)}
.h4__h1{margin-top:12px;max-width:11em;font-size:clamp(40px,5.2vw,76px);font-weight:400;line-height:1.02}
.h4__done{color:var(--th-lead-n)}
.h4__lead{margin-top:20px;max-width:30em;color:var(--fg)}
.h4__act{margin-top:28px}
.h4__guar{margin-top:14px;max-width:30em;font-size:16px;line-height:1.45;color:var(--fg);text-wrap:balance}
.h4__guar .label{display:inline;margin-right:10px}
.h4__art{margin:0}
.hq{box-shadow:0 40px 100px rgba(0,0,0,.55)}
.hq .scr__rows li{padding:12px 16px}
.hq .scr__t{font-size:15px}
.hq__chip{display:inline-block;margin-left:2px;padding:1px 6px;border:1px solid var(--th-steel-n);font:10px var(--th-font-mono);letter-spacing:.05em;vertical-align:1px}
.h4__cap{margin-top:12px;font:12px/1.5 var(--th-font-mono);color:var(--th-steel-n)}
.h4__cap .link{margin-left:6px;font-family:var(--th-font);font-size:13px}
@media(min-width:1100px){.h4__in{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:clamp(40px,5vw,88px)}#top.h4{min-height:calc(100svh - var(--bar-h,0px));display:flex;align-items:center}#top.h4>.wrap{width:100%}}
@media(min-width:1440px){.h4__h1{font-weight:300}}
@media(max-width:719px){#top.h4{padding-block:calc(var(--th-header) + 40px) 40px}.h4__act .btn{width:100%}.h4__in{gap:28px}.hq .scr__s{display:none}.hq .scr__rows li:nth-child(n+5){display:none}}

/* ---------- v4.1 #benefits calculator (index.html [data-calc], home.js 9b): four sliders and the share, in ink on paper ---------- */
.calc{display:grid;gap:14px;width:100%;max-width:560px}
.calc[hidden]{display:none}
.calc__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px}
.calc__row label{font-size:16px;color:var(--fg)}
.calc__row output{font:500 20px/1 var(--th-font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc__row input[type=range]{grid-column:1/-1;width:100%;height:28px;margin:0;accent-color:var(--fg);cursor:pointer}
.calc__share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 0;padding:0;border:0}
.calc__share legend{width:100%;margin-bottom:6px;font-size:16px;color:var(--fg)}
.calc__guess{color:var(--lead);font-size:14px}
.calc__share label{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);font:500 15px var(--th-font);cursor:pointer}
.calc__share input{position:absolute;opacity:0;pointer-events:none}
.calc__share label:has(input:checked){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.calc__share label:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:2px}
.calc__foot{margin:0;font-size:14px;color:var(--lead)}
.calc__reset{margin-left:6px;padding:0;border:0;background:none;color:var(--fg);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}