/* ══════════ TOKENS ══════════
   dark  = ClearOpt OS  · charcoal #0A0A0A, warm white #FEF9F1, gold #D8AE31, jade #21C488
   light = Clarity brand · surfaced water, navy ink, plum #CC47EE, jade #21C488          */
:root{
  --plum:#CC47EE; --plum-d:#A32BC4; --violet:#8B68F6; --blue:#4DAAFA; --cyan:#28C2FF;
  --gold:#D8AE31; --gold-b:#E6BF4D; --bronze:#C6A15D; --jade:#21C488; --jade-d:#0E8F60;
  --e:cubic-bezier(.19,1,.22,1);
}
html[data-theme="dark"]{
  --bg:#0A0A0A; --bg-2:#101010; --bg-3:#141414; --panel:#1A1A1A;
  --ink:#FEF9F1; --ink-2:rgba(254,249,241,.62); --ink-3:rgba(254,249,241,.36);
  --hair:rgba(254,249,241,.13); --hair-2:rgba(254,249,241,.07);
  --accent:var(--gold); --accent-b:var(--gold-b); --accent-ink:#0A0A0A;
  --spark:var(--jade);
  --sea-a:.055,.045,.030; --sea-b:.150,.115,.052; --sea-c:.290,.225,.088;
  --sea-hi:.902,.749,.302; --sea-lo:.129,.769,.533;
}
html[data-theme="light"]{
  --bg:#FBFCFD; --bg-2:#F3F6FA; --bg-3:#EAF0F7; --panel:#FFFFFF;
  --ink:#101A28; --ink-2:rgba(16,26,40,.66); --ink-3:rgba(16,26,40,.40);
  --hair:rgba(16,26,40,.12); --hair-2:rgba(16,26,40,.06);
  --accent:var(--plum-d); --accent-b:var(--plum); --accent-ink:#FFFFFF;
  --spark:var(--jade-d);
  --sea-a:.800,.868,.925; --sea-b:.605,.762,.895; --sea-c:.425,.690,.878;
  --sea-hi:.140,.690,.960; --sea-lo:.720,.235,.855;
}
/* ══════════ PRODUCTION BASE ══════════ */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
section[id],footer[id]{scroll-margin-top:86px}

/* skip link */
.skip{position:absolute;left:14px;top:-60px;z-index:200;background:var(--accent);color:var(--accent-ink);
  padding:11px 20px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  transition:top .25s var(--e)}
.skip:focus{top:14px}

/* no-JS: reveal everything, hide the toggle it would have driven */
.no-js .r,.no-js .clip>span{opacity:1!important;transform:none!important}
.no-js #tgl,.no-js #tog{display:none}
.no-js canvas{display:none!important}

/* motion safety — belt and braces on top of the JS guard */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .r,.clip>span{opacity:1!important;transform:none!important}
}

@media print{
  .top,.rail,.dr,.cue,canvas,.hero__veil,.still__veil,.close__panel::after{display:none!important}
  html[data-theme]{--bg:#fff;--bg-2:#fff;--bg-3:#fff;--panel:#fff;--ink:#000;
    --ink-2:#222;--ink-3:#555;--hair:#bbb;--hair-2:#ddd;--accent:#000;--accent-ink:#fff}
  body{background:#fff!important;color:#000}
  .hero{min-height:auto!important;padding-top:0!important}
  .hero__in{padding-bottom:24px!important}
  .dp,.still,.up,.close{padding-top:28px!important;padding-bottom:28px!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666}
  section{break-inside:avoid}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.72;font-weight:300;letter-spacing:-.003em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .7s var(--e),color .7s var(--e);
}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.018em;
  line-height:1.04;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0 0 1.2em;text-wrap:pretty}p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.w{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
.lab{display:block;font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:26px}
.num{font-family:"Instrument Serif",serif;font-size:13px;letter-spacing:.06em;color:var(--accent);opacity:.9}

/* ── chrome ── */
.top{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;height:78px;
  border-bottom:1px solid transparent;transition:height .6s var(--e),background .6s var(--e),border-color .6s var(--e)}
.top.on{height:62px;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--hair)}
html[data-theme="light"] .top.on{background:color-mix(in srgb,var(--bg) 93%,transparent)}
.top__in{display:flex;align-items:center;width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(22px,4vw,56px);gap:30px}
.mark img{height:29px;width:auto;transition:height .6s var(--e),filter .7s var(--e)}
html[data-theme="light"] .mark img,html[data-theme="light"] .ft__m img{filter:invert(1) hue-rotate(180deg) saturate(1.35) brightness(.72)}
.top.on .mark img{height:24px}
.mnav{display:flex;gap:30px;margin-left:auto;align-items:center}
.mnav a{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);transition:color .4s;white-space:nowrap}
.mnav a:hover{color:var(--ink)}
.tel{display:inline-flex;align-items:center;padding:11px 0 11px 24px;border-left:1px solid var(--hair);
  color:var(--accent)!important}
.tel:hover{color:var(--accent-b)!important}
.tgl{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--hair);
  background:none;cursor:pointer;color:var(--ink-2);transition:border-color .4s,color .4s,transform .4s var(--e)}
.tgl:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.tgl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
html[data-theme="dark"] .tgl .sun{display:none}
html[data-theme="light"] .tgl .moon{display:none}
.tog{display:none;background:none;border:0;padding:12px 0;cursor:pointer}
.tog i{display:block;width:24px;height:1px;background:var(--ink)}
.tog i+i{margin-top:6px}
.rail{position:fixed;left:clamp(10px,1.8vw,24px);top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:19px;align-items:center}
.rail::after{content:"";width:1px;height:60px;background:var(--hair);margin-top:5px}
.rail a{opacity:.4;transition:opacity .4s,transform .4s var(--e)}
.rail a:hover{opacity:1;transform:translateY(-2px)}
.rail svg{width:14px;height:14px;fill:var(--ink)}
@media(max-width:1240px){.rail{display:none}}
.dr{position:fixed;inset:0;z-index:59;background:color-mix(in srgb,var(--bg) 97%,transparent);
  backdrop-filter:blur(26px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,7vw,64px);opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s}
.dr.on{opacity:1;visibility:visible}
.dr a{font-family:"Instrument Serif",serif;font-size:clamp(1.7rem,7vw,2.5rem);color:var(--ink);
  padding:14px 0;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:baseline}
.dr a span{font-family:Inter,sans-serif;font-size:10px;letter-spacing:.2em;color:var(--accent)}

