/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }

  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* FullStackAds · Performance practice. Forest/ivory, IBM Plex. */
:root{
  --neutral-0: #fefefe;
  --neutral-50: #faf9f7;
  --neutral-100: #f2efeb;
  --neutral-200: #d2ccc1;
  --neutral-500: #7f735d;
  --neutral-600: #5e5440;
  --neutral-900: #163b31;
  --neutral-950: #112e26;
  --accent-100: #eef2f0;
  --accent-600: #2c6553;
  --accent-700: #20493c;
  --accent-800: #16332a;
  --success-700: #295d2d;
  --danger-700: #9b1e22;
  --bg: var(--neutral-50);
  --surface: var(--neutral-100);
  --raised: var(--neutral-0);
  --nav-bg: var(--neutral-50);
  --fg: var(--neutral-950);
  --muted: var(--neutral-600);
  --border: var(--neutral-200);
  --input-border: var(--neutral-500);
  --ink: var(--neutral-900);
  --on-ink: var(--neutral-100);
  --on-ink-strong: var(--neutral-0);
  --on-accent: var(--neutral-0);
  --accent: var(--accent-600);
  --accent-ink: var(--accent-700);
  --accent-hover: var(--accent-700);
  --accent-active: var(--accent-800);
  --accent-soft: var(--accent-100);
  --accent-2: var(--accent-600);
  --accent-2-ink: var(--accent-700);
  --accent-2-soft: var(--accent-100);
  --focus: var(--accent-700);
  --error: var(--danger-700);
  --ok: var(--success-700);
  --fg-soft:color-mix(in oklch,var(--fg) 5%,transparent);

  --font-display:"IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-body:"IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r-sm:2px; --r:2px; --r-lg:2px; --r-pill:2px;
  --gutter:24px; --shell:1160px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --text-h1:clamp(2.45rem,4.8vw,4rem);
  --text-h2:clamp(1.85rem,3.1vw,2.65rem);
  --text-h3:clamp(1.25rem,2vw,1.55rem);
  --text-lead:clamp(1.1875rem,1.65vw,1.375rem);
  --text-sm:.875rem;
  --text-base:1.125rem;

  --section-space:clamp(56px,9vw,120px);
  --shadow-soft:none;
  --shadow-card:none;
  --shadow-lift:none;

  --dur-press:120ms; --dur-ui:200ms; --dur-reveal:280ms;
  --stagger:50ms;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:auto}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.5;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.2; letter-spacing:-.01em; font-weight:700; color:var(--fg); text-wrap:balance; overflow-wrap:break-word}
p{margin:0; text-wrap:pretty}
li,blockquote,figcaption,.ans,.lead,.cfl,.bullet p,.qcard cite{text-wrap:pretty}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:2px}
img{max-width:100%}
::selection{background:color-mix(in oklch,var(--accent) 26%, transparent)}

/* ---------- mobile touch ---------- */
button,a,[role="button"],label{touch-action:manipulation}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.sec{padding-block:var(--section-space)}
.sec.tight{padding-block:calc(var(--section-space) * .72)}
.surface{background:var(--surface)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--on-ink-strong); padding:10px 16px; z-index:60; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
:where(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--focus); outline-offset:2px}
:where([id]){scroll-margin-block-start:96px}

