/* Thinking Humans · th.css v2 (BRAND.md v2, 2026-10-06; v3.4 2026-10-07 adds the header links, the shared menu and
   footer, and the funnel parts in 17d). Light only: grounds are fixed per section.
   Markup contract: brand/COMPONENTS.md · styleguide: brand/components.html */

/* == 0 Fonts (v3.1): self-hosted, latin + latin-ext with Google's unicode-range split (OFL; files in /assets/fonts,
   versioned by name, served immutable). Each page head preloads archivo-latin-v25 and atkinson-mono-latin-v8
   (crossorigin) and loads no Google CSS: first paint no longer waits on two third-party hops, and no visitor IP goes
   to Google. Doto is the live-number face (ROND 0, 800 only). At ROND 0 Doto draws "." and ":" as a plus of dots, so
   "0.8 s" read "0+8 s": its latin face leaves out U+002E and U+003A, and a third Doto face draws those two from the
   Archivo file every page already preloads, a square point at 800 that sits tight like a real decimal point. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:200 800;font-stretch:75% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-ext-v25.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:200 800;font-stretch:75% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-v25.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/atkinson-mono-latin-ext-v8.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/atkinson-mono-latin-v8.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Doto';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/doto-latin-ext-v3.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Doto';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/doto-latin-v3.woff2) format('woff2');unicode-range:U+0000-002D,U+002F-0039,U+003B-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Doto';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-latin-v25.woff2) format('woff2');unicode-range:U+002E,U+003A}

/* == 1 Tokens == */
:root{
  color-scheme:only light;/* "only": Chromium's auto-dark (Samsung Internet, Chrome's dark web content) leaves the fixed grounds alone */
  --th-night:#111612;--th-night-2:#1A211C;--th-paper:#E9ECE6;--th-plate:#F6F7F3;
  --th-ink:#1F2620;--th-lead:#525852;--th-steel:#4E5A50;--th-rule:#C3CBC1;
  --th-text-n:#E4E9E2;--th-lead-n:#AFB4AE;--th-steel-n:#9AA79C;--th-rule-n:#2E3830;
  --th-frame:#1F2620;--th-frame-n:#9AA79C;
  --th-cta:#1F2620;--th-on-cta:#E9ECE6;--th-cta-n:#E9ECE6;--th-on-cta-n:#1F2620;--th-cta-hover:#2E3830;--th-cta-n-hover:#F6F7F3;
  --th-bar:#4E5A50;--th-on-bar:#E9ECE6;
  --th-tape:#EFE5CB;--th-on-tape:#1F2620;--th-on-tape-2:#4E5A50;--th-tape-edge:#4E5A50;
  --th-red:#BA361C;--th-on-red:#F6F7F3;--th-red-n:#EF6044;--th-on-red-n:#111612;
  --th-first-light:linear-gradient(180deg,#111612 0%,#1E2822 40%,#55604F 70%,#C9C0A6 100%);
  --th-grain-dark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --th-grain-light:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --th-grain-paper:.04;--th-grain-night:.05;
  --th-font:'Archivo','Helvetica Neue',Arial,sans-serif;
  --th-font-mono:'Atkinson Hyperlegible Mono',ui-monospace,Menlo,monospace;
  --th-font-live:'Doto','Atkinson Hyperlegible Mono',ui-monospace,monospace;
  --th-r:0;--th-r-plate:2px;--th-hair:1px;--th-keyline:1.5px;--th-target:48px;--th-gutter:16px;
  --th-section:clamp(96px,14vw,200px);--th-measure:34ch;--th-header:64px;
  --th-ease:cubic-bezier(.2,0,0,1);--th-t-hover:120ms;--th-t-panel:200ms;--th-t-stamp:40ms;
}
@media(min-width:768px){:root{--th-gutter:24px}}
@media(min-width:1200px){:root{--th-gutter:40px}}

/* == 2 Ground roles == */
:root,.sec--pale,.on-paper,.hdr--over.is-solid,.chat,.form,.nameplate{
  --bg:var(--th-paper);--fg:var(--th-ink);--lead:var(--th-lead);--steel:var(--th-steel);--line:var(--th-rule);
  --frame:var(--th-frame);--raised:var(--th-plate);--cta:var(--th-cta);--on-cta:var(--th-on-cta);--cta-h:var(--th-cta-hover);
  --red:var(--th-red);--on-red:var(--th-on-red);--focus:var(--th-ink);--grain:var(--th-grain-dark);--grain-o:var(--th-grain-paper)}
.sec--dark,.sec--sky,.on-dark,.menu,.hdr--over,.menu-open .hdr{
  --bg:var(--th-night);--fg:var(--th-text-n);--lead:var(--th-lead-n);--steel:var(--th-steel-n);--line:var(--th-rule-n);
  --frame:var(--th-frame-n);--raised:var(--th-night-2);--cta:var(--th-cta-n);--on-cta:var(--th-on-cta-n);--cta-h:var(--th-cta-n-hover);
  --red:var(--th-red-n);--on-red:var(--th-on-red-n);--focus:var(--th-text-n);--grain:var(--th-grain-light);--grain-o:var(--th-grain-night)}
.chat,.form{--bg:var(--th-plate)}
.sec--sky{--frame:var(--th-paper)}

/* == 2b The deep ground (v3.5, every page: <body class="deep">) ==
   One night ground down the whole page, deepening from #141A16 at the top to #060807 at the foot: the sections go
   see-through over one gradient on <main>, so there are no hard breaks between them. The paper sections take the night
   roles; forms, the chat, nameplates, stamps and tags keep their plate (their own roles above), so filling in a form is
   still ink on plate. Every text role is checked on the lightest stop: text-n 14.6:1, lead-n 8.6:1, steel-n 6.9:1
   (and on the darkest more). The header and the footer are night too. */
.deep .sec--pale,.deep .hdr,.deep .hdr--over.is-solid,.deep .foot{
  --bg:var(--th-night);--fg:var(--th-text-n);--lead:var(--th-lead-n);--steel:var(--th-steel-n);--line:var(--th-rule-n);
  --frame:var(--th-frame-n);--raised:var(--th-night-2);--cta:var(--th-cta-n);--on-cta:var(--th-on-cta-n);--cta-h:var(--th-cta-n-hover);
  --red:var(--th-red-n);--on-red:var(--th-on-red-n);--focus:var(--th-text-n);--grain:var(--th-grain-light);--grain-o:var(--th-grain-night)}
html:has(>body.deep){background:#060807}
body.deep{background:#060807}
.deep>main{position:relative;isolation:isolate;background:linear-gradient(180deg,#141A16 0,#111612 18%,#0D110E 45%,#090B0A 75%,#060807 100%)}
.deep>main>.sec:not(.sec--sky){background:transparent}
.deep>main>.sec:not(.sec--sky)::before{display:none}/* the grain stays on the header, the pane and the sky */
.deep .hdr{background:rgba(10,13,11,.92);border-bottom-color:transparent}
.deep .hdr.is-scrolled,.deep .hdr--over.is-solid{background:rgba(10,13,11,.92);border-bottom-color:var(--th-rule-n)}
.deep .hdr--over:not(.is-solid){background:transparent}
.deep>.foot{background:#060807;border-top:1px solid var(--th-rule-n)}
.deep>.foot::before{display:none}
.deep .foot__mark span{color:#141A16;text-shadow:0 1px 0 rgba(255,255,255,.08),0 -1px 0 rgba(0,0,0,.6)}

/* == 2b+ The light/dark rhythm (v3.7 preview) ==
   Story runs stay on the deep night; reading and deciding runs sit on paper (.sec--paper). A run of paper sections is
   one sheet: its first section fades in from the night and its last fades back out over --th-fade (transparent
   borders, so each section keeps its own padding and the band never sits under text). The header turns paper while
   the solid part of a sheet is under it (core.js .is-paper). Paper roles: ink 13.0:1, lead 6.2:1, steel 6.0:1 on #E9ECE6. */
:root{--th-fade:clamp(112px,11vw,176px)}
.deep .sec--paper,.deep .hdr.is-paper:not(.menu-open .hdr){
  --bg:var(--th-paper);--fg:var(--th-ink);--lead:var(--th-lead);--steel:var(--th-steel);--line:var(--th-rule);
  --frame:var(--th-frame);--raised:var(--th-plate);--cta:var(--th-cta);--on-cta:var(--th-on-cta);--cta-h:var(--th-cta-hover);
  --red:var(--th-red);--on-red:var(--th-on-red);--focus:var(--th-ink);--grain:var(--th-grain-dark);--grain-o:var(--th-grain-paper)}
.deep>main>.sec.sec--paper:not(.sec--sky){background:var(--th-paper)}
.deep>main>.sec.sec--paper:not(.sec--paper+.sec--paper){border-top:var(--th-fade) solid transparent;background:linear-gradient(180deg,rgba(233,236,230,0) calc(var(--th-fade) * 0),rgba(233,236,230,0.05) calc(var(--th-fade) * 0.2),rgba(233,236,230,0.2) calc(var(--th-fade) * 0.4),rgba(233,236,230,0.5) calc(var(--th-fade) * 0.6),rgba(233,236,230,0.82) calc(var(--th-fade) * 0.8),var(--th-paper) var(--th-fade)) border-box}
.deep>main>.sec.sec--paper:not(:has(+.sec--paper)){border-bottom:var(--th-fade) solid transparent;background:linear-gradient(0deg,rgba(233,236,230,0) calc(var(--th-fade) * 0),rgba(233,236,230,0.05) calc(var(--th-fade) * 0.2),rgba(233,236,230,0.2) calc(var(--th-fade) * 0.4),rgba(233,236,230,0.5) calc(var(--th-fade) * 0.6),rgba(233,236,230,0.82) calc(var(--th-fade) * 0.8),var(--th-paper) var(--th-fade)) border-box}
.deep>main>.sec.sec--paper:not(.sec--paper+.sec--paper):not(:has(+.sec--paper)){background:linear-gradient(180deg,rgba(233,236,230,0) calc(var(--th-fade) * 0),rgba(233,236,230,0.05) calc(var(--th-fade) * 0.2),rgba(233,236,230,0.2) calc(var(--th-fade) * 0.4),rgba(233,236,230,0.5) calc(var(--th-fade) * 0.6),rgba(233,236,230,0.82) calc(var(--th-fade) * 0.8),var(--th-paper) var(--th-fade),var(--th-paper) calc(100% - var(--th-fade)),rgba(233,236,230,0.82) calc(100% - var(--th-fade) * 0.8),rgba(233,236,230,0.5) calc(100% - var(--th-fade) * 0.6),rgba(233,236,230,0.2) calc(100% - var(--th-fade) * 0.4),rgba(233,236,230,0.05) calc(100% - var(--th-fade) * 0.2),rgba(233,236,230,0) calc(100% - var(--th-fade) * 0)) border-box}
.deep .hdr.is-paper:not(.menu-open .hdr){background:rgba(233,236,230,.97);color:var(--th-ink);border-bottom-color:var(--th-rule)}
@media print{.deep>main>.sec.sec--paper{border:0}}

/* == 2c Statement lines (v3.5): one big sentence per section, our own lines at a larger scale, the detail under it == */
.say{max-width:15em;font-size:clamp(34px,calc(4.2vw + 10px),72px);font-weight:400;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
@media(min-width:1280px){.say{font-weight:300}}/* 300 only at 64px and up (BRAND §9.3) */
.say-screen{display:grid;align-content:center;justify-items:start;gap:20px;min-height:min(44svh,440px)}
.say-screen>*{margin:0}
.say-screen>.lead{max-width:34em}
@media(max-width:719px){.say-screen{min-height:0;padding-block:8px}}
/* Section lines on the deep ground read as statements: light weight once h2 reaches 64px (4.6vw at 1392px; BRAND §9.3) */
@media(min-width:1392px){.deep main h2:not(.label){font-weight:300}}

/* == 3 Base == */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--th-paper);-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--th-header) + 16px)}/* scroll-padding, not a per-[id] scroll-margin: anchor jumps AND focus scrolling clear the sticky header (WCAG 2.4.11); touch feedback is the :active states below */
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--fg);font-family:var(--th-font);font-size:18px;font-weight:400;font-stretch:100%;line-height:1.5;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,pre{margin:0}
:where(ul,ol)[class]{margin:0;padding:0;list-style:none}/* (0,1,0) and early, so .flow/.card/.prose gaps still reach classed lists */
img,video{display:block;max-width:100%;height:auto}
svg{max-width:100%}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
table{font-variant-numeric:tabular-nums}
p{text-wrap:pretty}
h1,h2,h3,h4{overflow-wrap:break-word}/* a long address or word breaks instead of running off a 280px screen */
[hidden]{display:none!important}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-200px;z-index:100;padding:12px 16px;background:var(--th-ink);color:var(--th-paper)}
.skip:focus{top:8px}

/* == 4 Type == */
h1,.h1{font-size:clamp(40px,5.6vw,84px);font-weight:400;line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
@media(min-width:1143px){h1,.h1{font-weight:300}}
h2,.h2{font-size:clamp(36px,4.6vw,64px);font-weight:400;line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
h3,.h3{font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.25;letter-spacing:-.04em;text-wrap:balance}
@media(max-width:479px){h2,.h2{letter-spacing:-.04em}}
.lead{max-width:var(--th-measure);font-size:21px;line-height:1.45;letter-spacing:-.03em;color:var(--lead)}
@media(max-width:399px){.lead{font-size:19px}}
.prose{max-width:64ch}
.prose>*+*{margin-top:1em}
.small{font-size:15px;line-height:1.45;color:var(--steel)}
.fine{font-size:14px;line-height:1.45;color:var(--steel)}
.label,.btn,.chip,.hdr__cta,.hdr__nav a,.strip__k,.bar,.toggle button,.table thead th,.compare__head,.field__label,.cell__label,.ctx__dept,.step__name,.fab::after{font-stretch:75%;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.label{display:block;font-size:14px;line-height:1.3;color:var(--steel)}
.mono,.stamp,.unit,.src,.prov,.example,.msg__meta,.ctx time,.cell__idx,.step__n,.np__k,.chat__wait{font-family:var(--th-font-mono);font-weight:500;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
/* Si is a name, not an acronym: it stays "Si" inside caps labels (BRAND §3 rule 2). */
.si{text-transform:none}
.num{font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.giant{display:flex;justify-content:space-between;margin:clamp(20px,3vw,44px) -.03em;font-size:clamp(64px,12vw,176px);font-weight:200;line-height:1;letter-spacing:0;text-transform:uppercase;color:var(--fg);user-select:none}
.giant>span{display:block}
html:not(.js) .giant:empty::before{content:attr(data-giant);letter-spacing:.4em}
@media(max-width:599px){html:not(.js) .giant:empty::before{letter-spacing:.12em}}
@media(max-width:359px){html:not(.js) .giant:empty::before{letter-spacing:0}}
.live{font-family:var(--th-font-live);font-weight:800;font-variation-settings:"ROND" 0;font-size:clamp(32px,5vw,72px);line-height:1;letter-spacing:0;color:var(--fg);font-variant-numeric:tabular-nums}
.live[data-stale],[data-stale] .live{color:var(--steel)}
.wm{font-stretch:125%;font-weight:750;letter-spacing:-.012em;line-height:1;white-space:nowrap}
.wm .si{margin-left:.06em;font-family:var(--th-font-mono);font-stretch:100%;font-weight:500;font-size:.55em;letter-spacing:.02em;color:var(--steel)}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline}

/* == 5 Layout and section rhythm == */
.wrap{width:100%;max-width:calc(1360px + 2 * var(--th-gutter));margin-inline:auto;padding-inline:var(--th-gutter);padding-left:max(var(--th-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--th-gutter),env(safe-area-inset-right,0px))}/* viewport-fit=cover: grounds bleed edge to edge, text clears the notch and rounded corners */
.wrap--narrow{max-width:calc(760px + 2 * var(--th-gutter))}
.wrap--wide{max-width:none}
.sec{position:relative;isolation:isolate;padding-block:var(--th-section);background:var(--bg);color:var(--fg)}
.sec--tight{padding-block:clamp(64px,8vw,112px)}
.sec--flush{padding-bottom:0}
.sec--sky{display:grid;grid-template-rows:1fr 1fr;background:var(--th-first-light)}
.sky__horizon{position:absolute;inset:auto 0 0;z-index:-1;width:100%;height:auto;max-height:30%;object-fit:cover;object-position:center bottom}
@media(min-width:1344px){.sky__horizon{max-height:none}}/* wider than the file: keep its own aspect, never slice the canopy, pole and chimney flat (the roof still starts under the text) */
/* Phones: a fixed lower row instead of a mirror of the text, and the same four colours with their
   stops pinned to that row, so the text block always sits on the dark end (worst case with grain:
   text-n 10.6, lead-n 6.2, steel-n 5.2 at the last line). */
@media(max-width:767px){
.sec--sky{--sky-low:clamp(160px,45vw,260px);--sky-z:calc(var(--sky-low) + var(--th-section));grid-template-rows:auto var(--sky-low);background:linear-gradient(180deg,#111612 0%,#1E2822 calc(100% - var(--sky-z)),#55604F calc(100% - var(--sky-z) / 2),#C9C0A6 100%)}
.sky__horizon{max-height:none;height:clamp(104px,30vw,180px)}}
.sec::before,.grain::before,.hdr::before,.menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:var(--grain-o)}
.grain{position:relative;isolation:isolate}
.raised{background:var(--raised)}
.flow>*+*{margin-top:28px}
.flow>.label+*{margin-top:20px}
.flow>.actions,.flow>.chips{margin-top:40px}
.flow>.visual{margin-top:clamp(56px,8vw,120px)}
.visual--flush{margin-bottom:calc(-1 * var(--th-section))}
.center{text-align:center}
.center>*{margin-inline:auto}
.center .actions,.center .chips{justify-content:center}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.grid{display:grid;gap:16px}
@media(min-width:720px){.grid--2,.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid--4{grid-template-columns:repeat(4,1fr)}}
.rule{height:0;margin:0;border:0;border-top:1px solid var(--line)}

/* == 6 Reveal == */
@keyframes th-cut{from{visibility:hidden}to{visibility:visible}}
@keyframes th-stamp{from{visibility:hidden}to{visibility:visible}}
.js .reveal,.js .giant>span{animation:th-cut 1ms steps(1,end) 3s both}
.js .giant.is-in>span{animation:th-stamp 1ms steps(1,end) calc(var(--i,0) * var(--th-t-stamp)) both}
.js .reveal.is-in{animation:th-stamp 1ms steps(1,end) var(--reveal-delay,0ms) both}
.reveal--after{--reveal-delay:var(--giant-ms,280ms)}

/* == 7 Bar, header, menu, floating button == */
.bar{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px calc(52px + env(safe-area-inset-right,0px)) 6px calc(52px + env(safe-area-inset-left,0px));background:var(--th-bar);color:var(--th-on-bar);font-size:13px;line-height:1.3;text-align:center;--focus:var(--th-on-bar)}
.bar__x{position:absolute;top:0;right:env(safe-area-inset-right,0px);width:48px;height:48px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.bar__x::before,.bar__x::after{content:"";position:absolute;left:17px;top:23px;width:14px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.bar__x::after{transform:rotate(-45deg)}
.bar__short{display:none}
@media(max-width:639px){.bar{justify-content:flex-start;padding-left:max(var(--th-gutter),env(safe-area-inset-left,0px));text-align:left}.bar__long{display:none}.bar__short{display:inline}}
.bar-off .bar{display:none}
.hdr{position:sticky;top:0;z-index:50;isolation:isolate;height:var(--th-header);background:var(--bg);color:var(--fg);border-bottom:1px solid transparent;transition:background-color var(--th-t-panel) var(--th-ease),color var(--th-t-panel) var(--th-ease),border-color var(--th-t-panel) var(--th-ease)}
.hdr.is-scrolled,.hdr--over.is-solid{border-bottom-color:var(--th-rule)}
.hdr--over{margin-bottom:calc(-1 * var(--th-header))}
/* Without JS nothing turns the see-through header solid (core.js .is-solid / .is-scrolled), so it scrolls away with
   the night or sky hero instead of riding, light-on-clear, over the paper sections below. */
html:not(.js) .hdr--over{position:relative}
.hdr--over:not(.is-solid),.menu-open .hdr{background:transparent;border-bottom-color:transparent}
.hdr--over:not(.is-solid)::before,.menu-open .hdr::before{opacity:0}
/* Over any night or sky hero (home, /owners), once the page scrolls: night, so nothing slides under a see-through header
   (on /owners the light horizon would put header text under 4.5:1). The sky starts at #111612, so there's no seam. */
.hdr--over.is-scrolled:not(.is-solid):not(.menu-open .hdr){background:var(--th-night);border-bottom-color:var(--th-rule-n)}
.hdr--over.is-scrolled:not(.is-solid):not(.menu-open .hdr)::before{opacity:var(--grain-o)}
/* The header's controls line up with the content column (.wrap), not the window edges, on wide screens; its padding
   is 12px less than the gutter because the 48px targets carry their own inner space. */
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%;max-width:calc(1360px + 2 * var(--th-gutter));margin-inline:auto;padding-inline:max(4px,calc(var(--th-gutter) - 12px));padding-left:max(4px,calc(var(--th-gutter) - 12px),env(safe-area-inset-left,0px));padding-right:max(4px,calc(var(--th-gutter) - 12px),env(safe-area-inset-right,0px))}
.hdr__menu{justify-self:start;position:relative;width:48px;height:48px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.hdr__menu i,.hdr__menu i::after{position:absolute;left:13px;top:23.5px;width:22px;height:1px;background:currentColor}
.hdr__menu i{box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.hdr__menu i::after{content:"";left:0;top:0;visibility:hidden}
.hdr__menu[aria-expanded=true] i{box-shadow:none;transform:rotate(45deg)}
.hdr__menu[aria-expanded=true] i::after{visibility:visible;transform:rotate(-90deg)}
.hdr__brand{justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:48px;min-height:48px;color:inherit;text-decoration:none}
.hdr__brand .wm{font-size:19px}
.hdr__cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding-inline:8px;font-size:14px;color:inherit;text-decoration:none;white-space:nowrap}
@media(hover:hover){.hdr__cta:hover{text-decoration:underline}}
.hdr__cta:not(.hdr__cta--btn):active{text-decoration:underline}
/* The outlined header button (BRAND §9.6) and its "Free", shown from 720px, live here for every page that uses them;
   home.css, how.css, proof.css and audit.css still carry the same values from before they moved here. */
.hdr__free{display:none}
@media(min-width:720px){.hdr__free{display:inline}}
.hdr__cta--btn{position:relative;min-height:40px;margin-right:12px;padding:0 14px;gap:10px;border:1px solid var(--frame)}/* margin: its right edge on the content column's (the header pads 12px less than the gutter) */
.hdr__cta--btn::after{content:"";position:absolute;inset:-4px 0}/* 48px hit area */
@media(max-width:359px){.hdr__cta--btn{margin-right:0}}/* 320px: the centred mark keeps 10px+ of air */
@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)}
.menu-open .hdr__cta--btn{background:none;border-color:var(--frame);color:var(--fg)}
/* Phones: the name shows on the first screen too. From 390px the lockup sits left, next to the menu button, at 14px
   (190px wide, over the 140px lockup minimum), clear of every header CTA (home's button included); under 390px the
   mark stands alone, centred. */
@media(max-width:389px){.hdr__brand .wm{display:none}}
@media(min-width:390px) and (max-width:559px){.hdr__in{grid-template-columns:auto 1fr auto}.hdr__brand{justify-self:start;gap:8px;padding-right:4px}.hdr__brand .wm{font-size:14px}}
/* v3.4 header links (FUNNEL-AUDIT §4): from 1024px the four links (How it works, Prices, Live demo, Proof) sit in the header and the menu
   button goes (core.js closes an open menu at that width). Lockup left on the content column, links, then the button;
   at 1024px (1009px inside a scrollbar) the links still clear the full lockup by about 80px. Keyed on :has(.hdr__nav),
   so a header without the links (or a browser without :has) keeps the menu button and its menu. */
.hdr__nav{display:none}
@media(min-width:1024px){
.hdr__in:has(>.hdr__nav){grid-template-columns:auto 1fr auto;column-gap:12px}
.hdr__in:has(>.hdr__nav)>.hdr__menu{display:none}
.hdr__in:has(>.hdr__nav)>.hdr__brand{justify-self:start;margin-left:12px}
.hdr__in:has(>.hdr__nav)>.hdr__nav{display:flex;justify-content:flex-end;align-items:center;min-width:0}
.hdr__nav a{display:block;height:48px;padding:0 10px;font-size:14px;line-height:48px;color:inherit;text-decoration:none;white-space:nowrap}
@media(hover:hover){.hdr__nav a:hover{text-decoration:underline}}
.hdr__nav a:active,.hdr__nav a[aria-current]{text-decoration:underline}}
/* v3.7: "We buy companies" sits apart from the buyer links: a thin rule before it in the bar, a gap before it in the menu */
.hdr__nav .hdr__own{position:relative;margin-left:13px}
.hdr__nav .hdr__own::before{content:"";position:absolute;left:-7px;top:16px;bottom:16px;width:1px;background:currentColor;opacity:.4}
.menu__list .menu__own{margin-top:18px}
.th-mark{display:block;flex:none;width:28px;height:28px;color:currentColor}
.th-think{fill:var(--th-red)}
.menu{position:fixed;inset:0;z-index:40;isolation:isolate;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--th-header) + 64px) 0 calc(48px + env(safe-area-inset-bottom,0px));background:var(--th-night);color:var(--fg);visibility:hidden;opacity:0;transition:opacity var(--th-t-panel) var(--th-ease),visibility 0s linear var(--th-t-panel)}
.menu.is-open{visibility:visible;opacity:1;transition:opacity var(--th-t-panel) var(--th-ease)}
.menu__list{border-top:1px solid var(--line)}
.menu__list a{display:flex;align-items:baseline;gap:20px;min-height:64px;padding:14px 0;border-bottom:1px solid var(--line);font-size:clamp(24px,2.4vw,32px);line-height:1.25;letter-spacing:-.04em;text-decoration:none}
@media(hover:hover){.menu__list a:hover{text-decoration:underline}}
.menu__list a:active{text-decoration:underline}
.menu__list .mono{min-width:2.5em}
.menu__list a[aria-current]{text-decoration:underline}
.menu__cta{margin-top:32px}/* the call button under the five links (v3.4) */
.menu__foot{margin-top:40px}
/* Landscape phones (about 390px tall): the list starts 12px under the header wherever it sits (core.js sets --menu-top
   to its bottom edge on open: under the bar at the top of the page, at 0 once scrolled), rows a little shorter */
@media(max-height:500px){.menu{padding-top:calc(var(--menu-top,calc(var(--th-header) + 48px)) + 12px)}.menu__list a{min-height:52px;padding:8px 0}.menu__cta{margin-top:20px}.menu__foot{margin-top:24px}}
.menu-open{overflow:hidden}
/* Floating button: clear of the home indicator and the landscape notch; from about 1600px it sits in the outer margin,
   off the content column (core.js also hides it while a form, the pane, a systems grid or a block of words is under it). */
.fab{position:fixed;right:max(calc(16px + env(safe-area-inset-right,0px)),calc((100vw - 1440px) / 2 - 72px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;place-items:center;width:56px;height:56px;background:var(--th-ink);color:var(--th-paper);border:1px solid var(--th-frame-n)}
.fab .th-mark{width:28px;height:28px}
.fab:focus-visible{outline:2px solid var(--th-ink);outline-offset:3px;box-shadow:0 0 0 3px var(--th-paper)}
.fab::after{content:attr(data-tip);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:8px 10px;background:var(--th-ink);color:var(--th-paper);font-size:13px;white-space:nowrap;visibility:hidden}
/* The tip shows on a real hover only: on touch, a :hover that reveals content turns the first tap into a hover */
@media(hover:hover){.fab:hover::after{visibility:visible}}
.fab:focus-visible::after{visibility:visible}
.fab{transition:opacity var(--th-t-panel) var(--th-ease),transform var(--th-t-panel) var(--th-ease)}
/* core.js is-hidden (over #ask, the footer, a form, the first section or a block of words) fades out like is-away and
   takes no tap from its first frame; it fades back in where the button's square is clear */
.fab.is-hidden:not(:focus-visible){visibility:hidden;opacity:0;pointer-events:none;transition:opacity var(--th-t-panel) var(--th-ease),transform var(--th-t-panel) var(--th-ease),visibility 0s linear var(--th-t-panel)}
.menu-open .fab{visibility:hidden}
html.js .fab:not(.is-set){visibility:hidden;opacity:0}/* until core.js has its first reading: no flash, then a fade in */
/* core.js: under 1520px it steps aside while the reader scrolls down (is-away) and comes back on the way up */
.fab.is-away:not(:focus-visible){visibility:hidden;opacity:0;transform:translateY(12px);transition:opacity var(--th-t-panel) var(--th-ease),transform var(--th-t-panel) var(--th-ease),visibility 0s linear var(--th-t-panel)}
html:not(.js) body:has(.fab) .foot{padding-bottom:104px}/* no core.js to hide it: keep the photo line clear */

/* == 8 Buttons == */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:0 20px;border:1px solid var(--cta);border-radius:0;background:var(--cta);color:var(--on-cta);font-size:16px;line-height:1.1;text-align:left;text-wrap:balance;text-decoration:none;cursor:pointer;transition:background-color var(--th-t-hover) var(--th-ease),border-color var(--th-t-hover) var(--th-ease)}
@media(max-width:359px){.btn{gap:12px;padding:0 16px}}
/* Hovers are for pointers that hover (they stick after a tap on iPhone and iPad); touch gets the :active state */
@media(hover:hover){.btn:hover{background:var(--cta-h);border-color:var(--cta-h)}}
.btn:active{background:var(--cta-h);border-color:var(--cta-h)}
.arr{display:inline-block;transition:transform var(--th-t-hover) var(--th-ease)}
@media(hover:hover){.btn:hover .arr,.hdr__cta:hover .arr,.link:hover .arr{transform:translateX(4px)}}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--frame)}
@media(hover:hover){.btn--ghost:hover{background:transparent;border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}}
.btn--ghost:active{background:transparent;border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.btn--on-dark{--cta:var(--th-cta-n);--on-cta:var(--th-on-cta-n);--cta-h:var(--th-cta-n-hover)}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn--decide,.btn--decide:hover,.btn--decide:active{justify-content:flex-start;gap:10px;background:var(--red);border-color:var(--red);color:var(--on-red);text-transform:none;font-stretch:100%;letter-spacing:-.01em}
.btn--decide::before{content:"";flex:none;width:10px;height:10px;background:currentColor}
.record{display:inline-flex;align-items:center;gap:10px;min-height:52px;font-size:16px}
.record::before{content:"";flex:none;width:10px;height:10px;background:var(--red)}

/* == 9 Chips, cards, cells, rows == */
.chips{display:grid;gap:10px;max-width:760px}
@media(min-width:520px){.chips{grid-template-columns:1fr 1fr}}
.chip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 16px;border:1px solid var(--frame);border-radius:0;background:none;color:var(--fg);font-size:15px;line-height:1.25;text-align:center;text-decoration:none}
button.chip,a.chip{min-height:48px;cursor:pointer}
@media(hover:hover){button.chip:hover,a.chip:hover{box-shadow:inset 0 0 0 1px var(--frame)}}
button.chip:active,a.chip:active{box-shadow:inset 0 0 0 1px var(--frame)}
.chip[aria-pressed=true],.chip[aria-current]{background:var(--fg);color:var(--bg)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row .chip{padding:0 14px;font-size:14px}
.card{padding:clamp(20px,3vw,32px);border:1px solid var(--frame)}
.card--raised{background:var(--raised)}
.card>*+*{margin-top:12px}
.card .num{display:block;font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.cells{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--frame);border-left:1px solid var(--frame)}
@media(min-width:720px){.cells--3{grid-template-columns:repeat(3,1fr)}.cells--4{grid-template-columns:repeat(4,1fr)}}
.cells>*{display:grid;gap:10px;align-content:start;padding:clamp(16px,2.4vw,28px);border-right:1px solid var(--frame);border-bottom:1px solid var(--frame)}
.cell__art{display:block;width:100%;aspect-ratio:3/2;color:var(--fg)}
.cell__art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.cell__art svg *{vector-effect:non-scaling-stroke}
.cell__label{font-size:14px}
.rows>*{padding:20px clamp(16px,2.4vw,28px);border:1px solid var(--frame)}
.rows>*+*{border-top:0}
.rows .mono{display:block;margin-bottom:6px}

/* == 10 Tables == */
.compare{display:grid;gap:12px}
.compare__col{border:1px solid var(--frame)}
.compare__col>*{padding:14px 16px}
.compare__col>*+*{border-top:1px solid var(--frame)}
.compare__head{background:var(--fg);color:var(--bg);font-size:14px}
.compare .num{font-size:clamp(22px,2vw,28px);line-height:1.2}
@media(min-width:900px){
.compare{grid-auto-flow:column;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,auto);gap:0;border-top:1px solid var(--frame);border-left:1px solid var(--frame)}
.compare__col{display:contents}
.compare__col>*,.compare__col>*+*{border:0;border-right:1px solid var(--frame);border-bottom:1px solid var(--frame)}}
.table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.table th,.table td{padding:14px 16px;border:1px solid var(--frame);text-align:left;vertical-align:top}
.table thead th{background:var(--fg);color:var(--bg);font-size:14px;line-height:1.25}
.table tbody th{font-weight:500}
.table--plate td,.table--plate tbody th{background:var(--raised)}
.table--center th,.table--center td{text-align:center}
.table td>.th-decide{margin-bottom:6px}
@media(max-width:719px){
.table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.table--stack,.table--stack tbody,.table--stack tr,.table--stack th,.table--stack td{display:block;width:100%}
.table--stack tr{border:1px solid var(--frame)}
.table--stack tr+tr{margin-top:12px}
.table--stack th,.table--stack td{border:0}
.table--stack td{border-top:1px solid var(--line)}
.table--stack td::before{content:attr(data-label);display:block;margin-bottom:4px;font-stretch:75%;font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--steel)}}
.steps{display:grid;gap:32px}
.step{position:relative;display:grid;gap:6px;align-content:start;min-height:96px;padding:16px 18px;border:1px solid var(--frame);color:var(--fg);text-decoration:none}
.step+.step::before{content:"\2193";content:"\2193"/"";position:absolute;left:18px;top:-28px;font-size:18px;line-height:24px;color:var(--steel)}
.step__name{font-size:16px}
@media(hover:hover){a.step:hover{box-shadow:inset 0 0 0 1px var(--frame)}}
a.step:active{box-shadow:inset 0 0 0 1px var(--frame)}
@media(min-width:900px){.steps{grid-auto-flow:column;grid-auto-columns:1fr;gap:28px}.step+.step::before{content:"\2192";content:"\2192"/"";left:-22px;top:50%;transform:translateY(-50%)}}

/* == 11 Figure, people, decisions, status, live == */
.figure__frame{position:relative;overflow:hidden;aspect-ratio:var(--ratio,3/2);border:1px solid var(--frame);background:var(--raised)}
.figure__frame>img,.figure__frame>video{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%)}
.figure--night .figure__frame{background:var(--th-night)}
.figure figcaption{margin-top:14px;max-width:60ch;font-size:16px;color:var(--lead)}
.tape{display:inline-block;padding:3px 10px;background:var(--th-tape);color:var(--th-on-tape);border:1px solid var(--th-tape-edge);font-size:14px;line-height:1.4;letter-spacing:0}
.tape small{font-size:inherit;color:var(--th-on-tape-2)}
.example{display:inline-block;padding:4px 10px;background:var(--th-plate);color:var(--th-steel);border:1px solid var(--th-steel)}
.th-decide{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--fg)}
.th-decide::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--red)}
.th-decide[data-state=decided]::before{background:var(--red)}
.th-decide--empty::before{border-color:var(--steel)}
.th-status{display:inline-block;flex:none;width:10px;height:10px;border:1.5px solid var(--fg);vertical-align:middle}
.th-status--run{background:var(--fg)}
.th-status--fault{background:repeating-linear-gradient(45deg,var(--fg) 0 1.5px,transparent 1.5px 4px)}
.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px 20px}
.readout{display:grid;gap:8px;align-content:start}
.readout__v{display:flex;flex-wrap:nowrap;align-items:baseline;gap:8px}
.readout__v[data-wait]{visibility:hidden}/* core.js: no reading yet (or none ever): the box keeps its height, "--" never shows */
.readout--sm .live{font-size:32px}

