/* Axi Growth home page: the check print.
   One drawing sheet. Blueprint at the head and foot, paper in between.
   Big Shoulders Display for display type, Public Sans for reading. */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/big-shoulders-display-latin.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: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/public-sans-latin.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: "Big Shoulders Fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 88%; ascent-override: 92%; }

:root {
  --paper: #f7f6f2;
  --ink: #0b0c0e;
  --ink-2: #3a3d42;
  --ink-3: #5c6069;
  --rule: #cfcdc6;
  --blue: #0b2fd6;
  --white: #ffffff;
  --bline: rgba(255,255,255,0.5);
  --bmute: rgba(255,255,255,0.78);
  --red: #c1121f;
  --red-soft: #ffc9c9;
  --green: #1a7f37;
  --display: "Big Shoulders Display", "Big Shoulders Fallback", "Arial Narrow", sans-serif;
  --text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --frame: 20px;
  --strip: 28px;
  --inset: 72px;
  --head: 64px;
  --corner: 40px;
  --focus: var(--red);
  /* Axi Growth logotype: the name drawn as one custom heavy alphabet (flat-top A,
     chamfered G/O/R, peaked W). A single mask so it takes the header ink — ink on
     paper, white on blue — with no markup change on any page. Aspect 616:100. */
  --axi-word: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 616 100'%3E%3Cpath transform='translate(0 0)' d='M18 0 L38 0 L20 100 L0 100 Z M62 100 L42 100 L24 0 L44 0 Z M10 62 L52 62 L52 78 L10 78 Z'/%3E%3Cpath transform='translate(70 0)' d='M0 0 L22 0 L62 100 L40 100 Z M40 0 L62 0 L22 100 L0 100 Z'/%3E%3Cpath transform='translate(140 0)' d='M0 0 L22 0 L22 100 L0 100 Z'/%3E%3Cpath transform='translate(200 0)' d='M0 12 L12 0 L46 0 L58 12 L58 28 L36 28 L36 22 L22 22 L22 78 L36 78 L36 64 L30 64 L30 48 L58 48 L58 88 L46 100 L12 100 L0 88 Z'/%3E%3Cpath transform='translate(266 0)' d='M0 0 L46 0 L58 12 L58 42 L46 54 L22 54 L22 100 L0 100 Z M22 34 L40 34 L40 20 L22 20 Z M30 54 L50 54 L62 100 L42 100 Z'/%3E%3Cpath transform='translate(336 0)' d='M12 0 L46 0 L58 12 L58 88 L46 100 L12 100 L0 88 L0 12 Z M22 26 L22 74 L26 78 L32 78 L36 74 L36 26 L32 22 L26 22 Z'/%3E%3Cpath transform='translate(402 0)' d='M0 0 L18 0 L33 100 L15 100 Z M32 8 L50 8 L33 100 L15 100 Z M32 8 L50 8 L67 100 L49 100 Z M64 0 L82 0 L67 100 L49 100 Z'/%3E%3Cpath transform='translate(492 0)' d='M0 0 L58 0 L58 22 L0 22 Z M18 0 L40 0 L40 100 L18 100 Z'/%3E%3Cpath transform='translate(558 0)' d='M0 0 L22 0 L22 100 L0 100 Z M36 0 L58 0 L58 100 L36 100 Z M22 40 L36 40 L36 58 L22 58 Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + var(--frame) + 16px); scroll-padding-bottom: calc(var(--corner) + var(--frame) + 8px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: var(--blue); color: var(--white); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 0.92; letter-spacing: -0.01em; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: inherit; }
