/* ============================================================
   DESIGN TOKENS - change these ~values to re-skin per domain
   ============================================================ */
:root{
  /* colour */
  --bg:#ffffff; --bg-soft:#f5f7fa; --ink:#18212e; --muted:#475467; --muted-2:#66717f;
  --surface:#ffffff; --border:#e4e8ee; --accent:#c2870e; --accent-d:#9c6c08;
  --accent-soft:color-mix(in srgb,var(--accent) 8%,#ffffff); --dark:#0c0a16; --star:#ffb020;
  /* typography */
  --font-head:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --fs-h1:clamp(36px,4.6vw,60px); --fs-h2:clamp(30px,4vw,44px); --fs-h3:22px;
  --fs-lead:clamp(17px,1.6vw,20px); --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --s8:64px; --s9:96px; --s10:120px;
  --section-y:clamp(80px,10vw,140px);
  /* radius */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:24px; --r-pill:999px;
  /* shadow */
  --sh-sm:0 12px 30px -18px rgba(40,24,90,.28);
  --sh-md:0 30px 60px -40px rgba(40,24,90,.4);
  --sh-lg:0 64px 130px -46px rgba(26,15,62,.55);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --dur:240ms;
  /* layout */
  --maxw:1120px;
  /* hero (full-bleed cinematic) */
  --hero-ink:#0b1420;            /* deep slate-navy - the calm; used for scrim + clipbar */
  --hud-x:49%; --hud-y:49%;      /* reticle lock point - over the crossing pedestrians (the developing hazard) */
}
/* ============================================================ RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;letter-spacing:-.004em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;letter-spacing:-.03em;line-height:1.06}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,white);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--accent) 22%,white)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--s5);padding-right:var(--s5)}
.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5a5470}
.hero .eyebrow{color:var(--accent)}
/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:var(--s3);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  min-height:48px;transition:transform var(--dur) var(--ease),box-shadow var(--dur),background var(--dur)}
.btn-primary{background:var(--accent);color:var(--dark);
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-primary:hover{transform:translateY(-2px);background:var(--accent-d);box-shadow:0 20px 40px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--ink);font-size:16px;padding:10px 4px}
.btn-ghost .arr{color:var(--accent)}
/* ============================================================ NAV */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.nav-bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:13px var(--s5)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none}
.brand-mark svg{display:block}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:0;line-height:1}
.brand-sub{font-size:11px;color:var(--muted-2);font-weight:600;letter-spacing:.04em;margin-top:3px;line-height:1;text-transform:uppercase}
.nav-bar>nav{display:flex;align-items:center;gap:var(--s4)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{padding:9px 13px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
/* between the burger breakpoint and ~1240px the links used to wrap onto two lines; they tighten instead */
@media (max-width:1240px){.nav-link{padding:9px 9px;font-size:14px}.nav-bar>nav{gap:var(--s3)}.nav-cta{font-size:14px;padding:12px 18px}}
.nav-link:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.nav-cta{display:inline-flex}
.burger{display:none;width:44px;height:44px;border:none;background:rgba(0,0,0,.05);border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
/* mobile slide-over */
.mobnav{position:fixed;inset:0;z-index:140;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s}
.mobnav.open{visibility:visible;opacity:1}
.mobnav .scrim{position:absolute;inset:0;background:rgba(16,12,30,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.mobnav .sheet{position:absolute;top:0;right:0;bottom:0;width:84%;max-width:340px;display:flex;flex-direction:column;
  padding:20px 22px;background:rgba(252,251,254,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:-30px 0 80px -30px rgba(40,24,90,.4);transform:translateX(100%);transition:transform .42s var(--ease)}
.mobnav.open .sheet{transform:translateX(0)}
.sheet a.m-link{display:block;padding:17px 8px;font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--ink);border-bottom:1px solid rgba(0,0,0,.06)}
/* ============================================================ HERO - full-bleed cinematic (Instrument: the calm observer) */
.hero{position:relative;overflow:hidden;min-height:clamp(560px,82vh,820px);display:flex;background:var(--hero-ink)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(96deg,
    color-mix(in srgb,var(--hero-ink) 93%,transparent) 0%,
    color-mix(in srgb,var(--hero-ink) 80%,transparent) 32%,
    color-mix(in srgb,var(--hero-ink) 32%,transparent) 60%,
    transparent 84%),
  linear-gradient(0deg,color-mix(in srgb,var(--hero-ink) 70%,transparent) 0%,transparent 22%)}
.hero-inner{position:relative;z-index:3;display:flex;align-items:center;width:100%;
  padding-top:var(--s8);padding-bottom:calc(var(--s9) + var(--s4))}
/* SCOPED to the home hero, 2026-09-30. Unscoped, this leaked onto every content page:
   the SHARED content layout wraps its hero body in the same class name
   (<section class="content-hero"><div class="wrap"><div class="hero-copy">), so this
   540px column - written for the text that sits BESIDE the home hero's artwork - was
   clamping 7 content pages that have no artwork beside them, inside a 1120px shell.
   Measured 2026-09-30: h1 540px wide against live's 760px. Ads make it money, not taste -
   this door's A$460/28d is Auto ads, which place into the body area. */
.hero .hero-copy{max-width:540px}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:var(--fs-h1);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin-top:var(--s4);color:#fff;text-shadow:0 2px 34px rgba(5,9,16,.5);text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero .lead{font-size:var(--fs-lead);color:rgba(255,255,255,.82);max-width:400px;margin-top:var(--s5)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.hero .btn-ghost{color:#fff}
.hero-points{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s6)}
.point{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,.8)}
/* signature: HUD reticle that calmly locks onto the developing hazard */
.hud{position:absolute;z-index:4;left:var(--hud-x);top:var(--hud-y);transform:translate(-50%,-50%);pointer-events:none}
.reticle2{position:relative;width:150px;height:150px;transition:transform .26s var(--ease)}
.reticle2 .r-ring{position:absolute;inset:14%;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 80%,#fff);opacity:0}
.reticle2 .r-corner{position:absolute;width:24px;height:24px;border:2.5px solid var(--accent);opacity:.92}
.reticle2 .r-corner.tl{left:0;top:0;border-right:none;border-bottom:none}
.reticle2 .r-corner.tr{right:0;top:0;border-left:none;border-bottom:none}
.reticle2 .r-corner.bl{left:0;bottom:0;border-right:none;border-top:none}
.reticle2 .r-corner.br{right:0;bottom:0;border-left:none;border-top:none}
.reticle2 .r-dot{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);
  transform:translate(-50%,-50%) scale(0);transition:transform .2s var(--ease)}
.hud-tag{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:color-mix(in srgb,var(--hero-ink) 64%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);opacity:0;transition:opacity .25s,color .25s,background .25s}
.hud.scanning .reticle2{transform:scale(1.16);animation:hud-drift 1.5s var(--ease)}
.hud.scanning .hud-tag{opacity:.9}
.hud.locked .reticle2{transform:scale(1)}
.hud.locked .r-ring{animation:hud-ping .55s var(--ease)}
.hud.locked .r-dot{transform:translate(-50%,-50%) scale(1)}
.hud.locked .hud-tag{opacity:1}
.hud.spotted .reticle2{transform:scale(.96)}
.hud.spotted .r-dot{transform:translate(-50%,-50%) scale(1)}
.hud.spotted .hud-tag{opacity:1;color:var(--hero-ink);background:var(--accent);border-color:transparent}
/* calm clip control bar (tabular-numeric, on-family) */
.hero-clipbar{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;
  padding:14px clamp(20px,4vw,40px);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--hero-ink) 66%,transparent) 64%)}
