/* Goroshi LLC — shared design system v2
   Apple white/black/minimal — locked 2026-05-10, expanded 2026-05-11
   See portal.md rule #1 for token spec. --max kept at 980px per lock.
*/

:root{
  --bg:#ffffff;
  --section-tint:#f5f5f7;                 /* WHY: empirical apple.com/business hero bg — adds visual variety without breaking white/black lock */
  --ink:#1d1d1f;
  --ink-2:#424245;                        /* WHY: Apple gray ladder step 2 */
  --muted:#6e6e73;                        /* gray ladder step 3 */
  --muted-2:#86868b;                      /* WHY: gray ladder step 4 — for tertiary text */
  --faint:#a1a1a6;                        /* gray ladder step 5 */
  --faint-2:#d2d2d7;                      /* WHY: gray ladder step 6 — for dividers under hairline */
  --hairline-soft:rgba(0,0,0,0.04);       /* WHY: softest hairline — Apple uses for subtle dividers */
  --hairline:rgba(0,0,0,0.08);
  --hairline-strong:rgba(0,0,0,0.16);
  --hairline-emph:rgba(0,0,0,0.24);       /* WHY: strongest hairline — for emphasis borders */
  --link:#0066cc;
  --accent-warning:#ff3b30;
  --accent-success:#34c759;
  --max:980px;
  --max-bleed:1280px;
  --content:720px;
  --rhythm:clamp(64px,9vw,128px);
  /* Apple radii ladder — every shape snaps to one of these */
  --r-chip:8px;                           /* small chips / pills */
  --r-btn:12px;                           /* buttons (legacy; pill .btn uses 999px) */
  --r-card:18px;                          /* cards */
  --r-tile:24px;                          /* hero tiles */
  --r-feature:32px;                       /* full-bleed feature blocks */
  /* Depth ladder — Apple prefers hairline-borders at rest, shadow on hover */
  --elev-1:0 1px 2px rgba(0,0,0,0.04);
  --elev-2:0 8px 24px rgba(0,0,0,0.06);
  --elev-3:0 12px 40px rgba(0,0,0,0.08);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:rgba(0,102,204,0.15);color:var(--ink)}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.47;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ─── links ─── */
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ─── focus ─── */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--link);
  outline-offset:3px;
  border-radius:2px;
}

/* ─── skip-link ─── */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{
  position:fixed;left:16px;top:16px;width:auto;height:auto;
  padding:8px 12px;background:var(--ink);color:#fff;border-radius:6px;
  z-index:1000;
}

/* ─── layout ─── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--content);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--max-bleed);margin:0 auto;padding:0 24px}    /* WHY: for grid/stat sections that should breathe on ultra-wide */

/* ─── sticky header ─── */
header{
  position:sticky;top:0;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
  z-index:10;
}
nav{display:flex;align-items:center;justify-content:space-between;height:52px}
.wordmark{font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.portal{font-size:14px;color:var(--ink);font-weight:400}
.portal:hover{color:var(--link);text-decoration:none}

/* ─── sections + vertical rhythm ─── */
main{display:block}
section{padding:var(--rhythm) 0}
section + section{border-top:1px solid var(--hairline)}

/* ─── hero ─── */
.hero{padding:calc(var(--rhythm) * 0.9) 0 calc(var(--rhythm) * 0.7)}
.hero h1{
  font-size:clamp(40px,6vw,96px);
  line-height:1.05;
  letter-spacing:-0.015em;            /* WHY: measured apple.com 96px = -1.44px = -0.015em (not -0.025) */
  font-weight:600;
  margin:0 0 24px;
  color:var(--ink);
}
.hero p,.hero p.subtitle,.hero .subtitle{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.4;
  color:var(--muted);
  max-width:680px;
  margin:0;
  font-weight:400;
}

/* ─── eyebrow ─── */
.eyebrow{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.08em;              /* WHY: 0.08em ≈ +0.009em normalized across cap-height — matches Apple measured */
  color:var(--muted);
  margin:0 0 16px;
  font-weight:500;
}

/* ─── h1 / h2 / h3 default tier ─── */
h1,h2,h3{color:var(--ink)}
h2{
  font-size:clamp(28px,4vw,56px);
  line-height:1.1;
  letter-spacing:-0.015em;            /* WHY: Apple uses -0.015em across the 40-96px range */
  font-weight:600;
  margin:0 0 16px;
  max-width:760px;
}
h3{
  font-size:22px;
  line-height:1.25;
  letter-spacing:-0.01em;
  font-weight:600;
  margin:0 0 12px;
}

/* ─── lede + body prose ─── */
.lede{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.45;
  color:var(--muted);
  max-width:680px;
  margin:0 0 32px;
}
.body p,p.body{
  margin:0 0 20px;
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  max-width:720px;
}
.body p.muted,p.muted{color:var(--muted)}

/* ─── CTA arrow link ─── */
.cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:500;
  color:var(--link);
  padding:14px 0;
}
.cta:hover{text-decoration:underline}
.cta::after{
  content:"\2192";
  font-size:16px;
  transition:transform .2s ease;
}
.cta:hover::after{transform:translateX(4px)}