/* == 12 Brazos pane and context cards == */
.pane{border:1px solid var(--frame)}
.pane__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:14px 16px;border-bottom:1px solid var(--frame)}
.pane__readouts{padding:20px 16px;border-bottom:1px solid var(--frame)}
.pane__col{padding:20px 16px;border-bottom:1px solid var(--frame)}
.pane__col>.label{margin-bottom:14px}
@media(min-width:960px){.pane__cols{display:grid;grid-template-columns:1fr 1.2fr 1.4fr}.pane__col+.pane__col{border-left:1px solid var(--frame)}}
.pane__foot{padding:14px 16px;font-size:15px;color:var(--steel)}
.depts{display:grid;gap:12px;font-size:16px;line-height:1.35}
.depts li{display:flex;align-items:center;gap:10px}
.depts small{flex:none;margin-left:auto;font-size:14px;color:var(--steel);text-align:right;white-space:nowrap}/* the desk name wraps, never the status */
.feed{display:grid;gap:8px}
.ctx{display:grid;gap:6px;padding:12px 14px;background:var(--raised);border:1px solid var(--frame)}
.ctx__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ctx__dept{font-size:13px;color:var(--steel)}
.ctx__line{font-size:16px;line-height:1.4}
.ctx .th-decide{font-size:15px}
.ctx details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:14px;color:var(--steel);list-style:none;cursor:pointer}
.ctx details summary::-webkit-details-marker{display:none}
@media(hover:hover){.ctx details summary:hover{text-decoration:underline}}
.ctx details summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat}
.ctx details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat}
.ctx details p{margin-top:6px;font-size:15px;color:var(--lead)}