.clip-play{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur)}
.clip-play:hover{transform:scale(1.06);background:rgba(255,255,255,.2)}
.clip-time{font-size:var(--fs-xs);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.clip-track{flex:1;height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.26);position:relative;max-width:320px;overflow:hidden}
.clip-fill{position:absolute;left:0;top:0;bottom:0;right:0;background:var(--accent);border-radius:var(--r-pill);transform:scaleX(0);transform-origin:left}
.clip-label{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:600;color:rgba(255,255,255,.74);margin-left:auto}
.clip-label i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* ============================================================ SECTION SHELL */
section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-head{max-width:560px}
.section-head.center{margin:0 auto;text-align:center}
.section-head h2{font-size:var(--fs-h2);font-weight:600;margin-top:var(--s4)}
.section-head p{font-size:var(--fs-lead);color:var(--muted);margin-top:var(--s4)}
/* ============================================================ WHY IT WORKS */
.why{border-top:1px solid #f2f0f8}
.why-grid{display:grid;grid-template-columns:.82fr 2.18fr;gap:var(--s8)}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px}
.feat .chip{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.feat:hover .chip{transform:translateY(-3px)}
.feat h3{font-size:17px;font-weight:700;margin-top:var(--s4)}
.feat p{font-size:var(--fs-sm);color:var(--muted);margin-top:7px}
/* ============================================================ HOW IT WORKS */
.how{border-top:1px solid #f2f0f8}
.how-grid{display:grid;grid-template-columns:.82fr 2.18fr;gap:var(--s8);align-items:center}
.how h2{font-size:clamp(30px,3.6vw,38px);font-weight:600;line-height:1.06;margin-top:var(--s4)}
.steps{margin-top:var(--s7);display:flex;flex-direction:column}
.step{display:flex;gap:var(--s4);align-items:flex-start;position:relative;padding-bottom:22px}
.step:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:1.5px;
  background:repeating-linear-gradient(180deg,#d9d4ec 0 4px,transparent 4px 9px)}
.step .ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.step h4{font-size:16px;font-weight:700;margin-top:8px}
.step p{font-size:var(--fs-sm);color:var(--muted);margin-top:5px}
/* phone clip - signature looping focus reticle */
.phone{position:relative;border-radius:30px;overflow:hidden;background:#0c0a16;padding:9px;box-shadow:var(--sh-md)}
.clip{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:24/10}
.clip>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.clip .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 72%,rgba(0,0,0,.4))}
.clip .label{position:absolute;top:18px;left:20px;font-size:var(--fs-sm);font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.clip .cap{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:#fff;
  background:rgba(8,6,16,.55);backdrop-filter:blur(6px);padding:7px 16px;border-radius:var(--r-pill)}
.reticle{position:absolute;left:50%;top:54%;width:120px;height:120px;pointer-events:none}
.reticle span{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.95)}
.reticle span:nth-child(1){animation:ring 2.8s var(--ease) infinite}
.reticle span:nth-child(2){border-color:color-mix(in srgb,var(--accent) 85%,white);animation:ring 2.8s var(--ease) infinite .5s}
.note{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-left:30px}
.note .txt{font-family:'Hanken Grotesk',cursive;font-size:15px;color:var(--muted)}
/* ============================================================ TRUST */
.trust{background:var(--bg-soft);border-top:1px solid #f0eef8;border-bottom:1px solid #f0eef8}
.trust-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s8);align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border-radius:var(--r-pill);
  padding:8px 15px;font-size:12px;font-weight:700;color:#37334d}
.trust h2{font-size:clamp(30px,3.6vw,40px);font-weight:600;line-height:1.04;margin-top:var(--s5)}
.trust p{font-size:17px;color:var(--muted);margin-top:var(--s5);max-width:450px}
.refs{display:flex;flex-direction:column;gap:13px}
.refs .lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.ref{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid #eae7f5;border-radius:var(--r-md);
  padding:18px 20px;box-shadow:0 6px 18px -16px rgba(40,24,90,.4);transition:transform .26s var(--ease),box-shadow .26s,border-color .26s}
.ref:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(40,24,90,.5);border-color:color-mix(in srgb,var(--accent) 36%,#eae7f5)}
.ref .ic{flex:none;width:44px;height:44px;border-radius:13px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.ref .t{flex:1;min-width:0}
.ref .t b{display:block;font-size:15px;color:var(--ink)}
.ref .t span{display:block;font-size:13px;color:var(--muted-2);margin-top:2px}
/* ============================================================ FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:var(--s7)}
details{background:var(--surface);border-radius:var(--r-md);padding:2px 22px;box-shadow:0 14px 32px -28px rgba(40,24,90,.34)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 2px;cursor:pointer;list-style:none;
  font-family:var(--font-head);font-weight:700;font-size:15.5px}
summary::-webkit-details-marker{display:none}
.plus{transition:transform .25s;color:var(--accent);font-size:22px;font-weight:400;line-height:1}
details[open] .plus{transform:rotate(45deg)}
details p{font-size:var(--fs-sm);color:var(--muted);margin:0 0 18px}
/* ============================================================ AD SLOT */
.ad{background:var(--bg-soft);padding-top:0}
.ad-unit{max-width:980px;margin:0 auto;position:relative;min-height:100px;display:block;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:#b7b1c6;font-size:13px;font-weight:500;overflow:hidden}
.ad-unit .lab{position:absolute;top:9px;left:14px;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:#5c5870;z-index:1}
.ad-unit .adsbygoogle{display:block;width:100%;min-height:100px}
/* ============================================================ CTA */
.cta{background:var(--bg-soft);padding-top:0}
.cta-band{max-width:var(--maxw);margin:0 auto;position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--dark);box-shadow:0 40px 80px -36px rgba(20,12,40,.55)}
.cta-band>img{position:absolute;right:0;top:0;bottom:0;height:100%;width:64%;object-fit:cover;object-position:center}
.cta-band .veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%,var(--dark) 32%,color-mix(in srgb,var(--dark) 70%,transparent) 56%,color-mix(in srgb,var(--dark) 12%,transparent) 100%)}
.cta-inner{position:relative;padding:60px 50px;display:flex;flex-direction:column;align-items:flex-start}
.cta-inner h2{font-size:clamp(30px,3.6vw,46px);font-weight:700;color:#fff;max-width:460px;letter-spacing:-.02em}
.cta-inner p{font-size:15.5px;color:rgba(255,255,255,.72);margin-top:var(--s4);max-width:380px}
.cta-chips{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5)}
.cta-chips span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)}
/* ============================================================ FOOTER */
.footer{position:relative;overflow:hidden;background:#0a0e16;color:#fff}
.footer .glow{position:absolute;top:-130px;left:50%;transform:translateX(-50%);width:1000px;height:320px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);pointer-events:none}
.footer .wrap{position:relative;padding-top:var(--s9);padding-bottom:var(--s6)}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:var(--s7)}
.foot-grid p{font-size:14px;color:#8b85a0;line-height:1.65;margin-top:18px;max-width:300px}
.foot-col h3{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#8d86a6;text-transform:uppercase}
.foot-col a{display:block;color:#c3bed4;font-size:14px;margin-top:12px}
.foot-col a:hover{color:var(--accent)}
.foot-rule{height:1px;background:rgba(255,255,255,.08);margin:48px 0 22px}
.foot-legal{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-legal small{font-size:12.5px;color:#5e5872}
.foot-legal .links{display:flex;gap:24px}
.foot-legal .links a{color:#7c7691;font-size:12.5px}
.disclaimer{font-size:11.5px;color:#46415a;line-height:1.6;margin-top:16px;max-width:880px}
.foot-bottom{background:#0a0e16;border-top:1px solid rgba(255,255,255,.08)}
.foot-bottom .wrap{padding-top:22px;padding-bottom:22px}
.foot-bottom .foot-legal small{color:#9a94ad}
.foot-bottom .foot-legal .links a{color:#c3bed4}
.foot-bottom .disclaimer{color:#928cab}
/* ============================================================ MOTION */
@keyframes hud-drift{0%{transform:scale(1.16) translate(-13px,7px)}100%{transform:scale(1.16) translate(0,0)}}
@keyframes hud-ping{0%{opacity:.7;transform:scale(.66)}100%{opacity:0;transform:scale(1.5)}}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}16%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2.3);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ============================================================ RESPONSIVE
   mobile <=767 - tablet 768-1023 - desktop >=1024 */
@media (max-width:1023px){
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex}
  .hero{min-height:clamp(520px,72vh,640px)}
  .hud{--hud-x:49%;--hud-y:45%}
  .reticle2{width:124px;height:124px}
  .why-grid,.how-grid,.trust-grid{grid-template-columns:1fr;gap:var(--s7)}
  .feats{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .cta-band>img{display:none}
  .cta-inner{padding:46px 30px}
}
@media (max-width:767px){
  .feats,.faq-grid,.foot-grid{grid-template-columns:1fr}
  .brand-sub{display:none}
  .hero .lead{max-width:none}
  :root{--section-y:54px}
  .hero{min-height:clamp(500px,84vh,620px)}
  .hero-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-ink) 22%,transparent) 0%,color-mix(in srgb,var(--hero-ink) 86%,transparent) 66%)}
  .hero-inner{align-items:flex-end;padding-top:var(--s7);padding-bottom:calc(var(--s9) + var(--s2))}
  /* reticle needs a text-free image zone - none on a phone-width hero; the full-bleed POV + clip bar carry the soul here */
  .hud{display:none}
  .hero-points{flex-direction:column;gap:var(--s3);align-items:flex-start;margin-top:var(--s5)}
  .feats{gap:var(--s4)}
  .clip-label{display:none}
  .foot-grid{text-align:left}
  /* content blocks stack on phones */
  .content-region .cr-cards{grid-template-columns:1fr}
  .content-region .cr-stats{grid-template-columns:1fr 1fr}
  .content-region .cr-stat{border-right:none;border-bottom:1px solid var(--border)}
}

/* ===== Content region (COC prose) + FAQ - styled to The Observer ===== */
.content-region{border-top:1px solid #f2f0f8}
.content-region .pg-section{max-width:760px;margin:0 auto}
.content-region .pg-section--content{padding:0;margin-bottom:var(--s7)}
.content-region h2{font-family:var(--font-head);font-size:var(--fs-h2);font-weight:600;margin-bottom:var(--s4);letter-spacing:-.02em}
.content-region p{font-size:var(--fs-lead);color:var(--muted);margin-bottom:var(--s4);line-height:1.7}
.pg-faq{display:grid;gap:14px;margin-top:var(--s6)}
.pg-faq dt{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink);margin-top:var(--s4)}
.pg-faq dd{margin:6px 0 0;color:var(--muted);font-size:var(--fs-body);padding-left:16px;border-left:2px solid var(--accent)}
/* the per-domain hero image fills the cinematic hero frame (or dark slate when empty) */
.hero-media-slot{position:absolute;inset:0;z-index:0}
.hero-media-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}

/* ===== Content blocks (the presentation layer) - Observer-styled, token-driven ===== */
.content-region .cr-lead{font-size:var(--fs-lead);color:var(--muted);margin-bottom:var(--s5);line-height:1.7}
/* stat-band - reuse the hero stat look: big serif number, hairline dividers, no boxes */
.content-region .cr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:var(--s5) 0}
.content-region .cr-stat{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--border)}
.content-region .cr-stat:last-child{border-right:none}
.content-region .cr-stat-v{display:block;font-family:var(--font-head);font-weight:600;
  font-size:clamp(34px,4vw,46px);letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.content-region .cr-stat-l{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-top:10px}
.content-region .cr-stat-n{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:6px}
/* steps - reuse the .how dotted-connector trick + accent-soft numbered disc */
.content-region .cr-steps{list-style:none;padding:0;margin:var(--s5) 0;display:flex;flex-direction:column}
.content-region .cr-step{display:flex;gap:var(--s4);align-items:flex-start;position:relative;padding-bottom:22px}
.content-region .cr-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:1.5px;
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent) 40%,var(--border)) 0 4px,transparent 4px 9px)}
.content-region .cr-step-n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;color:var(--accent-d)}
.content-region .cr-step-t h3{font-size:16px;font-weight:700;margin-top:8px;color:var(--ink)}
.content-region .cr-step-t p{font-size:var(--fs-sm);color:var(--muted);margin-top:5px}
/* cards - reuse the .feat grid: uniform tinted icon chip, <=3px hover lift */
.content-region .cr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin:var(--s5) 0}
.content-region .cr-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.content-region .cr-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.content-region .cr-card:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.content-region .cr-card-chip{display:flex;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
  align-items:center;justify-content:center;color:var(--accent-d)}