/* ─── 3-up stat grid ─── */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin:0 0 16px;
}
.stat .label{
  font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.08em;font-weight:500;margin:0 0 10px;
}
.stat .val{
  font-size:clamp(32px,3.6vw,48px);font-weight:600;letter-spacing:-0.025em;
  line-height:1.05;font-variant-numeric:tabular-nums;margin:0 0 10px;color:var(--ink);
}
.stat .sub{font-size:15px;color:var(--muted);line-height:1.45;margin:0}

/* ─── inline code ─── */
code{
  font-family:var(--mono);
  font-size:0.9em;
  background:rgba(0,0,0,0.04);
  padding:2px 6px;
  border-radius:4px;
}

/* ─── tables (Apple hairline style) ─── */
.tbl{width:100%;border-collapse:collapse;margin:24px 0 0;font-size:16px}
.tbl th,.tbl td{padding:14px 0;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.tbl thead th{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:500;border-bottom:1px solid var(--hairline-strong);padding-bottom:14px}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right}

/* ─── three-up columns (index) ─── */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.col p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}

/* ─── footer ─── */
footer{
  border-top:1px solid var(--hairline);
  padding:40px 0 56px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.footer-grid ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:24px;
}
.footer-grid a{color:var(--muted)}
.footer-grid a:hover{color:var(--ink);text-decoration:none}
.copyright{margin:0}

/* ─── view transitions ─── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:0.2s}

/* ─── mobile breakpoint (single canonical) ─── */
@media (max-width:768px){
  .wrap,.wrap-narrow{padding:0 20px}
  nav{height:48px}
  .grid3{grid-template-columns:1fr;gap:40px}
  .cols{grid-template-columns:1fr;gap:40px}
  .footer-grid{flex-direction:column;gap:20px}
  .footer-grid ul{gap:20px}
}

