:root{
  /* --- Brand palette. Source of truth is Pixie's brand/tokens.json, sampled from the
     owner-supplied artwork rather than invented. This file previously carried a
     hand-guessed blue/navy set drawn only from the brief's description; those values
     are replaced here so the site matches the real artwork. */
  --brand-dark:#0b1c38;        /* her "dark"    — reversed artwork surface */
  --brand-navy:#0444a7;        /* her "navy"    — secondary deep blue */
  --brand-royal:#116aea;       /* her "royal"   — primary blue, links. 4.91:1 on white */
  --brand-light-blue:#5aa2ff;  /* her "light_blue" — for navy/mid-blue surfaces, where royal fails */
  --brand-paper:#f6f8fb;       /* her "paper"   — light page surface */
  --brand-ink:#2b353f;         /* her "ink"     — 12.47:1 on white */
  --brand-descriptor:#29323b;

  /* --- Semantic aliases used by the rest of this sheet. */
  --navy-900:var(--brand-dark);
  --navy-800:#0f2140;
  --navy-700:#122647;
  /* Hero gradient end stop. Measured, not chosen for looks: the STATUS label at 11.5px
     uppercase needs 4.5:1, and #153469 is the lightest stop that clears it for both the
     label (4.70:1) and the body text (8.67:1). */
  --hero-end:#153469;
  --blue-600:var(--brand-royal);
  --blue-500:#2f7ae5;
  --blue-300:var(--brand-light-blue);
  --ink-100:#eef3fb;
  --ink-300:#c6d4e8;
  --ink-500:#8fa2bd;

  --surface:#ffffff;
  --surface-alt:var(--brand-paper);
  --border:#d7e0ee;
  --text:#0d1b2f;
  --text-muted:#4a5a72;

  --focus:#12509f;
  --radius:10px;
  --wrap:1120px;
  --pad:24px;

  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  line-height:1.65;
  color:var(--text);
  background:var(--surface);
}

/* Layout must survive 320px. Nothing here sets a fixed width or a min-width that
   could force a horizontal scrollbar, and long words are allowed to break rather
   than overflow. */
img,svg{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------------------------------------------------------------- skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy-900);color:#fff;padding:12px 18px;
  font-weight:600;text-decoration:none;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

/* Visible focus everywhere. Never removed: outline:none without a replacement is
   the single most common keyboard accessibility regression. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

a{color:var(--blue-600)}
a:hover{color:var(--navy-800)}

/* -------------------------------------------------------------------- header */
.site-header{
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.brand{
  display:inline-flex;align-items:center;
  text-decoration:none;
}
/* Pixie's lockup, sized from its own proportions (1493x333 ≈ 4.48:1), so the declared
   width/height in the markup match what is painted and the header cannot shift while
   the image loads. At 176px wide it renders about 39px tall. */
.brand-lockup{
  display:block;
  width:176px;
  height:auto;
  max-width:100%;
}

.site-nav{margin-left:auto}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 20px;
}
.site-nav a{
  color:var(--ink-300);text-decoration:none;font-weight:500;
  padding:6px 2px;border-radius:4px;
}
.site-nav a:hover{color:#fff}
.site-nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--blue-500)}

/* ---------------------------------------------------------------------- main */
.site-main{display:block}

.hero{
  background:linear-gradient(170deg,var(--navy-900) 0%,var(--navy-700) 60%,var(--hero-end) 160%);
  color:#fff;
  padding:72px 0 64px;
}
.hero h1{
  margin:0 0 18px;font-size:clamp(1.75rem,4.2vw,2.75rem);
  line-height:1.2;letter-spacing:-.02em;
}
.hero .lede{
  margin:0 0 22px;max-width:60ch;
  font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-100);
}

.section{padding:56px 0}
.section:nth-of-type(even){background:var(--surface-alt)}
.section .wrap > h1{margin-top:0;font-size:clamp(1.6rem,3.4vw,2.25rem);letter-spacing:-.02em}
.section h2{
  font-size:clamp(1.2rem,2vw,1.4rem);margin:36px 0 10px;letter-spacing:-.01em;
}
.section p{max-width:68ch}
.lede{font-size:1.12rem;color:var(--text-muted);max-width:60ch}

/* Status and pending callouts. These are deliberately visible rather than hidden:
   the whole point is that the reader can tell what is confirmed and what is not. */
.notice{
  max-width:68ch;
  border-left:4px solid var(--blue-500);
  background:rgba(255,255,255,.08);
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-100);font-size:.97rem;
}
.notice-label{
  display:block;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.72rem;margin-bottom:4px;color:var(--blue-300);
}
.pending{
  max-width:68ch;
  border-left:4px solid var(--blue-600);
  background:var(--surface-alt);
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text-muted);font-size:.97rem;
}