/* == 13 Chat == */
.chat{background:var(--th-plate);color:var(--fg);border:1px solid var(--frame)}
.chat__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:16px;border-bottom:1px solid var(--frame)}
.chat__modes{display:flex;flex-wrap:wrap;gap:8px}
.toggle{display:inline-flex;border:1px solid var(--frame)}
.toggle button{min-height:48px;padding:0 14px;border:0;background:none;font-size:14px;cursor:pointer;transition:box-shadow var(--th-t-hover) var(--th-ease)}
@media(hover:hover){.toggle button:not([aria-pressed=true]):hover{box-shadow:inset 0 0 0 1px var(--frame)}}
.toggle button:not([aria-pressed=true]):active{box-shadow:inset 0 0 0 1px var(--frame)}
.toggle button+button{border-left:1px solid var(--frame)}
.toggle [aria-pressed=true]{background:var(--fg);color:var(--bg)}
.chat__log{display:grid;align-content:start;gap:16px;min-height:340px;max-height:min(66vh,640px);overflow-y:auto;overscroll-behavior:contain;padding:20px 16px}
.msg{max-width:72ch;font-size:17px;line-height:1.5}
.msg__meta{display:block;margin-bottom:6px}
.msg--you{justify-self:end;max-width:min(560px,92%);padding:12px 16px;background:var(--th-paper);border:1px solid var(--line)}
.msg--answer{border:1px solid var(--frame)}
.msg--answer>.msg__meta{margin:0;padding:9px 16px;border-bottom:1px solid var(--frame)}
.msg__body{padding:14px 16px}
.msg__body>*+*{margin-top:.6em}
.msg__body ul{padding-left:1.2em;list-style:square}
.msg__body ol{padding-left:1.4em}
.msg__foot{display:grid;justify-items:start;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.chat__notice{max-width:60ch;padding-left:12px;border-left:2px solid var(--fg);font-size:16px}
.starters{display:grid;gap:8px}
.starter{display:block;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--frame);background:none;font-size:16px;line-height:1.4;letter-spacing:-.01em;text-align:left;cursor:pointer}
@media(hover:hover){.starter:hover{background:var(--th-paper)}}
.starter:active{background:var(--th-paper)}
.chat__form{display:flex;gap:8px;padding:16px;border-top:1px solid var(--frame)}
.chat__form .input{flex:1;min-width:0;resize:none}
.chat[aria-busy=true] .chat__form .btn{opacity:.55;pointer-events:none}
@media(max-width:519px){.chat__form{flex-direction:column}.chat__form .btn{width:100%}}
/* Phones: modes, model toggle, log, composer, then the gateway reading as a status strip under the form,
   so the composer is on screen when the frame's top meets the header (375x812). Swipes in the log reach the page. */
