/*
 * vyuuh.com — the site's whole stylesheet.
 *
 * ONE FILE, NO BUILD. This page changes rarely and must never be down, so there is no bundler, no
 * framework and no hydration step between the writing and the reader. It is also what makes the
 * Lighthouse bar easy rather than a fight.
 *
 * THE PALETTE IS NOT CHOSEN, IT IS SAMPLED. Every colour below comes from Brand/BRAND_SWATCHES.md, which
 * read the values out of the mark itself rather than picking them. The gold family is the Event point; the
 * blue and violet are the rays. Taking a colour from a screenshot instead would carry whatever colour
 * management the capture applied, and the drift compounds.
 */

:root {
  /* ── THE SAMPLED PALETTE. These are measurements, and they do not change between themes. ───────── */

  /* The rays */
  --ray-core: #EEF5FD;
  --ray-blue: #0D52FA;
  --ray-violet: #C70FFA;

  /* The gold — the Event point */
  --gold-core: #FCFBE1;
  --gold-rim: #FCE987;
  --gold: #F6AF29;
  --gold-deep: #803701;

  /*
   * ── THE ROLE TOKENS. Which sampled value plays which part, and this half DOES change by theme. ──
   *
   * Every value here was measured against its own background with the WCAG formula and is at or above
   * 4.5:1. Two of them are the reason this layer exists at all:
   *
   *   The brand gold #F6AF29 is 10.63:1 on the dark ground and 1.82:1 on paper. It cannot be text on a
   *   light theme, and no amount of taste makes it readable. The swatch table already held the answer:
   *   --gold-deep #803701 is the same sampled family at 8.16:1. So gold splits in two. --gold-text is
   *   for type, --gold stays for FILLS, where contrast is measured on what sits on top of it rather
   *   than on the fill itself.
   *
   *   Links were --gold-rim, which is 16.45:1 dark and unreadable on paper. On light they become the
   *   sampled ray blue, darkened to #0B3FBF for 8.12:1.
   */
  --bg: #05070C;
  --bg-2: #0B0E15;
  --bg-3: #121722;
  --line: rgba(238, 245, 253, 0.12);
  --hover: rgba(238, 245, 253, 0.07);
  --text: #EEF5FD;      /* 18.34:1 */
  --lead: #C7D0DE;      /* 12.96:1 */
  --muted: #98A2B3;     /*  7.82:1 on --bg · 6.96:1 on --bg-3 */
  --link: #FCE987;      /* 16.45:1 */
  --gold-text: #F6AF29; /* 10.63:1 */
  --ok: #6FD39B;        /* 11.00:1 */
  --err: #FF9C8A;       /*  9.95:1 */
  --on-gold: #2A1500;   /*  9.19:1 on the gold fill, both themes */
  --glow: 0.18;         /* the hero's ray wash, dialled per theme */
  --head-bg: rgba(5, 7, 12, 0.82);

  /* The emblem is 69% near-white artwork on transparency, measured off the PNG. On paper it disappears,
     so on the light theme it sits on a dark chip. Nothing is re-drawn. */
  --chip: transparent;
  --chip-pad: 0px;

  --measure: 66ch;
  --pad: clamp(20px, 5vw, 56px);
  --radius: 14px;
}

/* The light theme. Same two blocks twice: once for the reader whose system says light, once for the reader
   who pressed the toggle. The media query is fenced off from an explicit `dark` so the toggle wins in both
   directions, which is the whole point of having one. */
:root[data-theme="light"],
:root:not([data-theme="dark"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FBFAF7;
    --bg-2: #F3F1EC;
    --bg-3: #EDEAE3;
    --line: rgba(16, 20, 28, 0.14);
    --hover: rgba(16, 20, 28, 0.06);
    --text: #10141C;      /* 17.67:1 */
    --lead: #33405A;      /*  9.95:1 */
    --muted: #4A5468;     /*  7.29:1 on --bg · 6.74:1 on --bg-3 */
    --link: #0B3FBF;      /*  8.12:1 */
    --gold-text: #803701; /*  8.16:1 */
    --ok: #18754A;        /*  5.46:1 */
    --err: #A3281A;       /*  7.00:1 */
    --glow: 0.07;
    --head-bg: rgba(251, 250, 247, 0.86);
    --chip: #05070C;
    --chip-pad: 5px;
  }
}