.content-region .cr-card-chip svg{width:21px;height:21px}
.content-region .cr-card-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.content-region .cr-card h3{font-size:17px;font-weight:700;margin-top:var(--s4);color:var(--ink)}
.content-region .cr-card p{font-size:var(--fs-sm);color:var(--muted);margin-top:7px}
/* category-cards - metadata in a right-aligned cluster (scans like a table) */
.content-region .cr-cat .cr-cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.content-region .cr-cat-right{display:flex;align-items:center;gap:8px;flex:none}
.content-region .cr-cat-meta{font-size:var(--fs-xs);font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}
.content-region .cr-cat-badge{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-pill)}
.content-region .cr-cat-badge--easy{background:color-mix(in srgb,#1f8f4e 14%,var(--surface));color:#1f7a44}
.content-region .cr-cat-badge--med{background:var(--accent-soft);color:var(--accent-d)}
.content-region .cr-cat-badge--hard{background:color-mix(in srgb,#c23b2e 14%,var(--surface));color:#a8362b}
.content-region .cr-cat-badge--neutral{background:color-mix(in srgb,var(--ink) 8%,var(--surface));color:var(--muted)}
/* callout - single accent left-border + tinted bg; one icon; scarcity = power */
.content-region .cr-callout{border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--accent-soft);padding:18px 22px;margin:var(--s5) 0}
.content-region .cr-callout h3{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);margin-bottom:6px}
.content-region .cr-callout p{font-size:var(--fs-sm);color:var(--muted);line-height:1.65}
.content-region .cr-callout--reassure{border-left-color:#1f8f4e;background:color-mix(in srgb,#1f8f4e 8%,var(--surface))}
.content-region .cr-callout--warning{border-left-color:#c23b2e;background:color-mix(in srgb,#c23b2e 8%,var(--surface))}
/* definition - quiet boxed plain-English term: hairline frame, term eyebrow, optional caveat */
.content-region .cr-definition{border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--bg-soft);padding:20px 24px;margin:var(--s5) 0}
.content-region .cr-def-term{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#7d5606;margin-bottom:8px}
.content-region .cr-def-body{font-size:var(--fs-body);color:var(--ink);line-height:1.7}
.content-region .cr-def-note{font-size:var(--fs-sm);color:var(--muted);margin-top:10px;line-height:1.6}


/* The practice tool is an anchor target (#start) but carries NO scroll link, so the shared
   scroll-to-content block never emits its offset rule for this page - and the shell header is
   STICKY at 71px measured on the rendered page, so the tool landed underneath it. 5.5rem matches
   the value that block uses everywhere else; one number for the estate, not one per page. */
#start{scroll-margin-top:5.5rem}
/* ===== Content page (_default) layout - compact hero + prose, Observer-styled ===== */
.content-hero{background:var(--bg-soft);border-bottom:1px solid var(--border);padding:var(--s9) 0 var(--s8)}
.content-hero h1{font-size:clamp(32px,5vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.05;max-width:760px;color:var(--ink)}
.content-hero .lead{font-size:var(--fs-lead);color:var(--muted);margin-top:var(--s5);max-width:620px}
.content-region .pg-section--content:last-child{margin-bottom:0}
.faq-region{border-top:1px solid #f2f0f8;padding-top:var(--s6)}
.faq-region h2{margin-top:0;margin-bottom:var(--s5)}
.faq-region .pg-faq{max-width:820px;margin:0 auto}

/* ===== Practice page - THE LAUNCH PAD (2026-09-30) =====
   The frame and the words live here. The stage a visitor watches and the rail of numbers under it
   arrive already rendered (classes .hpt-stage* / .hpt-fact*), because those numbers are counted
   from the clip data - add a clip and the page corrects itself. Nothing below states a quantity.
   Replaces a centred poster block whose .ph-player/.ph-frame/.ph-badge/.ph-play/.ph-cap/.ph-btn
   rules were rendered by zero pages. */
.practice-hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);padding:0}
/* padding:0 above is load-bearing - the global section rule gives every <section> var(--section-y) top and bottom (140px at desktop), which left a band of dead dark ground under the fact rail. The hero sets its own rhythm on .ph-wrap instead, so the rail sits flush. */
.practice-hero .ph-bg{position:absolute;inset:0;z-index:0}
.practice-hero .ph-bg img{width:100%;height:100%;object-fit:cover;opacity:.46;filter:saturate(.92) contrast(1.04)}
.practice-hero .ph-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,10,22,.94) 0%,rgba(12,10,22,.86) 38%,rgba(12,10,22,.62) 70%,rgba(12,10,22,.72) 100%)}
.practice-hero .ph-wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;text-align:left;padding-top:clamp(48px,6vw,84px);padding-bottom:0}
.practice-hero .ph-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.ph-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);background:rgba(194,135,14,.13);border:1px solid rgba(194,135,14,.32);padding:7px 14px;border-radius:var(--r-pill)}
.ph-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(194,135,14,.22)}
.ph-head h1{font-family:var(--font-head);font-size:clamp(33px,3.7vw,49px);font-weight:600;letter-spacing:-.02em;line-height:1.04;margin:18px 0 0;color:#fff;text-wrap:balance}
.ph-head .lead{font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);margin:15px 0 0;max-width:34em}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.practice-hero .ph-actions .btn{font-size:15.5px;padding:16px 24px;white-space:nowrap}
.practice-hero .ph-actions .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05)}
.practice-hero .ph-actions .btn-ghost:hover{background:rgba(255,255,255,.11)}
.ph-points{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:14px;color:rgba(255,255,255,.62)}
.ph-points span{display:inline-flex;align-items:center;gap:8px}
.ph-stage-link{display:block;text-decoration:none;color:inherit}
.practice-hero .ph-facts-band{position:relative;z-index:1;margin-top:clamp(36px,4.5vw,58px);border-top:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.practice-hero .ph-facts-band > .wrap{max-width:var(--maxw);margin:0 auto}
@media(max-width:900px){.practice-hero .ph-grid{grid-template-columns:1fr;gap:30px}.practice-hero .ph-wrap{padding-top:var(--s7)}}
/* on-domain HPT clip player region (the practice-tool slot). The player brings its own .hpt-* scoped
   styles + rgb() fallbacks; this only frames the region so it sits under the hero. */
.practice-tool-region{padding-top:var(--s6);padding-bottom:var(--s6)}
.practice-tool-region .wrap{margin:0 auto}

/* Contact enquiry form (pg-contact-form) - Observer-themed */
.pg-section--contact{max-width:760px;margin:0 auto;padding:var(--s7,56px) 24px}
.pg-section--contact h2{font-family:var(--font-head);font-size:var(--fs-h2,30px);font-weight:600;margin-bottom:20px;letter-spacing:-.02em;color:var(--ink)}
.pg-form{max-width:560px;margin-top:8px}
.pg-hp{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px;height:1px;overflow:hidden}
.pg-field{margin-bottom:18px;display:flex;flex-direction:column}
.pg-label{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pg-input,.pg-textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;width:100%;box-sizing:border-box;transition:border-color .15s}
.pg-input:focus,.pg-textarea:focus{outline:none;border-color:var(--accent)}
.pg-textarea{resize:vertical;min-height:120px;line-height:1.6}
.cf-turnstile{margin:4px 0 18px}
.pg-form-error{font-family:var(--font-body);font-size:13px;color:#b00020;margin:0 0 14px}
.pg-form-submit{background:var(--accent);color:var(--dark,#0c0a16);cursor:pointer;border:none}
.pg-form-submit:disabled{opacity:.6;cursor:default}
  /* token overrides */
  :root{
    --bg:#ffffff;
    --bg-soft:#f5f7fa;
    --surface:#ffffff;
    --ink:#18212e;
    --muted:#475467;
    --muted-2:#66717f;
    --border:#e4e8ee;
    --accent:#c2870e;
    --accent-d:#9c6c08;
    --dark:#0f1825;
    --font-head:'Fraunces', Georgia, serif;
    --font-body:'Inter', system-ui, sans-serif;
  }

/* ============================================================ CONTENT SECTIONS, PREMIUM PASS (2026-10-02)
   Abdul: "make the content section more premium ... review the kings domains presentation".
   What the references do that a stacked H2+paragraph column does not: a numbered eyebrow, the
   heading held LEFT while the body reads on the right (the king's 01/02/03 rows, the mock's
   "What the DKT actually is"), a lead sentence in ink, definitions and callouts as cards, and the
   FAQ as question | answer rows instead of a quote list. Markup untouched: this is the shell's
   stylesheet, per door, and it overrides the generic 760px column above. */
.content-region{counter-reset:sec;border-top:1px solid var(--border)}
.content-region .pg-section--content{max-width:none;margin:0;counter-increment:sec;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr);column-gap:clamp(32px,6vw,88px);row-gap:0;
  align-items:start;padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--border)}
.content-region .pg-section--content:first-child{border-top:0}
.content-region .pg-section--content:last-child{margin-bottom:0}
.content-region .pg-section--content>*{grid-column:2;min-width:0}
.content-region .pg-section--content>h2{grid-column:1;grid-row:1 / span 40;position:sticky;top:96px;align-self:start;
  margin:0;font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.content-region .pg-section--content>h2::before{content:counter(sec,decimal-leading-zero);display:block;
  font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.content-region .pg-section--content>h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--accent);margin-top:20px}
.content-region .cr-lead{font-size:clamp(18px,1.55vw,21px);font-weight:500;color:var(--ink);line-height:1.55;margin:0 0 var(--s4);text-wrap:pretty}
.content-region .pg-section--content>p{font-size:17px;color:var(--muted);line-height:1.72;max-width:64ch;margin:0 0 var(--s4);text-wrap:pretty}
.content-region .pg-section--content>p:last-child{margin-bottom:0}
.content-region .cr-definition{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);
  border-radius:var(--r-md);padding:22px 24px;margin:var(--s2) 0 var(--s4);box-shadow:var(--sh-sm)}
.content-region .cr-def-body{font-size:var(--fs-lead);color:var(--ink);line-height:1.6}
.content-region .cr-callout{border-radius:var(--r-md);border-left-width:4px;padding:20px 24px;margin:var(--s2) 0 var(--s4)}
.content-region .cr-callout h3{font-size:17px}
.content-region .cr-callout p{font-size:15.5px}
.content-region .cr-cards,.content-region .cr-stats,.content-region .cr-split,.content-region .cr-illus-band{grid-column:1 / -1;margin-top:var(--s5)}
.content-region .cr-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.content-region .cr-card{padding:26px 24px}
.content-region .cr-card h3{font-size:18px}
.content-region .cr-card p{font-size:15px;line-height:1.6}
/* the FAQ: one question, one answer, one row - read across, not down a quote list */
.faq .faq-grid{grid-template-columns:1fr;margin-top:var(--s6)}
.faq .pg-section--faq{max-width:none;margin:0}
/* the block repeats the eyebrow the section already prints; kept for readers of structure, not shown twice */
.faq .pg-section--faq>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.faq .pg-faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:0;margin-top:var(--s4);border-top:1px solid var(--border)}
.faq .pg-faq dt{margin:0;padding:24px 28px 24px 0;border-bottom:1px solid var(--border);font-size:18px;line-height:1.3;text-wrap:balance}
.faq .pg-faq dt::first-letter{text-transform:uppercase}
.faq .pg-faq dd{margin:0;padding:24px 0 24px 28px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);font-size:16px;line-height:1.65;color:var(--muted)}
/* the how-it-works frame is an ACTION (Abdul 2026-10-02: "no action exist for user"): the whole clip opens the player in place */
.clip .clip-go{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-decoration:none;cursor:pointer}
.clip .clip-go-btn{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--dark);display:grid;place-items:center;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.65),0 0 0 8px rgba(255,255,255,.14);transition:transform var(--dur) var(--ease),background var(--dur),box-shadow var(--dur)}
.clip .clip-go-btn svg{width:34px;height:34px;margin-left:4px}
.clip .clip-go-txt{font-size:14px;font-weight:700;letter-spacing:.02em;background:rgba(12,10,22,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:8px 14px;border-radius:999px}
.clip .clip-go:hover .clip-go-btn,.clip .clip-go:focus-visible .clip-go-btn{transform:scale(1.07);background:var(--accent-d);box-shadow:0 22px 48px -14px rgba(0,0,0,.7),0 0 0 12px rgba(255,255,255,.2)}
.clip .clip-go:active .clip-go-btn{transform:scale(.98)}
.clip .clip-go:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 70%,white);outline-offset:-6px;border-radius:22px}
.phone:has(.clip-go:hover) .reticle{opacity:.5}
/* a phone frame is ~150px tall: give it height, and let the action replace the pill and the rings rather than fight them */
@media (max-width:640px){.clip{aspect-ratio:16/10}.clip .cap,.clip .reticle{display:none}.clip .clip-go{gap:8px}.clip .clip-go-btn{width:56px;height:56px;box-shadow:0 12px 28px -10px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.14)}.clip .clip-go-btn svg{width:24px;height:24px;margin-left:3px}.clip .clip-go-txt{font-size:12.5px;padding:6px 11px}}
@media (max-width:900px){
  .content-region .pg-section--content{grid-template-columns:1fr;padding:40px 0}
  .content-region .pg-section--content>*,.content-region .pg-section--content>h2{grid-column:1;grid-row:auto}
  .content-region .pg-section--content>h2{position:static;margin-bottom:var(--s5)}
  .content-region .cr-cards{grid-template-columns:1fr}
  .faq .pg-faq{grid-template-columns:1fr}
  .faq .pg-faq dt{padding:22px 0 8px;border-bottom:0}
  .faq .pg-faq dd{padding:0 0 22px;border-left:0}
}