@media(max-width:719px){
.chat{display:flex;flex-direction:column}
.chat__top{display:contents}
.chat__modes{order:1;padding:16px 16px 0}
.chat__top>.toggle{order:2;display:flex;margin:12px 16px 16px}
.chat__top>.toggle button{flex:1 1 0;padding:0 10px}
.chat__log{order:3;min-height:240px;max-height:min(48vh,640px);overscroll-behavior:auto;border-top:1px solid var(--frame)}
.chat__form{order:4}
.chat__top>.readout{order:5;grid-template-columns:1fr auto;align-items:center;gap:2px 16px;padding:12px 16px;border-top:1px solid var(--frame)}
.chat__top>.readout>.readout__v{grid-column:2;grid-row:1/span 2}
.chat__top>.readout>:not(.readout__v){grid-column:1}
.chat__top>.readout>[data-gateway-note]{grid-column:1/-1}}

/* == 14 Forms == */
.form{padding:clamp(20px,3vw,32px);background:var(--th-plate);border:1px solid var(--frame)}
.fs{min-width:0;margin:0;padding:0;border:0}
.fs+.fs{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.fs>legend{float:left;width:100%;margin-bottom:20px;padding:0}
.fs>legend+*{clear:both}
.fields{display:grid;gap:20px}
@media(min-width:720px){.fields--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px;align-content:start}
.field__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;line-height:1.3;color:var(--fg)}
.field__label output{font-family:var(--th-font);font-stretch:100%;font-size:16px;text-transform:none;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.field__help{font-size:14px;color:var(--steel)}
.field__error{font-size:15px;color:var(--fg)}
.input{display:block;width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--steel);border-radius:0;background:var(--raised);color:var(--fg);font-size:16px;line-height:1.4;letter-spacing:-.01em;appearance:none}
.input::placeholder{color:var(--steel);opacity:1}
@media(hover:hover){.input:hover{border-color:var(--fg)}}
.input:focus-visible{outline-offset:0}
textarea.input{min-height:96px;resize:vertical}
.select{padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%);background-position:right 22px center,right 16px center;background-size:6px 6px;background-repeat:no-repeat}
.checks{display:grid;gap:0 24px}
@media(min-width:720px){.checks{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:center;gap:12px;min-height:48px;font-size:16px;line-height:1.35;cursor:pointer}
.check input{display:grid;place-content:center;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--fg);border-radius:0;background:var(--raised);appearance:none;cursor:pointer}
.check input::before{content:"";width:10px;height:5px;border:solid var(--fg);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);visibility:hidden}
.check input:checked::before{visibility:visible}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]::before{width:8px;height:8px;border:0;border-radius:50%;background:var(--fg);transform:none}
.range{display:block;width:100%;height:48px;margin:0;background:none;appearance:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:2px;background:var(--fg)}
.range::-moz-range-track{height:2px;background:var(--fg)}
.range::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px;border:0;border-radius:0;background:var(--fg);appearance:none}
.range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:0;background:var(--fg)}
.range:focus-visible{outline-offset:0}
/* Touch: iOS moves a range only from its thumb (core.js adds tap-to-jump there), so the thumb is a 32px target */
@media(pointer:coarse){.range::-webkit-slider-thumb{width:32px;height:32px;margin-top:-15px}.range::-moz-range-thumb{width:32px;height:32px}}