/* ── hero ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  isolation:isolate;padding-top:clamp(96px,13vh,132px)}
#sea{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;background:var(--bg-3)}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 50%,transparent) 0%,
    color-mix(in srgb,var(--bg) 14%,transparent) 22%,color-mix(in srgb,var(--bg) 34%,transparent) 60%,
    color-mix(in srgb,var(--bg) 84%,transparent) 88%,var(--bg) 100%)}
html[data-theme="light"] .hero__veil{
  background:linear-gradient(103deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,
      color-mix(in srgb,var(--bg) 46%,transparent) 34%,transparent 64%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 46%,transparent) 0%,
      color-mix(in srgb,var(--bg) 10%,transparent) 24%,color-mix(in srgb,var(--bg) 30%,transparent) 62%,
      color-mix(in srgb,var(--bg) 86%,transparent) 89%,var(--bg) 100%)}
.hero__in{position:relative;z-index:2;width:100%;padding:0 0 clamp(52px,8vh,96px)}
.hero h1{font-size:clamp(2.5rem,7.4vw,6.4rem);line-height:.96;letter-spacing:-.032em;
  color:var(--ink);max-width:17ch;margin:0 0 34px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__row{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,88px);align-items:flex-end;justify-content:space-between}
.hero__lede{max-width:46ch;font-size:clamp(1rem,1.25vw,1.1rem);color:var(--ink-2)}
.hero__act{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cue{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-top:clamp(34px,5vh,58px)}
.cue i{display:block;width:34px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:sw 2.8s var(--e) infinite}
@keyframes sw{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.b{display:inline-flex;align-items:center;padding:16px 30px;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent-ink);
  background:var(--accent);cursor:pointer;
  transition:background .45s var(--e),color .45s var(--e),transform .45s var(--e)}
.b:hover{background:transparent;color:var(--accent);transform:translateY(-2px)}
.b--g{background:transparent;color:var(--ink);border-color:var(--hair)}
.b--g:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}

/* ── depth bands ── */
.dp{position:relative;padding:clamp(78px,9.2vw,142px) 0;overflow:hidden}
.dp--1{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.dp--2{background:linear-gradient(180deg,var(--bg-2),var(--bg-3))}
.dp--3{background:linear-gradient(180deg,var(--bg-3),var(--panel))}
.light{position:absolute;inset:-24% -10%;z-index:0;pointer-events:none;filter:blur(26px);opacity:.7;
  background:linear-gradient(168deg,color-mix(in srgb,var(--accent) 26%,transparent) 0 1.3%,transparent 2.6%),
             linear-gradient(174deg,color-mix(in srgb,var(--cyan) 18%,transparent) 0 .8%,transparent 2.2%),
             linear-gradient(163deg,color-mix(in srgb,var(--spark) 20%,transparent) 0 1%,transparent 2.4%),
             linear-gradient(178deg,color-mix(in srgb,var(--accent) 12%,transparent) 0 .6%,transparent 1.8%)}
.eh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:clamp(28px,6vw,90px);align-items:start}
.eh h2{font-size:clamp(2.05rem,4.9vw,3.9rem)}
.eh__side{padding-top:clamp(6px,1.4vw,18px)}
@media(max-width:900px){.eh{grid-template-columns:1fr;gap:24px}}
.led{border-top:1px solid var(--hair);margin-top:clamp(38px,5.2vw,64px)}
.led__r{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr);gap:clamp(14px,4vw,54px);
  align-items:baseline;padding:clamp(24px,3.2vw,38px) 0;border-bottom:1px solid var(--hair);
  transition:background .6s var(--e)}
.led__r:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%)}
.led__r h3{font-size:clamp(1.2rem,2.1vw,1.8rem);color:var(--ink)}
.led__r p{font-size:15.5px;color:var(--ink-2);margin:0}
@media(max-width:820px){.led__r{grid-template-columns:44px 1fr;row-gap:10px}.led__r p{grid-column:2}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:clamp(26px,3.4vw,42px) 0;margin-top:clamp(36px,4.6vw,58px)}
.stats span{display:block;font-family:"Instrument Serif",serif;font-size:clamp(1.85rem,3.9vw,3rem);
  line-height:1;color:var(--ink);margin-bottom:12px;letter-spacing:-.02em}
.stats small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr;gap:26px}}
.pull{font-family:"Instrument Serif",serif;font-size:clamp(1.55rem,3.4vw,2.8rem);line-height:1.17;
  color:var(--ink);letter-spacing:-.02em;max-width:26ch}
.pull em{font-style:italic;color:var(--accent)}
.attrib{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.attrib i{display:block;width:34px;height:1px;background:var(--spark)}

/* ── still deep ── */
.still{position:relative;min-height:86svh;display:grid;place-items:center;text-align:center;
  background:var(--bg);overflow:hidden;isolation:isolate}
#deepc{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:var(--bg-3)}
.still__veil{position:absolute;inset:0;z-index:1;
  background:radial-gradient(72% 62% at 50% 46%,transparent 26%,color-mix(in srgb,var(--bg) 86%,transparent) 100%)}
.still__in{position:relative;z-index:2;padding:clamp(58px,10vw,116px) 0}
.still h2{font-size:clamp(2.2rem,6.8vw,5.4rem);line-height:1.02;max-width:20ch;margin:0 auto 32px}
.still h2 em{font-style:italic;color:var(--accent)}
.still p{max-width:52ch;margin:0 auto;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.14rem)}

/* ── surfacing ── */
.up{background:var(--panel);padding:clamp(92px,12vw,170px) 0;position:relative}
.up h2{font-size:clamp(2.05rem,4.8vw,3.8rem)}
.up__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,92px);align-items:start}
@media(max-width:900px){.up__grid{grid-template-columns:1fr;gap:28px}}
.checks{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid var(--hair)}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:16px;align-items:baseline;padding:19px 0;
  border-bottom:1px solid var(--hair);font-size:16.5px;color:var(--ink)}
.checks svg{width:14px;height:14px;stroke:var(--spark);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transform:translateY(2px)}

/* ── close ── */
.close{background:var(--panel);padding:0 0 clamp(86px,11vw,140px)}
.close__panel{position:relative;overflow:hidden;background:var(--bg);
  padding:clamp(52px,8vw,104px) clamp(26px,5vw,76px);isolation:isolate}
#closec{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.92;background:var(--bg-3)}
.close__panel::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(85% 95% at 20% 8%,transparent 18%,color-mix(in srgb,var(--bg) 78%,transparent) 100%)}
.close__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,78px);align-items:end}
@media(max-width:900px){.close__in{grid-template-columns:1fr;gap:36px}}
.close h2{font-size:clamp(2rem,4.8vw,3.6rem);max-width:20ch;color:var(--ink)}
.close p{color:var(--ink-2);max-width:44ch;margin-top:22px}
.bignum{font-family:"Instrument Serif",serif;font-size:clamp(2rem,5.2vw,4rem);line-height:1;
  color:var(--ink);letter-spacing:-.03em;display:block;margin-bottom:18px;transition:color .4s}
.bignum:hover{color:var(--accent)}
.close__side small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}
.live{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--spark);margin-bottom:18px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--spark);animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--spark) 60%,transparent)}
  50%{opacity:.65;box-shadow:0 0 0 7px transparent}}

/* ── footer ── */
.ft{background:var(--bg);border-top:1px solid var(--hair);padding:clamp(64px,9vw,106px) 0 32px;font-size:14.5px}
.ft__g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,5vw,62px);padding-bottom:clamp(42px,6vw,68px)}
@media(max-width:1000px){.ft__g{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ft__g{grid-template-columns:1fr;gap:32px}}
.ft__m img{height:30px;width:auto;margin-bottom:24px}
.ft__t{font-family:"Instrument Serif",serif;font-size:1.4rem;color:var(--ink);letter-spacing:-.02em;
  margin-bottom:16px;max-width:20ch;line-height:1.2}
.ft__m p{font-size:14px;color:var(--ink-3);max-width:34ch}
.ft h4{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin:0 0 20px}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.ft ul a{color:var(--ink-2);transition:color .35s}
.ft ul a:hover{color:var(--accent)}
.ft__b{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--ink-3)}
.ft__b nav{display:flex;flex-wrap:wrap;gap:22px}
.ft__b a:hover{color:var(--ink-2)}

/* ── reveal ── */
.r{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
.r.in{opacity:1;transform:none}
.r1{transition-delay:.1s}.r2{transition-delay:.2s}.r3{transition-delay:.3s}.r4{transition-delay:.4s}
.clip{display:block;overflow:hidden}
.clip>span{display:block;transform:translateY(106%);transition:transform 1.25s var(--e)}
.clip.in>span{transform:none}
@media(max-width:1000px){.mnav a:not(.tel){display:none}.tel{border-left:0;padding-left:0}}
@media(max-width:760px){.mnav a{display:none}.tog{display:block}body{font-size:16px}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .r,.clip>span{opacity:1;transform:none}
}

/* ══════════ sub-page shell ══════════ */
.hero--sub{min-height:clamp(420px,58svh,620px);align-items:flex-end}
.hero--sub h1{font-size:clamp(2.2rem,5.6vw,4.6rem);max-width:20ch;margin-bottom:26px}
.hero--sub .hero__lede{max-width:56ch}
.crumb{display:flex;gap:10px;align-items:center;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.crumb a{color:var(--ink-3)}.crumb a:hover{color:var(--accent)}
.crumb i{width:14px;height:1px;background:var(--hair);display:inline-block}

.sec{padding:clamp(66px,9vw,130px) 0;position:relative;background:var(--bg)}
.sec--alt{background:var(--bg-2)}
.sec--panel{background:var(--bg-3)}

/* ══════════ prose (legal + long copy) ══════════ */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.95rem);color:var(--ink);margin:clamp(38px,5vw,58px) 0 16px;
  letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:Inter,sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;
  color:var(--ink);margin:30px 0 10px}
