/* =========================================================================
   ClearScope Counsel — design system
   Tokens → base → layout → components. Light/dark adaptive. No external deps.
   ========================================================================= */

/* ---- Metric-matched fallback: renders at Söhne Buch's exact dimensions so the
   webfont swap causes no layout shift (CLS). Values match Söhne via Arial. ---- */
@font-face{font-family:"Söhne Fallback";src:local("Arial");ascent-override:84.39%;descent-override:18.99%;line-gap-override:0.00%;size-adjust:123.24%}

/* ---- Söhne: self-hosted, subset to Latin + punctuation used on-site.
   Licensed from Klim Type Foundry (webfont license). Buch 400 body, Kräftig 500
   subheads/buttons/nav, Dreiviertelfett 700 hero display. ---- */
@font-face{font-family:"Söhne";src:url("assets/fonts/Sohne-Buch.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("assets/fonts/Sohne-Kraftig.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("assets/fonts/Sohne-Dreiviertelfett.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Ioskeley Mono: self-hosted, subset to Latin + punctuation used on-site.
   SIL OFL 1.1 licensed (see assets/fonts/OFL.txt). Iosevka build, not Berkeley Mono's files. ---- */
@font-face{font-family:"Ioskeley Mono";src:url("assets/fonts/IoskeleyMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Ioskeley Mono";src:url("assets/fonts/IoskeleyMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Ioskeley Mono";src:url("assets/fonts/IoskeleyMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Ioskeley Mono";src:url("assets/fonts/IoskeleyMono-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---- Tokens (light) ---- */
:root{
  --teal:#1f5c58; --teal-600:#194b48; --teal-200:#cfe3e0;
  --persimmon:#d65a3c; --persimmon-600:#bd4a2f;
  --bg:#f7f4ec; --bg-2:#fbf9f3;
  --surface:#ffffff; --surface-2:#f1ece0; --surface-3:#eae2cd;
  --ink:#1c1b17; --ink-2:#26241d; --muted:#5d5a4f;
  --line:#e4ddcc; --line-strong:#d8cfba;
  --ring:#1f5c58;
  --shadow:0 1px 2px rgba(28,27,23,.05), 0 18px 40px -28px rgba(28,27,23,.35);
  --shadow-lg:0 30px 70px -40px rgba(28,27,23,.5);
  /* ---- Extended elevation scale: layered ambient + direct shadow for a glassier, more crafted depth ---- */
  --shadow-xs:0 1px 2px rgba(28,27,23,.05);
  --shadow-sm:0 1px 2px rgba(28,27,23,.04), 0 8px 18px -12px rgba(28,27,23,.22);
  --shadow-md:0 2px 4px rgba(28,27,23,.05), 0 20px 38px -18px rgba(28,27,23,.28);
  --shadow-xl:0 8px 18px -8px rgba(28,27,23,.16), 0 54px 110px -34px rgba(28,27,23,.45);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.5);

  /* ---- Motion: expo-out for confident settle ---- */
  --ease:cubic-bezier(.16,1,.3,1);

  --font:"Söhne","Söhne Fallback",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Ioskeley Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --step:clamp(.92rem,.88rem + .2vw,1rem);
  --h1:clamp(2.4rem,1.5rem + 4.2vw,4.5rem);
  --h2:clamp(1.7rem,1.3rem + 1.8vw,2.6rem);
  --h3:clamp(1.05rem,1rem + .35vw,1.2rem);
  --lede:clamp(1.05rem,1rem + .45vw,1.25rem);

  --sp:1rem; --radius:18px; --radius-sm:12px; --radius-lg:28px;
  --maxw:1140px;

  /* ---- Decorative texture: a hairline dot lattice + a tileable grain, both opt-in via utility classes ---- */
  --texture-dot:color-mix(in oklab, var(--ink) 9%, transparent);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Tokens (dark) ---- */
[data-theme="dark"]{
  --teal:#5cb6a6; --teal-600:#4aa191; --teal-200:#1e3633;
  --persimmon:#f0876c; --persimmon-600:#e7745a;
  --bg:#131210; --bg-2:#16140f;
  --surface:#1d1b15; --surface-2:#211e17; --surface-3:#26231b;
  --ink:#f4f1e7; --ink-2:#e7e3d6; --muted:#a8a293;
  --line:#2c2a22; --line-strong:#3a382e;
  --ring:#5cb6a6;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 46px -30px rgba(0,0,0,.8);
  --shadow-lg:0 36px 80px -44px rgba(0,0,0,.9);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 10px 22px -12px rgba(0,0,0,.7);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 24px 46px -18px rgba(0,0,0,.75);
  --shadow-xl:0 10px 22px -8px rgba(0,0,0,.5), 0 60px 120px -32px rgba(0,0,0,.92);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --texture-dot:color-mix(in oklab, var(--ink) 13%, transparent);
}
/* No-JS fallback: honor OS preference unless user explicitly chose light. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --teal:#5cb6a6; --teal-600:#4aa191; --teal-200:#1e3633;
    --persimmon:#f0876c; --persimmon-600:#e7745a;
    --bg:#131210; --bg-2:#16140f; --surface:#1d1b15; --surface-2:#211e17; --surface-3:#26231b;
    --ink:#f4f1e7; --ink-2:#e7e3d6; --muted:#a8a293;
    --line:#2c2a22; --line-strong:#3a382e; --ring:#5cb6a6;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 46px -30px rgba(0,0,0,.8);
    --shadow-lg:0 36px 80px -44px rgba(0,0,0,.9);
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 10px 22px -12px rgba(0,0,0,.7);
    --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 24px 46px -18px rgba(0,0,0,.75);
    --shadow-xl:0 10px 22px -8px rgba(0,0,0,.5), 0 60px 120px -32px rgba(0,0,0,.92);
    --shadow-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --texture-dot:color-mix(in oklab, var(--ink) 13%, transparent);
  }
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
/* The header is sticky at top:0, so anything scrolled to the top of the
   viewport lands underneath it — including a control that just took keyboard
   focus, which is WCAG 2.2 SC 2.4.11 Focus Not Obscured. scroll-margin-top on
   [id] only covers fragment targets; scroll-padding-top on the scroll
   container covers focus scrolling too. The header is 72px plus whatever the
   notch adds, and the extra 24px is deliberate breathing room rather than a
   flush fit. */
html{scroll-behavior:smooth;
  scroll-padding-top:calc(72px + env(safe-area-inset-top) + 24px)}
body{
  margin:0;font-family:var(--font);font-size:var(--step);line-height:1.65;
  color:var(--ink);background:
    radial-gradient(1100px 480px at 88% -8%, color-mix(in oklab,var(--teal) 12%, transparent), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .3s ease,color .3s ease;
  position:relative;
}
/* Whole-site grain: a single tiled SVG turbulence tile, blended over everything at near-zero opacity.
   Cheap (rasterized once at 140px, then repeated) and gives flat digital color a tactile, print-like finish. */
body::before{
  content:"";position:fixed;inset:0;z-index:2147483647;pointer-events:none;
  background-image:var(--noise);background-size:140px 140px;
  opacity:.03;mix-blend-mode:overlay;
}
[data-theme="dark"] body::before{opacity:.05}
@media print{body::before{display:none}}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;margin:0;color:var(--ink);font-weight:500}
h1{font-size:var(--h1);font-weight:700;letter-spacing:-.03em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);font-weight:500;letter-spacing:-.01em}
p{margin:0;color:var(--ink-2)}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px}
::selection{background:var(--teal);color:#fff}

/* ---- Decorative texture utilities: opt-in, used on hero/CTA/footer bands ---- */
.bg-dot{position:relative;background-image:radial-gradient(var(--texture-dot) 1.4px, transparent 1.4px);
  background-size:26px 26px}
.bg-dot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--bg) 92%)}
.glow-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);z-index:0;opacity:.55}
.glow-orb--teal{background:radial-gradient(circle at 40% 40%, color-mix(in oklab,var(--teal) 55%,transparent), transparent 70%)}
.glow-orb--persimmon{background:radial-gradient(circle at 40% 40%, color-mix(in oklab,var(--persimmon) 45%,transparent), transparent 70%)}
[data-theme="dark"] .glow-orb{opacity:.4}

.skip-link{position:fixed;top:-60px;left:1rem;z-index:200;background:var(--teal);color:#fff;
  padding:.6rem 1rem;border-radius:10px;font-weight:500;transition:top .2s}
.skip-link:focus{top:1rem}

.muted{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal)}
.lede{font-size:var(--lede);color:var(--ink-2);max-width:54ch}

/* ---- Layout ---- */
.container{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.section{padding-block:clamp(3.4rem,2.4rem + 4vw,6rem)}
.section-tight{padding-block:clamp(2rem,1.4rem + 2vw,3rem)}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-lg{display:flex;flex-direction:column;gap:2.4rem}
.cluster{display:flex;flex-wrap:wrap;gap:.8rem}
.cluster-end{justify-content:flex-start}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end}
.grid{display:grid;gap:1.2rem}
/* Grid items default to min-width:auto, so a track can never shrink below its
   content's min-content width. An <input> carries a browser-default intrinsic
   width, which on a 360px phone held the contact form's track wider than its
   own container and pushed the page into horizontal scroll.
   Scoped to the form deliberately: applying min-width:0 to every grid item
   lets other tracks shrink under content that is legitimately nowrap (the
   pricing-band rows), which trades a 2px overflow for a 67px one. */
.form-grid{min-width:0}
input,select,textarea{min-width:0;max-width:100%}
/* An email address or URL is one unbreakable token, and a grid track cannot
   shrink below it — on a 360px phone contact@clearscopecounsel.com alone held
   the contact column wider than its container. `anywhere` (not `break-word`)
   is the one that actually lowers min-content width. */
a[href^="mailto"],a[href^="tel"],a[href^="http"]{overflow-wrap:anywhere}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
[id]{scroll-margin-top:96px}

/* ---- Header / nav ---- */
/* padding-top, not margin: the blurred background has to run up behind the
   status bar, while the nav row itself sits below it. Pairs with
   viewport-fit=cover in the viewport meta — without that, every env() here
   resolves to 0 and iOS letterboxes the page instead. */
.site-header{position:sticky;top:0;z-index:100;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in oklab,var(--bg) 72%, transparent);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  box-shadow:inset 0 -1px 0 var(--line), 0 12px 30px -26px rgba(0,0,0,.4);
  transition:box-shadow .3s var(--ease)}
