/* ═══════════════════════════════════════════════════════════════════
   site-v3-for.css — FAMILY LAYER for the /for/ pages
   (/for/ hub + the 17 persona pages /for/<slug>/, generated by
   tools/gen_persona_pages.py). Loads AFTER /site-v3.css, which already
   gives these pages the eyebrow pills, the big headings, the shared card
   recipe for .tst / .step, the gradient step tiles, the FAQ, the pricing
   block (.pb), the closing band (.close) and the ghost buttons.

   This file adds what only the /for/ pages have, in the homepage's
   language (landing-v3.css — "Design now is much better :)"):
     persona pages  · .ben  "Why it works for you" cards → soft cards with
                      a gradient icon tile around the emoji
                    · .tst  the five assessment tiles → each carries its own
                      assessment gradient on top (homepage .x-ac), the emoji
                      on a white app-tile, "Recommended" as a sunshine pill
                    · .step three steps joined by a dashed route line
                    · .inq  "Talk to us" → the one navy chapter panel per page,
                      glassy ghost buttons, coral WhatsApp button
                    · rhythm: white (why) · ice + contour (assessments) ·
                      white (steps + navy panel) · ice (pricing)
     /for/ hub      · .grp group labels with a hairline rule
                    · .pt persona cards → soft cards, gradient emoji tiles
                      (one assessment gradient per group), lift + edge
                    · .catch → sunshine callout with a coral action pill
                    · the persona-grid section → ice + contour (homepage #who)
                    · .close "Tell us who you are" → the hub's one navy band
     both           · .pb pricing band runs into the footer (no white seam)

   Heroes, nav bar, footer: untouched. Same specificity convention as the
   base layer ("html body" + the page's own selector); !important only
   against inline style="" (the sections' inline padding, one inline link
   colour on the hub).
   ═══════════════════════════════════════════════════════════════════ */

html body{--v3-accent:var(--g-career)}

/* ─────────────────────────────────────────────────────────────────
   0 · SECTION RHYTHM (persona pages). Sections carry inline
   style="padding-top:…" → !important on padding only.
   ───────────────────────────────────────────────────────────────── */
html body section:has(> .wrap > .bens){padding:44px 0 92px!important}
html body section:has(> .wrap > .tests){
  position:relative;overflow:hidden;padding:92px 0 96px!important;
  background:var(--x-ice);border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);
}
html body section:has(> .wrap > .tests)::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:var(--v3-contour);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%);
          mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%);
}
html body section:has(> .wrap > .tests) > .wrap{position:relative;z-index:1}
html body section:has(> .wrap > .steps){padding:92px 0 40px!important}
html body section:has(> .wrap > .inq){padding:40px 0 100px!important}

/* section heads: more air under the heading (homepage .x-head) */
html body .bens,
html body .tests,
html body .steps{margin-top:0}
html body section .head:has(+ .bens),
html body section .head:has(+ .tests),
html body section .head:has(+ .steps){max-width:720px;margin-bottom:38px}

/* ─────────────────────────────────────────────────────────────────
   1 · .ben — "Why it works for you"
   ───────────────────────────────────────────────────────────────── */