/* ============================================================ INNER PAGES, PREMIUM PASS (2026-10-02)
   Abdul: "work on all the other content pages ... section by section ... make more visually good so
   customer stay long". Measured first: every inner page is content-hero + numbered sections (already
   styled above) + a FAQ region still in the old quote-list style; the hero carried the same call to
   action twice; a legal page numbers its own headings so the counter doubled them; the contact form
   wore a navy button no other surface on this door uses. */
/* the page hero: room to breathe, the headline balanced, a gold rule, one action */
.content-hero{padding:clamp(56px,7vw,88px) 0 clamp(48px,6vw,72px);background:linear-gradient(180deg,var(--bg-soft),#fff 140%);border-bottom:1px solid var(--border)}
.content-hero h1{font-size:clamp(34px,4.6vw,56px);text-wrap:balance;max-width:16ch}
.content-hero h1::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--accent);margin-top:22px}
.content-hero .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;margin-top:var(--s5);max-width:58ch;text-wrap:pretty}
.content-hero .hero-cta-wrap{margin-top:var(--s6)}
/* the same target offered twice (a button and a text link) is one action: keep the button */
.content-hero .hero-cta-wrap:has(a.btn) a:not(.btn){display:none}
/* the FAQ on inner pages reads across, like the home page's */
.faq-region{border-top:1px solid var(--border);padding:clamp(48px,6vw,72px) 0 var(--s8)}
.faq-region .pg-section--faq{max-width:none;margin:0}
.faq-region .pg-section--faq>h2{font-size:clamp(26px,2.8vw,34px);letter-spacing:-.02em;margin:0 0 var(--s2)}
.faq-region .pg-faq{max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:0;margin-top:var(--s5);border-top:1px solid var(--border)}
.faq-region .pg-faq dt{margin:0;padding:24px 28px 24px 0;border-bottom:1px solid var(--border);font-size:18px;line-height:1.3;text-wrap:balance}
.faq-region .pg-faq dt::first-letter{text-transform:uppercase}
.faq-region .pg-faq dd{margin:0;padding:24px 0 24px 28px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);font-size:16px;line-height:1.65;color:var(--muted)}
/* a legal page numbers its own headings; the counter would print 03 over "3." */
html:has(head link[rel="canonical"][href$="/privacy-policy"]) .content-region .pg-section--content>h2::before{display:none}
/* the contact form: the door's own button, calmer fields, and the message column beside its heading */
.pg-section--contact{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,72px) var(--s5);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr);column-gap:clamp(32px,6vw,88px);align-items:start;border-top:1px solid var(--border)}
.pg-section--contact>h2{grid-column:1;margin:0;font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.025em}
.pg-section--contact>h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--accent);margin-top:20px}
.pg-section--contact>p{grid-column:1;font-size:16px;color:var(--muted);margin-top:var(--s4)}
.pg-section--contact>form{grid-column:2;grid-row:1 / span 3}
.site-form .form-row{margin:0 0 18px}
.pg-section--contact .site-form label{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.site-form input[type=text],.site-form input[type=email],.site-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;transition:border-color .2s,box-shadow .2s}
.site-form input:focus,.site-form textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.site-form textarea{min-height:180px;resize:vertical}
.site-form button[type=submit]{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--dark);border:0;border-radius:var(--r-pill);padding:15px 26px;font:inherit;font-weight:600;font-size:15.5px;cursor:pointer;box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 60%,transparent);transition:transform var(--dur) var(--ease),background var(--dur)}
.site-form button[type=submit]:hover{transform:translateY(-2px);background:var(--accent-d)}
.site-form button[type=submit]:active{transform:translateY(0) scale(.985)}
@media (max-width:900px){
  .faq-region .pg-faq{grid-template-columns:1fr}
  .faq-region .pg-faq dt{padding:22px 0 8px;border-bottom:0}
  .faq-region .pg-faq dd{padding:0 0 22px;border-left:0}
  .pg-section--contact{grid-template-columns:1fr;padding:40px var(--s5)}
  .pg-section--contact>h2,.pg-section--contact>p,.pg-section--contact>form{grid-column:1;grid-row:auto}
  .pg-section--contact>form{margin-top:var(--s5)}
}