:root[data-theme="light"] {
  --bg: #FBFAF7;
  --bg-2: #F3F1EC;
  --bg-3: #EDEAE3;
  --line: rgba(16, 20, 28, 0.14);
  --hover: rgba(16, 20, 28, 0.06);
  --text: #10141C;
  --lead: #33405A;
  --muted: #4A5468;
  --link: #0B3FBF;
  --gold-text: #803701;
  --ok: #18754A;
  --err: #A3281A;
  --glow: 0.07;
  --head-bg: rgba(251, 250, 247, 0.86);
  --chip: #05070C;
  --chip-pad: 5px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* A skip link that is genuinely reachable, not hidden from everyone including keyboards. */
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--on-gold);
  padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; z-index: 100;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: var(--pad); }
.narrow { max-width: var(--measure); }

/* ── header ─────────────────────────────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--head-bg);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.nav a {
  color: var(--muted); font-size: 14.5px; padding: 7px 10px; border-radius: 8px;
}
.nav a:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--hover); }

@media (max-width: 720px) {
  .head-row { flex-wrap: wrap; padding-block: 10px; }
  .nav { margin-left: 0; width: 100%; gap: 2px; }
  .nav a { padding: 6px 8px; font-size: 13.5px; }
}

/* ── type ───────────────────────────────────────────────────────────────────────────────────────── */

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 0.5em; font-weight: 640; }
h1 { font-size: clamp(34px, 6.2vw, 62px); }
h2 { font-size: clamp(25px, 3.6vw, 36px); margin-top: 0; }
h3 { font-size: clamp(18px, 2.2vw, 21px); }
p { margin: 0 0 1.05em; max-width: var(--measure); }
.lead { font-size: clamp(18px, 2.3vw, 22px); color: var(--lead); }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 640;
  color: var(--gold-text); margin: 0 0 14px;
}
.fine { color: var(--muted); font-size: 14px; }

section { padding-block: clamp(46px, 7vw, 92px); }
section + section { border-top: 1px solid var(--line); }

/* ── hero ───────────────────────────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(56px, 10vw, 128px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 70%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(13, 82, 250, var(--glow)), transparent 70%),
              radial-gradient(40% 50% at 70% 30%, rgba(199, 15, 250, calc(var(--glow) * 0.72)), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero .mark { width: 76px; height: 76px; margin-bottom: 22px; }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15.5px;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-rim); text-decoration: none; }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--hover); text-decoration: none; }

/* ── cards / grids ──────────────────────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

/* ── proof marks ────────────────────────────────────────────────────────────────────────────────── */

.marks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.mark-card { border-left: 3px solid var(--line); padding: 4px 0 4px 16px; }
.mark-card h3 { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }

/*
 * FORMED · SEALED · PROVEN — taken off the app, not invented for the page.
 *
 * The green and blue that were here are gone. They were chosen rather than sampled, and worse, they said the
 * three states differ by HUE. In the product they do not. `EventSealGlyph` draws one shape three ways and the
 * difference is the FINISH:
 *
 *   FORMED   a white stroke, nothing filled            → a ring, no fill
 *   SEALED   flat gold, partly filled, never metallic  → the flat brand gold #F6AF29
 *   PROVEN   the settled Proof icon with the metal ramp → the gold ramp, rim → body → deep
 *
 * The finish rule in `LivingEventSeal` is the reason: nothing transient may render metallic, so only PROVEN,
 * which is earned and stable, gets the metal. A page that coloured these three differently would be claiming
 * a distinction the substrate does not make, and hiding the one it does.
 *
 * Every value is from Brand/BRAND_SWATCHES.md. There is no amber anywhere.
 */
/* A grid, not a flex row. Flex made the glyph, the heading and the paragraph into THREE columns, so the name
   sat beside the dot and the prose wrapped in a narrow gutter beside that. Two columns: the glyph in the
   first, the heading and the body stacked in the second. */