html body .bens{gap:18px}
html body .ben{
  position:relative;background:#fff;border:1px solid var(--x-line);border-radius:24px;box-shadow:var(--x-shadow);
  padding:28px 26px 26px;
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease),border-color .35s;
}
html body .ben::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:var(--v3-edge);opacity:0;transition:opacity .35s var(--x-ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
html body .ben:hover{transform:translateY(-6px);box-shadow:var(--x-shadow-hi)}
html body .ben:hover::after{opacity:1}
/* the emoji floats → it sits in a gradient tile with the homepage sheen */
html body .ben .em{
  display:grid;place-items:center;width:56px;height:56px;border-radius:17px;margin-bottom:20px;
  font-size:24px;line-height:1;
  /* white plate under the emoji so colour emoji stay legible on the blue tile */
  background:radial-gradient(circle at 50% 50%,#fff 0 18px,rgba(255,255,255,.55) 18.5px,rgba(255,255,255,0) 20px),
             linear-gradient(145deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 55%,rgba(0,0,0,.12) 100%),var(--tg,var(--g-career));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6);
}
html body .ben:nth-child(3n+2) .em{--tg:var(--g-iq)}
html body .ben:nth-child(3n+3) .em{--tg:var(--g-learn)}
html body .ben h3{font-size:20px;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:var(--x-ink)}
html body .ben p{font-size:15px;line-height:1.58;color:var(--x-mut)}

/* ─────────────────────────────────────────────────────────────────
   2 · .tst — the five assessment tiles (persona pages)
   Each wears its assessment's own gradient as a top band (homepage
   .x-ac-top, with its contour rings); the emoji sits on a white app-tile
   that overlaps the band; "Recommended" is a sunshine pill in the band.
   ───────────────────────────────────────────────────────────────── */
html body .tests{gap:16px;grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
html body .tests .tst{
  --tg:var(--g-career);
  display:flex;flex-direction:column;align-items:flex-start;
  padding:104px 18px 20px;border-radius:22px;
}
html body .tests .tst[href*="iq-test"]{--tg:var(--g-iq)}
html body .tests .tst[href*="communication"]{--tg:var(--g-comm)}
html body .tests .tst[href*="learning"]{--tg:var(--g-learn)}
html body .tests .tst[href*="life-skills"]{--tg:var(--g-life)}
html body .tests .tst::before{
  content:"";position:absolute;left:0;right:0;top:0;height:76px;border-radius:21px 21px 0 0;pointer-events:none;
  background:repeating-radial-gradient(circle at 88% 18%,transparent 0 15px,rgba(255,255,255,.10) 15px 16px),var(--tg);
}
html body .tests .tst .em{
  position:absolute;left:16px;top:48px;z-index:2;display:grid;place-items:center;
  width:50px;height:50px;border-radius:15px;background:#fff;border:1px solid var(--x-line);
  font-size:25px;line-height:1;color:var(--x-ink);
  box-shadow:0 12px 22px -12px rgba(15,30,54,.55);
  transition:transform .35s var(--x-ease);
}
html body .tests .tst:hover .em{transform:translateY(-3px) rotate(-4deg)}
html body .tests .tst b{font:800 16.5px/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.015em;color:var(--x-ink);margin:8px 0 10px}
html body .tests .tst > span:last-child{
  margin-top:auto;display:inline-flex;align-items:center;
  font:700 12px/1 'Inter',system-ui,sans-serif;color:var(--x-navy2);
  background:var(--x-ice);border:1px solid var(--x-line);border-radius:999px;padding:7px 10px;
}
html body .tests .tst:hover{border-color:var(--x-line)}
html body .tests .tst .badge{
  top:12px;right:12px;left:auto;
  font:800 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 9px;border-radius:999px;background:var(--x-sun);color:var(--x-ink);
}
/* recommended tiles stand a touch taller in the light */
html body .tests .tst.star{box-shadow:var(--x-shadow-hi)}
html body .tests .tst:not(.star){box-shadow:var(--v3-shadow-sm)}
html body .tests .tst:nth-child(n):hover{box-shadow:var(--x-shadow-hi)}

/* ─────────────────────────────────────────────────────────────────
   3 · .step — three steps on a dashed route (homepage .x-pipe)
   ───────────────────────────────────────────────────────────────── */
html body .steps{gap:18px}
html body .steps .step{padding:26px 24px 24px}
html body .steps .step h3{font-size:19px;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px;color:var(--x-ink)}
html body .steps .step p:not(.num){font-size:15px;line-height:1.58;color:var(--x-mut)}
html body .steps .step:nth-child(2) .num{background:var(--g-iq)}
html body .steps .step:nth-child(3) .num{background:var(--g-learn)}
@media(min-width:821px){
  html body .steps .step:not(:last-child)::before{
    content:"";position:absolute;top:48px;right:-19px;width:20px;height:2px;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(90deg,#4A8FD6 0 5px,transparent 5px 9px);
  }
}

/* ─────────────────────────────────────────────────────────────────
   4 · .inq — "Talk to us": the page's one navy chapter panel
   ───────────────────────────────────────────────────────────────── */
html body .inq{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--v3-navy-band);color:#fff;border:0;border-radius:32px;
  padding:56px 40px 52px;box-shadow:0 40px 80px -40px rgba(15,30,54,.7);
}
html body .inq::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background:repeating-radial-gradient(circle at 86% 18%,transparent 0 30px,rgba(255,255,255,.05) 30px 31px),
             repeating-radial-gradient(circle at 8% 100%,transparent 0 36px,rgba(255,255,255,.04) 36px 37px);
}
html body .inq h2{
  font-size:clamp(28px,3.6vw,42px);letter-spacing:-.035em;line-height:1.06;color:#fff;margin:0 auto 12px;
  max-width:30ch;text-wrap:balance;
}
html body .inq p{font-size:17px;line-height:1.6;color:#C6D3E6;max-width:560px;margin:0 auto 28px}
html body .inq .row{gap:12px}
html body .inq .btn-verm{box-shadow:0 14px 28px -12px rgba(242,86,59,.85)}
html body .inq .btn-ghost:not(:is(.hero,header,.nav) .btn-ghost){
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.26);
}
html body .inq .btn-ghost:not(:is(.hero,header,.nav) .btn-ghost):hover{
  background:#fff;color:var(--x-navy2);border-color:#fff;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);
}

/* ─────────────────────────────────────────────────────────────────
   5 · /for/ HUB — persona directory (.grp / .pt / .catch)
   ───────────────────────────────────────────────────────────────── */
html body section:has(> .wrap > .grp){
  position:relative;overflow:hidden;padding:84px 0 96px!important;
  background:var(--x-ice);border-top:1px solid var(--x-line);
}
html body section:has(> .wrap > .grp)::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:var(--v3-contour);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%);
          mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%);
}
html body section:has(> .wrap > .grp) > .wrap{position:relative;z-index:1}