/* ============================================================ INNER HERO, THE RIGHT HALF (2026-10-02)
   Abdul: "right hand side area is blank on hero of all these kind of pages ... lot of blank spaces
   check out the swift content page banner". The sibling fills its right half with the same composed
   card on every content page. This door's card is its product: a frame from a free clip, the play
   button, the tap instruction, the caught-it badge - and the whole card opens the player in place.
   The card is markup in the door's default content layout; these rules are its look. */
.content-hero{position:relative;overflow:hidden;background:radial-gradient(760px 420px at 86% 22%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 64%),linear-gradient(180deg,var(--bg-soft),#fff 140%)}
.content-hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(32px,5vw,72px);align-items:center}
/* a page with its own figure keeps the shape it declared */
.hero-figure~.hero-clipcard{display:none}
/* the tick strip above the headline: three facts the sibling also states, in this door's words */
.hero-ticks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;font-weight:600;color:var(--muted)}
.hero-ticks li{display:inline-flex;align-items:center;gap:8px}
.hero-ticks li::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;background:var(--accent);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='black' opacity='.18'/><path d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='black' opacity='.18'/><path d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
/* the card */
.hero-clipcard{display:block;position:relative;justify-self:end;width:min(100%,470px);text-decoration:none;color:inherit;border-radius:28px}
.hero-clipcard .hcc-panel{display:block;position:relative;padding:24px 24px 26px;border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,#fff) 0%,color-mix(in srgb,var(--accent) 6%,#fff) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.hero-clipcard .hcc-panel::before{content:"";position:absolute;right:-22px;top:-22px;width:112px;height:112px;border-radius:50%;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.hero-clipcard .hcc-frame{display:block;position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--dark);box-shadow:0 30px 60px -28px rgba(12,10,22,.6),0 0 0 1px rgba(12,10,22,.08);transform:translateZ(0)}
.hero-clipcard .hcc-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.hero-clipcard .hcc-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,22,.12),transparent 32%,transparent 58%,rgba(12,10,22,.7));pointer-events:none}
.hero-clipcard .hcc-chip{position:absolute;z-index:2;left:14px;top:14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);background:var(--accent);padding:5px 10px;border-radius:999px}
.hero-clipcard .hcc-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.96);color:var(--dark);display:grid;place-items:center;box-shadow:0 18px 40px -12px rgba(0,0,0,.65),0 0 0 11px rgba(255,255,255,.18);transition:transform .25s var(--ease),background .25s var(--ease)}
.hero-clipcard .hcc-play svg{width:30px;height:30px;margin-left:4px}
.hero-clipcard .hcc-bar{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:10px;color:#fff;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.hero-clipcard .hcc-track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.hero-clipcard .hcc-track i{display:block;width:36%;height:100%;background:var(--accent);border-radius:2px}
.hero-clipcard .hcc-hint{display:block;margin:16px 0 0;font-size:14px;font-weight:600;color:var(--ink);text-align:center}
.hero-clipcard .hcc-badge{position:absolute;z-index:3;right:-8px;bottom:92px;display:inline-flex;align-items:center;gap:8px;background:#039855;color:#fff;font-size:14px;font-weight:700;padding:12px 16px;border-radius:999px;box-shadow:0 18px 36px -14px rgba(3,152,85,.75)}
.hero-clipcard .hcc-badge svg{width:18px;height:18px}
.hero-clipcard:hover .hcc-play,.hero-clipcard:focus-visible .hcc-play{transform:translate(-50%,-50%) scale(1.08);background:var(--accent)}
.hero-clipcard:hover .hcc-frame img{transform:scale(1.04)}
.hero-clipcard:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
/* every in-page anchor lands clear of the sticky header (the home page's #how sat under it) */
[id]{scroll-margin-top:6rem}
/* a hero button with nowhere to go is hidden, not shown dead */
.content-hero .hero-cta-wrap a.btn[href="#"]{display:none}
@media (max-width:900px){
  .content-hero .wrap{grid-template-columns:1fr;row-gap:30px}
  .hero-clipcard{justify-self:start;width:100%;max-width:520px}
  .hero-clipcard .hcc-badge{right:6px;bottom:96px;font-size:13px;padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.hero-clipcard .hcc-frame img,.hero-clipcard .hcc-play{transition:none}}

/* ============================================================ THE DKT PAGE'S HERO CARD (2026-10-02)
   Abdul: "this is a dkt page not hpt, check out the page again". The clip card is the HPT product;
   the DKT page's product is a question, so its layout (a page-specific row in Mother) carries a
   question card instead: one real question from this door's bank, the right answer marked, the
   same panel and badge language as the clip card so the two pages read as one family. */
.hero-quizcard{display:block;position:relative;justify-self:end;width:min(100%,470px);text-decoration:none;color:inherit;border-radius:28px}
.hero-quizcard .hqc-panel{display:block;position:relative;padding:24px 24px 26px;border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 18%,#fff) 0%,color-mix(in srgb,var(--accent) 6%,#fff) 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.hero-quizcard .hqc-panel::before{content:"";position:absolute;right:-22px;top:-22px;width:112px;height:112px;border-radius:50%;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.hero-quizcard .hqc-card{display:block;position:relative;background:var(--surface);border-radius:16px;padding:18px 18px 16px;box-shadow:0 30px 60px -28px rgba(12,10,22,.45),0 0 0 1px rgba(12,10,22,.06)}
.hero-quizcard .hqc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.hero-quizcard .hqc-head b{color:var(--ink)}
.hero-quizcard .hqc-track{display:block;height:5px;border-radius:3px;background:var(--border);margin:10px 0 14px;overflow:hidden}
.hero-quizcard .hqc-track i{display:block;width:44%;height:100%;background:var(--accent);border-radius:3px}
.hero-quizcard .hqc-q{display:block;font-weight:700;font-size:15.5px;line-height:1.35;color:var(--ink);margin-bottom:12px;text-wrap:pretty}
.hero-quizcard .hqc-opt{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:11px;font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:8px;background:var(--surface)}
.hero-quizcard .hqc-opt i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:var(--muted-2);margin-top:1px}
.hero-quizcard .hqc-opt.is-right{border-color:#039855;background:color-mix(in srgb,#039855 8%,#fff);color:var(--ink);font-weight:600}
.hero-quizcard .hqc-opt.is-right i{background:#039855;border-color:#039855;color:#fff}
.hero-quizcard .hqc-hint{display:block;margin:16px 0 0;font-size:14px;font-weight:600;color:var(--ink);text-align:center}
.hero-quizcard .hqc-badge{position:absolute;z-index:3;right:-8px;bottom:84px;display:inline-flex;align-items:center;gap:8px;background:#039855;color:#fff;font-size:14px;font-weight:700;padding:12px 16px;border-radius:999px;box-shadow:0 18px 36px -14px rgba(3,152,85,.75)}
.hero-quizcard .hqc-badge svg{width:18px;height:18px}
.hero-quizcard:hover .hqc-card{transform:translateY(-2px);transition:transform .25s var(--ease)}
.hero-quizcard:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.content-hero .wrap:not(:has(.hero-clipcard,.hero-figure,.hero-quizcard)){display:block}
@media (max-width:900px){.hero-quizcard{justify-self:start;width:100%;max-width:520px}.hero-quizcard .hqc-badge{right:6px;bottom:88px;font-size:13px;padding:10px 14px}}

/* ============================================================ THE PRIMARY BUTTON, EYE-CATCHING (2026-10-02)
   Abdul: "make start practice button more beautiful which cap eye". One gold, lit from above, a glow
   that is the brand colour and not black, a play glyph in place of an arrow, a light sweep on hover.
   Applies to every .btn-primary so the hero, the header and the form agree. */
.btn-primary{position:relative;overflow:hidden;isolation:isolate;font-weight:700;letter-spacing:-.005em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 84%,white) 0%,var(--accent) 55%,var(--accent-d) 130%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.08) inset,0 16px 34px -12px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{transform:translateY(-2px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,white) 0%,var(--accent) 50%,var(--accent-d) 130%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 22px 44px -14px color-mix(in srgb,var(--accent) 85%,transparent)}
.btn-primary .btn-play{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dark);color:var(--accent);flex:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.btn-primary .btn-play svg{width:12px;height:12px;margin-left:2px}
.nav-cta{padding:13px 22px 13px 14px;gap:10px}
@media (prefers-reduced-motion:reduce){.btn-primary::after{display:none}}

/* Secondary-link utility rules used by the shared hero block.
   The shared hero appends a "read first" link beside the main action, and that link arrives
   wearing utility classes this hand-written stylesheet did not define - so it rendered unstyled
   and its icon fell back to natural size. These rules give it this site's own brand colour
   through var(--accent), and size the icon. */
.hero-cta-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.4rem}
.content-hero--dark .hero-cta-wrap a:not(.btn-primary){color:#fff}
/* the small "see the official source" link with utility classes */
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.gap-2{gap:.5rem}
.text-sm{font-size:.9rem}
.font-semibold{font-weight:600}
.text-brand-700{color:var(--accent)}
.h-5{height:1.25rem}
.w-5{width:1.25rem}
.hero-cta-wrap .text-brand-700{text-decoration:none}
.hero-cta-wrap .text-brand-700:hover{text-decoration:underline;color:var(--accent)}

/* -- STEP 1 (2026-09-25): the split hero, figures, method list and the pass-mark scorecard.
   Moved from BLITZ template 8 into the SHARED layout so every door renders the same blocks
   Mother emits. Colours are the theme variables, not a palette. -- */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.15rem 0 0;font-size:.92rem;color:var(--ink-muted)}
.hero-trust .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:999px;background:rgba(51,70,92,.08);font-weight:700;font-size:.82rem;color:var(--ink)}
.hero-trust .pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(190,18,60,.25)}
/* 1. DARK - the front-door face, for the pages that carry the niche's head terms */
.content-hero--dark{background:var(--slate-deep);border-bottom-color:rgba(255,255,255,.08)}
.content-hero--dark::before{background:radial-gradient(42rem 20rem at 100% 0%,rgba(190,18,60,.22),transparent 62%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 30px)}
.content-hero--dark h1{color:var(--surface)}
.content-hero--dark .lead{color:rgba(255,255,255,.78)}
.hero--dark .hero-trust,.content-hero--dark .hero-trust{color:rgba(255,255,255,.6)}
.hero--dark .hero-trust .pill,.content-hero--dark .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)}
/* the landing hero is dark by design, so its badges take the dark treatment without a modifier */
.hero .hero-trust{color:rgba(255,255,255,.62);margin-bottom:1.35rem}
.hero .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)}
.content-hero--dark .hero-cta-wrap a:not(.btn-primary){color:var(--surface)}
.content-hero--dark .btn-ghost,.content-hero--dark .btn-outline{color:var(--surface);border-color:rgba(255,255,255,.42)}
.content-hero--dark .btn-ghost:hover,.content-hero--dark .btn-outline:hover{color:var(--surface);border-color:var(--surface);background:rgba(255,255,255,.07)}
/* the copy column is ONE grid child however much the hero carries inside it */
.content-hero--split .hero-copy{min-width:0}
.content-hero--split .hero-figure svg.hero-art{display:block;width:100%;height:auto}
.content-hero--split .hero-figure{margin:2rem 0 0;border-radius:1rem;border:1px solid var(--border);background:var(--surface);overflow:hidden;box-shadow:0 20px 45px -25px rgba(16,24,40,.45)}
.content-hero--split .hero-figure img{display:block;width:100%;height:auto}
.content-hero--split .hero-figure figcaption{padding:.9rem 1.1rem;font-size:.92rem;line-height:1.5;color:var(--ink-muted);border-top:1px solid var(--border);margin:0}
.content-hero--split .hero-figure figcaption b{color:var(--ink)}
/* 3. RULE - the headline plus the numbers the page exists to explain */
.content-hero--rule .hero-facts{display:grid;gap:.7rem;margin:1.5rem 0 0;grid-template-columns:1fr}
.content-hero--rule .hero-fact{padding:.8rem 1rem;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 .6rem .6rem 0;background:rgba(255,255,255,.72)}
.content-hero--rule .hero-fact b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.content-hero--rule .hero-fact span{display:block;font-size:.85rem;color:var(--ink-muted);margin-top:.15rem}
/* 4. COMPACT - a utility page carries less air than a landing page */
.content-hero--compact{padding:2.4rem 0 2rem}
.content-hero--compact h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.content-hero--compact .lead{font-size:1.08rem}
.content-region .cr-figure{margin:1.75rem auto .25rem;max-width:30rem}
.content-region .cr-figure svg{display:block;width:100%;height:auto}
.content-region .cr-figure--wide{max-width:46rem}
.content-region .cr-figure--tight{max-width:18rem}
.content-region .cr-figure figcaption{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-muted);text-align:center;line-height:1.5}
.content-region .cr-illus-band{margin:1.75rem 0 .5rem;padding:1.6rem 1.5rem 1.25rem;background:var(--slate-soft);border:1px solid var(--border);border-radius:var(--radius-lg)}
.content-region .cr-illus-band svg{display:block;width:100%;height:auto;max-width:40rem;margin:0 auto}
.content-region .cr-illus-band figcaption{margin:1rem auto 0;max-width:40rem;font-size:.86rem;color:var(--ink-muted);text-align:center;line-height:1.55}
/* two-section split */
.content-region .cr-split{display:grid;gap:1px;margin:1.75rem 0 .5rem;background:var(--border-mid);border:1px solid var(--border-mid);border-radius:var(--radius-lg);overflow:hidden}
.content-region .cr-split-col{background:var(--surface);padding:1.4rem 1.5rem}
.content-region .cr-split-top{display:flex;align-items:center;gap:.9rem;margin:0 0 1.15rem}
.content-region .cr-split-n{font-size:2.9rem;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--head);font-variant-numeric:tabular-nums}
.content-region .cr-split-col--rs .cr-split-n{color:var(--accent)}
.content-region .cr-split-l{font-weight:800;color:var(--head);font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.content-region .cr-split-l small{display:block;font-weight:600;font-size:.8rem;color:var(--ink-muted);letter-spacing:0;margin-top:.2rem}
.content-region .cr-split-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem}
.content-region .cr-split-topics li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--head);margin:0}
.content-region .cr-split-topics svg{flex:none;width:1.5rem;height:1.5rem}
/* method row */
.content-region .cr-method{list-style:none;margin:1.6rem 0 .5rem;padding:0;display:grid;gap:1.1rem}
.content-region .cr-method li{display:flex;gap:.9rem;align-items:flex-start;margin:0}
.content-region .cr-method .cr-m-ic{flex:none;width:2.9rem;height:2.9rem;border-radius:.7rem;background:var(--accent-soft);display:grid;place-items:center}
.content-region .cr-method .cr-m-ic svg{width:1.55rem;height:1.55rem}
.content-region .cr-method h3{margin:.15rem 0 .3rem;font-size:1.02rem}
.content-region .cr-method p{margin:0;font-size:.95rem;color:var(--ink-muted);line-height:1.55}
/* --- in-content launch CTA row --- */
.cr-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.4rem 0 .4rem}
/* ==================================================================
   THE FIGURE SYSTEM  (2026-09-23)
   Append near the END of the site stylesheet, after the
   "FIGURES ALIGN TO THE COLUMN" block it supersedes.

   THE RULE: a figure BLOCK is the reading column. Always. The art
   inside it may be any size; the block never is.

   Why this replaces the left-anchor fix. That fix was right about the
   fault (four figures centred at four different left edges = nothing
   lines up) and it fixed alignment by anchoring each figure left at its
   own natural width. Alignment came back and DEAD SPACE arrived with
   it: in a 912px column a 480px figure leaves 432px of nothing, a
   352px figure leaves 560px, a 240px figure leaves 672px. Both faults
   have ONE cause - the ART was deciding the BLOCK width. So the block
   stops asking. It takes the column, every time, and the left edge is
   the text's left edge because it is the same edge.

   Three treatments, one job each:
     1 PLATE  (default .cr-figure) - framed art at full column width.
       For art drawn 16:9 to 2:1. Zero dead space by construction.
     2 BAND   (.cr-illus-band) - the plate on a soft ground, for art
       that wants air around it. Also full column.
     3 STAGE  (.cr-figure--stage, and legacy --tight) - the deliberate
       treatment for art that is GENUINELY small: a full-column soft
       panel with the art held left at a cap and the caption set
       beside it. A small drawing then reads as presented, not
       stranded, and the block still starts at the text's left edge.

   No page needs CSS of its own for any of this. Page-authored
   style="max-width:..." on a figure is the bug, not the fix - strip
   it; these rules cannot out-rank an inline style and must not try
   (no !important anywhere in this file).
   ================================================================== */