.nav-wrap{display:flex;align-items:center;gap:1rem;height:72px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
/* ---- Brand logo (ClearScope Counsel) ---- */
:root{ --logo-teal:#13504c; --logo-orange:#d4692a; --logo-orange-ink:#a8430f; }
[data-theme="dark"]{ --logo-teal:#5cb6a6; --logo-orange:#e88a52; --logo-orange-ink:#e88a52; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --logo-teal:#5cb6a6; --logo-orange:#e88a52; --logo-orange-ink:#e88a52; }}
.cs-tile{display:inline-grid;place-items:center;width:38px;height:38px;flex:0 0 auto}
.cs-mark{width:100%;height:100%;display:block}
.cs-mark-teal{fill:var(--logo-teal)}
.cs-mark-orange{fill:var(--logo-orange)}
.cs-word{display:flex;flex-direction:column;line-height:1;gap:.18rem}
.cs-name{font-family:var(--font);font-weight:500;font-size:1.12rem;letter-spacing:-.02em;color:var(--logo-teal)}
.cs-name span{color:var(--logo-teal)}
.cs-sub{font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--logo-orange-ink);padding-left:.05em}
@media (max-width:440px){ .cs-name{font-size:1rem} .cs-tile{width:34px;height:34px} }
.brand-tile{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--teal);color:#fff;font-family:var(--mono);font-weight:700;font-size:1.05rem}
.brand-word span{color:var(--teal)}
.nav-links{display:flex;gap:.4rem;margin-inline:auto}
.nav-links a{padding:.5rem .8rem;border-radius:10px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav-links a:hover{background:var(--surface-2);color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.header-cta{white-space:nowrap}

/* ---- Header sizing, measured rather than guessed ----
   The bar needs, side by side: brand 137px + five nav items 500px (26px of
   gaps) + the CTA + 32px of wrap gaps. With the full "Book a Free
   Consultation" label that is ~931px inside a container of min(100vw - 40px,
   1140px), so the full bar stops fitting at about 970px — below which the nav
   items and the CTA label both used to wrap, and the pill spilled past the
   viewport. Three stages instead:

     >= 1000px   full nav, full CTA label
     861-999px   full nav, compact CTA label, tighter nav padding (~781px)
     <= 860px    hamburger + the sticky bottom bar carries the CTA

   The stage boundaries sit ~40px clear of each stage's measured requirement,
   so a longer nav label or a wider font fallback does not immediately break
   the bar. */
@media (max-width:999px){
  .cta-full{display:none}
}
@media (min-width:1000px){
  .cta-compact{display:none}
}
@media (max-width:999px) and (min-width:861px){
  .nav-wrap{gap:.6rem}
  .nav-links{gap:.15rem}
  .nav-links a{padding:.5rem .5rem}
}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:1.05rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.icon-btn:hover{border-color:var(--line-strong);box-shadow:var(--shadow-xs);transform:translateY(-1px)}
.menu-toggle{display:none;width:42px;height:42px;border-radius:11px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:1.2rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.3rem;border-radius:13px;font-weight:500;font-size:.95rem;
  letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),background-color .25s var(--ease),
  box-shadow .35s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.btn-primary{background:linear-gradient(180deg,color-mix(in oklab,var(--teal) 92%,#fff 8%),var(--teal));
  color:#fff;box-shadow:var(--shadow-inset),var(--shadow-sm)}
.btn-primary:hover{background:linear-gradient(180deg,color-mix(in oklab,var(--teal-600) 90%,#fff 10%),var(--teal-600));
  box-shadow:var(--shadow-inset),var(--shadow-md)}
[data-theme="dark"] .btn-primary{color:#06201d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#06201d}}
.btn-accent{background:linear-gradient(180deg,color-mix(in oklab,var(--persimmon-600) 90%,#fff 10%),var(--persimmon-600));
  color:#fff;box-shadow:var(--shadow-inset),var(--shadow-sm)}
.btn-accent:hover{background:linear-gradient(180deg,#a8442c,#9e3d27);box-shadow:var(--shadow-inset),var(--shadow-md)}
[data-theme="dark"] .btn-accent{color:#2a0d06}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);box-shadow:var(--shadow-sm)}
.btn-lg{padding:1rem 1.6rem;font-size:1.02rem;border-radius:15px}

.trust-strip{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.4rem}
.pill{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.02em;
  padding:.34rem .7rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);
  box-shadow:var(--shadow-xs);transition:border-color .2s var(--ease),color .2s var(--ease)}

/* ---- Hero ---- */
.hero{padding-block:clamp(2.8rem,1.7rem + 4.5vw,5.6rem);position:relative;isolation:isolate;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,1rem + 2vw,3rem);align-items:start;
  position:relative;z-index:1}
.hero-copy{display:flex;flex-direction:column;gap:1.3rem}
.hero h1{max-width:17ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.3rem}

.banner-photo{margin:-.5rem 0;line-height:0;border-block:1px solid var(--line)}
.banner-photo img{display:block;width:100%;height:auto}

/* Hero "browser" mock: a curated product-panel preview, not a literal screenshot */
.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);overflow:hidden;position:relative}
.hero-card-inner{display:flex;flex-direction:column;gap:1rem;padding:1.15rem}
.browser-top{display:flex;align-items:center;justify-content:space-between;
  padding:.2rem .3rem .7rem;border-bottom:1px solid var(--line)}
.dot-group{display:flex;gap:.4rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.dot:nth-child(1){background:var(--persimmon)}
.dot:nth-child(2){background:#e3b341}
.dot:nth-child(3){background:var(--teal)}
.kicker{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.01em}
.mock-panel{display:flex;flex-direction:column;gap:.85rem}
.mock-card{border-radius:var(--radius);padding:1.15rem;border:1px solid var(--line);background:var(--surface-2);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.mock-card.featured{background:linear-gradient(155deg,color-mix(in oklab,var(--teal) 92%,#fff 8%),var(--teal-600));
  border:none;color:#fff;box-shadow:var(--shadow-inset),0 16px 32px -18px color-mix(in oklab,var(--teal) 60%,transparent);
  position:relative;overflow:hidden}
.mock-card.featured::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:var(--noise);background-size:140px 140px;mix-blend-mode:overlay}
.mock-card.featured p,.mock-card.featured .mock-title{color:#fff}
.mock-card.featured p{opacity:.9;font-size:.92rem}
.mock-card .mock-title{font-weight:500;letter-spacing:-.01em;line-height:1.12;margin:0}
.mock-card.featured .mock-title{font-size:var(--h3);opacity:1}
.mock-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-bottom:.5rem;position:relative}
.service-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.mini-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.75rem .85rem;display:flex;flex-direction:column;gap:.18rem;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.mini-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--teal) 45%,var(--line));
  box-shadow:var(--shadow-sm);background:var(--surface)}
.mini-card strong{font-size:.9rem}
.mini-card span{font-size:.78rem;color:var(--muted);line-height:1.4}
.mini-card--wide{grid-column:1/-1}
.quote-panel{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--line);padding-top:.85rem}
.quote-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.84rem}
.quote-row span{font-family:var(--mono);color:var(--muted);font-size:.76rem}
.quote-row strong{color:var(--teal);text-align:right}
@media (max-width:960px){.hero-card{max-width:560px;margin-inline:auto}}

/* ---- Cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow-sm);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.card-link{display:flex;flex-direction:column;justify-content:space-between;gap:1.3rem}
.card-link:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--teal) 55%,var(--line));box-shadow:var(--shadow-md)}
.service-card .number{font-family:var(--mono);font-size:.78rem;color:var(--teal);font-weight:600}
/* Service cards carry differentiated CTAs, so they flex like the old card-link: content up top, CTA pinned bottom. */
.service-card{display:flex;flex-direction:column;justify-content:space-between;gap:1.3rem}
.service-card:hover{border-color:color-mix(in oklab,var(--teal) 40%,var(--line));box-shadow:var(--shadow-md);transform:translateY(-3px)}
.service-card h3{margin:.5rem 0 .5rem}
.service-card h3 a{color:var(--ink)}
.service-card h3 a:hover{color:var(--teal);text-decoration:underline}
.svc-cta{display:flex;flex-direction:column;gap:.55rem}
.svc-cta .btn{width:100%}
.svc-cta-note{font-size:.78rem;color:var(--muted);text-align:center}
.svc-cta-alt{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--teal);line-height:1.45}
.svc-cta-alt:hover{text-decoration:underline}
.service-card p,.resource-card p{color:var(--muted);font-size:.92rem}
/* A standalone .arrow link is only ~16px tall on its own, under the 24px
   minimum tap target. Padding inside an inline-flex box grows the hit area
   without moving the text off its baseline or adding layout height. */
.arrow{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--teal);
  display:inline-flex;align-items:center;min-height:24px;padding-block:.25rem}
.card-link:hover .arrow{text-decoration:underline}
.tag-list{display:flex;gap:.4rem;margin-bottom:.6rem}
.tag{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  padding:.25rem .55rem;border-radius:999px;background:var(--teal-200);color:var(--teal);font-weight:600}
[data-theme="dark"] .tag{color:var(--teal)}
.tag-new{background:var(--persimmon-600);color:#fff;animation:tagPulse 2.4s ease-in-out infinite}
@keyframes tagPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--persimmon) 55%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in oklab,var(--persimmon) 0%,transparent)}
}
.resource-card h3{margin-bottom:.45rem;font-size:1.02rem}

/* ---- Feature band ---- */
.feature-band{--band-pad:clamp(1.7rem,1.3rem + 1.6vw,2.8rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--band-pad);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
/* .container and .feature-band land on the same element. The landscape
   safe-area rule below sets .container{padding-inline}, which at equal
   specificity and later in the file was flattening the band's side padding to
   zero and pushing its text against the border. Raising specificity restores
   it, and max() still honours a larger safe-area inset in landscape. */
.container.feature-band{
  padding-inline:max(var(--band-pad),env(safe-area-inset-left)) max(var(--band-pad),env(safe-area-inset-right))}
.feature-band::after{content:"";position:absolute;inset:auto -10% -60% auto;width:380px;height:380px;
  background:radial-gradient(circle,color-mix(in oklab,var(--teal) 16%,transparent),transparent 70%);pointer-events:none}
.band-grid{align-items:center;gap:2rem;position:relative;z-index:1}
.band-cta .feature-band,.band-cta{background:linear-gradient(155deg,var(--teal),var(--teal-600));box-shadow:var(--shadow-xl)}
.band-cta h2,.band-cta p,.band-cta .eyebrow{color:#fff}
.band-cta .eyebrow{opacity:.85}
.band-cta::after{background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.band-cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:var(--noise);background-size:140px 140px;mix-blend-mode:overlay}

/* A quiet expanding ring on the final CTA — enough motion to draw the eye without a novelty animation. */
.pulse-ring{position:relative;display:inline-flex;border-radius:13px}
.pulse-ring::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1.5px solid color-mix(in oklab,var(--persimmon) 60%,transparent);
  animation:pulseRing 2.8s var(--ease) infinite;pointer-events:none}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.65}
  70%,100%{transform:scale(1.12);opacity:0}
}
@media(prefers-reduced-motion:reduce){.pulse-ring::before{display:none}}

/* ---- Compare (old vs modern) ---- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.compare-card{border-radius:var(--radius);padding:1.6rem;border:1px solid var(--line)}
.compare-card header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.compare-tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.compare-old{background:var(--surface-2)}
.compare-old .compare-tag{color:var(--muted)}
.compare-old h3{color:var(--ink-2)}
.compare-new{background:var(--surface);border-color:var(--teal);box-shadow:var(--shadow-md),0 0 0 1px color-mix(in oklab,var(--teal) 25%,transparent)}
.compare-new .compare-tag{color:var(--teal)}
.compare-list li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;color:var(--ink-2);font-size:.94rem}
.compare-list li::before{position:absolute;left:0;top:.02rem;width:1.3rem;height:1.3rem;
  display:grid;place-items:center;border-radius:50%;font-size:.78rem;font-weight:500}
.compare-list--old li::before{content:"×";background:color-mix(in oklab,var(--persimmon) 18%,transparent);color:var(--persimmon)}
.compare-list--new li::before{content:"✓";background:var(--teal-200);color:var(--teal)}
[data-theme="dark"] .compare-list--new li::before{color:var(--teal)}
.compare-list em{font-style:italic;color:var(--ink)}
.compare-foot{margin-top:1.6rem;font-size:var(--lede);max-width:70ch}
.compare-foot strong{color:var(--teal)}
.compare-note{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.8rem;color:var(--muted)}

/* ---- Process ---- */
.process{display:flex;flex-direction:column;gap:.9rem;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.3rem 1.2rem 3.6rem}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:1.1rem;top:1.2rem;font-family:var(--mono);font-size:.82rem;font-weight:700;
  color:#fff;background:var(--teal);width:1.7rem;height:1.7rem;border-radius:8px;display:grid;place-items:center}
.step h3{margin-bottom:.25rem}
.step p{color:var(--muted);font-size:.92rem}
.sticky-note{position:sticky;top:90px}

/* ---- Footer ---- */
.site-footer{margin-top:2rem;border-top:1px solid var(--line);background:var(--bg-2)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;
  padding-block:clamp(2.2rem,1.6rem + 2vw,3.4rem)}
.footer-grid h3{font-size:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:.9rem}
.footer-links{display:flex;flex-direction:column;gap:.55rem}
.footer-links a{color:var(--ink-2);font-size:.92rem}
.footer-links a:hover{color:var(--teal)}
.fine-print{font-size:.78rem;color:var(--muted);line-height:1.5}
/* Inside fine print the link colour alone is not a strong enough cue against
   the surrounding text, so the link carries an underline as well — and the
   padded inline-flex box brings it up to the 24px tap-target minimum. */
.fine-print a{text-decoration:underline;text-underline-offset:.18em;
  display:inline-flex;align-items:center;min-height:24px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  padding-block:1.2rem;border-top:1px solid var(--line)}

/* ---- Mobile sticky CTA ---- */
.mobile-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.6rem;
  padding:.7rem max(1.25rem,env(safe-area-inset-left)) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:inset 0 1px 0 var(--line), 0 -12px 30px -20px rgba(0,0,0,.35)}
.mobile-sticky .btn{flex:1}

/* ---- Reveal ----
   Hidden state is gated behind html.js (set first thing in app.js): with JS
   off or failed, nothing on the site is ever invisible. In-viewport elements
   are revealed on load by app.js; only below-fold elements wait for scroll. */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].is-visible{opacity:1;transform:none}
/* Safety net: if app.js never runs (blocked/failed) on a page that set html.js
   inline, everything auto-reveals after 2.4s instead of staying hidden. */
html.js:not(.js-reveal-live) [data-reveal]{animation:revealAuto .7s var(--ease) 2.4s forwards}
html.js.js-reveal-live [data-reveal]{animation:none}
@keyframes revealAuto{to{opacity:1;transform:none}}

/* ---- Responsive ---- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;align-items:start;gap:1.2rem}
  .sticky-note{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* Header collapse. Kept separate from the 720px content breakpoint below:
   the bar runs out of room well before the grids do, and moving both together
   would reflow every two-column layout on tablets for no reason. */
@media (max-width:860px){
  .nav-links{position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:.2rem;
    margin:0;padding:1rem 1.25rem 1.4rem;background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .site-header[data-menu-open] .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.7rem .6rem}
  .menu-toggle{display:grid;place-items:center}
  /* the CTA leaves the bar here, so the sticky bar has to arrive with it —
     otherwise there is a band of widths with no call to action at all */
  .header-cta{display:none}
  .mobile-sticky{display:flex}
  /* clears the sticky bar, which is itself taller by the home-indicator inset */
  main{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
}
/* Landscape on a notched phone puts the cutout beside the content, not above
   it, so the vertical insets go to 0 and the horizontal ones do the work. */
@media (orientation:landscape){
  .container{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
}
@media (max-width:720px){
  .grid-2,.grid-3,.band-grid,.compare{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:440px){
  .grid-4{grid-template-columns:1fr}
  .service-mini-grid{grid-template-columns:1fr}
}

/* ---- Motion / print safety ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .btn:hover,.card-link:hover{transform:none}
}


/* ---- Compatibility for secondary pages from the first build ---- */
.nav-wrap:not(.container){width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.page-hero{padding-block:clamp(2.6rem,1.6rem + 4vw,5rem)}
.page-hero .container{display:flex;flex-direction:column;gap:1rem}
.page-hero h1{font-size:var(--h1);max-width:14ch}
.breadcrumb{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.breadcrumb a{color:var(--teal);font-weight:500}
.lift{box-shadow:var(--shadow)}
.card p{color:var(--muted)}
.check-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}
.check-list li{position:relative;padding-left:1.8rem;color:var(--ink-2)}
.check-list li::before{content:"✓";position:absolute;left:0;top:.05rem;width:1.2rem;height:1.2rem;display:grid;place-items:center;border-radius:999px;background:var(--teal-200);color:var(--teal);font-size:.75rem;font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-field{display:flex;flex-direction:column;gap:.45rem}
.form-field.full{grid-column:1 / -1}
.form-field label{font-weight:500;color:var(--ink);font-size:.9rem}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;outline:none}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in oklab,var(--teal) 18%,transparent)}
.checkbox-row{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.7rem}.checkbox-row input{width:auto;margin-top:.25rem}
.form-status{min-height:1.4rem;color:var(--teal);font-weight:500;font-size:.9rem}.form-status.error{color:var(--persimmon)}
.faq-list{display:flex;flex-direction:column;gap:.7rem}.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;background:transparent;color:var(--ink);border:0;font:inherit;font-weight:500;cursor:pointer;text-align:left}.faq-panel{display:none;padding:0 1.2rem 1rem}.faq-item.is-open .faq-panel{display:block}.faq-panel p{color:var(--muted)}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}.page-hero h1{max-width:none}}

/* ---- Narrow column (used by legal + simple pages) ---- */
.narrow{width:min(100% - 2.5rem,760px);margin-inline:auto}

/* ---- Legal / long-form prose (privacy, terms) ---- */
.legal{max-width:72ch}
.legal .legal-updated{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.legal h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:1rem;padding-top:0;border-top:0}
.legal h3{margin-top:1.6rem;color:var(--ink)}
.legal p{color:var(--ink-2);margin-top:.85rem}
.legal ul:not(.check-list):not(.fee-list):not(.dl-list){list-style:disc;margin:.85rem 0 0;padding-left:1.4rem}
.legal ul:not(.check-list):not(.fee-list):not(.dl-list) li{margin-bottom:.5rem;color:var(--ink-2);padding-left:.2rem}
/* the global reset clears list-style, so an ordered list in a guide would lose
   its numbers — which is the whole point when the list is a sequence of steps */
.legal ol{list-style:decimal;margin:.85rem 0 0;padding-left:1.5rem}
.legal ol li{margin-bottom:.5rem;color:var(--ink-2);padding-left:.2rem}
.legal .check-list{margin-top:1rem;padding-left:0;list-style:none}
.legal .check-list li{margin-bottom:0;padding-left:1.9rem}

/* Download list. The badge marks a file download at a glance so the forms read
   as files rather than prose; --ext marks a link that leaves the site instead.
   The link rule is not decoration: these five point at /downloads/, so they miss
   the .legal a[href^="http"] rule below that colours every other link in a guide,
   and without it they render as plain body text with no affordance at all. */
.legal ul.dl-list{list-style:none;margin:.9rem 0 0;padding-left:0}
.legal ul.dl-list li{position:relative;margin-bottom:.75rem;padding-left:2.1rem;color:var(--ink-2)}
.legal ul.dl-list li::before{content:"↓";position:absolute;left:0;top:.1rem;
  width:1.45rem;height:1.45rem;display:grid;place-items:center;border-radius:999px;
  background:var(--teal-200);color:var(--teal);font-size:.85rem;font-weight:700;line-height:1}
.legal ul.dl-list--ext li::before{content:"↗";background:transparent;color:var(--muted);font-weight:600}
.legal .dl-list a{color:var(--teal);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.legal .dl-heading{margin-top:1.6rem;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legal a[href^="mailto"],.legal a[href^="http"]{color:var(--teal);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.legal address{font-style:normal;margin-top:.85rem;color:var(--ink-2);line-height:1.7}
.legal .legal-callout{margin-top:1.2rem;padding:1.1rem 1.2rem;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface-2)}
.legal .legal-callout p{margin-top:0}
.legal .legal-callout--warn{border-color:color-mix(in oklab,var(--persimmon) 45%,var(--line-strong))}
.legal .callout-label{display:block;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--teal);margin-bottom:.35rem}
.legal .legal-callout--warn .callout-label{color:var(--persimmon)}
.legal .legal-callout--tab{position:relative;padding:1.55rem 1.35rem 1.3rem;
  border:1px solid var(--line-strong);border-left-width:1px;border-radius:var(--radius-sm);
  background:var(--surface-2)}
.legal .legal-callout--tab .callout-label{position:absolute;top:0;left:1.05rem;
  display:flex;align-items:center;gap:.5rem;transform:translateY(-50%);margin:0;padding:.35rem .65rem;
  border:1px solid color-mix(in srgb,var(--persimmon) 35%,transparent);border-radius:999px;
  background:var(--bg);color:var(--persimmon)}
.legal .legal-callout--tab .callout-label::before{content:"!";display:grid;place-items:center;
  width:1.55rem;height:1.55rem;margin:-.12rem 0 -.12rem -.25rem;border-radius:50%;
  background:var(--persimmon);color:var(--bg);font-family:var(--font);font-size:.85rem;
  font-weight:500;letter-spacing:0}
.legal-ai-discovery{position:relative;display:flex;flex-direction:column;gap:1rem;margin-top:1.6rem;
  padding:clamp(1.25rem,1rem + 1.2vw,1.75rem);overflow:hidden;border:1px solid
  color-mix(in oklab,var(--persimmon) 58%,var(--line));border-radius:20px;
  background:linear-gradient(145deg,color-mix(in oklab,var(--teal) 10%,var(--surface)),
  color-mix(in oklab,var(--persimmon) 8%,var(--surface)));box-shadow:var(--shadow)}
.legal-ai-discovery::after{content:"";position:absolute;right:-5rem;top:-5rem;width:12rem;height:12rem;
  border-radius:50%;background:color-mix(in oklab,var(--persimmon) 12%,transparent);pointer-events:none}
.legal .legal-ai-discovery h2{position:relative;margin:0;padding:0;border:0;font-size:clamp(1.45rem,1.2rem + 1.25vw,2rem);
  max-width:20ch}
.legal .legal-ai-discovery p{position:relative;margin:0;max-width:62ch}
.legal-ai-discovery-labels{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.legal-ai-discovery .btn{position:relative}
@media(max-width:560px){
  .legal-ai-discovery .btn{width:100%}
}

/* ---- Resource guide tables ---- */
/* The wrapper scrolls horizontally, so it carries tabindex="0" in the markup:
   without it a keyboard user cannot reach the overflow at all. Being focusable
   means it must also show focus, and the outline is inset because an outside
   ring would be clipped by the wrapper's own overflow. */
.table-wrap{overflow-x:auto;margin-top:1.2rem;border:1px solid var(--line);border-radius:var(--radius-sm)}
.table-wrap:focus-visible{outline:3px solid var(--ring);outline-offset:-3px}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:580px}
.data-table th,.data-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.data-table thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal);background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.data-table th[scope="row"]{font-weight:500;color:var(--ink);white-space:nowrap}
.data-table tbody tr:last-child td,.data-table tbody tr:last-child th{border-bottom:0}
.data-table td{color:var(--ink-2)}

/* ---- Resource guide meta ---- */
.resource-meta{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);line-height:1.6}
.legal .fee-list{list-style:none;padding:0;margin-top:1rem;display:grid;gap:.55rem}
.legal .fee-list li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .9rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font-size:.9rem}
.legal .fee-list li span:last-child{font-family:var(--mono);color:var(--teal);font-weight:600;white-space:nowrap}