caption.vh, .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
.u { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color 0.2s; }
.u:hover { color: var(--red); }
.blue .u:hover { color: var(--white); }
.blue, .foot, .mobile-nav, body.menu-open .masthead, html.tone-blue .masthead, html.tone-blue .skip, html.tone-blue-bottom .corner { --focus: var(--white); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus, section:focus { outline: none; }

.wrap { width: min(1360px, 100% - var(--inset) * 2); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.two { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: start; }
.two > .head { grid-column: 1 / span 4; position: sticky; top: calc(var(--head) + var(--frame) + 32px); }
.two > .body { grid-column: 5 / span 8; }
.two > .head p { margin-top: 22px; color: var(--ink-2); max-width: 34ch; }
h2 { font-size: clamp(40px, 5vw, 72px); }
h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 0.95; }
.lead { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.4; }
.body-p { color: var(--ink-2); max-width: 54ch; }
p, li, td, dd, figcaption, small { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; background: var(--ink); color: var(--white); border: 1.5px solid var(--ink); font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn:hover { background: var(--red); border-color: var(--red); }
.btn.onblue { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn.onblue:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn.line.onblue { background: transparent; color: var(--white); border-color: var(--white); }
.btn.line.onblue:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* Sections. Every section is a zone on the sheet. On paper, the seam between zones is drawn as a rule, not left as air. */
section { padding: 96px 0 72px; position: relative; }
section + section:not(.blue) { padding-top: 56px; }
section.blue { padding-bottom: 96px; }
body.home section:not(.blue):not(.hero)::before { content: ""; display: block; width: min(1360px, 100% - var(--inset) * 2); margin: 0 auto 40px; border-top: 1.5px solid var(--ink); }
section.blue { background: var(--blue); color: var(--white); }
section.blue .body-p { color: var(--bmute); }
section.blue .two > .head p { color: var(--bmute); }

/* ---------- The sheet frame: two layers, paper and blueprint, clipped at the stock change by home.js ---------- */
/* The full drawing sheet (frame, zone letters, corner title block) belongs to the home page. The 25 inner
   pages carry only the frame border, which without those devices reads as an arbitrary box, so they drop it
   (one variable) and present as clean full-width documents; the close block loses its box for ruled columns. */
body:not(.home) { --frame: 0px; }
body:not(.home) .sheet { display: none; }
body:not(.home) .tblock { border: 0; }
body:not(.home) .tblock .r { border-bottom: 0; column-gap: 30px; }
body:not(.home) .tblock .r + .r { margin-top: 6px; }
body:not(.home) .tblock .c { border-right: 0; padding: 14px 0 0; border-top: 1.5px solid var(--bline); }
.sheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; border: var(--frame) solid var(--paper); }
.sheet.paper { border-color: var(--paper); clip-path: inset(100% 0 0 0); }
.sheet.blue { border-color: var(--blue); }
.sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.sheet rect { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sheet.paper rect { stroke: var(--ink); }
.sheet.blue rect { stroke: var(--bline); }
body.menu-open .sheet.paper { visibility: hidden; }
body.menu-open .sheet.blue { clip-path: none !important; }

.zones { position: fixed; top: calc(var(--frame) + var(--head) + 1.5px); bottom: calc(var(--frame) + 1.5px + var(--corner)); width: var(--strip); z-index: 61; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; }
.zones.l { left: calc(var(--frame) + 1.5px); }
.zones.r { right: calc(var(--frame) + 1.5px); pointer-events: none; }
.zones a, .zones span { position: relative; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink-3); padding: 8px 6px; transition: color 0.2s; }
.zones .inblue { color: var(--bmute); }
.zones a:hover { color: var(--ink); }
.zones a.inblue:hover { color: var(--white); }
.zones .on { color: var(--red); font-weight: 600; }
.zones .inblue.on { color: var(--white); }
.zones .on::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 12px; height: 1.5px; margin-left: -6px; background: currentColor; }
.zones a:focus-visible { outline-color: var(--ink); }
.zones a.inblue:focus-visible { outline-color: var(--white); }

/* Running title block: one row in the bottom-right corner until the real title block arrives. Spans the sheet below 1100px. */
.corner { position: fixed; right: calc(var(--frame) + 1.5px); bottom: calc(var(--frame) + 1.5px); height: var(--corner); z-index: 62; display: flex; align-items: stretch; background: var(--paper); color: var(--ink); border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); font-size: 13px; line-height: 1; transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.2s, visibility 0s; }
html.tone-blue-bottom .corner { background: var(--blue); color: var(--white); border-color: var(--bline); }
.corner > div { display: flex; align-items: center; gap: 12px; min-width: 220px; padding: 0 14px; border-right: 1px solid var(--rule); }
html.tone-blue-bottom .corner > div { border-color: var(--bline); }
.corner .k { color: var(--ink-3); font-weight: 500; }
html.tone-blue-bottom .corner .k { color: var(--bmute); }
.corner .v { font-weight: 500; white-space: nowrap; margin-left: auto; transition: opacity 0.15s; }
.corner .v.swap { opacity: 0; }
.corner a.go { display: flex; align-items: center; padding: 0 14px; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; }
.corner a.go span { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; transition: color 0.2s; }
.corner a.go .brief { display: none; }
.corner a.go:hover span { color: var(--red); }
html.tone-blue-bottom .corner a.go:hover span { color: var(--white); }
.corner.off { opacity: 0; visibility: hidden; pointer-events: none; transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.2s, visibility 0s linear 0.2s; }

/* ---------- Header ---------- */
.masthead { position: fixed; top: calc(var(--frame) + 1.5px); left: calc(var(--frame) + 1.5px); right: calc(var(--frame) + 1.5px); height: var(--head); z-index: 58; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); transition: background 0.3s, color 0.3s, border-color 0.3s; }
html.tone-blue .masthead { background: var(--blue); color: var(--white); border-color: var(--bline); }
.masthead .in { height: 100%; display: flex; align-items: center; justify-content: space-between; width: min(1360px, 100% - 2 * (var(--inset) - var(--frame) - 1.5px)); margin-inline: auto; }
/* Logotype: the drawn wordmark, masked in currentColor so it inverts with the header tone.
   Height sets the cap-height; width follows the 616:100 artwork. Text spans stay for a11y. */
.wordmark { display: block; width: 135.5px; height: 22px; background: currentColor; -webkit-mask: var(--axi-word) left center / contain no-repeat; mask: var(--axi-word) left center / contain no-repeat; }
.wordmark .wm-a, .wordmark .wm-g { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 15px; font-weight: 500; border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color 0.2s; }
.nav a:hover { border-color: currentColor; }
.nav a[aria-current] { border-color: currentColor; }
.nav a.book { border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.mobile-nav a.book { border-bottom-width: 1.5px; }
.nav-toggle { display: none; background: none; border: 1.5px solid currentColor; color: inherit; min-height: 40px; padding: 0 14px; align-items: center; font: 500 14px var(--text); cursor: pointer; }
html:not(.js) .nav-toggle { display: none; }
.mobile-nav { display: none; }
.mobile-nav.open { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--blue); color: var(--white); z-index: 57; padding: calc(var(--frame) + var(--head) + 40px) 32px 40px; gap: 0; overflow: auto; }
.mobile-nav a { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; padding: 14px 0; border-bottom: 1px solid var(--bline); }
body.menu-open { overflow: hidden; }
body.menu-open .masthead { background: var(--blue); color: var(--white); border-color: var(--bline); }
body.menu-open .corner { opacity: 0; visibility: hidden; pointer-events: none; }
.skip { position: absolute; left: 32px; top: -80px; z-index: 200; background: var(--ink); color: var(--white); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 32px; }

/* ---------- A. Hero, blueprint ---------- */
.hero { min-height: 100svh; padding: calc(var(--frame) + var(--head) + 28px) 0 40px; display: flex; align-items: center; }
.hero .grid { row-gap: 0; grid-template-rows: auto auto 1fr; align-items: start; }
.notes { grid-column: 1 / span 5; color: var(--bmute); font-size: 13px; line-height: 1.45; font-weight: 500; margin-bottom: 30px; }
.notes ol { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: n; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 18px 1fr; gap: 6px; text-wrap: pretty; }
.notes li::before { content: counter(n) "."; }
.hero h1 { grid-column: 1 / span 8; font-size: clamp(46px, 6.2vw, 88px); font-weight: 800; line-height: 0.9; letter-spacing: -0.015em; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.hero h1 .l > span { display: block; }
.hero .intro { grid-column: 1 / span 7; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--bline); }
.hero .intro p { font-size: 17.5px; line-height: 1.5; max-width: 56ch; }
/* The intro is one paragraph on a wide screen. It is marked up as a lead sentence and the rest so the phone can put the
   action and Fig. 1 between them; here the two run on inline and read as the single paragraph they were. */
