/* ══════════════════════════════════════════════════════════════════════
   GENERATED — do not edit.
   Extracted verbatim from scorecard/index.html by build.js, so the design
   system on the marketing pages can never drift from the scorecard page.
   Change the tokens there, or add to src/assets/site.css.
   ══════════════════════════════════════════════════════════════════════ */


/* ============================================================
   TOKENS — pasted verbatim from obexron-illustrations.html.
   Every illustration is coloured only with these vars, so ONE
   copy of each SVG works on both surfaces.
   ============================================================ */
.ox-paper{
  --ox-bg:#F2F2F0;  --ox-card:#FFFFFF;  --ox-main:#1A1A1A;
  --ox-detail:#8A8A93; --ox-faint:#C4C4BF; --ox-texture:#E4E4E0;
  --ox-orange:#FF5A1F; --ox-blue:#2E6FF2; --ox-watermark:#E2E2DE;
  background:var(--ox-bg);
}
.ox-ink{
  --ox-bg:#0B0B0B;  --ox-card:#17171C;  --ox-main:#C9C9CF;
  --ox-detail:#4A4A55; --ox-faint:#2E2E38; --ox-texture:#1C1C24;
  --ox-orange:#FF5A1F; --ox-blue:#5A8FF7; --ox-watermark:#23232B;
  background:var(--ox-bg);
}

/* ============================================================
   Surface UI tokens (visual spec §2). Kept in their own rule so
   the pasted block above is never edited.
   ============================================================ */
.ox-paper{
  --border:#E4E4E2;
  --heading:#0B0B0B;
  --body:#6E6E76;
  --fine:#6E6E76;      /* spec §2 says #9A9AA0; §11 forbids lighter than
                          #6E6E76 for anything a visitor must read, and every
                          piece of fine print here is required reading */
  --link:#1E5AD6;
  --btn:#2E6FF2;
  --btn-hover:#1E5AD6;
  --btn-hover-ink:#FFFFFF;
  --empty:#DCDCD7;
  color:var(--body);
}
.ox-ink{
  --border:#2E2E38;
  --heading:#FFFFFF;
  --body:#C9C9CF;
  --fine:#8A8A93;      /* 5.8:1 on #0B0B0B — passes as specified */
  --link:#5A8FF7;
  --btn:#2E6FF2;
  --btn-hover:#5A8FF7;
  --btn-hover-ink:#0B0B0B;  /* white on #5A8FF7 is 3.1:1; the ink label keeps
                               the specified hover fill and stays readable */
  --empty:#2E2E38;
  color:var(--body);
}

:root{
  /* type scale — visual spec §3, mobile value at 375px, desktop at 1120px */
  --fs-h1:clamp(2.125rem, 1.4329rem + 2.953vw, 3.5rem);      /* 34 → 56 */
  --fs-h2:clamp(1.75rem,  1.3725rem + 1.611vw, 2.5rem);      /* 28 → 40 */
  --fs-h3:clamp(1.125rem, 1.0621rem + 0.2685vw, 1.25rem);    /* 18 → 20 */
  --fs-body:clamp(1rem,   0.9685rem + 0.134vw, 1.0625rem);   /* 16 → 17 */
  --fs-small:clamp(0.8125rem, 0.7813rem + 0.134vw, 0.875rem);/* 13 → 14 */
  --fs-eyebrow:0.875rem;
  --fs-btn:1rem;

  --maxw:1120px;
  --prose:720px;
  --gutter:24px;
  --sect-y:72px;

  --r-card:14px;
  --r-panel:16px;
  --r-btn:8px;
  --r-input:8px;
  --r-option:10px;
}
@media (min-width:900px){
  :root{ --sect-y:120px; }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;
  background:#0B0B0B;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.6;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
@media (min-width:900px){ body{line-height:1.65;} }

/* ---------- scrollbar ---------- */
html{
  scrollbar-width:thin;
  scrollbar-color:#4A4A55 #0B0B0B;   /* thumb, track — both brand dark-surface values */
}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#0B0B0B;}
::-webkit-scrollbar-corner{background:#0B0B0B;}
::-webkit-scrollbar-thumb{
  background:#4A4A55;border-radius:999px;
  border:3px solid #0B0B0B;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:#6E6E76;}

img,svg{max-width:100%;display:block;}
p{margin:0;}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{text-decoration-thickness:1px;}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;}

/* Focus — visual spec §8. Blue does all interaction; never removed. */
:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}

h1,h2,h3,h4{margin:0;font-weight:500;color:var(--heading);text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-0.032em;}
h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-0.03em;}
h3{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-0.02em;}
@media (max-width:899px){ h1{line-height:1.2;} h2{line-height:1.25;} }

