@charset "utf-8";

/* ==========================================================================
   BeyondX — AI Readiness Audit
   Single same-origin stylesheet. No imports. No external fonts. No JS hooks.

   ARCHITECTURE
   01 Tokens
   02 Reset & base
   03 Typography
   04 Layout primitives
   05 Blueprint motifs (pure CSS + inline SVG support)
   06 Motion layer  (progressive, guarded, never hides content)
   07 Header / nav
   08 Buttons & links
   09 Hero
   10 Sections & components
   11 FAQ (details/summary)
   12 Footer
   13 Legal / prose pages
   14 Responsive
   15 Print
   ========================================================================== */


/* 01 — TOKENS ============================================================= */

:root {
  /* Surface */
  --paper:        #F5F4F0;
  --paper-raised: #FBFAF8;
  --paper-sunk:   #EEEDE7;
  --deep:         #14161A;
  --deep-raised:  #1D2026;

  /* Ink */
  --ink:          #14161A;
  --ink-soft:     #3D424C;
  --ink-muted:    #646B78;
  --ink-onDeep:   #F2F1EC;
  --ink-onDeepMuted: #A2A8B4;

  /* Line */
  --rule:         #DDDBD3;
  --rule-strong:  #C6C3B9;
  --rule-onDeep:  #2E323A;

  /* Accent — used sparingly. Contrast on --paper = 6.9:1 */
  --accent:       #9A3412;
  --accent-deep:  #7C2A0E;
  --accent-onDeep:#E8845C;
  --accent-wash:  #F3E8E2;

  /* Type scale — fluid, mobile-first */
  --t-display: clamp(2.75rem, 1.6rem + 5.4vw, 5.5rem);
  --t-h1:      clamp(2.15rem, 1.4rem + 3.4vw, 3.75rem);
  --t-h2:      clamp(1.7rem, 1.25rem + 2.1vw, 2.65rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h4:      clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --t-lede:    clamp(1.12rem, 1.02rem + 0.5vw, 1.35rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* Rhythm */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Measure */
  --measure:      68ch;
  --measure-tight:56ch;
  --shell:        1200px;
  --shell-narrow: 800px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}


/* 02 — RESET & BASE ======================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky header when deep-linking to #anchors */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
svg { fill: none; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-xl) 0;
}

::selection { background: var(--accent); color: #fff; }


/* Skip link — visible on focus, never clipped from a11y tree */
.skip {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  z-index: 999;
  background: var(--deep);
  color: var(--ink-onDeep);
  padding: 0.75rem 1.15rem;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  transition: top 160ms var(--ease);
}
.skip:focus { top: var(--space-s); }


/* Global focus treatment — always visible, never removed */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-deep :where(a, button, summary):focus-visible { outline-color: var(--accent-onDeep); }
summary::-webkit-details-marker { display: none; }


/* 03 — TYPOGRAPHY ========================================================= */

h1, h2, h3, h4 {
  margin: 0 0 var(--space-s);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.018em; line-height: 1.25; }
h4 { font-size: var(--t-h4); letter-spacing: -0.01em; line-height: 1.35; }

p { margin: 0 0 var(--space-s); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: var(--ink); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.014em;
  max-width: var(--measure-tight);
}

/* Eyebrow — the small technical label above a section heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 var(--space-m);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.eyebrow .idx { color: var(--accent); font-weight: 600; }
.on-deep .eyebrow { color: var(--ink-onDeepMuted); }
.on-deep .eyebrow::after { background: var(--rule-onDeep); }
.on-deep .eyebrow .idx { color: var(--accent-onDeep); }

.mono {
  font-family: var(--mono);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Price — always literal static text, never injected, never animated */
.price {
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.price-note {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.on-deep .price-note { color: var(--ink-onDeepMuted); }


/* 04 — LAYOUT PRIMITIVES ================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section {
  position: relative;
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--rule);
}
.section--flush { border-top: 0; }
.section--sunk { background: var(--paper-sunk); }

.section--deep {
  background: var(--deep);
  color: var(--ink-onDeep);
  border-top: 0;
}
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--ink-onDeep); }
.section--deep .lede { color: var(--ink-onDeepMuted); }
.section--deep p { color: #D6D8DE; }

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

.grid { display: grid; gap: var(--space-l); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

.section-head { max-width: var(--measure); margin-bottom: var(--space-xl); }


/* 05 — BLUEPRINT MOTIFS =================================================== */

/* Faint drafting grid. Decorative only — aria-hidden in markup. */
.blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
}
.section--deep .blueprint {
  background-image:
    linear-gradient(to right,  var(--rule-onDeep) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-onDeep) 1px, transparent 1px);
  opacity: 0.85;
}

/* Corner registration ticks — the "drawing sheet" cue */
.ticked { position: relative; }
.ticked::before,
.ticked::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--rule-strong);
  border-style: solid;
  pointer-events: none;
}
.ticked::before { top: -1px;    left: -1px;  border-width: 1px 0 0 1px; }
.ticked::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.rule-accent {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--space-m);
}
.on-deep .rule-accent { background: var(--accent-onDeep); }


