/* site.css - the public website: every page shares this one file (home, product, templates, pricing, commissioning,
   about, contact, resources and their articles, privacy, terms). Rules it keeps:
   - every color is a token on :root, with both dark blocks (the system setting and the toggle's data-theme);
   - the PDF paper stays light in both themes, as a printed page does; the phone follows the theme, as the app does;
   - nothing is wider than the screen from 320 to 1440, with 16 px side gutters on phones;
   - anything the hero demo changes has a fixed size (cells, chips, labels), so nothing moves while it plays;
   - motion only through transitions the reduced-motion block turns off. */
@font-face { font-family: "Inter Var"; src: url("/site/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Headings, labels and the wordmark: Barlow Semi Condensed, the highway-sign face (OFL, latin, two weights). */
@font-face { font-family: "Barlow SC"; src: url("/site/fonts/barlow-semi-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("/site/fonts/barlow-semi-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* The StartupSend look (public/brand/brand.md): navy, blueprint blue for what you can press, signal orange used
   sparingly (the logo's "Send", the one primary button, a highlight), steel greys, and status colors that pass AA. */
:root {
  --font: "Inter Var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Barlow SC", "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* scales: space, radius */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  /* page */
  --bg: #ffffff; --bg-alt: #f3f5f8; --surface: #ffffff; --surface-2: #f6f8fa; --art-bg: #f1f4f7;
  --ink: #0f1a27; --ink-2: #2a3747; --mute: #536173; --faint: #8a95a5; --line: #dde2e9; --line-2: #ebeef2;
  --brand: #0e2238; --brand-strong: #1b4a7a; --brand-soft: rgba(31,95,168,.07); --brand-line: rgba(31,95,168,.3); --link: #1f5fa8;
  --accent: #f26b1f; --accent-hover: #ff7a2e; --accent-ink: #1a0c02; --accent-soft: rgba(242,107,31,.13);
  --logo-l: block; --logo-d: none;
  --good: #17733f; --good-soft: rgba(23,115,63,.1); --good-fill: #17733f; --good-fill-ink: #ffffff;
  --warn: #8a5a0b; --warn-soft: rgba(229,161,23,.15); --bad: #b42318; --bad-soft: rgba(180,35,24,.09); --info: #2557c7; --info-soft: rgba(37,87,199,.09);
  --open: #536173; --open-soft: #eef1f5;
  --hl: rgba(242,107,31,.2);
  --shadow-sm: 0 1px 2px rgba(15,26,39,.06);
  --shadow: 0 1px 2px rgba(15,26,39,.05), 0 8px 24px rgba(15,26,39,.07);
  --shadow-lg: 0 2px 6px rgba(15,26,39,.06), 0 30px 70px -20px rgba(15,26,39,.28);
  --nav-bg: #ffffff;
  --grid-line: rgba(31,95,168,.06); --glow-1: rgba(31,95,168,.12); --glow-2: rgba(242,107,31,.08); --mask: #000;
  --sun-d: none; --moon-d: block;
  --scrim: rgba(10,16,24,.42);
  --paper-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 30px -8px rgba(0,0,0,.25); --paper-shadow-lg: 0 1px 2px rgba(0,0,0,.1), 0 18px 40px -12px rgba(0,0,0,.3);
  --btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(120,45,0,.3);
  --white-a: rgba(255,255,255,.4);
  /* the closing band on every page */
  --band-bg: #0e2238; --band-ink: #f2f6fb; --band-mute: #a8b6c8; --band-line: rgba(255,255,255,.12); --band-glow: rgba(242,107,31,.16);
  --band-hi: #9cc2f0; --band-icon: #ffb07a; --band-card: rgba(255,255,255,.05);
  /* phone (the app's own look) */
  --bezel: #0b0d12; --bezel-edge: #2b2f39; --bezel-hi: #3a3f4b;
  --app-bg: #f3f5f8; --app-panel: #ffffff; --app-sunk: #edf0f4; --app-input: #ffffff; --app-fg: #0f1a27; --app-mute: #536173; --app-faint: #a3abb7;
  --app-line: #dde2e9; --app-line2: #ebeef2; --app-glass: #ffffff; --app-accent: #1f4e79; --app-ring: rgba(31,78,121,.28);
  --app-yes: #17733f; --app-yes-ink: #ffffff; --app-no: #b42318; --app-no-ink: #ffffff; --app-na: #6b7583; --app-na-ink: #ffffff; --app-warn: #b7791f;
  --app-warn-soft: rgba(229,161,23,.15); --app-good-soft: rgba(23,115,63,.1); --app-warn-ink: #8a5a0b;
  --touch: rgba(31,78,121,.18); --touch-edge: rgba(31,78,121,.55);
  /* the PDF page */
  --viewer-bg: #e6eaf0; --viewer-bar: #f8fafc; --viewer-ink: #2a3747;
  --paper: #ffffff; --paper-ink: #1b2430; --paper-mute: #5f6b7a; --paper-faint: #b3bcc8; --paper-line: #e3e7ed; --paper-soft: #f4f6f9; --paper-zebra: #f7f9fb;
  --paper-good: #17733f; --paper-bad: #b42318; --paper-na: #6b7280; --paper-on: #ffffff; --paper-hl: rgba(242,107,31,.32);
  --pdf-brand: #1f4e79; --paper-tint: rgba(31,78,121,.07);
  /* the hand-filled paper sheet */
  --sheet-bg: #fbfaf5; --sheet-line: #d9dde3; --sheet-ink: #2a2f36; --pen: #2546a0; --red-pen: #c4261d; --coffee: rgba(140,90,30,.16);
  /* company colors for the PDF color picker */
  --sw-navy: #1f4e79; --sw-red: #a8261c; --sw-green: #1d6b43; --sw-slate: #353b45; --sw-orange: #b9480f;
  --dv-dark: #16171b; --dv-dark-line: #2a2c33; --dv-dark-brand: #7fb0e6; --dv-dark-yes: #3fcf84;
  /* the nameplate */
  --plate-1: #f1f3f6; --plate-2: #dce2e9; --plate-edge: #b9c1cc; --plate-hi: rgba(255,255,255,.9); --plate-ink: #26303d; --plate-mute: #4f5a68; --rivet: #9aa4b1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
  --bg: #0a1018; --bg-alt: #0d1520; --surface: #101823; --surface-2: #152030; --art-bg: #0c141f;
  --ink: #e9eef4; --ink-2: #c4ceda; --mute: #98a5b6; --faint: #67758a; --line: #223043; --line-2: #1a2535;
  --brand: #8db6e8; --brand-strong: #9cc2f0; --brand-soft: rgba(141,182,232,.1); --brand-line: rgba(141,182,232,.36); --link: #8db6e8;
  --accent: #ff8040; --accent-hover: #ff9457; --accent-ink: #1a0c02; --accent-soft: rgba(255,128,64,.16);
  --logo-l: none; --logo-d: block;
  --good: #48cf8b; --good-soft: rgba(72,207,139,.13); --good-fill: #48cf8b; --good-fill-ink: #04140b;
  --warn: #f2b84b; --warn-soft: rgba(242,184,75,.13); --bad: #ff7b6e; --bad-soft: rgba(255,123,110,.12); --info: #8aa8ff; --info-soft: rgba(138,168,255,.14);
  --open: #a3afc0; --open-soft: #172233;
  --hl: rgba(255,128,64,.2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 40px 80px -20px rgba(0,0,0,.7);
  --nav-bg: #0a1018;
  --grid-line: rgba(141,182,232,.05); --glow-1: rgba(31,95,168,.28); --glow-2: rgba(255,128,64,.05);
  --sun-d: block; --moon-d: none;
  --scrim: rgba(0,0,0,.6);
  --paper-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -8px rgba(0,0,0,.6); --paper-shadow-lg: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -12px rgba(0,0,0,.65);
  --btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.45);
  --white-a: rgba(255,255,255,.12);
  --band-bg: #0e1c2e; --band-ink: #eef3f9; --band-mute: #a8b6c8; --band-line: rgba(141,182,232,.18); --band-glow: rgba(255,128,64,.12);
  --bezel: #05070b; --bezel-edge: #2a2f3a; --bezel-hi: #3b414e;
  --app-bg: #0a1018; --app-panel: #121b27; --app-sunk: #18222f; --app-input: #18222f; --app-fg: #eef2f7; --app-mute: #a3afbf; --app-faint: #5e6b7d;
  --app-line: #263244; --app-line2: #1d2836; --app-glass: #121b27; --app-accent: #8db6e8; --app-ring: rgba(141,182,232,.3);
  --app-yes: #48cf8b; --app-yes-ink: #04140b; --app-no: #ff7b6e; --app-no-ink: #1d0605; --app-na: #8a95a5; --app-na-ink: #0a1018; --app-warn: #f2b84b;
  --app-warn-soft: rgba(242,184,75,.13); --app-good-soft: rgba(72,207,139,.12); --app-warn-ink: #f2b84b;
  --touch: rgba(141,182,232,.2); --touch-edge: rgba(141,182,232,.6);
  --viewer-bg: #0b131e; --viewer-bar: #101a27; --viewer-ink: #c4ceda;
  --paper: #f3f5f8; --paper-soft: #e8ecf1; --paper-zebra: #edf0f4; --paper-line: #d9dee5;
  --sheet-bg: #ecebe4; --sheet-line: #cdd1d7; --coffee: rgba(120,75,25,.2);
  --plate-1: #1c2533; --plate-2: #121a26; --plate-edge: #2f3b4d; --plate-hi: rgba(255,255,255,.08); --plate-ink: #e1e7ef; --plate-mute: #a3afc0; --rivet: #475468;
  color-scheme: dark;
} }
:root[data-theme=dark] {
  --bg: #0a1018; --bg-alt: #0d1520; --surface: #101823; --surface-2: #152030; --art-bg: #0c141f;
  --ink: #e9eef4; --ink-2: #c4ceda; --mute: #98a5b6; --faint: #67758a; --line: #223043; --line-2: #1a2535;
  --brand: #8db6e8; --brand-strong: #9cc2f0; --brand-soft: rgba(141,182,232,.1); --brand-line: rgba(141,182,232,.36); --link: #8db6e8;
  --accent: #ff8040; --accent-hover: #ff9457; --accent-ink: #1a0c02; --accent-soft: rgba(255,128,64,.16);
  --logo-l: none; --logo-d: block;
  --good: #48cf8b; --good-soft: rgba(72,207,139,.13); --good-fill: #48cf8b; --good-fill-ink: #04140b;
  --warn: #f2b84b; --warn-soft: rgba(242,184,75,.13); --bad: #ff7b6e; --bad-soft: rgba(255,123,110,.12); --info: #8aa8ff; --info-soft: rgba(138,168,255,.14);
  --open: #a3afc0; --open-soft: #172233;
  --hl: rgba(255,128,64,.2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 40px 80px -20px rgba(0,0,0,.7);
  --nav-bg: #0a1018;
  --grid-line: rgba(141,182,232,.05); --glow-1: rgba(31,95,168,.28); --glow-2: rgba(255,128,64,.05);
  --sun-d: block; --moon-d: none;
  --scrim: rgba(0,0,0,.6);
  --paper-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -8px rgba(0,0,0,.6); --paper-shadow-lg: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -12px rgba(0,0,0,.65);
  --btn-primary-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.45);
  --white-a: rgba(255,255,255,.12);
  --band-bg: #0e1c2e; --band-ink: #eef3f9; --band-mute: #a8b6c8; --band-line: rgba(141,182,232,.18); --band-glow: rgba(255,128,64,.12);
  --bezel: #05070b; --bezel-edge: #2a2f3a; --bezel-hi: #3b414e;
  --app-bg: #0a1018; --app-panel: #121b27; --app-sunk: #18222f; --app-input: #18222f; --app-fg: #eef2f7; --app-mute: #a3afbf; --app-faint: #5e6b7d;
  --app-line: #263244; --app-line2: #1d2836; --app-glass: #121b27; --app-accent: #8db6e8; --app-ring: rgba(141,182,232,.3);
  --app-yes: #48cf8b; --app-yes-ink: #04140b; --app-no: #ff7b6e; --app-no-ink: #1d0605; --app-na: #8a95a5; --app-na-ink: #0a1018; --app-warn: #f2b84b;
  --app-warn-soft: rgba(242,184,75,.13); --app-good-soft: rgba(72,207,139,.12); --app-warn-ink: #f2b84b;
  --touch: rgba(141,182,232,.2); --touch-edge: rgba(141,182,232,.6);
  --viewer-bg: #0b131e; --viewer-bar: #101a27; --viewer-ink: #c4ceda;
  --paper: #f3f5f8; --paper-soft: #e8ecf1; --paper-zebra: #edf0f4; --paper-line: #d9dee5;
  --sheet-bg: #ecebe4; --sheet-line: #cdd1d7; --coffee: rgba(120,75,25,.2);
  --plate-1: #1c2533; --plate-2: #121a26; --plate-edge: #2f3b4d; --plate-hi: rgba(255,255,255,.08); --plate-ink: #e1e7ef; --plate-mute: #a3afc0; --rivet: #475468;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--surface); color: var(--ink); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); font-weight: 600; }
.skip:focus { left: 8px; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.wrap-wide { width: min(1280px, 100% - 48px); margin-inline: auto; }
.wrap-text { width: min(720px, 100% - 48px); margin-inline: auto; }
.grow { flex: 1; }
.mute { color: var(--mute); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.flip-x { transform: scaleX(-1); }

h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; margin: 0; font-family: var(--font-head); font-weight: 700; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.008em; }
h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.006em; }
h3 { font-size: 21px; line-height: 1.22; letter-spacing: 0; }
p { text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--mute); margin: 0; max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-strong); margin: 0 0 var(--s4); }
.eyebrow::before { content: ""; width: 20px; height: 3px; border-radius: 1px; background: var(--accent); }
.hl { color: var(--brand-strong); }

/* ---------- buttons, chips, links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 17px/1 var(--font-head); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s; }
.btn:hover { box-shadow: var(--shadow); border-color: var(--brand-line); }
.btn .i { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: var(--btn-primary-shadow); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg-alt); transform: none; }
.btn.lg { height: 54px; padding: 0 26px; font-size: 19px; }
.btn.sm { height: 38px; padding: 0 14px; font-size: 15.5px; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .15s, border-color .15s; }
.icon-btn:hover { border-color: var(--brand-line); }
.icon-btn .i-sun { display: var(--sun-d); }
.icon-btn .i-moon { display: var(--moon-d); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 17.5px/1.2 var(--font-head); letter-spacing: .01em; color: var(--link); text-decoration: none; }
.more .i { width: 16px; height: 16px; transition: transform .15s; }
.more:hover .i { transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font: 600 11.5px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s, color .3s; }
.st-open { background: var(--open-soft); color: var(--open); }
.st-progress { background: var(--info-soft); color: var(--info); }
.st-review { background: var(--warn-soft); color: var(--warn); }
.st-returned { background: var(--bad-soft); color: var(--bad); }
.st-approved, .st-complete { background: var(--good-soft); color: var(--good); }
.st-sent { background: var(--brand-soft); color: var(--brand-strong); }
.st-visit2 { background: var(--info-soft); color: var(--info); }
.fake-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.fake-btn .i { width: 14px; height: 14px; stroke-width: 2.4; }
.fake-btn.good { background: var(--good-fill); border-color: transparent; color: var(--good-fill-ink); }
.fake-btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.fake-btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.ticks li, .plan ul li, .incl li { position: relative; padding-left: 27px; }
.ticks li::before, .plan ul li::before, .incl li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 11px; height: 6px; border-left: 2.2px solid var(--good); border-bottom: 2.2px solid var(--good); transform: rotate(-45deg); }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: var(--s2); height: 58px; width: min(1280px, 100% - 48px); margin-inline: auto; }
/* The logo: the phone with the power symbol and the report page flying off it, with the wordmark ("Startup" in ink, "Send" in
   orange), drawn as one SVG per theme; .ss-l shows on light grounds and .ss-d on dark. */
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; font: 700 23px/1 var(--font-head); letter-spacing: -.005em; flex: none; }
/* the mark is the brand files themselves: the light one on light grounds, the dark one on dark (public/brand/) */
.ss-mark { display: inline-grid; width: 32px; height: 32px; flex: none; }
.ss-mark img { grid-area: 1 / 1; width: 100%; height: 100%; }
.ss-logo { display: inline-grid; flex: none; }
.ss-logo img { grid-area: 1 / 1; height: 54px; width: auto; }
@media (max-width: 420px) { .ss-logo img { height: 44px; } }
.ss-l { display: var(--logo-l, block); }
.ss-d { display: var(--logo-d, none); }
.links { display: flex; align-items: center; gap: 2px; margin-left: 28px; }
.links a { position: relative; color: var(--ink-2); text-decoration: none; font: 600 17px/1 var(--font-head); letter-spacing: .01em; padding: 10px 12px; border-radius: var(--r-sm); transition: color .15s, background-color .15s; }
.links a:hover { color: var(--ink); background: var(--bg-alt); }
.links a[aria-current=page] { color: var(--ink); }
.links a[aria-current=page]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 3px; border-radius: 2px 2px 0 0; background: var(--accent); }
.links .only-menu { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 15px 12px; flex-direction: column; justify-content: space-between; }
.menu-btn span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
.menu-btn[aria-expanded=true] span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded=true] span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* ---------- page heads (inner pages) ---------- */
.phero { position: relative; isolation: isolate; padding: 92px 0 76px; overflow: clip; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(760px 420px at 82% 0%, var(--glow-1), transparent 70%), radial-gradient(560px 320px at 6% 0%, var(--glow-2), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px; background-position: 0 0, 0 0, center -1px, center -1px;
  -webkit-mask-image: linear-gradient(180deg, var(--mask) 40%, transparent); mask-image: linear-gradient(180deg, var(--mask) 40%, transparent); }
.phero h1 { margin: 0 0 22px; max-width: 880px; }
.phero .lead { font-size: clamp(18px, 1.45vw, 20px); max-width: 680px; }
.phero .cta-row { margin-top: 32px; }
.phero.center { text-align: center; }
.phero.center h1, .phero.center .lead { margin-inline: auto; }
.phero.center .cta-row { justify-content: center; }
.phero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--mute); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--faint); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ---------- sections ---------- */
.sec { padding: 112px 0; }
.sec.tight { padding: 80px 0; }
.sec.alt { background: var(--bg-alt); border-block: 1px solid var(--line-2); }
.sec-head { max-width: 740px; margin-bottom: 56px; }
.sec-head h2 { margin-bottom: 0; }
h2 + .lead { margin-top: 16px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.sec-head.split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: end; }
.sec-head.split h2 { margin-bottom: 0; }
.sec-foot { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.art { position: relative; background-color: var(--art-bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; }

/* ---------- home: hero ---------- */
.hero { position: relative; isolation: isolate; padding: var(--s4) 0 0; }
.hero-bg { position: absolute; inset: 0 0 auto; height: 980px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(720px 560px at 74% 42%, var(--glow-1), transparent 70%), radial-gradient(620px 380px at 6% 6%, var(--glow-2), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px; background-position: 0 0, 0 0, center -1px, center -1px;
  -webkit-mask-image: linear-gradient(180deg, var(--mask) 60%, transparent); mask-image: linear-gradient(180deg, var(--mask) 60%, transparent); }
/* The first screen holds the headline and the working demo together at every width: two columns from 960 px (the
   PDF tucks further behind the phone as the screen narrows), one column below with a short headline over the phone. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; width: min(1280px, 100% - 48px); }
.hero-copy { padding: var(--s2) 0 var(--s6); max-width: 560px; }
.hero-copy .eyebrow { margin-bottom: var(--s4); }
.hero-copy h1 { font-size: clamp(40px, 3.5vw, 52px); margin: 0 0 var(--s4); }
.hero-copy h1 em { font-style: normal; color: var(--brand-strong); background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 96% / 100% .09em; padding-bottom: .04em; transition: background-size 1.1s cubic-bezier(.6,.1,.2,1) .35s; }
.js-fx .hero-copy h1 em { background-size: 0% .09em; }
.js-fx .hero-copy h1 em.drawn { background-size: 100% .09em; }
.hero-copy .lead { margin-bottom: var(--s5); font-size: 18px; }
.hero-copy .cta-row { align-items: center; gap: var(--s3) var(--s5); }
.assure { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s5) 0 0; padding: 0; color: var(--mute); font-size: 14.5px; }
.assure li { display: inline-flex; align-items: center; gap: 7px; }
.assure .i { width: 16px; height: 16px; color: var(--good); stroke-width: 2.6; }
/* "New": one quiet pill above the headline, for the newest thing the product does */
.pill-new { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 4px 14px 4px 4px; margin: 0 0 var(--s5); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14.5px; font-weight: 550; line-height: 1.2; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.pill-new b { flex: none; display: inline-grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 12.5px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.pill-new .i { width: 15px; height: 15px; color: var(--mute); transition: transform .15s; }
.pill-new:hover { border-color: var(--brand-line); box-shadow: var(--shadow); }
.pill-new:hover .i { transform: translateX(3px); }
/* The demo's own bar: what is happening now, the three units, Start over and Pause. Under the PDF beside the phone on
   wide screens, under the phone on narrow ones. Every piece has a fixed size, so a new caption moves nothing. */
.demo-bar { grid-column: 3; grid-row: 2; display: grid; gap: 12px; margin-top: 16px; min-width: 0; }
.demo-cap { display: flex; align-items: flex-start; gap: 10px; height: 2.8em; margin: 0; overflow: hidden; font-size: 14.5px; line-height: 1.4; color: var(--mute); }
.cap-n { flex: none; display: inline-grid; place-items: center; min-width: 4.4em; height: 22px; margin-top: -1px; padding: 0 7px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-strong); font: 700 12.5px/1 var(--font-head); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cap-n:empty { min-width: 0; width: 8px; height: 8px; margin: 6px 4px 0; padding: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cap-t { min-width: 0; transition: opacity .18s ease; }
.cap-t.swap { opacity: 0; }
.cap-t b { color: var(--ink); font-weight: 650; }
.demo-pick { display: flex; align-items: stretch; gap: 8px; }
.demo-ctl { display: flex; gap: 6px; flex: none; }
.demo-ctl .btn { width: 44px; height: auto; min-height: 44px; padding: 0; }
.demo-ctl .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.demo-ctl .btn .i { width: 18px; height: 18px; }
/* Pause keeps its place while hidden (still mode, or after a person takes over), so its arrival moves nothing. */
#d-pause[hidden] { display: inline-flex !important; visibility: hidden; }
.hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }

/* the stage: the phone, a small "fills" link, and the PDF it fills, side by side and never covering each other. The PDF
   is laid out at 580 px and scaled, so it reads the same at every size the stage takes. */
.stage { --s: .8; display: grid; grid-template-columns: 300px 36px calc(580px * var(--s)); grid-template-rows: auto 1fr; align-items: start; padding-bottom: var(--s8); }
.stage > .phone { grid-column: 1; grid-row: 1 / span 2; z-index: 2; }
.pdfwrap { grid-column: 3; grid-row: 1; width: calc(580px * var(--s)); height: calc(788px * var(--s)); margin-top: 0; }
.pdfwrap > .viewer { width: 580px; transform: scale(var(--s)); transform-origin: 0 0; }
/* the link between them: a dashed signal line with an orange arrow, level with the checks it carries */
.stage-link { grid-column: 2; grid-row: 1; position: relative; height: 2px; margin: 308px 6px 0; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
.stage-link::after { content: ""; position: absolute; right: -3px; top: 50%; width: 9px; height: 9px; border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent); transform: translateY(-50%) rotate(45deg); }

.phone { position: relative; width: 300px; border-radius: 50px; padding: 11px; background: var(--bezel); box-shadow: inset 0 0 0 1.5px var(--bezel-edge), inset 0 0 0 3px var(--bezel), inset 0 0 0 4px var(--bezel-hi), var(--shadow-lg); }
.screen { position: relative; height: 676px; border-radius: 40px; overflow: hidden; background: var(--app-bg); color: var(--app-fg); display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.screen::before { content: ""; position: absolute; z-index: 6; top: 10px; left: 50%; width: 90px; height: 26px; border-radius: 20px; background: var(--bezel); transform: translateX(-50%); }
.screen::after { content: ""; position: absolute; z-index: 6; bottom: 7px; left: 50%; width: 108px; height: 4px; border-radius: 4px; background: var(--app-fg); opacity: .3; transform: translateX(-50%); }
.sbar { flex: none; height: 42px; display: flex; justify-content: space-between; align-items: center; padding: 6px 26px 0 28px; font-weight: 650; font-size: 13px; }
.sbar-i { display: flex; gap: 3px; }
.sbar-i .i { width: 16px; height: 16px; stroke-width: 2.2; }
.abar { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px solid var(--app-line); }
.co-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--pdf-brand); color: var(--paper-on); font-size: 10px; font-weight: 800; letter-spacing: .02em; flex: none; }
.abar-name { flex: 1; min-width: 0; font: 700 13.5px/1.1 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abar-save { min-width: 4.6em; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--app-mute); transition: color .2s; }
.abar-save.busy { color: var(--app-warn); }
.uhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; }
.uhead-t { display: grid; min-width: 0; }
.uhead-t b { font: 700 24px/1.05 var(--font-head); }
.uhead-t span { font-size: 11.5px; color: var(--app-mute); }
.uprog { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; }
.uprog-bar { flex: 1; height: 5px; border-radius: 5px; background: var(--app-sunk); overflow: hidden; }
.uprog-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--app-yes); transition: width .35s cubic-bezier(.3,.7,.2,1); }
.uprog-n { font-size: 11px; font-weight: 600; color: var(--app-mute); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.uprog-note { flex: none; margin: -4px 16px 8px; font-size: 10.5px; line-height: 1.3; color: var(--app-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsec { flex: none; margin: 0 10px 8px; padding: 2px 11px 4px; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; }
.fsec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 6px; }
.fsec-h p { margin: 0; font: 700 14px/1.1 var(--font-head); white-space: nowrap; }
.fsec-cols { display: grid; grid-template-columns: repeat(3, 38px); gap: 3px; text-align: center; font-size: 10.5px; font-weight: 650; color: var(--app-mute); }
.fbtn-link { border: 0; background: none; color: var(--app-accent); font: 600 13px/1 var(--font-head); padding: 6px; margin: -6px; border-radius: 8px; cursor: pointer; }
.fbtn-link:hover { background: var(--app-sunk); }
.yn, .ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--app-line2); font-size: 12px; }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--app-sunk); border: 1px solid var(--app-line); gap: 1px; }
.seg button { border: 0; background: transparent; color: var(--app-mute); font: 600 13px/1 var(--font-head); height: 28px; min-width: 36px; padding: 0 6px; border-radius: 6px; cursor: pointer; transition: background-color .18s, color .18s; }
.seg button:hover { color: var(--app-fg); }
.seg button[aria-pressed=true][data-v=Yes] { background: var(--app-yes); color: var(--app-yes-ink); }
.seg button[aria-pressed=true][data-v=No] { background: var(--app-no); color: var(--app-no-ink); }
.seg button[aria-pressed=true][data-v="N/A"] { background: var(--app-na); color: var(--app-na-ink); }
.ph-cells { display: grid; grid-template-columns: repeat(3, 38px); gap: 3px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 8px; }
.ph-cells span { display: grid; place-items: center; height: 28px; border-radius: 6px; border: 1px solid var(--app-line); background: var(--app-input); font: 650 12px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--app-fg); transition: border-color .15s, box-shadow .15s; }
.ph-cells span:empty::after { content: ""; width: 8px; height: 1.5px; background: var(--app-faint); }
.ph-cells:hover span { border-color: var(--app-accent); }
.ph-cells span.typing { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-ring); }
.bbar { margin-top: auto; flex: none; padding: 10px 12px 22px; border-top: 1px solid var(--app-line); background: var(--app-glass); }
.fbtn-good, .fbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: 10px; border: 0; background: var(--app-yes); color: var(--app-yes-ink); font: 600 16px/1 var(--font-head); letter-spacing: .01em; cursor: pointer; transition: filter .15s, background-color .2s; }
.fbtn { background: var(--app-sunk); color: var(--app-fg); border: 1px solid var(--app-line); }
.fbtn-good:hover { filter: brightness(1.06); }
.fbtn-good .i { width: 17px; height: 17px; stroke-width: 2.6; }
.fbtn-good.is-done { background: var(--app-sunk); color: var(--app-yes); cursor: default; filter: none; }
.psheet { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; background: var(--scrim); animation: fade .2s ease; }
.psheet-card { width: 100%; padding: 20px 18px 28px; background: var(--app-panel); border-radius: 22px 22px 0 0; animation: rise .25s cubic-bezier(.3,.7,.2,1); }
.psheet-card p { margin: 0 0 16px; font-size: 13px; color: var(--app-mute); }
.psheet-card .psheet-h { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--app-fg); }
.psheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psheet-list { display: grid; gap: 8px; }
.fbtn.ghost { background: transparent; border-color: transparent; color: var(--app-mute); }
.psheet-k { color: var(--app-fg) !important; }
.psheet-opts { display: grid; gap: 6px; margin: 0 0 12px; }
.psheet-o { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-sunk); color: var(--app-mute); font: 600 14px/1 var(--font-head); }
.psheet-o::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.psheet-o.on { border-color: var(--app-accent); background: var(--app-panel); color: var(--app-fg); box-shadow: inset 0 0 0 1px var(--app-accent); }
.psheet-o.on::before { border: 4px solid var(--app-accent); }
.screen.locked .seg button:not([aria-pressed=true]), .screen.locked .ph-cells span, .screen.locked .fbtn-link { opacity: .5; }
.screen.locked .seg button, .screen.locked .ph-cells, .screen.locked .fbtn-link { cursor: default; }
.touch { position: absolute; z-index: 9; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--touch); border: 2px solid var(--touch-edge); opacity: 0; pointer-events: none; transition: translate .6s cubic-bezier(.35,.7,.2,1), opacity .3s; }
/* The dot's place is its translate; the tap animates scale, which then works about the dot's own centre. */
.touch.on { opacity: 1; }
.touch.tap { animation: tap .32s ease; }
[data-chip] { min-width: 8.6em; justify-content: center; }
/* Paused (or off screen): every animation in the demo holds still where it is */
#demo.frozen *, #demo.frozen *::before, #demo.frozen *::after { animation-play-state: paused !important; }

