/* ═══════════════════════════════════════════════════════════════════
   site-v3-assess.css — family layer for the 44 assessment CLASS pages
   (/iq-test/class-3…12/, /21st-century-life-skills-assessment/class-3…12/,
    /communication-test/class-3…12/, /learning-test/class-3…12/,
    /ideal-career-test/class-9…12/). Loads AFTER site-v3.css.

   Her 1 Oct 2026 brief: hero colours stay; every box below it moves to the
   homepage language (landing-v3.css): white · ice + contour rings · one navy
   chapter band, soft hairline cards, gradient icon tiles, big Bricolage
   headings, coral actions, steel-blue proof. No 2–3px ink borders, no
   yellow offset shadows, no cream, no brown/rust, no red on a child's score.

   SCOPE: every rule starts with  html body.v3a.v3a-cls  — the class pages
   carry <body class="v3a v3a-<family> v3a-cls">. The five hubs link this
   file too but carry .v3a-hub, so nothing here reaches them.
   Specificity: one class above site-v3.css (which is "html body …"), so
   load order never matters. !important ONLY against inline style="".

   SECTION RHYTHM (same on every family, top → bottom):
     template  T1+T2 white · T3+T4 ice (answers + class picker) · closing
     injected  how-it-works white · why ice · when white · [LS wheel ice] ·
               sample report NAVY (the one chapter band) · quotes ice ·
               FAQ white · pricing ice (site-v3.css)
     Ideal Career: … sample NAVY · closing · quotes white · FAQ ice ·
               call-back white · pricing ice
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0 · FAMILY ACCENT (tiles, current class button, report bars)
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls{
  --v3-accent:var(--g-career);
  --v3a-tile:var(--v3-accent);
  --v3a-tile-soft:linear-gradient(145deg,#FFFFFF 0%,#E6F0FA 100%);
  --v3a-pad:88px;
  --v3a-hair:#CFDAE8;                       /* hairline for tiny elements inside paper mock-ups */
  --v3a-mint-line:#A8D9BF;
}
html body.v3a.v3a-cls.v3a-iq{--v3-accent:var(--g-iq)}
html body.v3a.v3a-cls.v3a-comm{--v3-accent:var(--g-comm)}
html body.v3a.v3a-cls.v3a-learn{--v3-accent:var(--g-learn)}
html body.v3a.v3a-cls.v3a-life{--v3-accent:var(--g-life)}
html body.v3a.v3a-cls.v3a-career{--v3-accent:var(--g-career)}

