/* ═══════════════════════════════════════════════════════════════════
   site-v3.css — the SHARED retrofit layer for every old-style marketing
   page (assessment hubs + class pages, /for/, /compare/, pricing, bulk
   orders, coaching centres, partners, start, sitemap, privacy …).

   Her 1 Oct 2026 brief: "Hero section colours seem fine but the rest of
   the page boxes — no; shaded etc — no … more fancy, nicer, animated."
   The homepage below its hero is the reference ("Design now is much
   better :)") — landing-v3.css. This file brings that language to the
   old pages WITHOUT touching their markup:
     · white / ice #F2F7FC (faint contour rings) / navy chapter bands
     · ONE card treatment: white, 1px #DDE6F1 hairline, ~24px radius, soft
       layered navy shadow, lifts on hover with a blue→coral gradient edge
     · eyebrow pills, big Bricolage headings, coral actions, steel-blue proof
   RETIRED here: 2–3px ink (#14181F) borders and yellow offset shadows
   (box-shadow:Npx Npx 0 var(--sun)) on content boxes (branding skill §2).

   LOAD ORDER (in <head>, after the page's own <style>):
       <link rel="stylesheet" href="/site-v3.css?v=20261002a">
       <link rel="stylesheet" href="/<family>-v3.css?v=20261002a">   ← family layer
   Pages that already link landing-v3.css must NOT load this file.

   SPECIFICITY CONVENTION (old styles live in inline <style> blocks, some
   injected inside <body>, so source order cannot be trusted):
     · every rule = "html body " + the page's own selector → always one notch
       above the page rule, never inflated beyond it. A family file that
       wants to change one of these uses the SAME selector; it loads later,
       so it wins.
     · where a page rule carries an id + class and ours needs to be generic,
       ":is(*,._v3)" adds exactly one class of specificity without needing
       any class in the markup.
     · !important ONLY against inline style="" attributes (section 12).

   LEFT ALONE on purpose: heroes (.hero / header incl. hero-v2 + numbers
   strip), the nav BAR (logo, links, Login pill, the coral nav button), the
   footer + call-back band (site-chrome.js), score-bar colours (amber→green).

   Families can recolour accents with ONE token on their own file:
       html body{--v3-accent:var(--g-iq)}     (career|iq|comm|learn|life)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* tokens — copied verbatim from landing-v3.css so both layers agree */
  --x-navy:#0F1E36; --x-navy2:#16325C; --x-ice:#F2F7FC; --x-ice2:#E6F0FA;
  --x-line:#DDE6F1; --x-ink:#14181F; --x-mut:#5A6472; --x-blue:#2B6CB8; --x-blue2:#4A8FD6;
  --x-coral:#F2563B; --x-coral-d:#D9442B; --x-sun:#FFD93B; --x-sun-soft:#FFF3C4; --x-green:#188A5E;
  --g-career:linear-gradient(135deg,#16325C 0%,#2A5E9C 50%,#4A8FD6 100%);
  --g-iq:linear-gradient(135deg,#1B2A66 0%,#3150C4 50%,#5B82F0 100%);
  --g-comm:linear-gradient(135deg,#2B2F7E 0%,#4A55C8 50%,#8A93F2 100%);
  --g-learn:linear-gradient(135deg,#123E6E 0%,#2475B8 50%,#4FB0EC 100%);
  --g-life:linear-gradient(135deg,#0C3B5E 0%,#15709F 50%,#2AA7DA 100%);
  --g-hum:linear-gradient(135deg,#2A2466 0%,#4B44B0 50%,#7A6BE0 100%);
  --g-pro:linear-gradient(135deg,#23385C 0%,#3E6296 50%,#6C8FC0 100%);
  --x-shadow:0 1px 2px rgba(15,30,54,.05),0 18px 40px -22px rgba(15,30,54,.30);
  --x-shadow-hi:0 2px 4px rgba(15,30,54,.06),0 30px 60px -24px rgba(15,30,54,.38);
  --x-ease:cubic-bezier(.2,0,0,1);

  /* retrofit-only tokens (the card recipe, so family files can reuse it) */
  --v3-accent:var(--g-career);                 /* family hook: tiles, current class, report head */
  --v3-edge:linear-gradient(135deg,#4A8FD6,#8A93F2 45%,#F2563B);
  --v3-shadow-sm:0 1px 2px rgba(15,30,54,.05),0 10px 24px -18px rgba(15,30,54,.34);
  --v3-shadow-sm-hi:0 2px 4px rgba(15,30,54,.06),0 18px 34px -20px rgba(15,30,54,.40);
  --v3-grad-text:linear-gradient(100deg,#2B6CB8,#4A8FD6 45%,#F2563B);
  --v3-navy-band:radial-gradient(90% 70% at 85% 0%,rgba(74,143,214,.35) 0%,rgba(74,143,214,0) 60%),
                 radial-gradient(70% 60% at 0% 100%,rgba(74,143,214,.16) 0%,rgba(74,143,214,0) 60%),
                 linear-gradient(160deg,#0F1E36 0%,#16325C 100%);
  --v3-contour:repeating-radial-gradient(circle at 12% 18%,transparent 0 30px,rgba(43,108,184,.07) 30px 31px),
               repeating-radial-gradient(circle at 92% 88%,transparent 0 38px,rgba(43,108,184,.06) 38px 39px);
}

/* ─────────────────────────────────────────────────────────────────
   1 · TYPOGRAPHY — eyebrow pills + big section headings
   ───────────────────────────────────────────────────────────────── */

/* eyebrows: coral caps text → white pill, steel-blue caps, hairline, soft
   shadow (the emoji most of them start with plays the homepage's icon) */
/* (0,3,2) for the class-named ones; (1,2,2) for the per-section ones, which
   the pages scope under an id (#how-it-works .hiw-eyebrow = 1,1,0) */
html body .eyebrow:not(.hero .eyebrow),
html body .pb-eyebrow.pb-eyebrow,
html body :is(section,#_v3) :is([class$="-eyebrow"],[class*="-eyebrow "],[class$="-eye"],[class$="-eb"]):not(.hero *){
  display:inline-flex;align-items:center;gap:8px;width:auto;
  font:800 12px/1.2 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--x-blue);background:#fff;border:1px solid var(--x-line);border-radius:999px;
  padding:8px 14px 8px 11px;box-shadow:0 6px 16px -10px rgba(15,30,54,.3);
  margin-bottom:16px;
}
/* eyebrows that centre themselves (their heading is centred) */
html body section#faq[aria-label^="Frequently"] .fq-eyebrow.fq-eyebrow,
html body section#ls-quotes .qt-eyebrow.qt-eyebrow,
html body #quotes .qt-wrap:not(:has(.qt-h2)) .qt-eyebrow{
  display:flex;width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto;
}
/* on a navy band the pill turns glassy with sunshine text (homepage .x-navy) */
html body .report .eyebrow:not(.hero .eyebrow){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--x-sun);box-shadow:none}

/* section headings: bigger, tighter, balanced — size/letter-spacing only,
   colour and margins stay with the page. The trust strip keeps its quiet
   label size; headings inside cards (.inq) are left alone.
   Specificity (1,1,4): beats the injected "#section .xx-h2" rules (1,1,0).
   A family file overriding a heading size: html body #id h2:is(*,._v3):is(*,._v3) */
html body :is(section,#_v3) h2:is(*,._v3):not(:where(#trust,#trust-block,.trust,.inq,.hero) h2),
html body .closing h2,
html body .head h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(28px,3.8vw,46px);letter-spacing:-.035em;line-height:1.04;text-wrap:balance;
}
html body :is(.closing,.close,#_v3) h2:is(*,._v3):is(*,._v3){font-size:clamp(32px,4.6vw,56px);letter-spacing:-.04em}
html body .head p{font-size:17px;line-height:1.6}
html body :is(.close,.closing) h2 .hl{background:var(--v3-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ─────────────────────────────────────────────────────────────────
   2 · THE CARD — white, hairline, 24px, layered navy shadow, lift + edge
   Shared selectors: the class-page template (5 assessment families),
   the hub template (5 hubs + /for/), and the sections injected into every
   assessment family under the same ids. Family-only cards → family file.
   ───────────────────────────────────────────────────────────────────── */
html body .card,
html body .answers,
html body .dim,
html body .mc,
html body .wcard,
html body .step,
html body .tst,
html body .pr,
html body .ped,
html body .hook,
html body .pb-card,
html body #how-it-works .hiw-card,
html body #how-it-works .hiw-rc,
html body #why-this-class .wy-card,
html body #why-this-class .wy-c,
html body #ls-why .wy-card,
html body #when-to-take .wt-person,
html body #when-to-take .wt-scene,
html body #when-to-take .wt2-scene,
html body #when-to-take .wt-p,
html body #when-to-take .wt-scn,
html body #quotes .qt-card,
html body #ls-quotes .qt-card,
html body #quotes-block .qb-card,
html body #quotes .q,
html body #reports .rp-card,
html body #ls-reports .rp-card,
html body #reports .rp-c,
html body #reports-block .rp-c{
  background:#fff;border:1px solid var(--x-line);border-radius:24px;box-shadow:var(--x-shadow);
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease),border-color .35s;
}
/* the facts strip under every assessment hero (5 names, one component) */
html body #cred .cr-card,
html body #cred .cred-card,
html body #cred-strip .cs-c,
html body .crd .crd-card{
  background:#fff;border:1px solid var(--x-line);border-radius:20px;box-shadow:var(--x-shadow);
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease);
}
html body #cred .cr-card b,
html body #cred .cred-card b,
html body #cred-strip .cs-c b,
html body .crd .crd-card b{
  background:var(--v3-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:700px){
  html body #cred .cr-card,html body #cred .cred-card,html body #cred-strip .cs-c,html body .crd .crd-card{box-shadow:var(--v3-shadow-sm);border-radius:16px}
}

/* small cards: parameter cards, moments, class buttons, character cards */
html body #how-it-works .hiw-pcard,
html body #how-it-works .hiw-pc,
html body #when-to-take .wt-card,
html body #when-to-take .wt-c,
html body #when-to-take .wt2-moment,
html body #when-to-take .wtt-card,
html body #when-to-take .wtt-who,
html body .jc,
html body .clsbtn{
  background:#fff;border:1px solid var(--x-line);border-radius:18px;box-shadow:var(--v3-shadow-sm);
  transition:transform .3s var(--x-ease),box-shadow .3s var(--x-ease),border-color .3s,background .3s,color .3s;
}
/* hover: lift + stronger shadow (old tilts from the "fun pack" retire) */
html body .tst:nth-child(n),
html body .mc:nth-child(n){transform:none}
html body .card:hover,
html body .answers:hover,
html body .dim:hover,
html body .mc:nth-child(n):hover,
html body .wcard:hover,
html body .step:hover,
html body .tst:nth-child(n):hover,
html body .pr:hover,
html body .pb-card:hover,
html body #how-it-works .hiw-card:hover,
html body #how-it-works .hiw-rc:hover,
html body #why-this-class .wy-card:hover,
html body #why-this-class .wy-c:hover,
html body #ls-why .wy-card:hover,
html body #when-to-take .wt-person:hover,
html body #when-to-take .wt-scene:hover,
html body #when-to-take .wt2-scene:hover,
html body #when-to-take .wt-p:hover,
html body #when-to-take .wt-scn:hover,
html body #quotes .qt-card:hover,
html body #ls-quotes .qt-card:hover,
html body #quotes-block .qb-card:hover,
html body #quotes .q:hover,
html body #reports .rp-card:hover,
html body #ls-reports .rp-card:hover,
html body #reports .rp-c:hover,
html body #reports-block .rp-c:hover,
html body #cred .cr-card:hover,
html body #cred .cred-card:hover,
html body #cred-strip .cs-c:hover,
html body .crd .crd-card:hover{
  transform:translateY(-6px);box-shadow:var(--x-shadow-hi);
}
html body #how-it-works .hiw-pcard:hover,
html body #how-it-works .hiw-pc:hover,
html body #when-to-take .wt-card:hover,
html body #when-to-take .wt-c:hover,
html body #when-to-take .wt2-moment:hover,
html body #when-to-take .wtt-card:hover,
html body .jc:hover{
  transform:translateY(-4px);box-shadow:var(--v3-shadow-sm-hi);border-color:#B9CFEA;
}

/* the gradient edge that lights up on hover (homepage .x-card::after) */
html body .card,
html body .answers,
html body .dim,
html body .mc,
html body .wcard,
html body .step,
html body .tst,
html body .pr,
html body .pb-card,
html body #how-it-works .hiw-card,
html body #how-it-works .hiw-rc,
html body #why-this-class .wy-card,
html body #why-this-class .wy-c,
html body #ls-why .wy-card,
html body #when-to-take .wt-person,
html body #when-to-take .wt-scene,
html body #when-to-take .wt2-scene,
html body #when-to-take .wt-p,
html body #when-to-take .wt-scn,
html body #quotes .qt-card,
html body #ls-quotes .qt-card,
html body #quotes-block .qb-card,
html body #quotes .q,
html body #reports .rp-card,
html body #ls-reports .rp-card,
html body #reports .rp-c,
html body #reports-block .rp-c{position:relative}
html body .card::after,
html body .answers::after,
html body .dim::after,
html body .mc::after,
html body .wcard::after,
html body .step::after,
html body .tst::after,
html body .pr::after,
html body .pb-card::after,
html body #how-it-works .hiw-card::after,
html body #how-it-works .hiw-rc::after,
html body #why-this-class .wy-card::after,
html body #why-this-class .wy-c::after,
html body #ls-why .wy-card::after,
html body #when-to-take .wt-person::after,
html body #when-to-take .wt-scene::after,
html body #when-to-take .wt2-scene::after,
html body #when-to-take .wt-p::after,
html body #when-to-take .wt-scn::after,
html body #quotes .qt-card::after,
html body #ls-quotes .qt-card::after,
html body #quotes-block .qb-card::after,
html body #quotes .q::after,
html body #reports .rp-card::after,
html body #ls-reports .rp-card::after,
html body #reports .rp-c::after,
html body #reports-block .rp-c::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);
}
/* IQ's video cards clip their overflow — keep the ring inside the border */
html body #quotes .qt-card::after{inset:0}
html body .card:hover::after,
html body .answers:hover::after,
html body .dim:hover::after,
html body .mc:hover::after,
html body .wcard:hover::after,
html body .step:hover::after,
html body .tst:hover::after,
html body .pr:hover::after,
html body .pb-card:hover::after,
html body #how-it-works .hiw-card:hover::after,
html body #how-it-works .hiw-rc:hover::after,
html body #why-this-class .wy-card:hover::after,
html body #why-this-class .wy-c:hover::after,
html body #ls-why .wy-card:hover::after,
html body #when-to-take .wt-person:hover::after,
html body #when-to-take .wt-scene:hover::after,
html body #when-to-take .wt2-scene:hover::after,
html body #when-to-take .wt-p:hover::after,
html body #when-to-take .wt-scn:hover::after,
html body #quotes .qt-card:hover::after,
html body #ls-quotes .qt-card:hover::after,
html body #quotes-block .qb-card:hover::after,
html body #quotes .q:hover::after,
html body #reports .rp-card:hover::after,
html body #ls-reports .rp-card:hover::after,
html body #reports .rp-c:hover::after,
html body #reports-block .rp-c:hover::after{opacity:1}

/* ─────────────────────────────────────────────────────────────────
   3 · REPORT-PAGE THUMBNAILS ("paper" mock-ups) — every family has a strip
   of sample pages: keep them paper-like (small radius) but hairline + lift
   shadow instead of ink outline + yellow offset. Their inner mini-elements
   (ribbons, pills, boxes) are family-specific → family files.
   ───────────────────────────────────────────────────────────────── */
html body #sample-report .sm-paper,
html body #sample-report .sp-page,
html body #sample .s-page,
html body #report-sample .sp-pg,
html body .smp .smp-page{
  border:1px solid var(--x-line);border-radius:12px;
  box-shadow:0 1px 2px rgba(15,30,54,.06),0 22px 40px -22px rgba(15,30,54,.42);
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease);
}
html body #sample-report .sm-paper:hover,
html body #sample-report .sp-page:hover,
html body #sample .s-page:hover,
html body #report-sample .sp-pg:hover,
html body .smp .smp-page:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(15,30,54,.08),0 30px 50px -24px rgba(15,30,54,.48)}
/* (.rcard — the tilted "other report card" — lives inside the Ideal Career
   hub HERO, so it is deliberately not touched here) */

/* ─────────────────────────────────────────────────────────────────
   4 · SUNSHINE CALLOUTS + CHIPS (homepage .x-pill / .x-chip)
   ───────────────────────────────────────────────────────────────── */
html body .banner,
html body #how-it-works .hiw-mix,
html body #how-it-works .hiw-labs,
html body #why-this-class .wy-out,
html body #why-this-class .wy-close,
html body #ls-why .wy-close,
html body #when-to-take .wt-now,
html body #when-to-take .wt2-now{
  background:linear-gradient(100deg,#FFF3C4,#FFF9E3);border:1px solid #F4E3A0;border-radius:18px;
  color:#4A3B00;box-shadow:0 10px 24px -20px rgba(90,70,0,.45);
}
html body #how-it-works .hiw-chips li,
html body #how-it-works .hiw-chip,
html body #how-it-works .hiw-chips span{
  background:var(--x-ice);color:var(--x-navy2);border:1px solid var(--x-line);border-radius:999px;font-weight:700;
}
/* hub small tags that were cream with olive-brown text → ice + blue */
html body .pr .ptag,
html body .wcard .ptag{background:var(--x-ice);color:var(--x-blue);border:1px solid var(--x-line)}
html body .wcard .ptag[style]{background:var(--x-ice)!important;color:var(--x-blue)!important}  /* inline on 5 hubs */
html body .mc .why{background:var(--x-ice);color:var(--x-navy2);border:1px solid var(--x-line);border-radius:12px}
html body .tst .av{background:var(--v3-accent);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800}

/* ─────────────────────────────────────────────────────────────────
   5 · FAQ — every variant becomes a stack of soft cards with a round
   +/– button (homepage .x-faq-list): details.q (class pages, pricing,
   compare, coaching), #faq details (IQ), #faq .fq (life skills, learning),
   #faq-block .fq (communication), .fq .fq-q (ideal career), .faq details.
   ───────────────────────────────────────────────────────────────── */
html body details.q,
html body #faq details,
html body #faq .fq,
html body #faq-block .fq,
html body .fq .fq-q,
html body .faq details{
  background:#fff;border:1px solid var(--x-line);border-radius:20px;padding:0 22px;margin:0 0 12px;
  box-shadow:0 10px 24px -20px rgba(15,30,54,.35);transition:box-shadow .3s,border-color .3s;
}
html body details.q[open],
html body #faq details[open],
html body #faq .fq[open],
html body #faq-block .fq[open],
html body .fq .fq-q[open],
html body .faq details[open]{border-color:#B9CFEA;box-shadow:var(--x-shadow)}
html body details.q > summary,
html body #faq details summary,
html body #faq .fq summary,
html body #faq-block .fq summary,
html body .fq .fq-q summary,
html body .faq summary{
  font:800 17px/1.3 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;color:var(--x-ink);
  padding:19px 0;align-items:center;
}
html body details.q > summary:hover,
html body #faq details summary:hover,
html body #faq .fq summary:hover,
html body #faq-block .fq summary:hover,
html body .fq .fq-q summary:hover{color:var(--x-blue)}
/* the "+" glyph variants: become a 32px round button (content stays the page's) */
html body details.q > summary::after,
html body #faq details summary::after,
html body #faq .fq summary::after,
html body #faq-block .fq summary::after,
html body .fq .fq-q summary::after{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--x-ice);color:var(--x-coral);font:800 19px/1 'Inter',system-ui,sans-serif;
  transition:background .25s,color .25s;
}
html body details.q[open] > summary::after,
html body #faq details[open] summary::after,
html body #faq .fq[open] summary::after,
html body #faq-block .fq[open] summary::after,
html body .fq .fq-q[open] summary::after{background:var(--x-coral);color:#fff}
/* the drawn-cross variants (.ic on coaching centres, .fq-ic on life skills) */
html body details.q .ic,
html body #faq .fq .fq-ic{width:32px;height:32px;border-radius:50%;background:var(--x-ice);flex:none;transition:background .25s}
html body details.q[open] .ic,
html body #faq .fq[open] .fq-ic{background:var(--x-coral)}
html body details.q[open] .ic::before,
html body details.q[open] .ic::after,
html body #faq .fq[open] .fq-ic::before,
html body #faq .fq[open] .fq-ic::after{background:#fff}
html body details.q p,
html body details.q .a p,
html body #faq details p,
html body #faq .fq-a p,
html body #faq-block .fq p,
html body .fq .fq-q p{font-size:15.5px;line-height:1.65;color:var(--x-mut)}

/* ─────────────────────────────────────────────────────────────────
   6 · PRICING BLOCK (.pb — on ~86 pages): ice band with contour rings,
   two soft cards, the Complete Profile lit with the gradient edge.
   ───────────────────────────────────────────────────────────────── */
html body .pb{position:relative;overflow:hidden;background:var(--x-ice);border-top:1px solid var(--x-line)}
html body .pb::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 .pb-wrap{position:relative;z-index:1;padding-top:72px;padding-bottom:72px}
html body .pb-h{font-size:clamp(28px,3.8vw,46px);letter-spacing:-.035em;line-height:1.04;margin-bottom:26px;text-wrap:balance}
html body .pb-cards{gap:18px}
html body .pb-card{padding:26px 24px}
html body .pb-card h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
html body .pb-who{color:var(--x-blue)}
html body .pb-what{font-size:14.5px;line-height:1.55}
html body .pb-card.pb-star{background:linear-gradient(180deg,#fff 0%,#F2F7FC 100%);box-shadow:var(--x-shadow-hi)}
html body .pb-card.pb-star::after{opacity:1}
html body .pb-badge{z-index:2;top:-13px;background:var(--x-sun);color:var(--x-ink);border:0;
  font:800 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;
  box-shadow:0 10px 20px -10px rgba(15,30,54,.55)}
html body .pb-foot{font-size:14px}
html body .pb-foot a{color:var(--x-coral-d);font-weight:800}

/* ─────────────────────────────────────────────────────────────────
   7 · NAV DROPDOWN PANEL — only the panel; the nav bar look is untouched
   ───────────────────────────────────────────────────────────────── */
html body .nav-dd-menu{border:1px solid var(--x-line);border-radius:18px;box-shadow:var(--x-shadow-hi);padding:8px}
html body .nav-dd-menu a{border-radius:12px}
html body .nav-dd-menu a:hover{background:var(--x-ice)}
html body .nav-dd-menu a:hover b{color:var(--x-blue)}
html body .nav-soon{background:var(--x-sun);color:var(--x-ink)}

/* ─────────────────────────────────────────────────────────────────
   8 · BUTTONS — ghost + ink (coral .btn-verm already matches)
   ───────────────────────────────────────────────────────────────── */
html body .btn-ghost:not(:is(.hero,header,.nav) .btn-ghost){
  background:#fff;color:var(--x-ink);border:1.5px solid var(--x-line);
  transition:transform .2s var(--x-ease),border-color .2s,color .2s,box-shadow .2s;
}
html body .btn-ghost:not(:is(.hero,header,.nav) .btn-ghost):hover{border-color:var(--x-blue);color:var(--x-blue);transform:translateY(-2px);box-shadow:var(--v3-shadow-sm)}
html body .btn-ink:not(:is(.hero,header,.nav) .btn-ink){background:var(--x-navy2);color:#fff}
html body .btn-ink:not(:is(.hero,header,.nav) .btn-ink):hover{background:var(--x-blue)}
html body .btn-verm:not(:is(.hero,header,.nav) .btn-verm){box-shadow:0 14px 28px -14px rgba(242,86,59,.8)}

/* ─────────────────────────────────────────────────────────────────
   9 · CLASS-PAGE TEMPLATE extras (/<assessment>/class-N/, 44 pages)
   ───────────────────────────────────────────────────────────────── */
html body .grid3{gap:18px}
html body .card{padding:24px 22px}
html body .card h3{font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
html body .card p{font-size:14.5px;line-height:1.55}
/* "Questions your report answers": soft gradient card + green tick circles */
html body .answers{background:linear-gradient(180deg,#fff 0%,#F2F7FC 100%);padding:28px 30px}
html body .answers li{border-bottom-color:var(--x-line);padding-left:40px}
html body .answers li::before{content:"✓";top:50%;left:0;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  display:grid;place-items:center;background:#E4F3EA;color:var(--x-green);font:900 13px/1 'Inter',system-ui,sans-serif}
/* other-class buttons: white tiles, blue on hover, the current one in the family gradient */
html body .clsgrid{gap:12px}
html body .clsbtn:hover{background:var(--x-blue);border-color:var(--x-blue);color:#fff;transform:translateY(-3px);box-shadow:var(--v3-shadow-sm-hi)}
html body .clsbtn:hover small{color:#DCE7F5}
html body .clsbtn.cur{background:var(--v3-accent);border-color:transparent;color:#fff;box-shadow:0 14px 26px -14px rgba(22,50,92,.75)}
html body .clsbtn.cur small{color:#DCE7F5}

/* closing bands (.closing on class/for/compare/pricing, .close on hubs):
   ice ground, soft blue bloom, contour rings, big heading */
html body .closing,
html body .close{
  position:relative;overflow:hidden;border-top:1px solid var(--x-line);
  background:radial-gradient(60% 90% at 50% 0%,rgba(74,143,214,.18) 0%,rgba(74,143,214,0) 70%),
             linear-gradient(180deg,#FFFFFF 0%,#EAF2FB 55%,#DCE9F7 100%);
}
html body .closing{padding-top:80px;padding-bottom:84px}
html body .closing::before,
html body .close::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background:var(--v3-contour)}
html body .closing > .wrap{position:relative;z-index:1}
html body .closing p{font-size:17px}

/* ─────────────────────────────────────────────────────────────────
   10 · HUB TEMPLATE extras (/iq-test/, /learning-test/, /communication-test/,
   /21st-century-life-skills-assessment/, /ideal-career-test/, /for/, coaching)
   ───────────────────────────────────────────────────────────────── */
/* track-record strip → navy chapter band with big white numbers */
html body .strip{position:relative;overflow:hidden;background:var(--v3-navy-band);border:0;color:#fff}
html body .strip::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-radial-gradient(circle at 80% 30%,transparent 0 34px,rgba(255,255,255,.045) 34px 35px)}
html body .strip-in{position:relative;z-index:1;padding:44px 0;column-gap:48px}
html body .strip .st b{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
html body .strip .st span{color:#C6D3E6;font-size:14px}

/* ice bands get the map contour */
html body .matches,
html body .sci{position:relative;background:var(--x-ice);border-color:var(--x-line)}
html body .matches::before,
html body .sci::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 .matches > .wrap,
html body .sci > .wrap{position:relative;z-index:1}

/* the near-black report band → navy chapter band */
html body .report{position:relative;overflow:hidden;background:var(--v3-navy-band)}
html body .report::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-radial-gradient(circle at 80% 30%,transparent 0 34px,rgba(255,255,255,.045) 34px 35px)}
html body .report > .wrap{position:relative;z-index:1}
html body .report .head p{color:#C6D3E6}
html body .report .tab[aria-selected="true"]{box-shadow:0 12px 26px -12px rgba(255,217,59,.6)}
html body .report .panel{border-radius:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
html body .report .p-head{background:var(--v3-accent);color:#fff;border-bottom:0}
html body .report .p-head span{color:#DCE7F5}

/* icon tiles: keep each zone colour, add the homepage tile's sheen + depth */
html body .dim .ico{width:48px;height:48px;border-radius:15px;
  background-image:linear-gradient(145deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 55%,rgba(0,0,0,.16) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6)}
html body .dim .ico svg{width:22px;height:22px}
/* numbered steps: ink square with sunshine digit → gradient tile, white digit */
html body .step .num{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--v3-accent);color:#fff;font:800 20px/1 'Bricolage Grotesque',sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 22px -12px rgba(15,30,54,.7);margin-bottom:16px}
/* the dark "hot" price card → navy gradient */
html body .pr.hot{background:var(--v3-navy-band);border-color:transparent;box-shadow:var(--x-shadow-hi)}
html body .pr.hot .ptag{background:var(--x-sun);color:var(--x-ink);border-color:var(--x-sun)}
/* try-one-question card: soft, no hover lift (it is interactive) */
html body .hook{border-radius:26px;box-shadow:var(--x-shadow-hi)}
html body .opt:hover{border-color:var(--x-blue)}
html body .opt[aria-pressed="true"]{border-color:var(--x-coral);background:#FFF6F1}
html body .lane a{color:var(--x-blue)}

/* ─────────────────────────────────────────────────────────────────
   11 · /for/ pages + compare: the "Recommended" badge on test tiles
   (shared .tst template). Family-only boxes (.ben, .inq, .pcard.us,
   .scard.win, .tblwrap …) are left to the family files.
   ───────────────────────────────────────────────────────────────── */
html body .tst .badge{background:var(--x-sun);color:var(--x-ink);border:0;z-index:2;box-shadow:0 8px 16px -10px rgba(15,30,54,.55)}
html body .tst.star{border:1px solid var(--x-line);box-shadow:var(--x-shadow-hi)}

/* ─────────────────────────────────────────────────────────────────
   12 · INLINE style="" — the only place !important is used.
   The hub "Which class is your child in?" box and its class tiles are
   written inline on 5 hubs; any other inline ink outline / sunshine offset
   shadow outside hero, nav and footer gets the same soft treatment.
   ───────────────────────────────────────────────────────────────── */
html body :is([style*="px 0 #FFD93B"],[style*="px 0 #ffd93b"],[style*="px 0 var(--sun"]):not(:is(.hero,header,.nav,footer,.f2) *){
  box-shadow:var(--x-shadow)!important;
}
html body :is([style*="solid #14181F"],[style*="solid #14181f"],[style*="solid var(--ink"]):not(:is(.hero,header,.nav,footer,.f2) *){
  border-color:var(--x-line)!important;border-width:1px!important;
}
/* class tiles: cream / mint / lilac fills with olive-brown, green, purple
   digits → white tiles, navy digits, a band-coloured top stripe in the
   assessment blues (3–5 sky · 6–8 career blue · 9–12 periwinkle) */
html body .clsgrid > a[style*="border:2.5px solid"]{
  background:#fff!important;border:1px solid var(--x-line)!important;border-radius:18px!important;
  box-shadow:inset 0 4px 0 var(--band,#2B6CB8),var(--v3-shadow-sm);
  transition:transform .25s var(--x-ease),box-shadow .25s var(--x-ease)!important;
}
html body .clsgrid > a[style*="#8A6A00"]{--band:#2475B8}
html body .clsgrid > a[style*="#0F6B4F"]{--band:#2A5E9C}
html body .clsgrid > a[style*="#5B4BC4"]{--band:#4A55C8}
html body .clsgrid > a[style*="border:2.5px solid"]:hover{box-shadow:inset 0 4px 0 var(--band,#2B6CB8),var(--v3-shadow-sm-hi)}
html body .clsgrid > a[style*="border:2.5px solid"] > span:first-child{color:var(--x-navy2)!important}
html body .clsgrid > a[style*="border:2.5px solid"] > span + span{color:var(--band,#2B6CB8)!important}

/* ─────────────────────────────────────────────────────────────────
   13 · MOTION — CSS-only reveal where the browser supports scroll-driven
   animations (animates `translate`, so the hover `transform` lift still
   works). Fill is FORWARDS ONLY: before a card starts entering, or if the
   view timeline is inactive/stale (hidden tab, headless, print), the
   animation has no effect and the card is simply visible. Off for
   reduced motion and print.
   ───────────────────────────────────────────────────────────────── */
@keyframes v3-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@media screen and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html body :is(.card,.answers,.dim,.mc,.wcard,.step,.tst,.pr,.pb-card,.jc,
      #how-it-works .hiw-pcard,#how-it-works .hiw-pc,
      #why-this-class .wy-card,#why-this-class .wy-c,#ls-why .wy-card,
      #when-to-take .wt-person,#when-to-take .wt-scene,#when-to-take .wt2-scene,#when-to-take .wt-p,#when-to-take .wt-scn,
      #when-to-take .wt-card,#when-to-take .wt-c,#when-to-take .wt2-moment,
      #quotes .qt-card,#ls-quotes .qt-card,#quotes-block .qb-card,#quotes .q,
      #reports .rp-card,#ls-reports .rp-card,#reports .rp-c,#reports-block .rp-c){
      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(.card,.answers,.dim,.mc,.wcard,.step,.tst,.pr,.pb-card,.jc,.clsbtn){transition:none}
  html body :is(.card,.answers,.dim,.mc,.wcard,.step,.tst,.pr,.pb-card,.jc,.clsbtn):hover{transform:none}
}

/* ─────────────────────────────────────────────────────────────────
   14 · PHONES — keep 16–24px gutters, no horizontal scroll at 375px
   ───────────────────────────────────────────────────────────────── */
@media(max-width:620px){
  html body .pb-wrap{padding-top:56px;padding-bottom:56px}
  html body .answers{padding:22px 18px}
  html body details.q,html body #faq details,html body #faq .fq,html body #faq-block .fq,html body .fq .fq-q,html body .faq details{padding:0 16px;border-radius:18px}
  html body details.q > summary,html body #faq details summary,html body #faq .fq summary,html body #faq-block .fq summary,html body .fq .fq-q summary,html body .faq summary{font-size:16px;padding:16px 0}
  html body .closing{padding-top:60px;padding-bottom:64px}
  html body .strip-in{padding:34px 0}
  html body .eyebrow:not(.hero .eyebrow),
  html body .pb-eyebrow.pb-eyebrow,
  html body :is(section,#_v3) :is([class$="-eyebrow"],[class*="-eyebrow "],[class$="-eye"],[class$="-eb"]):not(.hero *){font-size:11px;letter-spacing:.12em;max-width:100%}
}