/* NOTE: superseded section-3 component rules were removed during the v3
   consolidation so every component has exactly ONE definition. The v3 layer
   (sections 8-11) is the single source of truth for hero, eyebrow, rule,
   stat, card and button. */
/* =============================================================================
   CHK IMMIGRATION - DESIGN SYSTEM v2 (foundation layer)
   Created 2026-08-05.

   PURPOSE
   One authoritative set of design tokens, plus a per-route accent system so
   every page can look distinct while staying inside one theme.

   SAFETY CONTRACT
   1. This file is linked FIRST in <head><meta charset="utf-8">, before every existing inline
      <style> block. The existing rules therefore always win the cascade,
      so loading this file cannot alter how any current page renders.
   2. Every visual component rule below is additionally gated behind
      html[data-chk-v2="on"]. Nothing paints until that attribute is set.
   3. Removing the single <link> tag fully reverts this layer.
   ============================================================================= */

/* ---------- 1. FOUNDATION TOKENS ------------------------------------------ */
:root{
  /* neutral ramp - replaces the duplicated --ink / --mut / --line / --faint sets */
  --chk2-n0:#ffffff;
  --chk2-n25:#fbfbfd;
  --chk2-n50:#f6f7f9;
  --chk2-n100:#eef0f4;
  --chk2-n200:#e6e8ec;
  --chk2-n300:#d3d7de;
  --chk2-n400:#a8aeb8;
  --chk2-n500:#8b929c;
  --chk2-n600:#5c6470;
  --chk2-n700:#3d444e;
  --chk2-n800:#242a33;
  --chk2-n900:#12161c;

  /* brand hues */
  --chk2-navy:#08243f;
  --chk2-blue:#0067b8;
  --chk2-teal:#0d9488;
  --chk2-purple:#6d28d9;
  --chk2-amber:#b45309;
  --chk2-green:#15803d;
  --chk2-rose:#9f1239;

  /* semantic */
  --chk2-ok:#0f7a45;
  --chk2-warn:#b4750a;
  --chk2-err:#b3261e;

  /* one type stack - resolves the SF Pro vs Segoe UI split */
  --chk2-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",SegoeUI,system-ui,Arial,sans-serif;
  --chk2-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Arial,sans-serif;

  /* modular type scale */
  --chk2-t-xs:12px; --chk2-t-sm:14px; --chk2-t-base:16px; --chk2-t-lg:18px;
  --chk2-t-xl:22px; --chk2-t-2xl:28px; --chk2-t-3xl:36px;
  --chk2-t-h1:clamp(30px,4.2vw,52px);
  --chk2-t-h2:clamp(23px,2.6vw,33px);

  /* spacing scale (4px base) */
  --chk2-s1:4px; --chk2-s2:8px; --chk2-s3:12px; --chk2-s4:16px;
  --chk2-s5:24px; --chk2-s6:32px; --chk2-s7:48px; --chk2-s8:64px; --chk2-s9:96px;

  /* shape + depth */
  --chk2-r-sm:8px; --chk2-r:14px; --chk2-r-lg:22px; --chk2-r-pill:999px;
  --chk2-shadow-1:0 1px 2px rgba(9,20,35,.05),0 1px 3px rgba(9,20,35,.06);
  --chk2-shadow-2:0 4px 12px rgba(9,20,35,.07),0 2px 4px rgba(9,20,35,.05);
  --chk2-shadow-3:0 18px 44px rgba(9,20,35,.11);

  /* layout */
  --chk2-container:1200px;
  --chk2-gutter:clamp(18px,5vw,28px);
  --chk2-header-h:68px;

  /* motion */
  --chk2-ease:cubic-bezier(.32,.72,0,1);
  --chk2-fast:.16s; --chk2-med:.28s;
}

/* ---------- 2. ROUTE FAMILY ACCENTS --------------------------------------- */
/* header.php stamps data-family on <html>. Each family rebinds one accent
   triplet; components below consume only --chk2-accent*, never a raw hue.   */