.cta{
  display:inline-block;
  background:var(--blue-600);color:#fff;text-decoration:none;
  font-weight:600;padding:12px 22px;border-radius:var(--radius);
}
.cta:hover{background:var(--navy-700);color:#fff}
.hero .cta{background:#fff;color:var(--navy-900)}
.hero .cta:hover{background:var(--ink-100);color:var(--navy-900)}

.plain-list{max-width:68ch;padding-left:1.2em}
.plain-list li{margin:6px 0}

/* Capability key: a definition list, because this is genuinely a term/definition
   pairing. Styled as a compact two-column list that collapses to one column on a
   narrow screen without changing the markup's semantics. */
.capability-key{
  max-width:68ch;margin:16px 0 8px;
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  align-items:baseline;
}
.capability-key dt{font-weight:600;color:var(--navy-800)}
.capability-key dd{margin:0;color:var(--text-muted)}

@media (max-width:520px){
  .capability-key{grid-template-columns:1fr;gap:2px 0}
  .capability-key dd{margin-bottom:10px}
}

/* Facts table: real table markup so it is a table to a screen reader, not a
   grid of divs that merely looks like one. */
.facts{
  border-collapse:collapse;margin:0 0 24px;width:100%;max-width:44rem;
}
.facts th,.facts td{
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);
  vertical-align:top;
}
.facts th{font-weight:600;width:12rem;color:var(--text-muted)}

/* -------------------------------------------------------------------- footer */
.site-footer{
  background:var(--navy-900);color:var(--ink-300);
  padding:40px 0;margin-top:0;
}
.footer-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
}
.site-footer a{color:var(--ink-300);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer nav ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;
}
.footer-brand{font-weight:700;color:#fff;margin:0}
.footer-legal,.footer-copy{margin:0;font-size:.9rem;color:var(--ink-500)}
.footer-copy{margin-left:auto}

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

/* -------------------------------------------------- motion and forced colours */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* High-contrast and forced-colours modes: keep semantics, drop decoration that
   would otherwise become an invisible-on-invisible shape. */
@media (forced-colors: active){
  .brand-mark{background:ButtonFace;color:ButtonText;border:1px solid ButtonText}
  .cta{border:1px solid ButtonText}
  .notice,.pending{border-left-color:Highlight}
  :focus-visible{outline:3px solid Highlight}
}

/* --------------------------------------------------------------- narrow view */
@media (max-width:640px){
  :root{--pad:18px}
  .hero{padding:48px 0 42px}
  .section{padding:40px 0}
  .header-inner{gap:12px}
  .brand-name{font-size:1rem}
  /* The nav is still a plain list of links: it wraps under the brand rather than
     collapsing behind a control that would not work without scripting. */
  .site-nav{margin-left:0;width:100%}
  .site-nav ul{gap:6px 16px}
  /* Keep the table a table. Setting display:block on cells would make it easier to
     squeeze into 320px, but display changes can strip table semantics in some
     assistive tech, so the label column is allowed to shrink and wrap instead. */
  .facts th{width:auto;white-space:normal;padding-right:8px}
  .facts th,.facts td{padding-left:8px;padding-right:8px}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-copy{margin-left:0}
}


/* ============================================================================
   Substantive page blocks (final build brief)
   ========================================================================= */

/* Section surfaces are explicit rather than alternating by document order, because a
   navy section next to a paper section would otherwise inherit the wrong background and
   leave light text on a light surface. */
.section:nth-of-type(even){background:transparent}

.section--paper{background:var(--brand-paper);color:var(--text)}
.section--navy{background:var(--brand-dark);color:var(--ink-100)}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .lede{color:var(--ink-300)}
.section--navy a:not(.cta){color:var(--brand-light-blue)}
.section--navy a:not(.cta):hover{color:#fff}

/* ------------------------------------------------------------------- hero extras */
.eyebrow{
  margin:0 0 12px;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  /* light blue on the dark hero: Pixie measured 4.66:1 at the WORST gradient stop, so it
     clears AA for small text anywhere it can land. */
  color:var(--brand-light-blue);
}
.hero .eyebrow{color:var(--brand-light-blue)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.cta--secondary{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45);
}
.cta--secondary:hover{background:rgba(255,255,255,.12);color:#fff}
.section--paper .cta--secondary,
.section:not(.section--navy) .cta--secondary{
  color:var(--brand-royal);border-color:var(--brand-royal);background:transparent;
}
.section--paper .cta--secondary:hover,
.section:not(.section--navy) .cta--secondary:hover{
  background:var(--brand-royal);color:#fff;
}

/* --------------------------------------------------------------- capability grid */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  margin:28px 0 8px;
}
.cap{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  background:var(--surface);
}
.cap h3{margin:0 0 8px;font-size:1.0625rem;color:var(--brand-dark)}
.cap p{margin:0;color:var(--text-muted)}

.section--navy .cap{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
}
.section--navy .cap h3{color:#fff}
.section--navy .cap p{color:var(--ink-300)}

.cap-detail article{margin:0 0 26px;max-width:74ch}
.cap-detail h2{margin-bottom:6px}

/* --------------------------------------------------------------------- figures */
.figure{
  margin:32px auto;
  /* Bounded to 720px. The measured 1280px desktop slot was 1000x667, which let a diagram
     with generous internal margins occupy more page than the copy it supports. Mark's
     instruction: the diagrams should support the copy, not dominate it. Centred, with
     contain and no crop, and width 100% below the bound so narrow screens still fill. */
  max-width:720px;
}
.figure img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
}
.section--navy .figure img{border-color:rgba(255,255,255,.18);background:transparent}
.figure figcaption{
  margin-top:10px;font-size:.875rem;color:var(--text-muted);
}
.section--navy .figure figcaption{color:var(--ink-500)}

/* --------------------------------------------------------------------- callouts */
.callout{
  border-left:4px solid var(--brand-royal);
  background:var(--brand-paper);
  padding:16px 20px;
  border-radius:0 var(--radius) var(--radius) 0;
  max-width:74ch;
  margin:22px 0;
}
.callout p{margin:0}
.callout p + p{margin-top:8px}
.callout-label{
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.75rem;color:var(--brand-royal);margin-bottom:6px !important;
}
/* The limit callout states what something is NOT. It uses the navy rather than a warning
   colour: this is a boundary, not an error, and colouring it red would imply a fault. */
.callout--limit{border-left-color:var(--brand-navy)}
.callout--limit .callout-label{color:var(--brand-navy)}

/* ----------------------------------------------------------------- capability table */
.table-scroll{overflow-x:auto;margin:20px 0}
.capability-table{
  border-collapse:collapse;width:100%;min-width:640px;
  background:var(--surface);
}
.capability-table caption{
  text-align:left;padding:0 0 10px;font-size:.875rem;color:var(--text-muted);
}
.capability-table th,.capability-table td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);
  vertical-align:top;
}
.capability-table thead th{
  background:var(--brand-paper);
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);
}
.capability-table tbody th{font-weight:600;color:var(--brand-dark);width:34%}