/* ---- Founder note (about) ---- */
.founder-card{padding:1.1rem}
.founder-portrait{position:relative;display:block;width:100%;max-width:340px;margin:0;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2)}
.founder-portrait::before{content:"";display:block;padding-top:100%}
.founder-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border:0}
.founder-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.3rem}
.founder-head .founder-portrait{flex:0 0 auto}
.founder-logos{display:flex;flex-direction:column;gap:.6rem;flex:1;min-width:230px}
.founder-logos-label{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Filled logo panel beside the portrait: two marks up top, the wide wordmark spanning below. */
.founder-logos-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
/* Transparent brand marks sit on white chips so black wordmarks stay legible in both themes. */
.founder-logos-row img{display:block;width:100%;height:150px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem;box-shadow:var(--shadow)}
.founder-logos-row img:nth-child(3){grid-column:1 / -1;height:128px}
@media (max-width:520px){.founder-logos-row img,.founder-logos-row img:nth-child(3){height:112px}}
.founder-name{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);line-height:1.1}
.founder-role{font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--persimmon)}
.founder-card p{color:var(--ink-2)}
.cred-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}
.cred-list li{position:relative;padding-left:1.7rem;color:var(--ink-2);font-size:.92rem}
.cred-list li::before{content:"✓";position:absolute;left:0;top:.05rem;width:1.2rem;height:1.2rem;
  display:grid;place-items:center;border-radius:999px;background:var(--teal-200);color:var(--teal);font-size:.72rem;font-weight:500}
