/* Strata Match — Homepage styles (verbatim from handoff) */
  .hero{min-height:clamp(640px,90svh,940px);display:flex;flex-direction:column;}
  /* The hero's wf-wide children are flex items; wf-wide's `margin:0 auto`
     disables cross-axis stretch, shrink-wrapping them to content (the h1's
     17ch) and centering — a ~698px column mid-page. Force full width so they
     span the standard 1340 wf-wide measure (headline left-aligned, route-bar
     full-width), matching the topbar and the sections below. */
  .hero > .wf-wide{width:100%;}
  .hero .topbar{padding:16px 32px;}
  .hero .hero-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(56px,9svh,104px) 32px clamp(48px,7svh,76px);}
  /* Vertical rhythm: a progressive gap scale gives the focal headline room and
     keeps the hero from feeling cramped (sign → h1 → subhead → CTAs). */
  .hero .hero-copy{max-width:1080px;display:flex;flex-direction:column;align-items:center;}
  .hero .hero-copy h1{font-size:clamp(48px,6vw,90px);line-height:1.0;letter-spacing:-0.025em;margin-top:30px;max-width:24ch;text-shadow:0 2px 16px rgba(5,13,30,.88),0 1px 3px rgba(5,13,30,.75);}
  .hero .hero-copy p{margin-top:32px;max-width:55ch;font-size:clamp(18px,1.22vw,20px);line-height:1.55;color:var(--on-ink-muted);font-weight:470;text-shadow:0 2px 14px rgba(5,13,30,.88),0 1px 3px rgba(5,13,30,.72);}
  .hero .hero-copy .row{justify-content:center;margin-top:44px;gap:16px;}
  .route-bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--paper);}
  @media (max-width:1000px){ .route-bar{grid-template-columns:1fr 1fr;} }
  .route-bar a{display:flex;align-items:center;gap:14px;padding:18px 24px;text-decoration:none;
    background:rgba(5,13,30,.62);backdrop-filter:blur(6px);transition:background var(--dur-med) var(--ease-out);}
  .route-bar a:hover,.route-bar a:focus-visible{background:rgba(5,13,30,.82);}
  /* Purposeful hover motion (not floaty): the destination marker lifts a touch,
     the arrow advances toward its section, and a top accent rule wipes in along
     the wayfinding colour. Keyboard focus gets the same affordance. */
  .route-bar a{position:relative;cursor:pointer;}
  .route-bar a::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:100%;
    background:var(--line,var(--t-400));transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur-med) var(--ease-out);}
  .route-bar a:hover::before,.route-bar a:focus-visible::before{transform:scaleX(1);}
  .route-bar a .way-marker{transition:transform var(--dur-med) var(--ease-out);}
  .route-bar a > span:last-child{transition:transform var(--dur-med) var(--ease-out);}
  .route-bar a:hover .way-marker,.route-bar a:focus-visible .way-marker{transform:translateY(-2px) scale(1.06);}
  .route-bar a:hover > span:last-child,.route-bar a:focus-visible > span:last-child{transform:translateX(6px);}
  @media (prefers-reduced-motion:reduce){
    .route-bar a::before,.route-bar a .way-marker,.route-bar a > span:last-child{transition:none;}
    .route-bar a:hover::before,.route-bar a:focus-visible::before{transform:scaleX(1);}
    .route-bar a:hover .way-marker,.route-bar a:hover > span:last-child,
    .route-bar a:focus-visible .way-marker,.route-bar a:focus-visible > span:last-child{transform:none;}
  }
  .route-bar a + a{border-left:1px solid rgba(255,255,255,.16);}
  @media (max-width:1000px){
    .route-bar a + a{border-left:0;}
    .route-bar a:nth-child(2n){border-left:1px solid rgba(255,255,255,.16);}
    .route-bar a:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);}
  }
  .hub-grid{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:stretch;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  .step{padding:0 30px;border-right:1px solid var(--border);}
  .step:first-child{padding-left:0;}
  .step:last-child{border-right:0;padding-right:0;}
  /* Sample match cards — three uniform, equal-height cards (stretch + each card
     is a flex column with the "why this fit" panel as flex:1). */
  .match-sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
  /* Reserve a 2-row tag area so every card's header is the same height — without
     this, a card whose tags fit one row (e.g. "Waitlist") sits its SERVES/Why
     bands ~39px higher than cards whose 3rd tag wraps, breaking row alignment. */
  .match-card__tags{min-height:70px;align-content:flex-start;}
  @media (max-width:1000px){ .match-sample-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:640px){ .match-sample-grid{grid-template-columns:1fr;} }
  @media (max-width:900px){
    .hero{min-height:auto;}
    .hero .hero-body{padding:42px 32px 30px;}
    .hero .hero-copy{max-width:780px;}
    .hero .hero-copy h1{font-size:clamp(58px,7.2vw,68px);max-width:min(700px,calc(100vw - 64px));}
    .hero .hero-copy .row{margin-top:26px;}
    .hub-grid{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .step{padding:26px 0;border-right:0;border-bottom:1px solid var(--border);}
  }
  @media (max-width:640px){
    .hero .hero-body{padding:34px 24px 26px;}
    .hero .hero-copy h1{font-size:clamp(40px,11.6vw,50px);max-width:13.2ch;}
    .hero .hero-copy p{font-size:18px;line-height:1.46;}
    .route-bar{grid-template-columns:1fr 1fr;}
    .route-bar a{gap:10px;padding:16px 12px;}
    .route-bar a + a{border-top:0;}
    .route-bar a:nth-child(2n){border-left:1px solid rgba(255,255,255,.16);}
    .route-bar a:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);}
  }

  /* responsive: the toolkit 4-up grid (inline repeat(4,1fr)) must collapse,
     else cards push off-screen on tablet/mobile. */
  @media (max-width:900px){ #tools .grid{grid-template-columns:repeat(2,1fr) !important;} }
  @media (max-width:560px){ #tools .grid{grid-template-columns:1fr !important;} }
  /* The homepage's inline section grids (5fr/4fr, 7fr/5fr, 1fr/1fr splits) carry
     no mobile rules from the handoff. home-page.css is linked ONLY on the
     homepage, and the footer lives outside <section>, so collapsing every
     section grid to one column below the tablet breakpoint is safe and leaves
     the desktop design untouched. */
  @media (max-width:760px){
    section [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  }

  /* Hero readability: the shared .scrim is darkest on the LEFT, but the hero
     text is centred — so the centred white text was landing on the lighter
     middle of busy images. Add a centre-weighted darkening for the hero only. */
  .hero .scrim{
    background:linear-gradient(180deg,rgba(5,13,30,.80) 0%,rgba(5,13,30,.54) 38%,rgba(5,13,30,.54) 62%,rgba(5,13,30,.86) 100%),
               radial-gradient(ellipse 78% 62% at 50% 46%, rgba(5,13,30,.46) 0%, transparent 76%) !important;
  }