.status{
  display:inline-block;white-space:nowrap;
  font-size:.8125rem;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;border:1px solid transparent;
}
/* All four carry AA against white, and the TEXT carries the meaning: each one says what
   it is, so the colours are reinforcement rather than the signal. */
.status--core{background:#e6f0ff;color:#0b3a86;border-color:#bcd6fb}
.status--optin{background:#eaf6ee;color:#175a2e;border-color:#bfe3ca}
.status--beta{background:#fff3e0;color:#7a3d00;border-color:#f5d09a}
.status--none{background:#f1f2f5;color:#3d4450;border-color:#d6d9e0}

/* ------------------------------------------------------------------- Beta label */
/* Pixie's treatment. The word carries the meaning; colour only reinforces it, so the
   label is still readable with CSS off. 14px minimum, uppercase with modest tracking.
   Never baked into an SVG, never depending on JavaScript, and always rendered in the same
   block as the claim it qualifies so it cannot scroll away from it. */
.beta-tag{
  display:inline-block;
  font-size:.875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:2px 8px;
  border-radius:4px;
  border:1px solid currentColor;
  /* navy on the paper/white surfaces: 8.26:1 */
  color:var(--brand-navy);
  background:transparent;
}
.section--navy .beta-tag{color:var(--brand-light-blue)}   /* 6.50:1 on #0b1c38 */

/* ------------------------------------------------------------------------- FAQ */
.faq{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:0 0 10px;
  max-width:74ch;
  background:var(--surface);
}
.faq summary{
  cursor:pointer;
  font-weight:600;
  color:var(--brand-dark);
  padding:2px 0;
}
.faq summary:hover{color:var(--brand-royal)}
.faq[open] summary{margin-bottom:10px}
.faq p{margin:0;color:var(--text-muted)}
.faq p + p{margin-top:8px}

/* -------------------------------------------------------------------- mobile */
@media (max-width:640px){
  .cta-row{flex-direction:column;align-items:flex-start}
  .cap-grid{grid-template-columns:1fr;gap:16px}
  .figure{margin:24px 0}
  /* Artwork stays modest on mobile per the brief: it illustrates, it does not dominate. */
  .figure img{max-height:260px;object-fit:contain;object-position:center}
  .capability-table{min-width:520px}
}