/* ─────────────────────────────────────────────────────────────────
   1 · SECTION RHYTHM — template sections (no id; inline padding-top)
   T1 = "What this age needs"  (inline padding-top:26px)
   T2 = "What it measures"     (inline padding-top:0, has .grid3)
   T3 = "Questions … answers"  (has .answers)
   T4 = "… by class"           (has .clsgrid)
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls section:not([id])[style*="padding-top:26px"]{padding-top:var(--v3a-pad)!important;padding-bottom:44px}
html body.v3a.v3a-cls section:not([id])[style*="padding-top:0"]:has(.grid3){padding-bottom:var(--v3a-pad)}
html body.v3a.v3a-cls section:not([id]):has(.answers),
html body.v3a.v3a-cls section:not([id]):has(.clsgrid){position:relative;overflow:hidden;background:var(--x-ice)}
html body.v3a.v3a-cls section:not([id]):has(.answers){padding-top:var(--v3a-pad)!important;padding-bottom:48px;border-top:1px solid var(--x-line)}
html body.v3a.v3a-cls section:not([id]):has(.clsgrid){padding-bottom:var(--v3a-pad)}
html body.v3a.v3a-cls section:not([id]):has(.answers)::before,
html body.v3a.v3a-cls section:not([id]):has(.clsgrid)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6}
html body.v3a.v3a-cls section:not([id]):has(.answers)::before{
  background:repeating-radial-gradient(circle at 10% 22%,transparent 0 30px,rgba(43,108,184,.07) 30px 31px);
  -webkit-mask-image:radial-gradient(60% 80% at 10% 22%,#000 0%,transparent 75%);mask-image:radial-gradient(60% 80% at 10% 22%,#000 0%,transparent 75%)}
html body.v3a.v3a-cls section:not([id]):has(.clsgrid)::before{
  background:repeating-radial-gradient(circle at 92% 80%,transparent 0 38px,rgba(43,108,184,.06) 38px 39px);
  -webkit-mask-image:radial-gradient(60% 90% at 92% 80%,#000 0%,transparent 75%);mask-image:radial-gradient(60% 90% at 92% 80%,#000 0%,transparent 75%)}
html body.v3a.v3a-cls section:not([id]):has(.answers) > .wrap,
html body.v3a.v3a-cls section:not([id]):has(.clsgrid) > .wrap{position:relative;z-index:1}
html body.v3a.v3a-cls .head{max-width:760px;margin-bottom:32px}
html body.v3a.v3a-cls .head h2{margin-bottom:10px}

/* ─────────────────────────────────────────────────────────────────
   2 · SECTION RHYTHM — injected sections (same ids on every family)
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls :is(#how-it-works,#why-this-class,#ls-why,#when-to-take,#sample-report,#sample,#report-sample,#quotes,#ls-quotes,#quotes-block,#faq,#faq-block,#call-back){
  position:relative;padding-top:var(--v3a-pad);padding-bottom:var(--v3a-pad);border-top:0;border-bottom:0;
}
html body.v3a.v3a-cls #ls-wheel{position:relative;padding:var(--v3a-pad) 0!important}
/* Ideal Career writes padding-top:0 inline on two of them */
html body.v3a.v3a-cls :is(#how-it-works,#when-to-take)[style*="padding-top:0"]{padding-top:var(--v3a-pad)!important}
html body.v3a.v3a-cls :is(#how-it-works,#when-to-take,#faq,#faq-block,#call-back){background:#fff}

/* ice chapters + faint contour rings (homepage .x-ice.x-contour) */
html body.v3a.v3a-cls :is(#why-this-class,#ls-why,#quotes,#ls-quotes,#quotes-block){background:var(--x-ice);overflow:hidden}
html body.v3a.v3a-cls #ls-wheel{background:var(--x-ice)!important;overflow:hidden}
html body.v3a.v3a-cls :is(#why-this-class,#ls-why,#ls-wheel,#quotes,#ls-quotes,#quotes-block)::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.v3a.v3a-cls :is(#why-this-class,#ls-why,#ls-wheel,#quotes,#ls-quotes,#quotes-block) > :not(style,script){position:relative;z-index:1}

/* Ideal Career runs closing → quotes → FAQ → call-back → pricing, so its
   quotes go white and its FAQ goes ice to keep the alternation */
html body.v3a.v3a-cls.v3a-career #quotes{background:#fff}
html body.v3a.v3a-cls.v3a-career #quotes::before{content:none}
html body.v3a.v3a-cls.v3a-career #faq{background:var(--x-ice);overflow:hidden}
html body.v3a.v3a-cls.v3a-career #faq::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.v3a.v3a-cls.v3a-career #faq > :not(style,script){position:relative;z-index:1}
html body.v3a.v3a-cls.v3a-career #call-back{border-top:0}

/* one column edge: Life Skills' own sections use 1060/1120px wraps, the
   template uses 1000px — at desktop the headings jumped 164→134→104px.
   Same 1000px column everywhere now (specificity 1,4,2 > the page's 1,1,0) */
html body.v3a.v3a-cls.v3a-life :is(#ls-why .wy-wrap,#ls-wheel .lsw-grid,#sample .s-wrap,#ls-quotes .qt-wrap){max-width:1000px}

/* no white seam above the footer: footer.sc-f (site-chrome.js) has
   margin-top:40px, which showed 40px of white body between the ice pricing
   band and the footer. The negative margin collapses with it to 0; the
   footer itself is untouched (one .pb per class page, always the last band) */
html body.v3a.v3a-cls .pb{margin-bottom:-40px}

/* ─────────────────────────────────────────────────────────────────
   3 · HEADINGS, LEADS, SMALL LABELS
   ───────────────────────────────────────────────────────────────── */
/* section heads: room for two-line headings, homepage lead size */
html body.v3a.v3a-cls :is(#how-it-works,#why-this-class,#ls-why,#when-to-take,#sample-report,#sample,#report-sample,#quotes-block,#faq-block) h2:not(:where(.hiw-card,.hiw-rc) *){max-width:820px}
html body.v3a.v3a-cls :is(#how-it-works,#when-to-take,#sample-report,#sample,#report-sample,#quotes,#ls-quotes,#quotes-block) :is(.hiw-lead,.hiw-intro,.wt2-lead,.sm-lead,.s-sub,.smp-lede,.qt-sub,.qb-sub,.q-sub){font-size:17px;line-height:1.6;color:var(--x-mut)}
html body.v3a.v3a-cls :is(#quotes,#ls-quotes,#quotes-block) :is(.qt-sub,.qb-sub,.q-sub){text-wrap:pretty}
html body.v3a.v3a-cls #quotes .q-head{max-width:820px}
html body.v3a.v3a-cls :is(#quotes,#ls-quotes,#quotes-block) :is(.qt-sub,.qb-sub,.q-sub) a{color:var(--x-blue);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* the small caps labels inside sections ("How it works", "The right
   moments" …): steel blue with a short gradient rule in front */
html body.v3a.v3a-cls :is(#how-it-works,#when-to-take) :is(.hiw-col-t,.hiw-params-t,.hiw-params-h,.wt-sub,.wt2-sub){
  display:flex;align-items:center;gap:10px;color:var(--x-blue)}
html body.v3a.v3a-cls :is(#how-it-works,#when-to-take) :is(.hiw-col-t,.hiw-params-t,.hiw-params-h,.wt-sub,.wt2-sub)::before{
  content:"";flex:none;width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,#4A8FD6,#F2563B)}

/* Life Skills wheel section — eyebrow + heading are inline-styled */
html body.v3a.v3a-cls #ls-wheel .lsw-grid > div:first-child > p:first-child{
  display:inline-flex!important;align-items:center;gap:8px;
  font:800 12px/1.2 'Inter',system-ui,sans-serif!important;letter-spacing:.14em!important;color:var(--x-blue)!important;
  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:0 0 16px!important}
html body.v3a.v3a-cls #ls-wheel h2{font-size:clamp(28px,3.8vw,46px)!important;letter-spacing:-.035em;line-height:1.04!important;text-wrap:balance;margin-bottom:16px!important}
html body.v3a.v3a-cls #ls-wheel .lsw-grid > div:first-child > p:nth-child(3){font-size:17px;line-height:1.6}
html body.v3a.v3a-cls #ls-wheel .lsw-grid > div:first-child > div{background:#fff;border:1px solid var(--x-line);border-radius:18px;padding:12px 14px;box-shadow:var(--v3-shadow-sm);align-items:center!important}
html body.v3a.v3a-cls #ls-wheel .lsw-grid > div:first-child > div > span:first-child{width:40px!important;height:40px!important;border-radius:13px!important;font-size:19px!important}
html body.v3a.v3a-cls #ls-wheel .lsw-grid > div:last-child svg{filter:drop-shadow(0 24px 40px rgba(15,30,54,.22))}

/* ─────────────────────────────────────────────────────────────────
   4 · GRADIENT ICON TILES
   a) emoji that already sit in their own element → real tiles
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls #when-to-take .wt-person .wt-emo,
html body.v3a.v3a-cls #when-to-take .wt2-who span,
html body.v3a.v3a-cls #when-to-take .wt-p .who i,
html body.v3a.v3a-cls #when-to-take .wt-scn .wt-who span{
  display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;
  background:var(--v3a-tile);font-size:22px;line-height:1;font-style:normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6);
}
html body.v3a.v3a-cls #when-to-take .wt-person .wt-emo{margin-bottom:14px}
html body.v3a.v3a-cls #when-to-take :is(.wt2-who,.wt-p .who,.wt-scn .wt-who){gap:12px;margin-bottom:14px;color:var(--x-coral-d)}
html body.v3a.v3a-cls #when-to-take .wt-person .wt-role{color:var(--x-coral-d)}
html body.v3a.v3a-cls #how-it-works .hiw-item .em{
  display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-size:19px;line-height:1;
  background:var(--v3a-tile-soft);border:1px solid var(--x-line);box-shadow:0 8px 16px -12px rgba(15,30,54,.5)}
html body.v3a.v3a-cls #how-it-works .hiw-item{gap:14px;align-items:flex-start;margin-bottom:16px}

/* b) emoji written as the first character of a heading/list item →
   ::first-letter becomes the tile (works for ZWJ + VS16 emoji in Chrome,
   Safari and Firefox; only used where EVERY page of that family starts the
   text with an emoji — checked on all 44 pages) */

/* T2 "What it measures" cards (all families): big tile ABOVE the title */
html body.v3a.v3a-cls section:not([id])[style*="padding-top:0"]:has(.grid3) .card h3{font-size:19px;line-height:1.25}
html body.v3a.v3a-cls section:not([id])[style*="padding-top:0"]:has(.grid3) .card h3::first-letter{
  float:left;margin:0 100% 16px 0;padding:0 11px;font-size:22px;line-height:48px;border-radius:15px;
  background:var(--v3a-tile)}
/* Communication: 🗣️ (dark slate) and 🧍 vanish on the dark indigo tile →
   the family's soft tile, as on its other icon tiles (46 + 2px border = 48) */
html body.v3a.v3a-cls.v3a-comm section:not([id])[style*="padding-top:0"]:has(.grid3) .card h3::first-letter{
  background:var(--v3a-tile-soft);border:1px solid var(--x-line);line-height:46px}

/* "How it works" zone lists (IQ, Life Skills): hanging soft tiles */
html body.v3a.v3a-cls:is(.v3a-iq,.v3a-life) #how-it-works .hiw-zones{gap:16px}
html body.v3a.v3a-cls:is(.v3a-iq,.v3a-life) #how-it-works .hiw-zones li{padding-left:54px;min-height:40px}
html body.v3a.v3a-cls:is(.v3a-iq,.v3a-life) #how-it-works .hiw-zones li::first-letter{
  float:left;margin:0 14px 0 -54px;padding:0 9px;font-size:19px;line-height:38px;border-radius:13px;
  background:var(--v3a-tile-soft);border:1px solid var(--x-line)}
/* Ideal Career: the five step blocks */
html body.v3a.v3a-cls.v3a-career #how-it-works .hiw-step{padding-left:56px;min-height:58px}
html body.v3a.v3a-cls.v3a-career #how-it-works .hiw-step::first-letter{
  float:left;margin:2px 14px 0 -56px;padding:0 9px;font-size:19px;line-height:38px;border-radius:13px;
  background:var(--v3a-tile-soft);border:1px solid var(--x-line)}

/* parameter cards + "right moments" cards: small soft tile left of the title */
html body.v3a.v3a-cls:is(.v3a-iq,.v3a-life) #how-it-works .hiw-pcard h3,
html body.v3a.v3a-cls.v3a-comm #how-it-works .hiw-pc > b,
html body.v3a.v3a-cls.v3a-career #how-it-works .hiw-pcard > b,
html body.v3a.v3a-cls.v3a-iq #when-to-take .wt-card h3,
html body.v3a.v3a-cls.v3a-life #when-to-take .wt2-moment h3,
html body.v3a.v3a-cls.v3a-comm #when-to-take .wt-c > b,
html body.v3a.v3a-cls.v3a-learn #when-to-take .wt-card > b{
  display:flow-root;position:relative;padding:7px 0 0 44px;min-height:34px;line-height:1.3;margin-bottom:8px}
html body.v3a.v3a-cls:is(.v3a-iq,.v3a-life) #how-it-works .hiw-pcard h3::first-letter,
html body.v3a.v3a-cls.v3a-comm #how-it-works .hiw-pc > b::first-letter,
html body.v3a.v3a-cls.v3a-career #how-it-works .hiw-pcard > b::first-letter,
html body.v3a.v3a-cls.v3a-iq #when-to-take .wt-card h3::first-letter,
html body.v3a.v3a-cls.v3a-life #when-to-take .wt2-moment h3::first-letter,
html body.v3a.v3a-cls.v3a-comm #when-to-take .wt-c > b::first-letter,
html body.v3a.v3a-cls.v3a-learn #when-to-take .wt-card > b::first-letter{
  float:left;margin:-7px 0 0 -44px;padding:0 7px;font-size:16px;line-height:32px;border-radius:11px;
  background:var(--v3a-tile-soft);border:1px solid var(--x-line)}
/* Learning "who" labels carry the emoji inline → tile from the first letter */
html body.v3a.v3a-cls.v3a-learn #when-to-take .wt-scene .wt-who{display:flow-root;padding:14px 0 0 58px;min-height:46px;line-height:1.35;margin-bottom:14px;color:var(--x-coral-d)}
html body.v3a.v3a-cls.v3a-learn #when-to-take .wt-scene .wt-who::first-letter{
  float:left;margin:-14px 0 0 -58px;padding:0 11px;font-size:21px;line-height:46px;border-radius:15px;background:var(--v3a-tile)}

/* ─────────────────────────────────────────────────────────────────
   5 · CARDS the base layer does not reach + card text scale
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls .card p,
html body.v3a.v3a-cls :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c) p,
html body.v3a.v3a-cls #when-to-take :is(.wt-person .wt-give,.wt2-scene p,.wt-p p,.wt-scene p,.wt-scn p){font-size:14.5px;line-height:1.6}
html body.v3a.v3a-cls :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c){padding:22px 22px 20px}
html body.v3a.v3a-cls :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c) :is(h3,b){font-family:'Bricolage Grotesque',sans-serif;font-size:17px;letter-spacing:-.015em;line-height:1.3;margin-bottom:8px}
html body.v3a.v3a-cls :is(#why-this-class,#ls-why) :is(.wy-grid,.wy-g,.wy-3){gap:18px}
/* a thin family-gradient accent on top of the "why" cards (and the
   template's "What this age needs" cards, which say the same thing) */
html body.v3a.v3a-cls section:not([id])[style*="padding-top:26px"] .card::before,
html body.v3a.v3a-cls :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c)::before{
  content:"";position:absolute;left:22px;top:-1px;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--v3-accent)}
html body.v3a.v3a-cls #when-to-take :is(.wt-person,.wt2-scene,.wt-p,.wt-scene,.wt-scn){padding:22px 22px 20px}
html body.v3a.v3a-cls #when-to-take :is(.wt-person .wt-sit,.wt2-scene b,.wt-p b,.wt-scene b,.wt-scn b){font-family:'Bricolage Grotesque',sans-serif;font-size:17px;letter-spacing:-.015em;line-height:1.3}
html body.v3a.v3a-cls #when-to-take :is(.wt-people,.wt2-scenes,.wt-fam,.wt-grid,.wt-3){gap:18px}
html body.v3a.v3a-cls #when-to-take :is(.wt-card,.wt-c,.wt2-moment){padding:18px 18px 16px}
html body.v3a.v3a-cls #how-it-works :is(.hiw-pcard,.hiw-pc){padding:18px 18px 16px}
html body.v3a.v3a-cls #how-it-works :is(.hiw-params-grid,.hiw-pgrid){gap:16px}
html body.v3a.v3a-cls #how-it-works .hiw-params{border-top-color:var(--x-line)}
html body.v3a.v3a-cls #how-it-works :is(.hiw-chip,.hiw-chips span,.hiw-chips li){max-width:100%;white-space:normal}

/* Learning: the "you walk away with" line joins the sunshine callouts; the
   "why now / how often" lines become soft ice notes */
html body.v3a.v3a-cls.v3a-learn #why-this-class .wy-line{
  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);padding:14px 18px}