/* ---- 1. THE PLATE: the default ----------------------------------- */
.content-region .cr-figure{
  margin:2rem 0 .5rem;
  max-width:none;
  width:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
}
/* the legacy width modifier stops setting a width - the column sets it */
.content-region .cr-figure--wide{max-width:none}
.content-region .cr-figure>svg,
.content-region .cr-figure>img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;          /* the plate does the clipping */
}
.content-region .cr-figure>figcaption{
  margin:0;
  padding:.8rem 1.15rem .85rem;
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-muted);
  font-size:.85rem;
  line-height:1.55;
  text-align:left;
}
.content-region .cr-figure>figcaption strong,
.content-region .cr-figure>figcaption b{color:var(--head)}
/* ---- 2. THE BAND: the plate on a soft ground ---------------------- */
/* Already full-column and already working. Kept, and made explicit so
   it can never fall back to a 40rem art cap inside a 57rem column. */
.content-region .cr-illus-band{
  margin:2rem 0 .5rem;
  max-width:none;
  padding:1.75rem 1.75rem 1.35rem;
  background:var(--slate-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.content-region .cr-illus-band>svg,
.content-region .cr-illus-band>img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
}
.content-region .cr-illus-band>figcaption{
  margin:1rem 0 0;
  max-width:44rem;
  padding:0;
  border-top:0;
  background:none;
  color:var(--ink-muted);
  font-size:.86rem;
  line-height:1.55;
  text-align:left;
}
/* ---- 3. THE STAGE: for art that is genuinely small ---------------- */
/* Art left at a cap, caption beside it. The panel is the column, so the
   small drawing sits ON something instead of floating in white space. */
.content-region .cr-figure--stage,
.content-region .cr-figure--tight{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:1.25rem;
  margin:2rem 0 .5rem;
  max-width:none;
  padding:1.6rem 1.75rem;
  background:var(--slate-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:visible;
}
.content-region .cr-figure--stage>svg,
.content-region .cr-figure--stage>img,
.content-region .cr-figure--tight>svg,
.content-region .cr-figure--tight>img{
  display:block;
  width:100%;
  max-width:20rem;
  height:auto;
  margin:0;
  border-radius:0;
}
.content-region .cr-figure--stage>figcaption,
.content-region .cr-figure--tight>figcaption{
  margin:0;
  padding:0;
  border-top:0;
  background:none;
  color:var(--ink-muted);
  font-size:.95rem;
  line-height:1.6;
  text-align:left;
}
/* ---- 4. RHYTHM: a figure that opens a section sits closer to it --- */
.content-region .pg-section>h2+.cr-figure,
.content-region .pg-section>h2+.cr-illus-band{margin-top:1.25rem}
/* ---- 5. SMALL SCREENS: tighter frames, smaller staged art ---------- */
@media(max-width:40rem){
.content-region .cr-figure,
  .content-region .cr-illus-band,
  .content-region .cr-figure--stage,
  .content-region .cr-figure--tight{margin:1.5rem 0 .35rem}
.content-region .cr-figure>figcaption{padding:.7rem .9rem .75rem}
.content-region .cr-illus-band{padding:1.1rem 1.1rem .95rem}
.content-region .cr-figure--stage,
  .content-region .cr-figure--tight{padding:1.15rem 1.15rem 1.25rem}
.content-region .cr-figure--stage>svg,
  .content-region .cr-figure--stage>img,
  .content-region .cr-figure--tight>svg,
  .content-region .cr-figure--tight>img{max-width:14rem}
.content-region .cr-figure--stage>figcaption,
  .content-region .cr-figure--tight>figcaption{font-size:.88rem}
}


/* ==================================================================
   THE GOAL BAND - "what passing takes, and how to get there"
   A page's second section: the threshold a test is marked against,
   drawn to scale, and the route to it.

   Names no page and no niche. Any door with a two-gate exam mark
   reskins this for free: every colour comes from the design's own
   custom properties (hex fallbacks only, so a door that has not set
   a var still renders). Nothing is force-overridden. No fixed pixel widths.

   Motif follows the house: the THRESHOLD (crimson rule, crimson
   numerals) and hairlines, not boxes inside boxes.
   Palette in use: --head var(--h1), --muted var(--muted), --accent var(--accent),
   --slate-soft var(--soft), --border var(--border), --border-mid var(--border), white.
   ================================================================== */

.goal-band{
	background:var(--surface,var(--surface));
	border-bottom:1px solid var(--border,var(--border));
	padding:4.25rem 0 3.5rem;
}
.goal-band .goal-head{max-width:48rem;margin:0 0 2.25rem}
/* ---------- THE GOAL: two gates, side by side ---------- */
.goal-gates{display:grid;grid-template-columns:1fr;gap:1rem}
.goal-gate{
	display:flex;
	flex-direction:column;
	margin:0;
	padding:1.5rem 1.5rem 1.4rem;
	background:var(--slate-soft,var(--soft));
	border:1px solid var(--border,var(--border));
	border-radius:var(--radius-lg,1rem);
}
.goal-gate-k{
	margin:0;
	font-size:.7rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted,var(--muted));
}
.goal-gate-n{
	margin:.4rem 0 0;
	font-size:1.25rem;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
/* the pass mark itself: the number is the point of the card */
.goal-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .65rem;margin:1.05rem 0 1.3rem}
.goal-mark-k{
	flex:0 0 100%;
	margin-bottom:.3rem;
	font-size:.7rem;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--accent,var(--accent));
}
.goal-mark-v{
	font-size:clamp(2.75rem,5.5vw,3.75rem);
	font-weight:800;
	line-height:.88;
	letter-spacing:-.045em;
	color:var(--head,var(--h1));
	font-variant-numeric:tabular-nums;
}
/* --gk carries the default treatment and needs no rule; both modifiers exist so a
   door can re-colour either gate without touching the markup. */