/* 06 — MOTION LAYER ======================================================= */
/*
   RULE: content is fully visible with zero CSS animation support, with CSS
   disabled entirely, and with prefers-reduced-motion: reduce.
   Reveal styles are applied ONLY inside a double guard:
     @supports (animation-timeline: view())  +  prefers-reduced-motion: no-preference
   Browsers without scroll-driven animation support simply see static content.
*/

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    @keyframes rise {
      from { opacity: 0; transform: translate3d(0, 22px, 0); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes wipe {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
    @keyframes drawline {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
    @keyframes dash {
      from { stroke-dashoffset: var(--dash, 900); }
      to   { stroke-dashoffset: 0; }
    }
    @keyframes driftgrid {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(0, -48px, 0); }
    }

    /* FAIL-SAFE FILL MODE — this is the load-bearing decision in this file.
       `animation-fill-mode: none` means the element renders in its OWN styles
       (opacity 1, no transform) outside the active range. So content is visible
       before the range is reached, after it completes, if the range is never
       traversed at all (short page, zoomed-out viewport, print, screenshot
       tooling), and if the animation fails for any reason. `both` would pin
       un-entered elements at opacity 0 and silently blank whole sections. */

    .reveal {
      animation: rise 900ms var(--ease-out) none;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Staggered children — the editorial cascade */
    .reveal-group > * {
      animation: rise 900ms var(--ease-out) none;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .reveal-group > *:nth-child(2) { animation-range: entry 4%  entry 64%; }
    .reveal-group > *:nth-child(3) { animation-range: entry 8%  entry 68%; }
    .reveal-group > *:nth-child(4) { animation-range: entry 12% entry 72%; }
    .reveal-group > *:nth-child(5) { animation-range: entry 16% entry 76%; }
    .reveal-group > *:nth-child(6) { animation-range: entry 20% entry 80%; }

    .reveal-wipe {
      animation: wipe 1100ms var(--ease-out) none;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .eyebrow::after {
      transform-origin: left center;
      animation: drawline 1000ms var(--ease-out) none;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }

    /* Blueprint grid drifts slowly against the scroll. Decorative only. */
    .blueprint {
      animation: driftgrid linear none;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Inline SVG line-draw. Default stroke-dashoffset is 0, so outside the
       range the schematic is simply fully drawn. */
    .draw path, .draw line, .draw circle, .draw rect, .draw polyline {
      stroke-dasharray: var(--dash, 900);
      animation: dash 1600ms var(--ease-out) none;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    /* Page-to-page transition, where supported */
    @view-transition { navigation: auto; }
  }
}


/* 07 — HEADER ============================================================= */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .masthead { background: var(--paper); }
}

.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.wordmark svg { width: 20px; height: 20px; flex: none; }
.wordmark .sub {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-left: 0.6rem;
  border-left: 1px solid var(--rule-strong);
}

.masthead-nav { display: flex; align-items: center; gap: var(--space-m); }
/* :not(.btn) is required — a bare `.masthead-nav a` rule out-specifies .btn
   and would repaint the CTA label in body ink on a near-black fill. */
.masthead-nav a:not(.btn) {
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.masthead-nav a:not(.btn):hover { color: var(--accent); }

/* Compact CTA in the sticky bar so it never wraps to two lines on mobile */
.masthead-nav .btn {
  white-space: nowrap;
  padding: 0.6rem 0.9rem;
  min-height: 2.5rem;
  font-size: 0.8125rem;
}
@media (min-width: 640px) {
  .masthead-nav .btn { padding: 0.75rem 1.15rem; min-height: 2.75rem; font-size: var(--t-small); }
}
.masthead-links { display: none; gap: var(--space-m); }
@media (min-width: 860px) { .masthead-links { display: flex; } }


/* 08 — BUTTONS & LINKS ==================================================== */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.btn {
  --btn-bg: var(--deep);
  --btn-fg: var(--ink-onDeep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  min-height: 3rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease), transform 240ms var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform 300ms var(--ease-out); }
.btn:hover { --btn-bg: var(--accent); transform: translateY(-1px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  border-color: var(--accent);
}
.on-deep .btn--ghost { --btn-fg: var(--ink-onDeep); border-color: var(--rule-onDeep); }
.on-deep .btn--ghost:hover { --btn-fg: var(--accent-onDeep); border-color: var(--accent-onDeep); }

.on-deep .btn--solid { --btn-bg: var(--ink-onDeep); --btn-fg: var(--deep); }
.on-deep .btn--solid:hover { --btn-bg: var(--accent-onDeep); --btn-fg: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  .btn:hover { transform: none; }
}

/* Inline text link — hairline underline that sweeps on hover */
.link {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left 92%;
  transition: background-size 320ms var(--ease-out);
  padding-bottom: 1px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .link { transition: none; background-size: 100% 1px; }
}
.on-deep .link { color: var(--accent-onDeep); }

/* Prose links stay underlined by default for legibility in legal copy */
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-deep); }


/* 09 — HERO =============================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem) var(--space-3xl);
  border-bottom: 1px solid var(--rule);
}
.hero-in { position: relative; z-index: 1; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-l);
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  background: var(--paper-raised);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}

.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.042em;
  line-height: 1.02;
  max-width: 16ch;
  margin-bottom: var(--space-m);
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lede { max-width: 52ch; margin-bottom: var(--space-xl); }

.hero-figure {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}
.hero-svg { width: 100%; max-width: 640px; }
.hero-svg .stroke { stroke: var(--rule-strong); stroke-width: 1; }
.hero-svg .stroke-accent { stroke: var(--accent); stroke-width: 1.5; }
.hero-svg .fill-accent { fill: var(--accent); stroke: none; }
.hero-svg text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--ink-muted);
  stroke: none;
}

/* Price plate */
.plate {
  display: inline-block;
  padding: var(--space-m) var(--space-l);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.plate--deep { background: var(--deep-raised); border-color: var(--rule-onDeep); }


/* 10 — SECTIONS & COMPONENTS ============================================= */

/* Card — thin border, no shadow, no gradient */
.card {
  position: relative;
  padding: var(--space-l);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 280ms var(--ease), background-color 280ms var(--ease);
}
.card:hover { border-color: var(--rule-strong); }
.card h3 { margin-bottom: var(--space-2xs); }
.card p { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.6; }
.on-deep .card { background: var(--deep-raised); border-color: var(--rule-onDeep); }
.on-deep .card p { color: var(--ink-onDeepMuted); }

.card-num {
  display: block;
  margin-bottom: var(--space-s);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.card-icon { width: 30px; height: 30px; margin-bottom: var(--space-m); }
.card-icon * { stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* Numbered deliverable rows */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}
.row-idx {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 0.35rem;
}
.row-body p { color: var(--ink-soft); margin-top: var(--space-2xs); }

/* Definition list — timeline / specs */
.specs { margin: 0; border-top: 1px solid var(--rule); }
.specs div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
}
.specs dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.specs dd { margin: 0; color: var(--ink); }
.on-deep .specs, .on-deep .specs div { border-color: var(--rule-onDeep); }
.on-deep .specs dt { color: var(--ink-onDeepMuted); }
.on-deep .specs dd { color: var(--ink-onDeep); }

/* Checklists */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative;
  padding: var(--space-s) 0 var(--space-s) 2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.checks li:first-child { border-top: 1px solid var(--rule); }
.checks li strong { display: block; color: var(--ink); margin-bottom: 0.15rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.42rem;
  width: 11px; height: 11px;
  border: 1px solid var(--accent);
  border-radius: 1px;
}
.checks li::after {
  content: "";
  position: absolute;
  left: 3px; top: 1.62rem;
  width: 5px; height: 2.5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.on-deep .checks li { border-color: var(--rule-onDeep); color: var(--ink-onDeepMuted); }
.on-deep .checks li:first-child { border-top-color: var(--rule-onDeep); }
.on-deep .checks li strong { color: var(--ink-onDeep); }
.on-deep .checks li::before, .on-deep .checks li::after { border-color: var(--accent-onDeep); }

/* Exclusion list — the "not for you" markers */
.checks--x li::before { border-color: var(--ink-muted); }
.checks--x li::after {
  left: 2.5px; top: 1.62rem;
  width: 6px; height: 6px;
  border: 0;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--ink-muted) 44%, var(--ink-muted) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--ink-muted) 44%, var(--ink-muted) 56%, transparent 56%);
  transform: none;
}

/* Pull quote / statement block */
.statement {
  padding: var(--space-l) 0 var(--space-l) var(--space-l);
  border-left: 2px solid var(--accent);
  font-size: var(--t-lede);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: var(--measure-tight);
}
.on-deep .statement { border-left-color: var(--accent-onDeep); color: var(--ink-onDeep); }

/* Callout for the exact credit trigger language */
.legalese {
  margin-top: var(--space-m);
  padding: var(--space-m);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.legalese .label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.on-deep .legalese {
  background: var(--deep-raised);
  border-color: var(--rule-onDeep);
  border-left-color: var(--accent-onDeep);
  color: #D6D8DE;
}
.on-deep .legalese .label { color: var(--ink-onDeepMuted); }

/* Notice — used for the healthcare-deferred statement */
.notice {
  display: flex;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.notice svg * { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.notice p { max-width: none; }

/* Small qualifying line — used where a claim needs an immediate caveat
   (e.g. a number that takes messages but not calls). */
.micro { font-size: var(--t-micro); line-height: 1.55; color: var(--ink-muted); }
.on-deep .micro { color: #6E7583; }
.specs .micro { display: inline-block; margin-top: 0.25rem; }

/* Footnote line under a block — colour lives here, never in a style attribute,
   so that disabling CSS cannot leave pale text stranded on a white background. */
.footnote { margin-top: var(--space-m); color: var(--ink-muted); }
.on-deep .footnote { color: var(--ink-onDeepMuted); }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tbl caption { text-align: left; color: var(--ink-muted); font-size: var(--t-small); padding-bottom: var(--space-s); }
.tbl th, .tbl td { text-align: left; padding: var(--space-s) var(--space-s) var(--space-s) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
.tbl td:first-child { font-weight: 600; white-space: nowrap; padding-right: var(--space-m); }
.tbl tr.tbl-last td { border-bottom: 0; }
.on-deep .tbl caption { color: var(--ink-onDeepMuted); }
.on-deep .tbl th, .on-deep .tbl td { border-bottom-color: var(--rule-onDeep); color: #D6D8DE; }
.on-deep .tbl td:first-child { color: var(--ink-onDeep); }


/* 11 — FAQ =============================================================== */

.faq { border-top: 1px solid var(--rule); }

.qa {
  border-bottom: 1px solid var(--rule);
}
.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  list-style: none;
  cursor: pointer;
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--ink);
  transition: color 220ms var(--ease);
}
.qa summary:hover { color: var(--accent); }

.qa .chev {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 0.35rem;
  transition: transform 320ms var(--ease-out);
}
.qa .chev * { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.qa[open] .chev { transform: rotate(45deg); }

.qa-body {
  padding-bottom: var(--space-l);
  max-width: var(--measure);
  color: var(--ink-soft);
}
.qa-body p { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.7; }
.qa-body p + p { margin-top: var(--space-s); }

/* qaIn is applied ONLY to .qa[open] .qa-body — content the browser already
   hides while <details> is closed. `both` fill therefore never leaves visible
   content at opacity 0, and with CSS disabled the answer renders as plain text. */
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa-body { animation: qaIn 380ms var(--ease-out) both; }
  @keyframes qaIn {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to   { opacity: 1; transform: none; }
  }
}


/* 12 — FOOTER ============================================================ */

.colophon {
  background: var(--deep);
  color: var(--ink-onDeepMuted);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--t-small);
}
.colophon a { color: var(--ink-onDeepMuted); text-decoration: none; }
.colophon a:hover { color: var(--accent-onDeep); }

.colophon-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule-onDeep);
}

.colophon h2 {
  font-size: var(--t-micro);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E7583;
  margin-bottom: var(--space-s);
}

.colophon-nav { list-style: none; margin: 0; padding: 0; }
.colophon-nav li + li { margin-top: 0.55rem; }

.colophon address {
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-onDeepMuted);
}
.colophon address strong { color: var(--ink-onDeep); font-weight: 600; }

.colophon-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-onDeep);
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-bottom: var(--space-s);
}
.colophon-mark svg { width: 20px; height: 20px; }

.colophon-fine {
  padding-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  font-size: var(--t-micro);
  line-height: 1.7;
  color: #6E7583;
}
.colophon-fine p { max-width: 76ch; margin: 0; color: #6E7583; }


/* 13 — LEGAL / PROSE PAGES =============================================== */

.pagehead {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead-in { position: relative; z-index: 1; }
.pagehead h1 { max-width: 22ch; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-m);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.stamp {
  display: inline-block;
  margin-top: var(--space-m);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prose { padding-block: var(--space-2xl); }
.prose h2 {
  font-size: var(--t-h3);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--t-h4); margin-top: var(--space-l); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.2rem; margin: 0 0 var(--space-s); }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--accent); }
.prose dl { max-width: var(--measure); }
.prose dt { font-weight: 650; color: var(--ink); margin-top: var(--space-s); }
.prose dd { margin: 0.25rem 0 0; color: var(--ink-soft); }

/* Table of contents for long legal pages */
.toc {
  padding: var(--space-m) var(--space-l);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin-bottom: var(--space-xl);
}
.toc h2 {
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.toc ol { list-style: none; padding: 0; margin: 0; columns: 1; }
.toc li { margin-bottom: 0.4rem; }
.toc a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-small); }
.toc a:hover { color: var(--accent); }

/* Config placeholder marker — visible in source, subtle on page */
.cfg {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  background: var(--accent-wash);
  border: 1px dashed var(--accent);
  border-radius: 2px;
  color: var(--accent-deep);
}


/* 14 — RESPONSIVE ======================================================== */

@media (min-width: 640px) {
  .shell { padding-inline: var(--space-l); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 4rem 1fr; gap: var(--space-m); }
  .specs div { grid-template-columns: 12rem 1fr; gap: var(--space-m); }
  .colophon-top { grid-template-columns: repeat(2, 1fr); }
  .toc ol { columns: 2; column-gap: var(--space-l); }
}

@media (min-width: 960px) {
  .shell { padding-inline: var(--space-xl); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .row { grid-template-columns: 6rem 1fr; gap: var(--space-xl); }
  .colophon-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
  }
  .split--sticky > :first-child { position: sticky; top: 6.5rem; }
  .section-head--split { max-width: none; }
}


/* 15 — PRINT ============================================================= */

@media print {
  .masthead, .skip, .blueprint, .hero-figure, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; border-top: 1px solid #ccc; }
  .qa-body { display: block !important; }
  .colophon { background: #fff; color: #000; border-top: 1px solid #ccc; }
  .colophon a, .colophon address, .colophon-fine, .colophon-fine p { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ==========================================================================
   16 — DISPLAY LAYER
   A second, more cinematic treatment for the landing page only. Every rule
   here is additive: the legal pages keep the quiet system above untouched.
   Still zero JS, zero third-party requests, still fail-safe on motion.
   ========================================================================== */

:root {
  --void:       #0B0C0E;
  --void-2:     #101216;
  --void-3:     #171A1F;
  --onVoid:     #F4F3EF;
  --onVoid-mid: #9BA3B0;
  --onVoid-dim: #676E7B;
  --wire:       #23272E;
  --wire-lit:   #333842;
  /* Accent, pulled back from #FF6B35 — that read as consumer fintech rather than
     an engineering consultancy selling to managing partners.
     Two tokens, because one cannot satisfy both jobs on a near-black stage:
       --signal     large display text, fills, rules.  3.78:1 on --void (passes
                    the 3:1 large-text threshold, fails 4.5:1 for small text)
       --signal-sm  ANY text under 24px on the dark stage. 4.60:1 on --void.
     Verified by check_contrast() in audit.py, not by eye. */
  --signal:     #C2410C;
  --signal-sm:  #CE5518;
  --signal-dim: #9A3412;
}

/* Film grain — pure CSS, no image request. Sits above everything, ignores input. */
.grain::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  background-image:
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { .grain::after { display: none; } }

/* ---- Cinematic hero ---------------------------------------------------- */

.stage {
  position: relative;
  background: var(--void);
  color: var(--onVoid);
  overflow: hidden;
  padding-block: clamp(4rem, 2rem + 10vw, 9rem) clamp(3.5rem, 2rem + 7vw, 7rem);
  isolation: isolate;
}

/* Drafting grid + a slow radial "light" so the dark isn't flat */
.stage-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--wire) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wire) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(130% 100% at 15% 0%, #000 5%, transparent 68%);
          mask-image: radial-gradient(130% 100% at 15% 0%, #000 5%, transparent 68%);
}
.stage-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(90vw, 1100px); aspect-ratio: 1;
  top: -45%; left: 50%; translate: -50% 0;
  background: radial-gradient(circle, rgba(255,107,53,.10) 0%, transparent 62%);
}
.stage > .shell { position: relative; z-index: 1; }

/* Section index rail — the small technical marker down the left */
.rail {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--onVoid-dim); margin-bottom: var(--space-l);
}
.rail::before {
  content: ""; width: 34px; height: 1px; background: var(--signal);
}
.rail b { color: var(--signal-sm); font-weight: 500; }

/* Display headline */
.display {
  font-size: clamp(3rem, 1.2rem + 8.6vw, 8.25rem);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 600;
  margin: 0 0 var(--space-l);
  max-width: 15ch;
  text-wrap: balance;
}
.display .lit { color: var(--signal); }
.display .thin { font-weight: 300; letter-spacing: -.045em; }

.stage-lede {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.018em;
  color: var(--onVoid-mid);
  max-width: 46ch;
  margin: 0 0 var(--space-2xl);
}

/* Price as a typographic event, not a badge */
.figure {
  display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  padding-top: var(--space-l);
  border-top: 1px solid var(--wire-lit);
}
.figure-n {
  font-size: clamp(3.25rem, 1.8rem + 6vw, 6.5rem);
  font-weight: 600; letter-spacing: -.055em; line-height: .85;
  font-variant-numeric: tabular-nums;
  color: var(--onVoid);
}
.figure-meta { padding-top: .5rem; max-width: 30ch; }
.figure-meta dt {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal-sm); margin-bottom: .45rem;
}
.figure-meta dd { margin: 0; color: var(--onVoid-mid); font-size: var(--t-small); line-height: 1.6; }