/* == 15 FAQ == */
.faq>details{border:1px solid var(--frame)}
.faq>details+details{border-top:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:16px clamp(16px,2.4vw,28px);font-size:clamp(19px,1.6vw,22px);line-height:1.35;letter-spacing:-.03em;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary{transition:background-color var(--th-t-hover) var(--th-ease)}
@media(hover:hover){.faq summary:hover{background:var(--raised)}}
.faq summary:active{background:var(--raised)}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--fg),var(--fg)) center/14px 1.5px no-repeat,linear-gradient(var(--fg),var(--fg)) center/1.5px 14px no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--fg),var(--fg)) center/14px 1.5px no-repeat}
.faq details>:not(summary){max-width:64ch;padding:0 clamp(16px,2.4vw,28px) 24px;color:var(--lead)}

/* == 16 Nameplate == */
.nameplate{--rv:linear-gradient(var(--th-ink),var(--th-ink));display:grid;gap:18px;padding:30px 28px;background:var(--rv) left 10px top 10px/6px 6px no-repeat,var(--rv) right 10px top 10px/6px 6px no-repeat,var(--rv) left 10px bottom 10px/6px 6px no-repeat,var(--rv) right 10px bottom 10px/6px 6px no-repeat,var(--th-plate);color:var(--fg);border:var(--th-keyline) solid var(--th-ink);border-radius:var(--th-r-plate)}
.np__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-bottom:14px;border-bottom:1px solid var(--th-ink)}
.np__brand{display:inline-flex;align-items:center;gap:8px;font-size:16px}
.np__brand .th-mark{width:22px;height:22px}
.np__k{display:block;margin-bottom:6px}
.np__owner,.np__input{display:block;width:100%;min-height:48px;padding:4px 0;border:0;border-bottom:1px solid var(--th-steel);border-radius:0;background:none;color:var(--fg)}
.np__owner{font-stretch:125%;font-weight:750;font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.012em}
.np__input{font-size:20px;font-weight:500;letter-spacing:-.02em}
.np__owner::placeholder,.np__input::placeholder{color:var(--th-steel);opacity:1}
.np__facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.np__facts>.np__wide{grid-column:1/-1}
.np__facts dd{font-size:16px;line-height:1.4}
.np__stays{font-weight:500}
.np__slots{display:grid;gap:8px}
.np__slots li{min-height:40px;padding:8px 12px;border:1px dashed var(--th-steel);font-size:15px;color:var(--th-steel)}
.np__decides{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.np__decides .np__input{flex:1 1 180px;width:auto}
.np__decides small{flex-basis:100%;font-size:14px;color:var(--th-steel)}

/* == 17 Footer == */
.foot{padding-block:clamp(72px,9vw,140px) 32px}
.foot__mark{container-type:inline-size;margin-bottom:clamp(40px,6vw,88px)}
.foot__mark span{display:block;font-size:9.4vw;font-size:10.2cqi;font-stretch:125%;font-weight:750;line-height:.86;letter-spacing:-.012em;white-space:nowrap;color:var(--th-paper);text-shadow:0 max(1px,.012em) 0 rgba(255,255,255,.7),0 min(-1px,-.012em) 0 rgba(31,38,32,.28);user-select:none}
.foot__mission{margin-bottom:14px}/* v3.4: the mission line, a label over the footer line */
.foot__line{font-size:clamp(24px,2.4vw,32px);line-height:1.25;letter-spacing:-.04em}
.foot__motto{margin-top:8px;font-size:18px;color:var(--lead)}
.foot__links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:32px}
.foot__links+.foot__links{margin-top:4px}/* v3.4: the page links, then Austin, the address and the two accounts */
.foot__links>*{display:inline-flex;align-items:center;min-height:44px}
.foot__links a{justify-content:flex-start;min-width:44px;text-decoration:none}/* a short link (X) starts on the line's left edge when the row wraps */
@media(hover:hover){.foot__links a:hover{text-decoration:underline}}
.foot__links a:active,.foot__links a[aria-current]{text-decoration:underline}
.foot__small{margin-top:16px}
.foot__small+.foot__small{margin-top:6px}