html[data-family="corp"]   { --chk2-accent:var(--chk2-navy);   --chk2-accent-ink:#04121f; --chk2-accent-wash:#eef2f6; --chk2-accent-soft:#c9d5e1; }
html[data-family="pr"]     { --chk2-accent:var(--chk2-blue);   --chk2-accent-ink:#00365f; --chk2-accent-wash:#eaf3fb; --chk2-accent-soft:#c4dff5; }
html[data-family="work"]   { --chk2-accent:var(--chk2-teal);   --chk2-accent-ink:#08514a; --chk2-accent-wash:#e6f5f3; --chk2-accent-soft:#b7e3dd; }
html[data-family="study"]  { --chk2-accent:var(--chk2-purple); --chk2-accent-ink:#3f1a80; --chk2-accent-wash:#f1ecfd; --chk2-accent-soft:#d6c6f7; }
html[data-family="visit"]  { --chk2-accent:var(--chk2-amber);  --chk2-accent-ink:#6b3106; --chk2-accent-wash:#fdf3e7; --chk2-accent-soft:#f5d8b0; }
html[data-family="status"] { --chk2-accent:var(--chk2-green);   --chk2-accent-ink:#0b4a24; --chk2-accent-wash:#ecf6ee; --chk2-accent-soft:#bfe0c8; }
html[data-family="remedy"] { --chk2-accent:var(--chk2-rose);   --chk2-accent-ink:#5f0a23; --chk2-accent-wash:#fdeef2; --chk2-accent-soft:#f3c6d3; }
html:not([data-family])    { --chk2-accent:var(--chk2-blue);   --chk2-accent-ink:#00365f; --chk2-accent-wash:#eaf3fb; --chk2-accent-soft:#c4dff5; }

/* ---------- 3. GATED COMPONENTS ------------------------------------------- */
/* Nothing below renders unless html[data-chk-v2="on"] is present.           */

html[data-chk-v2="on"] .v2-wrap{
  max-width:var(--chk2-container); margin-inline:auto;
  padding-inline:var(--chk2-gutter);
}
html[data-chk-v2="on"] .v2-hero > .v2-wrap{position:relative; z-index:1;}
/* signature B - centred, statement led */
/* signature C - timeline led: accent rail down the left edge */
/* signature D - checklist led: soft accent corner wash */
html[data-chk-v2="on"] [data-hero="checklist"]::after{
  content:""; position:absolute; top:-140px; right:-140px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,var(--chk2-accent-soft),transparent 68%);
  opacity:.55; pointer-events:none;
}
html[data-chk-v2="on"] .v2-btn:hover{transform:translateY(-1px); box-shadow:var(--chk2-shadow-2);}
html[data-chk-v2="on"] .v2-btn.ghost{
  background:transparent; color:var(--chk2-accent-ink);
  border-color:var(--chk2-accent-soft);
}

/* ---------- 4. RESPONSIVE + A11Y ------------------------------------------ */
@media (max-width:880px){
  html[data-chk-v2="on"] [data-hero="split"] .v2-wrap{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html[data-chk-v2="on"] *{animation:none !important; transition:none !important;}
}
html[data-chk-v2="on"] :where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--chk2-accent); outline-offset:2px; border-radius:4px;
}

/* ==== CHK THEME v3 : MOTION + VECTOR DECOR + HERO SIGNATURES ==== */
/* Appended layer. Same contract as sections 1-3: every component rule is gated
   behind html[data-chk-v2="on"], and every animation sits inside a
   prefers-reduced-motion: no-preference query. Decor is painted with mask-image
   over background-color:var(--chk2-accent), so each route family recolours its own
   texture with zero extra CSS. */

/* ---------- 4. MOTION + DECOR TOKENS ------------------------------------- */
:root{
  --chk2-ease-out:cubic-bezier(.22,1,.36,1);
  --chk2-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --chk2-slow:.5s; --chk2-slower:.8s;
  --chk2-lift:-3px;
  --chk2-decor-op:.10;
  --chk2-dec-grid:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'32'%20height%3D'32'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M32%200H0v32'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E");
  --chk2-dec-grid-size:32px 32px;
  --chk2-dec-dots:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.4'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
  --chk2-dec-dots-size:24px 24px;
  --chk2-dec-diag:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'12'%20height%3D'12'%20viewBox%3D'0%200%2012%2012'%3E%3Cpath%20d%3D'M-2%202L2%20-2M0%2012L12%200M10%2014L14%2010'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E");
  --chk2-dec-diag-size:12px 12px;
  --chk2-dec-arcs:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%3E%3Ccircle%20cx%3D'0'%20cy%3D'120'%20r%3D'30'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'120'%20r%3D'55'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'120'%20r%3D'80'%2F%3E%3Ccircle%20cx%3D'0'%20cy%3D'120'%20r%3D'105'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --chk2-dec-arcs-size:120px 120px;
  --chk2-dec-maple:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'64'%20height%3D'64'%20viewBox%3D'0%200%2064%2064'%3E%3Cg%20fill%3D'%23000'%3E%3Cg%20transform%3D'translate(5%205)%20scale(0.52)'%3E%3Cpath%20d%3D'M12%201.2L13.1%205.6L15.6%204.6L15%209.2L19.3%207.8L18.4%2010.6L22.7%2012.6L19.4%2014.2L20.2%2017.2L16%2016.2L15.2%2018.2L12.5%2014.4L12.45%2022.8L12%2022.8L11.55%2022.8L11.5%2014.4L8.8%2018.2L8%2016.2L3.8%2017.2L4.6%2014.2L1.3%2012.6L5.6%2010.6L4.7%207.8L9%209.2L8.4%204.6L10.9%205.6Z'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(35%2031)%20scale(0.34)'%3E%3Cpath%20d%3D'M12%201.2L13.1%205.6L15.6%204.6L15%209.2L19.3%207.8L18.4%2010.6L22.7%2012.6L19.4%2014.2L20.2%2017.2L16%2016.2L15.2%2018.2L12.5%2014.4L12.45%2022.8L12%2022.8L11.55%2022.8L11.5%2014.4L8.8%2018.2L8%2016.2L3.8%2017.2L4.6%2014.2L1.3%2012.6L5.6%2010.6L4.7%207.8L9%209.2L8.4%204.6L10.9%205.6Z'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --chk2-dec-maple-size:64px 64px;
  --chk2-dec-topo:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'80'%20height%3D'40'%20viewBox%3D'0%200%2080%2040'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1'%3E%3Cpath%20d%3D'M0%208q20-8%2040%200t40%200'%2F%3E%3Cpath%20d%3D'M0%2020q20-8%2040%200t40%200'%2F%3E%3Cpath%20d%3D'M0%2032q20-8%2040%200t40%200'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --chk2-dec-topo-size:80px 40px;
  --chk2-dec-plus:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Cpath%20d%3D'M14%2010v8M10%2014h8'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.2'%2F%3E%3C%2Fsvg%3E");
  --chk2-dec-plus-size:28px 28px;
  --chk2-dec-check:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%20viewBox%3D'0%200%2040%2040'%3E%3Cpath%20d%3D'M12%2020l4%204%2010-11'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  --chk2-dec-check-size:40px 40px;
}
/* ---------- 5. KEYFRAMES -------------------------------------------------- */
@keyframes chk2-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes chk2-fade{from{opacity:0}to{opacity:1}}
@keyframes chk2-in-l{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
@keyframes chk2-in-r{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes chk2-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes chk2-draw{from{stroke-dashoffset:var(--chk2-dash,120)}to{stroke-dashoffset:0}}
@keyframes chk2-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes chk2-drift{from{background-position:0 0}to{background-position:var(--chk2-drift-to,64px 64px)}}
@keyframes chk2-ring{0%{transform:scale(.8);opacity:.55}70%{opacity:0}100%{transform:scale(2.1);opacity:0}}
@keyframes chk2-shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}
@keyframes chk2-spin{to{transform:rotate(360deg)}}
@keyframes chk2-mesh{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(4%,-5%,0) scale(1.09)}66%{transform:translate3d(-4%,4%,0) scale(.95)}}
@keyframes chk2-leaf{0%{transform:translate3d(0,-14%,0) rotate(-8deg);opacity:0}12%{opacity:.5}100%{transform:translate3d(7%,118%,0) rotate(196deg);opacity:0}}
@keyframes chk2-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes chk2-blink{0%,45%{opacity:1}50%,95%{opacity:.25}100%{opacity:1}}

/* ---------- 6. SCROLL REVEAL ---------------------------------------------- */
/* Fail-safe: the hidden state only applies once chk-motion.js has added
   .chk2-js to <html>. No JS (or a JS error) means content stays visible. */
@media (prefers-reduced-motion: no-preference){
  html.chk2-js[data-chk-v2="on"] [data-reveal]{opacity:0;will-change:opacity,transform}
  html.chk2-js[data-chk-v2="on"] [data-reveal="up"]{transform:translate3d(0,20px,0)}
  html.chk2-js[data-chk-v2="on"] [data-reveal="left"]{transform:translate3d(-26px,0,0)}
  html.chk2-js[data-chk-v2="on"] [data-reveal="right"]{transform:translate3d(26px,0,0)}
  html.chk2-js[data-chk-v2="on"] [data-reveal="pop"]{transform:scale(.93)}
  html.chk2-js[data-chk-v2="on"] [data-reveal].is-in{opacity:1;transform:none;
    transition:opacity var(--chk2-slow) var(--chk2-ease-out),transform var(--chk2-slow) var(--chk2-ease-out);
    transition-delay:var(--chk2-delay,0s)}
}
html[data-chk-v2="on"] .v2-stagger>*{--chk2-delay:calc(var(--chk2-i,0)*70ms)}
/* ---------- 7. VECTOR DECOR LAYER ---------------------------------------- */
/* [data-decor] paints an accent-tinted vector texture behind its content.
   Because it is a mask over background-color:var(--chk2-accent), the texture
   automatically takes the colour of whichever route family is active. */
html[data-chk-v2="on"] [data-decor]{position:relative;isolation:isolate}
html[data-chk-v2="on"] [data-decor]>*{position:relative;z-index:1}
html[data-chk-v2="on"] [data-decor]::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;background-color:var(--chk2-accent);opacity:var(--chk2-decor-op);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:0 0;mask-position:0 0}
html[data-chk-v2="on"] [data-decor="grid"]::before{-webkit-mask-image:var(--chk2-dec-grid);mask-image:var(--chk2-dec-grid);-webkit-mask-size:var(--chk2-dec-grid-size);mask-size:var(--chk2-dec-grid-size)}
html[data-chk-v2="on"] [data-decor="dots"]::before{-webkit-mask-image:var(--chk2-dec-dots);mask-image:var(--chk2-dec-dots);-webkit-mask-size:var(--chk2-dec-dots-size);mask-size:var(--chk2-dec-dots-size)}
html[data-chk-v2="on"] [data-decor="diag"]::before{-webkit-mask-image:var(--chk2-dec-diag);mask-image:var(--chk2-dec-diag);-webkit-mask-size:var(--chk2-dec-diag-size);mask-size:var(--chk2-dec-diag-size)}
html[data-chk-v2="on"] [data-decor="arcs"]::before{-webkit-mask-image:var(--chk2-dec-arcs);mask-image:var(--chk2-dec-arcs);-webkit-mask-size:var(--chk2-dec-arcs-size);mask-size:var(--chk2-dec-arcs-size)}
html[data-chk-v2="on"] [data-decor="maple"]::before{-webkit-mask-image:var(--chk2-dec-maple);mask-image:var(--chk2-dec-maple);-webkit-mask-size:var(--chk2-dec-maple-size);mask-size:var(--chk2-dec-maple-size)}
html[data-chk-v2="on"] [data-decor="topo"]::before{-webkit-mask-image:var(--chk2-dec-topo);mask-image:var(--chk2-dec-topo);-webkit-mask-size:var(--chk2-dec-topo-size);mask-size:var(--chk2-dec-topo-size)}
html[data-chk-v2="on"] [data-decor="plus"]::before{-webkit-mask-image:var(--chk2-dec-plus);mask-image:var(--chk2-dec-plus);-webkit-mask-size:var(--chk2-dec-plus-size);mask-size:var(--chk2-dec-plus-size)}
html[data-chk-v2="on"] [data-decor="check"]::before{-webkit-mask-image:var(--chk2-dec-check);mask-image:var(--chk2-dec-check);-webkit-mask-size:var(--chk2-dec-check-size);mask-size:var(--chk2-dec-check-size)}
/* fade the texture out so it never fights the copy */
html[data-chk-v2="on"] [data-decor-op="soft"]{--chk2-decor-op:.055}
html[data-chk-v2="on"] [data-decor-op="bold"]{--chk2-decor-op:.18}
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] [data-decor-anim="drift"]::before{animation:chk2-drift 34s linear infinite alternate}
}

/* --- gradient mesh: pure-CSS vector glow, no image request --- */
html[data-chk-v2="on"] .v2-mesh{position:relative;isolation:isolate;overflow:hidden}
html[data-chk-v2="on"] .v2-mesh>*{position:relative;z-index:1}
html[data-chk-v2="on"] .v2-mesh::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 44% at 22% 26%,color-mix(in srgb,var(--chk2-accent) 34%,transparent),transparent 70%),
    radial-gradient(32% 40% at 82% 22%,color-mix(in srgb,var(--chk2-accent-ink) 26%,transparent),transparent 70%),
    radial-gradient(44% 48% at 66% 88%,color-mix(in srgb,var(--chk2-accent-soft) 46%,transparent),transparent 72%);
  filter:blur(14px)}
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] .v2-mesh::after{animation:chk2-mesh 26s var(--chk2-ease) infinite}
}