.hero .intro .copy { max-width: 56ch; }
.hero .intro .copy p { display: inline; max-width: none; }
.hero .hero-visual:empty { display: none; }
.hero .act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hero .act small { flex-basis: 100%; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--bmute); max-width: 96ch; }
.hero .act small a { color: var(--white); }

/* The Signal Sheet */
.signal { grid-column: 9 / span 4; grid-row: 1 / span 3; align-self: start; padding-top: 6px; }
.signal .t { font-size: 15px; font-weight: 500; line-height: 1.3; }
.signal .d { font-size: 13px; color: var(--bmute); font-weight: 500; margin-top: 4px; }
.sigs { list-style: none; margin: 22px 0 0; padding: 0; }
.sig { padding: 0 0 16px; }
.sig .n { display: block; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 0.9; letter-spacing: -0.01em; min-width: 4ch; overflow: hidden; padding-bottom: 0.08em; }
.sig .n > span { display: block; }
.sig .dim-wrap { min-width: 22px; }
.sig svg { display: block; width: 100%; height: 26px; overflow: visible; margin-top: 2px; }
.sig svg line { stroke: var(--white); stroke-width: 1.5; fill: none; }
.sig svg .ext { stroke: var(--bline); }
.sig svg polygon { fill: var(--white); }
.sig.tight svg polygon { transform: scaleX(-1); }
.sig .lab { display: block; font-size: 14px; line-height: 1.4; color: var(--bmute); margin-top: 6px; max-width: 34ch; }
.heads { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--bline); }
.heads li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 6px 0; align-items: baseline; }
.heads .k { font-size: 12px; font-weight: 600; color: var(--bmute); line-height: 1.5; }
.heads .h { font-size: 15px; line-height: 1.4; }
.heads .h a { color: inherit; text-decoration: underline; text-decoration-color: var(--bline); text-underline-offset: 3px; }
.heads .h a:hover { text-decoration-color: currentColor; }
.heads time { display: block; font-size: 13px; color: var(--bmute); }
.signal .f { font-size: 13px; line-height: 1.45; color: var(--bmute); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bline); }

/* ---------- B. General notes, paper ---------- */
.fig { margin: 0; }
.fig .frame { overflow: hidden; aspect-ratio: 21 / 9; background: var(--rule); }
.fig .frame img { width: 100%; height: 100%; object-fit: cover; }
.fig figcaption { font-size: 13px; line-height: 1.4; color: var(--ink-3); font-weight: 500; padding-top: 10px; }
.fig figcaption b { font-weight: 600; color: var(--ink); margin-right: 10px; }
/* Fig. 1, the exchange. An AI chat window drawn on the sheet: the buyer's line typed into the composer and sent, the
   tool thinking, the reply streamed in, the product in green, the two names in red, and the sheet's own note with a
   leader to the second name. home.js runs it when it scrolls into view; with JS off or reduced motion the finished
   state is what the CSS draws. The window is dark, as these tools are on a desk, and it is the one place on the site
   with rounded corners: it depicts a screen. It sits straight on the paper like the other figures, no box round it. */
.fig.chat .frame { aspect-ratio: auto; background: transparent; border: 0; overflow: visible; position: relative; display: grid; grid-template-columns: minmax(0, 820px) minmax(220px, 1fr); align-items: center; padding: 8px 0 12px; }
.chat .win { --scr: #15171b; --scr-2: #262930; --scr-line: rgba(255,255,255,0.14); --scr-text: #f2f2ef; --scr-mute: rgba(255,255,255,0.55); --scr-red: #d81f2d; --scr-green: #1f9a47;
  background: var(--scr); color: var(--scr-text); border: 1px solid var(--scr-line); border-radius: 18px; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.45; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 28px 56px -32px rgba(11,12,14,0.55), 0 8px 20px -14px rgba(11,12,14,0.35); }