/* == 17d Funnel parts (v3.4, FUNNEL-AUDIT §4; markup in COMPONENTS §6 "Two doors" to "Thank-you") ==
   Two doors (the call, then the free report as a text link right under it), the 3-step strip, the founding line, the
   founding block, key-value rows, the next-steps list, the thank-you panel and the tap-sized "terms" link. All read the
   ground roles, so the same markup works on paper, night and plate. None of them is red, sticky or animated. */
.doors{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.center .doors,.doors--center{align-items:center}
.flow>.doors{margin-top:40px}
.door2{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px;line-height:1.3;letter-spacing:-.02em;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media(hover:hover){.door2:hover .arr{transform:translateX(4px)}}
.strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;max-width:760px;padding:4px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:16px;line-height:1.35}
.strip>li{padding:8px 0;white-space:nowrap}
.strip>li+li::before{content:"\2192";content:"\2192"/"";margin-right:12px;color:var(--steel)}
.strip__k{font-size:14px;color:var(--steel)}
.strip__k::after{content:" \00B7";content:" \00B7"/""}
.center .strip{justify-content:center;margin-inline:auto}
.fline{max-width:62ch;font-size:16px;line-height:1.5;color:var(--lead)}
.fline>a:first-child{color:var(--fg);font-weight:500}
.terms{position:relative;white-space:nowrap}
.terms::after{content:"";position:absolute;inset:-12px -6px}/* a 44px tap target around a one-word link in running text */
.kv{display:grid;margin:0}
.kv>div{display:grid;gap:4px;padding:14px 0}
.kv>div+div{border-top:1px solid var(--line)}
.kv dd{margin:0;font-size:17px;line-height:1.45}
@media(min-width:520px){.kv>div{grid-template-columns:9em minmax(0,1fr);gap:16px;align-items:baseline}}
.fnd{display:grid;gap:8px;max-width:880px;padding:clamp(20px,3vw,32px);background:var(--raised);border:1px solid var(--frame)}
.fnd__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding-bottom:12px;border-bottom:1px solid var(--frame)}
.fnd__foot{padding-top:12px;border-top:1px solid var(--line)}
.next{display:grid}
.next>li{display:grid;grid-template-columns:2em minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;font-size:17px;line-height:1.45}
.next>li+li{border-top:1px solid var(--line)}
.thanks{display:grid;gap:24px;align-content:start;max-width:880px}
.thanks>*{margin:0}
.thanks [tabindex="-1"]:focus{outline:none}
.thanks .actions{margin-top:4px}