.small{font-size:var(--fs-small);line-height:1.5;letter-spacing:0;}
.fine{font-size:var(--fs-small);line-height:1.5;letter-spacing:0;color:var(--fine);}
.prose{max-width:var(--prose);}
.heading-measure{max-width:19ch;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{position:relative;overflow:hidden;padding-block:var(--sect-y);}
.hairline{height:1px;background:var(--border);border:0;margin:0;}

/* eyebrow → 14px above the heading (spec §4) */
.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;
  color:var(--link);margin:0 0 14px;
}
.h2-body{margin-top:20px;}       /* H2 → body: 20px */
.body-cta{margin-top:32px;}      /* body → button: 32px */
.body-illo{margin-top:48px;}     /* last body element → illustration: 48px */

/* ---------- buttons (spec §8) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 28px;
  background:var(--btn);color:#FFFFFF;
  font-size:var(--fs-btn);font-weight:500;letter-spacing:-0.0125em;line-height:1.2;
  border:0;border-radius:var(--r-btn);
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--btn-hover);color:var(--btn-hover-ink);}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.btn-arrow{transition:none;}

/* Secondary link — blue text with an arrow, never a bordered button */
.link-next{
  display:inline-block;font-size:0.9375rem;color:var(--link);
  text-decoration:underline;text-underline-offset:3px;
}
.link-quiet{color:var(--body);font-size:0.9375rem;background:none;border:0;padding:10px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.link-quiet:hover{color:var(--heading);}

/* ---------- cards ---------- */
.card{
  background:var(--ox-card);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:28px;
}
.card h3{margin-bottom:8px;}
.card p{color:var(--body);}
.grid{display:grid;gap:20px;}
@media (min-width:760px){
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(3,1fr);}
}

/* ---------- the big ring (spec §5) ----------
   The library ships ox-watermark capped at max-width:190px inline. The wrapper
   sets the real diameter, so that inline cap has to be lifted — the SVG source
   itself is untouched. */
.ox-ring{position:absolute;pointer-events:none;width:var(--d);z-index:0;}
.ox-ring svg{max-width:none !important;width:100%;height:auto;}
.ox-ring--hero{--d:150px;right:calc(var(--d) * -0.22);bottom:calc(var(--d) * -0.20);}
.ox-ring--build{--d:154px;right:calc(var(--d) * -0.22);top:calc(var(--d) * -0.20);}
.ox-ring--final{--d:170px;right:calc(var(--d) * -0.22);bottom:calc(var(--d) * -0.20);}
@media (min-width:900px){
  .ox-ring--hero{--d:min(34vh,360px);bottom:calc(var(--d) * -0.10);}
  .ox-ring--build{--d:280px;top:calc(var(--d) * -0.10);}
  .ox-ring--final{--d:340px;bottom:calc(var(--d) * -0.10);}
}
.section > .wrap{position:relative;z-index:1;}



/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  padding:14px 0;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
/* the hairline only appears once the header has left the top of the hero */
.site-header.is-stuck{border-bottom-color:var(--border);}
#scorecard,#booking{scroll-margin-top:96px;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.lockup .ox-lockup-mark{width:24px;flex:none;}
.lockup .ox-lockup-mark svg{max-width:none !important;width:100%;}
.lockup__word{font-size:16px;font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.header-cta{display:none;}
@media (min-width:900px){ .header-cta{display:inline-flex;min-height:44px;padding:11px 20px;} }

/* ---------- 1. hero ---------- */
.hero{padding-block:56px 132px;}
@media (min-width:900px){
  .hero{padding-block:96px 240px;}
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:56px;align-items:center;}
}
.hero h1{max-width:16ch;}
.hero__sub{margin-top:24px;max-width:56ch;}
.hero__micro{margin-top:14px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}
.hero__micro b{font-weight:500;color:var(--heading);}
.hero__secondary{margin-top:12px;}
.hero__illo{margin-top:48px;display:grid;gap:28px;}
.hero__illo-2{display:none;}
@media (min-width:900px){ .hero__illo{margin-top:0;} .hero__illo-2{display:block;} }

