/* =============================================================================
   PRISM marketing site: "Refraction"
   File: web/styles.css

   THIS FILE LOADS NOTHING FROM ANYWHERE.
   No @import, no web font, no external image. The grain is an inline SVG data
   URI, the glow is a gradient, the spectrum is six hex values. The page argues
   that nothing leaves your machine, so the page itself reaches for nothing.
   Every visual effect here is hand made for that reason, and it is why the
   design cannot be lifted wholesale from a template.

   THE IDEA. A prism takes one white beam and reveals the colours that were
   always inside it, without consuming the light. That is the product: your data
   goes in, its structure comes out, and the data itself is never taken. So the
   accent system is not a brand colour, it is a SPECTRUM, used in wavelength
   order wherever something is being separated into parts.

   THE TRUST BOUNDARY is drawn, not described. A luminous line runs through the
   architecture section and nothing ever crosses it. Look for --boundary.

   HOUSE RULES: no em dash character anywhere. Contrast is checked, not guessed.
   Every motion respects prefers-reduced-motion.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS
   Dark first, because the product is an instrument and instruments read better
   on dark. Light is a full design, not an inversion.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Ground. Near black with a blue violet undertone so the spectrum sits on
     something that feels like deep glass rather than flat ink. */
  --canvas:          #05060d;
  --canvas-2:        #090b16;
  --surface:         #0d1020;
  --surface-2:       #12162a;
  --sunken:          #070910;

  --text:            #f2f4fb;
  --text-2:          #b9c0d8;
  --text-3:          #8c95b4;
  --on-accent:       #05060d;

  --border:          #232842;
  --border-strong:   #39405f;
  --hairline:        #1a1e33;

  /* The spectrum, in wavelength order. Used as a SEQUENCE, never at random. */
  --sp-1:            #a78bfa;   /* violet  */
  --sp-2:            #60a5fa;   /* blue    */
  --sp-3:            #22d3ee;   /* cyan    */
  --sp-4:            #34d399;   /* green   */
  --sp-5:            #fbbf24;   /* amber   */
  --sp-6:            #fb7185;   /* rose    */

  --accent:          var(--sp-3);
  --accent-solid:    #22d3ee;
  --accent-hover:    #67e8f9;
  --accent-active:   #0891b2;
  --accent-tint:     rgba(34, 211, 238, 0.12);
  --accent-edge:     rgba(34, 211, 238, 0.42);

  --focus-inner:     #05060d;
  --focus-outer:     #67e8f9;

  --ok-tint:         rgba(52, 211, 153, 0.12);
  --ok-text:         #6ee7b7;
  --ok-edge:         rgba(52, 211, 153, 0.45);

  --warn-tint:       rgba(251, 191, 36, 0.12);
  --warn-text:       #fcd34d;
  --warn-edge:       rgba(251, 191, 36, 0.45);

  --bad-tint:        rgba(251, 113, 133, 0.12);
  --bad-text:        #fda4af;
  --bad-edge:        rgba(251, 113, 133, 0.45);

  --info-tint:       rgba(96, 165, 250, 0.12);
  --info-text:       #93c5fd;
  --info-edge:       rgba(96, 165, 250, 0.45);

  /* The luminous line that data never crosses. */
  --boundary:        linear-gradient(180deg,
                       transparent,
                       var(--sp-3) 12%,
                       var(--sp-4) 50%,
                       var(--sp-3) 88%,
                       transparent);

  --beam:            linear-gradient(90deg,
                       var(--sp-1), var(--sp-2), var(--sp-3),
                       var(--sp-4), var(--sp-5), var(--sp-6));

  /* Type. System stack only, shaped hard enough to feel bespoke. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.44vw, 1.55rem);
  --step-2:  clamp(1.52rem, 1.34rem + 0.90vw, 2.20rem);
  --step-3:  clamp(1.90rem, 1.55rem + 1.75vw, 3.20rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.40vw, 4.80rem);
  --step-5:  clamp(2.90rem, 1.55rem + 6.60vw, 7.20rem);

  --shell:  min(100% - 2.5rem, 76rem);
  --radius: 14px;
  --radius-lg: 22px;

  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 28px 60px -28px rgba(0,0,0,.85);
  --glow:     0 0 0 1px var(--accent-edge), 0 0 40px -8px rgba(34,211,238,.45);
}

/* Light mode. Daylight through glass: paper white ground, the same spectrum
   darkened until each hue clears 4.5:1 on white. Not an inversion. */