html body.v3a.v3a-cls.v3a-learn #when-to-take .wt-line{background:var(--x-ice);border:1px solid var(--x-line);border-radius:16px;padding:13px 16px}
html body.v3a.v3a-cls.v3a-learn #when-to-take .wt-card{background:#fff}
/* Ideal Career callouts are a coral left rule with no padding → sunshine pill */
html body.v3a.v3a-cls.v3a-career #why-this-class .wy-out,
html body.v3a.v3a-cls.v3a-career #when-to-take .wt-now{padding:14px 18px;border-left-width:1px}
html body.v3a.v3a-cls #why-this-class .wy-out,
html body.v3a.v3a-cls :is(#ls-why,#why-this-class) .wy-close,
html body.v3a.v3a-cls #when-to-take :is(.wt-now,.wt2-now){padding:14px 18px;line-height:1.6;max-width:none}

/* ─────────────────────────────────────────────────────────────────
   6 · "WHAT THE REPORT GIVES YOU" preview card + checklists
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls #how-it-works :is(.hiw-card,.hiw-rc){padding:24px 24px 20px;box-shadow:var(--x-shadow-hi)}
/* SAMPLE stamps: dashed amber → sunshine pill (homepage badge) */
html body.v3a.v3a-cls #how-it-works :is(.hiw-tag,.hiw-rc-h span,.hiw-card-t em){
  background:var(--x-sun);color:var(--x-ink);border:0;border-radius:999px;transform:none;padding:4px 10px;letter-spacing:.12em;
  box-shadow:0 6px 12px -8px rgba(15,30,54,.5)}