/* Buttons on the stage */
.stage .btn { border-radius: 2px; }
.stage .btn--hero {
  --btn-bg: var(--signal); --btn-fg: #FFFFFF;
  border-color: var(--signal); font-weight: 650;
  padding: 1.05rem 1.7rem; min-height: 3.25rem;
}
.stage .btn--hero:hover { --btn-bg: #D4551F; border-color: #D4551F; }
.stage .btn--wire {
  --btn-bg: transparent; --btn-fg: var(--onVoid);
  border-color: var(--wire-lit); padding: 1.05rem 1.7rem; min-height: 3.25rem;
}
.stage .btn--wire:hover { --btn-fg: var(--signal-sm); border-color: var(--signal-sm); --btn-bg: transparent; }

/* ---- The schematic ----------------------------------------------------- */

.schematic { width: 100%; margin-top: clamp(2.5rem, 5vw, 5rem); }
.schematic svg { width: 100%; height: auto; overflow: visible; }
.schematic .w      { stroke: var(--wire-lit); stroke-width: 1; fill: none; }
.schematic .w-lit  { stroke: var(--signal); stroke-width: 1.5; fill: none; }
.schematic .f-lit  { fill: var(--signal); stroke: none; }
.schematic .f-pane { fill: var(--void-2); stroke: var(--wire-lit); stroke-width: 1; }
.schematic .t {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  fill: var(--onVoid-mid); stroke: none;
}
.schematic .t-lit { fill: var(--signal-sm); }
.schematic .t-dim { fill: var(--onVoid-dim); font-size: 8.5px; }

/* ---- Deliverable panels ------------------------------------------------ */

.panels { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px)  { .panels { grid-template-columns: 1fr 1fr; } }

.panel {
  position: relative;
  background: var(--paper-raised);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 15rem;
  display: flex; flex-direction: column;
  transition: background-color 400ms var(--ease);
}
.panel:hover { background: #fff; }
.panel-n {
  font-family: var(--mono); font-size: 2.6rem; font-weight: 300;
  line-height: 1; letter-spacing: -.04em;
  color: var(--rule-strong);
  margin-bottom: auto;
  transition: color 400ms var(--ease);
}
.panel:hover .panel-n { color: var(--accent); }
.panel h3 { margin: var(--space-l) 0 .5rem; font-size: 1.22rem; letter-spacing: -.022em; }
.panel p { font-size: .92rem; color: var(--ink-soft); line-height: 1.62; margin: 0; }
.panel::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--accent); transition: width 500ms var(--ease-out);
}
.panel:hover::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .panel, .panel-n, .panel::after { transition: none; }
}