/* == 17e Booking form (v3.5: /audit#book and the foot of home, one markup, assets/book.js) ==
   The form is the plate card on any ground (easy to fill in); "What happens next" beside it from 1024px, under it on
   a phone. The thank-you takes the place of both; the fallback shows only after the form falls back to an email. */
.field--wide{grid-column:1/-1}
.field__hint{font-weight:400;color:var(--steel)}
.form__send{display:grid;justify-items:start;gap:14px;margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.bk__grid{display:grid;gap:32px;align-items:start}
@media(min-width:1024px){.bk__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,4vw,64px)}}
.bk__grid.is-sent{grid-template-columns:minmax(0,1fr)}
.bk__grid.is-sent>.bk__next{display:none}
.bk__main{display:grid;gap:20px;min-width:0}
.bk__grid .form{padding:clamp(20px,2.4vw,32px)}
.bk__grid .form__send{margin-top:24px;padding-top:24px}
.bk__grid .form__send .fine{max-width:56ch}
.bk__grid textarea.input{min-height:72px}
.bk__next{display:grid;gap:12px;min-width:0}
@media(min-width:1024px){.bk__next{padding-top:clamp(20px,2.4vw,32px)}}
.bk__next .next p{margin:0;max-width:60ch}
.bk__next .nw,.thanks .nw{white-space:nowrap}
.bk__fallback{display:grid;gap:8px;max-width:64ch}
.bk__fallback p{margin:0}
.bk__fallback a{overflow-wrap:anywhere}
.bk__copy{min-height:48px;padding:0 14px;font-size:14px}
.thanks__h{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.04em;outline-offset:6px}
.thanks__lead{max-width:60ch;font-size:17px;line-height:1.5}
.thanks__to{overflow-wrap:anywhere;font-weight:500}
.thanks .kv,.thanks .next{margin-top:8px}
.thanks .kv dd{overflow-wrap:anywhere;white-space:pre-line}
.thanks .next p{margin:0}
.thanks .actions{align-items:center;gap:8px 24px}
@media print{.bk__grid{display:none!important}}

/* == 17b Systems grid (COMPONENTS §6; home #systems in #desks, /how-it-works #systems) == */
/* What Si reads: plain-text names in our type, generic 7x7 category glyphs, status rings. Never a vendor logo, colour or
   font; never a square (squares mean machine and desk state), checkbox, tick or red. Cells have no fill (the grain shows
   through), no hover and no tab stop. Solid ring = Planned; dotted ring (8 dashes on pathLength 16) = Planned, access to
   confirm; a filled ring is reserved (shipped and in use on a pilot's own records, with a dated stamp). Contrast on grained
   paper: names ink 11.9, category text and rings steel 5.6, header paper on ink 13.0. Layout per page: home.css 4b, how.css. */
