/* ═══════════════════════════════════════════════════════════════════
   site-v3-misc.css — family layer for the one-off marketing pages:
     /pricing/ · /start/ · /bulk-orders/ · /coaching-centers/ · /partners/
     /privacy/ · /sitemap/ · /all-tests.html · /tests/
   Loads AFTER site-v3.css (the shared retrofit layer). Her 1 Oct 2026 brief:
   the homepage below its hero is the reference — white / ice (contour rings)
   / navy chapter bands, ONE soft card, gradient icon tiles, eyebrow pills,
   big Bricolage headings, coral actions, steel-blue proof. Retired here:
   2–3px ink borders, yellow offset shadows, cream/brown tags, Tailwind blues.

   Rules of the road (same as site-v3.css):
     · CSS only — no words, links, order or structure change.
     · every rule = "html body " + the page's own selector (one notch above
       the page's inline <style>); a page scope uses body:has(<unique class>)
       where a class name is shared between two of these pages.
     · !important ONLY against inline style="" (written in the HTML or set by
       the page's JS) — each one is commented.
     · heroes, the nav bar and the footer/call-back band are left alone.
   Page scopes:  pricing body:has(.plans) · start body:has(.clsrow)
     bulk body:has(.whybox) · coaching body:has(.pilot) · partners
     body:has(ol.steps) · privacy body:has(.tldr) · sitemap body:has(.smwrap)
     all-tests + tests body:has(.why-grid)
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0 · SHARED BITS (used by several pages below)
   ───────────────────────────────────────────────────────────────── */
/* gradient icon tile behind a floating emoji (homepage .x-icon) */
html body .plan .em,
html body .tests > .t .em,
html body .sm-row .sm-em,
html body section.grid .card .emoji{
  display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;
  font-size:24px;line-height:1;background:var(--g-career);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6);
}
/* the soft hover edge recipe for cards this file adds (homepage .x-card::after) */
html body .plan::after,
html body .rule::after,
html body .tests > .t::after,
html body .pain::after,
html body .econ::after,
html body .sm-row::after,
html body .whybox::after,
html body section.why .b::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 .plan:hover::after,
html body .rule:hover::after,
html body .tests > .t:hover::after,
html body .pain:hover::after,
html body .econ:hover::after,
html body .sm-row:hover::after,
html body section.why .b:hover::after{opacity:1}

/* ice band with faint contour rings (homepage .x-sec.x-ice.x-contour) */
html body:has(.plans) section:has(.plans),
html body:has(.whybox) section:has(.steps),
html body:has(.pilot) .flow,
html body:has(ol.steps) section:has(.grid3),
html body:has(ol.steps) section:has(table.px){
  position:relative;background:var(--x-ice);
}
html body:has(.plans) section:has(.plans)::before,
html body:has(.whybox) section:has(.steps)::before,
html body:has(.pilot) .flow::before,
html body:has(ol.steps) section:has(.grid3)::before,
html body:has(ol.steps) section:has(table.px)::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:has(.plans) section:has(.plans) > .wrap,
html body:has(.whybox) section:has(.steps) > .wrap,
html body:has(.pilot) .flow > .wrap,
html body:has(ol.steps) section:has(.grid3) > .wrap,
html body:has(ol.steps) section:has(table.px) > .wrap{position:relative;z-index:1}

/* green tick circle (homepage .x-step li svg / .x-classic-list) */
html body .plan li::before,
html body .whybox .why li::before{
  content:"✓";position:absolute;left:0;top:50%;display:grid;place-items:center;border-radius:50%;
  background:#E4F3EA;color:var(--x-green);font:900 11px/1 'Inter',system-ui,sans-serif;
}

/* ─────────────────────────────────────────────────────────────────
   1 · /pricing/
   rules (white) · plans (ICE band) · compare table (white) · FAQ (white)
   · closing band (site-v3)
   ───────────────────────────────────────────────────────────────── */
/* section spacing — the sections carry inline padding-top:0/8px, so the
   two that start a new band need !important to get their top padding */
html body:has(.plans) section:has(.rules){padding-bottom:64px}
html body:has(.plans) section:has(.plans){padding:84px 0 56px!important}              /* inline padding-top:0 */
html body:has(.plans) section:has(table){padding:84px 0 44px!important}               /* inline padding-top:0 */
html body:has(.plans) section:has(details.q){padding:44px 0 96px!important}           /* inline padding-top:0 */
html body:has(.plans) .head{margin-bottom:30px}

/* the three promises under the hero: small soft cards */
html body .rules{gap:18px}
html body .rule{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:20px;padding:22px 22px 20px;
  box-shadow:var(--v3-shadow-sm);transition:transform .3s var(--x-ease),box-shadow .3s var(--x-ease)}