[data-theme="dark"] .cred-list li::before{color:var(--teal)}

/* Founder office band */
.founder-band .band-grid{align-items:center}
.founder-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;
  border-radius:var(--radius);border:1px solid var(--line)}
.founder-quote{font-size:var(--lede);color:var(--ink);font-weight:500;line-height:1.4}
@media(max-width:720px){
  .founder-band .band-grid{grid-template-columns:1fr}
  .founder-photo{max-width:420px}
}

/* ---- Fee disclaimer (flat-fees) ---- */
.fee-disclaimer{border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--surface);padding:clamp(1.2rem,1rem + 1vw,1.8rem)}
.fee-disclaimer .eyebrow{color:var(--muted)}
.fee-disclaimer h3{margin:.5rem 0 .6rem}
.fee-disclaimer p{color:var(--muted);font-size:.86rem;line-height:1.6;margin-top:.6rem}

/* ---- Flat-fee example packages ---- */
.pkg-card{display:flex;flex-direction:column;gap:.45rem}
.pkg-card .tag-list{margin-bottom:.2rem}
.pkg-price{font-family:var(--mono);font-weight:600;color:var(--muted);font-size:.92rem;margin:.1rem 0 .2rem}
.pkg-price strong{display:block;font-size:1.5rem;color:var(--teal);font-weight:500;letter-spacing:-.01em}
/* The price is a block, so any trailing clause has to be its own block too —
   left inline it began the next line on a comma. */