.sys__key{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none}
.sys__key li{display:flex;align-items:center;gap:8px}
.sys__grid{display:grid;border-top:1px solid var(--frame);border-left:1px solid var(--frame)}
.sys__head{margin:0;padding:10px 12px 12px;border-right:1px solid var(--frame);border-bottom:1px solid var(--frame);background:var(--fg);color:var(--bg);font-stretch:75%;font-weight:500;font-size:15px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase}
.sys__head small{display:block;margin-top:2px;font-stretch:100%;font-weight:400;font-size:14px;letter-spacing:-.01em;text-transform:none}
.sys__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
.sys__c{position:relative;display:grid;align-content:space-between;gap:6px;min-height:56px;padding:10px 30px 10px 12px;border-right:1px solid var(--frame);border-bottom:1px solid var(--frame)}
.sys__n{font-size:16px;line-height:1.2;letter-spacing:-.02em;color:var(--fg);hyphens:manual;overflow-wrap:normal}
.sys__k{display:flex;align-items:center;gap:6px;font-stretch:75%;font-weight:500;font-size:14px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--steel)}
.sys__g{flex:none;width:14px;height:14px;fill:var(--steel)}
.sys__m{flex:none;width:12px;height:12px;fill:none;stroke:var(--steel);stroke-width:1.5}
.sys__c>.sys__m{position:absolute;top:10px;right:10px}
[data-st=A] .sys__m circle{stroke-dasharray:1 1}
.sys__tm{margin-top:16px;max-width:72ch;color:var(--fg)}
@media(max-width:359px){.sys__c{padding:10px 26px 10px 10px}.sys__c>.sys__m{right:8px}}
@media(min-width:720px){.sys__n{font-size:17px}}
@media(min-width:1280px){.sys__n{font-size:18px}}

/* == 17c Forced colours (Windows High Contrast) == */
/* Forced colours drop every background fill, gradient and box-shadow. Without this block a pressed toggle, chip or tab
   looked like the others, Running/Idle/Fault squares and a decided red square were the same hollow box, the menu
   button lost two of its three bars, the plus/minus marks and the slider track and thumb vanished. States use the
   system Highlight pair; drawn marks use CanvasText (system colours, so they follow the reader's theme). */
@media(forced-colors:active){
/* :root lifts these over the page sheets (how.css, scenes.css, home.css), which load after this one */
:root .toggle [aria-pressed=true],:root .chip[aria-pressed=true],:root .chip[aria-current],:root .how-ex__tabs .chip[aria-selected=true],:root .scene__tabs [aria-current],:root .pane__pause[aria-pressed=true]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
:root .th-status--run,:root .th-decide[data-state=decided]::before,:root .btn--decide::before,:root .record::before{forced-color-adjust:none;background:CanvasText}
:root .th-status--fault{forced-color-adjust:none;background:repeating-linear-gradient(45deg,CanvasText 0 1.5px,transparent 1.5px 4px)}
.hdr__menu i,.hdr__menu i::after,.bar__x::before,.bar__x::after{forced-color-adjust:none;background:CanvasText}
.hdr__menu i{box-shadow:0 -7px 0 CanvasText,0 7px 0 CanvasText}
.hdr__menu[aria-expanded=true] i{box-shadow:none}
.faq summary::after,.sys__sum::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/14px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 14px no-repeat}
.faq details[open] summary::after,.sys__fold[open]>.sys__sum::after{background:linear-gradient(CanvasText,CanvasText) center/14px 1.5px no-repeat}
.ctx details summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/12px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 12px no-repeat}
.ctx details[open] summary::after{background:linear-gradient(CanvasText,CanvasText) center/12px 1.5px no-repeat}
.range{forced-color-adjust:none}
.range:focus-visible{outline-color:Highlight}
.range::-webkit-slider-runnable-track{background:CanvasText}
.range::-webkit-slider-thumb{background:CanvasText}
.range::-moz-range-track{background:CanvasText}
.range::-moz-range-thumb{background:CanvasText}
.select{background-image:none;appearance:auto}
}

/* == 18 Reduced motion and print == */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
.btn:hover .arr,.hdr__cta:hover .arr,.link:hover .arr{transform:none}}
@media print{
.bar,.hdr,.menu,.fab,.skip,.chat__form,.foot__mark{display:none!important}
*{--bg:#fff;--fg:#000;--lead:#222;--steel:#333;--frame:#000;--line:#999;--raised:#fff}
body,.sec{background:#fff!important;color:#000}
.sec{padding-block:24px}
.sec::before,.grain::before{display:none}
.reveal,.giant>span{animation:none!important;visibility:visible!important}
.giant{font-size:48px}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:12px}
.card,.ctx,.msg,tr{break-inside:avoid}
.sys__head{background:none;color:#000;border-bottom:2px solid #000}
/* Night panels print on paper (with "background graphics" on, a black pane with black readouts was unreadable); a
   pressed toggle or chip prints as an outlined box, since its filled ground is dropped. core.js opens every <details>
   for print and closes them again after. */
.on-dark,.pane{background:#fff!important;color:#000}
.toggle [aria-pressed=true],.chip[aria-pressed=true],.chip[aria-current],.scene__tabs [aria-current]{background:none!important;color:#000!important;outline:2px solid #000;outline-offset:-2px}}
/* v3.9 · the mission is the footer's big line on every page (SITE-AUDIT §2; owner 2026-10-09) */
.foot__line--mission{max-width:22ch;font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.045em;text-wrap:balance}

/* v3.9 · monthly example + payback chart (home #benefits, /how-it-works #prices, /audit; core.js TH.payback draws it) */
.pb{margin:18px 0 6px}
.pb__svg{display:block;width:100%;height:auto;overflow:visible}
.pb__svg .ax{stroke:var(--line);stroke-width:1}
.pb__svg .tx{fill:var(--steel);font:12px var(--th-font-mono)}
.pb__svg .paid{fill:none;stroke:var(--steel);stroke-width:2;stroke-dasharray:5 5}
.pb__svg .back{fill:none;stroke:var(--fg);stroke-width:3}
.pb__svg .gain{fill:var(--fg);opacity:.08}
.pb__svg .dot{fill:var(--fg)}
.pb__svg .lbl{fill:var(--fg);font:500 13px var(--th-font)}
.pb__key{display:flex;gap:20px;margin-top:6px;font-size:13px;color:var(--lead)}
.pb__k::before{content:"";display:inline-block;width:18px;margin-right:8px;vertical-align:middle;border-top:3px solid var(--fg)}
.pb__k--paid::before{border-top:2px dashed var(--steel)}

/* v3.9 · Si against one full-time hire */
.hire{margin-top:clamp(32px,4vw,48px)}
.hire__bars{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.hire__bars li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 76px;align-items:center;gap:12px;font-size:14px}
.hire__b{height:22px;width:calc(var(--v) / 15000 * 100%);max-width:100%;background:var(--line)}
.hire__v{font-variant-numeric:tabular-nums;text-align:right}
.hire__si{font-weight:500}
.hire__si .hire__b{background:var(--fg)}
.hire__note{margin-top:14px;max-width:62ch;color:var(--lead)}
@media(max-width:479px){.hire__bars li{grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto auto;gap:4px 10px}.hire__n{grid-column:1/-1}.hire__b{grid-column:1}}

.how-ret{display:grid;gap:18px;margin-top:clamp(32px,4vw,48px)}
.how-ret>p{max-width:70ch}
.pb--wide{grid-column:1/-1;max-width:980px;margin-top:8px}
.pb__svg .end{fill:var(--steel);font:12px var(--th-font-mono)}
.pb__svg .end--back{fill:var(--fg);font-weight:500}
@media(max-width:600px){.pb__svg .tx,.pb__svg .end{font-size:17px}.pb__svg .lbl{font-size:19px}}
/* v4 (2026-10-10): the header button says "Free Readiness Check"; under 560px, where it would push into the wordmark,
   it says "Book a call" (the same link, /audit#book). */
.hdr__short{display:none}
@media(max-width:559px){.hdr__long{display:none}.hdr__short{display:inline}}