/* --- SVG sprite icon --- */
html[data-chk-v2="on"] .v2-ico{width:1.35em;height:1.35em;display:inline-block;vertical-align:-.28em;
  color:var(--chk2-accent);flex:none;transition:transform var(--chk2-med) var(--chk2-ease-spring)}
html[data-chk-v2="on"] .v2-ico-lg{width:2.4em;height:2.4em}
html[data-chk-v2="on"] .v2-ico-badge{width:2.9em;height:2.9em;padding:.62em;border-radius:var(--chk2-r-sm);
  background:var(--chk2-accent-wash);box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] .v2-ico-float{animation:chk2-float 6s var(--chk2-ease) infinite}
  html[data-chk-v2="on"] .v2-ico-draw path{stroke-dasharray:var(--chk2-dash,120);animation:chk2-draw 1.5s var(--chk2-ease-out) forwards}
  html[data-chk-v2="on"] .v2-ico-spin{animation:chk2-spin 22s linear infinite}
}
/* ---------- 8. HERO SIGNATURES (10 variants) ----------------------------- */
/* One shared skeleton, ten silhouettes. data-hero picks the silhouette;
   data-family picks the colour. 10 x 7 = 70 distinct page personalities. */
html[data-chk-v2="on"] .v2-hero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(38px,6vw,84px) 0;background:var(--chk2-n0)}
html[data-chk-v2="on"] .v2-hero>.v2-wrap{position:relative;z-index:2}
html[data-chk-v2="on"] .v2-hero h1{font-family:var(--chk2-display);font-size:var(--chk2-t-h1);line-height:1.06;
  letter-spacing:-.022em;margin:0 0 var(--chk2-s4);color:var(--chk2-n900);text-wrap:balance}