.pkg-terms{display:block;margin-top:.25rem;font-weight:500;color:var(--muted);letter-spacing:.01em}
.pkg-card .check-list{flex:1;margin-top:.2rem}
.pkg-card .arrow{margin-top:.6rem}
.pkg-amount{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:.1rem}
.pkg-was{font-size:1.05rem;color:var(--muted);font-weight:500;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--muted)}
.pkg-amount .pkg-now{font-size:1.5rem;color:var(--persimmon);font-weight:500;letter-spacing:-.01em}
/* 11.2px bold is below the large-text threshold, so it answers to 4.5:1.
   --persimmon on white measures 3.90; --persimmon-600 measures 5.02. */
.pkg-off{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--persimmon-600);margin-top:.1rem}
.pkg-note{font-size:.82rem;color:var(--muted);max-width:70ch}

/* ---- New-client offer band ---- */
.offer-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;
  background:#bd4a2f;color:#fff;border-radius:26px;padding:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);box-shadow:var(--shadow)}
.offer-band-main{max-width:60ch}
.offer-band h2{color:#fff;font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);margin:0}
.offer-band p{color:#fff;margin-top:.4rem}
.offer-badge{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  /* The pill carried white text on a white-tinted overlay, which lightened the
     persimmon band underneath and left 3.42:1. Tinting with black instead
     recesses the pill rather than raising it and measures 6.58:1, so the pill
     still reads as distinct without fighting its own label. */
  text-transform:uppercase;background:rgba(0,0,0,.16);padding:.3rem .7rem;border-radius:999px;margin-bottom:.6rem}
.offer-band .btn{background:#fff;color:#bd4a2f;border-color:#fff;flex:0 0 auto}
.offer-band .btn:hover{background:#fff;color:#a23e28}
.offer-fine{margin-top:.9rem;font-size:.78rem;color:var(--muted);line-height:1.6;max-width:82ch}

/* ---- "From first question to fixed quote" flow viz ---- */
.flow-viz{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md);padding:clamp(1.4rem,1.1rem + 2vw,2.6rem)}
.flow-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(1.2rem,1rem + 1.6vw,2.4rem);align-items:center}
.flow-questions{display:grid;gap:.9rem}
.flow-q{padding:.85rem 1.05rem;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow);font-weight:500;color:var(--ink-2);font-size:.96rem}
.flow-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;min-height:150px}
.flow-track::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--teal) 0 50%,var(--teal-200) 50% 100%);background-size:200% 100%;background-position:0 0;transform:translateY(-50%);z-index:0}
.flow-step{position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem}
.flow-num{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--teal);color:#fff;font-weight:500;box-shadow:0 12px 24px color-mix(in oklab,var(--teal) 30%,transparent)}
[data-theme="dark"] .flow-num{color:#06201d}
.flow-step-label{font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.03em;text-transform:uppercase;color:var(--teal-600);text-align:center}
.flow-quote{padding:1.3rem;border-radius:20px;background:var(--surface);border:2px solid color-mix(in oklab,var(--teal) 22%,var(--line));box-shadow:var(--shadow)}
.flow-quote h3{color:var(--teal-600);font-size:clamp(1.2rem,1rem + 1vw,1.55rem);margin:0 0 .55rem}
.flow-quote > p{color:var(--muted);font-weight:500;margin:0 0 .55rem;font-size:.82rem}
.flow-quote ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.flow-quote li{display:flex;gap:.55rem;align-items:center;font-weight:500;font-size:.9rem;color:var(--ink-2)}
.flow-quote li .check{color:var(--teal);font-weight:500}
.flow-note{margin:1.3rem 0 0;font-family:var(--mono);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;color:var(--teal-600)}
.flow-viz.anim-ready .flow-q,
.flow-viz.anim-ready .flow-step,
.flow-viz.anim-ready .flow-quote,
.flow-viz.anim-ready .flow-quote li,
.flow-viz.anim-ready .flow-note{opacity:0}
.flow-viz.anim-ready .flow-track::before{background-position:100% 0}
.flow-viz.is-playing .flow-q{animation:flowSlide .8s ease forwards}
.flow-viz.is-playing .flow-q:nth-child(1){animation-delay:.3s}
.flow-viz.is-playing .flow-q:nth-child(2){animation-delay:.85s}
.flow-viz.is-playing .flow-q:nth-child(3){animation-delay:1.4s}
.flow-viz.is-playing .flow-track::before{animation:flowLine 3.2s ease-in-out 1.9s forwards}
.flow-viz.is-playing .flow-step{animation:flowPop .7s ease forwards}
.flow-viz.is-playing .flow-step:nth-child(1){animation-delay:2s}
.flow-viz.is-playing .flow-step:nth-child(2){animation-delay:2.5s}
.flow-viz.is-playing .flow-step:nth-child(3){animation-delay:3s}
.flow-viz.is-playing .flow-step:nth-child(4){animation-delay:3.5s}
.flow-viz.is-playing .flow-quote{animation:flowReveal .9s ease 4.2s forwards}
.flow-viz.is-playing .flow-quote li{animation:flowCheck .5s ease forwards}
.flow-viz.is-playing .flow-quote li:nth-child(1){animation-delay:4.9s}
.flow-viz.is-playing .flow-quote li:nth-child(2){animation-delay:5.15s}
.flow-viz.is-playing .flow-quote li:nth-child(3){animation-delay:5.4s}
.flow-viz.is-playing .flow-quote li:nth-child(4){animation-delay:5.65s}
.flow-viz.is-playing .flow-note{animation:flowFade .8s ease 6s forwards}
@keyframes flowSlide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes flowPop{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes flowLine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes flowReveal{from{opacity:0;transform:translateX(22px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes flowCheck{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes flowFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:860px){.flow-grid{grid-template-columns:1fr}.flow-track{min-height:auto;padding:.6rem 0}}

/* ---- Homepage process journey (illustrated, animated) ---- */
.journey{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:stretch}
.journey-art{position:relative;display:flex;flex-direction:column;justify-content:center}
.journey-svg{display:block;width:100%;height:auto;overflow:visible}
.journey-intro{position:absolute;left:0;bottom:4%;max-width:52%}
.journey-intro .eyebrow{margin-bottom:.35rem}
.journey-intro h2{margin:.1rem 0 .55rem}
.journey-intro .lede{margin:0;max-width:32ch}
.journey-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.journey-step{display:flex;gap:.85rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.05rem 1.2rem;box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.journey-step:hover{border-color:color-mix(in oklab,var(--teal) 40%,var(--line));box-shadow:var(--shadow-sm),0 0 0 1px color-mix(in oklab,var(--teal) 18%,transparent);transform:translateX(3px)}
.journey-num{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(155deg,color-mix(in oklab,var(--teal) 90%,#fff 10%),var(--teal-600));color:#fff;font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.02em;box-shadow:var(--shadow-xs)}
[data-theme="dark"] .journey-num{color:#06201d}
.journey-step h3{margin:.05rem 0 .25rem;font-size:1.06rem}
.journey-step p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
/* SVG elements */
.journey-path{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.journey-arrow{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.journey-dot{fill:var(--teal)}
.node-core{fill:var(--teal);stroke:var(--surface);stroke-width:3}
.node-ring{fill:none;stroke:var(--teal);stroke-width:2;opacity:.32}
.node-tick{stroke-width:2.4;stroke-linecap:round}
.tick-teal{stroke:var(--teal)}
.tick-persimmon{stroke:var(--persimmon)}
.journey-label{font-family:var(--mono);font-size:13px;font-weight:600;fill:var(--teal-600);text-anchor:middle;letter-spacing:.04em}
.ico-line{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ico-accent{fill:var(--persimmon)}
.ico-accent-line{fill:none;stroke:var(--persimmon);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ico-fill-bg{fill:var(--surface)}
.decor-line{fill:none;stroke:var(--line-strong);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.decor-cloud{fill:color-mix(in oklab,var(--line) 72%,var(--bg))}
/* Restraint over whimsy: the hand-drawn clouds/spark ticks read closer to a startup doodle than
   counsel's-office precision, so they're dropped. The path + numbered nodes carry the metaphor fine alone. */
.decor-cloud,.decor-line{display:none}
/* animation gating (JS adds anim-ready then is-playing; without JS everything shows) */
.journey.anim-ready .journey-path{stroke-dasharray:1;stroke-dashoffset:1}
.journey.anim-ready .journey-node,
.journey.anim-ready .journey-arrow,
.journey.anim-ready .journey-dot,
.journey.anim-ready .decor,
.journey.anim-ready .journey-step{opacity:0}
.journey.is-playing .journey-path{animation:journeyDraw 2.4s ease forwards}
.journey.is-playing .decor{animation:journeyFade 1s ease .2s forwards}
.journey.is-playing .journey-node-1{animation:journeyFade .55s ease .55s forwards}
.journey.is-playing .journey-node-2{animation:journeyFade .55s ease 1.1s forwards}
.journey.is-playing .journey-node-3{animation:journeyFade .55s ease 1.65s forwards}
.journey.is-playing .journey-node-4{animation:journeyFade .55s ease 2.15s forwards}
.journey.is-playing .journey-arrow{animation:journeyFade .5s ease 2.45s forwards}
.journey.is-playing .journey-dot{animation:journeyFade .5s ease 2.6s forwards}
.journey.is-playing .journey-step{animation:journeyStep .6s ease forwards}
.journey.is-playing .journey-step:nth-child(1){animation-delay:.6s}
.journey.is-playing .journey-step:nth-child(2){animation-delay:.95s}
.journey.is-playing .journey-step:nth-child(3){animation-delay:1.3s}
.journey.is-playing .journey-step:nth-child(4){animation-delay:1.65s}
@keyframes journeyDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes journeyFade{from{opacity:0}to{opacity:1}}
@keyframes journeyStep{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:900px){
  .journey{grid-template-columns:1fr;gap:1.4rem}
  .journey-intro{position:static;order:-1;max-width:none;margin:0 0 .2rem}
  .journey-intro .lede{max-width:48ch}
  .journey-svg{max-width:520px;margin:0 auto}
}

/* =========================================================================
   Flat-fee hero visual (old way vs. better way)
   ========================================================================= */
.flat-fee-hero{padding-block:clamp(3.5rem,2.5rem + 4vw,6.5rem);overflow:hidden}
.flat-fee-hero-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(440px,1.1fr);align-items:center;gap:clamp(2rem,4vw,5rem)}
.flat-fee-copy{max-width:58ch}
.flat-fee-copy h1{max-width:none;font-size:clamp(2.2rem,1.5rem + 2.6vw,3.2rem);line-height:1.04}
.flat-fee-visual{margin:0;position:relative;isolation:isolate}
.flat-fee-visual::before{content:"";position:absolute;inset:9% 5% 16%;z-index:-1;border-radius:999px;background:radial-gradient(circle at 52% 50%,color-mix(in oklab,var(--teal) 13%,transparent),transparent 68%);filter:blur(18px);opacity:.9;pointer-events:none}
.flat-fee-visual-frame{position:relative;display:grid;place-items:center}
.flat-fee-visual-frame img{width:min(100%,760px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(28,27,23,0.10)) drop-shadow(0 48px 60px rgba(28,27,23,0.08));transform:translateY(0)}
.flat-fee-caption{margin-top:clamp(0.6rem,1.2vw,1rem);text-align:center;font-family:var(--mono);font-size:clamp(0.86rem,0.78rem + 0.35vw,1rem);font-weight:600;letter-spacing:.02em;color:var(--teal)}
.flat-fee-caption span,.flat-fee-caption strong{display:inline-block;margin-left:.45em}
.flat-fee-caption strong{position:relative;color:var(--teal);font-weight:500}
.flat-fee-caption strong::after{content:"";position:absolute;left:.08em;right:.08em;bottom:-.18em;height:2px;border-radius:999px;background:var(--persimmon);transform:rotate(-1deg);opacity:.9}
.flat-fee-visual.is-visible .flat-fee-visual-frame img{animation:flatFeeFloatIn 700ms cubic-bezier(.2,.7,.2,1) both}
@keyframes flatFeeFloatIn{from{opacity:0;transform:translateY(14px) scale(0.985)}to{opacity:1;transform:translateY(0) scale(1)}}
[data-theme="dark"] .flat-fee-visual-frame img{filter:drop-shadow(0 18px 30px rgba(0,0,0,0.35)) drop-shadow(0 50px 70px rgba(0,0,0,0.35))}
[data-theme="dark"] .flat-fee-caption strong{color:var(--teal)}
@media (max-width:980px){
  .flat-fee-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .flat-fee-copy{max-width:64ch}
  .flat-fee-copy h1{max-width:none}
  .flat-fee-visual{max-width:760px;margin-inline:auto}
}
@media (max-width:560px){
  .flat-fee-hero{padding-block:3rem 4rem}
  .flat-fee-visual-frame img{width:min(112%,620px);margin-inline:-6%}
  .flat-fee-caption{max-width:28ch;margin-inline:auto;line-height:1.5}
  .flat-fee-caption span,.flat-fee-caption strong{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .flat-fee-visual.is-visible .flat-fee-visual-frame img{animation:none}
}

/* ---- Footer contact block ---- */
.footer-contact{margin-top:.2rem;font-style:normal;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.footer-contact a{color:var(--ink-2)}
.footer-contact a:hover{color:var(--teal)}

/* ---- Founder letter ---- */
.founder-letter h2{max-width:24ch}
.founder-letter .letter{gap:1.05rem;margin-top:.4rem}
.founder-letter .letter p{font-size:1.06rem;line-height:1.78;color:var(--ink-2);max-width:68ch}
.letter-sign{margin-top:.8rem;font-weight:500;color:var(--ink)}
.letter-sign span{display:block;margin-top:.15rem;font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--persimmon)}
.signature-img{display:block;width:auto;max-width:280px;height:auto;margin:.1rem 0 .35rem}
[data-theme="dark"] .signature-img{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .signature-img{filter:invert(1)}}

/* ---- Who we serve (about) ---- */
.who-card{gap:1.1rem}
.who-top{display:block}
.who-stat{display:block;font-family:var(--mono);font-weight:700;line-height:1;letter-spacing:-.01em;
  color:var(--persimmon);font-size:clamp(1.9rem,1.4rem + 1.7vw,2.6rem)}
.who-stat-label{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.who-card h3{margin:1rem 0 .45rem}
.who-card p{color:var(--muted);font-size:.93rem}
.who-serve .fine-print{max-width:70ch}

/* ---- Billable vs Flat Fee animated chart (about) ---- */
.fee-chart{margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  padding:clamp(1.2rem,1rem + 1.4vw,2rem);box-shadow:var(--shadow-md)}
.fee-chart-title{font-weight:500;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);letter-spacing:-.01em;color:var(--ink);margin-bottom:1.3rem}
.fee-chart-panels{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.fee-panel{border:1px solid var(--line);border-radius:18px;background:var(--bg-2);padding:1rem 1.1rem 1.1rem}
.fee-panel-head{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.76rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:.5rem}
.fee-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.fee-dot--bill{background:var(--persimmon)}
.fee-dot--flat{background:var(--teal)}
.fee-plot{position:relative}
.fee-svg{width:100%;height:auto;display:block;overflow:visible}
.fee-grid line{stroke:var(--line-strong);stroke-width:1.5}
.fee-line{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.fee-line--bill{stroke:var(--persimmon)}
.fee-line--flat{stroke:var(--teal)}
.fee-ticks circle{fill:var(--persimmon);stroke:var(--surface);stroke-width:2;transform-box:fill-box;transform-origin:center}
.fee-scope{fill:color-mix(in oklab,var(--teal) 8%,transparent);stroke:var(--teal);stroke-width:2;stroke-dasharray:6 6}
.fee-scope-item{font-family:var(--mono);font-size:9px;font-weight:600;fill:var(--teal)}
.fee-axis{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.fee-chip{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono);
  font-size:.66rem;font-weight:600;padding:.24rem .5rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);color:var(--ink);pointer-events:none}
.fee-chip--bill{color:var(--persimmon);border-color:color-mix(in oklab,var(--persimmon) 40%,var(--line))}
.fee-chip--flat{color:var(--teal);border-color:color-mix(in oklab,var(--teal) 40%,var(--line))}
.fee-flag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);
  font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--teal);
  background:var(--surface);padding:.22rem .55rem;border-radius:8px;
  border:1px solid color-mix(in oklab,var(--teal) 35%,var(--line));pointer-events:none}
.fee-cap{margin-top:.55rem;font-size:.85rem;color:var(--muted)}
.fee-chart-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.2rem}
.fee-chart-note{font-size:.92rem;color:var(--ink-2);font-weight:500;max-width:62ch}
.fee-replay{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.76rem;font-weight:700;
  cursor:pointer;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:.45rem .8rem}
.fee-replay:hover{border-color:var(--teal);color:var(--teal)}
.fee-chart-read{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:-.6rem 0 1.1rem}
.fee-plot-single{position:relative;max-width:700px;margin:0 auto}
.fee-end{font-family:var(--mono);font-size:14px;font-weight:700}
.fee-end--bill{fill:var(--persimmon)}
.fee-end--flat{fill:var(--teal)}
.fee-legend{display:grid;gap:.55rem;margin-top:1.2rem}
.fee-legend-item{display:flex;align-items:baseline;gap:.6rem;margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.55}
.fee-legend-item .fee-dot{position:relative;top:1px}
.fee-legend-item strong{color:var(--ink)}
.fee-outro{margin-top:1.7rem;display:flex;flex-direction:column;gap:1rem;max-width:70ch}

/* Initial (hidden) state — applied by JS only, so the chart is fully visible without JS */
.fee-chart.anim-ready .fee-line{stroke-dasharray:1;stroke-dashoffset:1}
.fee-chart.anim-ready .fee-ticks circle,
.fee-chart.anim-ready .fee-chip,
.fee-chart.anim-ready .fee-flag,
.fee-chart.anim-ready .fee-scope,
.fee-chart.anim-ready .fee-scope-item{opacity:0}

/* Playing */
.fee-chart.is-playing .fee-line{animation:feeDraw 2.4s ease forwards}
.fee-chart.is-playing .fee-line--flat{animation-duration:1.6s}
.fee-chart.is-playing .fee-scope{animation:feeFade .5s ease .55s forwards}
.fee-chart.is-playing .fee-scope-item{animation:feeFade .5s ease .8s forwards}
.fee-chart.is-playing .fee-flag{animation:feeFade .5s ease .45s forwards}
.fee-chart.is-playing .fee-ticks circle{animation:feePop .4s ease forwards}
.fee-chart.is-playing .fee-ticks circle:nth-child(1){animation-delay:.65s}
.fee-chart.is-playing .fee-ticks circle:nth-child(2){animation-delay:1s}
.fee-chart.is-playing .fee-ticks circle:nth-child(3){animation-delay:1.35s}
.fee-chart.is-playing .fee-ticks circle:nth-child(4){animation-delay:1.7s}
.fee-chart.is-playing .fee-ticks circle:nth-child(5){animation-delay:2.05s}
.fee-chart.is-playing .fee-chip{animation:feeRise .45s ease forwards}
.fee-chart.is-playing .fee-chip--bill[data-i="0"]{animation-delay:.65s}
.fee-chart.is-playing .fee-chip--bill[data-i="1"]{animation-delay:.95s}
.fee-chart.is-playing .fee-chip--bill[data-i="2"]{animation-delay:1.25s}
.fee-chart.is-playing .fee-chip--bill[data-i="3"]{animation-delay:1.55s}
.fee-chart.is-playing .fee-chip--flat[data-i="0"]{animation-delay:.9s}
.fee-chart.is-playing .fee-chip--flat[data-i="1"]{animation-delay:1.15s}
.fee-chart.is-playing .fee-chip--flat[data-i="2"]{animation-delay:1.4s}

@keyframes feeDraw{to{stroke-dashoffset:0}}
@keyframes feeFade{from{opacity:0}to{opacity:1}}
@keyframes feePop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes feeRise{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}

@media(max-width:720px){.fee-chart-panels{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fee-replay{display:none}}

/* ---- About hero: animated click cursor + two-column layout ---- */
.about-hero-grid{display:grid;grid-template-columns:.7fr 1.1fr;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center}
.click-anim{position:relative;width:300px;height:300px;max-width:100%;margin-inline:auto}
.click-arrow{position:absolute;left:88px;top:97px;z-index:2;transform-origin:32px 13px;animation:clickPress 1.9s ease-in-out infinite;filter:drop-shadow(0 4px 7px rgba(28,27,23,.2))}
.click-arrow path{fill:var(--teal);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.click-ring{position:absolute;left:120px;top:110px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--persimmon);opacity:0;animation:clickRing 1.9s ease-out infinite}
.click-ring--late{animation-delay:.95s;border-color:var(--teal)}
@keyframes clickPress{0%,100%{transform:scale(1)}7%{transform:scale(.88)}16%{transform:scale(1)}}
@keyframes clickRing{0%{transform:scale(.3);opacity:.75}70%{opacity:0}100%{transform:scale(3.2);opacity:0}}
@media(max-width:760px){.about-hero-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.click-arrow{animation:none}.click-ring{display:none}}

/* =========================================================================
   2026-07 refresh: quiet theme toggle, scannable cards, price anchors,
   illustrated page heroes, Missouri collage, guide capture
   ========================================================================= */

/* ---- Theme toggle: a quiet utility at the outer edge of the header ---- */
.theme-btn{background:transparent;border-color:transparent;color:var(--muted)}
.theme-btn:hover{color:var(--ink);border-color:var(--line);background:var(--surface)}
.theme-icon{width:19px;height:19px}
.theme-icon--sun{display:none}
[data-theme="dark"] .theme-icon--moon{display:none}
[data-theme="dark"] .theme-icon--sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-icon--moon{display:none}
  :root:not([data-theme="light"]) .theme-icon--sun{display:block}
}

/* ---- Compact bullet lists inside cards (service grid, resource cards) ---- */
.svc-points{display:flex;flex-direction:column;gap:.34rem;margin-top:.55rem}
.svc-points li{position:relative;padding-left:1.05rem;color:var(--muted);font-size:.88rem;line-height:1.45}
.svc-points li::before{content:"";position:absolute;left:0;top:.5em;width:.4rem;height:.4rem;border-radius:2px;background:var(--teal)}
.svc-from{display:inline-block;margin-top:.65rem;font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--persimmon)}
/* Plain-English gloss under a rule-number heading; tightened up under the h3 inside a .stack. */
.svc-gloss{margin-top:-.5rem;font-size:.85rem;color:var(--muted);font-weight:500}

/* ---- Price anchor tiles (homepage pricing band) ---- */
.price-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem}
.price-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.2rem;box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.price-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--teal) 35%,var(--line))}
.price-tile--offer{border-color:color-mix(in oklab,var(--persimmon) 30%,var(--line))}
.price-tile .pt-label{font-weight:500;font-size:.9rem;color:var(--ink)}
.price-tile .pt-price{font-family:var(--mono);font-weight:700;color:var(--teal);font-size:1.02rem}
.price-tile--offer .pt-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .55rem}
.price-tile--offer .pt-price-was{color:var(--muted);font-size:.78rem;text-decoration:line-through;text-decoration-thickness:1.5px}
.price-tile--offer .pt-price-now{color:var(--persimmon);font-size:1.02rem}
.price-tile .pt-offer{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--persimmon)}
.price-tile .pt-note{font-size:.76rem;color:var(--muted);line-height:1.45}

/* ---- Pricing bands (flat-fees) ---- */
.band-list{display:grid;gap:.55rem;margin-top:.4rem}
.band-list li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.6rem .95rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:.92rem}
.band-list li span:first-child{color:var(--ink-2);font-weight:500}
.band-list li span:last-child{font-family:var(--mono);color:var(--teal);font-weight:700;white-space:nowrap}
.band-list .band-price{display:grid;justify-items:end;gap:.08rem;white-space:normal;line-height:1.35;text-align:right}
.band-list .band-was{color:var(--muted);font-size:.76rem;text-decoration-thickness:1.5px}
/* small bold persimmon on white measures 3.89:1; --persimmon-600 is 5.02:1 */
.band-list .band-now{color:var(--persimmon-600);font-size:.9rem}
.band-list .band-off{color:var(--persimmon-600);font-size:.62rem;letter-spacing:.03em;text-transform:uppercase}
@media(max-width:520px){.band-list li{flex-direction:column;align-items:flex-start}.band-list .band-price{justify-items:start;text-align:left}}

/* ---- Illustrated page heroes ---- */
/* .page-hero .container.page-hero-grid outranks the generic .page-hero .container flex rule. */
.page-hero .container.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(1.6rem,1rem + 2.4vw,3.4rem);align-items:center}
.page-hero-grid h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.15rem);max-width:none}
.page-hero-grid .page-hero-copy{display:flex;flex-direction:column;gap:1rem}
.scene-frame{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden}
.scene-top{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.scene-frame svg,.scene-frame .scene-art{display:block;width:100%;height:auto}
.scene-cap{padding:.75rem 1.1rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.74rem;color:var(--muted)}
@media (max-width:960px){
  .page-hero .container.page-hero-grid{grid-template-columns:1fr}
  .page-hero-grid .scene-frame{width:100%;max-width:560px}
}

/* ---- Regulatory signal field ----
   A Figma-authored particle construction becomes atmosphere, not a card. */
.rw-hero{
  position:relative;isolation:isolate;overflow:clip;
  min-height:clamp(500px,36vw,560px);
  padding-block:clamp(3.5rem,2.6rem + 2.5vw,5rem) clamp(2.5rem,2rem + 1.5vw,4rem);
  background:
    radial-gradient(circle at 83% 48%,rgba(208,186,161,.2),transparent 31%),
    radial-gradient(circle at 100% 0,rgba(31,92,88,.055),transparent 26%),
    var(--bg);
}
.rw-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0 38%,color-mix(in oklab,var(--bg) 88%,transparent) 51%,transparent 72%);
}
.rw-hero .container.page-hero-grid{position:relative;z-index:2;display:block}
.rw-hero .page-hero-copy{max-width:min(54rem,62vw)}
.rw-hero h1{font-size:clamp(3rem,5.1vw,5.25rem);line-height:1.01;letter-spacing:-.035em;max-width:12ch}
.rw-hero .lede{max-width:61ch}
.rw-particle-background{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
@media(max-width:760px){
  .rw-hero{min-height:760px;padding-block:3.2rem 6rem}
  .rw-hero::after{background:linear-gradient(180deg,var(--bg) 0 52%,color-mix(in oklab,var(--bg) 82%,transparent) 66%,transparent 88%)}
  .rw-hero .page-hero-copy{max-width:none}
  .rw-hero h1{font-size:clamp(2.7rem,13vw,4rem);max-width:10ch}
}

/* ---- Missouri cities collage (about) ---- */
.mo-collage{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;align-items:start}
.mo-tile{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.mo-tile svg{display:block;width:100%;height:auto}
/* Full scene, no cropping: natural aspect ratio (height:auto also neutralizes the HTML height attribute). */
.mo-tile img{display:block;width:100%;height:auto}
.mo-tile--wide{grid-column:1/-1}

/* ---- Editorial photos (guides, resources) ---- */
.guide-photo{margin:0}
.guide-photo img{display:block;width:100%;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.guide-photo figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.hero-photo{display:block;width:100%;max-width:440px;height:auto;justify-self:end;align-self:center;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
@media (max-width:960px){.hero-photo{justify-self:start}}
.mo-tile figcaption{display:flex;justify-content:space-between;gap:.8rem;padding:.65rem 1rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.mo-tile figcaption strong{color:var(--ink);font-weight:500;letter-spacing:.02em}
@media (max-width:640px){.mo-collage{grid-template-columns:1fr}}

/* ---- CTA route note + pull quote ---- */
.cta-note{font-size:.8rem;color:var(--muted);line-height:1.55;max-width:62ch}
.cta-note strong{color:var(--ink-2)}
.pull-quote{margin:1.5rem 0 0;padding:1.1rem 1.4rem;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-sm);font-size:var(--lede);font-weight:500;color:var(--ink);max-width:62ch;box-shadow:var(--shadow)}
.pull-quote strong{color:var(--teal)}
.pull-quote .pq-note{display:block;margin-top:.55rem;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--muted)}
/* Offset variant: dark outline + hard persimmon shadow (color-mix keeps it theme-safe); note gets an "AI" chip. */
.pull-quote--offset{align-self:stretch;width:100%;margin:1.5rem 0 0;padding:1.35rem 1.7rem;max-width:none;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.pull-quote--offset .pq-note{display:flex;align-items:center;gap:.55rem}
.pull-quote--offset .pq-note::before{content:"AI";flex:none;font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.03em;line-height:1;color:var(--bg);background:var(--teal);padding:.28rem .42rem;border-radius:6px}

/* ---- Inline email capture (guide pack) ---- */
.capture-row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:stretch}
.capture-row input{flex:1;min-width:200px}
.capture-row .btn{flex:0 0 auto}

/* ---- Credibility strip (service pages) ---- */
.cred-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem}
.cred-strip .cred-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.95rem 1.05rem;box-shadow:var(--shadow)}
.cred-strip .cred-item strong{display:block;font-size:.92rem;color:var(--ink);margin-bottom:.2rem}
.cred-strip .cred-item span{font-size:.82rem;color:var(--muted);line-height:1.5}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important}