:root[data-theme="light"] {
  color-scheme: light;

  --canvas:          #fbfbfd;
  --canvas-2:        #f4f5fa;
  --surface:         #ffffff;
  --surface-2:       #f7f8fc;
  --sunken:          #eef0f7;

  --text:            #0a0c16;
  --text-2:          #3c4560;
  --text-3:          #5a6382;
  --on-accent:       #ffffff;

  --border:          #d4d8e6;
  --border-strong:   #a9b0c6;
  --hairline:        #e6e9f2;

  --sp-1:            #6d28d9;
  --sp-2:            #1d4ed8;
  --sp-3:            #0e7490;
  --sp-4:            #047857;
  --sp-5:            #a16207;
  --sp-6:            #be123c;

  --accent-solid:    #0e7490;
  --accent-hover:    #155e75;
  --accent-active:   #164e63;
  --accent-tint:     rgba(14, 116, 144, 0.10);
  --accent-edge:     rgba(14, 116, 144, 0.35);

  --focus-inner:     #ffffff;
  --focus-outer:     #0a0c16;

  --ok-tint:  rgba(4,120,87,.10);   --ok-text:  #065f46; --ok-edge:  rgba(4,120,87,.40);
  --warn-tint:rgba(161,98,7,.10);   --warn-text:#854d0e; --warn-edge:rgba(161,98,7,.40);
  --bad-tint: rgba(190,18,60,.10);  --bad-text: #9f1239; --bad-edge: rgba(190,18,60,.40);
  --info-tint:rgba(29,78,216,.10);  --info-text:#1e40af; --info-edge:rgba(29,78,216,.40);

  --shadow-1: 0 1px 2px rgba(16,20,40,.06), 0 8px 24px -14px rgba(16,20,40,.18);
  --shadow-2: 0 2px 6px rgba(16,20,40,.08), 0 28px 60px -30px rgba(16,20,40,.28);
  --glow:     0 0 0 1px var(--accent-edge), 0 0 40px -14px rgba(14,116,144,.4);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --canvas: #fbfbfd; --canvas-2: #f4f5fa; --surface: #ffffff;
    --surface-2: #f7f8fc; --sunken: #eef0f7;
    --text: #0a0c16; --text-2: #3c4560; --text-3: #5a6382; --on-accent: #ffffff;
    --border: #d4d8e6; --border-strong: #a9b0c6; --hairline: #e6e9f2;
    --sp-1:#6d28d9; --sp-2:#1d4ed8; --sp-3:#0e7490;
    --sp-4:#047857; --sp-5:#a16207; --sp-6:#be123c;
    --accent-solid:#0e7490; --accent-hover:#155e75; --accent-active:#164e63;
    --accent-tint: rgba(14,116,144,.10); --accent-edge: rgba(14,116,144,.35);
    --focus-inner:#ffffff; --focus-outer:#0a0c16;
    --ok-tint:rgba(4,120,87,.10);  --ok-text:#065f46;  --ok-edge:rgba(4,120,87,.40);
    --warn-tint:rgba(161,98,7,.10);--warn-text:#854d0e;--warn-edge:rgba(161,98,7,.40);
    --bad-tint:rgba(190,18,60,.10);--bad-text:#9f1239; --bad-edge:rgba(190,18,60,.40);
    --info-tint:rgba(29,78,216,.10);--info-text:#1e40af;--info-edge:rgba(29,78,216,.40);
    --shadow-1: 0 1px 2px rgba(16,20,40,.06), 0 8px 24px -14px rgba(16,20,40,.18);
    --shadow-2: 0 2px 6px rgba(16,20,40,.08), 0 28px 60px -30px rgba(16,20,40,.28);
    --glow: 0 0 0 1px var(--accent-edge), 0 0 40px -14px rgba(14,116,144,.4);
  }
}

/* -----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  letter-spacing: -0.011em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient light. Two soft spectrum washes anchored to the top of the page, so
   the ground reads as deep glass with something behind it rather than flat. */