html[data-chk-v2="on"] .v2-hero h1 em{font-style:normal;color:var(--chk2-accent)}
html[data-chk-v2="on"] .v2-hero p.v2-lede{font-size:var(--chk2-t-lg);line-height:1.62;color:var(--chk2-n600);max-width:62ch;margin:0}

/* 1. split - asymmetric two column, accent hairline spine */
html[data-chk-v2="on"] [data-hero="split"] .v2-wrap{display:grid;gap:clamp(22px,4vw,54px);grid-template-columns:1.15fr .85fr;align-items:start}
html[data-chk-v2="on"] [data-hero="split"]::after{content:"";position:absolute;top:0;bottom:0;left:58%;width:1px;
  background:linear-gradient(180deg,transparent,var(--chk2-accent-soft) 22%,var(--chk2-accent-soft) 78%,transparent);z-index:1}
@media (max-width:820px){html[data-chk-v2="on"] [data-hero="split"] .v2-wrap{grid-template-columns:1fr}html[data-chk-v2="on"] [data-hero="split"]::after{display:none}}

/* 2. checklist - lede plus a ticked proof list */
html[data-chk-v2="on"] [data-hero="checklist"]{background:linear-gradient(180deg,var(--chk2-accent-wash),var(--chk2-n0))}
html[data-chk-v2="on"] [data-hero="checklist"] .v2-hero-list{list-style:none;margin:var(--chk2-s5) 0 0;padding:0;display:grid;gap:var(--chk2-s3)}
html[data-chk-v2="on"] [data-hero="checklist"] .v2-hero-list li{display:flex;gap:var(--chk2-s3);align-items:flex-start;
  font-size:var(--chk2-t-base);color:var(--chk2-n700)}

