/* ══════════════════════════════════════════════════════════════
   XROUNDS — public one-pager
   Vanilla CSS. No build step, no framework, no CDN.

   Cool paper + deep navy ink, electric indigo action, signal amber
   for the active round. Type: Archivo (display, width axis),
   IBM Plex Sans (body), IBM Plex Mono (data).

   Light and dark are both first-class and follow the browser
   setting. Only the token VALUES change; every rule below the
   token block is written once and works in both. Every text node
   on the page has been measured at or above WCAG AA in both
   themes, so changing a colour means re-measuring, not eyeballing.
   ══════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* ── surfaces and text ── */
  --paper:      #EDF0F5;   /* page ground            */
  --paper-2:    #F8FAFD;   /* alternating sections   */
  --surface:    #FFFFFF;   /* cards, inputs, panels  */
  --ink:        #0E1626;   /* primary text           */
  --muted:      #55627C;   /* secondary text         */
  --rule:       #C9D2E1;   /* hairlines              */

  /* ── accents ──
     --indigo is indigo as TEXT or a border; --indigo-solid is indigo as a
     filled button background. They differ in dark mode because the contrast
     requirement runs in opposite directions: text must lighten against a dark
     ground, a filled button must darken to keep white label text legible. */
  --indigo:        #3A2FD6;
  --indigo-solid:  #3A2FD6;
  --indigo-hover:  #2A21B8;
  --on-accent:     #FFFFFF;

  /* --amber is the round marker and is GRAPHICS ONLY. As small text on a light
     ground it is about 2.3:1 and fails, so text uses --amber-ink, which is
     measured at 4.96:1 on --paper and 5.67:1 on --surface. */
  --amber:      #E39A2C;
  --amber-ink:  #8F5C0B;

  --teal:       #12776B;
  --danger:     #C0392B;

  /* ── the deliberately dark bands: Boundaries and the footer.
     These stay dark in BOTH themes, going deeper than the page ground in dark
     mode so they still read as distinct bands rather than merging. ── */
  --invert-bg:      #0E1626;
  --invert-surface: #182643;
  --invert-fg:      #F8FAFD;
  --invert-rule:    #2A3752;
  --invert-muted:   #8E9CB8;
  --invert-yes:     #3FBFA4;
  --invert-no:      #E8776B;

  /* ── dial ── */
  --dial-ring: #A9B6CC;
  --dial-line: #8494B0;

  --shell:      1180px;
  --gap:        clamp(1.25rem, 4vw, 2rem);
  --sect:       clamp(4rem, 9vw, 7.5rem);
  --r:          14px;

  --f-disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ══════════════════════════════════════════════════════════════
   DARK THEME
   Honours the browser / OS setting. Only the values change; every
   rule below this block is written once and works in both themes.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0A101C;
    --paper-2:    #0E1626;
    --surface:    #141E33;
    --ink:        #E9EDF5;
    --muted:      #9AA8C2;
    --rule:       #253248;

    --indigo:        #9891FF;   /* lighter: indigo as text on a dark ground   */
    --indigo-solid:  #5B50E3;   /* darker: keeps white button text at 5.7:1   */
    --indigo-hover:  #6E63F2;
    --on-accent:     #FFFFFF;

    --amber:      #EDA63E;
    --amber-ink:  #EDA63E;      /* already passes on a dark ground */

    --teal:       #46C5A9;
    --danger:     #FF8A7A;

    --invert-bg:      #05090F;  /* deeper than --paper, so the band still reads */
    --invert-surface: #101827;
    --invert-fg:      #F8FAFD;
    --invert-rule:    #1E293C;
    --invert-muted:   #93A2BE;

    --dial-ring: #35455F;
    --dial-line: #4A5C7A;
  }
}

/* ── reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.06rem)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* ── layout primitives ─────────────────────────────────────── */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* ── type primitives ───────────────────────────────────────── */
.display {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.032em;
  line-height: .96;
  font-size: clamp(2.5rem, 6.6vw, 4.5rem);
  text-wrap: balance;
}
.display--2 { font-size: clamp(1.75rem, 3.8vw, 2.85rem); line-height: 1.02; }