.mark-card.formed,
.mark-card.sealed,
.mark-card.proven {
  border-left-color: transparent; padding-left: 0;
  display: grid; grid-template-columns: 16px 1fr; column-gap: 13px; align-content: start;
}
.mark-card.formed > *,
.mark-card.sealed > *,
.mark-card.proven > * { grid-column: 2; }

.mark-card.formed::before,
.mark-card.sealed::before,
.mark-card.proven::before {
  content: ""; grid-column: 1; grid-row: 1; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
}
.mark-card.formed::before { border: 1.6px solid var(--ray-core); }
.mark-card.sealed::before { background: var(--gold); }
.mark-card.proven::before {
  background: linear-gradient(145deg, var(--gold-rim) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  box-shadow: 0 0 0 1px rgba(246, 175, 41, 0.5);
}
/* On paper a white ring vanishes, exactly as the emblem does. FORMED keeps its meaning — an outline, nothing
   filled — by stroking in the text colour instead. */
:root[data-theme="light"] .mark-card.formed::before { border-color: var(--text); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mark-card.formed::before { border-color: var(--text); }
}

/* The "See it · Prove it · Trust it" trio is a value proposition, not the three seal states. It used to carry
   the same colour coding, which read as though those three words were the marks. Neutral rules now, so only
   the states above are marked. */
.mark-card.see, .mark-card.prove, .mark-card.trust { border-left-color: var(--line); }

/* ── pricing ────────────────────────────────────────────────────────────────────────────────────── */

.tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); align-items: start; }
.tier { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tier.feature { border-color: rgba(246, 175, 41, 0.42); }
.tier .price { font-size: 32px; font-weight: 680; letter-spacing: -0.02em; margin: 6px 0 2px; }
.tier .per { color: var(--muted); font-size: 14px; }
.tier ul { list-style: none; padding: 0; margin: 16px 0 0; }
.tier li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.tier li:first-child { border-top: 0; }
.soon { color: var(--gold-text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }

/* ── footer ─────────────────────────────────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--line); padding-block: 40px; color: var(--muted); font-size: 14.5px; }
.foot-cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.foot-cols h4 { color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 10px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { padding: 4px 0; }
.foot-cols a { color: var(--muted); }
.foot-cols a:hover { color: var(--text); }
.sig { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); line-height: 1.7; }
.sig strong { color: var(--text); }
.sig a { color: var(--muted); text-decoration: none; }
.sig a:hover { color: var(--text); text-decoration: none; }

/* ── L1 · the capture column ────────────────────────────────────────────────────────────────────── */
/*
 * A section that pairs words with a picture of the thing.
 *
 * THE SLOTS ARE EMPTY ON PURPOSE right now. The brief asks for real product captures, and the captures in
 * the tree are a desk that has not started its preview, an account called "playwright-desk", and app
 * screenshots whose content is mock-seed or pseudonymised fixture data. Each of those is a dev artifact,
 * and putting one on the page that gates Apple's verification is the fabrication the no-placeholder rule
 * exists to prevent.
 *
 * So the layout is built and the text column simply runs full width until a real capture exists. An empty
 * bordered box would read as a broken image, which is worse than a well-set column of type. Drop a file in
 * and add the <figure>; nothing else has to change.
 */
.split { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .split.has-media { grid-template-columns: 1fr 1fr; } }
.split .media { margin: 0; }
.split .media img {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.split .media figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* ── L2 · grids that do not leave an orphan ─────────────────────────────────────────────────────── */
/*
 * Four cards in a `repeat(auto-fit, minmax(258px, 1fr))` become 3 + 1 at common desktop widths, and the
 * single card on the second row reads as a mistake. Pinning to two columns, then four at a width that can
 * hold them, keeps every row full.
 */
.grid-4 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── L3 · the nav does not wrap on a phone ──────────────────────────────────────────────────────── */
/*
 * At 390px seven items wrapped onto a second row and pushed the page down. It is now one horizontally
 * scrollable strip: every item stays reachable, the header keeps its height, and nothing is hidden behind
 * a menu the reader has to discover.
 */
@media (max-width: 720px) {
  .head-row { flex-wrap: nowrap; }
  .nav {
    margin-left: auto; width: auto; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 88%, transparent);
    /* The strip scrolls, so its first item can sit flush against the wordmark with nothing between them.
       A fixed gap here is the separation the flex `gap` cannot provide across the auto margin. */
    padding-left: 14px;
  }
  .brand { flex: 0 0 auto; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}

/* ── L1 · the mobile menu ───────────────────────────────────────────────────────────────────────── */
/*
 * THE HORIZONTAL STRIP IS GONE. A strip that scrolls hides its own contents: nothing tells a reader there is
 * more to the right, and the item the whole site is asking for — the pilot request — sat off-screen.
 *
 * Below 768px the bar carries two things a thumb can reach: the pilot CTA, always visible, and a button that
 * opens the rest. The panel is ordinary markup, so it is in the tab order and readable by a screen reader
 * whether it is open or shut.
 */
.menu-btn, .bar-cta { display: none; }

@media (max-width: 768px) {
  .head-row { flex-wrap: nowrap; gap: 10px; }
  .brand { flex: 0 0 auto; }

  .bar-cta {
    display: inline-block; margin-left: auto; padding: 8px 14px; font-size: 14px; white-space: nowrap;
  }
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 36px; padding: 0 8px; flex: 0 0 auto;
    background: transparent; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  }
  .menu-btn span { display: block; height: 2px; background: var(--text); border-radius: 2px; }

  /* Shut by default, and shut means gone from the tab order too — a focusable link behind a closed panel is
     a keyboard trap nobody can see. */
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; width: auto; margin: 0; padding: 8px var(--pad) 14px;
    /* SOLID. At 0.98 alpha the hero still read through the panel, which makes a menu look like a glitch
       rather than a surface. An opaque panel is the one thing an overlay menu must be. */
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  }
  .nav a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a:last-child { border-bottom: 0; }
  html.nav-open .nav { display: flex; }
  .site-head { position: sticky; }
}

/* ── V3 · the pilot request form ────────────────────────────────────────────────────────────────── */
.pilot-form { margin-top: 26px; max-width: 720px; }
.field-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.pilot-form label {
  display: block; margin-bottom: 14px; font-size: 13.5px; color: var(--muted); font-weight: 600;
}
.pilot-form label.full { max-width: none; }
.pilot-form .req { color: var(--gold-text); font-weight: 400; }
.pilot-form .opt { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pilot-form input, .pilot-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
  background: var(--bg-3); color: var(--text); font: inherit; font-size: 16px;   /* 16px: iOS zooms below it */
  border: 1px solid var(--line); border-radius: 10px;
}
.pilot-form input:focus, .pilot-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pilot-form textarea { resize: vertical; }
.pilot-form button { margin-top: 6px; }
.pilot-form button[disabled] { opacity: 0.6; cursor: default; }
/* The honeypot is hidden from people without being hidden from the bots that ignore CSS. Not display:none —
   some submitters skip anything display:none, which would defeat the point. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: 14.5px; min-height: 1.2em; }
.form-status.ok  { color: var(--ok); }
.form-status.err { color: var(--err); }
.status-line { margin-top: 18px; }

/* ── V2.1 · the emblem on a light ground ────────────────────────────────────────────────────────── */
/*
 * MEASURED, NOT GUESSED. 69% of the emblem's opaque pixels are near-white (mean #E9F1F0), because the four
 * rays ARE white — that is the mark. On the paper ground they disappear, and the reader is left with a gold
 * dot floating next to the wordmark.
 *
 * The brand rule says the mark is never re-drawn and never regenerated. So it is not touched. On the light
 * theme it sits on a small dark chip, which is how the same artwork is handled on light stationery: the mark
 * keeps its own ground. On dark the chip is transparent and adds nothing.
 */
.brand img, .hero .mark {
  background: var(--chip); padding: var(--chip-pad); border-radius: 22%;
  box-sizing: content-box;
}
.hero .mark { border-radius: 18%; }

/* ── V2.1 · the theme toggle ────────────────────────────────────────────────────────────────────── */
/*
 * One button, one attribute, one stored string. It sets `data-theme` on the root element, which is the same
 * hook the stylesheet's own light block uses, so pressing it wins over the system preference in BOTH
 * directions — a reader on a light system can choose dark, which a `prefers-color-scheme`-only site cannot
 * offer. The label says what pressing it will DO, not what the page currently is.
 */
.theme-btn {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0; margin-left: 4px;
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); cursor: pointer; line-height: 1;
}
.theme-btn:hover { color: var(--text); background: var(--hover); }
.theme-btn svg { width: 17px; height: 17px; display: block; }
/* Exactly one of the two glyphs is ever in the document's paint. The other is hidden from the accessibility
   tree as well, so a screen reader is not told about a sun and a moon at once. */
.theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: block; }
:root[data-theme="light"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-btn .i-moon { display: none; }
}

@media (max-width: 768px) {
  /* On a phone the toggle stays in the bar next to the menu button rather than hiding inside the panel.
     It is a display preference, and someone reaching for it is usually squinting at the screen now. */
  .theme-btn { order: 3; width: 34px; height: 34px; margin-left: 0; }
  .menu-btn { order: 4; }
}

/* ── V2.1 · the inlined diagram ─────────────────────────────────────────────────────────────────── */
/*
 * The diagram used to be an <img src="...svg">. An SVG loaded that way is its own document: it cannot see
 * the toggle's attribute on the page, so its white labels and near-black frames stayed put and it became
 * unreadable the moment the light theme existed. Inlined, it inherits the tokens like anything else.
 *
 * The RAYS and the Event point keep their sampled values in both themes, because those are the mark. Only
 * the ground, the type and the hairlines follow the reader's choice.
 */
:root { --diagram-node: #EEF5FD; }
:root[data-theme="light"] { --diagram-node: #10141C; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --diagram-node: #10141C; }
}

.media-diagram { margin: 0; }
.svg-diagram, svg.diagram {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  padding: 10px;
}
.media-diagram figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * V3 — the Assessor's structure, on our tokens.
 *
 * What came across is the SHAPE: the hero with a live illustration beside it, the status band, the
 * capture/produce/understand row, the inverted pilot slab, the product pair, the trust strip, the closing
 * call. What did not come across is their stylesheet. Theirs is a single dark palette with the colours
 * written into each rule, which is a perfectly good way to build one theme and an impossible way to build
 * two. Every rule below reads the role tokens, so both themes and the toggle keep working, and the contrast
 * audit keeps covering the new surfaces.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the eyebrow gains their dot ────────────────────────────────────────────────────────────────── */
.eyebrow { display: flex; align-items: center; gap: 10px; line-height: 1.5; }
.eyebrow > span:empty {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-text);
}