/* 3. banner - saturated accent band, inverted type */
html[data-chk-v2="on"] [data-hero="banner"]{background:linear-gradient(115deg,var(--chk2-accent-ink),var(--chk2-accent))}
html[data-chk-v2="on"] [data-hero="banner"] h1,html[data-chk-v2="on"] [data-hero="banner"] .v2-eyebrow{color:#fff}
html[data-chk-v2="on"] [data-hero="banner"] h1 em{color:color-mix(in srgb,#fff 74%,var(--chk2-accent-soft))}
html[data-chk-v2="on"] [data-hero="banner"] p.v2-lede{color:rgba(255,255,255,.84)}
html[data-chk-v2="on"] [data-hero="banner"][data-decor]::before{background-color:#fff;--chk2-decor-op:.13}

/* 4. stack - centred, generous air, editorial */
html[data-chk-v2="on"] [data-hero="stack"] .v2-wrap{max-width:830px;text-align:center}
html[data-chk-v2="on"] [data-hero="stack"] p.v2-lede{margin-inline:auto}
html[data-chk-v2="on"] [data-hero="stack"] h1{font-size:clamp(33px,5vw,60px)}

/* 5. spotlight - conic glow behind the headline */
html[data-chk-v2="on"] [data-hero="spotlight"]{background:var(--chk2-n25);text-align:center}
html[data-chk-v2="on"] [data-hero="spotlight"] .v2-wrap{max-width:880px}
html[data-chk-v2="on"] [data-hero="spotlight"]::after{content:"";position:absolute;z-index:1;left:50%;top:-42%;
  width:min(126%,1050px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,transparent 0deg,color-mix(in srgb,var(--chk2-accent) 22%,transparent) 62deg,
    color-mix(in srgb,var(--chk2-accent-soft) 40%,transparent) 128deg,transparent 210deg);filter:blur(38px);opacity:.82}
@media (prefers-reduced-motion: no-preference){html[data-chk-v2="on"] [data-hero="spotlight"]::after{animation:chk2-spin 64s linear infinite}}

/* 6. frame - hairline frame with accent corner ticks */
html[data-chk-v2="on"] [data-hero="frame"] .v2-wrap{border:1px solid var(--chk2-n200);border-radius:var(--chk2-r-lg);
  padding:clamp(24px,4vw,52px);position:relative;background:var(--chk2-n0)}
html[data-chk-v2="on"] [data-hero="frame"] .v2-wrap::before,html[data-chk-v2="on"] [data-hero="frame"] .v2-wrap::after{content:"";position:absolute;
  width:26px;height:26px;border:2.5px solid var(--chk2-accent)}
html[data-chk-v2="on"] [data-hero="frame"] .v2-wrap::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:var(--chk2-r-lg) 0 0 0}
html[data-chk-v2="on"] [data-hero="frame"] .v2-wrap::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 var(--chk2-r-lg) 0}

/* 7. ribbon - diagonal accent band sweeping behind the copy */
html[data-chk-v2="on"] [data-hero="ribbon"]{background:var(--chk2-n25)}
html[data-chk-v2="on"] [data-hero="ribbon"]::after{content:"";position:absolute;z-index:1;inset:-40% -12% auto auto;
  width:70%;height:190%;transform:rotate(19deg);pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--chk2-accent) 15%,transparent),
    color-mix(in srgb,var(--chk2-accent-soft) 34%,transparent))}

/* 8. edge - heavy accent edge bar, documentary feel */
html[data-chk-v2="on"] [data-hero="edge"]{background:var(--chk2-n0);border-left:6px solid var(--chk2-accent)}
html[data-chk-v2="on"] [data-hero="edge"] .v2-wrap{border-bottom:1px solid var(--chk2-n200);padding-bottom:clamp(20px,3vw,38px)}
html[data-chk-v2="on"] [data-hero="edge"] h1{font-size:clamp(29px,3.7vw,45px)}