.chat .bar { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--scr-line); font-size: 13px; font-weight: 500; }
.chat .av { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--scr-text); position: relative; flex: none; }
.chat .av::after { content: ""; position: absolute; inset: 8px; background: var(--scr); transform: rotate(45deg); }
.chat .msgs { padding: 26px 20px 8px; display: flex; flex-direction: column; gap: 20px; min-height: 196px; }
.chat .msg { display: flex; gap: 14px; align-items: flex-start; }
.chat .msg.user { justify-content: flex-end; }
.chat .msg.user .b { background: var(--scr-2); border-radius: 20px 20px 5px 20px; padding: 11px 18px; max-width: 78%; font-weight: 500; }
.chat .msg.bot .b { padding-top: 0.05em; max-width: 86%; }
.chat .msg.bot .av { margin-top: 2px; }
.chat .msg.bot p { margin: 0 0 0.55em; }
.chat .msg.bot ul { margin: 0 0 0.55em; padding-left: 1.15em; }
.chat .msg.bot li { margin: 0.3em 0; padding-left: 0.1em; }
.chat .msg.bot li::marker { color: var(--scr-mute); }
/* the rest of the answer is there but not for reading: the point is who it names, not what it says about them */
.chat .blur { filter: blur(3.5px); opacity: 0.72; user-select: none; }
.chat .blur.d { display: block; margin-top: 0.2em; }
.chat .msg.bot li { margin: 0.5em 0; }
.chat.playing .msg.bot .w:not(.on) { display: none; }   /* home.js wraps each word and reveals them in order */
.chat .dots { display: none; gap: 5px; align-items: center; height: 1.45em; }
.chat .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--scr-mute); animation: dot 1.1s ease-in-out infinite; }
.chat .dots i:nth-child(2) { animation-delay: 0.15s; } .chat .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 70%, 100% { opacity: 0.35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.chat .composer { display: flex; align-items: center; gap: 10px; margin: 16px 20px 20px; padding: 8px 8px 8px 18px; border: 1px solid var(--scr-line); background: rgba(255,255,255,0.04); border-radius: 999px; }
.chat .composer .in { flex: 1; min-width: 0; min-height: 1.45em; }
.chat .composer .tx:empty::before { content: attr(data-ph); color: var(--scr-mute); }
.chat .composer.typing .tx:empty::before { content: none; }
.chat .composer.typing .tx::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; background: var(--scr-text); vertical-align: -0.2em; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat .send { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--scr-text); display: grid; place-items: center; transition: transform 0.15s, background 0.15s; }
.chat .send svg { width: 18px; height: 18px; fill: none; stroke: var(--scr); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat .composer.pressed .send { transform: scale(0.86); background: var(--scr-mute); }
.chat mark { color: #fff; background: linear-gradient(var(--scr-red), var(--scr-red)) left / 100% 100% no-repeat; padding: 0.04em 0.3em; margin: 0 -0.02em; border-radius: 6px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size 0.4s cubic-bezier(.2,.7,.2,1), color 0.2s, padding 0.4s cubic-bezier(.2,.7,.2,1), font-weight 0.4s; }
.chat mark.you { background-image: linear-gradient(var(--scr-green), var(--scr-green)); }
.chat li + li mark { transition-delay: 0.2s; }
/* before its sweep a name is plain running text: no colour, no padding, the bubble's weight */
.chat.playing:not(.sent) mark.you, .chat.playing:not(.marked) mark:not(.you) { background-size: 0 100%; color: inherit; padding: 0.04em 0; font-weight: inherit; transition: none; }
/* the buyer's line is highlighted as it is typed: "your product" comes up already green in the composer, not only once sent */
.chat.playing:not(.sent) .composer mark.you { background-size: 100% 100%; color: #fff; padding: 0.06em 0.26em; font-weight: 600; transition: none; }
/* "your product" is a placeholder standing in for whatever the visitor sells: blurred like a redaction, still green,
   with a short leader labelling it — the sheet's own annotation, the same device as the note that points at a name. */
.hero .chat mark.you .pt { filter: blur(2.6px); }
.hero .chat mark.you { position: relative; overflow: visible; }
.hero .chat .msg.user .b { overflow: visible; }
.hero .chat mark.you::after { content: "your product"; position: absolute; left: 50%; bottom: calc(100% + 19px); transform: translateX(-50%); white-space: nowrap; font-family: var(--text); font-weight: 600; font-size: 12.5px; letter-spacing: -0.01em; color: #33cc6a; filter: none; pointer-events: none; }
.hero .chat mark.you::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); width: 9px; height: 15px; transform: translateX(-50%); filter: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='M4.5 0 V9' stroke='%2333cc6a' stroke-width='1.5' fill='none'/%3E%3Cpath d='M4.5 15 L1 9 H8 Z' fill='%2333cc6a'/%3E%3C/svg%3E") center/contain no-repeat; }
.chat .msg.user { transition: opacity 0.3s, transform 0.3s cubic-bezier(.2,.7,.2,1); }
.chat.playing:not(.sent) .msg.user { opacity: 0; transform: translateY(8px); transition: none; }
.chat .msg.bot { transition: opacity 0.25s; }
.chat.playing:not(.thinking):not(.answered) .msg.bot { opacity: 0; transition: none; }
.chat.playing.thinking .dots { display: inline-flex; }
.chat.playing.thinking .msg.bot .tx { display: none; }
.chat .note { position: absolute; right: clamp(0px, 3vw, 40px); top: 50%; transform: translateY(-50%); font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 44px); line-height: 1; color: var(--red); transition: opacity 0.3s 0.35s; }
.chat .leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.chat.led .leader { display: block; }
.chat .leader polyline { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.55s ease-out; }
.chat .leader circle { fill: var(--red); transition: opacity 0.2s; }
.chat.playing:not(.noted) .note { opacity: 0; transition: none; }
.chat.playing:not(.noted) .leader polyline { stroke-dashoffset: 1; transition: none; }
.chat.playing:not(.noted) .leader circle { opacity: 0; transition: none; }
#notes .two { margin-top: 72px; }
.year .row { position: relative; padding-top: 16px; }
.year .fig-n { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 6.6vw, 96px); line-height: 0.85; letter-spacing: -0.02em; display: block; margin-bottom: 8px; }
.year .dim-wrap { min-width: 22px; }
.year svg { display: block; width: 100%; height: 26px; overflow: visible; }
.year svg line { stroke: var(--ink); stroke-width: 1.5; }
.year svg .ext { stroke: var(--ink-3); }
.year svg polygon { fill: var(--ink); }
.year .cap { font-size: 13px; line-height: 1.4; color: var(--ink-3); font-weight: 500; margin-top: 10px; max-width: 46ch; }
.year .cap span { display: block; white-space: nowrap; }
.gnotes { margin-top: 64px; border-top: 1.5px solid var(--ink); }
.gnotes tr { border-bottom: 1px solid var(--rule); }
.gnotes th, .gnotes td { padding: 22px 0; vertical-align: baseline; }
.gnotes th { width: 64px; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink-3); }
.gnotes td:nth-child(2) { width: 120px; font-weight: 600; font-size: 17px; line-height: 1.45; font-variant-numeric: tabular-nums; padding-right: 24px; white-space: nowrap; }
.gnotes td:last-child { font-size: 16px; line-height: 1.45; }
.gnotes td:last-child span { display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; }
#notes .after { margin-top: 32px; max-width: 54ch; }

/* ---------- C. The checker's list ---------- */
.checks { border-top: 1.5px solid var(--ink); }
.checks thead th { font-size: 13px; font-weight: 500; color: var(--ink-3); padding: 12px 0 10px; border-bottom: 1px solid var(--rule); }
.checks thead th:last-child, .checks tbody td:last-child { text-align: right; width: 96px; }
.checks tbody th, .checks td { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.45; vertical-align: baseline; }
.checks tbody th { width: 64px; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink-3); }
.checks tfoot td { border-bottom: 0; padding-top: 22px; color: var(--ink-2); }
.checks-act { margin-top: 8px; font-size: 16px; line-height: 1.5; max-width: 58ch; }
.stations + .checks-act, .qs + .checks-act { margin-top: 28px; }