/* ── header: the CTA lives in the bar ───────────────────────────────────────────────────────────── */
.nav-cta {
  padding: 9px 16px !important; border: 1px solid var(--line); border-radius: 7px;
  color: var(--text) !important; margin-left: 8px;
}
.nav-cta:hover { background: var(--hover); }
.nav-cta span { margin-left: 14px; color: var(--gold-text); }

/* ── hero ───────────────────────────────────────────────────────────────────────────────────────── */
.hero-v3 { display: grid; grid-template-columns: 1fr; gap: 42px; align-items: center; }
@media (min-width: 900px) { .hero-v3 { grid-template-columns: 1fr 1fr; gap: 54px; } }
.hero-v3 h1 { letter-spacing: -0.045em; line-height: 1.06; }
.hero-explain { color: var(--muted); font-size: 15px; }
.availability { font-size: 12px; color: var(--muted); letter-spacing: 0.015em; margin: 22px 0 0; }

/*
 * THE SCENE. Their illustration, re-coloured to the sampled palette: the ambient wash and the camera rays
 * become the ray blue, the Event point becomes the gold family. It is labelled a concept illustration in
 * the caption and in the SVG's own <desc>, because it is a drawing and the page says so in both places a
 * reader might look.
 */
.hero-art {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: relative;
  background: radial-gradient(ellipse at 50% 42%, var(--bg-3) 0, var(--bg-2) 62%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.art-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 0; font-size: 9.5px; letter-spacing: 0.16em; color: var(--muted);
}
.tiny-orbit { color: var(--gold-text); font-size: 15px; }
.event-scene { width: 100%; display: block; margin-top: -10px; margin-bottom: -20px; }

.camera-path {
  stroke: var(--ray-dim); fill: var(--ray-dim); stroke-width: 1.5; opacity: 0.42;
  transition: opacity 0.3s, stroke 0.3s, fill 0.3s;
}
.camera-path path { fill: none; stroke-dasharray: 4 6; }
.camera-path.selected { stroke: var(--gold); fill: var(--gold); opacity: 1; }
.camera-path.selected path { stroke-dasharray: none; stroke-width: 2; }
.source-label { fill: var(--muted); font-size: 9px; letter-spacing: 2px; }
.event-label  { fill: var(--gold-text); font-size: 8px; letter-spacing: 1.5px; }

.angle-picker { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 20px; }
.angle-picker button {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  padding: 14px 8px; min-height: 60px; font: inherit; font-size: 10px; line-height: 1.6;
  letter-spacing: 0.1em; color: var(--muted);
}
.angle-picker button span { display: block; font-size: 11.5px; letter-spacing: 0; color: var(--text); }
.angle-picker button[aria-pressed="true"] { background: var(--hover); color: var(--gold-text); }
.angle-picker button[aria-pressed="true"] span { color: var(--gold-text); }
.art-caption { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 14px 20px 18px; }

/* ── status band ────────────────────────────────────────────────────────────────────────────────── */
.status-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.status-inner {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  padding-block: 19px; font-size: 11.5px; color: var(--muted);
}
.status-label { letter-spacing: 0.13em; font-size: 10px; margin-right: auto; color: var(--muted); }
.status-inner i {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted); margin-right: 8px; vertical-align: middle;
}
.status-inner .future i { background: var(--gold); }