/* ---------- the demo loop: three units in fixed frames (demo.js, demo-units.js) ---------- */
.d-swap, .paper { transition: opacity .24s ease; }
.d-swap.swap, .paper.swap { opacity: 0; }
.d-swap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.uhead { min-height: 58px; }
.fbody { flex: 1; min-height: 0; overflow: hidden auto; scrollbar-width: none; padding-bottom: 10px; }
.fbody::-webkit-scrollbar { display: none; }
@media (pointer: coarse) { .fbody { overflow: hidden; } }
.fsec + .fsec { margin-top: 0; }
.fsec-h .fbtn-tag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--app-accent); color: var(--app-panel); font: 600 12.5px/1 var(--font-head); letter-spacing: .02em; cursor: pointer; }
.fbtn-tag .i { width: 14px; height: 14px; }
.fbtn-tag:disabled { background: var(--app-sunk); color: var(--app-mute); cursor: default; }
.tag-status { margin: 0 0 6px; min-height: 16px; font-size: 11.5px; font-weight: 600; color: var(--app-yes); }
.tag-status:empty { visibility: hidden; }
.tag-status.warn { color: var(--app-warn-ink); }
.np-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-bottom: 6px; }
.np-tile { position: relative; display: grid; gap: 1px; min-height: 38px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--app-line); background: var(--app-input); transition: border-color .25s, background-color .25s; }
.np-tile.wide { grid-column: 1 / -1; }
.np-tile span { font: 600 9.5px/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--app-mute); }
.np-tile b { min-height: 16px; font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-tile b:empty::after { content: ""; display: inline-block; width: 10px; height: 1.5px; vertical-align: middle; background: var(--app-faint); }
.np-tile.from b { color: var(--app-mute); font-weight: 600; }
.np-tile.check { border-color: var(--app-warn); background: var(--app-warn-soft); }
.np-tile.ok { border-color: var(--app-yes); }
.np-check { position: absolute; right: 4px; top: 4px; height: 20px; padding: 0 7px; border: 0; border-radius: 6px; background: var(--app-warn); color: #1a0c02; font: 700 10.5px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.d-offer { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 8px 9px; border-radius: 9px; background: var(--app-good-soft); font-size: 11.5px; line-height: 1.3; }
.d-offer p { margin: 0; flex: 1; }
.fbtn-sm { flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: var(--app-yes); color: var(--app-yes-ink); font: 600 12.5px/1 var(--font-head); cursor: pointer; }
.fbtn-sm:disabled { background: var(--app-sunk); color: var(--app-mute); cursor: default; }
.rd-cols, .rd-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; gap: 3px 4px; align-items: center; grid-auto-flow: row dense; }
.rd-cols { padding: 0 0 4px; font: 600 10.5px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--app-mute); text-align: center; }
.rd-cols.three, .rd-row.ph3 { grid-template-columns: minmax(0, 1fr) 132px; }
.rd-cols.three { grid-template-columns: minmax(0, 1fr) 42px 42px 42px; }
.rd-row { min-height: 38px; padding: 4px 0; border-top: 1px solid var(--app-line2); }
.rd-l { display: grid; font-size: 12px; line-height: 1.2; min-width: 0; }
.rd-l small { font-size: 10.5px; color: var(--app-mute); font-weight: 500; }
/* a worked-out line gets the row's full width under the label and its cells */
.rd-l:has(.rd-why) { display: contents; }
.rd-why { grid-column: 1 / -1; color: var(--app-yes) !important; font-weight: 600 !important; font-size: 10.5px; line-height: 1.2; }
.rd-why:empty { display: none; }
.from-wx { display: inline-flex; align-items: center; gap: 3px; color: var(--app-accent) !important; font-weight: 600 !important; }
.from-wx .i { width: 12px; height: 12px; }
.cell, .cells3 span { display: grid; place-items: center; height: 30px; min-width: 0; padding: 0 4px; border-radius: 7px; border: 1px solid var(--app-line); background: var(--app-input); color: var(--app-fg); font: 650 12.5px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; transition: border-color .15s, box-shadow .15s, background-color .2s; }
button.cell, .cells3 { cursor: pointer; }
.cell:empty::after, .cells3 span:empty::after { content: ""; width: 9px; height: 1.5px; background: var(--app-faint); }
.cell.c2 { background: var(--app-sunk); color: var(--app-mute); font-weight: 600; font-size: 11px; }
.cell.c2.na { color: var(--app-mute); }
.cell.fixed.has { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); }
.cell.use { border-style: dashed; color: var(--app-mute); font-size: 0; }
.cell.use:not(:disabled) { border: 1.5px solid var(--app-yes); background: var(--app-good-soft); color: var(--app-yes); font: 700 12px/1 var(--font-head); }
.cell.use.has { border-style: solid; border-color: var(--app-line); background: var(--app-input); color: var(--app-fg); font: 650 12.5px/1 var(--font); }
.cell.typing, .cells3 span.typing { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-ring); }
.cells3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 0; border: 0; background: none; }
.d-note { display: flex; gap: 8px; margin: 6px 0 4px; padding: 8px 10px; border-radius: 9px; border-left: 3px solid var(--app-warn); background: var(--app-warn-soft); font-size: 11.5px; line-height: 1.35; }
.d-note.ok { border-color: var(--app-yes); background: var(--app-good-soft); }
.d-note .i { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--app-warn); }
.d-note.ok .i { color: var(--app-yes); }
.d-note p { margin: 0; display: grid; gap: 1px; }
.d-note b { font-size: 12px; }
.d-note span { color: var(--app-mute); }
.d-back, .d-issue { margin: 0 10px 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--app-warn); background: var(--app-warn-soft); font-size: 11.5px; line-height: 1.35; }
.d-back { display: flex; gap: 8px; }
.d-back .i { width: 16px; height: 16px; flex: none; color: var(--app-warn-ink); }
.d-back p, .d-issue p { margin: 0; display: grid; gap: 1px; }
.d-back b, .d-issue b { font-size: 12.5px; }
.d-back span, .d-issue p span { color: var(--app-mute); }
.d-issue { margin: 8px 0 6px; }
.d-back .fbtn-sm { align-self: center; margin-left: auto; }
.d-back.v2 { border-color: var(--app-accent); background: var(--app-panel); }
.d-back.v2 .i { color: var(--app-accent); }
.d-issue-h { display: flex !important; align-items: center; gap: 5px; margin-bottom: 4px !important; font: 700 10.5px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--app-warn-ink); }
.d-issue-h .i { width: 13px; height: 13px; }
.d-issue-f { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.d-ph { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--app-mute); }
.d-ph .i { width: 13px; height: 13px; }
.d-issue.saved { border-color: var(--app-line); background: var(--app-panel); }
.yn-list .yn:first-child { border-top: 0; }
.fbtn-link.na2 { display: block; width: 100%; margin: 0 0 4px; padding: 6px 0; text-align: right; }
.fbtn-link:disabled { color: var(--app-mute); cursor: default; }
.screen.locked .cell, .screen.locked .cells3, .screen.locked .fbtn-tag, .screen.locked .fbtn-sm { cursor: default; }
/* Sun mode on the phone, as the app does it (html[data-contrast=sun]): black on white, heavier lines, bigger boxes */
.abar-sun { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-fg); cursor: pointer; }
.abar-sun .i { width: 16px; height: 16px; }
.abar-sun[aria-pressed=true] { background: #000; border-color: #000; color: #ffd23f; }
.screen.sun { --app-bg: #fff; --app-panel: #fff; --app-sunk: #f1f1f1; --app-input: #fff; --app-fg: #000; --app-mute: #1d1d1d; --app-faint: #333; --app-line: #000; --app-line2: #6b6b6b;
  --app-accent: #003a8c; --app-ring: rgba(0,58,140,.35); --app-yes: #0b6b31; --app-yes-ink: #fff; --app-good-soft: #e3f3e8; --app-warn: #8a5a0b; --app-warn-soft: #fff2d1; --app-warn-ink: #5c3d06; --app-glass: #fff; }
.screen.sun .fsec { border-width: 2px; }
.screen.sun .cell, .screen.sun .cells3 span { height: 34px; border-width: 2px; font-size: 14.5px; font-weight: 700; }
.screen.sun .rd-l { font-size: 13px; font-weight: 650; }
.screen.sun .np-tile { border-width: 2px; }
.screen.sun .np-tile b { font-size: 14px; font-weight: 750; }
.screen.sun .np-tile span, .screen.sun .rd-cols { color: #000; }
.sun-cap { position: absolute; z-index: 8; pointer-events: none; left: 50%; top: 96px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; translate: -50% 0; border-radius: 999px; background: #000; color: #fff; font: 600 12.5px/1 var(--font-head); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.sun-cap .i { width: 15px; height: 15px; color: #ffd23f; }
.sun-cap.open { animation: rise .3s cubic-bezier(.3,.7,.2,1); }
/* the PT chart, opened from the refrigerant section */
.pt-t { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pt-t th { padding: 0 6px 6px; font: 600 10.5px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--app-mute); text-align: right; }
.pt-t td { padding: 6px; border-top: 1px solid var(--app-line2); text-align: right; }
.pt-t th:first-child, .pt-t td:first-child { text-align: left; }
.pt-t tr.on td { background: var(--app-good-soft); font-weight: 750; }
.psheet-row.one { grid-template-columns: 1fr; }
/* the camera, inside the phone: a metal nameplate, the shutter, the reading sweep */
.cam { position: absolute; inset: 42px 0 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px 14px 26px; background: #0b0e13; color: #e9eef4; }
.cam.open { animation: fade .22s ease; }
.cam.snap::after { content: ""; position: absolute; inset: 0; background: #fff; animation: snap .35s ease-out forwards; pointer-events: none; }
.cam-view { position: relative; width: 100%; padding: 14px; overflow: hidden; border-radius: 12px; }
.cam-frame { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 2;
  background: linear-gradient(#ff8040, #ff8040) 0 0 / 22px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 0 0 / 3px 22px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 0 / 22px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 0 / 3px 22px no-repeat,
    linear-gradient(#ff8040, #ff8040) 0 100% / 22px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 0 100% / 3px 22px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 100% / 22px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 100% / 3px 22px no-repeat; }
.cam-sweep { position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(255,140,80,.28) 70%, rgba(255,170,120,.6) 98%, transparent); }
.cam.reading .cam-sweep { animation: sweep 1.15s ease-in-out 1; }
.cam-say { margin: 0; font-size: 12.5px; font-weight: 600; color: #c4ceda; }
.cam-shutter { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 4px solid #e9eef4; background: #e9eef4; box-shadow: inset 0 0 0 3px #0b0e13; cursor: pointer; }
.cam.reading .cam-shutter { opacity: .4; }
.tag-plate { position: relative; padding: 12px 14px 10px; border-radius: 6px; color: #1f2833; transform: rotate(-1.5deg); box-shadow: 0 10px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8);
  background-image: radial-gradient(circle at 8px 8px, #8a94a1 2.4px, transparent 3.2px), radial-gradient(circle at calc(100% - 8px) 8px, #8a94a1 2.4px, transparent 3.2px),
    radial-gradient(circle at 8px calc(100% - 8px), #8a94a1 2.4px, transparent 3.2px), radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #8a94a1 2.4px, transparent 3.2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.03) 1px 3px), linear-gradient(165deg, #e8ecf0, #c3cad3 55%, #dde2e8); }
.tp-h { display: grid; gap: 1px; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1.5px solid #6f7884; text-align: center; }
.tp-h b { font: 700 12px/1.1 var(--font-head); letter-spacing: .14em; }
.tp-h span { font: 600 8.5px/1 var(--font-head); letter-spacing: .16em; color: #4f5a68; }
.tag-plate dl { margin: 0; display: grid; }
.tag-plate dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px; padding: 2.5px 3px; border-bottom: 1px solid rgba(79,90,104,.35); border-radius: 2px; transition: box-shadow .15s, background-color .15s; }
.tag-plate dt { font: 600 8.5px/1.5 var(--font-head); letter-spacing: .1em; color: #4f5a68; }
.tag-plate dd { margin: 0; font: 700 10.5px/1.4 var(--mono); letter-spacing: .02em; }
.tag-plate [data-tp].hit { background: rgba(255,128,64,.2); box-shadow: 0 0 0 1.5px #ff8040; }
.tp-f { margin: 6px 0 0; font: 600 7px/1.2 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: #5b6573; text-align: center; }
/* the unit picker in the demo bar: three units, the one playing filling its bar */
.demo-units { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.demo-units button { position: relative; display: grid; gap: 2px; justify-items: start; align-content: center; min-width: 0; min-height: 52px; padding: 8px 11px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.demo-units button:hover { border-color: var(--brand-line); }
.demo-units button[aria-pressed=true] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.demo-units b { font: 700 16px/1 var(--font-head); letter-spacing: .01em; }
.demo-units span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--mute); line-height: 1.2; }
.demo-units button > i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-2); }
.demo-units button > i > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s cubic-bezier(.3,.7,.2,1); }
/* the PDF: readable type (13.5 px laid out, about 11 px on screen at desktop sizes) */
.pdfwrap .pg { padding-bottom: 1.6em; font-size: clamp(10px, 2.45cqi, 13px); }
.pdfwrap .pg-foot { display: none; }
.pg-table thead td.pg-cap { text-align: left; color: var(--pdf-brand); font-weight: 700; white-space: nowrap; }
.pdfwrap .pg-table + .pg-table { margin-top: 1em; }
.pdfwrap .pg-band { margin-bottom: 1.3em; }
.pdfwrap .pg-head { padding-bottom: 1em; margin-bottom: 1em; }
.pdfwrap .pg-info { gap: .7em 1.2em; padding: .8em 1em; }
.pdfwrap .pg-sec { margin: 1em 0 .4em; }
.pdfwrap .pg-fields div { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); padding: .3em 0; }
.pdfwrap .pg-fields dt { font-size: .86em; }
.pdfwrap .pg-table th, .pdfwrap .pg-table td { padding: .34em .7em; }
.pdfwrap .pg-checks li { padding: .3em 0; }
.pdfwrap .pg-foot { bottom: 1.1em; }
.pg-line { margin: 1em 0 0; font-size: .92em; color: var(--paper-mute); }
.pg-line:empty { display: none; }
.pg-callout { margin: 1.1em 0 0; padding: .7em .9em; border-left: .3em solid #b7791f; border-radius: .3em; background: #fbf3e2; color: #5c3d06; font-weight: 600; }
.pg-open { margin: 1.1em 0 0; padding: .7em .9em .8em; border: 1px solid #e0a36a; border-radius: .4em; background: #fdf4ec; }
.pg-open p { margin: 0 0 .35em; font-weight: 800; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: #8a3f0a; }
.pg-open ol { margin: 0; padding-left: 1.2em; }
.pg-visits { margin: .9em 0 0; padding: .5em .9em .4em; border: 1px solid var(--paper-line); border-radius: .4em; background: var(--paper-soft); }
.pg-visits p { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 .3em; font-weight: 800; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: var(--pdf-brand); }
.pg-rev { padding: .1em .5em; border-radius: .3em; background: var(--pdf-brand); color: var(--paper-on); letter-spacing: .06em; }
.pg-visits table { width: 100%; border-collapse: collapse; font-size: .92em; }
.pg-visits th, .pg-visits td { padding: .3em .5em .3em 0; text-align: left; vertical-align: top; font-weight: 400; border-top: 1px solid var(--paper-line); }
.pg-visits th, .pg-visits td { white-space: nowrap; }
.pg-visits th { font-weight: 700; }
.pg-visits td:nth-child(2) { font-variant-numeric: tabular-nums; }
.pg-visits td:last-child { width: 100%; white-space: normal; padding-right: 0; }
@keyframes sweep { 0% { opacity: 0; transform: translateY(-100%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(250%); } }
@keyframes snap { from { opacity: .85; } to { opacity: 0; } }
.chip.pop { animation: pop .28s ease-out; }

.viewer { border-radius: var(--r-lg); background: var(--viewer-bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.viewer-bar { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; background: var(--viewer-bar); color: var(--viewer-ink); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 550; }
.viewer-bar .i { width: 16px; height: 16px; }
.viewer-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-live { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 11.5px; font-weight: 650; }
.viewer-live .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.viewer-live.pulse .dot { animation: ping .9s ease; }
.viewer-page { color: var(--mute); font-variant-numeric: tabular-nums; }
.paper { padding: 22px; container-type: inline-size; }

/* the PDF page, sized in em so the whole page scales with its box */
.pg { position: relative; aspect-ratio: 8.5 / 11; padding: 0 2.4em 4em; background: var(--paper); color: var(--paper-ink); font-size: clamp(10px, 2.55cqi, 13.5px); line-height: 1.35; border-radius: 3px; box-shadow: var(--paper-shadow); overflow: hidden; }
.pg-band { height: .75em; margin: 0 -2.6em 2.1em; background: var(--pdf-brand); transition: background-color .3s; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-bottom: 1.3em; margin-bottom: 1.4em; border-bottom: 1px solid var(--paper-line); }
.pg-co { display: flex; align-items: center; gap: .6em; font-weight: 700; font-size: 1.12em; letter-spacing: -.01em; }
.pg-mark { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .5em; background: var(--pdf-brand); color: var(--paper-on); font-size: .78em; font-weight: 800; flex: none; transition: background-color .3s; }
.pg-title { color: var(--pdf-brand); font-weight: 800; font-size: 1.42em; letter-spacing: -.015em; text-align: right; transition: color .3s; }
.pg-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .95em 1.4em; margin: 0; padding: 1.1em 1.3em; background: var(--paper-soft); border: 1px solid var(--paper-line); border-radius: .6em; }
.pg-info dt, .pg-fields dt { font-size: .7em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--paper-mute); }
.pg-info dd { margin: .2em 0 0; min-height: 1.35em; border-radius: .3em; }
.pg-info dd:empty::after, .pg-table tbody td:empty::after, .pg-notes:empty::after { content: ""; display: inline-block; width: .9em; height: 1px; vertical-align: middle; background: var(--paper-faint); }
.pg-sec { margin: 1.5em 0 .55em; padding-left: .6em; border-left: .26em solid var(--pdf-brand); color: var(--pdf-brand); font-weight: 700; font-size: 1.1em; line-height: 1.15; transition: color .3s, border-color .3s; }
.pg-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2em; margin: 0; }
.pg-fields div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .5em; align-items: baseline; padding: .38em 0; border-bottom: 1px solid var(--paper-line); }
.pg-fields dt { font-size: .9em; font-weight: 400; letter-spacing: 0; text-transform: none; }
.pg-fields dd { margin: 0; }
.pg-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.2em; }
.pg-checks li { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .36em 0; border-bottom: 1px solid var(--paper-line); }
.pill { display: inline-grid; place-items: center; flex: none; min-width: 3.5em; height: 1.6em; padding: 0 .6em; border-radius: 99px; border: 1px solid var(--paper-line); font-size: .86em; font-weight: 700; transition: background-color .25s, color .25s; }
.pill:empty::after { content: ""; width: .9em; height: 1px; background: var(--paper-faint); }
.pill.yes { background: var(--paper-good); border-color: transparent; color: var(--paper-on); }
.pill.no { background: var(--paper-bad); border-color: transparent; color: var(--paper-on); }
.pill.na { background: var(--paper-na); border-color: transparent; color: var(--paper-on); }
.pg-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pg-table tbody th, .pg-table thead td { width: 44%; }
.pg-table th, .pg-table td { padding: .5em .8em; text-align: center; font-weight: 400; }
.pg-table td { font-variant-numeric: tabular-nums; }
.pg-table thead th { background: var(--paper-soft); color: var(--pdf-brand); font-weight: 700; }
.pg-table thead td { background: var(--paper-soft); }
.pg-table tbody th { text-align: left; }
.pg-table tbody tr:nth-child(even) { background: var(--paper-zebra); }
.pg-notes { margin: 0; min-height: 3.4em; padding: .6em .8em; border: 1px solid var(--paper-line); border-radius: .4em; }
.pg-foot { position: absolute; left: 2.6em; right: 2.6em; bottom: 1.5em; display: flex; justify-content: space-between; gap: 1em; padding-top: .7em; border-top: 1px solid var(--paper-line); font-size: .8em; color: var(--paper-mute); }
.pg-sign { display: flex; align-items: flex-end; gap: 1.2em; margin-top: 1.2em; padding-top: .6em; border-top: 1px solid var(--paper-line); }
.pg-sign svg { width: 9em; height: 2.3em; fill: none; stroke: var(--paper-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg-sign span { font-size: .85em; color: var(--paper-mute); padding-bottom: .3em; }
.flash { animation: flash 1.4s ease; }
.pill.flash { animation: ring 1.1s ease; }

/* the proof strip under the hero */
/* the proof strip is an equipment nameplate: brushed steel, four rivets, engraved rules */
.facts { list-style: none; margin: 40px 0 0; padding: 6px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--plate-edge); border-radius: var(--r-lg); color: var(--plate-ink); box-shadow: inset 0 1px 0 var(--plate-hi), var(--shadow-sm);
  background-image: radial-gradient(circle at 12px 12px, var(--rivet) 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) 12px, var(--rivet) 3px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--rivet) 3px, transparent 4px), radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--rivet) 3px, transparent 4px),
    linear-gradient(170deg, var(--plate-1), var(--plate-2)); }
.facts li { padding: 22px 22px; border-left: 1px dashed var(--plate-edge); }
.facts li:first-child { border-left: 0; }
.facts b { color: var(--plate-ink); }
.facts span { color: var(--plate-mute); }
.facts b { display: block; font: 700 40px/1.05 var(--font-head); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.facts span { display: block; color: var(--plate-mute); font-size: 14.5px; line-height: 1.4; }

/* ---------- home: "More it does for you", six silent loops. The resting frame is the informative one, so reduced motion
   (which stops every animation) shows a meaningful still. Every box has a fixed size. ---------- */
.more-sec { padding-top: 56px; }
.vigs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vig { display: flex; flex-direction: column; padding: 14px 14px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.vig h3 { margin: 14px 4px 6px; font-size: 19px; }
.vig p { margin: 0 4px; color: var(--mute); font-size: 15px; line-height: 1.5; }
.vig-art { position: relative; height: 168px; overflow: hidden; padding: 16px; border-radius: var(--r); background-color: var(--art-bg); color: var(--app-fg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 20px 20px; font-size: 13px; }
.vig-art p { margin: 0; color: inherit; font-size: 13px; }
/* 1: the Cx comment on one reading */
.vr-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--app-warn); background: var(--app-panel); }
.vr-row span { color: var(--app-mute); font-size: 12.5px; }
.vr-row b { position: relative; font-variant-numeric: tabular-nums; }
.vr-row b i { font-style: normal; }
.vr-old { position: absolute; right: 2.4em; opacity: 0; }
.vr-cmt { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--app-warn); border-radius: 8px; background: var(--app-warn-soft); display: grid; gap: 1px; font-size: 12.5px; }
.vr-cmt span { color: var(--app-mute); }
.vr-ok { position: absolute; right: 16px; bottom: 16px; padding: 4px 9px 3px; border: 2px solid var(--app-yes); border-radius: 5px; color: var(--app-yes); font: 700 12px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-5deg); }
/* 2: the report design presets */
.vd-pg { position: absolute; left: 50%; top: 14px; width: 150px; height: 118px; margin-left: -75px; padding: 0 10px; border-radius: 3px; background: var(--paper); box-shadow: var(--paper-shadow); color: var(--paper-ink); }
.vd-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 0 -10px 10px; padding: 12px 10px 8px; font-style: normal; font-size: 7px; }
.vd-h b { font-size: 7.5px; } .vd-h em { font-style: normal; font-weight: 800; color: #1f4e79; font-size: 7px; }
.vd-l { display: block; height: 5px; margin: 0 0 9px; border-radius: 2px; background: #e3e7ed; font-style: normal; }
.vd-l.s { width: 70%; }
.vd-1 .vd-h { border-bottom: 2px solid #1f4e79; }
.vd-2 .vd-h { background: #1f4e79; color: #fff; } .vd-2 .vd-h em { color: #fff; }
.vd-3 .vd-h { border-bottom: 2px solid #1d6b43; } .vd-3 .vd-h em { color: #1d6b43; } .vd-3 .vd-l:first-of-type { height: 12px; background: #1d6b43; }
.vd-1, .vd-3 { opacity: 0; }
.vd-name { position: absolute; left: 0; right: 0; bottom: 12px; height: 20px; text-align: center; font: 600 13px/20px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.vd-name i { position: absolute; left: 0; right: 0; font-style: normal; }
.vd-n1, .vd-n3 { opacity: 0; }
/* 3: the Checks console */
.vc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 5px 10px; margin-bottom: 6px; border-radius: 9px; border: 1px solid var(--app-line); background: var(--app-panel); }
.vc-row span { display: block; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--app-mute); }
.vc-row b { display: block; color: var(--app-fg); font-size: 12.5px; }
.vc-row em { font-style: normal; font-weight: 700; color: var(--app-fg); }
.vc-a { display: none; } .vc-b { display: inline; }
.vc-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--app-line); }
.vc-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.vc-sw.on { background: var(--app-yes); } .vc-sw.on::after { left: 16px; }
.vc-flip { background: var(--app-yes); }
.vc-flip::after { left: 16px; }
/* 4: Ask Claude */
.va-q { margin-left: auto !important; max-width: 82%; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: var(--ink); color: var(--bg) !important; font-size: 12.5px !important; width: fit-content; }
.va-dots { display: flex; gap: 4px; margin: 10px 0 0 !important; padding: 9px 11px; width: fit-content; border-radius: 12px; background: var(--app-panel); border: 1px solid var(--app-line); opacity: 0; position: absolute; top: 62px; left: 16px; }
.va-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-mute); }
.va-a { margin-top: 10px !important; max-width: 90%; padding: 8px 11px; border-radius: 12px 12px 12px 3px; background: var(--app-panel); border: 1px solid var(--app-line); font-size: 12.5px !important; line-height: 1.45; }
/* 5: the weather fill */
.v-wx { display: grid; align-content: center; gap: 10px; }
.vw-f { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--app-accent); background: var(--app-panel); }
.vw-f span { color: var(--app-mute); }
.vw-f b { min-width: 3.2em; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.vw-v { font-style: normal; }
.vw-tag { display: flex; align-items: center; gap: 6px; color: var(--app-accent) !important; font-weight: 600; }
.vw-tag .i { width: 15px; height: 15px; }
/* 6: the Come back for list */
.vb-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px !important; font: 600 12.5px/1.2 var(--font-head) !important; letter-spacing: .04em; color: var(--app-warn-ink) !important; }
.vb-h .i { width: 15px; height: 15px; }
.v-back ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-back li { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--app-line); border-left: 3px solid var(--app-warn); background: var(--app-panel); font-size: 12px; }
.v-back li span { color: var(--app-mute); }
/* The loops play only with motion on (site.js sets .js-fx for people, never for automated browsers or reduced motion);
   without it every vignette rests on its informative frame. */
.js-fx .vr-old { animation: v-out 9s infinite; }
.js-fx .vr-new { animation: v-in-late 9s infinite; }
.js-fx .vr-cmt { animation: v-slide 9s infinite; }
.js-fx .vr-ok { animation: v-stamp 9s infinite; }
.js-fx .vd-1 { animation: v-cycle-1 9s infinite; }
.js-fx .vd-2 { animation: v-cycle-2 9s infinite; }
.js-fx .vd-3 { animation: v-cycle-3 9s infinite; }
.js-fx .vd-n1 { animation: v-cycle-1 9s infinite; }
.js-fx .vd-n2 { animation: v-cycle-2 9s infinite; }
.js-fx .vd-n3 { animation: v-cycle-3 9s infinite; }
.js-fx .vc-flip { animation: v-sw-bg 9s infinite; }
.js-fx .vc-flip::after { animation: v-sw-knob 9s infinite; }
.js-fx .va-dots { animation: v-dots 9s infinite; }
.js-fx .va-a { animation: v-answer 9s infinite; }
.js-fx .vw-v { animation: v-type 9s infinite; }
.js-fx .vw-tag { animation: v-type 9s infinite; }
.js-fx .vb-1 { animation: v-row-1 9s infinite; }
.js-fx .vb-2 { animation: v-row-2 9s infinite; }
.js-fx .vb-3 { animation: v-row-3 9s infinite; }
/* the loops: each 9 s, resting on the informative frame */
@keyframes v-out { 0%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes v-in-late { 0%, 30% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes v-slide { 0%, 8% { opacity: 0; transform: translateY(10px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes v-stamp { 0%, 46% { opacity: 0; transform: rotate(-5deg) scale(1.4); } 52%, 100% { opacity: 1; transform: rotate(-5deg) scale(1); } }
@keyframes v-cycle-1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes v-cycle-2 { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes v-cycle-3 { 0%, 63% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes v-sw-bg { 0%, 35% { background: var(--app-line); } 40%, 100% { background: var(--app-yes); } }
@keyframes v-sw-knob { 0%, 35% { left: 2px; } 40%, 100% { left: 16px; } }
@keyframes v-dots { 0%, 12% { opacity: 0; } 16%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes v-answer { 0%, 38% { opacity: 0; transform: translateY(8px); } 44%, 100% { opacity: 1; transform: none; } }
@keyframes v-type { 0%, 20% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes v-row-1 { 0%, 8% { opacity: 0; transform: translateX(-10px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes v-row-2 { 0%, 24% { opacity: 0; transform: translateX(-10px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes v-row-3 { 0%, 40% { opacity: 0; transform: translateX(-10px); } 46%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vr-old, .vd-1, .vd-3, .vd-n1, .vd-n3, .va-dots { opacity: 0 !important; }
  .vd-2, .vd-n2 { opacity: 1 !important; }
}
@media (max-width: 960px) { .vigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vigs { grid-template-columns: minmax(0, 1fr); gap: 12px; } .vig-art { height: 156px; } .more-sec { padding-top: 40px; } }

/* ---------- home: the field section's roof row (Sun mode, the PT chart, the weather) ---------- */
.roof { margin-top: 56px; }
.roof-h { margin: 0 0 18px; font: 600 15px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.roof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.roof-art { height: 200px; }
.roof .tile-text { padding: 22px 24px 24px; }
.roof .tile-text p { font-size: 15.5px; }
.sun-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 300px; }
.sp-f { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-panel); color: var(--app-fg); font-size: 11.5px; }
.sp-f span { color: var(--app-mute); }
.sp-f b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sp-f.is-sun { border: 2px solid #000; background: #fff; color: #000; font-weight: 650; }
.sp-f.is-sun span { color: #1d1d1d; font-weight: 650; }
.sp-f.is-sun b { font-size: 20px; font-weight: 800; }
.sun-chip { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #000; color: #fff; font: 600 12.5px/1 var(--font-head); letter-spacing: .02em; white-space: nowrap; }
.sun-chip .i { width: 14px; height: 14px; color: #ffd23f; }
.pt-mini { width: 100%; max-width: 280px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--app-line); background: var(--app-panel); color: var(--app-fg); box-shadow: var(--shadow-sm); }
.pt-mini p { margin: 0 0 6px; font: 700 13px/1.2 var(--font-head); }
.pt-mini table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pt-mini th { padding: 0 4px 4px; font: 600 10px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--app-mute); text-align: right; }
.pt-mini td { padding: 4px; border-top: 1px solid var(--app-line2); text-align: right; }
.pt-mini th:first-child, .pt-mini td:first-child { text-align: left; }
.pt-mini tr.on td { background: var(--app-good-soft); font-weight: 750; }
.wx-mini { display: grid; gap: 10px; width: 100%; max-width: 280px; color: var(--app-fg); font-size: 13px; }
.wx-tag { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--app-accent); font-weight: 600; font-size: 13px; }
.wx-tag .i { width: 15px; height: 15px; }
.vs-off { display: flex; align-items: center; gap: 6px; color: var(--app-mute) !important; font-weight: 600; }
.vs-off .i { width: 15px; height: 15px; }
.v-wx .vw-tag { color: var(--app-yes) !important; }

/* ---------- home and product: AI included, a dark spotlight in both themes ---------- */
.spot { position: relative; isolation: isolate; overflow: hidden; background: var(--band-bg); color: var(--band-ink); border-block: 1px solid var(--band-line); }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(700px 420px at 85% 30%, var(--band-glow), transparent 70%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: auto, 40px 40px, 40px 40px; }
.spot h2, .spot h3 { color: var(--band-ink); }
.spot .lead { color: var(--band-mute); }
.spot .eyebrow { color: var(--band-hi); }
.spot a { color: var(--band-hi); }
.spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.spot-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.spot-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.spot-list .i { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--band-card); border: 1px solid var(--band-line); color: var(--band-icon); }
.spot-list b { display: block; font: 700 18px/1.25 var(--font-head); color: var(--band-ink); margin-bottom: 2px; }
.spot-list span { color: var(--band-mute); font-size: 15.5px; line-height: 1.5; }
.spot-note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--band-line); color: var(--band-mute); font-size: 15px; }
.spot-art { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ai-photo { position: relative; grid-row: 1 / span 2; padding: 22px 16px; border-radius: 16px; background: #0b0e13; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.ai-frame { position: absolute; inset: 8px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(#ff8040, #ff8040) 0 0 / 20px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 0 0 / 3px 20px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 0 / 20px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 0 / 3px 20px no-repeat,
    linear-gradient(#ff8040, #ff8040) 0 100% / 20px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 0 100% / 3px 20px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 100% / 20px 3px no-repeat, linear-gradient(#ff8040, #ff8040) 100% 100% / 3px 20px no-repeat; }
.ai-photo .tag-plate dl div { grid-template-columns: 86px minmax(0, 1fr); }
.ai-photo .tag-plate .hit { background: rgba(255,128,64,.16); box-shadow: 0 0 0 1.5px #ff8040; margin: 2px 0; }
.ai-photo .tag-plate .hit.unsure { background: rgba(242,184,75,.3); box-shadow: 0 0 0 1.5px #b7791f; }
.ai-read, .ai-check { padding: 14px; border-radius: 14px; background: var(--app-panel); color: var(--app-fg); border: 1px solid var(--app-line); box-shadow: 0 24px 50px -20px rgba(0,0,0,.55); font-size: 12.5px; }
.ai-read-h { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 700; font-size: 12.5px; color: var(--app-warn-ink); }
.ai-read-h .i { width: 15px; height: 15px; }
.ai-read ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ai-read li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid var(--app-line2); }
.ai-read li span { color: var(--app-mute); font-size: 11.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-read li b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-read li i { justify-self: end; font-style: normal; }
.ai-read .ok .i { width: 16px; height: 16px; color: var(--app-yes); stroke-width: 2.6; }
.ai-read .chk { padding: 3px 7px; border-radius: 6px; background: var(--app-warn); color: #1a0c02; font: 700 10.5px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.ai-read li.unsure { margin: 0 -6px; padding: 6px; border-radius: 8px; background: var(--app-warn-soft); border-top-color: transparent; }
.ai-check { border-left: 4px solid var(--app-warn); }
.ai-check p { margin: 0 0 6px; line-height: 1.45; color: var(--app-mute); }
.ai-check p b { color: var(--app-fg); }
.ai-check-h { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font-head) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--app-warn-ink) !important; }
.ai-check-h .i { width: 14px; height: 14px; }
.ai-check-f { margin: 0 !important; font-size: 11.5px; }

.spot-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: st; }
.spot-steps li { counter-increment: st; padding: 14px; border-radius: 12px; background: var(--band-card); border: 1px solid var(--band-line); color: var(--band-mute); font-size: 14px; line-height: 1.45; }
.spot-steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px; border-radius: 7px; background: var(--band-icon); color: #1a0c02; font: 700 13px/1 var(--font-head); }
.spot-steps b { display: block; margin-bottom: 2px; color: var(--band-ink); font: 700 16px/1.25 var(--font-head); }
.connect-steps { margin: 18px 0 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--ink-2); }
.connect-steps li::marker { color: var(--brand-strong); font-weight: 700; }
.swatch-l { margin: 26px 0 0; color: var(--mute); font-size: 15px; }
.swatch-l + .swatches { margin-top: 12px; }

/* ---------- home and product: the Checks console drawn small ---------- */
.cons { width: 100%; max-width: 460px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; }
.cons-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cons-h b { font: 700 19px/1 var(--font-head); }
.cons-h span { color: var(--mute); font-size: 12.5px; }
.cons-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden; }
.cons-tabs span { flex: 1; padding: 6px 4px; border-radius: 7px; text-align: center; font: 600 12.5px/1 var(--font-head); color: var(--mute); white-space: nowrap; }
.cons-tabs .on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.cons-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cons-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.cons-list li > span { min-width: 0; color: var(--mute); font-size: 12px; line-height: 1.35; }
.cons-list b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink); font-size: 13px; font-weight: 650; }
.cons-list em { font-style: normal; font-weight: 700; color: var(--ink); }
.cons-list li.off { background: var(--surface-2); }
.cons-list li.off b { color: var(--ink-2); }
.cons-list li.own { border-color: var(--brand-line); background: var(--brand-soft); }
.own-chip { font-style: normal; padding: 2px 6px; border-radius: 4px; background: var(--brand-strong); color: var(--bg); font: 700 10px/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.cons .vc-sw { background: var(--line); }
.cons .vc-sw.on { background: var(--good-fill); }
.cons-try { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1.5px dashed var(--brand-line); font-size: 12.5px; }
.cons-try span { color: var(--mute); }
.cons-try b { display: inline-flex; align-items: center; gap: 6px; color: var(--good); font-weight: 650; }
.cons-try .i { width: 15px; height: 15px; stroke-width: 2.6; }

/* ---------- home and product: real outcomes and the Come back for list ---------- */
.outs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.out-art { display: grid; place-items: center; height: 170px; padding: 20px; border-bottom: 1px solid var(--line); }
.out-card { width: 100%; max-width: 290px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--app-panel); color: var(--app-fg); border: 1px solid var(--app-line); box-shadow: var(--shadow); font-size: 12.5px; }
.out-card p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 2px; }
.out-card p b { font: 700 18px/1 var(--font-head); }
.out-l { padding: 5px 8px; border-radius: 7px; background: var(--app-sunk); color: var(--app-mute); }
.out-l.warn { background: var(--app-warn-soft); color: var(--app-warn-ink); font-weight: 600; }
.out-l.bad { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.out .tile-text { padding: 22px 24px 26px; }
.comeback { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 20px; padding: 30px 32px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.cb-text h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cb-text h3 .i { width: 22px; height: 22px; color: var(--warn); }
.cb-text p { margin: 0; color: var(--mute); }
.cb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--warn); background: var(--surface-2); font-size: 14.5px; }
.cb-list b { font: 700 16px/1.2 var(--font-head); }
.cb-list span { color: var(--ink-2); }

/* ---------- home and product: the Claude connector drawn as a short chat ---------- */
.chat { width: 100%; max-width: 440px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.chat p { margin: 0; }
.chat-q { justify-self: end; max-width: 86%; padding: 10px 13px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--bg); }
.chat-tool { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--mute); font-size: 12px; font-weight: 600; }
.chat-tool .i { width: 14px; height: 14px; color: var(--brand-strong); }
.chat-a { justify-self: start; max-width: 92%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink-2); }
.chat-a b { color: var(--ink); }

/* ---------- home and templates: components and trades beside the library ---------- */
.lib-more { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.tile.lib-comp { flex-direction: row; }
.lib-comp .tile-art { flex: 0 0 46%; height: auto; min-height: 280px; border-bottom: 0; border-right: 1px solid var(--line); }
.lib-comp .tile-text { align-self: center; }
.comp { width: 100%; max-width: 270px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12.5px; }
.comp-h { margin: 0 0 8px; font: 700 14px/1.2 var(--font-head); }
.comp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.comp li { display: flex; gap: 6px; padding: 5px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.comp li b { color: var(--brand-strong); font-weight: 700; }
.comp-f { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--good); font-weight: 650; font-size: 12px; }
.comp-f .i { width: 14px; height: 14px; }
.lib-trades .tile-text { display: flex; flex-direction: column; height: 100%; }
.trades { list-style: none; margin: 20px 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trades li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--good); background: var(--good-soft); }
.trades b { font: 700 17px/1.2 var(--font-head); }
.trades span { font-size: 13px; color: var(--good); font-weight: 600; }
.trades li.next { border: 1.5px dashed var(--line); background: transparent; }
.trades li.next span { color: var(--mute); }
.lib-trades .more { margin-top: auto; }

@media (max-width: 960px) {
  .roof-grid, .outs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .spot-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .comeback { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lib-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .roof { margin-top: 40px; }
  .spot-art { grid-template-columns: minmax(0, 1fr); }
  .spot-steps { grid-template-columns: minmax(0, 1fr); }
  .ai-photo { grid-row: auto; }
  .comeback { padding: 22px 18px; }
  .cb-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tile.lib-comp { flex-direction: column; }
  .lib-comp .tile-art { flex: none; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .cons { padding: 12px; }
  .cons-tabs span:nth-child(4) { display: none; }
}

/* ---------- phones: card grids become one swipeable row, so the home page stays a short story ----------
   The next card peeks in at the edge; the row scrolls inside itself (never the page), snaps card by card, and takes
   keyboard focus when it can scroll (site.js). Cards in a row skip the scroll reveal, which would fire mid-swipe. */
@media (max-width: 640px) {
  .swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important; gap: 12px; max-width: none !important; margin: 0 -16px !important; padding: 4px 16px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { grid-column: auto !important; min-width: 0; scroll-snap-align: start; }
  .swipe:focus-visible { outline-offset: -2px; border-radius: 0; }
  .js-rv .swipe > [data-reveal] { opacity: 1; transform: none; transition: none; }
  .roof { margin-top: 28px; }
  .eqgrid li:nth-child(n+7) { display: none; }
  .story .nameplate { display: none; }
  .lanes.swipe { grid-auto-columns: 88%; align-items: start; }
  .spot-art .ai-check { display: none; }
  .steps6 li { padding: 10px 12px; row-gap: 0; }
  .steps6 em { padding-top: 0; }
  .lane-h { margin-bottom: 14px; }
}

/* ---------- home: paper against the phone ---------- */
.lanes { display: grid; gap: 20px; }
.lane { position: relative; padding: 26px 28px 28px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.lane-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.lane-h h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.lane-h p { margin: 0; font-weight: 650; font-size: 14.5px; }
.lane.paper-way .lane-h p { color: var(--bad); }
.lane.phone-way { border-color: var(--brand-line); box-shadow: 0 0 0 1px var(--brand-line), var(--shadow); }
.lane.phone-way .lane-h p { color: var(--good); }
.tag { display: inline-flex; flex: none; white-space: nowrap; align-items: center; height: 24px; padding: 0 9px; border-radius: 4px; font: 700 13px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.good { background: var(--good-soft); color: var(--good); }
.steps6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.steps6 li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); }
.steps6 li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 34px; right: -11px; width: 10px; height: 10px; border-top: 2px solid var(--faint); border-right: 2px solid var(--faint); transform: rotate(45deg); }
.steps6 .i { width: 22px; height: 22px; color: var(--ink-2); margin-bottom: 4px; }
.steps6 b { font-size: 14.5px; line-height: 1.3; font-weight: 650; }
.steps6 small { font-size: 13px; line-height: 1.4; color: var(--mute); }
.steps6 em { font-style: normal; font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-top: auto; padding-top: 8px; }
.paper-way em { color: var(--bad); }
.phone-way em { color: var(--good); }
.phone-way .steps6 li { background: var(--brand-soft); border-color: var(--brand-line); }
.phone-way .steps6 .i { color: var(--brand-strong); }
.steps6 .done { grid-column: span 3; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; background: transparent !important; border: 2px dashed var(--line) !important; color: var(--mute); font-weight: 600; font-size: 15px; }
.steps6 .done .i { width: 26px; height: 26px; margin: 0; color: var(--good); stroke-width: 2.6; }
.steps6 li.done::after { display: none; }

/* ---------- home and product: feature tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.tile-text { padding: 26px 28px 28px; }
.tile-text h3 { margin-bottom: 8px; }
.tile-text p { margin: 0; color: var(--mute); }
.tile-art { flex: none; height: 300px; display: grid; place-items: center; padding: 24px; border-bottom: 1px solid var(--line); overflow: hidden; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span4 { grid-column: span 4; } .span6 { grid-column: 1 / -1; }
.tile.row { flex-direction: row; }
.tile.row .tile-text { flex: 0 0 40%; align-self: center; padding: 34px; }
.tile.row .tile-art { flex: 1; height: auto; min-height: 300px; border-bottom: 0; border-left: 1px solid var(--line); }

/* small app pieces drawn in the tiles */
.big-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--app-sunk); border: 1px solid var(--app-line); box-shadow: var(--shadow-sm); }
.big-seg span { display: grid; place-items: center; min-width: 76px; height: 54px; border-radius: 9px; font: 600 19px/1 var(--font-head); color: var(--app-mute); }
.big-seg .on { background: var(--app-yes); color: var(--app-yes-ink); box-shadow: var(--shadow-sm); }
.gloves-art { align-content: center; gap: 16px; }
.mini-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mini-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mini-chips .i { width: 14px; height: 14px; color: var(--brand-strong); }
.appcard { width: min(320px, 100%); padding: 14px; background: var(--app-panel); color: var(--app-fg); border: 1px solid var(--app-line); border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: 13px; }
.appcard-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.appcard-h b { font-size: 15px; letter-spacing: -.01em; }
.appcard-h .chip { height: 22px; }
.left-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.left-list li { display: flex; align-items: center; gap: 10px; padding: 6px 11px; border-radius: 11px; background: var(--app-sunk); border: 1px solid var(--app-line); font-size: 13px; }
.left-list li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px dashed var(--app-faint); }
.left-list li.got { color: var(--app-mute); background: transparent; text-decoration: line-through; text-decoration-color: var(--app-faint); }
.left-list li.got::before { border: 0; background: var(--app-yes); -webkit-mask: none; box-shadow: inset 0 0 0 3px var(--app-panel); }
.next-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; margin-top: 10px; border-radius: 9px; background: var(--app-accent); color: var(--app-panel); font-weight: 650; font-size: 14px; }
.next-btn .i { width: 16px; height: 16px; stroke-width: 2.4; }
.offer { width: min(330px, 100%); padding: 16px; background: var(--app-panel); color: var(--app-fg); border: 1px solid var(--app-line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: 13px; }
.offer-field { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; margin-bottom: 12px; border-radius: 11px; border: 1.5px solid var(--app-accent); background: var(--app-input); }
.offer-field span { color: var(--app-mute); font-size: 12px; }
.offer-field b { font-weight: 650; }
.offer p { margin: 0 0 12px; line-height: 1.45; }
.offer p b { font-weight: 650; }
.offer-units { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.offer-units span { padding: 3px 8px; border-radius: 7px; background: var(--app-sunk); border: 1px solid var(--app-line); font-size: 11.5px; font-weight: 650; }
.offer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.offer-row span { display: grid; place-items: center; height: 42px; border-radius: 9px; font-weight: 650; font-size: 13px; background: var(--app-sunk); border: 1px solid var(--app-line); }
.offer-row .go { background: var(--app-yes); color: var(--app-yes-ink); border-color: transparent; }
.calc-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; max-width: 640px; }
.readings { padding: 14px; background: var(--app-panel); color: var(--app-fg); border: 1px solid var(--app-line); border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: 12.5px; }
.readings-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; }
.readings-h span { font-weight: 600; color: var(--app-mute); font-size: 11.5px; }
.rd { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--app-line2); }
.rd span { color: var(--app-mute); }
.rd b { font-variant-numeric: tabular-nums; font-weight: 650; }
.rd b small { margin-left: 3px; font-size: 10.5px; color: var(--app-mute); font-weight: 600; }
.rd.res { margin-top: 4px; padding: 9px 10px; border: 0; border-radius: 11px; background: var(--app-good-soft); }
.rd.res span { color: var(--app-fg); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rd.res .i { width: 14px; height: 14px; color: var(--app-yes); }
.rd.res em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--app-yes); margin-left: 6px; }
.suggest-card { padding: 16px; background: var(--app-panel); color: var(--app-fg); border: 1px solid var(--app-line); border-left: 4px solid var(--app-warn); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: 12.5px; }
.suggest-card .sg-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: 13.5px; }
.suggest-card .sg-h .i { width: 17px; height: 17px; color: var(--app-warn); }
.suggest-card p { margin: 0 0 10px; color: var(--app-mute); line-height: 1.45; }
.suggest-card .lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.suggest-card .lines span { display: grid; justify-items: center; padding: 6px 0; border-radius: 9px; background: var(--app-sunk); font-size: 10.5px; color: var(--app-mute); font-weight: 600; }
.suggest-card .lines b { font-size: 13px; color: var(--app-fg); font-variant-numeric: tabular-nums; }
.suggest-card .lines .off b { color: var(--app-warn-ink); }
.suggest-card .sg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--app-mute); }
.suggest-card .sg-foot span:last-child { padding: 4px 10px; border-radius: 999px; background: var(--app-warn-soft); color: var(--app-fg); font-weight: 650; }
.stamp-art { gap: 10px; align-content: center; }
.st-field { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(300px, 100%); padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 14px; }
.st-field span { font-size: 12px; color: var(--mute); }
.st-field b { font-weight: 600; white-space: nowrap; }
.st-field i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); }

/* ---------- home: who uses it ---------- */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.role { display: flex; flex-direction: column; overflow: hidden; }
.role .tile-art { height: 236px; }
.role .tile-text { display: flex; flex-direction: column; flex: 1; }
.role .tile-text p { margin-bottom: 18px; }
.role .more { margin-top: auto; }
.role-k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 650; color: var(--brand-strong); }
.role-k .i { width: 17px; height: 17px; }
.today { width: min(260px, 100%); padding: 12px; background: var(--app-bg); color: var(--app-fg); border: 8px solid var(--bezel); border-radius: 30px; box-shadow: var(--shadow-lg); font-size: 12.5px; }
.today p { margin: 4px 6px 10px; font-weight: 700; font-size: 15px; }
.today ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.today li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 11px; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 12px; }
.today li b { font-size: 13.5px; }
.today li span { font-size: 11.5px; color: var(--app-mute); }
.today li .chip { height: 20px; font-size: 10.5px; }
.ogrid { width: 100%; max-width: 330px; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; }
.ogrid-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 650; font-size: 12.5px; }
.ogrid-h span { color: var(--mute); font-weight: 500; }
.ogrid table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ogrid td { padding: 7px 12px; border-top: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ogrid td:first-child { font-weight: 650; width: 64px; }
.ogrid td:last-child { text-align: right; width: 108px; overflow: visible; }
.ogrid .chip { height: 20px; font-size: 10.5px; }
.ogrid .bar { display: block; height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.ogrid .bar i { display: block; height: 100%; background: var(--good-fill); border-radius: inherit; }
.review-art { width: 100%; max-width: 330px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: 12.5px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rv-head b { font-size: 15px; letter-spacing: -.02em; }
.rv-row { display: flex; justify-content: space-between; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); }
.rv-row.flag { border-color: var(--bad); background: var(--bad-soft); }
.rv-row.flag b { color: var(--bad); }
.rv-note { display: flex; gap: 8px; margin: 9px 0; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.rv-note .i { width: 16px; height: 16px; color: var(--mute); margin-top: 1px; }
.rv-note p { margin: 0; color: var(--ink-2); }
.rv-note p b { display: block; font-size: 12px; color: var(--ink); }
.rv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- report look (brand) ---------- */
.brand-sec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.swatches { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.sw { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.sw:hover { transform: scale(1.06); }
.sw[aria-pressed=true] { box-shadow: 0 0 0 2px var(--ink); }
.sw-navy { background: var(--sw-navy); } .sw-red { background: var(--sw-red); } .sw-green { background: var(--sw-green); } .sw-slate { background: var(--sw-slate); } .sw-orange { background: var(--sw-orange); }
.studio-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.studio-list li { padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.brand-art { display: grid; grid-template-columns: auto auto; justify-content: center; padding: 56px 24px; border-radius: var(--r-xl); border: 1px solid var(--line); }
.mini-pg { width: 230px; aspect-ratio: 8.5 / 11; padding: 0 15px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; box-shadow: var(--paper-shadow-lg); font-size: 8.5px; line-height: 1.3; overflow: hidden; }
.mini-toc { transform: rotate(-5deg) translate(22px, 10px); }
.mini-rep { position: relative; z-index: 1; transform: rotate(3deg) translate(-16px, -8px); }
.mini-pg .pg-band { height: 6px; margin: 0 -15px 13px; }
.mp-co { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 8.5px; padding-bottom: 9px; border-bottom: 1px solid var(--paper-line); }
.mp-co .pg-mark { font-size: 6.5px; }
.mp-co b { margin-left: auto; color: var(--pdf-brand); font-size: 7.5px; font-weight: 800; transition: color .3s; }
.mini-toc .mp-t { margin: 26px 0 2px; font-size: 16px; font-weight: 800; color: var(--pdf-brand); letter-spacing: -.02em; transition: color .3s; }
.mini-toc .mp-s { margin: 0 0 16px; color: var(--paper-mute); }
.mini-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini-toc li { display: flex; justify-content: space-between; padding-bottom: 3px; border-bottom: 1px dotted var(--paper-faint); }
.mini-toc li i { font-style: normal; color: var(--paper-mute); }
.mp-box { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin: 10px 0; padding: 8px; background: var(--paper-soft); border: 1px solid var(--paper-line); border-radius: 3px; }
.mp-box i, .mp-lines i { display: block; height: 4px; border-radius: 2px; background: var(--paper-line); }
.mp-sec { margin: 10px 0 6px; padding-left: 4px; border-left: 2px solid var(--pdf-brand); color: var(--pdf-brand); font-weight: 700; font-size: 8.5px; transition: color .3s, border-color .3s; }
.mp-lines { display: grid; gap: 7px; }
.mp-lines i:nth-child(2n) { width: 82%; }

/* ---------- home: library strip, plans strip, story ---------- */
.eqgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.eqgrid a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; line-height: 1.3; box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s, box-shadow .2s; }
.eqgrid a:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.lost .i { width: 22px; height: 22px; color: var(--brand-strong); }
.eq { width: 52px; height: 52px; padding: 5px; border-radius: 14px; background: var(--brand-soft); fill: none; stroke: var(--brand-strong); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: background-color .2s; }
a:hover .eq, button:hover .eq { background: var(--accent-soft); }
.planstrip { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.planstrip > div { padding: 28px; border-left: 1px solid var(--line); }
.planstrip > div:first-child { border-left: 0; background: var(--brand-soft); }
.planstrip h2 { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 10px; }
.planstrip p { margin: 0; color: var(--mute); font-size: 15px; }
.planstrip .p-name { font: 700 18px/1.2 var(--font-head); color: var(--ink); margin-bottom: 6px; }
.planstrip .p-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 6px; color: var(--mute); }
.planstrip .p-price b { font: 700 38px/1.1 var(--font-head); color: var(--ink); }
.planstrip .p-price span { color: var(--mute); }
.planstrip .p-price.talk b { font-size: 26px; line-height: 1.45; }
.planstrip .p-price small { align-self: center; font: 600 14px/1 var(--font-head); color: var(--mute); }
.planstrip .more { margin-top: 16px; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.story blockquote { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; letter-spacing: -.02em; font-weight: 550; color: var(--ink); }
.story blockquote p { margin: 0 0 18px; }
.story figcaption { color: var(--mute); font-size: 15px; margin-bottom: 26px; }
.nameplate { max-width: 460px; padding: 24px 32px 20px; border-radius: 10px; border: 1px solid var(--plate-edge); box-shadow: inset 0 1px 0 var(--plate-hi), var(--shadow); color: var(--plate-ink);
  background-image: radial-gradient(circle at 13px 13px, var(--rivet) 3.5px, transparent 4.5px), radial-gradient(circle at calc(100% - 13px) 13px, var(--rivet) 3.5px, transparent 4.5px),
    radial-gradient(circle at 13px calc(100% - 13px), var(--rivet) 3.5px, transparent 4.5px), radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--rivet) 3.5px, transparent 4.5px),
    linear-gradient(170deg, var(--plate-1), var(--plate-2)); }
.np-t { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--plate-edge); font-weight: 800; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; }
.nameplate dl { margin: 0; }
.nameplate dl div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--plate-edge); }
.nameplate dl div:last-child { border-bottom: 0; }
.nameplate dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--plate-mute); padding-top: 2px; }
.nameplate dd { margin: 0; font-weight: 600; font-size: 15px; }

/* ---------- a pilot customer quote: hidden and empty until there is a real one ---------- */
.pilot { margin: 0 0 24px; padding: 24px 26px; }
.pilot blockquote { margin: 0 0 12px; font-size: 19px; line-height: 1.5; color: var(--ink); }
.pilot figcaption { color: var(--mute); font-size: 14.5px; }
.pilot figcaption b { color: var(--ink); }

/* ---------- closing band (every page) ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; margin: 0 auto; padding: 72px 64px; border-radius: var(--r-xl); background: var(--band-bg); color: var(--band-ink); border: 1px solid var(--band-line); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 40px; align-items: center; }
.band::after { content: ""; position: absolute; z-index: -1; right: -56px; top: -132px; width: 300px; height: 300px; background: var(--band-ink); opacity: .06; -webkit-mask: url("/brand/startupsend-mark-one-color.svg") center / contain no-repeat; mask: url("/brand/startupsend-mark-one-color.svg") center / contain no-repeat; pointer-events: none; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 100% 0%, var(--band-glow), transparent 70%), linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: auto, 40px 40px, 40px 40px; }
.band h2 { color: var(--band-ink); margin-bottom: 14px; }
.band p { margin: 0; color: var(--band-mute); font-size: 18px; max-width: 560px; }
.band .cta-row { justify-content: flex-end; }
.band .btn:not(.primary) { background: transparent; color: var(--band-ink); border-color: var(--band-line); box-shadow: none; }
.band .btn:not(.primary):hover { border-color: var(--band-mute); }
/* the closing band sits close under the last section, whatever its background */
.sec:has(> .wrap > .band) { padding-top: 56px; }
@media (max-width: 640px) { .sec:has(> .wrap > .band) { padding-top: 40px; } }

/* ---------- product ---------- */
.subnav { position: sticky; top: 58px; z-index: 20; background: var(--nav-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line-2); }
.subnav ul { display: flex; gap: 4px; margin: 0 auto; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-sm); color: var(--mute); text-decoration: none; font-weight: 550; font-size: 14.5px; white-space: nowrap; }
.subnav a:hover { color: var(--ink); background: var(--bg-alt); }
.subnav a.on { color: var(--ink); background: var(--brand-soft); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.step-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); align-items: stretch; }
.step-text { padding: 26px 28px 30px; }
.step-text p { margin: 0; color: var(--mute); }
.step-wide .step-text { padding: 44px 40px; align-self: center; }
.step-wide .step-text h3 { font-size: 24px; letter-spacing: -.025em; }
.step-n { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-strong); font: 700 17px/1 var(--font-head); }
.step-art { position: relative; display: grid; place-items: center; height: 360px; padding: 28px; border-bottom: 1px solid var(--line); overflow: hidden; }
.step-wide .step-art { height: auto; border-bottom: 0; border-left: 1px solid var(--line); padding: 40px 40px 64px; }
.art-phone { place-items: end center; padding-bottom: 0; }
.sheet { position: relative; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.sheet-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.sheet-title { flex: 1; min-width: 0; font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-title span { color: var(--mute); font-weight: 500; }
.keycap { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid var(--line); border-bottom-width: 2.5px; border-radius: 7px; background: var(--surface-2); color: var(--mute); font-size: 11.5px; font-weight: 650; transition: transform .1s, background-color .2s, color .2s; }
.keycap.press { transform: translateY(1.5px); border-bottom-width: 1px; background: var(--accent-soft); color: var(--ink); }
.sheet-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow: hidden; }
.sheet-tabs span { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sheet-tabs span.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sheet-tabs b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th { text-align: left; font-weight: 600; font-size: 12px; color: var(--mute); background: var(--surface-2); padding: 8px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-2); white-space: nowrap; }
.grid td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); white-space: nowrap; }
.grid tr:last-child td { border-bottom: 0; }
.grid th:last-child, .grid td:last-child { border-right: 0; }
.grid .c-n { width: 34px; padding: 8px 4px; text-align: center; color: var(--mute); background: var(--surface-2); font-size: 11.5px; }
.grid .t { font-weight: 650; }
.grid .chip { height: 21px; font-size: 11px; }
.sheet-toast { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; white-space: nowrap; display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 13px 8px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-lg); }
.sheet-toast .i { width: 15px; height: 15px; color: var(--good-fill); stroke-width: 2.6; }
.js-fx .sheet:not(.pasted) tbody tr, .js-fx .sheet:not(.pasted) + .sheet-toast { opacity: 0; }
.js-fx .sheet.pasted tbody tr { animation: rowin 1.2s ease both; }
.js-fx .sheet.pasted tbody tr:nth-child(2) { animation-delay: .08s; }
.js-fx .sheet.pasted tbody tr:nth-child(3) { animation-delay: .16s; }
.js-fx .sheet.pasted tbody tr:nth-child(4) { animation-delay: .24s; }
.js-fx .sheet.pasted tbody tr:nth-child(5) { animation-delay: .32s; }
.js-fx .sheet.pasted tbody tr:nth-child(6) { animation-delay: .40s; }
.js-fx .sheet.pasted + .sheet-toast { animation: rise .4s cubic-bezier(.3,.7,.2,1) .9s both; }
.mini-phone { width: 270px; margin-bottom: -2px; padding: 16px 14px 18px; background: var(--app-bg); color: var(--app-fg); border: 9px solid var(--bezel); border-bottom: 0; border-radius: 38px 38px 0 0; box-shadow: var(--shadow-lg); font-size: 12px; }
.mp-head { display: flex; align-items: baseline; gap: 6px; margin: 4px 2px 12px; }
.mp-head b { font-size: 17px; letter-spacing: -.02em; }
.mp-head span { color: var(--app-mute); font-size: 11px; }
.mp-head .chip { margin-left: auto; align-self: center; height: 20px; font-size: 10.5px; }
.mp-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; margin-bottom: 8px; border-radius: 8px; background: var(--app-sunk); border: 1px solid var(--app-line); font-weight: 650; font-size: 11.5px; text-align: center; color: var(--app-mute); }
.mp-seg span { padding: 5px 0; border-radius: 6px; }
.mp-seg .on { background: var(--app-panel); color: var(--app-fg); box-shadow: var(--shadow-sm); }
.mp-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; margin-bottom: 4px; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; }
.mp-row b { font-size: 13px; font-variant-numeric: tabular-nums; }
.mp-row small { margin-left: 3px; font-size: 10px; color: var(--app-mute); font-weight: 600; }
.mp-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 10px 0 8px; }
.mp-photos > span { height: 54px; border-radius: 9px; }
.ph1 { background: linear-gradient(135deg, var(--plate-1), var(--plate-2)); border: 1px solid var(--plate-edge); position: relative; }
.ph1::after { content: ""; position: absolute; inset: 14px 10px; border-top: 2px solid var(--plate-edge); border-bottom: 2px solid var(--plate-edge); }
.ph2 { background: radial-gradient(circle at 50% 50%, var(--app-sunk) 0 30%, var(--app-line) 31% 36%, var(--app-sunk) 37% 100%); border: 1px solid var(--app-line); }
.mp-add { display: grid; place-items: center; align-content: center; gap: 2px; border: 1.5px dashed var(--app-line); color: var(--app-mute); font-size: 10px; font-weight: 600; }
.mp-add .i { width: 15px; height: 15px; }
.mp-sign { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 10px; background: var(--app-panel); border: 1px solid var(--app-line); border-radius: 10px; font-size: 10.5px; color: var(--app-mute); }
.mp-sign svg { width: 120px; height: 32px; fill: none; stroke: var(--app-fg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.send { width: 100%; max-width: 330px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: 13px; }
.rv-log { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 7px; color: var(--mute); font-size: 12px; }
.rv-log li { display: flex; align-items: center; gap: 8px; }
.rv-log .chip { height: 20px; font-size: 10.5px; min-width: 70px; justify-content: center; }
.sd-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.sd-row span { color: var(--mute); }
.sd-row b { font-weight: 600; }
.sd-att { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.sd-pages { position: relative; width: 92px; height: 112px; flex: none; }
.sp { position: absolute; inset: 0; background: var(--paper); border: 1px solid var(--paper-line); border-radius: 4px; box-shadow: var(--shadow-sm); }
.sp3 { transform: rotate(7deg) translate(9px, 2px); }
.sp2 { transform: rotate(3deg) translate(4px, 1px); }
.sp1 { display: grid; align-content: start; gap: 2px; padding: 0 9px 8px; color: var(--paper-ink); font-size: 7.5px; overflow: hidden; }
.sp1::before { content: ""; height: 4px; margin: 0 -9px 7px; background: var(--pdf-brand); }
.sp1 b { font-size: 9px; color: var(--pdf-brand); margin-bottom: 2px; }
.sp1 i { font-style: normal; display: flex; justify-content: space-between; padding-bottom: 2px; border-bottom: 1px dotted var(--paper-faint); }
.sd-file { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 12px 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.sd-file .i { color: var(--mute); width: 16px; height: 16px; }
.sd-file span { display: grid; min-width: 0; }
.sd-file b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-file small { color: var(--mute); font-size: 11.5px; }
.sd-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--mute); }
.sd-foot .fake-btn { margin-left: auto; }
.feat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; margin: 0; padding: 0; list-style: none; }
.feat-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
.feat-list .fi { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); }
.feat-list .fi .i { width: 19px; height: 19px; }
.feat-list b { font: 700 18px/1.25 var(--font-head); }
.feat-list p { margin: 4px 0 0; color: var(--mute); font-size: 15px; }
.calcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.calcs div { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.calcs b { display: block; font: 700 17px/1.2 var(--font-head); margin-bottom: 4px; }
.calcs span { font-size: 13px; color: var(--mute); line-height: 1.45; display: block; }
.calcs code { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split-art { display: grid; place-items: center; padding: 40px 28px; border-radius: var(--r-xl); border: 1px solid var(--line); min-height: 380px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.opts div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.opts b { display: block; font-weight: 650; font-size: 15px; }
.opts span { font-size: 13.5px; color: var(--mute); }
.opts .def { border-color: var(--brand-line); background: var(--brand-soft); }
.hist { list-style: none; margin: 0; padding: 6px 14px; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.hist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.hist li:first-child { border-top: 0; }
.h-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--brand-strong); }
.hist li:first-child .h-dot { background: var(--brand-strong); }
.hist div { display: grid; min-width: 0; }
.hist b { font-size: 12px; font-weight: 600; color: var(--mute); }
.hist div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* small spacing helpers (no inline styles in the pages) */
.sub-head { margin: 88px 0 0; }
.h3-lg { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.15; }
h3 + .lead { margin-top: 12px; }
.note { margin: 18px 0 0; }
.note-lg { margin: 24px 0 0; }
.gap-t { margin-top: 6px; }
.w100 { width: 100%; } .w72 { width: 72%; } .w0 { width: 0; }

/* the template builder drawn on the page: a selected row and its toolbar */
.wys { width: 100%; max-width: 420px; }
.wys-pg { padding: 0 22px 24px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; box-shadow: var(--paper-shadow-lg); font-size: 12px; }
.wys-band { height: 7px; margin: 0 -22px 18px; background: var(--pdf-brand); }
.wys-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--paper-line); font-weight: 700; font-size: 11.5px; }
.wys-head span { display: flex; align-items: center; gap: 6px; }
.wys-head .pg-mark { font-style: normal; }
.wys-head b { color: var(--pdf-brand); font-weight: 800; font-size: 12px; text-align: right; }
.wys-sec { margin: 0 0 6px; padding-left: 7px; border-left: 3px solid var(--pdf-brand); color: var(--pdf-brand); font-weight: 700; font-size: 13px; }
.wys-row { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 8px; border-bottom: 1px solid var(--paper-line); }
.wys-row em { font-style: normal; color: var(--paper-mute); font-size: 11px; }
.wys-row.sel em { color: var(--paper-ink); }
.wys-row.sel { z-index: 1; border-radius: 6px; background: var(--paper-tint); box-shadow: inset 0 0 0 2px var(--pdf-brand); }
.wys-tool { position: absolute; right: 6px; top: calc(100% + 6px); display: flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--band-bg); box-shadow: var(--shadow-lg); }
.wys-tool span { padding: 5px 9px; border-radius: 7px; color: var(--band-ink); font-size: 11.5px; font-weight: 600; }
.wys-tool span:first-child { background: var(--band-line); }
.wys-tool .del { color: var(--accent); }
.wys-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding: 10px; border: 1.5px dashed var(--paper-faint); border-radius: 8px; color: var(--paper-mute); font-size: 11.5px; }
.wys-add b { color: var(--pdf-brand); font-weight: 700; margin-right: 4px; }
.wys-add span { padding: 3px 8px; border-radius: 6px; background: var(--paper-soft); border: 1px solid var(--paper-line); color: var(--paper-ink); }