.prose p{color:var(--ink-2);margin:0 0 16px;line-height:1.75}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--ink-2);line-height:1.7}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:1px;background:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{color:var(--ink);font-weight:500}
.prose__meta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border-top:1px solid var(--hair);padding-top:22px;margin-top:clamp(44px,6vw,72px)}

/* ══════════ FAQ ══════════ */
.qa{border-top:1px solid var(--hair);margin-top:clamp(30px,4vw,52px)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:22px;align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0;font-family:"Instrument Serif",serif;
  font-size:clamp(1.15rem,2vw,1.65rem);color:var(--ink);transition:color .35s var(--e)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary .num{flex:0 0 34px}
.qa summary .qmk{margin-left:auto;flex:0 0 auto;width:13px;height:13px;position:relative;
  align-self:center;transition:transform .45s var(--e)}
.qa summary .qmk::before,.qa summary .qmk::after{content:"";position:absolute;background:var(--accent);
  inset:6px 0 auto 0;height:1px}
.qa summary .qmk::after{transform:rotate(90deg);transition:opacity .35s}
.qa details[open] summary .qmk{transform:rotate(180deg)}
.qa details[open] summary .qmk::after{opacity:0}
.qa__a{padding:0 0 clamp(24px,3vw,34px) 56px;max-width:70ch}
.qa__a p{color:var(--ink-2);margin:0 0 14px;line-height:1.75}
@media(max-width:620px){.qa__a{padding-left:0}.qa summary .num{display:none}}

/* ══════════ forms ══════════ */
.fm{display:grid;gap:clamp(16px,2vw,22px);max-width:640px}
.fm--wide{max-width:none;grid-template-columns:1fr 1fr}
@media(max-width:760px){.fm--wide{grid-template-columns:1fr}}
.fd{display:flex;flex-direction:column;gap:9px}
.fd--full{grid-column:1/-1}
.fd label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.fd label .req{color:var(--accent)}
.fd input,.fd select,.fd textarea{
  font-family:Inter,sans-serif;font-size:15.5px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--hair);padding:11px 2px;width:100%;
  transition:border-color .35s var(--e)}
.fd textarea{resize:vertical;min-height:110px}
.fd select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 13px) calc(1em + 2px),calc(100% - 8px) calc(1em + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
.fd select option{background:var(--panel);color:var(--ink)}
.fd input:focus,.fd select:focus,.fd textarea:focus{outline:none;border-bottom-color:var(--accent)}
.fd input::placeholder,.fd textarea::placeholder{color:var(--ink-3)}
.fd input[type=file]{font-size:13px;color:var(--ink-3);padding:8px 0;cursor:pointer}
.fd input[type=file]::file-selector-button{font-family:Inter,sans-serif;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:transparent;
  border:1px solid var(--hair);padding:9px 16px;margin-right:14px;cursor:pointer;
  transition:border-color .3s var(--e),color .3s var(--e)}
.fd input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}
.fd input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer}
html[data-theme="light"] .fd input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.35)}
.fd .ck,.ck{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;
  font-size:13.5px;line-height:1.65;color:var(--ink-2);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400}
.ck a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ck input{appearance:none;width:16px;height:16px;margin-top:3px;border:1px solid var(--hair);
  background:transparent;cursor:pointer;transition:all .3s var(--e);position:relative}
.ck input:checked{background:var(--accent);border-color:var(--accent)}
.ck input:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid var(--accent-ink);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.ck input:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.fm__note{font-size:12.5px;color:var(--ink-3);line-height:1.7;max-width:62ch}
.fm__msg{grid-column:1/-1;font-size:13.5px;line-height:1.6;padding:15px 18px;
  border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:var(--ink-2)}
.fm__msg[hidden]{display:none}
button.b{font-family:Inter,sans-serif}

/* ══════════ misc blocks ══════════ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:clamp(34px,4vw,54px)}
.card{background:var(--bg);padding:clamp(26px,3vw,40px);transition:background .4s var(--e)}
.card:hover{background:var(--bg-3)}
.card h3{font-size:clamp(1.1rem,1.8vw,1.42rem);color:var(--ink);margin:14px 0 12px}
.card p{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.7}
.card .num{display:block}

.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(16px,2vw,26px);margin:clamp(30px,4vw,46px) 0}
.price__i{border:1px solid var(--hair);padding:clamp(24px,3vw,34px);text-align:center;
  transition:border-color .4s var(--e),transform .4s var(--e)}
.price__i:hover{border-color:var(--accent);transform:translateY(-3px)}
.price__i h3{font-family:"Instrument Serif",serif;font-size:1.5rem;color:var(--ink);margin:0 0 8px}
.price__i b{display:block;font-family:"Instrument Serif",serif;font-size:2.6rem;
  color:var(--accent);font-weight:400;line-height:1}
.price__i small{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}

.contact__g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px,7vw,96px);align-items:start}
@media(max-width:900px){.contact__g{grid-template-columns:1fr;gap:52px}}
.info{display:grid;gap:clamp(24px,3vw,34px)}
.info__i small{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
.info__i a,.info__i p{font-family:"Instrument Serif",serif;font-size:clamp(1.2rem,2vw,1.55rem);
  color:var(--ink);margin:0;letter-spacing:-.01em;line-height:1.3;display:block;
  transition:color .35s var(--e);word-break:break-word}
.info__i a:hover{color:var(--accent)}

.cta__row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,44px)}

/* ══════════ closing band — full bleed, no boxed panel ══════════ */
.band{position:relative;overflow:hidden;background:var(--bg-3);isolation:isolate;
  border-top:1px solid var(--hair);padding:clamp(64px,9vw,120px) 0}
.band canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;background:var(--bg-3)}
.band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--bg-3) 0%,color-mix(in srgb,var(--bg-3) 55%,transparent) 40%,
    color-mix(in srgb,var(--bg-3) 80%,transparent) 80%,var(--bg-3) 100%)}
.band__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(34px,6vw,90px);align-items:end}
@media(max-width:900px){.band__in{grid-template-columns:1fr;gap:38px}}
.band h2{font-size:clamp(1.9rem,4.4vw,3.3rem);color:var(--ink);max-width:16ch;margin:14px 0 0;
  letter-spacing:-.03em;line-height:1.02}
.band p{color:var(--ink-2);max-width:46ch;margin-top:20px}
.band__side{border-left:1px solid var(--hair);padding-left:clamp(22px,3vw,38px)}
@media(max-width:900px){.band__side{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:28px}}
.band__side .bignum{margin-bottom:6px}
.band__meta{display:grid;gap:9px;margin-top:20px;font-size:13px;color:var(--ink-3)}
.band__meta b{color:var(--ink-2);font-weight:400}

/* ══════════ product / pathway cards ══════════ */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:clamp(38px,5vw,60px)}
.path{background:var(--bg);padding:clamp(28px,3.2vw,44px);display:flex;flex-direction:column;
  min-height:260px;transition:background .45s var(--e)}
.path:hover{background:var(--bg-3)}
.path h3{font-size:clamp(1.25rem,2.1vw,1.7rem);color:var(--ink);margin:16px 0 12px;letter-spacing:-.02em}
.path p{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0 0 22px}
.path__go{margin-top:auto;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.path__go i{width:18px;height:1px;background:var(--accent);display:inline-block;
  transition:width .4s var(--e)}
.path:hover .path__go i{width:30px}

/* ══════════ numbered steps ══════════ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,3vw,44px);margin-top:clamp(36px,4.5vw,58px)}
.step{border-top:1px solid var(--accent);padding-top:20px}
.step span{font-family:"Instrument Serif",serif;font-size:12px;letter-spacing:.06em;color:var(--accent)}
.step h4{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(1.1rem,1.7vw,1.35rem);
  color:var(--ink);margin:10px 0 10px;letter-spacing:-.01em}
.step p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.7}

/* ══════════ quote block ══════════ */
.quote{background:var(--bg-2);border-top:1px solid var(--hair);
  padding:clamp(64px,9vw,120px) 0;scroll-margin-top:86px}
.quote__g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,6vw,88px);align-items:start}
@media(max-width:900px){.quote__g{grid-template-columns:1fr;gap:44px}}
.quote__aside p{color:var(--ink-2);margin:18px 0 0;max-width:40ch}
.quote__trust{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px}
.quote__trust li{display:grid;grid-template-columns:18px 1fr;gap:13px;align-items:baseline;
  font-size:14px;color:var(--ink-2);line-height:1.6}