/* ── a section head with a note beside it ───────────────────────────────────────────────────────── */
.section-top { display: grid; gap: 22px; margin-bottom: 40px; }
@media (min-width: 900px) {
  .section-top { grid-template-columns: 1fr auto; gap: 60px; align-items: end; }
  .section-note { max-width: 330px; margin-bottom: 3px; }
}
.section-top h2 { margin-bottom: 0; }
.section-note { font-size: 15px; color: var(--muted); }

/* ── capture · produce · understand ─────────────────────────────────────────────────────────────── */
.perspectives { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .perspectives { grid-template-columns: repeat(3, 1fr); } }
.perspectives article { border-top: 1px solid var(--line); padding-top: 22px; }
.perspective-num { font-size: 10px; color: var(--muted); letter-spacing: 0.14em; }
.perspectives h3 { margin-top: 22px; margin-bottom: 12px; }
.perspectives p { font-size: 14.5px; color: var(--muted); }

/* Drawings made of rules and circles. No photograph pretends to be a product here. */
.mini-art {
  height: 180px; position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: radial-gradient(ellipse, var(--bg-3), transparent 67%);
}
.lens {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ray-dim);
  box-shadow: 0 0 0 13px var(--bg-3), 0 0 0 14px var(--line);
  background: radial-gradient(circle at 40% 30%, var(--gold-rim), var(--gold) 25%, var(--bg-3) 29%);
}
.focus-corners { position: absolute; width: 152px; height: 112px; border: 1px solid var(--line); border-radius: 10px; }
.capture-art::before, .capture-art::after {
  content: ""; position: absolute; height: 1px; width: 270px; background: var(--line);
  transform: rotate(35deg); opacity: 0.55;
}
.capture-art::after { transform: rotate(-35deg); }
.produce-art { gap: 8px; }
.produce-art i {
  width: 60px; height: 80px; border: 1px solid var(--ray-dim); transform: skewY(-10deg);
  background: linear-gradient(150deg, var(--bg-3), var(--bg-2));
}
.produce-art i:nth-child(2) { height: 102px; border-color: var(--gold); }
.produce-art span {
  position: absolute; bottom: 18px; font-size: 8px; letter-spacing: 0.22em; color: var(--muted);
}
.context-art i {
  width: 86px; height: 86px; border-radius: 50%; border: 1px solid var(--ray-dim);
  margin-left: -22px; background: color-mix(in srgb, var(--bg-3) 70%, transparent);
}
.context-art i:first-child { margin-left: 0; }
.context-art i:nth-child(2) { border-color: var(--gold); }