.eyebrow {
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--indigo);
}

.lede {
  font-size: clamp(1.03rem, .98rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
}

.section-head { max-width: 42rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: .9rem; }
.section-head__sub { margin-top: 1.1rem; color: var(--muted); max-width: 46ch; }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .95rem 1.5rem;
  background: var(--indigo-solid); color: var(--on-accent);
  border: 1px solid var(--indigo-solid); border-radius: 999px;
  font: 500 .95rem/1 var(--f-body);
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--indigo-hover); border-color: var(--indigo-hover); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn--sm { padding: .6rem 1.05rem; font-size: .85rem; }
.btn--wide { width: 100%; padding: 1.05rem 1.5rem; }

/* ── masthead ──────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 62px;
}
.masthead__nav { display: none; margin-left: auto; gap: 1.6rem; }
.masthead__nav a {
  font: 500 .88rem/1 var(--f-body);
  text-decoration: none; color: var(--muted);
  padding-block: .4rem;
  border-bottom: 1.5px solid transparent;
  transition: color .16s, border-color .16s;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--indigo); }
.masthead .btn { margin-left: auto; }
.masthead__nav ~ .btn { margin-left: 0; }

.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font: 800 1.02rem/1 var(--f-disp);
  font-stretch: 116%;
  letter-spacing: .06em;
}
.wordmark__mark {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--indigo); stroke-width: 1.6;
}
.wordmark__mark circle:nth-child(3) { fill: var(--amber); stroke: none; }

/* ══════════════ HERO ══════════════ */
.hero { padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.hero__copy .eyebrow { margin-bottom: 1.1rem; }
/* sized so it sets as two lines: "Every company / grows in rounds." */
.hero__copy .display { margin-bottom: 1.4rem; font-size: clamp(2.4rem, 5.1vw, 4rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__note {
  margin-top: 1.1rem;
  font: 400 .84rem/1.5 var(--f-mono);
  color: var(--muted);
  max-width: 44ch;
}

/* ── SIGNATURE: growth-ring dial ── */
.dial { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1; }
.dial__svg { width: 100%; height: 100%; overflow: visible; }

.ring {
  stroke: var(--dial-ring);
  stroke-width: 1.15;
  transition: stroke .35s var(--ease), stroke-width .35s var(--ease);
}
/* rounds already behind you read as solid indigo; the one you are in is amber */
.ring.is-inner  { stroke: var(--indigo-solid); stroke-width: 1.6; }
.ring.is-active { stroke: var(--amber); stroke-width: 3; }

.dial__spiral {
  stroke: var(--dial-line);
  stroke-width: 1.2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}
.dial__node {
  fill: var(--surface); stroke: var(--dial-line); stroke-width: 2;
  cursor: pointer;
  transition: fill .3s var(--ease), stroke .3s var(--ease), r .3s var(--ease);
}
.dial__node:hover     { stroke: var(--indigo); }
.dial__node.is-done   { fill: var(--indigo-solid); stroke: var(--indigo-solid); }
.dial__node.is-active { fill: var(--amber); stroke: var(--amber); }
.dial__halo { fill: none; stroke: var(--amber); stroke-width: 1.25; opacity: 0; }
.dial__halo.is-on { animation: halo 2.6s var(--ease) infinite; }
@keyframes halo {
  0%   { r: 9;  opacity: .85; }
  70%  { r: 26; opacity: 0; }
  100% { r: 26; opacity: 0; }
}

.dial__core {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .3rem;
  text-align: center; pointer-events: none;
}
.dial__idx {
  font: 500 .78rem/1 var(--f-mono);
  letter-spacing: .2em; color: var(--amber-ink);
}
.dial__name {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: -.02em;
}

/* ══════════════ STAGES ══════════════ */
.stages { padding-block: var(--sect); background: var(--paper-2); border-block: 1px solid var(--rule); }
.stages__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }

.stagelist { display: flex; flex-wrap: wrap; gap: .5rem; }
.stagelist button {
  display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.stagelist button:hover { border-color: var(--indigo); }
.stagelist button[aria-selected="true"] {
  background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-fg);
}
.stagelist__n {
  font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; color: var(--muted);
}
.stagelist button[aria-selected="true"] .stagelist__n { color: var(--amber); }
.stagelist__t { font-size: .92rem; font-weight: 500; }

.stagepanels { position: relative; }
.stagepanel {
  background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--amber);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.stagepanel[hidden] { display: none; }
.stagepanel__q {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 108%;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  letter-spacing: -.02em; line-height: 1.2;
  margin-bottom: .85rem;
}
.stagepanel__body { color: var(--muted); max-width: 58ch; }
.stagepanel__meta {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font: 400 .82rem/1 var(--f-mono); color: var(--muted);
}
.stagepanel__meta span {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .7rem; margin-right: .7rem; color: var(--ink);
}

.deliverables {
  display: grid; gap: .5rem;
  margin-top: 1.4rem;
}
.deliverables li {
  position: relative; padding-left: 1.5rem;
  font-size: .95rem;
}
.deliverables li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--indigo);
}