.quote__trust svg{width:12px;height:12px;stroke:var(--spark);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transform:translateY(2px)}

/* ══════════ pull-quote / editorial rule ══════════ */
.rule{display:flex;align-items:center;gap:18px;margin:clamp(40px,5vw,64px) 0;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.rule::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ══════════ callout ══════════ */
.callout{border-left:2px solid var(--accent);padding:4px 0 4px 22px;margin:clamp(28px,3.5vw,44px) 0;
  max-width:56ch}
.callout p{color:var(--ink);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;margin:0}
.callout small{display:block;margin-top:12px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}

/* ═══════════════════════════════════════════════════════════════════════
   V4 — CLARITY INTEGRATED DESIGN SYSTEM
   One palette, one type system, one spacing language.
   The page moves light → dark → gradient → light; the dark stretches are
   chapters inside this document, not a second website.
   ═══════════════════════════════════════════════════════════════════════ */

:root, html[data-theme="light"], html[data-theme="dark"]{
  /* Clarity's own logo gradient is the whole palette. */
  --c-ink:#06182A;          /* deepest navy, used for type + dark grounds */
  --c-ink-2:#0B2338;
  --c-cyan:#1CCDF0;
  --c-blue:#1778F2;
  --c-violet:#7755F7;
  --c-pink:#D946EF;
  --signal:linear-gradient(108deg,var(--c-cyan),var(--c-blue) 40%,var(--c-violet) 72%,var(--c-pink));
  --c-cream:#F7F6F1;
  --c-mint:#EAF3F1;
  --c-paper:#FFFFFF;
  --c-sky:#DCEAFA;
  --c-line:rgba(6,24,42,.14);
  --c-line-2:rgba(6,24,42,.08);
  --c-body:#3F596B;
  --c-mute:#576A77;
  --c-blue-ink:#1364C9;

  /* remap the legacy token names so inherited components pick this up */
  --bg:var(--c-cream); --bg-2:var(--c-paper); --bg-3:var(--c-mint); --panel:#FFFFFF;
  --ink:var(--c-ink); --ink-2:var(--c-body); --ink-3:var(--c-mute);
  --hair:var(--c-line); --hair-2:var(--c-line-2);
  --accent:var(--c-blue-ink); --accent-b:var(--c-violet); --accent-ink:#FFFFFF;
  --spark:var(--c-cyan);
  --plum:var(--c-violet); --plum-d:var(--c-blue);
  --gold:var(--c-blue); --gold-b:var(--c-cyan); --bronze:var(--c-violet);
  --jade:var(--c-cyan); --jade-d:var(--c-blue);
  /* the caustics canvas reads these — retuned from gold to Clarity blue */
  --sea-a:.023,.094,.165; --sea-b:.055,.180,.320; --sea-c:.090,.300,.520;
  --sea-hi:.110,.803,.941; --sea-lo:.467,.333,.969;

  --r-btn:10px; --r-pill:999px; --r-card:16px; --r-media:28px;
  --shell:min(1420px,calc(100% - 56px));
}
html[data-theme]{color-scheme:light}

/* ── base ─────────────────────────────────────────────────────────── */
body{
  background:var(--c-cream);
  color:var(--c-body);
  font-family:"DM Sans","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;letter-spacing:0;
  transition:none;
}
h1,h2,h3,h4{
  font-family:"Manrope","DM Sans",-apple-system,sans-serif;
  font-weight:800;letter-spacing:-.055em;line-height:.92;color:var(--c-ink);
}
h1 em,h2 em,h3 em,.serif{
  font-family:"Newsreader",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.03em;
}
.w{width:var(--shell);max-width:none;margin-inline:auto;padding:0}

/* eyebrow / section index */
.lab,.section-index{
  display:block;
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.04rem;letter-spacing:0;text-transform:none;color:#556A79;margin-bottom:20px;
}
.lab::before,.section-index::before{content:none}

/* buttons — one shape language everywhere */
.b,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:32px;
  min-height:56px;padding:0 24px;border:1px solid transparent;border-radius:var(--r-btn);
  background:var(--c-ink);color:#fff;font-family:"Manrope",sans-serif;
  font-size:.86rem;font-weight:700;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--e),box-shadow .2s var(--e),background .2s var(--e),color .2s var(--e);
}
.b:hover,.button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(6,24,42,.18)}
.b--signal{background:var(--signal-deep);color:#fff}
.b--g{background:transparent;color:var(--c-ink);border-color:rgba(6,24,42,.25)}
.b--g:hover{background:rgba(6,24,42,.05)}
.b--light{background:#fff;color:var(--c-ink)}
.b--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.b--outline:hover{background:rgba(255,255,255,.12)}
.on-dark .b--g{color:#fff;border-color:rgba(255,255,255,.4)}

/* text link with sublabel */
.tlink{display:inline-flex;flex-direction:column;gap:2px;color:var(--c-ink);
  font-family:"Manrope",sans-serif;font-size:.92rem;font-weight:700;letter-spacing:0;
  text-transform:none;text-decoration:none}
.tlink span{color:var(--c-mute);font-size:.72rem;font-weight:600;letter-spacing:.01em;text-transform:none}
.tlink:hover span{color:var(--c-blue)}

/* ── floating navigation shell ─────────────────────────────────────── */
.top{
  position:fixed;inset:14px 0 auto;z-index:60;height:auto;display:block;
  border:0;background:transparent;backdrop-filter:none;transition:top .25s var(--e);
}
.top.on{height:auto;background:transparent;border:0;backdrop-filter:none;top:8px}
.top__in{
  width:var(--shell);max-width:none;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:74px;padding:8px 10px 8px 22px;
  border:1px solid rgba(6,24,42,.1);border-radius:18px;
  background:rgba(250,252,251,.88);
  box-shadow:0 18px 50px rgba(6,24,42,.08);
  backdrop-filter:blur(18px) saturate(130%);
  transition:min-height .25s var(--e),box-shadow .25s var(--e),background .25s var(--e);
}
.top.on .top__in{min-height:64px;background:rgba(250,252,251,.97);box-shadow:0 16px 42px rgba(6,24,42,.14)}
.mark{display:flex;width:172px;flex:0 0 auto}
.mark img{width:100%;height:46px;object-fit:contain;object-position:left center}
.mnav{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);
  font-family:"Manrope",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.03em}
.mnav a{position:relative;color:var(--c-ink);white-space:nowrap;padding:6px 0}
.mnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--signal);transition:right .25s var(--e)}
.mnav a:hover::after,.mnav a[aria-current="page"]::after{right:0}
.mnav .tel{display:none}
.nav-act{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.nav-phone{display:grid;text-align:right;line-height:1.15;color:var(--c-ink);text-decoration:none}
.nav-phone small{color:#576875;font-family:"DM Sans",sans-serif;font-size:.72rem;font-weight:500;letter-spacing:0;text-transform:none}
.nav-phone strong{font-family:"Manrope",sans-serif;font-size:.87rem;font-weight:800;letter-spacing:-.01em}
.nav-cta{
  display:inline-flex;align-items:center;gap:16px;min-height:50px;padding:0 20px;
  border-radius:12px;background:var(--c-ink);color:#fff;
  font-family:"Manrope",sans-serif;font-size:.78rem;font-weight:800;text-decoration:none;
  transition:transform .2s var(--e),box-shadow .2s var(--e)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(6,24,42,.22)}
.tgl{display:none!important}
.tog{display:none;width:46px;height:46px;border:1px solid rgba(6,24,42,.18);border-radius:12px;
  background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.tog i{display:block;width:19px;height:2px;background:var(--c-ink);border-radius:2px;transition:transform .3s var(--e),opacity .3s var(--e)}
.tog[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.tog[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* social rail sits out of the way of the light hero */
.rail{color:var(--c-mute)}
.rail a{color:var(--c-mute)}
.rail a:hover{color:var(--c-blue)}

/* mobile drawer, restyled to the light system */
.dr{background:rgba(247,246,241,.98);backdrop-filter:blur(20px)}
.dr a{color:var(--c-ink);border-color:var(--c-line)}
.dr a span{color:var(--c-blue)}

/* ── HERO ─────────────────────────────────────────────────────────── */
.h4{
  position:relative;overflow:clip;padding:128px 0 0;
  background:linear-gradient(110deg,#F6F8F5 0%,#EAF3F1 58%,#DCECF0 100%);
}
.h4__prism{position:absolute;width:840px;height:840px;left:-500px;top:-310px;border-radius:50%;
  background:conic-gradient(from 110deg,rgba(28,205,240,.17),rgba(119,85,247,.12),rgba(217,70,239,.07),transparent 72%);
  filter:blur(72px);opacity:.55;pointer-events:none}
.h4::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0 36%,rgba(255,255,255,.32) 36.1% 36.2%,transparent 36.3% 100%)}
.h4__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.03fr .97fr;
  gap:clamp(40px,5vw,88px);align-items:center;min-height:680px}
.h4__copy{padding:34px 0 30px}
.h4__copy .lab{color:#24577D;margin-bottom:28px}
.h4__copy h1{max-width:900px;margin:0 0 28px;font-size:clamp(3.2rem,6vw,5.75rem);
  font-weight:800;letter-spacing:-.075em;line-height:.82;color:var(--c-ink)}
.h4__copy h1 em{display:block;margin:-.06em 0 -.22em;padding:.16em 0 .22em;
  color:transparent;background:var(--signal);
  -webkit-background-clip:text;background-clip:text;letter-spacing:-.05em;font-size:1.02em}
.h4__lede{max-width:660px;margin:0;color:var(--c-body);font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.62}
.h4__act{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}
.h4__act .b{min-height:60px;padding-inline:26px;gap:44px}
.h4__trust{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:34px;
  color:#516B7A;font-family:"DM Sans",sans-serif;font-size:.86rem;font-weight:500}
.h4__trust span{display:flex;align-items:center;gap:26px}
.h4__trust span+span::before{content:"";width:1px;height:13px;background:var(--c-line)}

.h4__vis{--spot-x:70%;--spot-y:30%;position:relative;height:clamp(560px,64vh,700px);
  overflow:hidden;border-radius:30px;background:#BFC9C8;box-shadow:0 30px 90px rgba(6,24,42,.2)}
.h4__vis::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:radial-gradient(430px circle at var(--spot-x) var(--spot-y),transparent 0,rgba(6,24,42,.02) 48%,rgba(6,24,42,.35) 100%)}
.h4__vis::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,18,31,.78),transparent 48%)}
.h4__vis>img{width:100%;height:100%;object-fit:cover;object-position:58% center;
  transform:scale(1.015);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.h4__vis:hover>img{transform:scale(1.045)}
.vis__cap{position:absolute;z-index:4;left:40px;right:40px;bottom:38px;color:#fff}
.vis__cap strong{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(1.6rem,2.6vw,2.9rem);line-height:1.02;letter-spacing:-.02em}

/* proof rail */
.rail4{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:40px;border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
.rail4>*{display:grid;min-height:132px;padding:22px 24px;
  border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  color:var(--c-ink);text-decoration:none;transition:background .25s var(--e),color .25s var(--e)}
.rail4 span{color:#586975;font-family:"Manrope",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.rail4 strong{align-self:end;font-family:"Manrope",sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.rail4 small{color:#5A6E7A;font-size:.72rem;line-height:1.45}
.rail4 a:hover{background:var(--c-ink);color:#fff}
.rail4 a:hover span,.rail4 a:hover small{color:#A9EAFA}

/* ── belief ───────────────────────────────────────────────────────── */
.belief{padding:clamp(96px,12vw,190px) 0;background:#fff}
.belief__g{display:grid;grid-template-columns:.32fr 1fr;gap:64px}
.belief h2{max-width:1120px;margin:0;font-size:clamp(2.7rem,6vw,7rem);letter-spacing:-.07em;line-height:.9}
.belief h2 em{display:block;color:#5D56E8;font-size:1.02em}
.belief__g>div>p{max-width:740px;margin:40px 0 0;color:#506B7A;font-size:1.12rem}

/* ── dark coverage chapters ───────────────────────────────────────── */
.cov{padding:clamp(88px,10vw,168px) 0;overflow:clip;background:var(--c-ink);color:#fff}
.cov__g{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(56px,8vw,150px);align-items:start}
.cov__intro{position:sticky;top:118px}
.cov__intro .section-index{color:#81DFF4}
.cov__intro h2{margin:0 0 28px;color:#fff;font-size:clamp(2.4rem,4.3vw,5.2rem);letter-spacing:-.065em;line-height:.9}
.cov__intro h2 em{color:#87E6F7}
.cov__intro p{max-width:540px;color:rgba(255,255,255,.64)}
.cov__intro .tlink{margin-top:28px;color:#fff}
.cov__intro .tlink span{color:#87E6F7}
.cov__list{border-top:1px solid rgba(255,255,255,.18)}
.chap{position:relative;display:grid;grid-template-columns:54px 1fr;gap:24px;
  min-height:340px;padding:52px 0;border-bottom:1px solid rgba(255,255,255,.18);
  transition:padding .3s var(--e)}
.chap:hover{padding-left:18px}
.chap__n{color:#87E6F7;font-family:"Manrope",sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.04em}
.chap__k{margin:0 0 12px;color:rgba(255,255,255,.6);font-family:"Newsreader",Georgia,serif;
  font-style:italic;font-size:1.02rem;font-weight:400;letter-spacing:0;text-transform:none}
.chap h3{margin:0 0 16px;color:#fff;font-size:clamp(2rem,3.4vw,3.5rem);letter-spacing:-.055em;line-height:.94}
.chap p{max-width:520px;color:rgba(255,255,255,.66)}
.chap__go{display:inline-flex;align-items:center;gap:12px;margin-top:22px;color:#fff;
  font-family:"Manrope",sans-serif;font-size:.92rem;font-weight:700;letter-spacing:0;text-transform:none}
.chap__go span{color:#87E6F7;transition:transform .25s var(--e)}
.chap__go:hover span{transform:translate(4px,-4px)}

/* ── process band ─────────────────────────────────────────────────── */
.proc{position:relative;padding:clamp(96px,10vw,180px) 0;overflow:clip;color:#fff;
  background:linear-gradient(145deg,#111E52 0%,#3D49D8 55%,#7258E8 100%)}
.proc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(255,255,255,.055) 120px 121px)}
.proc__head{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:end;margin-bottom:56px}
.proc__head .section-index{color:#A6F0FF}
.proc__head h2{margin:0;color:#fff;font-size:clamp(2.6rem,5vw,5.6rem);letter-spacing:-.07em;line-height:.88}
.proc__head h2 em{display:block;color:#9FF3E4;font-size:1.02em}
.proc__head>div:last-child p{margin:0;max-width:560px;color:rgba(255,255,255,.78);font-size:1.06rem}
.proc__player{position:relative;z-index:1;display:grid;grid-template-columns:.36fr .64fr;
  border-radius:22px;overflow:hidden;background:rgba(9,20,64,.42);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(5,12,40,.35)}
.proc__tabs{display:grid;align-content:start;padding:14px}
.ptab{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:2px 16px;
  padding:24px 20px;border:0;border-bottom:1px solid rgba(255,255,255,.15);border-radius:14px;
  background:transparent;color:#fff;text-align:left;cursor:pointer;
  font-family:"Manrope",sans-serif;transition:background .25s var(--e),color .25s var(--e)}
.ptab:last-child{border-bottom-color:transparent}
.ptab span{grid-row:1/3;align-self:start;color:#A6F0FF;font-size:.76rem;font-weight:700;letter-spacing:.04em}
.ptab strong{font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.ptab small{color:rgba(255,255,255,.55);font-size:.78rem}
.ptab:hover{background:rgba(255,255,255,.08)}
.ptab.is-on{background:#fff;color:var(--c-ink);border-bottom-color:transparent}
.ptab.is-on span{color:var(--c-blue)}
.ptab.is-on small{color:#576A77}
.ptab:focus-visible{outline:2px solid #A6F0FF;outline-offset:-3px}
.proc__stage{display:grid;grid-template-columns:1fr .82fr;gap:36px;align-items:center;
  padding:38px;background:#EFF3F2;color:var(--c-ink)}
.proc__copy{transition:opacity .18s var(--e),transform .18s var(--e)}
.proc__stage.is-changing .proc__copy{opacity:0;transform:translateY(6px)}
.proc__copy>span{display:block;margin-bottom:20px;color:var(--c-blue);
  font-family:"Manrope",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.proc__copy .pk{margin:0 0 10px;color:var(--c-mute);font-family:"Newsreader",Georgia,serif;
  font-style:italic;font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none}
.proc__copy h3{margin:0 0 16px;font-size:clamp(1.8rem,2.8vw,2.9rem);letter-spacing:-.055em;line-height:.94}
.proc__copy .pc{margin:0 0 26px;max-width:430px;color:var(--c-body);font-size:.98rem}
.proc__img{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(6,24,42,.24)}
.proc__img img{width:100%;height:100%;max-height:430px;object-fit:cover;display:block}
.proc__badge{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(to top,rgba(5,18,31,.72),transparent);color:rgba(255,255,255,.9);
  font-family:"DM Sans",sans-serif;font-size:.8rem;font-weight:500;letter-spacing:0;text-transform:none}

/* ── protection orbit ─────────────────────────────────────────────── */
.fam{padding:clamp(96px,11vw,190px) 0;background:#F8F7F2}
.fam__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,88px);align-items:center}
.fam h2{margin:0 0 26px;font-size:clamp(2.6rem,5vw,5.4rem);letter-spacing:-.07em;line-height:.9}
.fam h2 em{display:block;color:#5D56E8;font-size:1.02em}
.fam__lede{font-size:1.1rem;color:#43596A}
.fam .b{margin-top:12px}
.orbit{position:relative;min-height:600px;display:grid;place-items:center}
.orbit::before,.orbit::after{content:"";position:absolute;inset:9%;border-radius:50%;
  border:1px solid rgba(23,120,242,.13)}
.orbit::after{inset:18%;border-color:rgba(23,120,242,.1)}
.orbit__core{position:relative;z-index:2;width:52%;aspect-ratio:1;display:grid;
  place-items:center;align-content:center;gap:4px;padding:0 12%;
  text-align:center;border-radius:50%;background:var(--c-ink);color:#fff;
  box-shadow:0 26px 70px rgba(6,24,42,.26)}
.orbit__core span{display:block;color:#87E6F7;font-family:"DM Sans",sans-serif;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;text-transform:none;margin-bottom:10px}
.orbit__core strong{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.05;letter-spacing:-.02em}
.orbit__i{position:absolute;z-index:3;width:min(46%,215px);padding:15px 17px;background:#fff;
  border:1px solid var(--c-line);border-radius:12px;
  box-shadow:0 14px 30px rgba(6,24,42,.07);font-size:.84rem;line-height:1.4;color:var(--c-ink)}
.orbit__i b{display:block;margin-bottom:5px;color:var(--c-blue);font-family:"Manrope",sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.02em}
.orbit__i.o1{top:2%;left:0}
.orbit__i.o2{top:30%;right:-2%}
.orbit__i.o2 b{color:var(--c-violet)}
.orbit__i.o3{bottom:16%;left:2%}
.orbit__i.o3 b{color:var(--c-pink)}
.orbit__i.o4{bottom:1%;right:4%}
.orbit__i.o4 b{color:#0E9BC0}

/* ── relationship ─────────────────────────────────────────────────── */
.rel{padding:clamp(88px,10vw,168px) 0;background:var(--c-sky)}
.rel h2{margin:0 0 56px;font-size:clamp(2.5rem,5.2vw,5.6rem);letter-spacing:-.07em;line-height:.9}
.rel h2 em{display:block;color:#5D56E8;font-size:1.02em}
.rel__g{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(6,24,42,.16);
  border-left:1px solid rgba(6,24,42,.16)}
.rel__g article{padding:36px 32px 42px;border-right:1px solid rgba(6,24,42,.16);
  border-bottom:1px solid rgba(6,24,42,.16)}
.rel__g span{display:block;margin-bottom:44px;color:var(--c-blue);
  font-family:"Manrope",sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.14em}
.rel__g h3{margin:0 0 12px;font-size:1.3rem;letter-spacing:-.03em}
.rel__g p{margin:0;color:#4E6879;font-size:.95rem}

/* ── final CTA ────────────────────────────────────────────────────── */
.close4{position:relative;padding:clamp(96px,10vw,180px) 0;overflow:clip;background:var(--signal);color:#fff}
.close4__prism{position:absolute;width:740px;height:740px;right:-250px;top:-280px;
  border:1px solid rgba(255,255,255,.22);transform:rotate(42deg);pointer-events:none}
.close4__g{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(40px,6vw,90px);align-items:end}
.close4 .section-index{color:#fff}
.close4 .section-index::before{background:rgba(255,255,255,.8)}
.close4 h2{margin:0;max-width:900px;color:#fff;font-size:clamp(2.9rem,6.4vw,7.4rem);
  letter-spacing:-.075em;line-height:.86}
.close4__g>div:last-child p{max-width:560px;margin:0 0 26px;color:rgba(255,255,255,.92);font-size:1.05rem}
.close4 .cta__row{display:flex;flex-wrap:wrap;gap:12px}
.close4 small{display:block;margin-top:18px;color:rgba(255,255,255,.78);font-size:.82rem}

/* ── footer ───────────────────────────────────────────────────────── */
.ft{background:var(--c-ink);color:rgba(255,255,255,.7);border:0;padding:0}
.ft__signal{display:grid;grid-template-columns:repeat(4,1fr);height:4px}
.ft__signal i:nth-child(1){background:var(--c-cyan)}
.ft__signal i:nth-child(2){background:var(--c-blue)}
.ft__signal i:nth-child(3){background:var(--c-violet)}
.ft__signal i:nth-child(4){background:var(--c-pink)}
.ft__lead{display:grid;grid-template-columns:.3fr 1fr auto;gap:40px;align-items:center;
  padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.ft__lead>p{margin:0;color:rgba(255,255,255,.6);font-family:"Newsreader",Georgia,serif;
  font-style:italic;font-size:1.02rem;font-weight:400;letter-spacing:0;text-transform:none}
.ft__lead h2{margin:0;color:#fff;font-size:clamp(2rem,3.6vw,3.4rem);letter-spacing:-.055em;line-height:.96}
.ft__lead h2 em{display:block;color:#87E6F7;font-size:1.02em}
.ft .w{width:var(--shell);max-width:none;padding:0}
.ft__g{border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(40px,5vw,64px)}
.ft__m img{width:150px;height:auto}
.ft__t{color:#87E6F7}
.ft h4{color:#fff;font-family:"Manrope",sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;text-transform:none}
.ft a{color:rgba(255,255,255,.72)}
.ft a:hover{color:#fff}
.ft__b{border-top:1px solid rgba(255,255,255,.14)}
.fm__note{color:var(--c-mute);font-size:.76rem;line-height:1.6}
.ft .fm__note{color:rgba(255,255,255,.62)}

/* ── reveals ──────────────────────────────────────────────────────── */
.r{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e),transform .7s var(--e)}
.r.in{opacity:1;transform:none}
.no-js .r{opacity:1;transform:none}

/* ── inherited components, re-skinned ─────────────────────────────── */
.sec{background:var(--c-cream)}
.sec--alt{background:#fff}
.sec--panel{background:var(--c-mint)}
.hero--sub{background:linear-gradient(110deg,#F6F8F5 0%,#EAF3F1 58%,#DCECF0 100%);color:var(--c-ink)}
.hero--sub .hero__veil{display:none}
.hero--sub canvas{display:none}
.card,.fd,.qa,.quote,.price__i,.info__i{border-radius:var(--r-card)}
.b--g{border-radius:var(--r-btn)}

/* ── responsive ───────────────────────────────────────────────────── */
@media(max-width:1240px){
  :root{--shell:min(100% - 40px,1100px)}
  .h4__grid{grid-template-columns:1fr .9fr}
  .cov__g{grid-template-columns:.8fr 1.2fr}
  .proc__player{grid-template-columns:.4fr .6fr}
}
@media(max-width:1080px){
  .mnav{display:none}
  .tog{display:flex}
  .nav-phone{display:none}
  .proc__head{grid-template-columns:1fr;gap:26px;align-items:start}
  .proc__player{grid-template-columns:1fr}
  .proc__tabs{grid-template-columns:repeat(4,1fr);gap:6px;overflow-x:auto}
  .ptab{border-bottom:0;padding:18px 14px}
  .proc__stage{grid-template-columns:1fr;padding:26px}
  .proc__img{order:-1}
  .proc__img img{max-height:300px}
}
@media(max-width:900px){
  :root{--shell:min(100% - 32px,760px)}
  .h4{padding-top:112px}
  .h4__grid{grid-template-columns:1fr;gap:26px;min-height:0}
  .h4__copy{padding:24px 0 8px}
  .h4__copy h1{font-size:clamp(2.9rem,10vw,4.4rem)}
  .h4__vis{height:clamp(380px,58vh,520px)}
  .vis__cap{left:24px;right:24px;bottom:26px}
  .rail4{grid-template-columns:1fr 1fr;margin-top:34px}
  .belief__g,.cov__g,.fam__g,.close4__g{grid-template-columns:1fr;gap:32px}
  .cov__intro{position:static}
  .chap{grid-template-columns:40px 1fr;min-height:0;padding:34px 0}
  .chap__mark{display:none}
  .rel__g{grid-template-columns:1fr}
  .rel__g span{margin-bottom:16px}
  .orbit{min-height:0;padding:22px 0}
  .orbit::before,.orbit::after{display:none}
  .orbit__core{width:100%;aspect-ratio:auto;padding:30px 22px;border-radius:var(--r-card);margin-bottom:14px}
  .orbit__i{position:static;width:100%;margin-bottom:10px;border-radius:12px}
  .ft__lead{grid-template-columns:1fr;gap:22px}
}
@media(max-width:640px){
  :root{--shell:min(100% - 24px,540px)}
  .top{inset:10px 0 auto}
  .top__in{min-height:64px;padding:8px 10px 8px 16px;border-radius:16px}
  .mark{width:132px}
  .mark img{height:38px}
  .nav-cta{min-height:44px;padding:0 14px;gap:8px;font-size:.72rem}
  .h4__act{gap:16px}
  .h4__act .b{width:100%;min-height:56px;gap:16px;justify-content:space-between}
  .rail4{grid-template-columns:1fr}
  .rail4>*{min-height:0;padding:18px 20px;gap:6px}
  .rail4 strong{align-self:auto}
  .proc__tabs{grid-template-columns:1fr 1fr}
  .close4 .cta__row .b{width:100%}
}

/* motion + no-JS safety */
@media(prefers-reduced-motion:reduce){
  .r{opacity:1!important;transform:none!important}
  .h4__vis>img{transition:none}
}
.no-js .ptab.is-on{background:#fff;color:var(--c-ink)}

/* ── v4 corrections ───────────────────────────────────────────────── */
/* the v3 sheet uppercased nav and buttons; the blended system is sentence case */
.mnav a,.b,.button,.nav-cta,.b--g,.b--light,.b--signal,.b--outline{text-transform:none}
.mnav a{font-size:.79rem;letter-spacing:.01em}

/* let the gradient run across the actual glyphs, and keep the italic line
   the same optical size as the roman line above it */
.h4__copy h1 em{font-size:1em;width:fit-content;max-width:100%}
.belief h2 em,.fam h2 em,.rel h2 em,.proc__head h2 em,.ft__lead h2 em{font-size:1em}

/* the floating social rail collided with the light hero — the links now live
   in the footer, and the rail only appears where there is room for it */
.rail{display:none}
@media(min-width:1660px){.rail{display:grid}}
.ft__social{display:flex;gap:14px;margin-top:20px}
.ft__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);transition:background .2s var(--e),color .2s var(--e)}
.ft__social a:hover{background:rgba(255,255,255,.1);color:#fff}
.ft__social svg{width:16px;height:16px;fill:currentColor}

/* footer: five columns, and the light button must stay readable */
.ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr 1fr;gap:36px}
.ft__g>div>ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft__g h4{margin:0 0 18px}
.ft .b--light{color:var(--c-ink)}
.ft .b--light:hover{color:var(--c-ink)}
.ft a{color:rgba(255,255,255,.78)}
.ft__m img{width:150px;height:auto;margin-bottom:18px}
.ft__t{display:none}
.ft__b{margin-top:8px;padding-top:22px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:.8rem}
.ft__b nav{display:flex;flex-wrap:wrap;gap:18px}
@media(max-width:1080px){.ft__g{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.ft__g{grid-template-columns:1fr}.ft__m img{width:130px}}

/* sub-page hero, in the same grammar as the homepage */
.h4--sub{padding:150px 0 clamp(56px,7vw,96px)}
.h4__sub{max-width:900px}
.h4__sub h1{margin:0 0 22px;font-size:clamp(2.6rem,5.4vw,5.4rem);font-weight:800;
  letter-spacing:-.065em;line-height:.9;color:var(--c-ink)}
.h4__sub h1 em{color:transparent;background:var(--signal);-webkit-background-clip:text;background-clip:text}
.crumb{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--c-mute);
  font-family:"DM Sans",sans-serif;font-size:.84rem;font-weight:500;letter-spacing:0;text-transform:none}
.crumb a{color:var(--c-blue)}
.crumb i{width:18px;height:1px;background:var(--c-line);display:block}
@media(max-width:640px){.h4--sub{padding-top:124px}}

/* the v3 sheet coloured footer links with the light-mode body token, which is
   unreadable on the dark ground — restore contrast */
.ft ul a{color:rgba(255,255,255,.78)}
.ft ul a:hover{color:#fff}
.ft__b a{color:rgba(255,255,255,.7)}
.ft__b a:hover{color:#fff}
.ft__b span{color:rgba(255,255,255,.55)}
.ft__g>div>ul li{color:rgba(255,255,255,.78)}
.ft__m p{color:rgba(255,255,255,.6)}

/* mobile navigation: the pill must never push the menu button off-screen */
@media(max-width:820px){
  .top__in{gap:12px;padding-right:8px}
  .nav-act{gap:10px}
  .nav-cta{gap:10px;padding:0 14px;font-size:.74rem}
}
@media(max-width:560px){
  .top__in{padding-left:14px}
  .mark{width:118px}
  .mark img{height:34px}
  .nav-cta{width:48px;min-height:48px;padding:0;gap:0;justify-content:center;font-size:1rem}
  .nav-cta__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tog{width:48px;height:48px}
}

/* ═══ legacy components brought onto the v4 system ═══════════════════ */
/* type: nothing renders in the retired display serif any more */
.step h4,.price__i h3,.card h3,.card h4,.info__i h3,.qa h3,.fd h3,.quote h3,.led h3{
  font-family:"Manrope","DM Sans",sans-serif;font-weight:800;letter-spacing:-.03em}
.num,.step span,.price__i span,.stats span{font-family:"Manrope",sans-serif;font-weight:800}
.prose h2,.prose h3{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.04em}

/* the preserved dark chapter — "the noise settles" — now refracts in Clarity's
   own gradient instead of ClearOpt gold */
.still{position:relative;background:var(--c-ink);color:rgba(255,255,255,.72);overflow:clip}
.still canvas{opacity:.5}
.still__veil{position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 40%,transparent,rgba(6,24,42,.82) 78%)}
.still h2{color:#fff}
.still h2 em{color:#87E6F7;font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400}
.still p{color:rgba(255,255,255,.72)}

/* editorial headers and path cards */
.eh h2{font-size:clamp(2.2rem,4.4vw,4.4rem);letter-spacing:-.06em;line-height:.92}
.eh h2 em,.pull em{color:#5D56E8}
.path{border-radius:var(--r-card);border:1px solid var(--c-line);background:#fff;
  transition:transform .3s var(--e),box-shadow .3s var(--e),border-color .3s var(--e)}
.path:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(6,24,42,.1);border-color:rgba(23,120,242,.4)}
.path h3{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.04em}
.path__go{color:var(--c-blue);font-family:"Manrope",sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:0;text-transform:none}

/* stats + steps */
.stats span{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.05em;color:var(--c-ink)}
.stats small{color:var(--c-mute)}
.step span{color:var(--c-blue);font-size:.78rem;font-weight:700;letter-spacing:.03em}
.step h4{font-size:1.05rem}

/* forms — structure untouched, surface restyled */
.fm{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:0 24px 60px rgba(6,24,42,.07)}
.fm input,.fm select,.fm textarea{border-radius:8px;border-color:var(--c-line);
  background:#FBFCFB;color:var(--c-ink);font-family:"DM Sans",sans-serif}
.fm input:focus,.fm select:focus,.fm textarea:focus{border-color:var(--c-blue);
  outline:2px solid rgba(23,120,242,.18);outline-offset:0}
.fm label,.fd label{color:var(--c-ink);font-family:"Manrope",sans-serif;font-weight:600;
  font-size:.84rem;letter-spacing:0;text-transform:none}
.fm__msg{border-left:3px solid var(--c-cyan);background:#F2F8FF;color:var(--c-ink);border-radius:0 10px 10px 0}
.quote{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card)}
.quote__trust{color:var(--c-mute)}

/* FAQ accordion */
.qa{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-card)}
.qa h3{font-size:1.06rem}
.qa__a{color:var(--c-body)}

/* legal prose */
.prose{color:var(--c-body)}
.prose h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.prose a{color:var(--c-blue)}
.callout{border-left:3px solid var(--c-blue);background:#F2F8FF;border-radius:0 10px 10px 0;color:var(--c-ink)}

/* the light wash panels used inside .dp sections */
.dp{background:var(--c-cream)}
.dp--2{background:#fff}
.dp--3{background:var(--c-mint)}
.light{opacity:.5}

/* sweep the last of the retired display serif out of the body copy */
.info__i a,.info__i p,.info__i strong,.bignum,.price em,.led__r,.qa__a em,
.crumb span,.attrib,.pull,.quote__aside strong,.card em{
  font-family:"Manrope","DM Sans",sans-serif;font-weight:700;letter-spacing:-.02em}
.info__i a{color:var(--c-ink)}
.info__i a:hover{color:var(--c-blue)}
.pull{font-family:"Newsreader",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.num,.price__i h3,.step span{font-family:"Manrope",sans-serif!important}

/* give the form panel a ground so it reads as a card on white sections */
.fm{background:#FBFCFB}
.sec--alt .fm,.sec .fm{background:#FBFCFB}
.info__i{background:#fff;border:1px solid var(--c-line)}

.dr a,.qa summary,.qmk,.ft__t,summary{font-family:"Manrope","DM Sans",sans-serif}
.dr a{font-weight:800;letter-spacing:-.03em}
.qa summary{font-weight:800;letter-spacing:-.025em;color:var(--c-ink)}
.qmk{color:var(--c-blue)}
.price b,.price__i b,.fd b,.card b{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.03em}

/* tighter process tabs on small screens */
@media(max-width:640px){
  .ptab{grid-template-columns:28px 1fr;gap:2px 10px;padding:14px 12px}
  .ptab strong{font-size:.95rem}
  .ptab small{font-size:.68rem;line-height:1.3}
  .proc__stage{padding:20px}
  .proc__copy .pc{font-size:.94rem}
}

/* contrast corrections found in audit */
.rail4 small{color:#4E6879}
.rail4 span{color:#586975}
.ft .fm__note{color:rgba(255,255,255,.72)}
.close4 small{color:rgba(255,255,255,.9)}
.ptab small{color:rgba(255,255,255,.62)}

/* A gradient this bright cannot carry white body copy — the cyan end runs at
   1.8:1. The deepened ramp keeps the same hue journey and clears AA on every
   stop; the bright --signal stays for accents, text clips and small marks. */
:root{--signal-deep:linear-gradient(108deg,#0B6E86,#0F4FB4 40%,#5A34C6 72%,#9B2BB8)}
.close4{background:var(--signal-deep)}
.close4__g>div:last-child p{color:rgba(255,255,255,.94)}
.close4 small{color:rgba(255,255,255,.9)}
.proc{background:linear-gradient(145deg,#101B49 0%,#2F3BB4 55%,#5A3FC8 100%)}
.proc__head>div:last-child p{color:rgba(255,255,255,.9)}

/* ── v4.1: the same quiet voice on the sub-pages ──────────────────────
   These labels are inherited from the earlier sheet and were still set
   at 10px / .22em uppercase, which reads as chrome rather than caption. */
.prose__meta{font-family:"DM Sans",sans-serif;font-size:.86rem;letter-spacing:0;
  text-transform:none;color:var(--c-mute)}
.info__i small,.price__i small,.callout small{
  font-family:"DM Sans",sans-serif;font-size:.82rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--c-mute)}
.fd input[type=file]::file-selector-button{font-family:"Manrope",sans-serif;font-size:.8rem;
  letter-spacing:0;text-transform:none}
.skip{letter-spacing:0;text-transform:none;font-family:"Manrope",sans-serif;font-size:.86rem}

/* ── v4.1: small text takes the darker blue so it clears WCAG AA ──── */
.proc__copy>span,.orbit__i b,.rel__g span,.step span,.path__go,.crumb a,
.ptab.is-on span,.tlink:hover span,.dr a span,.rail a:hover,.prose a{color:var(--c-blue-ink)}
.orbit__i.o2 b,.orbit__i.o3 b,.orbit__i.o4 b{color:var(--c-blue-ink)}

/* the photo caption needs a plate it can rely on, not a soft scrim */
.proc__badge{left:0;right:0;bottom:0;top:auto;padding:12px 16px;
  background:rgba(6,24,42,.88);color:#fff}

/* wrapped separators orphan themselves on narrow screens — stack instead */
@media(max-width:760px){
  .h4__trust{display:grid;gap:9px}
  .h4__trust span{gap:0}
  .h4__trust span+span::before{display:none}
}

/* ── v4.1: the hero headline ──────────────────────────────────────────
   background-clip:text paints only inside the element box, so the italic
   line lost its ascenders and descenders. Pad the box, pull the padding
   back out of the layout. */
.h4__sub h1 em{padding-bottom:.16em}

/* the separators orphan themselves whenever the trust row wraps, and the
   copy column is too narrow to hold all three below ~1300px */
@media(max-width:1300px){
  .h4__trust{display:grid;gap:9px}
  .h4__trust span{gap:0}
  .h4__trust span+span::before{display:none}
}

/* the hero photo is landscape in a tall box — at the widths where the visual
   column narrows, the second person falls out of frame */
@media(min-width:901px) and (max-width:1340px){
  .h4__vis>img{object-position:74% center}
}

/* ── sub-page hero rail ───────────────────────────────────────────────
   The homepage earns its weight from the proof rail under the hero; the
   sub-pages were landing on copy alone. Same grammar, page-specific facts. */
.h4--sub{padding:150px 0 clamp(64px,7vw,104px)}
.srail{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(var(--srail-n,3),1fr);
  margin-top:clamp(48px,6vw,76px);
  border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
.srail>div{display:grid;align-content:start;gap:9px;min-height:128px;padding:22px 24px;
  border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.srail span{color:#586975;font-family:"Manrope",sans-serif;font-size:.72rem;
  font-weight:700;letter-spacing:.04em}
.srail strong{font-family:"Manrope",sans-serif;font-size:1.05rem;font-weight:800;
  letter-spacing:-.02em;color:var(--c-ink);line-height:1.25}
.srail small{color:#5A6E7A;font-size:.78rem;line-height:1.5}
@media(max-width:900px){.srail{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.srail{grid-template-columns:1fr}
  .srail>div{min-height:0;padding:18px 20px;gap:6px}}