/* 9. overlay - deep ink panel, high contrast, for serious pages */
html[data-chk-v2="on"] [data-hero="overlay"]{background:var(--chk2-n900)}
html[data-chk-v2="on"] [data-hero="overlay"] h1{color:#fff}
html[data-chk-v2="on"] [data-hero="overlay"] h1 em{color:color-mix(in srgb,var(--chk2-accent) 62%,#fff)}
html[data-chk-v2="on"] [data-hero="overlay"] p.v2-lede{color:rgba(255,255,255,.7)}
html[data-chk-v2="on"] [data-hero="overlay"] .v2-eyebrow{color:color-mix(in srgb,var(--chk2-accent) 55%,#fff)}
html[data-chk-v2="on"] [data-hero="overlay"][data-decor]::before{background-color:var(--chk2-accent);--chk2-decor-op:.3}

/* 10. arc - big vector arc sweep off the bottom edge */
html[data-chk-v2="on"] [data-hero="arc"]{background:var(--chk2-accent-wash);padding-bottom:clamp(58px,8vw,116px)}
html[data-chk-v2="on"] [data-hero="arc"]::after{content:"";position:absolute;z-index:1;left:-8%;right:-8%;bottom:-56%;
  height:104%;border-radius:50% 50% 0 0;background:var(--chk2-n0);
  box-shadow:0 -1px 0 var(--chk2-accent-soft);pointer-events:none}
/* ---------- 9. MICRO-INTERACTIONS ---------------------------------------- */
/* buttons: lift, accent shadow, and a one-pass specular sweep on hover */
html[data-chk-v2="on"] .v2-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:var(--chk2-s2);
  padding:13px 22px;border-radius:var(--chk2-r-pill);font-weight:650;font-size:var(--chk2-t-base);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--chk2-fast) var(--chk2-ease-spring),box-shadow var(--chk2-med) var(--chk2-ease),
    background-color var(--chk2-fast) linear,color var(--chk2-fast) linear}
html[data-chk-v2="on"] .v2-btn-primary{background:var(--chk2-accent);color:#fff;box-shadow:0 2px 10px color-mix(in srgb,var(--chk2-accent) 30%,transparent)}
html[data-chk-v2="on"] .v2-btn-primary:hover{box-shadow:0 10px 26px color-mix(in srgb,var(--chk2-accent) 38%,transparent)}
html[data-chk-v2="on"] .v2-btn-ghost{background:transparent;color:var(--chk2-accent-ink);border-color:var(--chk2-accent-soft)}
html[data-chk-v2="on"] .v2-btn-ghost:hover{background:var(--chk2-accent-wash);border-color:var(--chk2-accent)}
html[data-chk-v2="on"] .v2-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--chk2-accent) 45%,transparent);outline-offset:2px}
html[data-chk-v2="on"] .v2-btn .v2-ico{color:currentColor}
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] .v2-btn:hover{transform:translateY(var(--chk2-lift))}
  html[data-chk-v2="on"] .v2-btn:active{transform:translateY(0) scale(.985);transition-duration:.06s}
  html[data-chk-v2="on"] .v2-btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:38%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
    transform:translateX(-120%) skewX(-18deg);pointer-events:none}
  html[data-chk-v2="on"] .v2-btn-primary:hover::after{animation:chk2-shine .78s var(--chk2-ease-out)}
  html[data-chk-v2="on"] .v2-btn-primary:hover .v2-ico-arrow{transform:translateX(4px)}
}

/* cards: lift, accent top rule wipes in, badge tints */
html[data-chk-v2="on"] .v2-card{position:relative;overflow:hidden;background:var(--chk2-n0);border:1px solid var(--chk2-n200);
  border-radius:var(--chk2-r);padding:var(--chk2-s5);box-shadow:var(--chk2-shadow-1);
  transition:transform var(--chk2-med) var(--chk2-ease-out),box-shadow var(--chk2-med) var(--chk2-ease),
    border-color var(--chk2-med) linear}
html[data-chk-v2="on"] .v2-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--chk2-accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--chk2-med) var(--chk2-ease-out)}
html[data-chk-v2="on"] .v2-card:hover{border-color:var(--chk2-accent-soft);box-shadow:var(--chk2-shadow-3)}
html[data-chk-v2="on"] .v2-card:hover::before{transform:scaleX(1)}
html[data-chk-v2="on"] .v2-card h3{margin:var(--chk2-s3) 0 var(--chk2-s2);font-size:var(--chk2-t-xl);
  letter-spacing:-.014em;color:var(--chk2-n900)}
html[data-chk-v2="on"] .v2-card p{margin:0;color:var(--chk2-n600);font-size:var(--chk2-t-sm);line-height:1.6}
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] .v2-card:hover{transform:translateY(-5px)}
  html[data-chk-v2="on"] .v2-card:hover .v2-ico{transform:scale(1.13) rotate(-6deg)}
}

/* animated underline links */
html[data-chk-v2="on"] .v2-link{position:relative;color:var(--chk2-accent-ink);text-decoration:none;font-weight:600;
  background-image:linear-gradient(var(--chk2-accent),var(--chk2-accent));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--chk2-med) var(--chk2-ease-out)}
html[data-chk-v2="on"] .v2-link:hover{background-size:100% 2px}

/* stat block with a growing accent bar */
html[data-chk-v2="on"] .v2-stats{display:grid;gap:var(--chk2-s5);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:var(--chk2-s6) 0}
html[data-chk-v2="on"] .v2-stat{border-top:2px solid var(--chk2-n200);padding-top:var(--chk2-s3);position:relative}
html[data-chk-v2="on"] .v2-stat::before{content:"";position:absolute;top:-2px;left:0;width:100%;height:2px;
  background:var(--chk2-accent);transform:scaleX(0);transform-origin:left}
html[data-chk-v2="on"] .v2-stat.is-in::before{animation:chk2-bar .85s var(--chk2-ease-out) forwards}
html[data-chk-v2="on"] .v2-stat b{display:block;font-family:var(--chk2-display);font-size:var(--chk2-t-3xl);
  line-height:1;letter-spacing:-.03em;color:var(--chk2-accent);font-variant-numeric:tabular-nums}
html[data-chk-v2="on"] .v2-stat span{display:block;margin-top:var(--chk2-s2);font-size:var(--chk2-t-sm);color:var(--chk2-n600)}

/* eyebrow, rule, pill, live dot */
html[data-chk-v2="on"] .v2-eyebrow{display:inline-flex;align-items:center;gap:var(--chk2-s2);font-size:var(--chk2-t-xs);
  font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--chk2-accent);
  margin:0 0 var(--chk2-s3)}