html body.v3a.v3a-cls #how-it-works :is(.hiw-rc-h,.hiw-card-t,.hiw-lockup){border-bottom:1px solid var(--x-line)}
html body.v3a.v3a-cls #how-it-works .hiw-card-top{border-bottom-width:1px}
html body.v3a.v3a-cls #how-it-works .hiw-bar,
html body.v3a.v3a-cls #how-it-works .hiw-bar .tr{background:var(--x-ice);border:1px solid var(--x-line)}
html body.v3a.v3a-cls.v3a-learn #how-it-works .hiw-bar{background:transparent;border:0}
html body.v3a.v3a-cls #how-it-works .hiw-match{background:var(--x-ice);border:1px solid var(--x-line)}
html body.v3a.v3a-cls #how-it-works .hiw-mi i{background:linear-gradient(180deg,#4FB0EC,#2475B8)}
html body.v3a.v3a-cls #how-it-works .hiw-planline{background:var(--x-ice)}
/* checklists: coral ✓ → green tick circles (homepage Classic card) */
html body.v3a.v3a-cls #how-it-works :is(.hiw-checks,.hiw-check,.hiw-list) li{padding-left:36px;border-bottom-color:var(--x-line)}
html body.v3a.v3a-cls #how-it-works :is(.hiw-checks,.hiw-check,.hiw-list) li::before{
  content:"\2713";left:0;top:calc(.5em + 1px);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#E4F3EA;color:var(--x-green);font:900 12px/1 'Inter',system-ui,sans-serif}