/*
 * ── THE INVERTED SLAB ──────────────────────────────────────────────────────────────────────────
 * Their pilot section is a pale band cut into a dark page, and the change of ground is what gives the
 * page its spine. Rebuilding it as fixed colours would have made it a dark slab on a dark page the moment
 * the light theme arrived.
 *
 * So the band simply takes THE OTHER THEME'S TOKENS. On dark it is pale, on light it is dark, and because
 * both sets were already measured it is AA in both without a single new number. Their own band had one
 * miss here: the emphasis colour #576C85 is 4.43:1 on #E7E9E8. Ours uses --lead, 8.52:1.
 */
.band-invert {
  --bg: #E7E9E8; --bg-2: #DCDFDE; --bg-3: #D2D6D5;
  --text: #10141C; --lead: #33405A; --muted: #4A5468;
  --link: #0B3FBF; --gold-text: #803701; --line: rgba(16, 20, 28, 0.18); --hover: rgba(16, 20, 28, 0.06);
  background: var(--bg); color: var(--text); padding-block: clamp(56px, 8vw, 90px);
}
:root[data-theme="light"] .band-invert {
  --bg: #101826; --bg-2: #16202F; --bg-3: #1C2738;
  --text: #EEF5FD; --lead: #C7D0DE; --muted: #98A2B3;
  --link: #FCE987; --gold-text: #F6AF29; --line: rgba(238, 245, 253, 0.14); --hover: rgba(238, 245, 253, 0.07);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .band-invert {
    --bg: #101826; --bg-2: #16202F; --bg-3: #1C2738;
    --text: #EEF5FD; --lead: #C7D0DE; --muted: #98A2B3;
    --link: #FCE987; --gold-text: #F6AF29; --line: rgba(238, 245, 253, 0.14); --hover: rgba(238, 245, 253, 0.07);
  }
}
.band-invert p { color: var(--muted); }
.band-invert .lead { color: var(--lead); font-size: 21px; }
.band-invert h2 { color: var(--text); }
.pilot-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pilot-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.band-invert h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -0.04em; }
.band-invert em { color: var(--lead); font-style: normal; }
.offer-row { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: 15px 0; }
.offer-row strong { font-size: 18px; font-weight: 600; color: var(--text); }
.offer-row span { color: var(--muted); font-size: 13.5px; }
.honesty { font-size: 13.5px; line-height: 1.7; margin-top: 16px; color: var(--muted); }

/* ── the two products, side by side ─────────────────────────────────────────────────────────────── */
.product-pair { display: grid; gap: 44px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .product-pair { grid-template-columns: 1fr 1fr; gap: 80px; }
  .product-pair > div + div { border-left: 1px solid var(--line); padding-left: 64px; }
}
.product-word { display: block; font-size: 32px; letter-spacing: -0.05em; margin-bottom: 34px; }
.product-word span { margin-left: 9px; font-size: 23px; letter-spacing: -0.03em; color: var(--muted); font-weight: 300; }
.product-pair h2 { font-size: clamp(25px, 3vw, 34px); }
.product-pair p { max-width: 410px; color: var(--muted); }