html body .rule:hover{transform:translateY(-4px);box-shadow:var(--v3-shadow-sm-hi)}
html body .rule h3{font-size:17.5px;letter-spacing:-.02em;margin-bottom:6px}
html body .rule p{font-size:14.5px;line-height:1.55;color:var(--x-mut)}

/* plan cards */
html body .plans{gap:18px;align-items:stretch}
html body .plan{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:24px;padding:28px 26px 26px;
  box-shadow:var(--x-shadow);transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease)}
html body .plan:hover{transform:translateY(-6px);box-shadow:var(--x-shadow-hi)}
html body .plan.star{background:linear-gradient(180deg,#FFFFFF 0%,#F2F7FC 100%);box-shadow:var(--x-shadow-hi)}
html body .plan.star::after{opacity:1}
html body .plans > .plan:nth-child(1) .em{background:var(--g-learn)}
html body .plans > .plan.star .em{background:var(--g-iq)}
html body .plans > .plan:nth-child(3) .em{background:var(--g-career)}
html body .plan .em{margin-bottom:16px}
html body .plan h3{font-size:21px;letter-spacing:-.02em;margin:0 0 4px}
html body .plan .cls{font-size:13.5px;font-weight:700;color:var(--x-blue);margin-bottom:14px}
html body .plan ul{margin:0 0 18px}
html body .plan li{font-size:14px;color:#2B3440;padding:8px 0 8px 30px;border-bottom:1px solid var(--x-line)}
html body .plan li:last-child{border-bottom:0}
html body .plan li::before{width:20px;height:20px;margin-top:-10px}
html body .plan .tag{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--x-mut)}
html body .plan .amt{font-size:32px;letter-spacing:-.03em;line-height:1.1;margin:4px 0 16px}
html body .plan.star .amt{background:var(--v3-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .plan.star .amt small{-webkit-text-fill-color:var(--x-mut)}
html body .plan .go{position:relative;z-index:2;font-weight:800;font-size:14.5px;padding:14px 20px;
  box-shadow:0 14px 28px -14px rgba(242,86,59,.8);transition:transform .2s var(--x-ease),background .2s,border-color .2s,color .2s,box-shadow .2s}
html body .plan .go:hover{background:var(--x-coral-d);transform:translateY(-2px)}
html body .plan #bundle-buy{padding:14px 12px;font-size:14px}
/* desktop: the class picker sits above "Buy Complete Profile" so the button
   label stays on one line (side by side only fits at phone width) */
@media(min-width:621px){
  html body .plan div:has(> #bundle-buy){flex-wrap:wrap}
  html body .plan div:has(> #bundle-buy) > #bundle-class{flex:1 1 100%;padding:12px 16px!important}  /* inline padding */
  html body .plan #bundle-buy{white-space:nowrap}
}
html body .plan .go.gh{background:#fff;color:var(--x-ink);border:1.5px solid var(--x-line);box-shadow:none}
html body .plan .go.gh:hover{background:#fff;border-color:var(--x-blue);color:var(--x-blue);box-shadow:var(--v3-shadow-sm)}
/* the class <select> next to "Buy Complete Profile" — inline 2px ink border */
html body .plan #bundle-class{position:relative;z-index:2;border:1.5px solid var(--x-line)!important;border-width:1.5px!important;color:var(--x-ink);cursor:pointer}  /* inline style */
html body .plan #bundle-class:focus{outline:none;border-color:var(--x-blue)!important;box-shadow:0 0 0 4px rgba(43,108,184,.15)}       /* inline style */

/* "What's in each" table — its cells are styled inline: the Complete Profile
   column was peach with green text → steel-blue tint + navy (homepage .x-cmp .us) */
html body:has(.plans) th[style*="#FFF6F1"]{background:var(--g-career)!important;color:#fff!important}            /* inline style */
html body:has(.plans) td[style*="#FFF6F1"]{background:rgba(43,108,184,.07)!important;color:var(--x-navy2)!important} /* inline style */
html body:has(.plans) th[style*="var(--soft)"]{background:#F7FAFD!important;font-weight:800}                       /* inline style */
html body:has(.plans) section:has(table) td:first-child{color:var(--x-ink)}

/* ─────────────────────────────────────────────────────────────────
   2 · /start/ — class picker + assessment tiles on an ice stage
   ───────────────────────────────────────────────────────────────── */
html body:has(.clsrow) section{position:relative;overflow:hidden;padding:56px 0 96px;
  background:radial-gradient(60% 60% at 50% 0%,rgba(74,143,214,.14) 0%,rgba(74,143,214,0) 70%),
             linear-gradient(180deg,#FFFFFF 0%,#F2F7FC 38%,#EAF2FB 100%)}
html body:has(.clsrow) section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:var(--v3-contour)}
html body:has(.clsrow) section > .wrap{position:relative;z-index:1}
html body:has(.clsrow) h1{font-size:clamp(32px,4.6vw,52px);letter-spacing:-.04em;line-height:1.04;margin-bottom:12px;text-wrap:balance}
html body:has(.clsrow) .sub{font-size:16px;margin-bottom:8px}
/* step labels → eyebrow pills */
html body .steplab{display:flex;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content;margin:30px auto 16px;
  font:800 12px/1.2 'Inter',system-ui,sans-serif;letter-spacing:.14em;color:var(--x-blue);
  background:#fff;border:1px solid var(--x-line);border-radius:999px;padding:8px 14px;box-shadow:0 6px 16px -10px rgba(15,30,54,.3)}
/* class buttons — the page's JS paints them cream / mint / lilac with
   olive-brown, green and purple digits (inline style): white tiles, navy
   digits, a band stripe in the assessment blues (3–5 · 6–8 · 9–12) */
html body .clsrow{gap:10px}
html body .clsrow .cls{--band:#2475B8;width:56px;height:56px;padding:0;display:grid;place-items:center;
  background:#fff!important;color:var(--x-navy2)!important;                                           /* inline style (JS) */
  border:1px solid var(--x-line);border-radius:16px;font:800 18px/1 'Inter',system-ui,sans-serif;
  box-shadow:inset 0 4px 0 var(--band),var(--v3-shadow-sm);transition:transform .25s var(--x-ease),box-shadow .25s var(--x-ease),border-color .25s}
html body .clsrow .cls:nth-child(n+4){--band:#2A5E9C}
html body .clsrow .cls:nth-child(n+7){--band:#4A55C8}
html body .clsrow .cls:hover{transform:translateY(-3px);border-color:#B9CFEA;box-shadow:inset 0 4px 0 var(--band),var(--v3-shadow-sm-hi)}
html body .clsrow .cls.sel{background:var(--g-career)!important;color:#fff!important;border-color:transparent;           /* inline style (JS) */
  transform:translateY(-3px) scale(1.06);box-shadow:0 0 0 4px rgba(43,108,184,.16),0 16px 28px -14px rgba(22,50,92,.8)}
/* assessment tiles */
html body .tests{gap:14px;margin-top:8px}
html body .tests > .t{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--x-line);
  border-radius:22px;padding:24px 12px 20px;box-shadow:var(--x-shadow);transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease),opacity .3s}
html body .tests > .t:hover{transform:translateY(-6px);box-shadow:var(--x-shadow-hi)}
html body .tests > .t[data-p="iq-test"] .em{background:var(--g-iq)}
html body .tests > .t[data-p="communication-test"] .em{background:var(--g-comm)}
html body .tests > .t[data-p="learning-test"] .em{background:var(--g-learn)}
html body .tests > .t[data-p="life-skills-test"] .em{background:var(--g-life)}
html body .tests > .t[data-p="ideal-career-test"] .em{background:var(--g-career)}
html body .tests > .t b{font-size:15.5px;line-height:1.2;letter-spacing:-.01em;margin:14px 0 10px;color:var(--x-ink)}
html body .tests > .t > span:last-child{margin-top:auto;font:700 11.5px/1 'Inter',system-ui,sans-serif;color:var(--x-navy2);
  background:var(--x-ice);border:1px solid var(--x-line);border-radius:999px;padding:6px 10px}
html body .tests > .t.dis{opacity:.4;box-shadow:none}
html body:has(.clsrow) .fine{margin-top:28px;font-size:13.5px}

/* ─────────────────────────────────────────────────────────────────
   3 · /bulk-orders/ — steps on an ICE band, the "why" list as one soft card
   ───────────────────────────────────────────────────────────────── */
html body:has(.whybox) section:has(.steps){padding:76px 0 84px!important}                /* inline padding-top:10px */
html body:has(.whybox) section:has(.whybox){padding:84px 0 96px!important}               /* inline padding-top:0 */
html body:has(.whybox) .head{margin-bottom:30px}
html body:has(.whybox) .steps{gap:18px}
html body:has(.whybox) .step{padding:28px 26px}
html body:has(.whybox) .step h3{font-size:19px;letter-spacing:-.02em}
html body:has(.whybox) .step p{font-size:14.5px;line-height:1.6}
html body .whybox{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#F2F7FC 100%);border:1px solid var(--x-line);
  border-radius:24px;padding:14px 32px;box-shadow:var(--x-shadow-hi)}
html body .whybox .why li{font-size:16px;font-weight:600;color:#2B3440;padding:16px 0 16px 42px;border-bottom:1px solid var(--x-line)}
html body .whybox .why li:last-child{border-bottom:0}
html body .whybox .why li::before{left:0;width:26px;height:26px;margin-top:-13px;font-size:13px}
html body .whybox .why a{color:var(--x-blue);font-weight:700}

/* ─────────────────────────────────────────────────────────────────
   4 · /coaching-centers/ (hub template; site-v3 already does the navy
   strip + report bands, steps, FAQ, closing, pricing block)
   ───────────────────────────────────────────────────────────────── */
/* stats on the navy strip: four even columns instead of a wrapping row */
html body:has(.pilot) .strip-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:48px 24px}  /* .strip-in is also .wrap: keep its 24px gutters */
html body:has(.pilot) .strip .st{position:relative;padding:4px 6px}
html body:has(.pilot) .strip .st b{font-size:clamp(26px,2.7vw,36px);white-space:nowrap}
html body:has(.pilot) .strip .st span{display:block;margin-top:8px;line-height:1.45}
html body:has(.pilot) .strip .st a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
/* pain cards */
html body .pain-grid{gap:18px}
html body .pain{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:24px;padding:30px 26px 28px;box-shadow:var(--x-shadow)}
html body .pain:hover{transform:translateY(-6px);box-shadow:var(--x-shadow-hi)}
html body .pain .n{font:800 40px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;margin-bottom:16px;
  background:var(--v3-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .pain h3{font-size:20px}
/* workflow steps: the little footnote rule */
html body:has(.pilot) .step .mini{border-top:1px solid var(--x-line);color:var(--x-mut)}
html body:has(.pilot) .step .mini svg{color:var(--x-blue)}
/* two-line card titles: the page's h1,h2,h3{line-height:1.04} cramps them */
html body:has(.pilot) :is(.step,.econ) h3{line-height:1.2}
/* economics */
html body .econ-grid{gap:18px}
html body .econ{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:24px;padding:30px 26px 28px;box-shadow:var(--x-shadow)}
html body .econ:hover{transform:translateY(-6px);box-shadow:var(--x-shadow-hi)}
html body .econ .tag{background:var(--x-ice);color:var(--x-blue);border:1px solid var(--x-line);font-weight:800;letter-spacing:.12em;padding:6px 12px}
html body .econ.hot{background:var(--v3-navy-band);border-color:transparent;color:#fff;box-shadow:0 30px 60px -28px rgba(15,30,54,.75)}
html body .econ.hot .tag{background:var(--x-sun);color:var(--x-ink);border-color:var(--x-sun)}
html body .econ.hot p{color:#C6D3E6}
/* the "1 saved dropout" maths: sunshine-washed wide card (homepage .x-b-wide) */
html body .math{position:relative;background:linear-gradient(100deg,#FFF9E3 0%,#FFFFFF 60%);border:1px solid var(--x-line);border-radius:24px;
  padding:28px 34px;gap:30px;box-shadow:var(--x-shadow)}
html body .math b{font-size:clamp(28px,3vw,36px);line-height:1.08;letter-spacing:-.03em;
  background:var(--v3-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .math p{color:#2B3440;font-size:15.5px;line-height:1.6}
/* report preview bars: never red on a child's score (branding §3) — the
   homepage's amber→green bar on an ice track (.x-mini-r) */
html body:has(.pilot) .row .t{height:10px;border:0;border-radius:8px;background:var(--x-ice2)}
html body:has(.pilot) .row .t i{border-radius:8px;background:linear-gradient(90deg,#E8930F,#188A5E)}
html body:has(.pilot) .row .v{color:var(--x-blue);font-weight:700}
html body:has(.pilot) .p-body{padding:26px 28px}
/* credibility chips (homepage .x-cred) */
html body .cred .chip{background:#fff;border:1px solid var(--x-line);color:var(--x-navy2);font-weight:700;font-size:14px;padding:10px 16px;
  box-shadow:0 6px 14px -12px rgba(15,30,54,.45);transition:border-color .2s,transform .2s var(--x-ease)}
html body .cred .chip:hover{border-color:var(--x-blue);transform:translateY(-2px)}
html body .cred .chip svg{color:var(--x-green);stroke-width:3}
/* the pilot form in the closing band */
html body .pilot input{border:1.5px solid var(--x-line);background:#fff;box-shadow:0 6px 14px -12px rgba(15,30,54,.45)}
html body .pilot input:focus{border-color:var(--x-blue);box-shadow:0 0 0 4px rgba(43,108,184,.15)}
html body:has(.pilot) .close .lane a{color:var(--x-blue);font-weight:800}
/* the pricing block follows the ice closing band here, so it goes white
   (keeps the white / ice alternation instead of two ice bands in a row) */
html body:has(.pilot) .pb{background:#fff;padding:8px 0 16px}   /* page 88px + site-v3 72px read as dead space on white */
html body:has(.pilot) .pb::before{display:none}

/* ─────────────────────────────────────────────────────────────────
   5 · /partners/ (its own template)
   two-ways (white) · students get (ICE) · steps route (white) ·
   pricing table (ICE) · FAQ (white) · closing band
   ───────────────────────────────────────────────────────────────── */
/* hero chips: cream + olive-brown + ink border → homepage chips */
html body .hero .chips span{background:var(--x-ice);color:var(--x-navy2);border:1px solid var(--x-line);font-weight:700;padding:7px 13px}
html body:has(ol.steps) section:not(.hero){padding:80px 0}
html body:has(ol.steps) .sec-h{margin-bottom:12px}
html body:has(ol.steps) .sec-sub{font-size:17px;line-height:1.6;margin-bottom:32px}
/* cards: site-v3 gives them the soft card; the two big ones get room */
html body :is(.grid2,.grid3) .card{padding:28px 26px}
html body .grid2 .card{padding:32px 30px}
html body :is(.grid2,.grid3) .card h3{font-size:20px;letter-spacing:-.02em}
html body .grid2 .card .big{font-size:clamp(34px,3.6vw,44px);letter-spacing:-.04em;line-height:1.05;margin:10px 0 12px;
  background:var(--v3-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .grid2 .card .big span{-webkit-text-fill-color:var(--x-mut);letter-spacing:0}
html body :is(.grid2,.grid3) .card p{font-size:15px;line-height:1.6}
html body .grid2 .card > .tag{background:var(--x-ice);color:var(--x-blue);border:1px solid var(--x-line);font-size:11px;letter-spacing:.12em;padding:6px 12px;margin-bottom:16px}
html body .grid2 .card > .tag.g{background:#E4F3EA;color:var(--x-green);border-color:#CBE7D8}
/* "What your students get": the emoji is the first character of each h3 —
   lift it into a gradient icon tile on its own line (homepage .x-icon) */
html body .grid3 .card h3{display:flow-root}
html body .grid3 .card h3::first-letter{float:left;margin:0 calc(100% - 50px) 16px 0;padding:0 12px;border-radius:16px;
  font-size:23px;line-height:50px;background: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 .grid3 .card:nth-child(1) h3::first-letter{background:var(--g-iq)}
html body .grid3 .card:nth-child(2) h3::first-letter{background:var(--g-learn)}
html body .grid3 .card:nth-child(3) h3::first-letter{background:var(--g-comm)}
/* links are steel blue (coral is for buttons) — both carry inline colour */
html body:has(ol.steps) section a[href*="embed-demo"],
html body table.px a{color:var(--x-blue)!important}                                   /* inline style */
html body:has(ol.steps) section a[href*="embed-demo"]:hover,
html body table.px a:hover{text-decoration:underline;text-underline-offset:3px}
/* "Live in two minutes": numbered milestones on a dashed route */
html body:has(ol.steps) .sec-h + ol.steps{margin-top:30px}
html body ol.steps li{padding:0 0 30px 64px;font-size:15px}
html body ol.steps li::before{left:0;top:-4px;width:44px;height:44px;border:0;border-radius:14px;background:var(--g-career);color:#fff;
  font-size:19px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 22px -12px rgba(15,30,54,.7);z-index:1}
html body ol.steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;
  background:repeating-linear-gradient(180deg,#9DBBE0 0 6px,transparent 6px 12px);background-size:2px 12px}
html body ol.steps li > b{font:800 18px/1.25 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;margin-bottom:4px}
html body ol.steps span{font-size:15px;line-height:1.6}
html body ol.steps span b{display:inline;font-size:inherit;color:var(--x-navy2)}   /* "/p/yourname" was breaking onto its own line */
/* the one-line embed: ink code box → navy */
html body .embedbox{background:linear-gradient(160deg,#0F1E36 0%,#16325C 100%);color:#FFE9A8;border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:16px 20px;box-shadow:var(--x-shadow)}
/* pricing table → a soft card (homepage .x-cmp) */
html body table.px{max-width:780px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--x-line);border-radius:22px;overflow:hidden;
  box-shadow:var(--x-shadow);margin-top:10px}
html body table.px th{background:#F7FAFD;border-bottom:1px solid var(--x-line);padding:14px 18px;font-weight:800;color:var(--x-mut)}
html body table.px td{padding:14px 18px}
html body table.px tr:last-child td{border-bottom:0}
html body table.px td:first-child{font-weight:700;color:var(--x-ink)}
/* FAQ (site-v3 gives the card; this adds the round +/– and hides the triangle) */
html body .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
html body .faq summary::-webkit-details-marker{display:none}
html body .faq summary::after{content:"+";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 .faq details[open] summary::after{content:"–";background:var(--x-coral);color:#fff}
html body .faq summary:hover{color:var(--x-blue)}
html body .faq details p{margin:0 0 18px;font-size:15.5px;line-height:1.65;color:var(--x-mut)}
/* closing band (same as .closing in site-v3) */
html body .cta-band{position:relative;overflow:hidden;padding:84px 0 92px;border-bottom:0;
  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 .cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background:var(--v3-contour)}
html body .cta-band > .wrap{position:relative;z-index:1}
html body .cta-band h2{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.04em;line-height:1.04;text-wrap:balance;max-width:20ch;margin:0 auto 14px}
html body .cta-band p{font-size:17px}
html body .cta-band .btn-verm{box-shadow:0 14px 28px -14px rgba(242,86,59,.8)}
html body .cta-band .btn-verm:hover{transform:translateY(-2px)}

/* ─────────────────────────────────────────────────────────────────
   6 · /privacy/ — the policy on an ice desk, each clause a soft card
   ───────────────────────────────────────────────────────────────── */
html body:has(.tldr){background:var(--x-ice)}   /* no white strip between the nav and the ice desk */
html body:has(.tldr) > div.wrap{background:var(--x-ice);box-shadow:0 0 0 100vmax var(--x-ice);clip-path:inset(0 -100vmax);padding-bottom:72px}
html body:has(.tldr) > div.wrap > h1{padding-top:8px;font-size:clamp(32px,4.4vw,48px);letter-spacing:-.035em}
html body:has(.tldr) :is(.sec,.meta) a,
html body .tldr a{color:var(--x-blue);font-weight:700}
html body .tldr{position:relative;background:linear-gradient(100deg,#FFF3C4,#FFF9E3);border:1px solid #F4E3A0;border-radius:20px;
  color:#4A3B00;padding:20px 24px;margin:24px 0 10px;box-shadow:0 14px 30px -22px rgba(90,70,0,.5)}
html body .tldr b{color:var(--x-ink)}
html body:has(.tldr) .sec{background:#fff;border:1px solid var(--x-line);border-radius:22px;padding:4px 28px 22px;margin-top:16px;
  box-shadow:var(--v3-shadow-sm)}
html body:has(.tldr) .sec h2{font-size:21px;letter-spacing:-.02em;margin:22px 0 10px;color:var(--x-ink)}
html body:has(.tldr) .sec :is(p,li){color:#2B3440}
html body:has(.tldr) .sec li::marker{color:var(--x-blue)}

/* ─────────────────────────────────────────────────────────────────
   7 · /sitemap/
   ───────────────────────────────────────────────────────────────── */
html body .sm-h .eyebrow[style]{color:var(--x-blue)!important;font-size:12px!important;letter-spacing:.14em!important}  /* inline style */
/* page title: one step above the section headings (it rendered at 2.1rem, the
   same size as the section h2s) */
html body .sm-h h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.04em;line-height:1.04;margin-bottom:10px;text-wrap:balance}
html body .sm-h p{font-size:16px}
html body .smwrap .sm-sec{margin-top:56px}
/* the assessment × class block and "Made for you" sit on full-bleed ice
   bands (white / ice / white / ice / white rhythm) */
html body .smwrap > .sm-sec:first-of-type,
html body .smwrap > .sm-sec:nth-of-type(3){margin-top:36px;padding:40px 0 34px;background:var(--x-ice);
  box-shadow:0 0 0 100vmax var(--x-ice);clip-path:inset(0 -100vmax)}
html body .smwrap > .sm-sec:nth-of-type(3){margin-top:56px;padding:44px 0 40px}
html body .smwrap > .sm-sec:nth-of-type(4){margin-top:52px}
/* section titles stay below the page title (site-v3 sizes section h2 up to 46px) */
html body .smwrap .sm-sec:is(*,#_v3) h2:is(*,._v3){font-size:clamp(22px,2.4vw,28px);letter-spacing:-.025em;line-height:1.15;margin-bottom:6px}
html body .smwrap .sm-sec .sub{font-size:15px;margin-bottom:18px}
/* "Everything else" has no .sub line: give its tiles room under the heading */
html body .smwrap .sm-sec h2 + .sm-grid{margin-top:20px}
html body .sm-row{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:20px;box-shadow:var(--v3-shadow-sm);
  padding:14px 18px 14px 14px;transition:transform .3s var(--x-ease),box-shadow .3s var(--x-ease)}
html body .sm-row:hover{transform:translateY(-3px);box-shadow:var(--v3-shadow-sm-hi)}
html body .sm-row .sm-t{gap:14px}
html body .sm-row .sm-em{width:42px;height:42px;border-radius:13px;font-size:20px}
html body .sm-row:has(a[href="/iq-test/"]) .sm-em{background:var(--g-iq)}
html body .sm-row:has(a[href="/communication-test/"]) .sm-em{background:var(--g-comm)}
html body .sm-row:has(a[href="/learning-test/"]) .sm-em{background:var(--g-learn)}
html body .sm-row:has(a[href="/21st-century-life-skills-assessment/"]) .sm-em{background:var(--g-life)}
html body .sm-t a b{font:800 17px/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.015em}
html body .sm-t a:hover b{color:var(--x-blue)}
html body .sm-cls{position:relative;z-index:2}
html body .sm-cls a{min-width:40px;height:40px;border:1px solid var(--x-line);border-radius:12px;background:#fff;color:var(--x-navy2);
  font-size:14.5px;transition:all .2s var(--x-ease)}
html body .sm-cls a:hover{background:var(--x-blue);border-color:var(--x-blue);color:#fff;transform:translateY(-2px)}
html body .sm-grid{gap:12px}
html body .sm-grid a{border:1px solid var(--x-line);border-radius:14px;padding:13px 16px;font-weight:700;font-size:14.5px;color:var(--x-ink);
  box-shadow:0 6px 14px -12px rgba(15,30,54,.45);transition:transform .2s var(--x-ease),border-color .2s,color .2s,box-shadow .2s}
html body .sm-grid a:hover{border-color:var(--x-blue);color:var(--x-blue);transform:translateY(-2px);box-shadow:var(--v3-shadow-sm-hi)}
html body .smwrap > .sm-sec:last-of-type{margin-bottom:84px!important}                   /* inline margin-bottom:50px */

/* ─────────────────────────────────────────────────────────────────
   8 · /all-tests.html + /tests/ (the classic index; Tailwind blues
   below the hero → our palette; the hero itself is left alone)
   ───────────────────────────────────────────────────────────────── */
html body:has(.why-grid){background:var(--x-ice)}
html body:has(.why-grid) main.wrap{--blue:#2B6CB8;--blue-d:#16325C;--ink:#14181F;--mut:#5A6472;--line:#DDE6F1;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--x-ink);padding-bottom:88px}
html body section.grid{gap:20px}
html body section.grid .card{padding:26px 24px 24px}
html body section.grid .card.flagship{border:1px solid var(--x-line);background:linear-gradient(180deg,#FFFFFF 0%,#F2F7FC 100%);box-shadow:var(--x-shadow-hi)}
html body section.grid .card.flagship::after{opacity:1}
html body section.grid .card > .flag{position:relative;z-index:2;background:var(--x-sun);color:var(--x-ink);font:800 11px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.1em;padding:7px 12px;margin-bottom:16px}
html body section.grid .card:has(a[href^="/iq-test"]) .emoji{background:var(--g-iq)}
html body section.grid .card:has(a[href^="/communication-test"]) .emoji{background:var(--g-comm)}
html body section.grid .card:has(a[href^="/learning-test"]) .emoji{background:var(--g-learn)}
html body section.grid .card:has(a[href^="/21st-century"]) .emoji{background:var(--g-life)}
html body section.grid:is(*,#_v3) .card h2:is(*,._v3){font:800 21px/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;margin:18px 0 8px;color:var(--x-ink)}
html body section.grid .card .desc{font-size:14.5px;line-height:1.55;color:var(--x-mut)}
html body section.grid .meta{gap:8px;margin:16px 0 18px}
html body section.grid .meta .chip{background:var(--x-ice);border:1px solid var(--x-line);color:var(--x-navy2);font:700 12px/1 'Inter',system-ui,sans-serif;padding:7px 11px}
html body section.grid .cta{position:relative;z-index:2;background:var(--x-coral);color:#fff;border-radius:999px;padding:14px 18px;
  font:800 14.5px/1.25 'Inter',system-ui,sans-serif;box-shadow:0 14px 28px -14px rgba(242,86,59,.8);transition:background .2s,transform .2s var(--x-ease)}
html body section.grid .card:hover .cta{background:var(--x-coral-d)}
html body section.grid .cta:hover{transform:translateY(-2px)}
html body section.grid .grades{position:relative;z-index:2;gap:6px;margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--x-mut)}
html body section.grid .grades a{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border:1px solid var(--x-line);border-radius:10px;
  background:#fff;color:var(--x-navy2);font-size:13px;letter-spacing:0;transition:all .2s var(--x-ease)}
html body section.grid .grades a:hover{background:var(--x-blue);border-color:var(--x-blue);color:#fff;transform:translateY(-2px)}
html body section.why{margin-top:72px}
html body section.why h3{font:800 clamp(26px,3.2vw,38px)/1.08 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;margin-bottom:26px;color:var(--x-ink)}
html body section.why .why-grid{gap:18px}
html body section.why .b{position:relative;background:#fff;border:1px solid var(--x-line);border-radius:20px;padding:24px 22px;box-shadow:var(--v3-shadow-sm);
  transition:transform .3s var(--x-ease),box-shadow .3s var(--x-ease)}
html body section.why .b:hover{transform:translateY(-4px);box-shadow:var(--v3-shadow-sm-hi)}
html body section.why .b b{font:800 18px/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.015em;margin-bottom:8px}
html body section.why .b p{font-size:14.5px;line-height:1.55;color:var(--x-mut)}
html body section.why .b a{color:var(--x-blue);font-weight:700}

/* ─────────────────────────────────────────────────────────────────
   9 · MOTION — same CSS-only scroll reveal as site-v3 (forwards fill only,
   so a stale timeline leaves cards visible); coaching cards are skipped
   because that page runs its own .rv reveal. Off for reduced motion/print.
   ───────────────────────────────────────────────────────────────── */
@keyframes v3m-dash{to{background-position:0 12px}}
@media screen and (prefers-reduced-motion:no-preference){
  html body ol.steps li:not(:last-child)::after{animation:v3m-dash 1.2s linear infinite}
  @supports (animation-timeline:view()){
    html body :is(.rule,.plan,.tests > .t,.whybox,.sm-row,section.why .b,.grid3 .card,.grid2 .card){
      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(.rule,.plan,.tests > .t,.pain,.econ,.sm-row,section.why .b,.clsrow .cls,.sm-cls a,.sm-grid a,.grades a,.cred .chip){transition:none}
  html body :is(.rule,.plan,.tests > .t,.pain,.econ,.sm-row,section.why .b,.sm-cls a,.sm-grid a,.grades a,.cred .chip):hover{transform:none}
}

/* ─────────────────────────────────────────────────────────────────
   10 · PHONES — 16–24px gutters, nothing wider than 375px
   ───────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  html body:has(.pilot) .strip-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
}
@media(max-width:620px){
  html body:has(.plans) section:has(.rules){padding-bottom:44px}
  html body:has(.plans) section:has(.plans){padding:60px 0 40px!important}              /* inline padding-top:0 */
  html body:has(.plans) section:has(table){padding:60px 0 32px!important}               /* inline padding-top:0 */
  html body:has(.plans) section:has(details.q){padding:32px 0 68px!important}           /* inline padding-top:0 */
  html body .plan{padding:24px 20px 22px}
  html body:has(.clsrow) section{padding:40px 0 72px}
  html body .clsrow{gap:8px}
  html body .clsrow .cls{width:54px;height:54px;font-size:17px}
  html body .tests{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .tests > .t:last-child:nth-child(odd){grid-column:1/-1}
  html body:has(.whybox) section:has(.steps){padding:56px 0 60px!important}             /* inline padding-top:10px */
  html body:has(.whybox) section:has(.whybox){padding:60px 0 68px!important}            /* inline padding-top:0 */
  html body .whybox{padding:8px 20px}
  html body .whybox .why li{font-size:15px;padding:14px 0 14px 38px}
  html body:has(.pilot) .strip-in{padding:36px 20px;gap:26px 14px}
  html body:has(.pilot) .strip .st b{white-space:normal;font-size:clamp(22px,6.6vw,28px);line-height:1.1}
  html body:has(.pilot) .strip .st span{font-size:13px}
  html body .math{padding:24px 20px;gap:12px}
  html body .pain,html body .econ{padding:26px 22px 24px}
  html body:has(.pilot) .p-body{padding:20px 18px}
  html body:has(ol.steps) section:not(.hero){padding:56px 0}
  html body .grid2 .card{padding:26px 22px}
  html body ol.steps li{padding-left:58px}
  html body table.px th,html body table.px td{padding:12px 12px}
  html body .cta-band{padding:64px 0 72px}
  html body:has(.tldr) .sec{padding:2px 18px 18px;border-radius:18px}
  html body .tldr{padding:18px 18px}
  html body .smwrap > .sm-sec:first-of-type{padding:30px 0 26px}
  html body .smwrap .sm-sec{margin-top:44px}
  html body .sm-row{padding:14px}
  html body .sm-cls a{min-width:38px;height:38px}
  /* two link tiles per row instead of one long single column */
  html body .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html body .sm-grid a{padding:12px 13px;font-size:14px;line-height:1.3}
  html body .smwrap > .sm-sec:nth-of-type(3){padding:32px 0 30px}
  html body .grid3 .card h3::first-letter{line-height:46px;font-size:21px;margin-right:calc(100% - 46px)}
  html body section.grid .card{padding:22px 20px}
  html body section.why{margin-top:56px}
}