html[data-chk-v2="on"] .v2-rule{height:3px;width:54px;border-radius:2px;background:var(--chk2-accent);margin:var(--chk2-s4) 0;border:0}
html[data-chk-v2="on"] .v2-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--chk2-r-pill);
  background:var(--chk2-accent-wash);color:var(--chk2-accent-ink);font-size:var(--chk2-t-xs);font-weight:650}
html[data-chk-v2="on"] .v2-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--chk2-accent);flex:none}
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] .v2-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--chk2-accent);animation:chk2-ring 2.4s var(--chk2-ease-out) infinite}
}

/* falling maple accent, decorative only */
@media (prefers-reduced-motion: no-preference){
  html[data-chk-v2="on"] .v2-leaves{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  html[data-chk-v2="on"] .v2-leaves .v2-ico{position:absolute;top:0;opacity:0;color:var(--chk2-accent);
    animation:chk2-leaf var(--chk2-leaf-dur,17s) linear var(--chk2-leaf-delay,0s) infinite}
}
/* ---------- 10. FAMILY PERSONALITY (shape + type, not just colour) -------- */
/* Colour alone is a weak differentiator. Each family also gets its own shape
   language and headline scale by overriding tokens only - no component is
   duplicated, so all ten heroes and every card inherit the personality. */
html[data-chk-v2="on"][data-family="corp"]   {--chk2-r:14px;--chk2-r-lg:22px}
html[data-chk-v2="on"][data-family="pr"]     {--chk2-r:16px;--chk2-r-lg:24px;--chk2-t-h1:clamp(32px,4.8vw,58px)}
html[data-chk-v2="on"][data-family="work"]   {--chk2-r:10px;--chk2-r-lg:14px;--chk2-r-sm:6px;--chk2-t-h1:clamp(29px,3.8vw,46px)}
html[data-chk-v2="on"][data-family="study"]  {--chk2-r:20px;--chk2-r-lg:28px;--chk2-r-sm:12px}
html[data-chk-v2="on"][data-family="visit"]  {--chk2-r:18px;--chk2-r-lg:26px;--chk2-t-h1:clamp(31px,4.4vw,54px)}
html[data-chk-v2="on"][data-family="status"] {--chk2-r:8px;--chk2-r-lg:12px;--chk2-r-sm:5px;--chk2-t-h1:clamp(28px,3.5vw,42px)}
html[data-chk-v2="on"][data-family="remedy"] {--chk2-r:6px;--chk2-r-lg:10px;--chk2-r-sm:4px;--chk2-t-h1:clamp(28px,3.6vw,44px)}

/* ---------- 11. SECTION RHYTHM -------------------------------------------- */
html[data-chk-v2="on"] .v2-section{padding:clamp(34px,5.5vw,76px) 0;position:relative}
html[data-chk-v2="on"] .v2-section+.v2-section{border-top:1px solid var(--chk2-n100)}
html[data-chk-v2="on"] .v2-section-wash{background:var(--chk2-accent-wash);border-top:0}
html[data-chk-v2="on"] .v2-section-ink{background:var(--chk2-n900);color:var(--chk2-n100);border-top:0}
html[data-chk-v2="on"] .v2-section-ink h2{color:#fff}
html[data-chk-v2="on"] .v2-section h2{font-family:var(--chk2-display);font-size:var(--chk2-t-h2);letter-spacing:-.018em;
  margin:0 0 var(--chk2-s4);color:var(--chk2-n900);text-wrap:balance}
html[data-chk-v2="on"] .v2-grid{display:grid;gap:var(--chk2-s5);grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

/* ---------- 12. ACCESSIBILITY + PRINT ------------------------------------- */
/* Hard stop for every animation when the visitor asks for less motion.
   The reveal states above are additionally scoped to no-preference, so
   nothing is left invisible here. */
@media (prefers-reduced-motion: reduce){
  html[data-chk-v2="on"] *,html[data-chk-v2="on"] *::before,html[data-chk-v2="on"] *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  html[data-chk-v2="on"] [data-reveal]{opacity:1 !important;transform:none !important}
}
@media print{
  html[data-chk-v2="on"] [data-decor]::before,html[data-chk-v2="on"] .v2-mesh::after,html[data-chk-v2="on"] .v2-leaves,
  html[data-chk-v2="on"] [data-hero]::after{display:none !important}
  html[data-chk-v2="on"] .v2-hero,html[data-chk-v2="on"] .v2-section-ink{background:#fff !important;color:#000 !important}
  html[data-chk-v2="on"] [data-reveal]{opacity:1 !important;transform:none !important}
}
html[data-chk-v2="on"] .v2-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Fallback for browsers without color-mix(): accent-soft is a real colour,
   so borders and washes degrade to a flat tint rather than disappearing. */
@supports not (color: color-mix(in srgb,red,blue)){
  html[data-chk-v2="on"] .v2-btn-primary{box-shadow:var(--chk2-shadow-2)}
  html[data-chk-v2="on"] .v2-mesh::after{background:var(--chk2-accent-wash)}
  html[data-chk-v2="on"] [data-hero="spotlight"]::after{background:var(--chk2-accent-wash)}
}

/* 11. timeline - numbered process spine, for how-it-works and step pages */
html[data-chk-v2="on"] [data-hero="timeline"]{background:var(--chk2-n25);border-left:4px solid transparent;
  border-image:linear-gradient(180deg,var(--chk2-accent),transparent) 1}
html[data-chk-v2="on"] [data-hero="timeline"] .v2-steps{list-style:none;margin:var(--chk2-s5) 0 0;padding:0;
  display:grid;gap:var(--chk2-s4);counter-reset:chkstep}
html[data-chk-v2="on"] [data-hero="timeline"] .v2-steps li{position:relative;padding-left:44px;counter-increment:chkstep;
  color:var(--chk2-n700);font-size:var(--chk2-t-base);line-height:1.55}
html[data-chk-v2="on"] [data-hero="timeline"] .v2-steps li::before{content:counter(chkstep);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;background:var(--chk2-accent);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
html[data-chk-v2="on"] [data-hero="timeline"] .v2-steps li::after{content:"";position:absolute;left:13.5px;top:30px;
  bottom:calc(var(--chk2-s4) * -1);width:1px;background:var(--chk2-accent-soft)}
html[data-chk-v2="on"] [data-hero="timeline"] .v2-steps li:last-child::after{display:none}

/* ---------- 12b. INVERTED SURFACES -------------------------------------- */
/* On the banner and overlay signatures the surface is dark, so any component
   that normally paints with --chk2-accent-ink would fail contrast. Re-point
   those to white here rather than lightening the token globally. */
html[data-chk-v2="on"] [data-hero="banner"] .v2-btn-ghost,
html[data-chk-v2="on"] [data-hero="overlay"] .v2-btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
html[data-chk-v2="on"] [data-hero="banner"] .v2-btn-ghost:hover,
html[data-chk-v2="on"] [data-hero="overlay"] .v2-btn-ghost:hover{
  background:rgba(255,255,255,.13);border-color:#fff}
html[data-chk-v2="on"] [data-hero="banner"] .v2-link,
html[data-chk-v2="on"] [data-hero="overlay"] .v2-link,
html[data-chk-v2="on"] .v2-section-ink .v2-link{
  color:#fff;background-image:linear-gradient(#fff,#fff)}
html[data-chk-v2="on"] .v2-section-ink .v2-btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
html[data-chk-v2="on"] .v2-section-ink .v2-btn-ghost:hover{background:rgba(255,255,255,.13);border-color:#fff}
html[data-chk-v2="on"] [data-hero="banner"] .v2-pill,
html[data-chk-v2="on"] [data-hero="overlay"] .v2-pill,
html[data-chk-v2="on"] .v2-section-ink .v2-pill{
  background:rgba(255,255,255,.14);color:#fff}
html[data-chk-v2="on"] [data-hero="overlay"] .v2-dot,
html[data-chk-v2="on"] .v2-section-ink .v2-dot{background:color-mix(in srgb,var(--chk2-accent) 55%,#fff)}

/* ---------- 13. SCOPED FAMILIES ------------------------------------------- */
/* One merged rule per family, mirroring sections 2 and 10 onto any container
   via [data-family-scope]. Lets a single document (the theme gallery) render
   all seven families at once. Keep in sync with sections 2 and 10. */
[data-family-scope="corp"]{--chk2-accent:var(--chk2-navy); --chk2-accent-ink:#04121f; --chk2-accent-wash:#eef2f6; --chk2-accent-soft:#c9d5e1; --chk2-r:14px;--chk2-r-lg:22px}
[data-family-scope="pr"]{--chk2-accent:var(--chk2-blue); --chk2-accent-ink:#00365f; --chk2-accent-wash:#eaf3fb; --chk2-accent-soft:#c4dff5; --chk2-r:16px;--chk2-r-lg:24px;--chk2-t-h1:clamp(32px,4.8vw,58px)}
[data-family-scope="work"]{--chk2-accent:var(--chk2-teal); --chk2-accent-ink:#08514a; --chk2-accent-wash:#e6f5f3; --chk2-accent-soft:#b7e3dd; --chk2-r:10px;--chk2-r-lg:14px;--chk2-r-sm:6px;--chk2-t-h1:clamp(29px,3.8vw,46px)}
[data-family-scope="study"]{--chk2-accent:var(--chk2-purple); --chk2-accent-ink:#3f1a80; --chk2-accent-wash:#f1ecfd; --chk2-accent-soft:#d6c6f7; --chk2-r:20px;--chk2-r-lg:28px;--chk2-r-sm:12px}
[data-family-scope="visit"]{--chk2-accent:var(--chk2-amber); --chk2-accent-ink:#6b3106; --chk2-accent-wash:#fdf3e7; --chk2-accent-soft:#f5d8b0; --chk2-r:18px;--chk2-r-lg:26px;--chk2-t-h1:clamp(31px,4.4vw,54px)}
[data-family-scope="status"]{--chk2-accent:var(--chk2-green); --chk2-accent-ink:#0b4a24; --chk2-accent-wash:#ecf6ee; --chk2-accent-soft:#bfe0c8; --chk2-r:8px;--chk2-r-lg:12px;--chk2-r-sm:5px;--chk2-t-h1:clamp(28px,3.5vw,42px)}
[data-family-scope="remedy"]{--chk2-accent:var(--chk2-rose); --chk2-accent-ink:#5f0a23; --chk2-accent-wash:#fdeef2; --chk2-accent-soft:#f3c6d3; --chk2-r:6px;--chk2-r-lg:10px;--chk2-r-sm:4px;--chk2-t-h1:clamp(28px,3.6vw,44px)}
[data-family-scope]{color:var(--chk2-n800)}
/* ==== end CHK THEME v3 ==== */