/* ---------- templates ---------- */
.card h3, .step-text h3 { margin-bottom: 8px; }
.lib-list { min-height: 900px; }
#lib-app.ready .lib-list { min-height: 0; }
.cats { min-height: 36px; }

.lib-tools { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-areas: "search count" "cats cats"; align-items: center; gap: 16px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.search { grid-area: search; position: relative; }
.search .i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--mute); pointer-events: none; }
.search input { width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; }
.search input:focus { outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-soft); }
.cats { grid-area: cats; display: flex; flex-wrap: wrap; gap: 6px; }
.cats button { height: 40px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 600 16px/1 var(--font-head); letter-spacing: .01em; cursor: pointer; }
.cats button:hover { border-color: var(--brand-line); }
.cats button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lib-count { grid-area: count; margin: 0; color: var(--mute); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.lib-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 32px; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.lib-group h2 { display: grid; gap: 2px; align-content: start; padding-top: 12px; font-size: 19px; letter-spacing: -.015em; }
.lib-group h2 span { font-size: 14px; color: var(--mute); font-weight: 500; letter-spacing: 0; }
.tcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tcard { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: start; width: 100%; height: 100%; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tcard:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.tcard .eq { grid-row: span 3; }
.tcard b { font: 700 18px/1.2 var(--font-head); }
.tcard span { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.lib-empty { padding: 56px 0; text-align: center; color: var(--mute); }
.lib-noscript { padding: 24px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); color: var(--mute); }
.lib-ask { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: var(--r-xl); border: 1.5px dashed var(--brand-line); background: var(--brand-soft); }
.lib-ask h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.lib-ask p { margin: 0; color: var(--mute); }
.pv { width: min(880px, 100% - 32px); max-height: calc(100% - 48px); margin: auto; padding: 0; border: 0; border-radius: var(--r-xl); background: var(--viewer-bg); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.pv::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.pv[open] { display: flex; flex-direction: column; }
.pv:focus-visible { outline: none; }
#lib-app { padding-top: 0; }
.pv-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pv-bar h2 { flex: 1; min-width: 0; font-size: 17px; letter-spacing: -.015em; }
.pv-bar h2 span { display: block; font-size: 13px; color: var(--mute); font-weight: 500; letter-spacing: 0; }
.pv-body { flex: 1; overflow: auto; padding: 24px; overscroll-behavior: contain; }
.pv-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px; background: var(--surface); border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.tsheet { max-width: 760px; margin: 0 auto; padding: 0 34px 34px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; box-shadow: var(--paper-shadow); font-size: 12.5px; line-height: 1.4; }
.tsheet .ts-band { height: 9px; margin: 0 -34px 26px; background: var(--pdf-brand); }
.tsheet .ts-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--paper-line); }
.tsheet .ts-co { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.tsheet .ts-title { color: var(--pdf-brand); font-weight: 800; font-size: 17px; letter-spacing: -.01em; text-align: right; }
.tsheet .ts-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; padding: 12px 16px; background: var(--paper-soft); border: 1px solid var(--paper-line); border-radius: 8px; }
.tsheet .ts-info span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--paper-mute); }
.tsheet .ts-info i { display: block; height: 1px; margin-top: 12px; background: var(--paper-faint); }
.ts-sec { margin: 22px 0 8px; padding-left: 8px; border-left: 3px solid var(--pdf-brand); color: var(--pdf-brand); font-weight: 700; font-size: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ts-sec small { color: var(--paper-mute); font-weight: 600; font-size: 11px; letter-spacing: .02em; }
.ts-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ts-fields div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--paper-line); }
.ts-fields em, .ts-checks em { font-style: normal; color: var(--paper-mute); font-size: 11px; white-space: nowrap; }
.ts-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ts-checks li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--paper-line); }
.ts-yna { display: inline-flex; gap: 3px; flex: none; }
.ts-yna i { font-style: normal; display: grid; place-items: center; min-width: 30px; height: 19px; padding: 0 5px; border-radius: 99px; border: 1px solid var(--paper-line); font-size: 10px; font-weight: 700; color: var(--paper-mute); }
.ts-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ts-table th, .ts-table td { padding: 6px 9px; border-bottom: 1px solid var(--paper-line); text-align: center; font-weight: 400; }
.ts-table thead th { background: var(--paper-soft); color: var(--pdf-brand); font-weight: 700; font-size: 11.5px; }
.ts-table tbody th { text-align: left; }
.ts-table th:first-child { width: 46%; text-align: left; }
.ts-table td::after { content: ""; display: inline-block; width: 14px; height: 1px; vertical-align: middle; background: var(--paper-faint); }
.ts-table tbody tr:nth-child(even) { background: var(--paper-zebra); }
.ts-box { height: 64px; border: 1px solid var(--paper-line); border-radius: 6px; }
.ts-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ts-photos i { aspect-ratio: 4 / 3; border: 1px dashed var(--paper-faint); border-radius: 6px; }
.ts-sign { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding-top: 30px; }
.ts-sign span { display: block; padding-top: 6px; border-top: 1px solid var(--paper-ink); font-size: 11px; color: var(--paper-mute); }
.ts-foot { margin-top: 20px; font-size: 11px; color: var(--paper-mute); }