.goal-gate--rs .goal-mark-v{color:var(--accent,var(--accent))}
.goal-mark-u{font-size:1rem;font-weight:700;color:var(--muted,var(--muted))}
/* the scorecard. ONE question = ONE cell, always 15 to a row, so the
   two gates read at the same scale and road safety honestly takes two
   rows to the general-knowledge one. Filled = must be right; hollow =
   the margin you have. Never colour alone: the shapes differ, the
   legend counts them, and the track carries its own aria-label. */
.goal-track{
	--goal-gap:4px;
	display:grid;
	grid-template-columns:repeat(15,1fr);
	column-gap:var(--goal-gap);
	row-gap:.9rem;
	margin:0;
}
.goal-cell{
	aspect-ratio:1;
	border-radius:3px;
	background:var(--head,var(--h1));
}
.goal-cell--spare{
	background:var(--surface,var(--surface));
	box-shadow:inset 0 0 0 2px var(--muted,var(--muted));
}
/* the pass mark, drawn where it falls: a crimson rule in the gap
   before the first question you are allowed to get wrong. */
.goal-cell--edge{position:relative}
.goal-cell--edge::before{
	content:"";
	position:absolute;
	top:-.35rem;
	bottom:-.35rem;
	left:calc((var(--goal-gap) / -2) - 1.5px);
	width:3px;
	border-radius:2px;
	background:var(--accent,var(--accent));
}
.goal-legend{
	display:flex;
	flex-wrap:wrap;
	gap:.4rem 1.35rem;
	margin:auto 0 0;          /* pins to the foot of the card, so both cards agree */
	padding-top:1.15rem;
	font-size:.85rem;
	font-weight:700;
	line-height:1.4;
	color:var(--head,var(--h1));
}
.goal-key-item{display:inline-flex;align-items:center;gap:.5rem}
.goal-key{
	flex:none;
	width:.7rem;
	height:.7rem;
	border-radius:2px;
	background:var(--head,var(--h1));
}
.goal-key--spare{
	background:var(--surface,var(--surface));
	box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted));
}
/* ---------- the consequence of two separate marks ---------- */
.goal-both{
	max-width:54rem;
	margin:1.6rem 0 0;
	padding:.1rem 0 .1rem 1.25rem;
	border-left:3px solid var(--accent,var(--accent));
}
.goal-both-h{
	margin:0 0 .4rem;
	font-size:1.2rem;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
.goal-both-p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--ink,var(--ink))}
.goal-both-p b{color:var(--head,var(--h1));font-weight:800}
/* ---------- THE ROUTE ---------- */
.goal-path{margin:3.25rem 0 0}
.goal-path-h{
	margin:0 0 .4rem;
	font-size:clamp(1.35rem,2.4vw,1.75rem);
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.025em;
	color:var(--head,var(--h1));
}
.goal-path-l{margin:0;max-width:44rem;font-size:1.05rem;line-height:1.6;color:var(--muted,var(--muted))}
.goal-steps{
	list-style:none;
	margin:1.5rem 0 0;
	padding:0;
	display:grid;
	grid-template-columns:1fr;
	gap:0;
	border-top:1px solid var(--border-mid,var(--border));
}
.goal-step{
	display:flex;
	gap:1.1rem;
	align-items:flex-start;
	margin:0;
	padding:1.45rem 0;
	border-bottom:1px solid var(--border-mid,var(--border));
}
.goal-step-n{
	flex:none;
	min-width:1.8rem;
	font-size:2rem;
	font-weight:800;
	line-height:.95;
	letter-spacing:-.045em;
	color:var(--accent,var(--accent));
	font-variant-numeric:tabular-nums;
}
.goal-step-b{min-width:0}
.goal-step-t{
	margin:.12rem 0 .4rem;
	font-size:1.08rem;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-.015em;
	color:var(--head,var(--h1));
}
.goal-step-b p{margin:0;font-size:.98rem;line-height:1.62;color:var(--muted,var(--muted))}
/* ---------- the action ---------- */
.goal-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:2.4rem 0 0}
.goal-note{margin:1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted,var(--muted))}
/* gates: side by side once there is room for two */
@media(min-width:48rem){
	.goal-gates{grid-template-columns:1fr 1fr;gap:1.25rem}
}
/* steps: two columns, hairline between them (the house pattern) */
@media(min-width:40rem) and (max-width:71.99rem){
	.goal-steps{grid-template-columns:1fr 1fr}
	.goal-step:nth-child(odd){padding-right:2rem;border-right:1px solid var(--border-mid,var(--border))}
	.goal-step:nth-child(even){padding-left:2rem}
}
/* steps: four across, the number stacked over its line */
@media(min-width:72rem){
	.goal-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
	.goal-step{flex-direction:column;gap:.55rem;padding:1.7rem 1.6rem 1.7rem 0}
	.goal-step+.goal-step{padding-left:1.6rem;border-left:1px solid var(--border-mid,var(--border))}
	.goal-step:last-child{padding-right:0}
	.goal-step-n{font-size:2.4rem}
	.goal-gate{padding:1.75rem 1.75rem 1.5rem}
}
@media(max-width:39.99rem){
	.goal-band{padding:3rem 0 2.75rem}
	.goal-band .goal-head{margin-bottom:1.75rem}
	.goal-gate{padding:1.25rem 1.15rem 1.2rem}
	.goal-track{--goal-gap:3px}
	.goal-cell{border-radius:2px}
	.goal-cell--spare{box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted))}
	.goal-cell--edge::before{top:-.25rem;bottom:-.25rem;width:2px;left:calc((var(--goal-gap) / -2) - 1px)}
	.goal-both{padding-left:1rem}
	.goal-path{margin-top:2.5rem}
	.goal-cta{margin-top:2rem;gap:.6rem}
	.goal-cta .btn{width:100%;justify-content:center}
}
/* the hover lift on the primary is the site's; nothing here animates */
@media(prefers-reduced-motion:reduce){
	.goal-band *{transition:none}
}