html body.v3a.v3a-cls.v3a-comm #how-it-works .hiw-check li::before{top:calc(.25em + 1px)}
/* primary actions inside sections: coral with the soft coral glow */
html body.v3a.v3a-cls :is(#how-it-works a.hiw-cta,#how-it-works .hiw-cta a,#how-it-works .hiw-cta-row a,#when-to-take a.wt-cta,#when-to-take .wt-cta a,#when-to-take .wt-cta-row a,#when-to-take a.hiw-cta,#sample-report .sm-cta,#sample-report .sp-cta a,#sample-report .smp-cta,#report-sample .btn,#sample .s-cta){
  box-shadow:0 14px 28px -14px rgba(242,86,59,.8)}
html body.v3a.v3a-cls #sample .s-cta{border:0;font-weight:700;padding:14px 26px;transition:transform .2s var(--x-ease),background .2s}
html body.v3a.v3a-cls #sample .s-cta:hover{transform:translateY(-2px);background:var(--x-coral-d)}

/* ─────────────────────────────────────────────────────────────────
   7 · SAMPLE REPORT → the NAVY chapter band (paper pages on a dark desk)
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls :is(#sample-report,#sample,#report-sample){background:var(--v3-navy-band);color:#fff;overflow:hidden}
html body.v3a.v3a-cls :is(#sample-report,#sample,#report-sample)::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.v3a.v3a-cls :is(#sample-report,#sample,#report-sample) > :not(style,script){position:relative;z-index:1}
html body.v3a.v3a-cls :is(#sample-report,#sample,#report-sample) :is(.sm-eyebrow,.s-eyebrow,.sp-eb,.sp-eyebrow,.smp-eye){
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--x-sun);box-shadow:none}
html body.v3a.v3a-cls :is(#sample-report,#sample,#report-sample) h2{color:#fff}
html body.v3a.v3a-cls :is(#sample-report,#sample,#report-sample) :is(.sm-lead,.sm-also,.sm-note,.s-sub,.s-note,.sp-note,.smp-lede,.smp-note){color:#C6D3E6}
html body.v3a.v3a-cls #sample-report .sm-also b{color:#fff}
html body.v3a.v3a-cls #sample-report .sm-cap,
html body.v3a.v3a-cls #sample .s-cap,
html body.v3a.v3a-cls #sample-report figcaption{color:#fff}
html body.v3a.v3a-cls #sample-report .sm-cap small,
html body.v3a.v3a-cls #sample .s-cap small,
html body.v3a.v3a-cls #sample-report figcaption em{color:#AFC2DA}
html body.v3a.v3a-cls :is(#sample-report,#report-sample) :is(.sm-strip,.sp-strip,.smp-strip){scrollbar-color:rgba(255,255,255,.35) transparent}
/* papers on navy: no hairline needed, deeper shadow */
html body.v3a.v3a-cls #sample-report .sm-paper,
html body.v3a.v3a-cls #sample-report .sp-page,
html body.v3a.v3a-cls #sample .s-page,
html body.v3a.v3a-cls #report-sample .sp-pg,
html body.v3a.v3a-cls .smp .smp-page{border-color:rgba(255,255,255,.65);box-shadow:0 2px 4px rgba(0,0,0,.18),0 30px 50px -24px rgba(0,0,0,.65)}
html body.v3a.v3a-cls #sample-report .sm-paper:hover,
html body.v3a.v3a-cls #sample-report .sp-page:hover,
html body.v3a.v3a-cls #sample .s-page:hover,
html body.v3a.v3a-cls #report-sample .sp-pg:hover,
html body.v3a.v3a-cls .smp .smp-page:hover{box-shadow:0 2px 4px rgba(0,0,0,.2),0 40px 60px -26px rgba(0,0,0,.75)}