/* ─── ultra-wide breakpoints (1920+ / 2560+ / 3840+ / 5K-6K) ─────────────
   WHY: portal.md rule 1 locks max content width at 980px for legibility.
   On a 6K 52" display that's ~16% of horizontal pixels — the body column
   stays Apple-correct but the HEADLINE typography looks tiny because the
   clamps cap at desktop values (96px hero / 56px h2 / 128px rhythm).
   This block scales typography + section breathing room UP on huge
   viewports without violating the 980px content lock. Body type is held
   to ~17px because Apple-tier copy stays legible, doesn't balloon.
*/
@media (min-width:1920px){
  :root{
    --max:1100px;                            /* FHD+ — text column stays legible */
    --max-bleed:1600px;                      /* grids expand */
    --rhythm:clamp(96px,6vw,140px);          /* tighter than before to avoid mega-gaps */
  }
  /* Hero fills the viewport on big screens. WHY not flex column: flex item
     with `margin: 0 auto` + default align-items:normal collapses to content
     width instead of stretching to max-width. Stayed-bitten on 5K test.
     Block layout with padding does the same vertical-center via padding
     symmetry, and the .wrap inside respects its max-width cleanly. */
  .hero{min-height:78vh;padding-top:14vh;padding-bottom:6vh;display:block}
  .hero .wrap.wide{width:100%}
  .hero h1{font-size:clamp(72px,5.5vw,128px);letter-spacing:-0.015em}    /* WHY: Apple 96px measured -0.015em */
  .hero p,.hero .subtitle{font-size:clamp(20px,1.3vw,26px)}
  h2{font-size:clamp(40px,3vw,80px);letter-spacing:-0.015em}            /* WHY: Apple 80px measured -1.2px = -0.015em */
  h3{font-size:26px}
  /* Promote .wrap.wide + auto-detect grids via :has() to the wider bleed. */
  .wrap.wide,
  .wrap:has(> .cols),
  .wrap:has(> .grid3),
  .wrap:has(> .live-grid){max-width:var(--max-bleed)}
  .cols,.grid3,.live-grid{gap:64px}
  /* Hero stat row — adds visual density so hero doesn't read as 3 words on empty page */
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;
              margin:64px 0 0;max-width:var(--max-bleed);
              border-top:1px solid var(--hairline);padding-top:48px}
  .hero-stats .num{display:block;font-size:clamp(64px,5vw,96px);font-weight:600;
                   letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
  .hero-stats .lbl{display:block;font-size:16px;color:var(--muted);margin-top:12px;
                   letter-spacing:0.02em}
}
@media (min-width:2560px){
  :root{
    --max:1200px;                            /* QHD+ */
    --max-bleed:1800px;                      /* grids stretch wider on QHD */
    --rhythm:clamp(120px,6vw,180px);         /* not 240px — too much vertical air */
  }
  .hero h1{font-size:clamp(96px,5vw,160px);letter-spacing:-0.015em}     /* WHY: locked -0.015em across all sizes per Apple measured */
  .hero p,.hero .subtitle{font-size:clamp(22px,1.2vw,32px)}
  h2{font-size:clamp(48px,2.6vw,96px);letter-spacing:-0.015em;max-width:1400px}
  h3{font-size:30px}
  body{font-size:17px}                       /* QHD = 17px body, not 18 — readable, not bulky */
  .cols,.grid3,.live-grid{gap:72px}
  .col p,.stat .sub{font-size:17px;line-height:1.55}
}
@media (min-width:3840px){
  /* 4K and 6K territory. Apple sites use ~180-220px hero h1 + 2000-2400px grid
     containers + denser typography across the whole sub-system. The previous
     attempt scaled only the h1 — leaving everything else "laptop size" so the
     hero floated alone in empty space. This block scales every level. */
  :root{
    --max:1440px;                            /* wider text column so subtitle/body fill more */
    --max-bleed:2400px;                      /* grid containers fill the viewport meaningfully */
    --rhythm:clamp(120px,4vw,180px);         /* tighter than 200px — denser feel */
  }
  .hero{min-height:84vh}
  .hero h1{font-size:clamp(160px,4.8vw,240px);letter-spacing:-0.015em;line-height:1}  /* WHY: NOT -0.04em — Apple measured at this scale is still -0.015em */
  .hero p,.hero .subtitle{font-size:clamp(36px,1.4vw,52px);line-height:1.4;max-width:1200px;color:var(--ink)}
  h2{font-size:clamp(88px,2.6vw,140px);letter-spacing:-0.015em;max-width:1800px}  /* WHY: 760px max was a laptop value; 5K viewport needs the headline room */
  h3{font-size:38px;letter-spacing:-0.005em}
  body{font-size:20px;line-height:1.55}      /* bigger body at 4K — was 18 */
  .eyebrow{font-size:18px;letter-spacing:0.1em}
  .col p{font-size:21px;line-height:1.55;color:var(--ink)}
  .col p.muted,p.muted{color:var(--muted)}
  .body p{font-size:22px;line-height:1.55}
  .lede{font-size:28px;line-height:1.4;max-width:1100px}
  .cols,.grid3,.live-grid{gap:96px}
  .stat .label{font-size:18px}
  .stat .val{font-size:clamp(72px,3.4vw,108px)}
  .stat .sub{font-size:20px;line-height:1.5}
  .hero-stats{margin-top:96px;padding-top:64px;gap:96px}
  .hero-stats .num{font-size:clamp(96px,5.5vw,144px)}
  .hero-stats .lbl{font-size:20px;margin-top:18px}
  footer{padding:80px 0 96px;font-size:16px}
  /* section background hairlines stay 1px — Apple-detail at hi-DPI. */
}