/* ---- what used to be inline on the page ---------------------------- */
.cr-cta--center{justify-content:center;margin-top:1.6rem}
@media(min-width:60rem){
.content-hero--split .wrap{max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.content-hero--split .hero-figure{margin:0}
}
@media(min-width:40rem){
.content-hero--rule .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:44rem}
.content-region .cr-split{grid-template-columns:1fr 1fr}
}
@media(min-width:48rem){
.content-region .cr-method{grid-template-columns:repeat(3,1fr)}
.content-region .cr-method li{flex-direction:column}
.content-region .cr-figure--stage,
  .content-region .cr-figure--tight{
    /* a FIXED first track, not minmax(0,20rem): a content-sized track would
       shrink to the art's intrinsic width and the stage would wander again */
    grid-template-columns:20rem minmax(0,1fr);
    gap:2rem;
  }
}

/* classes the Mother renderer emits that the BLITZ template never needed: gate counts other than
   two, a gate sub-line, and the per-gate topic list */
.goal-gates--n1{grid-template-columns:1fr}
.goal-gates--n3{grid-template-columns:repeat(3,1fr)}
.goal-gates--n4{grid-template-columns:repeat(2,1fr)}
.goal-gate-s{margin:.1rem 0 .6rem;color:var(--muted);font-size:.95rem}
.goal-topics{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--border);display:grid;gap:.45rem}
.goal-topics li{display:flex;align-items:center;gap:.55rem;font-size:.95rem;color:var(--ink)}
.goal-topics .cr-card-chip{width:1.5rem;height:1.5rem;flex:0 0 1.5rem}
@media(max-width:40rem){.goal-gates--n3,.goal-gates--n4{grid-template-columns:1fr}}