/* SAMPLE ribbons: coral / ink-edged → one sunshine ribbon everywhere */
html body.v3a.v3a-cls #sample-report .sm-rib,
html body.v3a.v3a-cls #sample .s-rib,
html body.v3a.v3a-cls #sample-report .sp-rib,
html body.v3a.v3a-cls .smp .smp-rib,
html body.v3a.v3a-cls #report-sample .sp-pg::after{background:var(--x-sun);color:var(--x-ink);border:0;box-shadow:0 2px 6px -2px rgba(15,30,54,.35)}

/* mini-elements inside the paper mock-ups: ink outlines → hairlines,
   ink fills → navy (IQ · Life Skills · Communication · Learning · Ideal Career) */
html body.v3a.v3a-cls #sample-report .sm-th{border-bottom-color:#9FB3CC}
html body.v3a.v3a-cls #sample-report .sm-box{border-color:#8FA3BD}
html body.v3a.v3a-cls #sample .s-h{background:var(--x-navy2)}
html body.v3a.v3a-cls #sample :is(.s-arch,.s-card){border:1px solid var(--v3a-hair)}
html body.v3a.v3a-cls #sample .s-arch{background:var(--x-ice2)}
html body.v3a.v3a-cls #sample .s-pill{border-color:var(--v3a-mint-line)}
html body.v3a.v3a-cls #sample :is(.s-dot,.s-num){border-color:rgba(15,30,54,.22)}
html body.v3a.v3a-cls #sample .s-bar{background:var(--x-ice2)}
/* the mini wheel takes the four area colours of the real wheel above it
   (cognitive blue · digital amber · interpersonal green · intrapersonal violet) */