/* ---------- 3. is this you? ---------- */
.ox-motif{max-width:200px;margin-bottom:20px;}
.closing-line{
  margin-top:48px;text-align:center;text-wrap:balance;
  font-size:var(--fs-h3);line-height:1.35;letter-spacing:-0.02em;
  color:var(--heading);max-width:62ch;margin-inline:auto;
}
.closing-line--body{color:var(--body);font-size:var(--fs-body);line-height:1.55;letter-spacing:-0.006em;}

/* ---------- 4. what it's costing ---------- */
@media (min-width:900px){
  .cost__grid{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1fr);gap:64px;align-items:center;}
}
.cost__illo{margin-top:48px;}
@media (min-width:900px){ .cost__illo{margin-top:0;} }
.stat{padding:26px 0;border-top:1px solid var(--border);}
.stat:first-child{border-top:0;padding-top:0;}
.stat__figure{
  font-size:clamp(48px,6vw,72px);font-weight:500;line-height:1;letter-spacing:-0.035em;
  color:var(--heading);margin-bottom:16px;
}
.stat__line{color:var(--body);max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.5;}
.stat__src{margin-top:10px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}

/* ---------- the level bar (ox-levels) ---------- */
.levels{max-width:200px;width:100%;}
.level-key .levels{max-width:none;}
.levels svg{width:100%;height:auto;}
.level-legend{display:grid;gap:18px;margin-top:40px;max-width:680px;}
@media (min-width:560px){ .level-legend{grid-template-columns:repeat(4,1fr);gap:24px;} }
.level-key__name{
  margin-top:10px;font-size:var(--fs-small);font-weight:500;
  color:var(--heading);letter-spacing:0;
}
.level-key__note{font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}
/* an area with no score yet: the full bar, blue, waiting to be filled */
.levels--ghost{opacity:.3;}
.areas{margin-top:48px;border-top:1px solid var(--border);}
.area-row{
  display:grid;grid-template-columns:1fr;gap:10px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--border);
}
@media (min-width:560px){
  .area-row{grid-template-columns:minmax(0,1fr) 200px 108px;gap:24px;}
  .area-row__level{text-align:right;}
}
.area-row__name{font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.area-row__level{font-size:var(--fs-small);color:var(--body);letter-spacing:0;}

/* ---------- 6. the quiz (spec §7.6) — no decoration in here ---------- */
.quiz-shell{
  max-width:var(--prose);margin-inline:auto;
  background:var(--ox-card);border:1px solid var(--border);
  border-radius:var(--r-panel);padding:24px;
  /* ox-score-dial knocks its X out with var(--ox-bg). Inside this card the
     background is the card colour, so the token is retargeted here rather
     than the SVG being edited. */
  --ox-bg:var(--ox-card);
}
@media (min-width:760px){ .quiz-shell{padding:40px;} }
.quiz-progress{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:10px;}
.quiz-progress i{display:block;height:4px;border-radius:2px;background:var(--empty);}
.quiz-progress i.is-on{background:#2E6FF2;}
.quiz-meta{font-size:var(--fs-small);color:var(--fine);letter-spacing:0;margin-bottom:28px;}
.quiz-step[hidden]{display:none;}
.quiz-step__title{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-0.02em;color:var(--heading);font-weight:500;}
.quiz-step__hint{margin-top:10px;color:var(--body);}
fieldset{border:0;padding:0;margin:0;}
legend{padding:0;display:block;width:100%;}
.q-area{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;color:var(--link);margin-bottom:14px;}
.q-text{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-0.02em;color:var(--heading);font-weight:500;}

.opts{display:grid;gap:12px;margin-top:28px;}
.opt{
  display:flex;align-items:center;gap:14px;
  min-height:56px;padding:18px;
  background:var(--ox-card);border:1px solid var(--border);border-radius:var(--r-option);
  font-size:16px;line-height:1.4;cursor:pointer;
  transition:border-color .15s ease;
}
.opt:hover{border-color:#1E5AD6;}
.opt input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:none;
  border:1px solid var(--fine);border-radius:50%;background:transparent;
}
.opt input:checked{border:0;background:#2E6FF2;}
.opt:has(input:checked){border-color:#2E6FF2;border-width:2px;padding:17px;}
.opt:has(input:focus-visible){outline:2px solid #2E6FF2;outline-offset:2px;}

.field{display:grid;gap:8px;margin-bottom:20px;}
.field label{font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--heading);}
.field .opt-tag{color:var(--fine);font-weight:400;}
.field input,.field select{
  min-height:52px;padding:14px;font-size:16px;
  background:var(--ox-card);color:var(--heading);
  border:1px solid var(--border);border-radius:var(--r-input);width:100%;
  transition:border-color .15s ease;
}
.field input:hover,.field select:hover{border-color:#1E5AD6;}
.field-row{display:grid;gap:0 20px;}
@media (min-width:600px){ .field-row{grid-template-columns:1fr 1fr;} }
.field-err{margin-top:4px;font-size:var(--fs-small);color:#C63E0E;letter-spacing:0;}
.field-err:empty{display:none;}

.check{display:flex;align-items:flex-start;gap:14px;padding:14px 0;line-height:1.5;cursor:pointer;}
.check input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:none;margin-top:2px;
  border:1px solid var(--fine);border-radius:5px;background:transparent;
  display:grid;place-content:center;
}
.check input::after{
  content:"";width:10px;height:6px;border:2px solid #FFFFFF;border-top:0;border-right:0;
  transform:rotate(-45deg) scale(0);
}
.check input:checked{background:#2E6FF2;border-color:#2E6FF2;}
.check input:checked::after{transform:rotate(-45deg) scale(1);}
.check span{font-size:16px;}
.quiz-nav{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap;}
.quiz-foot{margin-top:16px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}

/* results */
.result-head{display:grid;gap:24px;justify-items:center;text-align:center;}
.dial{position:relative;width:200px;max-width:60vw;}
.dial svg{max-width:none !important;width:100%;height:auto;}
.dial__num{
  position:absolute;inset:0;display:grid;place-content:center;
  font-size:56px;font-weight:500;line-height:1;letter-spacing:-0.03em;color:var(--heading);
}
@media (max-width:479px){ .dial__num{font-size:44px;} }
.dial__of{font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}
.result-band{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.result-copy{margin-top:12px;color:var(--body);max-width:60ch;}
.fix{
  margin-top:40px;padding:28px;
  background:var(--ox-card);border:2px solid #2E6FF2;border-radius:var(--r-card);
}
.fix__kicker{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;color:var(--link);margin-bottom:10px;}
.booking{margin-top:48px;padding-top:40px;border-top:1px solid var(--border);}
.booking__frame{
  margin-top:24px;min-height:640px;
  border:1px dashed var(--border);border-radius:var(--r-card);
  display:grid;place-content:center;text-align:center;padding:24px;
}
.booking__frame iframe{width:100%;min-height:640px;border:0;border-radius:var(--r-card);}
/* once the Cal calendar is in, the frame stops being a dashed placeholder box
   and becomes a plain container — the grid centring would fight the embed */
.booking__frame--live{
  display:block;place-content:initial;text-align:left;
  padding:0;min-height:560px;border:0;
}
.booking__frame--live iframe{display:block;width:100%;border:0;}

/* ---------- 8. works with your software ---------- */
.split{display:grid;gap:48px;}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);gap:64px;align-items:center;}
}
.split__aside{display:grid;gap:28px;}
.platforms{display:flex;flex-wrap:wrap;gap:10px;}
.platforms span,.platforms a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  border:1px solid var(--border);border-radius:999px;background:var(--ox-card);
  font-size:var(--fs-small);font-weight:500;letter-spacing:-0.01em;color:var(--heading);
  text-decoration:none;
}
.platforms a:hover{border-color:#1E5AD6;color:var(--link);}

/* ---------- 9. how it works ---------- */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:32px;position:relative;}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr);gap:32px;}
  .steps::before{
    content:"";position:absolute;left:0;right:0;top:9px;height:0;
    border-top:1px dashed var(--ox-faint);
  }
}
.step{position:relative;}
.step__n{
  display:block;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;
  color:var(--link);margin-bottom:14px;background:var(--ox-bg);padding-right:12px;
}
.step h3{margin-bottom:8px;}
.step p{color:var(--body);}