/* ---------- eyebrow + headings ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-2-ink); margin-bottom:var(--space-4); font-weight:500}
.eyebrow::before{display:none}
h1{line-height:1.08; font-size:var(--text-h1); font-weight:600; letter-spacing:-.045em}
h2{line-height:1.08; font-size:var(--text-h2); font-weight:600; letter-spacing:-.045em}
h3{font-size:var(--text-h3); font-weight:600; letter-spacing:-.025em; line-height:1.25}
.lead{font-size:var(--text-lead); color:var(--muted); line-height:1.5; max-width:62ch; margin-top:20px}
.head{max-width:760px; margin-bottom:40px}
.head.center{margin-inline:auto; text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1.4;
  padding:12px 24px; min-height:48px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:normal; text-align:center;
  transition:transform var(--dur-press) var(--ease-out), background-color var(--dur-ui), border-color var(--dur-ui), box-shadow var(--dur-ui);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:not(:disabled):active{background:var(--accent-active)}
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{background:var(--accent-hover); box-shadow:var(--shadow-lift)} }
.btn-ghost{background:transparent; color:var(--accent-ink); border-color:var(--border)}
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{border-color:var(--accent-ink)} }
.btn-lg{font-size:1.125rem; padding:14px 32px; min-height:56px}
.btn-block{width:100%}
.btn-arrow::after{content:"\2192"; font-size:.95em; transition:transform var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .btn-arrow:hover::after{transform:translateX(3px)} }
.btn[disabled],.btn[disabled]:hover{background:var(--border); color:var(--muted); opacity:1; cursor:not-allowed}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); background:var(--nav-bg); border-bottom:2px solid var(--fg)}
.top-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:72px}
.wordmark{font-family:var(--font-display); font-weight:600; font-size:23px; color:var(--fg); text-decoration:none; letter-spacing:-.055em}
.wordmark span{color:var(--accent)}
.top-cta{padding:12px 20px; min-height:44px}
.top-nav{display:flex; align-items:center; gap:4px 20px; margin-left:auto}
.top-nav a{color:var(--fg); text-decoration:none; font-weight:500; font-size:15px; min-height:44px; display:inline-flex; align-items:center; padding:8px 2px}
@media (hover:hover) and (pointer:fine){ .top-nav a:hover{color:var(--accent-ink)} }
.top-menu{display:none}
.top-menu summary{list-style:none; cursor:pointer; font-weight:800; min-height:44px; display:inline-flex; align-items:center; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--raised); color:var(--fg)}
.top-menu summary::-webkit-details-marker{display:none}
.top-menu nav{display:flex; flex-direction:column; position:absolute; right:0; top:calc(100% + 8px); width:min(280px, calc(100vw - 32px)); background:var(--raised); border:1px solid var(--border); border-radius:var(--r); padding:8px; box-shadow:var(--shadow-card); z-index:50}
.top-menu nav a{color:var(--fg); text-decoration:none; font-weight:700; min-height:44px; display:flex; align-items:center; padding:10px 12px; border-radius:10px}
.top-menu .menu-book{display:none}
@media (hover:hover) and (pointer:fine){ .top-menu nav a:hover{background:var(--surface)} }
@media (max-width:900px){
  .top-nav{display:none}
  .top-menu{display:block; position:relative}
  .top-cta{margin-left:auto}
}
@media (max-width:480px){
  .top-cta{display:none}
  .top-menu{margin-left:auto}
  .top-menu .menu-book{display:flex}
}
@media (max-width:520px){ .top-cta{padding:10px 14px; font-size:.9rem} .wordmark{font-size:1.25rem} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero::before{display:none}
.hero > .shell{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(32px,5vw,72px); align-items:start; padding-block:clamp(48px,7vw,96px) clamp(48px,7vw,88px)}
.hero-copy{padding-top:var(--space-4)}
.hero h1{max-width:16ch}
.hero .lead{max-width:45ch; font-size:clamp(1.1rem,1.6vw,1.25rem)}
.hero-cta-row{margin-top:32px}
@media (max-width:520px){ .hero-cta-row .btn{width:100%} }

/* trust row */
.trust{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--border)}
.trust li{display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); font-size:16px; line-height:1.4; font-weight:400; color:var(--fg)}
.trust li span{min-width:0}
.trust li b{font-weight:600; color:var(--fg)}
.trust .tick{flex:none; width:18px; height:18px; margin-top:2px; stroke-width:2; color:var(--accent-ink)}