body::before {
  content: "";
  position: fixed;
  inset: -30vh -10vw auto;
  height: 110vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46vw 40vh at 18% 8%,  rgba(167,139,250,.16), transparent 65%),
    radial-gradient(42vw 38vh at 82% 2%,  rgba(34,211,238,.14),  transparent 62%),
    radial-gradient(60vw 32vh at 50% 30%, rgba(52,211,153,.07),  transparent 70%);
  filter: blur(6px);
}

/* Film grain. An inline SVG turbulence, so it costs one data URI and no request.
   It is what stops large flat areas from banding on wide gamut displays. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Grain is tuned per ground: heavy enough to kill banding on the dark canvas,
   much lighter on paper where it would otherwise read as dirt. */
:root[data-theme="light"] body::after { opacity: .16; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::after { opacity: .16; }
}

main, header, footer { position: relative; z-index: 2; }

img, svg, canvas { max-width: 100%; display: block; }

a { color: var(--accent-solid); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--sp-3); color: var(--on-accent); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .75rem; top: -100%;
  z-index: 99; padding: .7rem 1.1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px;
  font-weight: 650; box-shadow: var(--shadow-2);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: .75rem; }

.shell { width: var(--shell); margin-inline: auto; }

/* -----------------------------------------------------------------------------
   3. TYPE
   Big, tight, editorial. The size jump between a heading and its body is the
   single thing that separates a designed page from a documented one.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 660;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); letter-spacing: -0.045em; font-weight: 700; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.028em; }
h4 { font-size: var(--step-1); letter-spacing: -0.02em; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 2px; border-radius: 2px;
  background: var(--beam); flex: none;
}

.lede {
  font-size: var(--step-2);
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--text);
  font-weight: 480;
  max-width: 30ch;
}

.section__lede { font-size: var(--step-1); color: var(--text-2); max-width: 62ch; line-height: 1.5; }

code, .code, .kbd, .tnum { font-family: var(--mono); font-variant-numeric: tabular-nums; }

code, .code {
  font-size: .88em;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  padding: .12em .42em;
  border-radius: 6px;
  color: var(--text);
}

.kbd {
  font-size: .82em; padding: .18em .5em; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-bottom-width: 2px; color: var(--text-2);
}

pre {
  margin: 0; padding: 1.15rem 1.25rem;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.7;
}
pre code { background: none; border: 0; padding: 0; }

.note { font-size: var(--step--1); color: var(--text-3); }

/* -----------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  background: color-mix(in oklab, var(--canvas) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--hairline);
  background: color-mix(in oklab, var(--canvas) 92%, transparent);
}

.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.6rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--text); text-decoration: none; font-weight: 680;
  letter-spacing: -0.03em; font-size: 1.06rem;
  margin-right: auto;
}
.wordmark__mark {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--sp-3);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.wordmark:hover .wordmark__mark {
  transform: rotate(-12deg) scale(1.06);
  box-shadow: var(--glow);
}
.wordmark__text { background: var(--beam); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark--footer { font-size: 1rem; }

.site-nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: .5rem .8rem; border-radius: 9px;
  color: var(--text-2); text-decoration: none;
  font-size: var(--step--1); font-weight: 560; letter-spacing: -0.005em;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }

.site-header__actions { display: flex; align-items: center; gap: .7rem; }

@media (max-width: 860px) { .site-nav { display: none; } }

/* -----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-edge: var(--border-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.35rem;
  font: inherit; font-size: var(--step--1); font-weight: 620; letter-spacing: -0.005em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-edge); border-radius: 11px;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--accent-solid);
  --btn-fg: var(--on-accent);
  --btn-edge: transparent;
  font-weight: 680;
}
/* The primary action carries the spectrum on its underside, as if the button
   itself were refracting. Pure decoration, but it is the one element every
   visitor looks at. */
.btn--primary::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: var(--beam); border-radius: 2px; opacity: 0;
  transition: opacity .3s var(--ease), left .3s var(--ease), right .3s var(--ease);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:hover::after { opacity: 1; left: 4%; right: 4%; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-edge: var(--border); }