.tracker-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.filter-pill{cursor:pointer;font-weight:500;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.filter-pill[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
[data-theme="dark"] .filter-pill[aria-pressed="true"]{color:#06201d}
.tracker-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.tracker-card{display:flex;flex-direction:column;gap:.7rem;padding:1.6rem}
.tracker-card h3{margin-top:.2rem}
.tracker-date{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:-.3rem}
.tracker-card p{color:var(--ink-2);font-size:.94rem}
.tracker-action-label{margin-top:.2rem;margin-bottom:-.3rem}
.tracker-actions{display:flex;flex-direction:column;gap:.35rem;padding-left:1.2rem;list-style:decimal;color:var(--ink-2);font-size:.94rem}
.tracker-sifma{font-size:.86rem;color:var(--muted);border-left:2px solid var(--line-strong);padding-left:.7rem}
.tracker-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--line)}
.tracker-source{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.tracker-source:hover{color:var(--teal)}
.tracker-cta{font-weight:500}
.tag-track{background:var(--surface-2);color:var(--muted)}
.status-comment-open,.status-proposed{background:color-mix(in oklab,var(--persimmon) 18%,var(--surface));color:var(--persimmon-600)}
[data-theme="dark"] .status-comment-open,[data-theme="dark"] .status-proposed{color:var(--persimmon)}
.tracker-loading{color:var(--muted);grid-column:1/-1}
.tracker-embed .tracker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){
  .tracker-grid,.tracker-embed .tracker-grid{grid-template-columns:1fr}
}