/* ---- Timeline drawing -------------------------------------------------- */

.timeline { width: 100%; margin-top: var(--space-l); }
.timeline svg { width: 100%; height: auto; overflow: visible; }
.timeline .bar   { fill: var(--paper-sunk); stroke: var(--rule-strong); stroke-width: 1; }
.timeline .bar-a { fill: var(--accent); stroke: none; }
.timeline .ln    { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.timeline .tx    { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; fill: var(--ink-muted); }
.timeline .tx-b  { font-family: var(--font); font-size: 12.5px; font-weight: 600; fill: var(--ink); letter-spacing: -.01em; }

/* ---- Statement band ---------------------------------------------------- */

.band {
  background: var(--void); color: var(--onVoid);
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  position: relative; overflow: hidden;
}
.band-q {
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.9rem);
  line-height: 1.18; letter-spacing: -.03em; font-weight: 500;
  max-width: 22ch; margin: 0;
}
.band-q .lit { color: var(--signal-sm); }
.band cite {
  display: block; margin-top: var(--space-l);
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--onVoid-dim); font-style: normal;
}

/* ---- Motion for the display layer -------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes liftIn { from { opacity: 0; transform: translate3d(0,34px,0); } to { opacity: 1; transform: none; } }
    @keyframes lineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .lift { animation: liftIn 1s var(--ease-out) none; animation-timeline: view(); animation-range: entry 0% entry 62%; }
    .panels .panel { animation: liftIn 900ms var(--ease-out) none; animation-timeline: view(); animation-range: entry 0% entry 66%; }
    .panels .panel:nth-child(2) { animation-range: entry 6% entry 72%; }
    .panels .panel:nth-child(3) { animation-range: entry 12% entry 78%; }
    .panels .panel:nth-child(4) { animation-range: entry 18% entry 84%; }
    .figure { animation: liftIn 1.1s var(--ease-out) none; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .stage-grid { animation: driftgrid linear none; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* Hero entrance — TRANSFORM ONLY, deliberately no opacity.
   An earlier version faded from opacity 0, which meant the H1, the lede and the
   CTAs were genuinely invisible for the length of their animation delay. On a page
   whose entire premise is that nothing is hidden, putting the headline behind an
   animation is the wrong trade at any duration. Moving without fading keeps the
   entrance cinematic while guaranteeing the words are legible from the first
   painted frame, whatever happens to the animation. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes heroIn { from { transform: translate3d(0,26px,0); } to { transform: none; } }
  .display, .stage-lede, .rail, .stage .actions {
    animation: heroIn 1100ms var(--ease-out) backwards;
  }
  .rail          { animation-delay: 60ms; }
  .display       { animation-delay: 140ms; }
  .stage-lede    { animation-delay: 300ms; }
  .stage .actions{ animation-delay: 420ms; }
}

/* Masthead reads as part of the stage, not a light bar pasted on top of it.
   A pale sticky bar over a near-black hero produced a hard horizontal seam
   across the most important pixels on the page. */
.masthead {
  background: var(--void);
  border-bottom: 1px solid var(--wire);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .masthead { background: color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter: blur(14px); }
}
.wordmark { color: var(--onVoid); }
.wordmark .sub { color: var(--onVoid-dim); border-left-color: var(--wire-lit); }
.masthead-nav a:not(.btn) { color: var(--onVoid-mid); }
.masthead-nav a:not(.btn):hover { color: var(--signal-sm); }
.masthead-nav .btn {
  --btn-bg: var(--signal); --btn-fg: #FFFFFF;
  border-color: var(--signal); font-weight: 650;
}
.masthead-nav .btn:hover { --btn-bg: #D4551F; border-color: #D4551F; }
.masthead :where(a, button):focus-visible { outline-color: var(--signal); }

/* The stage sits directly beneath it, so no border is needed between them. */
.stage { border-top: 0; }