.btn--ghost:hover { --btn-edge: var(--border-strong); background: var(--surface-2); }

.btn--sm { padding: .55rem 1rem; font-size: .82rem; border-radius: 9px; }
.btn--lg { padding: 1rem 1.8rem; font-size: var(--step-0); border-radius: 13px; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.cta-row--center { justify-content: center; }

.copy-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem; font: inherit; font-size: .78rem; font-weight: 600;
  font-family: var(--mono);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.copy-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5.5rem);
  position: relative;
  isolation: isolate;
}

/* The live prism sits behind the hero content, never in front of it. Pointer
   events stay off so it can never eat a click on the headline or the buttons. */
.hero__prism {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
}
@media (prefers-reduced-motion: reduce) { .hero__prism { display: none; } }

.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

/* The headline is the page. Everything else is support. */
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 em {
  font-style: normal;
  background: var(--beam);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__body { color: var(--text-2); max-width: 48ch; font-size: var(--step-0); }

.hero__facts {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  font-family: var(--mono); font-size: var(--step--1); color: var(--text-3);
}
.hero__facts li { display: flex; align-items: center; gap: .5rem; }
.hero__facts li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sp-4); box-shadow: 0 0 10px var(--sp-4); flex: none;
}

/* -----------------------------------------------------------------------------
   7. THE MONITOR
   The live request counter. Strongest element on the page, so it is built like
   an instrument: heavy frame, tabular figures, a pulse that proves it is live.
   -------------------------------------------------------------------------- */

.monitor {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
/* Spectrum hairline across the top edge of the instrument. */
.monitor::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--beam); opacity: .85;
}

.monitor__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem .9rem;
  border-bottom: 1px solid var(--hairline);
}
.monitor__title {
  display: flex; align-items: center; gap: .6rem;
  margin: 0; font-size: var(--step--1); font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
.monitor__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sp-4); box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: pulse-ring 2.4s var(--ease-in-out) infinite;
  flex: none;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.monitor__src { margin: 0; font-family: var(--mono); font-size: .72rem; color: var(--text-3); letter-spacing: .06em; }

.monitor__body { padding: 1.6rem 1.3rem; text-align: center; }
.monitor__stat { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin: 0; }
.monitor__count {
  font-family: var(--mono);
  font-size: clamp(4rem, 12vw, 7.5rem);
  font-weight: 700; line-height: .86; letter-spacing: -0.06em;
  background: linear-gradient(180deg, var(--text), var(--sp-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.monitor__unit { font-family: var(--mono); font-size: var(--step--1); color: var(--text-3); letter-spacing: .14em; text-transform: uppercase; }
.monitor__subhead { margin: .9rem 0 0; font-size: var(--step--1); color: var(--text-2); }
.monitor__foot {
  padding: .85rem 1.3rem; border-top: 1px solid var(--hairline);
  background: var(--sunken); font-size: .78rem; color: var(--text-3);
  font-family: var(--mono);
}
.monitor__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; text-align: left; }
.monitor__empty, .monitor__idle { color: var(--text-3); font-family: var(--mono); font-size: var(--step--1); }
.monitor__nojs { color: var(--warn-text); font-size: var(--step--1); }

/* -----------------------------------------------------------------------------
   8. SECTIONS
   -------------------------------------------------------------------------- */

.section { padding: clamp(4rem, 11vh, 8rem) 0; position: relative; }
.section + .section { border-top: 1px solid var(--hairline); }

.section__index {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .2em;
  color: var(--text-3); display: block; margin-bottom: .8rem;
}
.section__title { margin-bottom: 1rem; }

.section--verify { background: linear-gradient(180deg, transparent, var(--canvas-2) 45%, transparent); }
.section--limits { background: var(--canvas-2); }

/* -----------------------------------------------------------------------------
   9. ARCHITECTURE, and the boundary that data never crosses.
   This is the conceptual centre of the page. The line is real: it is drawn,
   it glows, and every element is positioned on one side of it.
   -------------------------------------------------------------------------- */

.arch { display: grid; gap: 2rem; margin-top: 3rem; }

.arch__frame {
  position: relative;
  border: 1px solid var(--accent-edge);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--accent-tint), transparent 55%),
    var(--surface);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-1);
}
.arch__frame-label {
  position: absolute; top: -.75rem; left: 1.6rem;
  background: var(--canvas); padding: 0 .7rem;
}
.arch__frame-label-text {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sp-3); font-weight: 620;
}