html body.v3a.v3a-cls #sample .s-wheel{border:2px solid #fff;box-shadow:0 0 0 1px var(--v3a-hair);
  background:conic-gradient(#2E5EAA 0 25%,#C97F10 0 50%,#188A5E 0 75%,#6D5BD0 0)}
html body.v3a.v3a-cls #sample .s-wheel::before{background:repeating-conic-gradient(#fff 0 1.4deg,transparent 0 22.5deg);opacity:.7}
html body.v3a.v3a-cls #sample .s-wheel::after{border:1px solid var(--v3a-hair)}
html body.v3a.v3a-cls #report-sample .sp-t{border-bottom:1px solid var(--x-line)}
html body.v3a.v3a-cls #report-sample .sp-pill{border-color:var(--v3a-mint-line)}
html body.v3a.v3a-cls #report-sample .sp-box{border:1px solid var(--v3a-hair)}
html body.v3a.v3a-cls #report-sample .sp-lab{background:var(--x-ice2)}
html body.v3a.v3a-cls #sample-report .sp-title{border-bottom-color:var(--x-line)}
html body.v3a.v3a-cls #sample-report .sp-row i{border-color:var(--v3a-hair)}
html body.v3a.v3a-cls #sample-report :is(.sp-sc,.sp-two div){border-color:var(--v3a-hair)}
html body.v3a.v3a-cls #sample-report .sp-li b{background:var(--x-navy2)}
html body.v3a.v3a-cls #sample-report .sp-foot{border-top-color:var(--x-line)}
html body.v3a.v3a-cls .smp .smp-lk{border-bottom:1px solid var(--x-line)}
html body.v3a.v3a-cls .smp .smp-bar{border-color:var(--v3a-hair);background:var(--x-ice)}
html body.v3a.v3a-cls .smp .smp-rank em{background:var(--x-navy2)}
html body.v3a.v3a-cls .smp .smp-card{border:1px solid var(--v3a-hair)}
html body.v3a.v3a-cls .smp .smp-chip{border-color:var(--v3a-mint-line)}
/* Ideal Career desktop: 4 × 226px pages + 3 × 20px gaps + padding = 974px in
   a 952px wrap → the 4th page was cut. 4×226 + 3×14 + 2 + 2 = 950 fits */
@media(min-width:1000px){
  html body.v3a.v3a-cls.v3a-career .smp .smp-strip{gap:14px;padding-right:2px}
}

/* never red on a child's score (branding §3): the coral bars in the Life
   Skills + Learning mock-ups mark the STRONGEST results → green, the end of
   the amber→green scale; Learning's lowest style bar ("Doing") → amber.
   Inline style="" colours, hence !important. */
html body.v3a.v3a-cls #sample .s-bar i[style*="#F2563B"]{background:var(--x-green)!important}
html body.v3a.v3a-cls #sample .s-dot[style*="#F2563B"]{background:#2E5EAA!important}
html body.v3a.v3a-cls #sample .s-dot[style*="#FFD93B"]{background:#C97F10!important}
html body.v3a.v3a-cls #sample .s-dot[style*="#DFF3E9"]{background:#188A5E!important}
html body.v3a.v3a-cls #sample .s-dot[style*="#EDEAFB"]{background:#6D5BD0!important}
html body.v3a.v3a-cls #sample-report .sp-row i[style*="#F2563B"]{--c:#188A5E!important}
html body.v3a.v3a-cls #how-it-works .hiw-bar .tr i[style*="#F2563B"]{--c:#C97F10!important}

/* ─────────────────────────────────────────────────────────────────
   8 · QUOTES — card bodies keep their sunshine quote mark; the video
   frame behind IQ's thumbnails goes navy instead of ink
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls #quotes :is(.qt-play,.qt-frame){background:var(--x-navy)}
html body.v3a.v3a-cls :is(#quotes,#ls-quotes,#quotes-block) :is(.qt-grid,.qt-g,.qb-grid){gap:18px}
html body.v3a.v3a-cls :is(#ls-quotes,#quotes-block,#quotes) :is(.qt-card:not(:has(.qt-play)),.qb-card,.q){padding:24px 22px 22px}

/* ─────────────────────────────────────────────────────────────────
   9 · IDEAL CAREER call-back + demo forms (.cta2)
   ───────────────────────────────────────────────────────────────── */
html body.v3a.v3a-cls .cta2 .cta2-grid{gap:20px}
html body.v3a.v3a-cls .cta2 .cta2-card{position:relative;border:1px solid var(--x-line);border-radius:24px;box-shadow:var(--x-shadow);padding:28px 26px}
html body.v3a.v3a-cls .cta2 .cta2-card.cta2-alt{background:linear-gradient(180deg,#F2F7FC 0%,#E6F0FA 100%)}
html body.v3a.v3a-cls .cta2 .cta2-card::before{content:"";position:absolute;left:26px;top:-1px;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--v3-accent)}
html body.v3a.v3a-cls .cta2 :is(input,select){border:1.5px solid var(--x-line);background:#fff;transition:border-color .2s,box-shadow .2s}
html body.v3a.v3a-cls .cta2 :is(input,select):hover{border-color:#B9CFEA}
html body.v3a.v3a-cls .cta2 :is(input,select):focus{border-color:var(--x-blue);box-shadow:0 0 0 3px rgba(43,108,184,.18)}
html body.v3a.v3a-cls .cta2 .cta2-btn{border:0;box-shadow:0 14px 28px -14px rgba(242,86,59,.8);transition:transform .2s var(--x-ease),background .2s}
html body.v3a.v3a-cls .cta2 .cta2-btn:hover{background:var(--x-coral-d)}
html body.v3a.v3a-cls .cta2 .cta2-ok{border:1px solid var(--v3a-mint-line);border-radius:14px}
html body.v3a.v3a-cls .cta2 .cta2-link a{color:var(--x-coral-d)}

/* ─────────────────────────────────────────────────────────────────
   10 · MOTION — reveal paper pages + fill the preview bars on scroll.
   Same contract as site-v3.css §13: forwards-only fill, so with no
   scroll timeline (headless, print, hidden tab) everything is simply
   shown; off for reduced motion.
   ───────────────────────────────────────────────────────────────── */
@keyframes v3a-fill{from{transform:scaleX(.06)}to{transform:scaleX(1)}}
@keyframes v3a-rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@media screen and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html body.v3a.v3a-cls #how-it-works .hiw-bar i{
      transform-origin:left center;animation:v3a-fill linear forwards;animation-timeline:view();animation-range:entry 20% cover 45%}
    html body.v3a.v3a-cls :is(#sample-report .sm-pg,#sample-report .sp-item,#sample .s-item,#report-sample .sp-pg,.smp .smp-page,
      #how-it-works .hiw-card,#how-it-works .hiw-rc,details.q,#faq details,#faq .fq,#faq-block .fq,.fq .fq-q,.cta2 .cta2-card){
      animation:v3a-rise linear forwards;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@media (prefers-reduced-motion:reduce){
  html body.v3a.v3a-cls :is(#how-it-works .hiw-card,#how-it-works .hiw-rc,.cta2 .cta2-btn,#sample .s-cta){transition:none}
}

/* ─────────────────────────────────────────────────────────────────
   11 · PHONES (≤ 700px — the pages' own breakpoint)
   ───────────────────────────────────────────────────────────────── */
@media(max-width:700px){
  html body.v3a.v3a-cls{--v3a-pad:60px}
  html body.v3a.v3a-cls section:not([id])[style*="padding-top:26px"]{padding-bottom:28px}
  html body.v3a.v3a-cls section:not([id]):has(.answers){padding-bottom:32px}
  html body.v3a.v3a-cls .head{margin-bottom:24px}
  html body.v3a.v3a-cls :is(#how-it-works,#when-to-take,#sample-report,#sample,#report-sample,#quotes,#ls-quotes,#quotes-block) :is(.hiw-lead,.hiw-intro,.wt2-lead,.sm-lead,.s-sub,.smp-lede,.qt-sub,.qb-sub,.q-sub){font-size:16px}
  html body.v3a.v3a-cls #how-it-works :is(.hiw-card,.hiw-rc){padding:20px 18px 16px}
  html body.v3a.v3a-cls :is(#why-this-class,#ls-why) :is(.wy-card,.wy-c),
  html body.v3a.v3a-cls #when-to-take :is(.wt-person,.wt2-scene,.wt-p,.wt-scene,.wt-scn){padding:20px 18px 18px}
  html body.v3a.v3a-cls #ls-wheel .lsw-grid > div:first-child > div{padding:10px 12px}
  html body.v3a.v3a-cls .cta2 .cta2-card{padding:24px 18px}
  /* "What it measures": tile beside the title on phones (saves height) */
  html body.v3a.v3a-cls section:not([id])[style*="padding-top:0"]:has(.grid3) .card h3{display:flow-root;line-height:44px;margin-bottom:4px}
  html body.v3a.v3a-cls section:not([id])[style*="padding-top:0"]:has(.grid3) .card h3::first-letter{margin:0 14px 0 0;padding:0 10px;font-size:20px;line-height:44px;border-radius:14px}
  html body.v3a.v3a-cls.v3a-comm section:not([id])[style*="padding-top:0"]:has(.grid3) .card h3::first-letter{line-height:42px}
  /* Learning's sample strip bleeds to the screen edge (margin 0 -24px,
     padding 0 24px) with mandatory snap → Chrome snapped page 1 to x=0.
     Scroll padding puts the snap line back on the 24px gutter */
  html body.v3a.v3a-cls.v3a-learn #sample-report .sp-strip{scroll-padding-inline:24px}
}