/* ---------- D. Parts list ---------- */
.parts { border-top: 1.5px solid var(--ink); }
.parts thead th { font-size: 13px; font-weight: 500; color: var(--ink-3); padding: 12px 0 10px; border-bottom: 1px solid var(--rule); }
.parts thead th:last-child { text-align: right; }
.parts tbody th, .parts td { padding: 32px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.parts tbody th { width: 64px; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink-3); padding-top: 38px; }
.parts td:nth-child(2) { padding-right: 32px; }
.parts td:last-child { width: 240px; text-align: right; }
.parts h3 a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.12em; text-decoration-color: var(--rule); transition: color 0.2s, text-decoration-color 0.2s; }
.parts h3 a:hover { color: var(--red); text-decoration-color: var(--red); }
.parts td p { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 14px 0 0; max-width: 58ch; }
.parts .price { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; padding-top: 8px; }
.parts .terms { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-3); margin-top: 8px; }
.parts .ref { display: inline-block; font-size: 14px; font-weight: 500; padding: 10px 0; margin-top: 4px; }
.parts .ref + .ref { margin-left: 16px; }
.parts tr.mark .terms::before { content: "Start here. "; color: var(--ink); font-weight: 600; }
.parts-foot { margin-top: 28px; font-size: 16px; }
.parts-foot .sep { color: var(--ink-3); margin: 0 4px; }

/* ---------- E. Schedule ---------- */
.sched svg { display: block; width: 100%; height: auto; overflow: visible; }
.sched svg line, .sched svg path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.sched svg .tick { stroke: var(--ink-3); stroke-width: 1; }
.sched svg .wk { font-family: var(--text); font-size: 24px; font-weight: 500; fill: var(--ink-3); }
.sched svg .seg-l { font-family: var(--display); font-weight: 700; font-size: 30px; fill: var(--ink); }
.sched svg polygon { fill: var(--ink); }
.sched svg .ext { stroke: var(--ink-3); }
/* The four paragraphs are the legend of the drawing, three across under the ruler with small labels and no rules, the fourth as a note beneath. */
.stations { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
.stations li { border-top: 0; padding-top: 0; min-width: 0; }
.stations li:nth-child(4) { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 8px; }
.stations h3 { font-family: var(--text); font-weight: 600; font-size: 14px; color: var(--ink-3); line-height: 1.4; letter-spacing: 0; }
.stations p { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin-top: 8px; max-width: 58ch; }

/* ---------- F. Sectors ---------- */
#sectors .body { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.sectors { grid-column: 1 / span 5; list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.sectors li { border-bottom: 1px solid var(--rule); }
.sectors a { display: block; padding: 26px 0; }
.sectors h3 { transition: color 0.2s; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.14em; text-decoration-color: var(--ink-3); }
.sectors a:hover h3, .sectors a:focus-visible h3 { color: var(--red); text-decoration-color: currentColor; }
.sectors .sub { display: block; font-size: 14px; color: var(--ink-3); font-weight: 500; margin-top: 8px; }
.sectors p { color: var(--ink-2); font-size: 16px; line-height: 1.5; margin: 12px 0 0; max-width: 52ch; }
/* Without JavaScript nothing measures the leader, so the note sits in the flow under the window as it does on a phone. */
html:not(.js) .fig.chat .frame { grid-template-columns: 1fr; row-gap: 14px; }
html:not(.js) .chat .note { position: static; transform: none; justify-self: end; }
.view { grid-column: 6 / span 3; position: sticky; top: calc(var(--head) + var(--frame) + 32px); border: 1.5px solid var(--ink); }
.view .vt { font-size: 13px; font-weight: 500; padding: 8px 12px; border-bottom: 1.5px solid var(--ink); display: flex; justify-content: space-between; }
.view .vt span:last-child { color: var(--ink-3); }
.view .plates { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.view .plates img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.view .plates img.on { opacity: 1; }

/* ---------- G. The firm ---------- */
#firm .grid { row-gap: 40px; align-items: start; }
#firm .photo { grid-column: 1 / span 5; }
#firm .photo .frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule); }
#firm .photo img { width: 100%; height: 100%; object-fit: cover; }
#firm .text { grid-column: 7 / span 6; }
#firm .lead { margin-top: 28px; max-width: 46ch; }
#firm .body-p { margin-top: 20px; }
.facts { margin-top: 32px; border-top: 1.5px solid var(--ink); }
.facts tr { border-bottom: 1px solid var(--rule); }
.facts th, .facts td { padding: 10px 0; font-size: 15.5px; line-height: 1.45; vertical-align: baseline; }
.facts th { width: 160px; color: var(--ink-3); font-weight: 500; font-size: 13px; }

/* ---------- H. Questions, printed in full ---------- */
.qs { border-top: 1.5px solid var(--ink); }
.qs tr { border-bottom: 1px solid var(--rule); }
.qs th, .qs td { padding: 22px 0; vertical-align: baseline; }
.qs th { width: 64px; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink-3); }
.qs h3 { font-family: var(--text); font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: 0; }
.qs p { color: var(--ink-2); font-size: 16.5px; line-height: 1.5; max-width: 62ch; margin: 10px 0 0; }

/* ---------- J. Title block, blueprint ---------- */
#audit .grid { row-gap: 56px; align-items: start; }
#audit .say { grid-column: 1 / span 6; }
#audit .say h2 { font-size: clamp(44px, 7.2vw, 112px); font-weight: 800; line-height: 0.88; letter-spacing: -0.015em; }
#audit .say h2 .l { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
#audit .say h2 .l > span { display: block; }
#audit .say p { margin-top: 28px; max-width: 46ch; }
.tblock { grid-column: 7 / span 6; border: 1.5px solid var(--bline); }
.tblock dl { margin: 0; }
.tblock dt, .tblock dd { margin: 0; }
.tblock .r { display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1px solid var(--bline); }
.tblock .r + .r { grid-template-columns: 1.1fr 1.3fr 1.6fr; }
.tblock .r.io, .tblock .r.contact { grid-template-columns: 1fr 1fr; }
.tblock .r.one { grid-template-columns: 1fr; }
.tblock .c { padding: 10px 14px 12px; border-right: 1px solid var(--bline); min-width: 0; }
.tblock .c:last-child { border-right: 0; }
.tblock .k { display: block; font-size: 13px; font-weight: 500; color: var(--bmute); margin-bottom: 4px; }
.tblock .v { font-size: 16px; line-height: 1.35; }
.tblock form { padding: 14px 14px 18px; display: grid; gap: 16px; }
.tblock form .k { margin-bottom: 8px; }
.tblock .tier { border: 0; margin: 0; padding: 0; min-width: 0; }
.tblock .who { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.tblock .tier legend { padding: 0; }
.tblock .opts { display: grid; gap: 10px; }
.tblock .opts label { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.4; cursor: pointer; }
.tblock .opts input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--white); }
.tblock .opts b { display: block; font-weight: 600; }
.tblock .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tblock label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.tblock .opts label { font-size: 15px; margin: 0; }
.tblock input:not([type=radio]) { width: 100%; height: 48px; background: var(--paper); border: 1.5px solid var(--paper); color: var(--ink); padding: 0 12px; font: 16px var(--text); border-radius: 0; }
.tblock input::placeholder { color: var(--ink-3); opacity: 1; }
.tblock input:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.tblock input[aria-invalid="true"] { border: 2px solid var(--red-soft); }
.tblock .err { display: block; font-size: 13px; line-height: 1.4; color: var(--red-soft); margin-top: 6px; }
.tblock .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 4px; }
.tblock .acts .note { font-size: 14px; line-height: 1.45; color: var(--bmute); max-width: 36ch; }
.form-error { color: var(--red-soft); font-size: 14.5px; margin: 0; }
.form-error a { color: var(--white); }
.booking-line { font-size: 15px; margin-top: 22px; }