.arch__steps { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.arch__step {
  position: relative;
  padding: 1.3rem 1.3rem 1.3rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.arch__step::before {
  content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem;
  width: 3px; border-radius: 3px; background: var(--sp-3); opacity: .8;
}
.arch__step:nth-child(1)::before { background: var(--sp-1); }
.arch__step:nth-child(2)::before { background: var(--sp-2); }
.arch__step:nth-child(3)::before { background: var(--sp-3); }
.arch__step:nth-child(4)::before { background: var(--sp-4); }
.arch__step:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.arch__step-num { font-family: var(--mono); font-size: .74rem; color: var(--text-3); letter-spacing: .16em; }
.arch__step-title { margin: .35rem 0 .45rem; font-size: var(--step-1); }
.arch__step-body { color: var(--text-2); font-size: var(--step--1); margin: 0; }
.arch__step-tech { display: block; margin-top: .7rem; font-family: var(--mono); font-size: .74rem; color: var(--sp-3); }

/* The boundary. */
.arch__boundary {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 0;
}
.arch__boundary::before {
  content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: var(--boundary);
  box-shadow: 0 0 22px rgba(34,211,238,.55);
  transform: rotate(180deg);
}
.arch__boundary-key {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sp-3); white-space: nowrap;
}
.arch__boundary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.arch__egress {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.4rem;
  border: 1px dashed var(--bad-edge); border-radius: var(--radius);
  background: var(--bad-tint); color: var(--bad-text);
  font-size: var(--step--1);
}
.arch__egress-arrow { font-family: var(--mono); font-size: 1.3rem; opacity: .75; }

/* -----------------------------------------------------------------------------
   10. CARDS, LISTS, CALLOUTS
   -------------------------------------------------------------------------- */

.cols { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.5rem; }

.col {
  position: relative; overflow: hidden;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.col::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--beam); opacity: 0; transition: opacity .35s var(--ease);
}
.col:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.col:hover::before { opacity: 1; }

.col__mark { font-size: 1.5rem; line-height: 1; margin-bottom: .8rem; display: block; }
.col__title { font-size: var(--step-1); margin-bottom: .5rem; }
.col__title--yes { color: var(--ok-text); }
.col__title--no  { color: var(--bad-text); }
.col__foot { margin-top: 1rem; font-size: var(--step--1); color: var(--text-3); }

.list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.list li { position: relative; padding-left: 1.7rem; color: var(--text-2); font-size: var(--step--1); }
.list li::before {
  position: absolute; left: 0; top: .05em;
  font-family: var(--mono); font-weight: 700;
}
.list--yes li::before { content: "+"; color: var(--ok-text); }
.list--no  li::before { content: "-"; color: var(--bad-text); }

.factlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.callout {
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--accent-solid);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-2);
}
.callout--soft  { border-left-color: var(--sp-2); }
.callout--limit { border-left-color: var(--sp-5); background: var(--warn-tint); color: var(--text); }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent-tint); color: var(--accent-solid);
  border: 1px solid var(--accent-edge);
}

.check { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 0; border-bottom: 1px solid var(--hairline); }
.checks { margin-top: 2rem; }
.check__num {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--sp-3);
}
.check__body { flex: 1; min-width: 0; }
.check__live { font-family: var(--mono); font-size: var(--step--1); color: var(--sp-4); }

/* -----------------------------------------------------------------------------
   11. LIMITS
   The honesty section. Styled with the same care as the sales copy, because on
   this page it IS the sales copy.
   -------------------------------------------------------------------------- */

.limits { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem; }

.limit {
  padding: 1.5rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color .3s var(--ease);
}
.limit:hover { border-color: var(--border-strong); }
.limit h3 { font-size: var(--step-1); margin: .7rem 0 .6rem; }
.limit p { color: var(--text-2); font-size: var(--step--1); }