/* ============================================================================
   COMPONENTS — apple/tesla-tier primitives
   Week 1 Day 1: .stat-row, .feature-card, .cta-card, .timeline-step, .split-section
   Week 1 Day 2: .btn (pill), .tile (apple-grid), .promo-tile, dark-tile variant
   ============================================================================ */

/* ─── .btn — apple-style pill button with hover lift ─── */
.btn{display:inline-flex;align-items:center;gap:8px;
     padding:14px 28px;border-radius:999px;
     font-size:16px;font-weight:500;letter-spacing:-0.005em;
     text-decoration:none;cursor:pointer;
     transition:transform 0.15s ease,background 0.2s ease,border-color 0.2s ease}
.btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn-primary:hover{background:#000;text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-strong)}
.btn-ghost:hover{border-color:var(--ink);text-decoration:none;transform:translateY(-1px)}
.btn-link{background:transparent;color:var(--link);border:1px solid transparent;padding:14px 0}
.btn-link::after{content:"\2192";font-size:14px;transition:transform 0.2s}
.btn-link:hover::after{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.btn-on-dark{background:#fff;color:var(--ink);border-color:#fff}
.btn-on-dark:hover{background:rgba(255,255,255,0.92)}
.btn-ghost-on-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3)}
.btn-ghost-on-dark:hover{border-color:#fff}

/* ─── .tile-grid — apple-homepage-style promotional grid ─── */
.tile-grid{display:grid;gap:16px;margin:24px 0 0}
.tile-grid.gap-lg{gap:24px}
.tile-grid.cols-1{grid-template-columns:1fr}
.tile-grid.cols-2{grid-template-columns:1fr 1fr}
.tile-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.tile-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:920px){
  .tile-grid.cols-2,.tile-grid.cols-3,.tile-grid.cols-4{grid-template-columns:1fr}
}

/* ─── .tile — single promo card, apple/tesla-style ─── */
.tile{position:relative;display:flex;flex-direction:column;
      padding:64px 56px;border-radius:var(--r-tile);overflow:hidden;
      background:var(--section-tint);color:var(--ink);  /* WHY: empirical Apple hero bg #f5f5f7, not #fafafa */
      min-height:540px;
      transition:transform 0.2s ease,box-shadow 0.2s ease}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.04)}
.tile .eyebrow{margin:0 0 16px}
.tile h2,.tile h3{margin:0 0 16px;line-height:1.05;letter-spacing:-0.02em;
                  font-size:clamp(40px,3.4vw,72px)}
.tile p{margin:0 0 24px;max-width:520px;color:var(--muted);font-size:17px;line-height:1.5}
.tile .btn-row{margin-top:auto}
.tile-pattern{position:absolute;inset:0;pointer-events:none;opacity:0.05}