/* ---------- 10. why trust a new company ---------- */
.trust-list{list-style:none;margin:40px 0 0;padding:0;max-width:var(--prose);counter-reset:trust;}
.trust-list li{
  counter-increment:trust;
  display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:20px 0;border-top:1px solid var(--border);
  line-height:1.7;
}
.trust-list li:last-child{border-bottom:1px solid var(--border);}
.trust-list li::before{
  content:counter(trust,decimal-leading-zero);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;
  color:var(--link);padding-top:4px;
}

/* ---------- 11. FAQ — the rotating cross is the house detail ---------- */
.faq{margin-top:40px;max-width:var(--prose);border-top:1px solid var(--border);}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;min-height:44px;cursor:pointer;list-style:none;
  font-size:18px;font-weight:500;letter-spacing:-0.02em;color:var(--heading);
}
.faq summary::-webkit-details-marker{display:none;}
.faq__toggle{position:relative;width:16px;height:16px;flex:none;transition:transform .15s ease;}
.faq__toggle::before,.faq__toggle::after{
  content:"";position:absolute;background:var(--body);
}
.faq__toggle::before{left:0;right:0;top:7.5px;height:1px;}
.faq__toggle::after{top:0;bottom:0;left:7.5px;width:1px;}
.faq details[open] .faq__toggle{transform:rotate(45deg);}
.faq__a{padding:0 0 24px;color:var(--body);max-width:64ch;}