/* group label: Bricolage, ink, with a hairline running to the edge */
html body .grp{margin-bottom:44px}
html body .grp h3{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
  font:800 20px/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.015em;color:var(--x-ink);
}
html body .grp h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#C9DBEF,rgba(201,219,239,0))}

html body .pgrid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
html body .pt{
  --tg:var(--g-career);
  position:relative;align-items:center;gap:16px;padding:20px 20px 20px 18px;
  background:#fff;border:1px solid var(--x-line);border-radius:22px;box-shadow:var(--x-shadow);
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease),border-color .35s;
}
html body .pt::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:var(--v3-edge);opacity:0;transition:opacity .35s var(--x-ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
html body .pt:hover{transform:translateY(-5px);border-color:var(--x-line);box-shadow:var(--x-shadow-hi)}
html body .pt:hover::after{opacity:1}
html body .pt .pe{
  position:relative;display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;
  font-size:22px;line-height:1;
  background:radial-gradient(circle at 50% 50%,#fff 0 16.5px,rgba(255,255,255,.55) 17px,rgba(255,255,255,0) 18.5px),
             linear-gradient(145deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 55%,rgba(0,0,0,.12) 100%),var(--tg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6);
  transition:transform .35s var(--x-ease);
}
html body .pt:hover .pe{transform:rotate(-5deg) scale(1.04)}
html body .pt b{font-size:16.5px;letter-spacing:-.015em;color:var(--x-ink);margin-bottom:3px;transition:color .2s}
html body .pt:hover b{color:var(--x-blue)}
html body .pt p{font-size:13.5px;line-height:1.5;color:var(--x-mut)}
/* one assessment gradient per group, in page order */
html body .grp:nth-child(2) .pt{--tg:var(--g-iq)}
html body .grp:nth-child(3) .pt{--tg:var(--g-comm)}
html body .grp:nth-child(4) .pt{--tg:var(--g-learn)}
html body .grp:nth-child(5) .pt{--tg:var(--g-life)}
html body .grp:nth-child(6) .pt{--tg:var(--g-hum)}

/* "Don't see your exact title?" → sunshine callout + coral action pill */
html body .catch{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;
  margin-top:4px;padding:20px 24px;border-radius:20px;
  background:linear-gradient(100deg,#FFF3C4,#FFF9E3);border:1px solid #F4E3A0;
  color:#4A3B00;font-size:16px;font-weight:700;line-height:1.45;text-align:center;
  box-shadow:0 14px 30px -24px rgba(90,70,0,.55);
}
html body .catch a[style]{
  display:inline-flex;align-items:center;flex:none;white-space:nowrap;
  background:var(--x-coral);color:#fff!important;font:800 14.5px/1 'Inter',system-ui,sans-serif;
  padding:12px 20px;border-radius:999px;box-shadow:0 14px 28px -14px rgba(242,86,59,.8);
  transition:transform .2s var(--x-ease),background .2s;
}
html body .catch a[style]:hover{background:var(--x-coral-d);transform:translateY(-2px)}

/* "Tell us who you are." (.close, hub only) → the hub's one navy chapter band,
   so the page reads ice (directory) · navy (contact) · ice (pricing) instead
   of three pale bands in a row. Phrase in sunshine, as on the homepage's
   navy bands; glassy ghost button as in the persona pages' .inq panel. */
html body section.close{
  padding:96px 0 104px;border-top:0;color:#fff;background:var(--v3-navy-band);
}
html body section.close::before{
  opacity:.7;
  background:repeating-radial-gradient(circle at 84% 22%,transparent 0 34px,rgba(255,255,255,.05) 34px 35px),
             repeating-radial-gradient(circle at 10% 100%,transparent 0 40px,rgba(255,255,255,.04) 40px 41px);
}
html body section.close > .wrap{position:relative;z-index:1}
html body section.close h2{color:#fff}
html body section.close h2 .hl{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--x-sun)}
html body section.close > .wrap > p{color:#C6D3E6;font-size:17px}
html body section.close .btn-verm{box-shadow:0 14px 28px -12px rgba(242,86,59,.85)}
html body section.close .btn-ghost:not(:is(.hero,header,.nav) .btn-ghost){
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.26);
}
html body section.close .btn-ghost:not(:is(.hero,header,.nav) .btn-ghost):hover{
  background:#fff;color:var(--x-navy2);border-color:#fff;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);
}

/* the pricing band (.pb) is the last section before the site-chrome footer:
   let its ice run into the footer's 40px top margin (the margins collapse to
   0) instead of leaving a white seam between two ice grounds */
html body section.pb:has(~ footer){margin-bottom:-40px}
/* the hub's legacy "section{padding:84px 0}" doubles the band's own 72px
   air; give it the persona pages' 38px so both templates match */
html body section.pb{padding-top:38px;padding-bottom:38px}

/* hub only: its legacy page rules footer{padding:30px 0}, footer a{margin-left:20px}
   and footer a:hover{color:var(--ink)} leak into the site-chrome footer (the
   persona pages have none of them). Cancel them so the hub's footer computes
   exactly like the persona pages': no 30px ice strip above the call-back band,
   no 20px push on every link, and the links site-chrome gives no hover colour
   keep their own colour on hover (the call-back band's sunshine link would
   otherwise turn ink-on-navy). This restores site-chrome, it restyles nothing. */
html body footer.sc-f{padding:0}
html body footer.sc-f a{margin-left:0}
html body footer.sc-f .sc-cb-sub a:hover{color:#FFD93B}
html body footer.sc-f :is(.sc-f-line,.sc-f-base) a:hover{color:#D9442B}
html body footer.sc-f a.sc-f-wa:hover{color:#fff}

/* ─────────────────────────────────────────────────────────────────
   6 · MOTION — same CSS-only reveal as the base layer for the cards
   this file adds (forwards-only fill: no timeline → simply visible)
   ───────────────────────────────────────────────────────────────── */
@media screen and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html body :is(.ben,.inq){
      animation-name:v3-rise;animation-timing-function:linear;animation-fill-mode:forwards;
      animation-timeline:view();animation-range:entry 0% entry 55%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  html body :is(.ben,.pt,.tests .tst .em,.pt .pe){transition:none}
  html body :is(.ben,.pt):hover,
  html body .tests .tst:hover .em,
  html body .pt:hover .pe{transform:none}
}

/* ─────────────────────────────────────────────────────────────────
   7 · PHONES — 16–24px gutters, no horizontal scroll at 375px
   ───────────────────────────────────────────────────────────────── */
@media(max-width:820px){
  html body section:has(> .wrap > .bens){padding:34px 0 64px!important}
  html body section:has(> .wrap > .tests){padding:64px 0 68px!important}
  html body section:has(> .wrap > .steps){padding:64px 0 28px!important}
  html body section:has(> .wrap > .inq){padding:28px 0 72px!important}
  html body section:has(> .wrap > .grp){padding:56px 0 68px!important}
  html body section.close{padding:68px 0 72px}
}
@media(max-width:620px){
  html body section .head:has(+ .bens),
  html body section .head:has(+ .tests),
  html body section .head:has(+ .steps){margin-bottom:26px}
  html body .bens{grid-template-columns:minmax(0,1fr)}
  html body .ben{padding:22px 20px}
  html body .ben .em{width:50px;height:50px;border-radius:15px;font-size:24px;margin-bottom:16px}
  html body .ben h3{font-size:18.5px}

  /* assessment tiles become a compact list: band on the left, tile inside it */
  html body .tests{grid-template-columns:minmax(0,1fr);gap:14px}
  html body .tests .tst{padding:18px 16px 16px 92px;min-height:84px;justify-content:center}
  html body .tests .tst::before{top:0;bottom:0;left:0;right:auto;width:74px;height:auto;border-radius:21px 0 0 21px}
  html body .tests .tst .em{left:13px;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:14px;font-size:23px}
  html body .tests .tst:hover .em{transform:none}
  html body .tests .tst b{margin:0 0 8px;font-size:16px}
  html body .tests .tst > span:last-child{margin-top:0}
  html body .tests .tst .badge{top:-10px;right:14px;box-shadow:0 8px 16px -10px rgba(15,30,54,.55)}

  /* steps become a vertical route: tile on the left, a dashed line down to the next */
  html body .steps{gap:14px}
  html body .steps .step{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 18px 20px}
  html body .steps .step .num{grid-row:1 / span 2;margin:0}
  html body .steps .step h3{font-size:18px;margin:2px 0 6px}
  html body .steps .step p:not(.num){font-size:14.5px}
  html body .steps .step:not(:last-child)::before{
    content:"";position:absolute;left:40px;top:74px;bottom:-26px;width:2px;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(180deg,#4A8FD6 0 5px,transparent 5px 9px);
  }
  html body .inq{padding:40px 20px 36px;border-radius:26px}
  html body .inq p{font-size:16px;margin-bottom:22px}
  html body .inq .row{flex-direction:column;align-items:stretch}
  html body .inq .row .btn{justify-content:center;max-width:100%;padding:14px 16px;font-size:14.5px;overflow-wrap:anywhere}

  html body .grp{margin-bottom:34px}
  html body .grp h3{font-size:18px}
  html body .pgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  html body .pt{padding:16px 16px 16px 14px;gap:14px}
  html body .pt .pe{width:48px;height:48px;border-radius:15px;font-size:23px}
  html body .catch{padding:18px 16px;font-size:15px}
}