/* ---------- templates: facts, components, trades ---------- */
.lib-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.lib-facts li { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14.5px; }
.lib-facts b { font: 700 16px/1 var(--font-head); color: var(--ink); }
.comp-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: stretch; }
.comp-art { display: grid; place-items: center; padding: 32px 20px; border-radius: var(--r-xl); border: 1px solid var(--line); }
.cgroups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cgroups li { padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.cgroups b { display: block; margin-bottom: 4px; font: 700 18px/1.2 var(--font-head); }
.cgroups em { font-style: normal; color: var(--mute); font-size: 14px; line-height: 1.45; }
.trades-lg { margin: 0; gap: 12px; }
.trades-lg li { padding: 20px 22px; }
.trades-lg b { font-size: 22px; }
.trades i { font-style: normal; }
@media (max-width: 960px) { .comp-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cgroups { grid-template-columns: minmax(0, 1fr); } }
.cb-card { width: 100%; max-width: 440px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cb-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.cb-card-h b { font: 700 17px/1.2 var(--font-head); }
.cb-card-h span { color: var(--mute); font-size: 13px; }
.cb-card .cb-list li { font-size: 13.5px; grid-template-columns: 70px minmax(0, 1fr); }
.cb-list li.ok { border-left-color: var(--good); }
.cb-list li.bad { border-left-color: var(--bad); }
.cb-card-f { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--warn); font-size: 13px; font-weight: 600; }

/* ---------- pricing ---------- */
.calc { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; padding: 22px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.calc-l { font-weight: 650; }
.calc-ctl { display: flex; align-items: center; gap: 18px; }
.calc input[type=range] { flex: 1; min-width: 0; height: 32px; margin: 0; accent-color: var(--brand-strong); cursor: pointer; }
.calc output { min-width: 108px; text-align: right; font: 700 22px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.calc-out { margin: 0; color: var(--mute); min-height: 3.2em; }
.calc-out b { color: var(--ink); font-weight: 650; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 36px 0 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 30px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s; }
.plan-h { font-size: 19px; letter-spacing: -.015em; }
.plan p { margin: 0; }
.plan > .mute { min-height: 3.2em; }
.plan.is-pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg); }
.plan .fit { position: absolute; top: -13px; left: 28px; padding: 5px 10px 4px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font: 700 13px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 4px; min-height: 52px; margin: 6px 0 2px !important; }
.price b { font: 700 54px/1.05 var(--font-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.price span { color: var(--mute); }
.price.talk b { font-size: 38px; }
.price small { align-self: center; color: var(--mute); font: 600 15px/1 var(--font-head); }
.plan ul { list-style: none; padding: 18px 0 0; margin: 10px 0 auto; display: grid; gap: 10px; border-top: 1px solid var(--line-2); }
.plan .btn { margin-top: 26px; }
.plan-note { margin: 8px 0 0; color: var(--mute); text-align: center; }
.plan-note .i { color: var(--good); stroke-width: 2.6; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 32px; }
.incl li { color: var(--ink-2); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.trio > div { padding: 28px; }
.trio .fi { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px; background: var(--brand-soft); color: var(--brand-strong); }
.trio p { margin: 0; color: var(--mute); }
.ai-incl { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 36px; padding: 22px 26px; border-radius: var(--r-xl); border: 1px solid var(--brand-line); background: var(--surface); box-shadow: var(--shadow-sm); }
.ai-incl-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--band-bg); color: var(--band-icon); }
.ai-incl-i .i { width: 22px; height: 22px; }
.ai-incl h3 { margin-bottom: 4px; }
.ai-incl p { margin: 0; color: var(--mute); }
.ai-allow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.ai-allow li { padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: 15px; }
.ai-allow b { display: block; font: 700 15px/1.3 var(--font-head); }
.ai-extra b { color: var(--ink); }
@media (max-width: 640px) { .ai-incl { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; } }
.billing { display: flex; justify-content: center; gap: 4px; width: fit-content; margin: 20px auto 0; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.billing button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--mute); font: 600 15px/1 var(--font-head); cursor: pointer; }
.billing button[aria-pressed=true] { background: var(--ink); color: var(--bg); }
.billing small { font-size: 12px; color: inherit; font-weight: 600; } /* B24: full strength, so it reads at 4.5:1 or better */
.save-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.save { display: grid; gap: 22px; padding: 28px; box-shadow: var(--shadow); }
.save-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.save-in label { display: grid; gap: 6px; align-content: end; font-weight: 600; font-size: 14px; }
.save-in label:first-child { grid-column: 1 / -1; }
.save-in small { margin-top: -4px; color: var(--mute); font-weight: 500; font-size: 12.5px; }
.save-in input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 17px var(--font); font-variant-numeric: tabular-nums; }
.save-in input:focus { outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-soft); }
.save-out { padding: 18px 20px; border-radius: var(--r-lg); background: var(--good-soft); border: 1px solid var(--line-2); }
.save-out p { margin: 0; }
.save-h { font: 700 26px/1.15 var(--font-head); color: var(--ink); }
.save-split { margin-top: 4px !important; color: var(--mute); font-size: 14px; }
.save-m { margin-top: 12px !important; color: var(--ink-2); }
.save-m b { font: 700 30px/1 var(--font-head); color: var(--good); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) { .save-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 640px) { .save { padding: 20px 16px; } .save-in { grid-template-columns: minmax(0, 1fr); } .save-h { font-size: 22px; } }
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 2px; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin: -2px 0 22px; color: var(--mute); max-width: 700px; }