/* ---------- 12 / 13 ---------- */
.final{text-align:center;}
.final h2{max-width:20ch;margin-inline:auto;}
.final p{max-width:46ch;margin-inline:auto;}
.site-footer{border-top:1px solid var(--border);padding:48px 0 calc(48px + env(safe-area-inset-bottom));}
.footer-inner{display:grid;gap:24px;}
@media (min-width:760px){ .footer-inner{grid-template-columns:1fr auto;align-items:center;} .footer-links{justify-self:end;} }
.footer-tag{margin-top:14px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;max-width:44ch;}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:var(--fs-small);letter-spacing:0;}
.footer-links a,.footer-links button{
  display:inline-flex;align-items:center;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:inherit;letter-spacing:inherit;
  color:var(--fine);text-decoration:none;
}
.footer-links a:hover,.footer-links button:hover{color:var(--link);text-decoration:underline;}
.footer-legal{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}

/* ---------- cookie consent ----------
   Three choices, one visual weight. Nothing here is styled to steer the answer,
   and no orange, because orange is never interactive. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#0B0B0B;border-top:1px solid #2E2E38;
  padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  color:#C9C9CF;
  opacity:0;transform:translateY(10px);
  transition:opacity .2s ease-out,transform .2s ease-out;
}
.consent.is-open{opacity:1;transform:none;}
.consent__inner{max-width:var(--maxw);margin-inline:auto;display:grid;gap:16px;}
@media (min-width:900px){
  .consent{padding:20px var(--gutter);}
  .consent__inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;}
}
.consent__text{font-size:var(--fs-small);line-height:1.55;letter-spacing:0;max-width:72ch;}
.consent__text a{color:#5A8FF7;}
.consent__actions{display:flex;flex-wrap:wrap;gap:10px;}
.consent__btn{
  flex:0 1 auto;min-height:44px;padding:11px 18px;
  background:transparent;color:#FFFFFF;
  border:1px solid #2E2E38;border-radius:var(--r-btn);
  font-size:var(--fs-small);font-weight:500;letter-spacing:-0.01em;
  white-space:nowrap;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.consent__btn:hover{border-color:#5A8FF7;background:#17171C;}
.consent__btn:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .consent{transform:none;} }

/* ---------- sticky mobile CTA (spec §10) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:#0B0B0B;border-top:1px solid #2E2E38;
  transform:translateY(110%);transition:transform .2s ease;
}
.sticky-cta .btn{width:100%;}
.sticky-cta.is-shown{transform:translateY(0);}
@media (min-width:900px){ .sticky-cta{display:none;} }

/* On mobile the rings sit in the section's padding band, never behind copy or
   an illustration (spec §5). These paddings reserve that band. */
@media (max-width:899px){
  .sect-build{padding-top:136px;}
  .sect-final{padding-bottom:148px;}
}

.skip-link{position:absolute;left:-9999px;top:0;background:#FFFFFF;color:#0B0B0B;padding:12px 18px;z-index:100;}
.skip-link:focus{left:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- motion (spec §9) ---------- */
.js .reveal{opacity:0;transform:translateY(12px);}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .3s ease-out,transform .3s ease-out;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}