/* ══════════════ SERVICES ══════════════ */
.services { padding-block: var(--sect); }
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.card { background: var(--paper-2); padding: clamp(1.4rem, 3vw, 1.9rem); }
.card__key {
  display: inline-block; margin-bottom: .9rem;
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .16em;
  color: var(--indigo);
}
.card h3 {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
  font-size: 1.22rem; letter-spacing: -.02em; margin-bottom: .5rem;
}
.card p { color: var(--muted); font-size: .94rem; }

/* ══════════════ PROCESS ══════════════ */
.process { padding-block: var(--sect); background: var(--paper-2); border-block: 1px solid var(--rule); }
.steps { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
  padding-block: clamp(1.4rem, 3vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.step__n {
  font: 500 .78rem/1.5 var(--f-mono);
  letter-spacing: .12em; color: var(--indigo);
}
.step h3 {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
  font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .4rem;
}
.step p { color: var(--muted); max-width: 62ch; }

/* ══════════════ TRUST (dark) ══════════════ */
.trust { padding-block: var(--sect); background: var(--invert-bg); color: var(--invert-fg); }
.trust .eyebrow { color: var(--amber); }
.trust .section-head__sub { color: var(--invert-muted); }
.trust__grid { display: grid; gap: 1.5rem; }
.trust__col {
  padding: clamp(1.5rem, 3.5vw, 2rem);
  background: var(--invert-surface);
  border: 1px solid var(--invert-rule);
  border-radius: var(--r);
}
.trust__col h3 {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
  font-size: 1.15rem; letter-spacing: -.01em;
  margin-bottom: 1.1rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--invert-rule);
}
.trust__col ul { display: grid; gap: .8rem; }
.trust__col li {
  position: relative; padding-left: 1.7rem;
  font-size: .94rem; color: var(--invert-fg);
}
.trust__col li::before {
  position: absolute; left: 0; top: -.05em;
  font: 500 .95rem/1.7 var(--f-mono);
}
.trust__col--no li::before  { content: "×"; color: var(--invert-no); }
.trust__col--yes li::before { content: "✓"; color: var(--invert-yes); }
.trust__col--yes h3 { color: var(--invert-yes); }
.trust__col--no h3  { color: var(--invert-no); }

.disclaimer {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--invert-rule);
  font-size: .84rem; line-height: 1.65; color: var(--invert-muted);
  max-width: 74ch;
}

/* ══════════════ ASSESSMENT ══════════════ */
.assessment { padding-block: var(--sect); }
.assessment__grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: start; }
.assessment__copy .eyebrow { margin-bottom: 1rem; }
.assessment__copy .display { margin-bottom: 1.2rem; }
.assessment__pts { display: grid; gap: .65rem; margin-top: 1.75rem; }
.assessment__pts li {
  position: relative; padding-left: 1.6rem;
  font: 400 .88rem/1.5 var(--f-mono); color: var(--muted);
}
.assessment__pts li::before {
  content: "→"; position: absolute; left: 0; color: var(--indigo);
}

/* ── form ── */
.form {
  display: grid; gap: 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: clamp(1.4rem, 3.5vw, 2rem);
}
.field { display: grid; gap: .4rem; }
.field label {
  font: 500 .74rem/1 var(--f-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem;
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: 8px;
  font-size: .97rem;
  transition: border-color .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--danger); }