/* ---------- form ---------- */
.form-card{background:var(--raised); border:1px solid var(--fg); border-radius:var(--r-lg); padding:28px}
.form-head{border-bottom:2px solid var(--fg); padding-bottom:18px; margin-bottom:20px}
.form-head h2{font-size:26px; letter-spacing:-.025em; font-weight:600}
.form-progress{margin-top:var(--space-2); font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted)}
.form-hint{color:var(--muted); font-size:1rem; margin:var(--space-3) 0 24px; line-height:1.5}
.step{border:0; padding:0; margin:0}
.step[hidden]{display:none}
.field{display:grid; gap:6px; margin-bottom:24px}
.field label, .field legend{font-weight:500; font-size:15px; color:var(--fg); padding:0}
.field input{
  font-family:var(--font-body); font-size:17px; line-height:1.5; color:var(--fg);
  padding:10px 14px; border:1.5px solid var(--input-border); border-radius:var(--r-sm); background:var(--raised); width:100%;
  transition:border-color var(--dur-ui), box-shadow var(--dur-ui);
}
.field input::placeholder{color:var(--muted)}
.field input:focus-visible{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field input[aria-invalid="true"]{border-color:var(--error); box-shadow:0 0 0 3px color-mix(in oklch,var(--error) 16%, transparent)}
.err{color:var(--error); font-size:var(--text-sm); font-weight:600; margin:0}
.err[hidden]{display:none}
.radios{border:0; padding:0; margin:0 0 var(--space-4); display:grid; gap:8px}
.radios legend{font-weight:700; font-size:1rem; margin-bottom:4px}
.radio{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); cursor:pointer; font-size:1rem; background:var(--raised); transition:border-color var(--dur-ui), background-color var(--dur-ui)}
.radio:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.radio input{accent-color:var(--accent); width:18px; height:18px; flex:none}
.form-actions{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; margin-top:var(--space-2)}
.form-actions .btn-primary{flex:1}
.form-note{font-size:var(--text-sm); color:var(--muted); margin-top:22px}
.form-done{margin-top:var(--space-4); padding:14px 16px; border-radius:var(--r-sm); background:color-mix(in oklch,var(--ok) 12%, #fff); color:var(--ok); font-weight:700; border:1px solid color-mix(in oklch,var(--ok) 30%, #fff)}
.form-done[hidden]{display:none}

/* ---------- results panel ---------- */
.split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,72px); align-items:center}
.report{background:var(--raised); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden}
.report-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; background:var(--ink); color:var(--on-ink-strong); font-family:var(--font-display); font-weight:700}
.report-head span{font-family:var(--font-mono); font-size:.8125rem; color:var(--on-ink); font-weight:400}
.report-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 22px; border-top:1px solid var(--border)}
.report-row:first-of-type{border-top:0}
.report .rk{flex:1; min-width:0; font-weight:700}
.report .rk small{display:block; font-weight:400; color:var(--muted); font-size:var(--text-sm); margin-top:2px}
.report .rv{flex:none; white-space:nowrap; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent-ink); font-size:1.05rem}
.report .rv .todo{color:var(--muted)}
.report-foot{padding:14px 22px; background:var(--surface); border-top:1px solid var(--border); font-size:var(--text-sm); color:var(--muted)}

/* ---------- problem ---------- */
.problem-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start}
#problem .eyebrow{margin-bottom:8px}
#problem .lead{font-size:clamp(1.1875rem,1.5vw,1.3125rem);margin-top:8px}
.term{background:var(--raised); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-soft); overflow:hidden}
.term-head{padding:14px 18px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.term-row{display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--border); font-size:1rem}
.term-row:first-of-type{border-top:0}
.term-row .mk{display:inline-flex; color:var(--error)}
.term-row.yes .mk{color:var(--ok)}
.term-row .tp{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); background:color-mix(in oklch,var(--error) 12%, #fff); color:var(--error); white-space:nowrap}
.term-row.yes .tp{background:color-mix(in oklch,var(--ok) 14%, #fff); color:var(--ok)}

/* ---------- objection bullets ---------- */
.bullets{display:grid; gap:var(--space-5); margin-top:var(--space-2)}
.bullet{display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--space-5); align-items:start; background:var(--raised); border:1px solid var(--border); border-radius:var(--r); padding:clamp(18px,2.7vw,27px)}
.bullet .num{font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--accent); line-height:1; letter-spacing:-.02em}
.bullet h3{margin-bottom:8px}
.bullet p{color:var(--muted); max-width:66ch}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,36px); counter-reset:s}
.steps li{position:relative; padding-top:var(--space-6); border-top:2px solid var(--fg)}
.steps li::before{counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; top:var(--space-4); left:0; font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--accent-2-ink); letter-spacing:.1em}
.steps h3{margin-bottom:8px; font-size:var(--text-h3)}
.steps p{color:var(--muted)}