.limit__tag {
  display: inline-block; padding: .25rem .65rem; border-radius: 999px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 640; border: 1px solid;
}
.limit__tag--open       { background: var(--bad-tint);  color: var(--bad-text);  border-color: var(--bad-edge); }
.limit__tag--closed     { background: var(--ok-tint);   color: var(--ok-text);   border-color: var(--ok-edge); }
.limit__tag--unverified { background: var(--warn-tint); color: var(--warn-text); border-color: var(--warn-edge); }
.limit__tag--unmeasured { background: var(--warn-tint); color: var(--warn-text); border-color: var(--warn-edge); }
.limit__tag--design     { background: var(--info-tint); color: var(--info-text); border-color: var(--info-edge); }
.limit__tag--plain      { background: var(--sunken);    color: var(--text-3);    border-color: var(--border); }

/* -----------------------------------------------------------------------------
   12. DEMO, READOUT, DROPZONE
   -------------------------------------------------------------------------- */

.demo { padding: clamp(3rem, 8vh, 6rem) 0; }
.demo__intro { max-width: 60ch; color: var(--text-2); }
.demo__panel {
  margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}

.dropzone {
  position: relative; display: grid; place-items: center; gap: .7rem;
  padding: clamp(2.2rem, 6vw, 3.8rem);
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--sunken); text-align: center;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.dropzone:hover, .dropzone[data-over="true"] {
  border-color: var(--accent-solid); background: var(--accent-tint); transform: scale(1.006);
}
.dropzone__icon { font-size: 2rem; opacity: .75; }
.dropzone__label { font-weight: 640; font-size: var(--step-1); letter-spacing: -0.02em; }
.dropzone__hint { font-size: var(--step--1); color: var(--text-3); }
.dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.readout { margin-top: 1.6rem; }
.readout__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.readout__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.readout__sample { font-family: var(--mono); font-size: var(--step--1); color: var(--text-3); }
.readout__verdict {
  margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  background: var(--ok-tint); color: var(--ok-text); border: 1px solid var(--ok-edge);
  font-family: var(--mono); font-size: var(--step--1);
}

/* -----------------------------------------------------------------------------
   13. MAKER, FINALE, FOOTER
   -------------------------------------------------------------------------- */

.maker { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .maker { grid-template-columns: 1fr; } }
.maker__lead { font-size: var(--step-1); color: var(--text); line-height: 1.45; }
.maker__body { color: var(--text-2); }
.maker__aside { padding: 1.4rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-lg); font-size: var(--step--1); color: var(--text-2); }
.maker__disclaimer { font-size: .78rem; color: var(--text-3); margin-top: 1rem; }

.finale { text-align: center; padding-block: clamp(4rem, 12vh, 8rem); }
.finale__lede { font-size: var(--step-2); max-width: 34ch; margin-inline: auto; color: var(--text); letter-spacing: -0.025em; line-height: 1.3; }
.finale__note { margin-top: 1.6rem; color: var(--text-3); font-size: var(--step--1); }

.site-footer { border-top: 1px solid var(--hairline); background: var(--canvas-2); padding: 3rem 0 2.5rem; }
.site-footer__inner { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer__brand { display: grid; gap: .6rem; }
.site-footer__tag { color: var(--text-3); font-size: var(--step--1); max-width: 40ch; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__nav a { color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
.site-footer__nav a:hover { color: var(--text); }
.site-footer__meta { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: .78rem; }
.site-footer__legal { margin: 0; }

/* -----------------------------------------------------------------------------
   14. THEME CONTROL
   -------------------------------------------------------------------------- */

.theme-slot { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.theme-slot button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: .35rem .6rem; border-radius: 7px; color: var(--text-3);
  font: inherit; font-size: .76rem; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.theme-slot button:hover { color: var(--text); }
.theme-slot button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* -----------------------------------------------------------------------------
   15. SCROLL REVEAL
   Progressive enhancement. Without JS the attribute is never set and everything
   is simply visible, which is the correct fallback.
   -------------------------------------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal][data-shown="true"] {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* -----------------------------------------------------------------------------
   16. MOTION AND PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .col:hover, .arch__step:hover { transform: none; }
}

@media print {
  body::before, body::after, .site-header, .theme-slot, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 1rem 0; break-inside: avoid; }
}