.field__err { font: 400 .82rem/1.4 var(--f-body); color: var(--danger); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: .85rem; line-height: 1.5; color: var(--muted);
}
.consent input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--indigo); }
.consent a { color: var(--indigo); }

.form__status { font: 400 .88rem/1.5 var(--f-body); min-height: 1.4em; }
.form__status.is-ok  { color: var(--teal); }
.form__status.is-bad { color: var(--danger); }

/* ══════════════ FOOTER ══════════════ */
.foot { background: var(--invert-bg); color: var(--invert-muted); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.foot__in { display: grid; gap: 2rem; }
.foot__brand .wordmark { color: var(--invert-fg); margin-bottom: .7rem; }
.foot__brand p { font: 400 .88rem/1.5 var(--f-mono); }
.foot__nav, .foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.foot__nav a, .foot__legal a {
  font-size: .88rem; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.foot__nav a:hover, .foot__legal a:hover { color: var(--invert-fg); border-bottom-color: var(--amber); }
.foot__legal { font-size: .84rem; padding-top: 1.5rem; border-top: 1px solid var(--invert-rule); }

/* ══════════════ RESPONSIVE ══════════════ */
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .deliverables { grid-template-columns: repeat(2, 1fr); }
  .form { grid-template-columns: repeat(2, 1fr); }
  .field, .consent, .form .btn, .form__status { grid-column: 1 / -1; }
  .field--half { grid-column: span 1; }
  .step { grid-template-columns: 4.5rem 1fr; gap: 1.5rem; }
}

@media (min-width: 900px) {
  .masthead__nav { display: flex; }
  .masthead .btn { margin-left: 0; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
  .stages__grid { grid-template-columns: 15rem 1fr; align-items: start; }
  .stagelist { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 86px; }
  .stagelist button { width: 100%; justify-content: flex-start; }
  .assessment__grid { grid-template-columns: 1fr 1.05fr; }
}

@media (min-width: 1040px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .foot__in { grid-template-columns: 1fr auto; align-items: start; }
  .foot__legal { grid-column: 1 / -1; }
}

/* ══════════════ MOTION / A11Y ══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dial__halo.is-on { animation: none; opacity: .5; }
}

@media (forced-colors: active) {
  .ring, .dial__node { stroke: CanvasText; }
  .btn { border: 2px solid ButtonText; }
}

/* ══════════════ LEGAL / SIMPLE PAGES ══════════════ */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--sect); }
.legal__doc { max-width: 68ch; }
.legal__doc .display--2 { margin-bottom: .9rem; }
.legal__stamp {
  font: 400 .8rem/1.5 var(--f-mono); color: var(--muted);
  padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.legal__doc h2 {
  font-family: var(--f-disp); font-weight: 700; font-stretch: 110%;
  font-size: 1.2rem; letter-spacing: -.02em;
  margin: 2.4rem 0 .7rem;
}
.legal__doc h2:first-of-type { margin-top: 0; }
.legal__doc p { margin-bottom: .9rem; color: var(--muted); }
.legal__doc strong { color: var(--ink); font-weight: 600; }
.legal__doc a { color: var(--indigo); }
.legal__doc ul { display: grid; gap: .5rem; margin: 0 0 1.1rem; }
.legal__doc ul li {
  position: relative; padding-left: 1.4rem; color: var(--muted);
}
.legal__doc ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--indigo);
}
.legal__doc table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: .92rem;
}
.legal__doc th, .legal__doc td {
  text-align: left; padding: .65rem .8rem; border: 1px solid var(--rule);
  vertical-align: top;
}
.legal__doc th {
  background: var(--surface);
  font: 500 .72rem/1.3 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.legal__doc td { color: var(--muted); }

/* 404 */
.oops { min-height: 62vh; display: grid; place-content: center; text-align: center; gap: 1.2rem; padding-block: var(--sect); }
.oops .display { font-size: clamp(3rem, 12vw, 7rem); }
.oops p { color: var(--muted); max-width: 40ch; margin-inline: auto; }