/* ---------- case study ---------- */
.case-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
.casefile{background:var(--raised); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden}
.cf-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; background:var(--surface); border-bottom:1px solid var(--border)}
.cf-top b{font-family:var(--font-display); font-weight:700}
.cf-top span{font-family:var(--font-mono); font-size:.8125rem; color:var(--muted)}
.cf-grid{display:grid; grid-template-columns:1fr 1fr}
.cf-cell{padding:22px; border-top:1px solid var(--border)}
.cf-cell:nth-child(odd){border-right:1px solid var(--border)}
.cf-cell:nth-child(-n+2){border-top:0}
.cfv{font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:800; font-size:clamp(26px,2.6vw,34px); color:var(--fg); white-space:nowrap}
.cfv .todo{color:var(--muted)}
.cfl{color:var(--muted); font-size:.9rem; margin-top:4px}
.cf-note{padding:14px 22px; background:var(--surface); border-top:1px solid var(--border); font-size:var(--text-sm); color:var(--muted)}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5)}
.qcard{margin:0; background:var(--raised); border:1px solid var(--border); border-radius:var(--r); padding:clamp(20px,2.5vw,28px); display:flex; flex-direction:column; gap:var(--space-4)}
.qcard .tag{align-self:flex-start; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2-ink); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px 10px}
.qcard blockquote{margin:0; font-size:1.0625rem; line-height:1.55; color:var(--fg)}
.qcard cite{font-style:normal; color:var(--muted); font-size:.9rem; margin-top:auto}