/* ---------- Footer, blueprint: the index tables at the foot of the sheet ---------- */
.foot { background: var(--blue); color: var(--white); padding: 0 0 calc(var(--frame) + 40px); }
.foot .wrap { border-top: 1px solid var(--bline); padding-top: 40px; }
.foot .tables { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; column-gap: 24px; row-gap: 32px; align-items: start; }
.foot .stack { display: grid; row-gap: 32px; }
.idx { border-top: 1.5px solid var(--white); }
.idx caption { caption-side: top; text-align: left; font-size: 13px; font-weight: 500; color: var(--bmute); padding: 0 0 10px; }
.idx tr { border-bottom: 1px solid var(--bline); }
.idx th, .idx td { padding: 9px 0; font-size: 15px; line-height: 1.4; vertical-align: baseline; }
.idx th { width: 40px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--bmute); }
.idx.kv th { width: 100px; font-family: var(--text); font-weight: 500; font-size: 13px; }
.idx.rev td:nth-child(2) { width: 130px; color: var(--bmute); font-size: 14px; }
.idx td a { display: block; padding: 10px 0; margin: -9px 0; }
.idx td a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--bline); font-size: 13px; color: var(--bmute); }
.foot .legal a { margin-left: 0; }
.foot .legal a + a { margin-left: 18px; }
.foot .legal a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Load choreography (only with JS and without reduced motion) ---------- */
html.js.anim:not(.loaded) .sheet rect { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js.anim:not(.loaded) .zones, html.js.anim:not(.loaded) .notes { opacity: 0; }
/* The hero copy is the largest paint on the page, so it is never hidden: it rises into place from first paint, in CSS, with no script in the way. */
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
html.anim .hero .intro { animation: rise 0.5s 0.3s cubic-bezier(.2,.7,.2,1) both; }
html.js.anim:not(.signalled) .sig svg line.dim { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js.anim:not(.signalled) .sig svg .ext, html.js.anim:not(.signalled) .sig svg polygon, html.js.anim:not(.signalled) .sig .n, html.js.anim:not(.signalled) .sig .lab, html.js.anim:not(.signalled) .heads, html.js.anim:not(.signalled) .signal .f { opacity: 0; }
html.loaded .sheet rect, html.signalled .sig svg line { stroke-dasharray: none; stroke-dashoffset: 0; }

/* ---------- Responsive ---------- */
@media (min-width: 1101px) and (max-height: 840px) {
  .hero { padding-top: calc(var(--frame) + var(--head) + 16px); padding-bottom: 28px; }
  .hero h1 { font-size: clamp(46px, 5.4vw, 76px); }
  .notes { margin-bottom: 18px; }
  .hero .intro { margin-top: 22px; padding-top: 16px; }
  .sig .n { font-size: 44px; }
  .sig { padding-bottom: 10px; }
  .heads li { padding: 4px 0; }
}
@media (max-width: 1280px) {
  .sig .n { font-size: 50px; }
}
@media (max-width: 1100px) {
  :root { --strip: 0px; --inset: 44px; }
  .zones { display: none; }
  .corner { left: calc(var(--frame) + 1.5px); border-left: 0; }
  .corner > div { flex: 1; min-width: 0; }
  .hero { align-items: start; }
  .hero h1 { grid-column: 1 / span 8; grid-row: 1; font-size: clamp(46px, 7.6vw, 88px); }
  .hero .intro { grid-column: 1 / span 8; grid-row: 2; }
  .notes { grid-column: 1 / span 8; grid-row: 3; margin: 36px 0 0; max-width: 52ch; }
  .signal { grid-column: 9 / span 4; grid-row: 1 / span 3; margin-top: 0; padding-top: 6px; }
  .sig { padding-bottom: 12px; }
  .sig .n { font-size: 40px; }
  .heads li { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .heads .h { font-size: 14px; }
  .view { display: none; }
  .sectors { grid-column: 1 / span 8; }
  .two > .head { grid-column: 1 / span 12; position: static; }
  .two > .body { grid-column: 1 / span 12; }
  .two { row-gap: 32px; }
  .two > .head p { max-width: 56ch; }
  .tblock { grid-column: 1 / span 12; }
  #audit .say { grid-column: 1 / span 12; }
  .foot .tables { grid-template-columns: 1fr 1fr; }
  section { padding: 80px 0 64px; }
  section + section:not(.blue) { padding-top: 48px; }
  section.blue { padding-bottom: 80px; }
  #notes .two { margin-top: 64px; }
}
@media (max-width: 900px) {
  :root { --frame: 12px; --inset: 20px; --head: 56px; }
  /* Belt and braces: on a phone no content may reach past the sheet. clip (not hidden) keeps sticky headings working. */
  body { font-size: 16px; overflow-x: clip; }
  .masthead .in { width: calc(100% - 2 * (var(--inset) - var(--frame) - 1.5px)); }
  .nav { display: none; }
  /* Menu control: a hamburger drawn in the sheet's own 1.5px line so it belongs on the blueprint, and it
     folds to a cross when the menu is open. The word "Menu" stays in the button as its accessible name. */
  .nav-toggle { display: block; position: relative; z-index: 59; width: 46px; height: 40px; min-height: 0; padding: 0; font-size: 0; color: inherit; background: transparent; border: 1.5px solid currentColor; cursor: pointer; }
  .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform 0.22s ease, top 0.22s ease, bottom 0.22s ease, box-shadow 0.15s; }
  .nav-toggle::before { top: 13px; box-shadow: 0 6px 0 currentColor; }
  .nav-toggle::after { bottom: 13px; }
  .nav-toggle[aria-expanded="true"]::before { top: 19px; transform: rotate(45deg); box-shadow: none; }
  .nav-toggle[aria-expanded="true"]::after { bottom: 19px; transform: rotate(-45deg); }
  /* On a phone the zone letters are gone, so the section name means nothing: the action takes the whole bar. */
  .corner > div { display: none; }
  .corner a.go { flex: 1; justify-content: center; font-size: 19px; padding: 0 12px; }
  .hero { padding-top: calc(var(--frame) + var(--head) + 40px); padding-bottom: calc(var(--frame) + var(--corner) + 28px); }
  /* On a phone the headline sets the whole feel: keep it bold but never let it fill the screen or touch the frame.
     The floor fits the longest line ("Your next customer") inside the sheet at 320px with margin to spare. */
  .hero h1 { grid-column: 1 / span 12; grid-row: auto; font-size: clamp(32px, 8.6vw, 56px); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; }
  .notes { grid-column: 1 / span 12; grid-row: auto; order: 3; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--bline); max-width: 52ch; }
  /* The phone hero, built the way the best product sites build theirs: the headline, one line under it, the action,
     then the thing itself (the exchange, Fig. 1, seated here by home.js), and only after that the full explanation.
     No rule under the headline: the space does that work. Flex order keeps the DOM in reading order. */
  .hero .intro { grid-column: 1 / span 12; grid-row: auto; margin-top: 22px; padding-top: 0; border-top: 0; display: flex; flex-direction: column; }
  .hero .intro .copy { display: contents; }
  .hero .intro .copy p { display: block; max-width: none; }
  .hero .intro .lede { order: 1; margin: 0; font-size: 17px; line-height: 1.45; color: var(--bmute); }
  .hero .intro .act { order: 2; margin-top: 24px; }
  .hero .intro .hero-visual { order: 3; margin-top: 30px; }
  .hero .intro .more { order: 4; margin: 30px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--bmute); }
  /* Fig. 1 on blue stock: the dark window carries itself; its note and caption take the hero's white and muted white. */
  .hero .fig.chat { margin: 0; }
  .hero .fig.chat .frame { padding: 0; row-gap: 12px; }
  .hero .chat .note { font-size: 26px; color: var(--white); }
  .hero .fig figcaption { color: var(--bmute); padding-top: 12px; }
  .hero .fig figcaption b { color: var(--white); }
  /* On load the exchange starts from a compact window: the question is typed in the composer, in view, and the window
     grows as the bubbles arrive, so the first screen never shows a dark empty box with the typing out of sight. Hero only. */
  .hero .chat.playing:not(.sent) .msg.user { display: none; }
  .hero .chat.playing:not(.thinking):not(.answered) .msg.bot { display: none; }
  /* Before it plays (motion allowed) the window waits compact, composer empty, note held back: a phone that opens with
     only the window's top in view sees a live chat waiting, not a finished answer that would then vanish and retype. */
  html.anim .hero .chat:not(.playing) .msg.user, html.anim .hero .chat:not(.playing) .msg.bot { display: none; }
  html.anim .hero .chat:not(.playing) .note { opacity: 0; }
  .signal { grid-column: 1 / span 12; grid-row: auto; order: 2; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--bline); }
  /* One action, one quieter one: the audit is the full button; the free check is a plain link with an arrow beneath it. */
  .hero .act { flex-direction: column; align-items: stretch; gap: 0; }
  .hero .act .btn.onblue { width: 100%; height: 54px; font-size: 20px; }
  .hero .act .btn.line.onblue { width: auto; align-self: flex-start; height: auto; border: 0; background: none; padding: 16px 0 0; font-family: var(--text); font-weight: 600; font-size: 16px; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .hero .act .btn.line.onblue::after { content: "\00a0\2192"; }
  .hero .act .btn.line.onblue:hover { background: none; color: var(--white); }
  .hero .act small { order: 3; margin-top: 14px; font-size: 13.5px; }
  .sig .n { font-size: 44px; }
  .heads .h { font-size: 15px; }
  .fig .frame { aspect-ratio: 16 / 10; }
  /* The exchange stacks: the window full width, the note in the flow beneath it, no leader. */
  .fig.chat .frame { grid-template-columns: 1fr; row-gap: 14px; padding: 4px 0 8px; }
  .chat .win { font-size: 16px; border-radius: 16px; }
  .chat .msgs { min-height: 0; padding: 20px 16px 4px; }
  .chat .msg.user .b { max-width: 88%; }
  .chat .composer { margin: 12px 16px 16px; }
  .chat .note { position: static; transform: none; justify-self: end; font-size: 28px; }
  .chat.led .leader { display: none; }
  .year .fig-n { font-size: 44px; }
  .year .cap span { white-space: normal; }
  .gnotes tr { display: grid; grid-template-columns: 40px 1fr; }
  .gnotes th { width: 40px; font-size: 20px; grid-row: 1 / span 2; }
  .gnotes td:nth-child(2) { width: auto; padding: 22px 0 2px; }
  .gnotes td:last-child { grid-column: 2; padding-top: 0; }
  .checks tbody th { width: 36px; font-size: 20px; }
  .checks thead th:last-child, .checks tbody td:last-child { width: 44px; }
  /* Each part becomes a small grid: number and name on the first line, the price under the name, then the description, then the links. */
  .parts thead { display: none; }
  .parts tr { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .parts tbody th, .parts td { padding: 0; border: 0; width: auto !important; text-align: left !important; }
  .parts tbody th { grid-column: 1; grid-row: 1; padding: 4px 0 0; font-size: 20px; }
  .parts td { display: contents; }
  .parts td > * { grid-column: 2; }
  .parts td h3 { grid-row: 1; }
  .parts .price { grid-row: 2; padding-top: 0; margin-top: 10px; font-size: 26px; }
  .parts .terms { grid-row: 3; margin-top: 6px; }
  .parts td p { margin-top: 12px; }
  .parts .ref { margin-top: 2px; padding: 8px 0; }
  .parts .ref + .ref { margin-left: 0; }
  .parts-foot { display: grid; gap: 12px; }
  .parts-foot .sep { display: none; }
  .parts-foot a { width: fit-content; }
  .to-scale { display: none; }
  .sched svg { display: none; }
  .stations { grid-template-columns: 1fr; margin-top: 0; border-left: 1.5px solid var(--ink); padding-left: 20px; row-gap: 28px; }
  .stations li, .stations li:nth-child(4) { grid-column: auto; border-top: 0; padding-top: 0; margin-top: 0; }
  .stations li::before { content: ""; display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 0 0 12px -20px; }
  .stations h3 { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--ink); line-height: 0.95; letter-spacing: -0.01em; }
  .stations p { margin-top: 10px; }
  .sectors h3 { font-size: 28px; }
  #firm .photo { grid-column: 1 / span 12; }
  #firm .text { grid-column: 1 / span 12; }
  .facts th { width: 110px; }
  .qs th { width: 40px; font-size: 20px; }
  .qs h3 { font-size: 17px; }
  #audit .say h2 { font-size: clamp(44px, 12vw, 64px); }
  .tblock .r { grid-template-columns: 1fr auto auto; }
  .tblock .r + .r { grid-template-columns: 1fr 1fr; }
  .tblock .r + .r .c:nth-child(2) { border-right: 0; }
  .tblock .r + .r .c:last-child { grid-column: 1 / -1; border-top: 1px solid var(--bline); }
  .tblock .r.io, .tblock .r.contact { grid-template-columns: 1fr; }
  .tblock .r.io .c, .tblock .r.contact .c { border-right: 0; }
  .tblock .r.io .c:last-child { border-top: 1px solid var(--bline); }
  .tblock .c { padding: 10px 12px 11px; }
  .tblock .v { font-size: 15px; }
  .tblock .pair { grid-template-columns: 1fr; }
  .tblock .acts { flex-direction: column; align-items: stretch; }
  .tblock .acts .btn { width: 100%; }
  .tblock .acts .note { max-width: none; }
  .foot .tables { grid-template-columns: 1fr; }
  .foot .legal a { display: inline-block; padding: 12px 0; }
  section { padding: 64px 0 52px; }
  section + section:not(.blue) { padding-top: 40px; }
  section.blue { padding-bottom: 64px; }
  body.home section:not(.blue):not(.hero)::before { margin-bottom: 28px; }
  #notes .two { margin-top: 48px; }
  body.home .foot { padding-bottom: calc(var(--frame) + var(--corner) + 40px); }
}
/* ---------- The phone hero in the language of the best product sites (Linear, Vercel, Framer): a near-black field,
   the headline set in the reading face at a calm weight with room around it, one grey line, a pill and a quiet link,
   then the exchange. Home page, phones only; on wide screens the Check Print stands as it is. ---------- */
