/* ══════════════════════════════════════════════════════════════════════
   GENERATED — do not edit.
   Copied by build.js from src/assets/tokens.css, which is the design
   system and the only place to change it. Page layout and site chrome
   live in src/assets/site.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Obexron — the design system. Tokens, type scale, surfaces, buttons, cards,
   the ring, and every shared component the pages are assembled from.

   This used to be extracted at build time from a standalone page that was the
   only one carrying the full stylesheet. That page has been removed, so the
   CSS was lifted out of it verbatim and now lives here as the single source of
   truth. Nothing below was retyped or re-derived — the colours, the spacing,
   the type scale and the component rules are byte-for-byte what the design
   system already was.

   build.js copies this to /assets/obexron.css. Page layout and site chrome
   that are not part of the system live in site.css, next door.
   ══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   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;}



/* ---------- the logo lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.lockup__mark{width:24px;flex:none;}
.lockup__mark svg{max-width:none !important;width:100%;}
.lockup__word{font-size:16px;font-weight:500;letter-spacing:-0.02em;color:var(--heading);}

/* ---------- the line under the hero buttons ---------- */
.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);}

/* ---------- motif cards and the line that closes a section ---------- */
.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;}

/* ---------- form fields ---------- */
.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;}

.form-nav{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap;}
.form-foot{margin-top:16px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}

/* ---------- the two-column split ---------- */
.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;}

/* ---------- the numbered steps ---------- */
.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;}

/* ---------- the dark closing band ----------
   The footer that used to sit here belonged to the single-page layout and had
   its own one-row grid. The site's footer is a real multi-column one and lives
   in site.css; two .site-footer rules in two files is one too many. */
.final{text-align:center;}
.final h2{max-width:20ch;margin-inline:auto;}
.final p{max-width:46ch;margin-inline:auto;}

/* ---------- 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;} }

/* 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;}
}