/* ---------- pricing band ---------- */
.band{background:var(--ink); color:var(--on-ink-strong); border-radius:var(--r-lg); padding:clamp(24px,4vw,48px); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); gap:clamp(20px,4vw,56px); align-items:center}
.band h2{color:var(--on-ink-strong)}
.band p{color:var(--on-ink)}
.band h2{max-width:26ch}
.fee-chunk{display:block; margin-bottom:14px}
.fee-chunk:first-child{font-weight:700}
.example{margin:20px 0 0; display:grid; gap:0; border-top:1px solid color-mix(in oklch,#fff 18%, transparent)}
.example dt{font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-ink); padding:16px 0 4px}
.example .er{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid color-mix(in oklch,#fff 12%, transparent)}
.example .er:first-of-type{border-top:0}
.example dd{margin:0; font-weight:700}
.example dd:last-child{color:var(--on-ink-strong); font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:15px; white-space:nowrap}
.band .btn-primary{background:var(--raised); color:var(--ink); justify-self:end}
@media (hover:hover) and (pointer:fine){ .band .btn-primary:hover{background:var(--on-ink)} }

.band .btn-primary:active{background:var(--on-ink)}
.band :focus-visible,.footer :focus-visible{outline-color:var(--on-ink-strong)}
.footer-owner{font-size:16px; font-weight:600; margin:16px 0 0}

/* ---------- close ---------- */
.close{text-align:center; max-width:760px; margin-inline:auto}
.close h2{font-size:clamp(2.125rem,4.2vw,3.5rem)}
.close .lead{margin-inline:auto}
.close .btn{margin-top:16px}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:var(--on-ink); padding-block:clamp(48px,7vw,80px) 32px; padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))}
.footer a{color:var(--on-ink)}
.footer .cols{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:var(--space-7)}
.footer h4{color:var(--on-ink-strong); font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:500; margin-bottom:var(--space-4)}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:1rem}
.footer .fword{color:var(--on-ink-strong); font-size:1.5rem}
.footer .todo{color:var(--on-ink)}
.footer .legal{margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid color-mix(in oklch,#fff 14%, transparent); font-size:var(--text-sm); color:var(--on-ink)}

/* ---------- visible sections ---------- */
.js .reveal{opacity:1; transform:none}
.js .reveal.in{opacity:1; transform:none}
.js .reveal-zoom{transform:none}
.js .reveal-zoom.in{transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid, .split, .problem-grid, .case-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy{padding-top:0}
  .hero h1{max-width:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:minmax(0,1fr)}
  .band{grid-template-columns:minmax(0,1fr)}
  .band .btn-primary{justify-self:start}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .bullet{grid-template-columns:minmax(0,1fr); gap:var(--space-3)}
  .bullet .num{font-size:1.6rem}
  .example .er dd:last-child{font-size:15px}
  .footer .cols{grid-template-columns:1fr}
  .report-row{flex-wrap:wrap}
  .head{margin-bottom:24px}
  .split,.problem-grid{gap:20px}
  #proof .lead{margin-top:12px}
  .report-row{padding-block:15px}
  .term-row{display:flex;flex-wrap:wrap;gap:8px;padding-inline:12px}
  .term-row .mk{flex:none;width:20px}
  .term-row .t{flex:1 1 12ch;min-width:0}
  .term-row .tp{max-width:100%;white-space:normal}
  .bullet{padding:14px}
  .bullets{gap:16px}
  .band{padding-block:35px}
  #pricing .lead{margin-top:16px}
}
@media (max-width:360px){
  .hero h1{font-size:2.4375rem;letter-spacing:-.03em}
  #problem .lead{font-size:1.125rem}
  .bullet{padding-block:21px}
  .close h2{font-size:2rem}
  #final-cta .lead{font-size:1.125rem}
}
@media (max-width:520px){
  .sec{padding-block:clamp(44px,11vw,64px)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js .reveal{opacity:1; transform:none}
  .js .reveal-zoom{transform:none}
}

/* Inner-page compositions use the same primitives and content widths. */
.page-head{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,104px);background:var(--surface)}
.page-head h1{max-width:20ch}
.grid-2,.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.card{background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:26px}
.person{text-align:center}
.person p{margin-top:8px}
.muted{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.form-card>small{display:block;margin-top:12px;color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.form-card>h2{font-size:clamp(1.75rem,2.8vw,2.125rem)}
.band>div>p{margin-top:20px;max-width:62ch;line-height:1.5}
.prose{min-width:0}
.steps-vertical li{border-top:0}
.steps-vertical li::before{top:4px}
.reveal.is-pending{opacity:1; transform:none}
.reveal.is-in{opacity:1; transform:none}
.price{table-layout:fixed}
.price td,.price th{overflow-wrap:anywhere}
[hidden]{display:none!important}
.page-head .lead{margin-top:var(--space-5)}
.crumbs{font-size:.875rem;color:var(--muted);margin-bottom:var(--space-5)}
.crumbs a{text-decoration:underline;text-underline-offset:.2em}
.service-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--space-7);align-items:start}
.service-aside{position:sticky;top:96px}
.prose h2{margin:var(--space-7) 0 var(--space-5)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--space-5) 0 var(--space-3)}
.prose p{margin:0 0 var(--space-5);color:var(--muted)}
.prose .todo{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.prose .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.prose .steps li h3{margin-top:0}
.price{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--raised);font-variant-numeric:tabular-nums}
.price th,.price td{text-align:left;padding:var(--space-4);border-bottom:1px solid var(--border);font-size:1rem;vertical-align:top}
.price th{background:var(--surface)}
.price tr:last-child td{border-bottom:0}
.serp{background:var(--raised);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-block:var(--space-5);font-size:1rem}
.serp .q{padding:var(--space-4) var(--space-5);background:var(--surface);border-bottom:1px solid var(--border);font-weight:700}
.serp .res{padding:var(--space-5)}
.serp .res + .res{border-top:1px solid var(--border)}
.serp .lbl{font-size:.8125rem;color:var(--muted);overflow-wrap:anywhere}
.serp .t{color:var(--accent-ink);font-weight:700;margin-block:var(--space-2)}
.serp .d{color:var(--muted)}
.values li{display:block;position:relative;padding-left:var(--space-5)}
.values li::before{content:'✓';position:absolute;left:0;color:var(--accent-2-ink)}
.prose .steps-vertical{grid-template-columns:1fr;margin-block:var(--space-6)}
.steps-vertical li{padding-top:0;padding-left:56px}
.steps-vertical li::after{display:none}
@media(max-width:1000px){.service-layout{grid-template-columns:1fr}.service-aside{position:static}}
@media(max-width:620px){.prose .steps{grid-template-columns:1fr}.price th,.price td{padding:var(--space-3)}}
@media(max-width:620px){.grid-2,.team{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.reveal.is-pending,.reveal.is-in{opacity:1;transform:none;transition:none}}

/* About uses the homepage hero and benefit treatments; overrides stay scoped. */
.about-page .page-head{background:var(--bg)}
.about-page .about-intro{gap:clamp(22px,3vw,48px)}
.about-page .about-values{margin-top:24px}
.about-page .about-values li{padding-block:4px}
.about-page .team{max-width:760px;margin-inline:auto}
.about-page .team .person{padding:32px;border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.about-page .person .muted{color:var(--accent-ink);font-weight:600}
.about-page .head.center{margin-bottom:28px}

@media(max-width:520px){
  .top-inner{flex-wrap:nowrap; gap:12px; min-height:68px}
  .top .wordmark{font-size:20px; white-space:nowrap}
}