/* ── the trust strip, with OUR marks ────────────────────────────────────────────────────────────── */
.trust-strip {
  border: 1px solid var(--line); border-radius: 12px; padding: clamp(28px, 4vw, 52px);
  display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
}
@media (min-width: 860px) { .trust-strip { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.trust-strip h2 { font-size: clamp(24px, 3.2vw, 36px); }
.trust-strip p { font-size: 14.5px; color: var(--muted); }

/*
 * Their strip used three PNG pillars. Ours draws the seal states, so the page shows the marks the app
 * actually mints — ring, flat gold, metal ramp — and the three words sit under the thing they name.
 */
.pillar-marks { display: flex; gap: 22px; align-items: flex-start; justify-content: center; }
.pillar-marks figure { margin: 0; flex: 1; text-align: center; }
.pillar-marks .seal-mark {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 12px;
}
.seal-mark.formed { border: 2.4px solid var(--text); }
.seal-mark.sealed { background: var(--gold); }
.seal-mark.proven {
  background: linear-gradient(145deg, var(--gold-rim) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  box-shadow: 0 0 0 1px rgba(246, 175, 41, 0.5);
}
.pillar-marks figcaption {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

/* ── the closing call ───────────────────────────────────────────────────────────────────────────── */
.closing {
  padding-block: clamp(64px, 9vw, 100px); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 34px;
}
.closing h2 { font-size: clamp(27px, 3.8vw, 40px); }
.closing p { max-width: 590px; color: var(--muted); }
.closing .btn { flex-shrink: 0; }

/* ── page intro, cards, two columns (their interior-page furniture) ─────────────────────────────── */
.page-intro { padding-top: clamp(46px, 7vw, 84px); padding-bottom: 18px; }
.page-intro h1 { max-width: 1000px; }
.page-intro .lead { max-width: 690px; }
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards .card .index { color: var(--muted); letter-spacing: 0.12em; font-size: 10px; display: block; margin-bottom: 28px; }
.cards .card h3 { font-size: 21px; }
.cards .card p { font-size: 14.5px; margin: 0; color: var(--muted); }
.two-columns { display: grid; gap: 34px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .two-columns { grid-template-columns: 1fr 1fr; gap: 60px; } }

/* ── FAQ ────────────────────────────────────────────────────────────────────────────────────────── */
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 17px 30px 17px 0; position: relative; font-weight: 600;
  list-style: none; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 15px; color: var(--gold-text); font-size: 19px; font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }

/* ── footer, their three columns ────────────────────────────────────────────────────────────────── */
.footer-top { display: grid; gap: 34px; grid-template-columns: 1fr; padding-bottom: 46px; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 2fr 1fr 1fr; gap: 50px; } }
.footer-top .brand img { width: 30px; height: 30px; }
.footer-top h2 { font-size: 10px; letter-spacing: 0.16em; color: var(--muted); margin: 4px 0 18px; font-weight: 600; }
.footer-top p { font-size: 13.5px; margin-top: 15px; color: var(--muted); }
.footer-top > div > a:not(.brand) { display: block; font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.footer-top > div > a:not(.brand):hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px;
  font-size: 11.5px; color: var(--muted);
}
.footer-bottom > div { display: flex; gap: 24px; }

/* One dim ray colour for the line-art in the scene and the mini-drawings, following the theme. */
:root { --ray-dim: #547394; }
:root[data-theme="light"] { --ray-dim: #42597A; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ray-dim: #42597A; } }
.band-invert { --ray-dim: #42597A; }
:root[data-theme="light"] .band-invert { --ray-dim: #547394; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .band-invert { --ray-dim: #547394; } }

/* ── V3.1 · H1 · the hero at 390 ────────────────────────────────────────────────────────────────── */
/*
 * The illustration started at y=675 on a 844px screen and its caption at y=1048, below the fold. The page
 * is about more than one point of view and the picture showing that was the last thing a phone reader
 * reached. Nothing here changes the headline or a single type size.
 *
 * `display: contents` on the copy column at narrow widths promotes its children to grid items, so the
 * explanatory paragraph can move BELOW the graphic without being moved in the markup — the desktop order,
 * which is correct, is left exactly as it was.
 */
.quiet-link { color: var(--link); font-size: 15.5px; padding: 12px 4px; display: inline-block; }
.quiet-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .hero { padding-block: clamp(22px, 5vw, 40px); }
  .hero-v3 { gap: 18px; }
  .hero-copy { display: contents; }

  .hero-copy > .eyebrow { order: 1; margin-bottom: 8px; }
  .hero-v3 h1           { order: 2; margin-bottom: 10px; }
  .hero-copy > .lead    { order: 3; margin-bottom: 4px; }
  .hero-copy > .actions { order: 4; margin-top: 12px; gap: 6px; align-items: center; }
  .hero-art             { order: 5; }
  /* The second paragraph explains the picture, so it now sits under it rather than delaying it. */
  .hero-copy > .hero-explain { order: 6; margin-top: 14px; margin-bottom: 0; }
  .hero-copy > .availability { order: 7; margin-top: 10px; }

  .hero-art .art-top { padding: 14px 16px 0; }
  .event-scene { margin-top: -6px; margin-bottom: -14px; }
  .angle-picker { margin: 0 14px; }
  .angle-picker button { min-height: 52px; padding: 10px 6px; }
  .art-caption { margin: 10px 14px 14px; }
}