/*
Theme Name: GTX2 Launch
Theme URI: https://gtx2.com/
Author: GTX2
Description: Launch theme for GTX2 (2026 rebuild). Installs to its own folder, gtx2-launch, so it cannot collide with any earlier GTX2 theme. Data transport acceleration for standard x86 servers. Five-section homepage plus Technology, Intel Labs, Team and Contact page templates.
Version: 5.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: gtx2
*/

/* ==========================================================================
   GTX2 — site.css
   Draft 0.3 rebuild. Tokens first, then layout, then components.

   NOTE ON THE OLD CONTRAST BUG:
   The 1.4:1 "Request a Briefing" failure came from `.nav__links a` setting a
   light link colour that beat `.btn--primary`'s dark-on-dark pairing. Fixed
   structurally here: nav link colour is scoped with :not(.btn), so buttons
   never inherit it, regardless of source order.
   ========================================================================== */

:root {
  --ink:        #0F1519;   /* primary text, dark bands, primary button */
  --ink-soft:   #1C262C;
  --slate:      #47555F;   /* secondary text */
  --paper:      #EDEFF1;   /* page background — cool zinc, not cream */
  --paper-lift: #F6F8F9;   /* cards */
  --rule:       #C7CFD4;
  --signal:     #0169C2;   /* brand blue, sampled from gtx2_logo_aug25.png */
  --signal-dim: #DDEBF9;
  --signal-deep: #0B4E90;  /* small text over the washed hero photo */
  --muted:      #5F6B73;   /* de-emphasized text + the bypassed lane (AA at small sizes) */

  --measure: 68ch;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --band-y: clamp(3.5rem, 8vw, 7rem);

  --font-display: "IBM Plex Sans Condensed", "Roboto Condensed",
                  "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI",
                  Roboto, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo,
                  Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.62;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

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

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

/* --- utility -------------------------------------------------------------- */

/* Content is left-aligned to the viewport, not centred: on a wide monitor the
   grid stays anchored to the left edge rather than drifting into the middle.
   Line lengths stay readable because measures are set per element, not by the
   container. */
.wrap {
  max-width: 1180px;
  /* Centred. This was margin-inline: 0, which pinned every section to the left
     edge — invisible up to about 1300px, then increasingly lopsided on wide
     monitors as the unused space all collected on the right. */
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
@media (min-width: 100rem) { .wrap { max-width: 1320px; } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.25rem;
}
.eyebrow--onDark { color: #84BFF2; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* --- header / nav --------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.masthead__inner {
  display: flex; align-items: center; gap: var(--gap);
  min-height: 4.25rem;
  flex-wrap: wrap;
}

.wordmark {
  display: block;
  margin-right: auto;
  line-height: 0;
  border-radius: 2px;
}
.wordmark img { height: 2rem; width: auto; }
@media (max-width: 30rem) { .wordmark img { height: 1.75rem; } }

.nav__links {
  list-style: none; display: flex; align-items: center;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin: 0; padding: 0; flex-wrap: wrap;
}

/* Scoped with :not(.btn) so a button placed in the nav keeps its own colours. */
.nav__links a:not(.btn) {
  font-size: 0.875rem;
  color: var(--slate);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav__links a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--signal); }
.nav__links a:not(.btn)[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.nav__flag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn--primary { background: var(--ink); color: #FFFFFF; }          /* ~16:1 */
.btn--primary:hover { background: var(--signal); color: #FFFFFF; } /* 5.5:1 */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #FFFFFF; }
.btn--onDark { background: #FFFFFF; color: var(--ink); }
.btn--onDark:hover { background: var(--signal-dim); color: var(--ink); }

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

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero__display {
  font-size: clamp(2.6rem, 7.5vw, 5.25rem);
  letter-spacing: -0.03em;
  max-width: 22ch;
}
.hero__display em {
  font-style: normal;
  color: var(--signal);
  display: block;
}
.hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 1.75rem;
}
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }

/* --- proof band (above the fold) ----------------------------------------- */

.proof { background: var(--ink); color: #E8EDEF; padding-block: var(--band-y); }
.proof h2 {
  color: #FFFFFF;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  max-width: 24ch;
}
.proof p { color: #C4CED3; }
.proof__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/* Side-by-side from 50rem rather than 62rem: a ~940px window was falling through
   to the stacked layout, which is the common laptop-with-a-sidebar case. */
@media (min-width: 50rem) {
  .proof__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: center;
  }
}

.gauge { margin: 0; }
.gauge + .gauge { margin-top: 2.25rem; }
.gauge__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #A9B6BC;
  display: flex; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.6rem;
}
.gauge__label b { color: #FFFFFF; font-weight: 600; }
.gauge__track { height: 0.6rem; background: #2A363D; border-radius: 1px; overflow: hidden; }
.gauge__fill { height: 100%; background: var(--muted); }
.gauge__fill--ours { background: var(--signal); }
.gauge__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: #93A1A8;
  margin-top: 0.55rem;
}
.cite { font-size: 0.8125rem; color: #A9B6BC; margin-top: 2.25rem; }
.cite a { color: #84BFF2; }
.cite a:hover { color: #FFFFFF; }

/* --- generic band / prose ------------------------------------------------ */

.band { padding-block: var(--band-y); border-bottom: 1px solid var(--rule); }
.band--plain { border-bottom: 0; }
.band__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.band__head h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 26ch; }

.two-col {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- diagram ------------------------------------------------------------- */

.diagram {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.diagram svg { width: 100%; height: auto; }
.diagram__caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-top: 1rem;
  max-width: none;
}

/* --- entity split -------------------------------------------------------- */

.entity {
  border-left: 2px solid var(--signal);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
}
.entity dl { margin: 1.75rem 0 0; display: grid; gap: 1rem; }
.entity dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}
.entity dd { margin: 0.2rem 0 0; color: var(--slate); font-size: 0.9375rem; }

/* --- team ---------------------------------------------------------------- */

.roster { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.member {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.roster > .member:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 48rem) {
  .member { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: start; }
}

.headshot {
  aspect-ratio: 4 / 5;
  max-width: 13.5rem;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: grid; place-items: center;
  text-align: center;
}
.headshot span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem;
}
.member__name { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
.member__role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0.5rem 0 1.1rem;
}
.member__bio { color: var(--ink-soft); }
.member__bio mark {
  background: #FBF0D8;
  color: var(--ink-soft);
  padding: 0 0.15em;
  border-radius: 1px;
}

.stat-lede {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 34ch;
  margin: 0;
}

/* --- placeholder notice -------------------------------------------------- */

.notice {
  border: 1px dashed var(--muted);
  border-radius: 3px;
  padding: 1rem 1.15rem;
  background: var(--paper-lift);
  font-size: 0.875rem;
  color: var(--slate);
  max-width: var(--measure);
}
.notice strong { color: var(--ink); }

/* --- stub pages ---------------------------------------------------------- */

.stub { padding-block: clamp(4rem, 10vw, 8rem); }
.stub__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.35rem 0.6rem;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.stub h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.stub p { margin-top: 1.5rem; color: var(--slate); font-size: 1.0625rem; }

/* --- contact ------------------------------------------------------------- */

.field { display: grid; gap: 0.4rem; margin-bottom: 1.25rem; max-width: 34rem; }
.field label { font-size: 0.8125rem; font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--ink);
}
.field textarea { min-height: 8rem; resize: vertical; }

/* --- footer -------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: #A9B6BC;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.875rem;
}
.footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.footer h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #869499;
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer a { color: #D5DDE1; text-decoration: none; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer__mark { line-height: 0; margin: 0; }
.footer__mark img { height: 2.125rem; width: auto; }
.footer__line {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid #2A363D;
  font-size: 0.8125rem;
  color: #7E8C94;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Diagram: drop the secondary detail lines where the SVG scales below legibility */
/* The secondary mono lines fall under 10px once the viewBox scales below about
   0.85, so they come out rather than sit there illegible. */
@media (max-width: 34rem) {
  .diagram .dg-detail { display: none; }
}

/* ==========================================================================
   LAUNCH BUILD — flattened single-column home
   ========================================================================== */

/* anchor offset for the sticky masthead */
[id] { scroll-margin-top: 5.5rem; }

/* --- full-bleed photographic divider -------------------------------------- */

.divider { display: block; width: 100%; line-height: 0; background: var(--ink); }
.divider img {
  width: 100%;
  height: clamp(150px, 26vw, 330px);
  object-fit: cover;
  display: block;
}
.divider--light { background: var(--paper); }

/* --- section scaffolding -------------------------------------------------- */

.sec { padding-block: var(--band-y); }
.sec--rule { border-top: 1px solid var(--rule); }
.sec__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.sec h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 24ch; }
.sec__lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  color: var(--ink-soft);
  margin-top: 1.5rem;
}
.sec__more {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- headline stat -------------------------------------------------------- */

.bignum {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.6vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0;
}
.bignum small {
  display: block;
  font-size: clamp(0.9rem, 2vw, 1.125rem);
  letter-spacing: 0;
  color: #C4CED3;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  max-width: 34ch;
}

/* --- stat cards ----------------------------------------------------------- */

.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 46rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--paper-lift); padding: clamp(1.25rem, 3vw, 2rem); }
.stat__k {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--signal);
  line-height: 1;
}
.stat__t {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0.9rem 0 0.6rem;
}
.stat p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }

.method {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--slate);
  margin-top: 1.5rem;
  max-width: 80ch;
}
.method b { color: var(--ink); font-weight: 500; }

/* --- feature / capability columns ----------------------------------------- */

.cols { display: grid; gap: clamp(1.75rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52rem) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.col h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
.col p { font-size: 0.9375rem; color: var(--ink-soft); }

.tick { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.tick li {
  font-size: 0.9375rem;
  padding-left: 1.5rem;
  position: relative;
  color: var(--ink-soft);
}
.tick li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 0.5rem; height: 2px;
  background: var(--signal);
}

.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; gap: 1.5rem; }
.numbered li { counter-increment: n; padding-left: 2.75rem; position: relative; }
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--signal);
}
.numbered h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.numbered p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }

/* --- team strip ----------------------------------------------------------- */

.faces { display: grid; gap: 1.25rem; margin-top: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.face__frame {
  aspect-ratio: 4 / 5;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.face__name { font-weight: 600; font-size: 0.9375rem; margin: 0.65rem 0 0.15rem; }
.face__role { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--slate); }

/* --- dark section variant ------------------------------------------------- */

.sec--dark { background: var(--ink); color: #C4CED3; }
.sec--dark h2, .sec--dark h3 { color: #FFFFFF; }
.sec--dark p { color: #C4CED3; }
.sec--dark .sec__num { color: #7E8C94; }
.sec--dark a:not(.btn) { color: #84BFF2; }
.sec--dark a:not(.btn):hover { color: #FFFFFF; }

/* ==========================================================================
   HOMEPAGE 0.6 — argument-sequence layout
   ========================================================================== */

/* --- hero: single washed photographic background ------------------------- */

/* The wash is baked into the image asset (blended toward paper, desaturated),
   not applied with CSS filters — that makes the background luminance
   deterministic, so text contrast can be verified rather than estimated.
   Darkest patch in the served file sits at ~0.58 relative luminance. */
.heroimg { position: relative; isolation: isolate; background: var(--paper); }
.heroimg__layer { position: absolute; inset: 0; z-index: -1; }
.heroimg__layer img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.heroimg__inner { position: relative; padding-block: clamp(3.5rem, 8vw, 6.75rem); }
/* The headline spans the full content width above the two-column block. Capped
   at 3.9rem rather than 4.25rem: at 1440 the viewport gets the maximum 5.5rem
   side padding while 4.8vw is still climbing, so the wider window actually has
   less room for the line and 4.25rem wrapped there but not at 1280. 3.9rem
   holds one line from 960px to 2560px. */
.heroimg .hero__display {
  max-width: none;
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
}

@media (max-width: 48rem) {
  .heroimg__layer img { object-position: 58% center; }
  .heroimg .hero__display, .heroimg .hero__lede { max-width: none; }
}

/* --- use-case cards ------------------------------------------------------- */

.cases {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 34rem) { .cases { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 62rem) { .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case__img {
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
}
.case__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case h3 { font-size: 1.125rem; margin: 1rem 0 0.5rem; }
.case p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }

/* --- problem contrast rows ------------------------------------------------ */

.tradeoff { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 46rem) { .tradeoff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tradeoff__cell { background: var(--paper-lift); padding: clamp(1.25rem, 3vw, 1.9rem); }
.tradeoff__cell h3 { font-size: 1.0625rem; margin-bottom: 0.6rem; }
.tradeoff__cell p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
.tradeoff__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   NAV DROPDOWN
   Opens on hover, on keyboard focus, and on tap. The CSS handles hover and
   focus-within on its own, so the menu still works with JavaScript disabled;
   the script only adds tap support, Escape, and aria-expanded state.
   ========================================================================== */

.nav__item { position: relative; }

/* The homepage item is a link plus a separate caret button, not one control
   doing both jobs. A single element that must navigate *and* disclose is
   ambiguous on touch: the tap fires navigation before any toggle can run. With
   two hit targets, tapping "Overview" goes to the homepage and tapping the
   caret opens the sections — no pointer-type sniffing required. */
.nav__item { display: inline-flex; align-items: center; gap: 0.1rem; }

.nav__links .nav__link {
  font-size: 0.875rem;
  color: var(--slate);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav__links .nav__link:hover { color: var(--ink); border-bottom-color: var(--signal); }
.nav__links .nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--slate);
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  /* Removes the 300ms tap delay mobile browsers add while waiting to see if a
     tap is a double-tap. */
  touch-action: manipulation;
}
/* Touch targets need ~44px. On pointer devices the visual caret stays small. */
@media (hover: none), (max-width: 48rem) {
  .nav__trigger { width: 2.75rem; height: 2.75rem; }
}
.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--signal-dim); }

/* Visible label for assistive tech only. */
.nav__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nav__menu {
  position: absolute;
  top: 100%;
  left: -0.5rem;
  min-width: 13.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  display: none;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(15, 21, 25, 0.12);
  z-index: 60;
}
/* invisible bridge so the menu survives the cursor crossing the gap */
.nav__menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -0.7rem;
  height: 0.7rem;
}

.nav__item:hover > .nav__menu:not([data-closed]),
.nav__item:focus-within > .nav__menu:not([data-closed]),
.nav__menu[data-open="true"] { display: block; }

.nav__menu li { margin: 0; list-style: none; }
.nav__menu li::marker { content: none; }
.nav__links .nav__menu a:not(.btn) {
  display: block;
  padding: 0.5rem 0.7rem;
  border-bottom: 0;
  border-radius: 2px;
  font-size: 0.875rem;
  color: var(--slate);
  white-space: nowrap;
}
.nav__links .nav__menu a:not(.btn):hover,
.nav__links .nav__menu a:not(.btn):focus-visible {
  background: var(--signal-dim);
  color: var(--ink);
}

/* Small screens: no hover to rely on, so the submenu opens inline rather than
   as a floating panel. */
@media (max-width: 48rem) {
  .nav__menu {
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 2px solid var(--rule);
    margin-top: 0.4rem;
  }
  .nav__menu::before { display: none; }
  .nav__item:hover > .nav__menu,
  .nav__item:focus-within > .nav__menu { display: none; }
  .nav__menu[data-open="true"] { display: block; }
  .nav__item { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) { .nav__caret { transition: none; } }

/* ==========================================================================
   INNER PAGE HEROES + TEAM GRID (1.3)
   ========================================================================== */

/* Inner pages reuse the homepage's washed photographic hero at a shorter
   height, so the header reads as part of the same site. */
.heroimg--inner .heroimg__inner { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.heroimg--inner .hero__display {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  max-width: 24ch;
}
.heroimg--inner .hero__lede { max-width: 54ch; }

/* --- horizontal fact row -------------------------------------------------- */

.facts {
  display: grid; gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { background: var(--paper); padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; }
.fact__k {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signal);
}
.fact__t {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0.8rem 0 0.5rem;
}
.fact p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; max-width: 40ch; }
.facts--onDark { background: #2A363D; border-color: #2A363D; }
.facts--onDark .fact { background: var(--ink); }
.facts--onDark .fact__k { color: #84BFF2; }
.facts--onDark .fact__t { color: #93A1A8; }
.facts--onDark .fact p { color: #C4CED3; }

/* padding for facts that sit inside a .wrap-less full-bleed band */
.facts .fact { padding-inline: clamp(1.25rem, 3vw, 2rem); }

/* --- team grid ------------------------------------------------------------ */

.team-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tcard {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tcard__frame {
  /* Square, because every supplied headshot is 1:1. Cropping them to a taller
     frame would clip the top of the head or the chin. */
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #E4E9EC 0%, #F4F6F7 100%);
  border-bottom: 1px solid var(--rule);
  display: grid;
  place-items: center;
  text-align: center;
}
.tcard__frame img { width: 100%; height: 100%; object-fit: cover; }
.tcard__frame span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5rem;
}
.tcard__body { padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.tcard__name { font-size: 1.1875rem; margin: 0; }
.tcard__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0.45rem 0 0.9rem;
}
.tcard__bio { font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.tcard__bio mark {
  background: #FBF0D8;
  color: var(--ink-soft);
  padding: 0 0.12em;
  border-radius: 1px;
}

/* ==========================================================================
   NAV CARET (restored — the earlier block replacement dropped these rules)
   ========================================================================== */

.nav__caret {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  transition: transform 140ms ease;
  /* The button is the control. Without this the tap target resolves to the SVG
     and some mobile engines drop the synthesized click. */
  pointer-events: none;
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret,
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) { .nav__caret { transition: none; } }

/* ==========================================================================
   SINGLE-PAGE BUILD (2.0)
   Longer prose, fewer cards. The argument carries the page rather than a grid
   of tiles, so body copy runs larger and sections breathe more.
   ========================================================================== */

.sec--tall { padding-block: clamp(4.5rem, 10vw, 8rem); }

.prose { max-width: 64ch; }
.prose p {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
  margin-bottom: 1.35em;
}
.prose p:last-child { margin-bottom: 0; }
.prose--onDark p { color: #C4CED3; }

.sec__h {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  letter-spacing: -0.025em;
  max-width: 26ch;
}
.sec--dark .sec__h { color: #FFFFFF; }

/* --- simplified masthead -------------------------------------------------- */

.masthead--bare .nav__links { gap: 0; }

/* --- team row: five across, one credential line each ---------------------- */

.crew {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 34rem) { .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .crew { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.crew__face {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(160deg, #E4E9EC 0%, #F4F6F7 100%);
  border: 1px solid var(--rule);
}
.crew__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crew__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; margin: 0.85rem 0 0.2rem; }
.crew__role {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.6rem;
}
.crew__cred { font-size: 0.8125rem; line-height: 1.55; color: var(--slate); margin: 0; }
.crew__cred mark { background: #FBF0D8; color: var(--ink-soft); padding: 0 0.12em; border-radius: 1px; }

/* --- partner badge slot --------------------------------------------------- */

.badge {
  /* The badge carries its own white panel and navy field, so no container
     chrome: a border or padding would frame a graphic that is already framed. */
  display: block;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  width: 232px;
  max-width: 100%;
}
@media (max-width: 48rem) { .badge { width: 200px; } }
.badge img { width: 100%; height: auto; display: block; }
.badge__slot {
  height: 3.25rem;
  width: 8.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--muted);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem;
}
.badge__text { font-size: 0.875rem; color: var(--ink-soft); max-width: 34ch; margin: 0; }

/* --- inline anchor list for the long page --------------------------------- */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
}
.jump a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
}
.jump a:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* ==========================================================================
   HERO PROOF CARD + TIGHTER VERTICAL RHYTHM (2.2)
   ========================================================================== */

/* --- spacing ------------------------------------------------------------- */

/* Was clamp(4.5rem, 10vw, 8rem): nine sections of that stacked ~2,300px of
   empty space onto the page. */
.sec--tall { padding-block: clamp(2.25rem, 4.2vw, 3.75rem); }
.sec { padding-block: clamp(2.25rem, 4.2vw, 3.75rem); }
.proof { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.heroimg__inner { padding-block: 0.875rem clamp(1.75rem, 3.5vw, 3rem); }

.sec__h + .prose, .sec__h + div > .prose { margin-top: 1.125rem !important; }
.prose p { margin-bottom: 1.15em; }

.divider img { height: clamp(110px, 18vw, 200px); }

/* Two light sections meeting need a hairline; light-meets-dark does not. */
.sec--rule { border-top: 1px solid var(--rule); }

/* The masthead is sticky and the copy now runs close beneath it. */
.masthead { box-shadow: 0 1px 0 rgba(15,21,25,0.04); }

/* --- hero split ---------------------------------------------------------- */

.heroimg__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .heroimg__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

/* Below the split the card drops beneath the buttons, above the jump list. */
.heroimg__aside { order: 2; }
@media (min-width: 60rem) { .heroimg__aside { order: 0; } }

/* --- rotating proof card ------------------------------------------------- */

.pcard {
  background: var(--ink);
  border-radius: 4px;
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  box-shadow: 0 18px 40px rgba(15, 21, 25, 0.18);
  max-width: 30rem;
}
.pcard__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #84BFF2;
  margin: 0 0 1rem;
}
.pcard__stage { position: relative; }
.pcard__item { display: none; }
.pcard__item[data-active="true"] { display: block; }
.pcard__k {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0;
}
.pcard__unit { font-size: 0.42em; letter-spacing: 0; }
.pcard__t {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #93A1A8;
  margin: 0.7rem 0 0.5rem;
}
.pcard__d { font-size: 0.9375rem; line-height: 1.55; color: #C4CED3; margin: 0; }

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid #2A363D;
}
.pcard__src { font-family: var(--font-mono); font-size: 0.625rem; color: #7E8C94; margin: 0; }

.pcard__dots { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pcard__dot {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  border-radius: 2px;
}
.pcard__dot::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: #4A5A64;
  transition: background-color 140ms ease;
}
.pcard__dot[aria-selected="true"]::before { background: #84BFF2; }
.pcard__dot:hover::before { background: #A9B6BC; }

@media (prefers-reduced-motion: reduce) { .pcard__dot::before { transition: none; } }

/* No narrow-width scrim. An earlier build added one to fix a contrast failure
   that turned out to be an artifact of the measurement harness (element
   screenshots scroll the sticky masthead over the capture). The baked-in wash
   already guarantees the darkest pixel sits at 0.581 luminance at every width,
   so the extra overlay only produced a visible opacity jump at the breakpoint.
   Verified 5.17:1 or better for the kicker at 1280, 900, 700, 560 and 390. */

/* ==========================================================================
   PROOF CARD 2.3 — per-card eyebrows, stable height
   ========================================================================== */

/* The three cards have different copy lengths. Stacking them in one grid cell
   makes the card as tall as its tallest state, so rotation cannot shift the
   hero. visibility (not display) keeps the box measured; it also removes the
   hidden cards from the accessibility tree. */
.pcard__stage { display: grid; }
.pcard__item {
  grid-area: 1 / 1;
  display: block;
  visibility: hidden;
}
.pcard__item[data-active="true"] { visibility: visible; }

/* The eyebrow now sits inside each card and carries the workload. */
.pcard__item .pcard__eyebrow { margin: 0 0 0.65rem; }

/* "Gbps encrypted" is a long unit; hold it on the figure's line without
   crowding the numeral. */
.pcard__unit { font-size: 0.34em; letter-spacing: 0.01em; white-space: nowrap; }

.pcard__d { margin-top: 0.65rem; }

/* Keep the source line on one line; the footer is a flex row with the dots. */
.pcard__src { white-space: nowrap; }

/* The blue half of the headline was display:block, which forced a line break at
   every width. Inline lets it sit on one line where there is room and wrap
   naturally where there is not. */
.heroimg .hero__display em { display: inline; }

/* The first paragraph carried a 1.75rem top margin, which pushed the copy
   column 28px below the card. The headline above already provides the gap. */
.heroimg__copy .hero__lede:first-child { margin-top: 0; }

/* Restores the deeper kicker colour over the washed hero. Brand blue at 11px
   cannot clear 4.5:1 against the wash at any usable opacity; this rule was lost
   in an earlier stylesheet repair and the kicker silently reverted. */
.heroimg .eyebrow { color: var(--signal-deep); }

/* The headline is now its own full-width block, so the two-column row beneath
   needs its own separation. */
.heroimg__grid { margin-top: clamp(1.1rem, 2vw, 1.6rem); }

/* ==========================================================================
   HERO HEADLINE + NAVY CARD (2.5)
   ========================================================================== */

/* Back to two lines. Forcing one line cost 0.35rem of size and stretched the
   line across the full content width, which thinned it out on wide monitors.
   Breaking after "High-Performance" also gives the blue half its own line,
   where the colour contrast does more work. */
.heroimg .hero__display {
  max-width: 20ch;
  font-size: clamp(2.2rem, 5.2vw, 4.5rem);
}
.heroimg .hero__display em { display: block; }

/* --- proof card in navy --------------------------------------------------- */

.pcard {
  /* Navy rather than ink: it picks up the blue already in the logo, the kicker
     and the hero image, so the card reads as part of the brand rather than a
     panel dropped on top. Far enough from brand blue (#0169C2) that the kicker
     keeps its separation. */
  background: #0B2440;
  box-shadow: 0 22px 46px rgba(7, 32, 64, 0.26);
}
.pcard__foot { border-top-color: #1C3A5C; }
.pcard__dot::before { background: #3C5A7C; }
.pcard__dot:hover::before { background: #9FC4E4; }

/* --- jump list gets a label ---------------------------------------------- */

.jump__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  align-self: center;
}

/* The source line sat at 4.52:1 on navy — passing, but with almost no margin.
   Lifted for headroom. */
.pcard__src { color: #8B99A1; }

/* ==========================================================================
   PROBLEM ROTATOR (2.6)
   Mirrors the hero: prose left, rotating card right. Colours unchanged from
   the tradeoff cells it replaces.
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.rcard {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
}
.rcard__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.rcard__h { font-size: 1.0625rem; margin: 0 0 0.6rem; }
.rcard__d { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.rcard__d + .rcard__d { margin-top: 0.8rem; }

.rcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.rcard__count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}
.rcard__dot::before { background: var(--rule); }
.rcard__dot[aria-selected="true"]::before { background: var(--signal); }
.rcard__dot:hover::before { background: var(--slate); }

/* Shared rotator mechanics: stack the states in one grid cell so the card is
   as tall as its tallest state and rotation cannot shift the layout. */
.rot__stage { display: grid; }
.rot__item { grid-area: 1 / 1; visibility: hidden; }
.rot__item[data-active="true"] { visibility: visible; }

/* ==========================================================================
   ARCHITECTURE SPLIT (2.7)
   Copy and diagram side by side, mirroring the hero and problem sections. The
   diagram takes the wider column: it is a fixed 640x400 viewBox, so a narrow
   column scales its internal labels below legibility.
   ========================================================================== */

.split--figure { align-items: start; }
/* Side by side only from 68rem. The generic .split rule kicks in at 60rem, so
   without this reset the diagram spent 960-1088px in the *narrow* column and
   scaled its 640-unit viewBox down to a 438px render. Stacked, it gets the full
   content width instead. */
@media (max-width: 67.999rem) {
  .split--figure { grid-template-columns: minmax(0, 1fr); }
}
/* Diagram on the left, copy on the right. The diagram keeps the wider column:
   its viewBox is a fixed 640 units, so column width drives label legibility. */
@media (min-width: 68rem) {
  .split--figure { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

/* On mobile the diagram leads: it is the subject of the section, not a
   supporting card, so it earns the top slot. */
.split--figure > .split__fig { order: -1; }

.split--figure .diagram { max-width: none; margin-top: 0; }

/* Copy comes up a step to match the diagram's visual weight, and sits level
   with the top of the diagram rather than centred against it. */
.split--figure .prose p { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
@media (min-width: 68rem) { .split--figure .prose { padding-top: 0.35rem; } }

/* The diagram's viewBox is a fixed 640 units wide, so on a 390px screen every
   label renders at 48% of its authored size. Scaling the type up in user units
   at narrow widths keeps it readable without a second diagram. */
@media (max-width: 34rem) {
  /* Capped at 22px: the kernel box carries a two-line label spaced 26 units
     apart, so anything larger overlaps itself. */
  .diagram .dg-title { font-size: 22px; }
  .diagram .dg-lane { font-size: 15px; }
}

/* ==========================================================================
   S1 FULL-HEIGHT CARD (2.8)
   The section number, heading and prose move into the left column so the card
   can occupy the full height of the right one. The card's height is therefore
   driven by the copy beside it: add copy on the left and the card grows.
   ========================================================================== */

.split--tall { align-items: stretch; }
@media (min-width: 60rem) {
  .split--tall { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.split--tall .rcard {
  display: flex;
  flex-direction: column;
}
.split--tall .rot__stage { flex: 1 1 auto; }
/* Pins the dots to the bottom regardless of which state is showing. */
.split--tall .rcard__foot { margin-top: auto; }

/* The left column is narrower now, so the heading and body copy come up a step
   to keep the line length comfortable. */
.split--tall .sec__h { font-size: clamp(1.9rem, 4vw, 3.25rem); max-width: 22ch; }
.split--tall .prose p { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.split--tall .sec__num { margin-bottom: 0.65rem; }

/* The arrow is inline SVG rather than U+2194. Google Fonts' Latin subsets do
   not carry arrow glyphs, so a character would fall back to another typeface —
   one substituted letterform at 52px is very visible. Drawing it means the
   stroke weight and cap height can be matched to the headline. */
.glyph-arrow {
  /* Box matches the 26x12 viewBox ratio so the arrow is not letterboxed inside
     a square, and the em width lets it scale with the headline. */
  width: 1em;
  height: 0.462em;
  vertical-align: 0.06em;
  margin-inline: 0.16em 0.12em;
}

/* Short headline, so let it run wider before wrapping. */
.split--tall .sec__h { max-width: 26ch; }

/* ==========================================================================
   NAVY SYSTEM (3.0)
   Every heavy, deliberate surface now shares one dark tone: the proof card,
   the primary buttons, the dark full-width sections and the footer. Ink
   survives as a text colour only, which is what it is good at.
   ========================================================================== */

:root { --navy: #0B2440; }

.btn--primary { background: var(--navy); }
.btn--primary:hover { background: var(--signal); }

.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #FFFFFF; }

.sec--dark { background: var(--navy); }
.proof { background: var(--navy); }
.footer { background: var(--navy); }

/* Rules and dividers inside the dark surfaces lift to suit navy. */
.gauge__track { background: #1C3A5C; }
.stats { background: #1C3A5C; border-color: #1C3A5C; }
.divider { background: var(--navy); }
.footer__line { border-top-color: #1C3A5C; }
.method b { color: #FFFFFF; }

/* Stat cards sit a shade above the section they are on. */
.sec--dark .stat { background: #0E2C4E; }

/* ==========================================================================
   JUMP LIST + NUMBERED CARD TAGS (3.1)
   ========================================================================== */

/* The label now reads as a control rather than stray text: heavier, ink
   coloured, with a chevron pointing at what follows. */
.jump__label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.12em;
}
.jump__chev { width: 0.5rem; height: 0.5rem; flex: none; }

.jump { align-items: center; gap: 0.6rem 1.25rem; }

.jump a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border-bottom-color: var(--muted);
}
.jump a:hover { border-bottom-width: 2px; padding-bottom: calc(0.2rem - 1px); }

/* Section number, matching the numbering on each section's own eyebrow. */
/* The jump list sits over the washed hero image, where brand blue at this size
   measures 2.84:1. Same constraint as the hero kicker, same solution. */
.jump__n { color: var(--signal-deep); font-weight: 500; }

/* Card tags carry the same 1/2/3 as the enumeration in the copy beside them. */
.rcard__n {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--signal);
  color: #FFFFFF;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.06em;
}
.rcard__tag { display: inline-flex; align-items: center; }

/* ==========================================================================
   MERGED VALIDATION SECTION (3.2)
   ========================================================================== */

/* Stats stack one per row in a column rather than a 2x2 grid. */
.stats--rows { grid-template-columns: minmax(0, 1fr) !important; margin-top: 0; }

/* The 8:1 figure comes from field testing, not the Rio Rancho testbeds, so it
   sits outside the measured set rather than as a fourth peer. */
.aside-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate);
  margin: 1.1rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
  max-width: none;
}
.aside-note b { color: var(--ink); font-weight: 600; }

#performance .badge { margin-top: clamp(1.5rem, 3vw, 2rem); }
#performance .hero__actions { margin-top: 1.5rem !important; }

/* ==========================================================================
   SPECIFICITY FIXES (3.2)
   ========================================================================== */

/* `.stat p` (0,1,1) has been silently beating `.stat__k` and `.stat__t` (0,1,0)
   since the stat cards were introduced, so the figures rendered at body size in
   body colour rather than large and blue. Both keys are <p> elements, hence the
   collision. Matching specificity restores the intended treatment. */
.stat p.stat__k {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing: -0.025em;
  color: var(--signal);
  line-height: 1;
  margin: 0;
}
.stat p.stat__t {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0.75rem 0 0.55rem;
}
.sec--dark .stat p.stat__k { color: #84BFF2; }
.sec--dark .stat p.stat__t { color: #93A1A8; }

/* The white bold in the methodology footnote was set for the dark sections in
   3.0; on the light Validation section it rendered invisible. */
.method b { color: var(--ink); }
.sec--dark .method b { color: #FFFFFF; }

/* ==========================================================================
   VALIDATION GRID (3.4)
   ========================================================================== */

/* Four results in a 2x2, full section width. A 2x2 needs more room than the
   0.85fr right-hand column gave it, so the grid sits below the intro block
   rather than beside it. */
.stats--quad {
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (min-width: 46rem) { .stats--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "8-to-1 reduction" is longer than "200 Gbps"; let it sit a step down so the
   four figures read as a set rather than one wrapping awkwardly. */
.stats--quad .stat p.stat__k { font-size: clamp(1.75rem, 2.9vw, 2.4rem); }

/* Source links stack under the badge in the narrower column. */
.stack-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.stack-links .btn { text-align: center; }

/* Methodology footnote spans the section and drops a step: it is reference
   material, not reading material. */
.method--wide {
  max-width: none;
  font-size: 0.6875rem;
  line-height: 1.75;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* ==========================================================================
   S1 CARD TYPE HIERARCHY (3.5)
   The claim was the smallest thing in the card. "Fast, but fixed" is the
   argument; the description only supports it. Order of weight is now
   headline > tag > body, and the tag joins the numbered badge in brand blue.
   ========================================================================== */

.rcard__tag {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--signal);
  margin-bottom: 0.9rem;
}

.rcard__h {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
}

.rcard__d {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.rcard__d + .rcard__d { margin-top: 0.9rem; }

/* Badge scales with the larger tag. */
.rcard__n {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.55rem;
  font-size: 0.625rem;
}

/* Lead-in phrase that names what the section is doing and points at the
   numbered cards beside it. Blue and heavier so the eye finds it before the
   sentence it introduces. */
.lead-in {
  color: var(--signal);
  font-weight: 600;
}

/* ==========================================================================
   CONTACT FORM STATE (4.6)
   ========================================================================== */

.formnote {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: 3px;
  font-size: 0.9375rem;
  border-left: 3px solid var(--signal);
  background: var(--signal-dim);
  color: var(--ink);
  max-width: 34rem;
}
/* Failure states are amber rather than red: nothing has gone wrong for the
   reader, they just need to adjust something. */
.formnote--bad {
  border-left-color: #A8620E;
  background: #FBF0D8;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a field they can still read is a field they will fill. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal);
}
.field .req { color: var(--signal-deep); }

/* ==========================================================================
   PROBLEM CARD HEADER (4.7)
   Labels what the box is. Kept short deliberately: the copy beside it already
   makes the argument, so a longer header would restate it.
   ========================================================================== */

.rcard__head {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

/* With the footer label gone the dots stand alone, so push them right. */
.rcard__foot--dotsonly { justify-content: flex-end; }

/* ==========================================================================
   ROTATOR CONTROLS + DARK CARD (4.8)
   ========================================================================== */

.rot__ctrls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rot__nav {
  width: 2.75rem;              /* 44px touch target */
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
}
.rot__nav svg {
  width: 0.6rem;
  height: 0.6rem;
  pointer-events: none;        /* the button is the control, not the glyph */
}
/* One chevron asset, rotated: guarantees the two arrows are mirror images. */
.rot__nav[data-rot-prev] svg { transform: rotate(90deg); }
.rot__nav[data-rot-next] svg { transform: rotate(-90deg); }
.rot__nav:hover { color: var(--ink); background: var(--signal-dim); }

.pcard .rot__nav { color: #7E8C94; }
.pcard .rot__nav:hover { color: #FFFFFF; background: #17334F; }
.rcard--dark .rot__nav { color: #7E8C94; }
.rcard--dark .rcard__dot:hover::before { background: #9FC4E4; }

@media (prefers-reduced-motion: reduce) { .rot__nav svg { transition: none; } }

/* --- dark variant of the approach card ----------------------------------- */

.rcard--dark {
  background: #0E2C4E;
  border-color: #1C3A5C;
}
.rcard--dark .rcard__head {
  color: #FFFFFF;
  border-bottom-color: #1C3A5C;
}
.rcard--dark .rcard__h { color: #FFFFFF; }
.rcard--dark .rcard__d { color: #C4CED3; }
.rcard--dark .rcard__foot { border-top-color: #1C3A5C; }
.rcard--dark .rcard__dot::before { background: #3C5A7C; }
.rcard--dark .rcard__dot[aria-selected="true"]::before { background: #84BFF2; }

/* Sub-heading in a split's copy column, on the dark band. */
.split__sub {
  font-size: 1.0625rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.6rem;
}
.sec--dark .split__sub { color: #FFFFFF; }

/* Arrows lifted from 4.07:1 to 5.31:1 on the dark card — legal for a UI
   control at 3:1, but they read as disabled at the lower value. */
.pcard .rot__nav,
.rcard--dark .rot__nav { color: #93A1A8; }

/* This section's headline is far longer than S1's, and at the shared size it
   broke to four lines in the narrower column. */
#platform .sec__h { font-size: clamp(1.75rem, 3.2vw, 2.5rem); max-width: 24ch; }

/* ==========================================================================
   DEPLOYMENT OPTIONS GRID (4.9)
   Two ready-made lists on top, two integration paths beneath: the split
   matches the headline's "deploy / integrate / extend".
   ========================================================================== */

.deploy {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .deploy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.deploy__cell h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.deploy__cell p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.deploy__cell .tick { margin: 0; }

/* --- dark-band variants --------------------------------------------------
   The elements this section replaced carried their own dark styling, so the
   new ones need it explicitly rather than by inheritance. Every value below
   is measured against the navy band in the notes at the end of this block. */

.sec--dark .deploy__cell h3 {
  color: #FFFFFF;
  border-bottom-color: #1C3A5C;
}
.sec--dark .deploy__cell p { color: #C4CED3; }
.sec--dark .deploy__cell .tick li { color: #C4CED3; }
/* Tick marks lift from brand blue to the lighter blue used elsewhere on navy;
   #0169C2 measures 2.3:1 against #0B2440 and reads as a smudge. */
.sec--dark .deploy__cell .tick li::before { color: #84BFF2; }

/* Measured against #0B2440:
     #FFFFFF heading    15.66:1
     #C4CED3 body        9.78:1
     #84BFF2 tick        7.99:1
     #1C3A5C rule        1.51:1  (decorative divider, no minimum applies)  */

/* ==========================================================================
   ROTATOR CONTROL FIT (4.10)
   The hero card's footer holds a nowrap source line plus three controls. At
   44x44 each that needed 399px inside a 363px box, so the last arrow escaped
   the card's rounded corner. Two changes, belt and braces:
   ========================================================================== */

/* 1. The visual button shrinks to 36px while the *touch target* stays 44px via
      a transparent overlay. Accessibility guidance is about the hit area, not
      the ink, so nothing is lost. */
.rot__nav {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
}
.rot__nav::after {
  content: "";
  position: absolute;
  /* Vertical only. Extending horizontally too put the overlay 4px past the
     last button, and that overflow was enough to wrap the footer onto a second
     row at every width. Target is 36x44 — well above the 24px WCAG minimum. */
  inset: -4px 0;
}

/* 2. The footer may wrap. On a narrow card the controls drop to their own row
      rather than overflowing — the failure mode this bug was. */
.pcard__foot,
.rcard__foot {
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 0.75rem;
}

/* If the footer ever does wrap, the controls should still sit right rather than
   jumping to the left edge under the source line. */
.rot__ctrls { margin-left: auto; }

/* ==========================================================================
   VALIDATION INTRO — THREE ACROSS (5.1)
   Copy, badge and source links in one row rather than copy beside a stacked
   pair. The row height becomes the tallest item instead of the sum of two,
   and the three blocks align top so they read left to right.
   ========================================================================== */

.intro3 {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
}

/* Between 46rem and 68rem the copy sits above, badge and links side by side.
   Three across at that width would leave a ~250px copy column. */
@media (min-width: 46rem) {
  .intro3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro3 > .prose { grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
  /* Badge is a fixed 232px and the widest button needs ~200px, so both side
     columns are sized to content and the copy takes the rest. */
  .intro3 { grid-template-columns: minmax(0, 1fr) auto auto; }
  .intro3 > .prose { grid-column: auto; }
}

/* The badge and links carried top margins from the stacked layout. */
.intro3 .badge { margin-top: 0; }
.intro3 .stack-links { margin-top: 0; }
#performance .intro3 .badge { margin-top: 0; }
#performance .intro3 .hero__actions { margin-top: 0 !important; }

/* Buttons stay stacked in their column: "Read the white paper" needs about
   200px, so three across would break. */
.intro3 .stack-links { min-width: 13rem; }

/* The `.sec__h + .prose` rule sets an 18px top margin with !important, which
   dropped the copy 18px below the badge and links. The grid supplies the gap. */
/* `.sec__h + div > .prose` matches this copy — .intro3 is the div following the
   heading — and its specificity (0,2,1) beat a plain .intro3 > .prose. */
#performance .intro3 > .prose { margin-top: 0 !important; }

/* ==========================================================================
   BUTTON HOVER CONSISTENCY (5.2)
   Primary lightened to brand blue on hover while ghost darkened to navy — two
   opposite directions on the same page. Everything now moves the same way:
   navy at rest, brand blue on hover. Lightening on hover reads as the control
   activating; darkening reads as it receding, which is the wrong signal for a
   thing you want clicked.
   ========================================================================== */

.btn--ghost:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #FFFFFF;
}

/* In the Validation section the three source links are peers — no one of them
   is the primary action — so they share one solid treatment rather than one
   filled button and two outlines. */
.stack-links .btn {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.stack-links .btn:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #FFFFFF;
}