.tile-dark{background:var(--ink);color:#fff}
.tile-dark .eyebrow{color:rgba(255,255,255,0.55)}
.tile-dark h2,.tile-dark h3{color:#fff}
.tile-dark p{color:rgba(255,255,255,0.7)}
.tile-dark a{color:#fff}

.tile-bordered{background:#fff;border:1px solid var(--hairline)}
.tile-bordered:hover{border-color:var(--hairline-strong);box-shadow:none}

/* tile inner size variants */
.tile.compact{padding:40px 40px;min-height:380px}
.tile.tall{min-height:640px}

/* tile content alignment */
.tile.center{align-items:center;text-align:center}
.tile.center p{margin-left:auto;margin-right:auto}
.tile.center .btn-row{justify-content:center}

/* tile .tile-stat — embedded big number */
.tile .tile-stat{display:block;font-size:clamp(88px,7vw,160px);font-weight:600;
                 letter-spacing:-0.03em;line-height:0.9;margin:0 0 16px;
                 font-variant-numeric:tabular-nums}

/* ─── promo tile — full-bleed headline tile, like apple.com/iphone-16 hero ─── */
.promo-tile{position:relative;padding:120px 56px;border-radius:var(--r-tile);
            background:var(--section-tint);color:var(--ink);text-align:center;  /* WHY: matches measured apple.com hero #f5f5f7 */
            overflow:hidden;
            display:flex;flex-direction:column;justify-content:center;align-items:center}
.promo-tile h1{font-size:clamp(56px,5.2vw,176px);letter-spacing:-0.015em;line-height:1.02;
               margin:0 0 24px;max-width:1400px;font-weight:600}    /* WHY: 176px max so 5K gets 5.2vw=266→capped 176; -0.015em matches Apple measured */
.promo-tile .subtitle{font-size:clamp(18px,1.4vw,28px);max-width:680px;margin:0 auto 32px;
                      color:var(--muted)}
.promo-tile.tall{min-height:80vh}

/* ─── .logo-wall — vendor / software stack monochrome strip ─── */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
           gap:1px;background:var(--hairline);
           border:1px solid var(--hairline);border-radius:var(--r-tile);
           overflow:hidden;margin:24px 0 0}
.logo-wall .cell{padding:32px 24px;display:flex;align-items:center;justify-content:center;
                 background:#fff;color:var(--muted);
                 font-size:15px;font-weight:500;letter-spacing:-0.005em;
                 transition:background 0.2s ease,color 0.2s ease;
                 min-height:96px}
.logo-wall .cell:hover{background:var(--section-tint);color:var(--ink)}

/* ─── .map-tile — SVG geographic outline as a tile element ─── */
.map-tile{position:relative;border:1px solid var(--hairline);border-radius:var(--r-tile);
          padding:48px;background:#fff;display:flex;align-items:center;justify-content:center;
          min-height:380px;overflow:hidden}
.map-tile svg{width:100%;max-width:520px;height:auto;color:var(--ink)}
.map-tile svg path,.map-tile svg polygon{stroke:var(--ink);stroke-width:1.5;fill:none}
.map-tile svg text{fill:var(--muted);font-size:14px;letter-spacing:0.08em;text-transform:uppercase}
.map-tile .annot{position:absolute;top:24px;left:24px;font-size:13px;
                 text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-weight:500}

/* ─── .quote-tile — pull-quote with attribution ─── */
.quote-tile{padding:64px 56px;border:1px solid var(--hairline);border-radius:var(--r-tile);
            background:#fff;position:relative}
.quote-tile::before{content:"\201C";position:absolute;top:24px;left:48px;
                    font-size:96px;line-height:1;color:var(--faint);font-family:Georgia,serif}
.quote-tile blockquote{margin:0 0 24px;padding-left:48px;font-size:clamp(20px,1.6vw,28px);
                       line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-0.005em}
.quote-tile .attrib{padding-left:48px;font-size:14px;color:var(--muted);
                    text-transform:uppercase;letter-spacing:0.08em}

/* ─── .section-tint — section bg utility for visual alternation ─── */
section.tinted{background:var(--section-tint)}
section.ink{background:var(--ink);color:#fff}
section.ink .eyebrow{color:rgba(255,255,255,0.55)}
section.ink h1,section.ink h2,section.ink h3{color:#fff}
section.ink p,section.ink .subtitle{color:rgba(255,255,255,0.75)}

/* ─── interactive state polish — Apple hover-lift + focus-ring system ─── */
/* WHY: doctrine §23.3 requires every interactive element have hover + focus
   states. -1px lift on hover, 0.15s ease, ring on focus. */
.tile:hover,.feature-card:hover,.work-card:hover,.map-tile:hover,.quote-tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-2);
}
.tile,.feature-card,.work-card,.map-tile,.quote-tile{
  transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.2s ease;
  will-change:transform;
}
.logo-wall .cell:focus-visible,
.tile a:focus-visible,
.feature-card a:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--link);
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .tile:hover,.feature-card:hover,.work-card:hover,
  .map-tile:hover,.quote-tile:hover{
    transform:none;box-shadow:none;
  }
}

/* ─── scroll-driven fade-in (CSS-only, reduced-motion safe) ─── */
@supports (animation-timeline:scroll()){
  @keyframes fade-rise{
    from{opacity:0;transform:translateY(24px)}
    to  {opacity:1;transform:translateY(0)}
  }
  .tile,.feature-card,.work-card,.map-tile,.quote-tile,.stat-row,.timeline-step{
    animation:fade-rise linear forwards;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
  @media (prefers-reduced-motion:reduce){
    .tile,.feature-card,.work-card,.map-tile,.quote-tile,
    .stat-row,.timeline-step{animation:none}
  }
}

/* ─── ultra-wide scaling for tiles ─── */

/* ─── .stat-row — 3-6 metrics in a horizontal grid with hairline borders ─── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
          gap:48px;margin:48px 0 0;padding:40px 0;
          border-top:1px solid var(--hairline);
          border-bottom:1px solid var(--hairline)}
.stat-row .item{padding:0}
.stat-row .item .num{display:block;font-size:clamp(40px,4vw,80px);font-weight:600;
                     letter-spacing:-0.025em;line-height:1;
                     font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-row .item .lbl{display:block;font-size:14px;color:var(--muted);
                     margin-top:10px;letter-spacing:0.02em}
.stat-row .item .sub{display:block;font-size:13px;color:var(--faint);margin-top:4px}

/* ─── .feature-card — icon + h3 + p + cta, hairline border, 18px radius ─── */
.feature-card{padding:32px;border:1px solid var(--hairline);border-radius:18px;
              display:flex;flex-direction:column;gap:16px;background:#fff;
              transition:border-color 0.2s ease,transform 0.2s ease}
.feature-card:hover{border-color:var(--hairline-strong)}
.feature-card .icon{width:32px;height:32px;color:var(--ink);flex-shrink:0}
.feature-card .icon svg{width:100%;height:100%;display:block}
.feature-card h3{margin:0;font-size:22px;letter-spacing:-0.01em;line-height:1.3}
.feature-card p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;flex:1}
.feature-card .cta{margin-top:auto;font-size:15px;padding:0}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
              gap:32px;margin:48px 0 0}

/* ─── .cta-card — full-bleed dark CTA at section breaks ─── */
.cta-card{background:var(--ink);color:#fff;padding:88px 0;margin:96px 0 0}
.cta-card .wrap{color:#fff}
.cta-card .eyebrow{color:rgba(255,255,255,0.55)}
.cta-card h2{color:#fff;margin:0 0 20px;max-width:760px}
.cta-card .subtitle,.cta-card p{color:rgba(255,255,255,0.75);margin:0 0 32px;max-width:680px}
.cta-card .cta{color:#fff}
.cta-card .cta::after{color:#fff}
.cta-card a{color:#fff}

/* ─── .split-section — two-column section: text left + visual right ─── */
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin:48px 0 0}
.split-section .copy h3{margin:0 0 16px}
.split-section .copy p{margin:0 0 16px;color:var(--muted);line-height:1.6;max-width:560px}
.split-section .visual{display:flex;flex-direction:column;gap:16px}
.split-section .visual ul{list-style:none;padding:0;margin:0;display:flex;
                          flex-direction:column;gap:0}
.split-section .visual ul li{padding:18px 0;border-bottom:1px solid var(--hairline);
                             font-size:16px;display:flex;justify-content:space-between;gap:24px}
.split-section .visual ul li:last-child{border-bottom:0}
.split-section .visual ul li .lbl{color:var(--muted)}
@media (max-width:768px){.split-section{grid-template-columns:1fr;gap:32px}}

/* ─── .timeline-row — numbered horizontal process steps ─── */
.timeline-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
              gap:48px;margin:48px 0 0;padding:40px 0;
              border-top:1px solid var(--hairline)}
.timeline-step .num{display:block;font-size:48px;font-weight:600;color:var(--muted);
                    font-variant-numeric:tabular-nums;letter-spacing:-0.025em;line-height:1;
                    margin-bottom:18px}
.timeline-step h4{margin:0 0 8px;font-size:18px;letter-spacing:-0.005em}
.timeline-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}

/* ─── .trust-strip — small metrics row at hero edge or footer ─── */
.trust-strip{display:flex;flex-wrap:wrap;gap:48px;padding:24px 0;
             border-top:1px solid var(--hairline);
             border-bottom:1px solid var(--hairline);
             font-size:14px;color:var(--muted)}
.trust-strip .item{display:flex;align-items:baseline;gap:8px}
.trust-strip .item .val{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* ─── .section-tint — subtle alternating section background ─── */
section.tint{background:rgba(0,0,0,0.015)}
section.tint + section.tint{border-top:0}

/* ─── ultra-wide scaling for new components ─── */
@media (min-width:1920px){
  .stat-row{gap:64px;padding:48px 0}
  .stat-row .item .num{font-size:clamp(56px,4vw,96px)}
  .stat-row .item .lbl{font-size:16px;margin-top:12px}
  .feature-card{padding:40px;gap:20px}
  .feature-card h3{font-size:26px}
  .feature-card p{font-size:17px}
  .feature-grid{gap:40px}
  .timeline-row{gap:64px;padding:48px 0}
  .timeline-step .num{font-size:64px}
  .timeline-step h4{font-size:22px}
  .timeline-step p{font-size:17px}
  .trust-strip{gap:64px;font-size:16px}
  .cta-card{padding:120px 0;margin-top:128px}
  .split-section{gap:96px}
  .split-section .visual ul li{padding:24px 0;font-size:18px}
}
@media (min-width:2560px){
  .stat-row .item .num{font-size:clamp(72px,4vw,120px)}
  .stat-row .item .lbl{font-size:18px}
  .feature-card{padding:48px}
  .feature-card h3{font-size:30px}
  .feature-card p{font-size:18px}
  .feature-grid{gap:48px}
  .timeline-step .num{font-size:80px}
  .timeline-step h4{font-size:24px}
  .cta-card{padding:140px 0}
}
@media (min-width:3840px){
  .stat-row{gap:96px;padding:64px 0;margin-top:80px}
  .stat-row .item .num{font-size:clamp(96px,4.5vw,160px)}
  .stat-row .item .lbl{font-size:22px;margin-top:18px}
  .feature-card{padding:56px;gap:24px;border-radius:24px}
  .feature-card h3{font-size:36px}
  .feature-card p{font-size:21px}
  .feature-grid{gap:64px}
  .timeline-row{padding:64px 0}
  .timeline-step .num{font-size:104px}
  .timeline-step h4{font-size:28px}
  .timeline-step p{font-size:20px}
  .trust-strip{padding:32px 0;font-size:20px;gap:96px}
  .cta-card{padding:180px 0;margin-top:160px}
  .cta-card .subtitle{font-size:32px;line-height:1.4}
  .split-section .visual ul li{font-size:22px;padding:32px 0}
}

/* ─── reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ─── print ─── */
@media print{
  header,footer,.skip{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  section{padding:24pt 0;border-top:1pt solid #ccc}
  section:first-of-type{border-top:0}
  .hero{padding:0 0 24pt}
  .hero h1{font-size:28pt;color:#000}
  h2{font-size:18pt;color:#000}
  h3{font-size:13pt;color:#000}
  .eyebrow{font-size:9pt;color:#666}
  a{color:#000;text-decoration:underline}
  .cta::after{display:none}
}