/* ---------- commissioning ---------- */
.rvmock { display: grid; grid-template-columns: minmax(0, 1fr) 220px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--viewer-bg); box-shadow: var(--shadow-lg); }
.rvmock-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: var(--viewer-bar); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--viewer-ink); }
.rvmock-bar .i { width: 16px; height: 16px; color: var(--mute); }
.rvmock-bar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvmock-bar em { font-style: normal; font-size: 12px; color: var(--mute); font-weight: 550; }
.rvmock .paper { padding: 18px; }
.rvmock .pg { aspect-ratio: auto; padding-bottom: 1.6em; font-size: 10px; }
.rvmock .pg-table tbody th, .rvmock .pg-table thead td { width: 52%; }
.phero-split.wide-art { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.rv-mark { position: relative; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; background: var(--paper-hl); }
.rv-mark::after { content: attr(data-n); position: absolute; right: -1.9em; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .9em; font-weight: 800; }
.rv-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border-left: 1px solid var(--line); font-size: 12.5px; }
.rv-side h3 { font-size: 13px; letter-spacing: 0; color: var(--mute); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.cmt { padding: 10px 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.cmt b { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 3px; }
.cmt b i { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; }
.cmt p { margin: 0; color: var(--ink-2); line-height: 1.45; }
.cmt small { display: block; margin-top: 4px; color: var(--mute); font-size: 11px; }
.rv-side .rv-actions { margin-top: auto; grid-template-columns: 1fr; }
.rv-side .fake-btn { height: 38px; }
.cx-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cx-points > div { padding: 30px; }
.cx-points h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cx-points h3 .fi { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-strong); }
.cx-points p { margin: 0; color: var(--mute); }
.cx-points ul { margin: 14px 0 0; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ba-card { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.ba-card figcaption { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-2); }
.ba-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ba-notes li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 550; }
.ba-notes.bad li { background: var(--bad-soft); color: var(--bad); }
.ba-notes.good li { background: var(--good-soft); color: var(--good); }
.ba-notes li::before { content: ""; flex: none; }
.ba-notes.bad li::before { width: 7px; height: 7px; margin: 0 3px; border-radius: 50%; background: currentColor; }
.ba-notes.good li::before { width: 9px; height: 5px; margin: 0 2px 3px 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.paper-sm { flex: 1; padding: 16px; background: var(--viewer-bg); border-radius: 14px; container-type: inline-size; }
.pg-sm { aspect-ratio: auto; padding-bottom: 1.6em; font-size: clamp(9.5px, 2.3cqi, 12px); }
.pg-sm .pg-band { margin-bottom: 1.6em; }
.pg-sm .pg-head { margin-bottom: 1.1em; padding-bottom: 1em; }
.pg-sm .pg-checks { grid-template-columns: 1fr; margin: 1.1em 0 .9em; }
.pg-info-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stamp { font-weight: 600; }
/* the hand-filled sheet: printed labels, pen scribbles, blanks, a coffee ring */
.hand { position: relative; flex: 1; padding: 22px 22px 26px; background: var(--sheet-bg); color: var(--sheet-ink); border-radius: 6px; box-shadow: var(--paper-shadow); transform: rotate(-.8deg); font-size: 12px; overflow: hidden; }
.hand::before { content: ""; position: absolute; right: 26px; bottom: 40px; width: 110px; height: 110px; border-radius: 50%; box-shadow: inset 0 0 0 7px var(--coffee), 0 0 0 2px var(--coffee); opacity: .9; pointer-events: none; }
.hand::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 1px; background: linear-gradient(90deg, transparent, var(--sheet-line), transparent); }
.hand-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--sheet-ink); font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; }
.hand-h span { font-weight: 400; font-size: 10px; }
.hand-row { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: end; gap: 10px; min-height: 30px; border-bottom: 1px solid var(--sheet-line); font-family: var(--mono); font-size: 11px; }
.hand-row > span { padding-bottom: 5px; }
.hand-row svg { width: 100%; height: 24px; fill: none; stroke: var(--pen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hand-row .box { display: inline-flex; gap: 10px; padding-bottom: 5px; }
.hand-row .box i { font-style: normal; display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--sheet-ink); font-size: 10px; color: var(--pen); font-family: var(--font); font-weight: 700; }
.hand-row .q { position: relative; color: var(--red-pen); font-family: var(--font); font-weight: 700; font-size: 12px; padding-bottom: 4px; }
.hand-row .q::before { content: ""; position: absolute; left: -8px; top: -5px; width: 46px; height: 24px; border: 2px solid var(--red-pen); border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%; transform: rotate(-4deg); }

/* ---------- about ---------- */
.prose { font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.prose > * { max-width: 700px; }
.prose p { margin: 0 0 22px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 56px 0 16px; }
.prose h3 { font-size: 21px; margin: 38px 0 10px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 1.3em; }
.prose li { margin: 0 0 8px; }
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose a { color: var(--link); }
.prose .first { font-size: 22px; line-height: 1.55; color: var(--ink); letter-spacing: -.012em; }
.chain { list-style: none; margin: 36px 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: c; }
.chain li { position: relative; padding: 18px 18px 18px 0; border-top: 2px solid var(--line); counter-increment: c; font-size: 15px; line-height: 1.45; color: var(--mute); }
.chain li::before { content: counter(c); position: absolute; top: -14px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; }
.chain li b { display: block; padding-top: 6px; color: var(--ink); font-weight: 650; }
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.beliefs > div { padding: 28px 30px; }
.beliefs b { display: block; font: 700 21px/1.2 var(--font-head); margin-bottom: 8px; }
.beliefs p { margin: 0; color: var(--mute); }
.about-aside { display: grid; gap: 20px; justify-items: start; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.next { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 18px; counter-reset: n; }
.next li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; counter-increment: n; }
.next li::before { content: counter(n); grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.next b { font-weight: 650; }
.next span { color: var(--mute); font-size: 15px; }
.form { display: grid; gap: 16px; padding: 32px; box-shadow: var(--shadow-lg); }
.form label { display: grid; gap: 7px; align-content: start; font-weight: 600; font-size: 14px; }
.form input, .form select, .form textarea { width: 100%; min-width: 0; min-height: 48px; font: 16px var(--font); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-soft); }
.form .btn { margin-top: 4px; }
.form .req { color: var(--mute); font-weight: 500; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp { position: absolute; left: -9999px; }
.msg { margin: 0; font-weight: 600; min-height: 1.5em; }
.msg.ok { color: var(--good); }
.msg.bad { color: var(--bad); }
.side-note { margin-top: 28px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
.side-note p { margin: 0; color: var(--mute); font-size: 15px; }
.side-note b { color: var(--ink); }

/* ---------- resources and articles ---------- */
.rgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rcard { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.rcard:hover { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.rcard-art { height: 168px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.rcard-art .i { width: 56px; height: 56px; stroke-width: 1.4; color: var(--brand-strong); }
.rcard-art .eq-xl { width: 76px; height: 76px; padding: 8px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.rcard-art .i { padding: 0; }
/* the resource cards: a small picture of what each guide holds */
.rp-pg { display: grid; gap: 5px; width: 130px; height: 118px; padding: 0 12px; overflow: hidden; border-radius: 3px; background: var(--paper); box-shadow: var(--paper-shadow); color: var(--pdf-brand); }
.rp-pg .rp-band { height: 5px; margin: 0 -12px 4px; background: var(--pdf-brand); }
.rp-pg b { font-size: 7.5px; font-weight: 800; letter-spacing: .02em; }
.rp-pg .rp-l { display: block; height: 4px; border-radius: 2px; background: var(--paper-line); }
.rp-pg .rp-l.s { width: 70%; }
.rp-sec { padding-left: 4px; border-left: 2px solid var(--pdf-brand); font-size: 7px; font-weight: 700; }
.rp-sh { display: grid; gap: 4px; width: 200px; padding: 10px; border-radius: 12px; background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: var(--shadow-sm); color: var(--app-fg); font-size: 12px; }
.rp-sh span { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 7px; }
.rp-sh em { font-style: normal; color: var(--app-mute); }
.rp-sh b { font-variant-numeric: tabular-nums; }
.rp-sh .res { background: var(--app-good-soft); }
.rp-sh .res em, .rp-sh .res b { color: var(--app-yes); font-weight: 700; }
.rp-hand { display: grid; gap: 4px; width: 170px; padding: 10px 12px; border-radius: 4px; background: var(--sheet-bg); color: var(--sheet-ink); box-shadow: var(--paper-shadow); transform: rotate(-1.5deg); font-family: var(--mono); font-size: 9px; }
.rp-hand b { padding-bottom: 4px; border-bottom: 1.5px solid var(--sheet-ink); font-size: 9.5px; }
.rp-hand span { display: grid; grid-template-columns: 1fr 1fr; align-items: end; min-height: 16px; border-bottom: 1px solid var(--sheet-line); }
.rp-hand i { font-style: normal; }
.rp-hand .q { color: var(--red-pen); font-family: var(--font); font-weight: 700; }
.res-sec { padding-top: 0; }
.plans-sec { padding-top: 0; }
.contact-hero { padding-bottom: 112px; }
.chain-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rcard-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.rcard-k { font-size: 12.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong); margin: 0 0 10px; }
.rcard h2, .rcard h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 10px; }
.rcard p { margin: 0 0 18px; color: var(--mute); font-size: 15px; }
.rcard .meta { margin-top: auto; font-size: 13.5px; color: var(--mute); }
.soon { margin-top: 40px; padding: 22px 26px; border-radius: var(--r-lg); border: 1px dashed var(--line); color: var(--mute); }
.article { padding: 72px 0 40px; }
.article header { margin-bottom: 40px; }
.article h1 { font-size: clamp(34px, 4.2vw, 50px); margin-bottom: 18px; }
.article .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--mute); font-size: 14.5px; }
.article .prose h2 { scroll-margin-top: 84px; }
.callout { margin: 30px 0; padding: 20px 24px; border-radius: var(--r); background: var(--brand-soft); border: 1px solid var(--brand-line); font-size: 16.5px; line-height: 1.6; }
.callout b { color: var(--ink); }
.callout.warm { background: var(--accent-soft); border-color: var(--accent); }
.worked { margin: 28px 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); font-size: 15.5px; }
.worked-h { padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 650; color: var(--ink); }
.worked table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.worked th, .worked td { padding: 10px 18px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.worked th { font-weight: 500; color: var(--mute); width: 58%; }
.worked td { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.worked tr:last-child th, .worked tr:last-child td { border-bottom: 0; }
.worked tr.res th, .worked tr.res td { background: var(--good-soft); color: var(--ink); }
.worked tr.res td { color: var(--good); }
.dtable { width: 100%; margin: 24px 0 28px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.dtable th, .dtable td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dtable thead th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); font-weight: 650; border-bottom-width: 2px; }
.dtable td:first-child { font-weight: 600; color: var(--ink); }
.art-end { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.toc { margin: 0 0 36px; padding: 18px 22px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; }
.toc p { margin: 0 0 8px; font-weight: 650; color: var(--ink); font-size: 14px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.toc a { color: var(--link); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- legal ---------- */
.legal { padding: 72px 0 112px; }
.legal h1 { font-size: clamp(36px, 4.6vw, 52px); margin-bottom: 12px; }
.legal h2 { font-size: 21px; letter-spacing: -.02em; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--ink-2); font-size: 17px; line-height: 1.7; }

/* ---------- footer ---------- */
.foot { padding: 72px 0 36px; border-top: 1px solid var(--line); background: var(--bg-alt); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; margin-bottom: 48px; }
.foot-brand p { margin: 14px 0 20px; max-width: 320px; color: var(--mute); font-size: 15px; }
.foot-nav { display: grid; grid-template-columns: repeat(4, auto); gap: 40px 56px; }
.foot-nav div { display: grid; gap: 4px; align-content: start; }
.foot-nav .foot-h { margin: 0 0 6px; font: 600 14px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.foot-nav a { color: var(--mute); text-decoration: none; font-size: 15px; padding: 4px 0; }
.foot-nav a:hover { color: var(--ink); }
.foot-c { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px; }

/* ---------- motion ---------- */
.js-rv [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-rv [data-reveal].in { opacity: 1; transform: none; }
@keyframes flash { 0%, 25% { background-color: var(--paper-hl); } 100% { background-color: transparent; } }
@keyframes ring { 0% { box-shadow: 0 0 0 .45em var(--paper-hl); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pop { 0% { opacity: .55; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes tap { 50% { scale: .78; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rowin { 0% { opacity: 0; transform: translateX(-8px); background-color: var(--hl); } 25% { opacity: 1; transform: none; background-color: var(--hl); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .btn:hover, .tcard:hover, .rcard:hover, .eqgrid a:hover, .sw:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1439px) {
  .stage { --s: .74; }
  .hero-grid { column-gap: 40px; }
}
/* Short screens (1366x768, 1280x800): a shorter phone screen (its form scrolls inside), so the phone and the whole PDF
   sit above the fold with the headline. */
@media (min-width: 1280px) and (max-height: 880px) {
  .screen { height: 588px; }
  .stage { --s: .66; padding-bottom: var(--s4); }
  .demo-bar { gap: 8px; margin-top: 12px; }
  .demo-units button { padding: 7px 8px 9px; }
  .demo-units span { font-size: 11.5px; }
  .stage-link { margin-top: 270px; }
}
/* 960 to 1279: the copy runs in two columns across the top, the phone and the whole PDF side by side under it */
@media (max-width: 1279px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hero-copy { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-bottom: var(--s6); }
  .hero-copy > .pill-new { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .hero-copy > h1 { grid-column: 1; grid-row: 2 / span 3; margin: 0; font-size: clamp(40px, 4.4vw, 50px); }
  .hero-copy > .lead { grid-column: 2; grid-row: 2; margin-bottom: var(--s5); }
  .hero-copy > .cta-row { grid-column: 2; grid-row: 3; }
  .hero-copy > .assure { grid-column: 2; grid-row: 4; margin-top: var(--s4); }
  .stage { --s: .88; grid-template-columns: 300px 40px calc(580px * var(--s)); }
}
@media (max-width: 1180px) {
  .links { margin-left: 14px; }
  .links a { padding: 12px 9px; font-size: 16px; }
}
@media (max-width: 1099px) {
  .links { display: none; position: absolute; left: 0; right: 0; top: 58px; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px 16px 18px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); max-height: calc(100vh - 58px); overflow-y: auto; }
  .links.open { display: flex; }
  .links a { display: flex; align-items: center; min-height: 50px; padding: 0 14px; font-size: 17px; border-radius: 12px; color: var(--ink); }
  .links .only-menu { display: flex; }
  .links .menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
  .links .menu-cta .btn { height: 50px; justify-content: center; font-size: 16px; }
  .links .menu-cta .btn.primary { background: var(--accent); color: var(--accent-ink); }
  .menu-btn { display: flex; }
  #signin { display: none; }
  .facts { margin-top: 24px; }
}
@media (max-width: 959px) {
  .hero-copy { display: block; max-width: 680px; }
  .hero-copy > h1 { font-size: clamp(36px, 6.6vw, 52px); margin: 0 0 var(--s5); }
  .stage { --s: .76; grid-template-columns: 300px 32px calc(580px * var(--s)); }
}
@media (max-width: 960px) {
  .sec { padding: 88px 0; }
  .phero { padding: 72px 0 56px; }
  .phero-split, .phero-split.wide-art, .split, .brand-sec, .story, .contact, .ba { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split.flip > :first-child { order: 0; }
  .sec-head.split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px dashed var(--plate-edge); }
  .steps6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps6 li:nth-child(3)::after { display: none; }
  .steps6 .done { grid-column: span 3; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span2, .span3 { grid-column: span 1; } .span4, .span6 { grid-column: 1 / -1; }
  .tile.row { flex-direction: column; }
  .tile.row .tile-text { flex: none; padding: 26px 28px 28px; order: 2; }
  .tile.row .tile-art { border-left: 0; border-bottom: 1px solid var(--line); min-height: 280px; }
  .roles { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .eqgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planstrip > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .planstrip > div:nth-child(2) { border-left: 0; }
  .band { grid-template-columns: minmax(0, 1fr); padding: 56px 40px; }
  .band .cta-row { justify-content: flex-start; }
  .flow { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .step-wide { grid-template-columns: minmax(0, 1fr); }
  .step-wide .step-art { border-left: 0; border-bottom: 1px solid var(--line); order: -1; padding: 28px 28px 64px; }
  .step-wide .step-text { padding: 26px 28px 30px; }
  .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-group { grid-template-columns: minmax(0, 1fr); }
  .lib-group h2 { display: flex; align-items: baseline; gap: 10px; padding-top: 0; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .plan > .mute { min-height: 0; }
  .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .cx-points, .beliefs { grid-template-columns: minmax(0, 1fr); }
  .rgrid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .chain { grid-template-columns: minmax(0, 1fr); gap: 0; margin-left: 13px; }
  .chain li { padding: 0 0 22px 26px; border-top: 0; border-left: 2px solid var(--line); }
  .chain li:last-child { border-left-color: transparent; }
  .chain li::before { top: -2px; left: -14px; }
  .chain li b { padding-top: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 819px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; width: 100%; }
  .stage > .phone { grid-row: 1; }
  .stage-link { display: none; }
  .demo-bar { grid-column: 1; grid-row: 2; width: 100%; max-width: 560px; margin-top: 20px; }
  .pdfwrap { grid-column: 1; grid-row: 3; width: 100%; max-width: 560px; height: auto; margin: 24px 0 0; }
  .pdfwrap > .viewer { width: 100%; transform: none; }
  .rvmock { grid-template-columns: minmax(0, 1fr); }
  .rv-side { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .wrap, .wrap-wide, .wrap-text, .nav-in { width: calc(100% - 32px); }
  .nav-in { gap: 6px; }
  h2 { font-size: clamp(28px, 7.6vw, 34px); }
  /* Phones: a short headline, one button and a link, then the phone itself on the first screen. */
  .hero { padding-top: var(--s4); }
  .hero-copy { padding: 0 0 var(--s4); }
  .hero-copy .eyebrow { display: none; }
  .hero-copy h1 { font-size: clamp(32px, 9.4vw, 40px); margin: 0 0 var(--s3); }
  .hero-copy .lead { font-size: 16.5px; line-height: 1.5; margin-bottom: var(--s4); }
  .hero-copy .cta-row { gap: var(--s2) var(--s4); }
  .hero-copy .cta-row .btn.lg { height: 50px; padding: 0 20px; font-size: 18px; }
  .assure { display: none; }
  .pill-new { margin-bottom: var(--s4); font-size: 13.5px; }
  .demo-cap { font-size: 14px; }
  .demo-units button { min-height: 48px; padding: 7px 7px 9px; }
  .demo-units span { font-size: 11px; }
  .demo-pick { gap: 6px; }
  .paper { padding: 12px; }
  .facts { padding: 4px 6px; }
  .facts li { padding: 16px 10px; }
  .facts b { font-size: 30px; }
  .facts span { font-size: 13.5px; }
  .sec { padding: 72px 0; }
  .sec.tight { padding: 56px 0; }
  .sec-head { margin-bottom: 36px; }
  .phero { padding: 52px 0 44px; }
  .phero .cta-row .btn { flex: 1 1 100%; }
  .lane { padding: 20px 16px 18px; border-radius: var(--r-xl); }
  .steps6 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps6 li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 13px 14px; }
  .steps6 li .i { grid-row: span 3; margin: 1px 0 0; }
  .steps6 li::after { display: none !important; }
  .steps6 em { padding-top: 2px; }
  .steps6 .done { grid-column: auto; display: flex; padding: 14px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3, .span4 { grid-column: auto; }
  .tile-art { height: auto; min-height: 220px; padding: 22px 14px; }
  .tile-text, .tile.row .tile-text { padding: 22px 20px 24px; }
  .calc-art { grid-template-columns: minmax(0, 1fr); }
  .role .tile-art { height: auto; min-height: 220px; }
  .brand-art { padding: 36px 8px; }
  .mini-pg { width: 148px; font-size: 6px; padding: 0 10px; }
  .mini-pg .pg-band { margin: 0 -10px 10px; height: 4px; }
  .mini-toc .mp-t { font-size: 11px; margin-top: 14px; }
  .mp-co, .mp-sec { font-size: 6.5px; }
  .eqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .eqgrid a { flex-direction: row; align-items: center; padding: 12px; gap: 10px; font-size: 14px; border-radius: 14px; }
  .eqgrid .eq { width: 40px; height: 40px; padding: 4px; border-radius: 11px; }
  .planstrip { grid-template-columns: minmax(0, 1fr); }
  .planstrip > div { border-left: 0; border-top: 1px solid var(--line); padding: 22px 20px; }
  .planstrip > div:first-child { border-top: 0; border-bottom: 0; }
  .band { padding: 40px 22px; border-radius: var(--r-xl); }
  .band p { font-size: 16.5px; }
  .band .cta-row .btn { flex: 1 1 100%; }
  .step-text, .step-wide .step-text { padding: 22px 20px 24px; }
  .step-art { height: auto; min-height: 300px; padding: 20px 14px; }
  .step-wide .step-art { padding: 20px 14px 64px; }
  .art-phone { padding-top: 28px; padding-bottom: 0; }
  .grid { font-size: 12.5px; }
  .grid .c-eq, .grid .c-loc { display: none; }
  .feat-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .calcs { grid-template-columns: minmax(0, 1fr); }
  .split-art { padding: 28px 14px; min-height: 0; }
  .opts { grid-template-columns: minmax(0, 1fr); }
  .hist li { grid-template-columns: 12px minmax(0, 1fr); }
  .hist .fake-btn { display: none; }
  .lib-tools { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "cats" "count"; gap: 12px; padding-bottom: 16px; }
  .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); }
  .cats::-webkit-scrollbar { display: none; }
  .cats button { flex: none; height: 40px; }
  .lib-count { text-align: left; }
  .tcards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tcard { padding: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .tcard .eq { width: 44px; height: 44px; padding: 4px; border-radius: 12px; }
  .lib-ask { padding: 22px 20px; }
  .pv { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .pv-body { padding: 12px; }
  .tsheet { padding: 0 16px 20px; font-size: 12px; }
  .tsheet .ts-band { margin: 0 -16px 18px; }
  .tsheet .ts-head { flex-direction: column; align-items: flex-start; }
  .tsheet .ts-title { text-align: left; font-size: 15px; }
  .tsheet .ts-info { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
  .ts-fields, .ts-checks { grid-template-columns: minmax(0, 1fr); }
  .ts-table th, .ts-table td { padding: 6px 4px; font-size: 11px; }
  .ts-photos { grid-template-columns: repeat(2, 1fr); }
  .calc { padding: 18px; }
  .calc-ctl { gap: 12px; }
  .calc output { min-width: 90px; font-size: 16px; }
  .plan { padding: 28px 22px 24px; }
  .incl { grid-template-columns: minmax(0, 1fr); }
  .faq summary { font-size: 16px; }
  .rv-mark::after { display: none; }
  .ba-card { padding: 14px; border-radius: var(--r-xl); }
  .hand { padding: 16px 14px 20px; }
  .cx-points > div, .beliefs > div, .trio > div { padding: 22px 20px; }
  .prose { font-size: 17px; }
  .prose .first { font-size: 19px; }
  .nameplate { padding: 22px 22px 16px; }
  .nameplate dl div { grid-template-columns: 98px minmax(0, 1fr); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .form { padding: 22px 18px; }
  .rcard-art { height: 132px; }
  .rcard-body { padding: 20px; }
  .article { padding-top: 48px; }
  .worked th, .worked td { padding: 9px 12px; }
  .dtable { font-size: 14px; }
  .dtable th, .dtable td { padding: 9px 8px; }
  .foot { padding-top: 56px; }
  .foot-nav { gap: 28px 24px; }
  .foot-nav a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 380px) {
  .demo-units span { display: none; }
  .demo-units button { min-height: 44px; }
  .phone { width: 100%; max-width: 292px; border-radius: 46px; padding: 9px; }
  .screen { border-radius: 38px; }
  .seg button { min-width: 32px; padding: 0 5px; font-size: 11px; }
  .ph-cells, .fsec-cols { grid-template-columns: repeat(3, 36px); }
  .mini-phone { width: 100%; }
  .send, .review-art { padding: 12px; }
  .rv-actions { grid-template-columns: minmax(0, 1fr); }
  .links .menu-cta { grid-template-columns: minmax(0, 1fr); }
}

/* the PDF reflows into one column when its box is narrow, so it stays readable on a phone */
@container (max-width: 470px) {
  .pg { aspect-ratio: auto; font-size: 10.5px; padding: 0 1.6em 1.4em; }
  .pg-band { margin: 0 -1.6em 1.5em; }
  .pg-title { font-size: 1.15em; text-align: left; }
  .pg-head { flex-wrap: wrap; row-gap: .5em; }
  .pg-co { font-size: 1em; }
  .pg-info { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .9em 1em; }
  .pg-checks { grid-template-columns: minmax(0, 1fr); }
  .pg-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.2em; }
  .pg-fields div { grid-template-columns: minmax(0, 1fr); }
  .pg-foot { position: static; margin-top: 1.4em; flex-direction: column; gap: .2em; }
  .pg-table th, .pg-table td { padding: .5em .5em; }
  /* the hero's PDF keeps one height whatever the unit fills in, so nothing under it ever moves */
  .pdfwrap .pg { height: 700px; }
}

/* B22: the lists on the privacy and security pages */
.legal .plist { padding-left: 1.2em; margin: 12px 0; }
.legal .plist li { margin: 10px 0; }

/* The 90-second video on the home page. */
.watch video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 1040px; margin: 0 auto; border-radius: 14px; background: #0b1220; }