@media (max-width: 900px) {
  body.home { --frame: 0px; --head: 60px; --bline: rgba(255,255,255,0.1); --bmute: rgba(255,255,255,0.62); }
  body.home .sheet { display: none; }
  html.tone-blue body.home .masthead, body.home.menu-open .masthead { background: #0b0b0d; border-color: rgba(255,255,255,0.1); }
  body.home .mobile-nav.open { background: #0b0b0d; }
  body.home .wordmark { height: 17px; width: 104.7px; }
  body.home .nav-toggle { border: 0; width: 40px; }
  body.home .hero.blue { background: #0b0b0d; }
  body.home .hero { padding-top: calc(var(--head) + 64px); }
  body.home .hero h1 { font-family: var(--text); font-weight: 560; font-size: clamp(31px, 8.3vw, 38px); line-height: 1.1; letter-spacing: -0.028em; }
  body.home .hero .intro { margin-top: 22px; }
  body.home .hero .intro .lede { font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--bmute); }
  body.home .hero .intro .act { margin-top: 30px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  body.home .hero .act .btn.onblue { width: auto; height: 48px; padding: 0 22px; border-radius: 999px; font-family: var(--text); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
  body.home .hero .act .btn.onblue:hover { background: #e4e4e4; color: #000; border-color: #e4e4e4; }
  body.home .hero .act .btn.line.onblue { padding: 0; font-weight: 500; font-size: 16px; color: var(--bmute); text-decoration: none; }
  body.home .hero .act .btn.line.onblue:hover { color: var(--white); }
  body.home .hero .act small { display: none; }
  body.home .hero .intro .hero-visual { margin-top: 52px; }
  body.home .hero .chat .win { border-color: rgba(255,255,255,0.12); box-shadow: none; }
  body.home .hero .chat .note { font-family: var(--text); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
  body.home .hero .fig figcaption { font-size: 13px; }
  body.home .hero .intro .more { margin-top: 36px; font-size: 16px; line-height: 1.55; }
  body.home .hero .signal { margin-top: 56px; }
}
@media (max-width: 560px) {
  .heads li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}

@media print {
  .sheet, .zones, .corner, .masthead, .mobile-nav { display: none !important; }
  body { background: #fff; }
  section.blue, .foot { background: #fff !important; color: #000 !important; }
  section { padding: 24pt 0; page-break-inside: avoid; }
  .hero { min-height: 0; }
  .two > .head { position: static; }
  html.js .hero h1 .l > span, html.js #audit .say h2 .l > span { transform: none !important; }
  html.js .hero .intro, html.js .notes, html.js .sig *, html.js .year *, html.js .sched * { opacity: 1 !important; stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  @page { margin: 12mm; }
}