/* ============================================================================
   R13 Labs — site styles.

   Layers on top of the design system in assets/ds/ (which is a verbatim copy of
   the exported bundle — replace that folder wholesale when the DS updates, and
   don't edit it here).

   The marketing pages use a warmer, darker slice of the palette than the DS
   semantic aliases cover, so the page-level surfaces/text ramps are declared
   below and mapped onto DS primitives where they line up.
   ============================================================================ */

:root {
  /* Surfaces -------------------------------------------------------------- */
  --canvas: var(--canvas-black);      /* #140e0b */
  --surface-card: #1c140e;            /* standard content card */
  --surface-card-alt: #1e150f;        /* home product cards */
  --surface-panel: #1a120d;           /* secondary buttons, contact form */
  --surface-deep: #180f0a;            /* automotive diagram plate */
  --surface-well: #0f0a07;            /* inputs, device screen */
  --surface-menu: #1c140e;            /* nav dropdown */

  /* Lines ----------------------------------------------------------------- */
  --line-card: #2a211a;
  --line-card-alt: #291f19;
  --line-menu: #2d231c;
  --line-button: #3a2e24;
  --line-input: #302620;
  --line-chip: #372c22;
  --line-pill: #463a2e;
  --line-rule: #241c16;
  --line-footer: #221a14;
  --line-footer-inner: #1e1712;

  /* Text ------------------------------------------------------------------ */
  --ink: #ffffff;
  --ink-quiet: #eae6e1;
  --ink-pill: #d9d3cc;
  --ink-link: #d2ccc5;
  --ink-lead: #a9a198;
  --ink-body: #a49c93;
  --ink-caption: #9d958c;
  --ink-soft: #8d857c;
  --ink-muted: #7d756c;
  --ink-faint: #635c54;
  --ink-hover-dim: #9f978e;

  /* Accent ---------------------------------------------------------------- */
  --lime: var(--accent);              /* #8fca38 */
  --lime-hover: var(--accent-hover);  /* #9fd34f */
  --lime-text: #c7e896;               /* label on a lime tint, high-confidence % */
  --lime-tint: rgba(143, 202, 56, .12);
  --lime-wash: rgba(143, 202, 56, .14);
  --lime-glow-sm: 0 0 18px rgba(143, 202, 56, .3);
  --lime-glow: 0 0 22px rgba(143, 202, 56, .3);
  --lime-glow-ring: 0 0 28px rgba(143, 202, 56, .28);

  /* Confidence bands — the three steps the demo's bars and figures move
     through as a dimension loses the signals behind it. */
  --conf-high: var(--lime);
  --conf-high-text: var(--lime-text);
  --conf-mid: #b9a24a;
  --conf-mid-text: #c0b591;
  --conf-low: #6b5a2e;
  --conf-low-text: var(--ink-muted);

  /* Layout ---------------------------------------------------------------- */
  --gutter: 40px;
  --nav-height: 70px;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  min-height: 100vh;
  min-height: 100svh; /* mobile browsers: ignore the collapsing address bar */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}

a:hover { color: var(--lime-hover); }

::selection {
  background: var(--lime);
  color: var(--canvas);
}

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

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 100;
  transform: translate(-50%, -160%);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--canvas);
  font-size: 15px;
  font-weight: 500;
  transition: transform .18s;
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  color: var(--canvas);
}

/* ---------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------- */

/* Sections declare their own vertical rhythm via --pt / --pb so the generous,
   very deliberate spacing of the design survives verbatim. */
.section {
  position: relative;
  padding: var(--pt, 0px) var(--gutter) var(--pb, 0px);
}

.section--center,
.text-center { text-align: center; }
.section--clip { overflow: hidden; }

.container {
  max-width: var(--w, 1240px);
  margin-inline: auto;
}

/* Hairline rule that opens a section, as used on the interior pages. */
.rule {
  border-top: 1px solid var(--line-rule);
  padding-top: var(--rule-pt, 110px);
}

.stack > * + * { margin-top: var(--stack, 24px); }

/* Measure + rhythm utilities. The designs set a bespoke max-width and top
   margin on almost every block; expressing those as one custom property each
   keeps the exact values visible in the markup without scattering full inline
   style rules through it. */
.measure {
  max-width: var(--measure, none);
  margin-inline: auto;
}

.mt-6 { margin-top: 6px }
.mt-8 { margin-top: 8px }
.mt-10 { margin-top: 10px }
.mt-12 { margin-top: 12px }
.mt-14 { margin-top: 14px }
.mt-16 { margin-top: 16px }
.mt-18 { margin-top: 18px }
.mt-22 { margin-top: 22px }
.mt-24 { margin-top: 24px }
.mt-26 { margin-top: 26px }
.mt-28 { margin-top: 28px }
.mt-30 { margin-top: 30px }
.mt-34 { margin-top: 34px }
.mt-36 { margin-top: 36px }
.mt-40 { margin-top: 40px }
.mt-44 { margin-top: 44px }
.mt-48 { margin-top: 48px }
.mt-52 { margin-top: 52px }
.mt-56 { margin-top: 56px }
.mt-60 { margin-top: 60px }
.mt-64 { margin-top: 64px }
.mt-70 { margin-top: 70px }
.mt-80 { margin-top: 80px }

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */

h1, h2, h3 { margin: 0; }

.h1 {
  margin-inline: auto;
  font-size: clamp(48px, 5.8vw, 80px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.h1--hero {
  font-size: clamp(56px, 7.2vw, 94px);
  line-height: 1.03;
}

.h1--product { font-size: clamp(46px, 5.4vw, 76px); }

.h1--contact {
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.06;
}

.h2 {
  margin-inline: auto;
  font-size: clamp(36px, 4.2vw, 54px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.h2--lg {
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.06;
}

.h2--cta {
  font-size: clamp(38px, 4.4vw, 58px);
  text-wrap: balance;
}

.h2--sm {
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.1;
}

.h3 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.h3--sm { font-size: 19px; }
.h3--lg { font-size: 22px; }
.h3--xl { font-size: 24px; }
.h3--2xl { font-size: 26px; }

/* The DS base reset already zeroes margins on p/h1–h6, so these only ever set
   margin-inline — leaving the .mt-* utilities free to own vertical rhythm. */
.lead {
  margin-inline: auto;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-lead);
  text-wrap: pretty;
}

.body-lg {
  margin-inline: auto;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-lead);
  text-wrap: pretty;
}

.body-lg--loose { line-height: 1.6; }

.body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* The 22px question/answer lines that carry the Science cards. */
.card__lead {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.body--card {
  line-height: 1.55;
}

/* The oversized single-sentence statements that punctuate the long pages. */
.statement {
  margin-inline: auto;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
}

.statement--sm {
  font-size: 24px;
  line-height: 1.4;
}

.statement--prose {
  font-size: 24px;
  line-height: 1.5;
  color: var(--ink-quiet);
  text-wrap: pretty;
}

.note {
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.note a { color: var(--ink-link); }

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-muted);
}

.eyebrow--sm { font-size: 11.5px; }

.mono-label {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--ink-faint);
}

.arrow-link { font-size: 17px; }
.arrow-link--sm { font-size: 15.5px; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}

.btn--primary {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--canvas);
  box-shadow: var(--lime-glow);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--lime-hover);
  border-color: var(--lime-hover);
  color: var(--canvas);
}

.btn--secondary {
  border-color: var(--line-button);
  background: var(--surface-panel);
  color: var(--ink);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.btn--ghost {
  border-color: var(--line-button);
  background: transparent;
  color: var(--ink-link);
  padding: 12px 24px;
  font-size: 15px;
}

.btn--ghost:hover { border-color: var(--ink-muted); color: var(--ink-link); }

.btn--sm {
  padding: 10px 22px;
  font-size: 15px;
  box-shadow: var(--lime-glow-sm);
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* A lone CTA keeps its intrinsic width rather than stretching to the row. */
.btn-row .btn:only-child { flex: 0 0 auto; }

.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  background: linear-gradient(180deg, rgba(20, 14, 11, .94) 62%, rgba(0, 0, 0, 0));
}

.nav__brand { display: flex; align-items: center; }
.nav__brand img { height: 34px; width: auto; }
.nav__brand:hover { color: var(--ink); }

/* On desktop the panel dissolves so brand / links / CTA stay the three flex
   children the design lays out with space-between. */
.nav__panel { display: contents; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 16px;
  transition: color .18s;
}

.nav__trigger {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

.nav__trigger:hover,
.nav__trigger[aria-expanded='true'] { color: var(--ink-hover-dim); }

.nav__trigger svg { transition: transform .18s; }
.nav__trigger[aria-expanded='true'] svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 16px;
}

.nav__dropdown[hidden] { display: none; }

.nav__dropdown-panel {
  display: flex;
  flex-direction: column;
  background: var(--surface-menu);
  border: 1px solid var(--line-menu);
  border-radius: 16px;
  padding: 8px;
  min-width: 224px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
}

.nav__dropdown-panel a {
  display: block;
  padding: 11px 15px;
  border-radius: 10px;
  font-size: 15.5px;
}

.nav__dropdown-panel a:hover,
.nav__dropdown-panel a:focus-visible {
  background: #251c16;
  color: var(--ink);
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 22px;
}

.nav__toggle-box span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

.nav__toggle[aria-expanded='true'] .nav__toggle-box span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-box span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--line-card);
  border-radius: 24px;
  padding: 32px 30px;
  text-align: left;
}

.card--roomy { padding: 34px 32px; }
.card--wide { padding: 32px 34px; }
.card--tall { padding: 36px 34px; }

.card__link {
  color: var(--ink);
  border-bottom: 1px solid #3a3a3a;
}

.grid {
  display: grid;
  gap: 20px;
  margin-inline: auto;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pill-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pill {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--ink-pill);
  border: 1px solid var(--line-pill);
  border-radius: 999px;
  padding: 11px 22px;
  background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Shared decorative art
   --------------------------------------------------------------------------- */

/* Faint blueprint grid. --grid-mask is set per use because every hero fades it
   from a different origin. */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--grid-a, .04)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, var(--grid-a, .04)) 1px, transparent 1px);
  background-size: var(--grid-size, 68px) var(--grid-size, 68px);
  -webkit-mask-image: var(--grid-mask, radial-gradient(80% 80% at 50% 30%, #000 20%, transparent 78%));
  mask-image: var(--grid-mask, radial-gradient(80% 80% at 50% 30%, #000 20%, transparent 78%));
}

/* The wide elliptical light pool that sits under every closing CTA. */
.cta-glow {
  position: absolute;
  left: 50%;
  bottom: -250px;
  transform: translateX(-50%);
  width: 1000px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, var(--glow-a, .2)), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: #fff;
  animation: r13pulse var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}

.star--strong { animation-name: r13pulse-strong; }

/* Icon node used in the engine / venues diagrams. */
.node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size, 52px);
  height: var(--size, 52px);
  border-radius: 50%;
  border: 1.3px solid rgba(255, 255, 255, var(--node-a, .5));
  background: var(--node-bg, var(--surface-card));
}

.node--lit {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 22px rgba(255, 255, 255, .2);
}

.node-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--node-gap, 34px);
}

.node-row::before {
  content: '';
  position: absolute;
  left: var(--rail-inset, 24px);
  right: var(--rail-inset, 24px);
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, var(--rail-a, .28));
}

/* ---------------------------------------------------------------------------
   Home
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 148px var(--gutter) 0;
  text-align: center;
}

.hero__title { max-width: 1040px; }
.hero__lead { max-width: 620px; margin-top: 28px; }
.hero__actions { margin-top: 30px; }

.hero__stage {
  position: relative;
  height: 380px;
  margin-top: 4px;
  overflow: hidden;
}

/* Three prism beams fanning out of the horizon. */
.beam {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 900px;
  height: 560px;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
  background: linear-gradient(
    var(--angle, 90deg),
    transparent var(--s1, 46.5%),
    rgba(255, 255, 255, var(--beam-a, .14)) var(--s2, 48.5%),
    rgba(255, 255, 255, var(--beam-a, .14)) var(--s3, 51.5%),
    transparent var(--s4, 53.5%)
  );
  -webkit-mask-image: radial-gradient(60% 95% at 50% 100%, #000 10%, transparent 78%);
  mask-image: radial-gradient(60% 95% at 50% 100%, #000 10%, transparent 78%);
  animation: r13beam 7s ease-in-out var(--delay, 0s) infinite;
}

.hero__prism {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  animation: r13glow 5s ease-in-out infinite;
}

.hero__horizon {
  position: absolute;
  left: 50%;
  bottom: -210px;
  transform: translateX(-50%);
  width: 1100px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 58%, transparent 74%);
  filter: blur(4px);
}

.hero__hotspot {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  width: 300px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent 72%);
  filter: blur(8px);
}

.hero__wave {
  position: absolute;
  bottom: 72px;
  left: -40px;
  width: 3600px;
  height: 160px;
  max-width: none;
  animation: r13wave 34s linear infinite;
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, transparent, var(--canvas) 88%);
}

/* Product cards --------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card-alt);
  border: 1px solid var(--line-card-alt);
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
}

.product-card__art {
  position: relative;
  height: 210px;
}

.product-card__art .grid-overlay {
  --grid-a: .045;
  --grid-size: 42px;
  --grid-mask: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 85%);
}

.product-card__wash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--wash-w, 220px);
  height: 150px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, var(--wash-a, .12)), transparent 72%);
}

.product-card__scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__scene--stacked {
  flex-direction: column;
  gap: 16px;
}

.product-card__scene .node { --node-bg: var(--surface-card-alt); }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px 30px;
}

.product-card__body .body { color: var(--ink-body); line-height: 1.55; }
.product-card__body .arrow-link--sm { margin-top: 8px; }

.play-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 26px rgba(255, 255, 255, .22);
}

/* The design animates each card's artwork only while it is hovered. */
.product-card:hover .play-ring,
.product-card:focus-within .play-ring { animation: r13glowpulse 1.8s ease-in-out infinite; }

.product-card:hover .art-wave,
.product-card:focus-within .art-wave {
  transform-origin: center;
  animation: r13eq 1.4s ease-in-out infinite;
}

.product-card:hover .art-blink,
.product-card:focus-within .art-blink { animation: r13fade 1.8s ease-in-out var(--blink-delay, 0s) infinite; }

.product-card:hover .art-blink--fast,
.product-card:focus-within .art-blink--fast { animation: r13fade 1.6s ease-in-out var(--blink-delay, 0s) infinite; }

/* ---------------------------------------------------------------------------
   Technology
   --------------------------------------------------------------------------- */

.tech-hero {
  position: relative;
  padding: 120px var(--gutter) 90px;
  text-align: center;
  overflow: hidden;
}

.tech-hero__diagram {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 1500px;
  height: 330px;
  max-width: none;
}

.tech-hero__wash {
  position: absolute;
  left: 50%;
  top: 158px;
  transform: translate(-50%, -50%);
  width: 460px;
  height: 240px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .2), transparent 72%);
  filter: blur(6px);
}

.tech-hero__body { position: relative; padding-top: 150px; }

.tech-hero__beam { animation: r13flow 2.6s linear infinite; }
.tech-hero__dot { animation: r13pulse-strong var(--dur, 5s) ease-in-out var(--delay, 0s) infinite; }

/* The caption sits in normal flow under the lead, not in the backdrop — an
   absolutely positioned one collides with the refracted beam fan. */
.tech-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.tech-hero__trail {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

.tech-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--line-card);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.tech-hero__badge::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* The architecture diagram ------------------------------------------------

   A single column of grids joined by connector SVGs. The connectors stretch
   with preserveAspectRatio="none", so the column scales horizontally on its
   own — but their endpoint x-coordinates are baked to the desktop column
   counts, which is why they go once the grids reflow (see Responsive).
   ------------------------------------------------------------------------- */

.dia {
  max-width: 880px;
  margin-inline: auto;
}

.dia__link { height: 60px; }

.dia__link svg {
  width: 100%;
  height: 100%;
}

.dia__drift { animation: r13drift 1.8s linear infinite; }

.dia__signals {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.signal-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  border: 1px solid var(--line-card);
  border-radius: 12px;
  background: var(--surface-panel);
  color: var(--ink-link);
}

.signal-tile__label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
}

.dia__engine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  padding: 26px 32px;
  border: 1px solid var(--line-card);
  border-radius: 20px;
  background: var(--surface-panel);
}

.dia__engine-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 180px;
  background: radial-gradient(closest-side, var(--lime-wash), transparent 72%);
}

.dia__engine-prism {
  position: relative;
  flex: none;
  color: var(--lime);
}

.dia__engine-copy { position: relative; }

.dia__engine-copy p {
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* Prism state vector cards */
.psv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.psv-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid var(--line-card);
  border-radius: 16px;
  background: var(--surface-card);
}

.psv-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-pill);
}

.psv-card__bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.psv-card__caption {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.psv-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line-card);
  overflow: hidden;
}

.psv-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
}

.psv-bar--conf {
  height: 2px;
  border-radius: 1px;
}

.psv-bar--conf span { background: var(--lime); }

.dia__legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
}

.dia__legend-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}

.dia__legend-key::before {
  content: '';
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}

.dia__legend-key--conf::before {
  height: 2px;
  border-radius: 1px;
  background: var(--lime);
}

.dia__legend-note {
  letter-spacing: .16em;
  color: var(--ink-muted);
}

.dia__control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: center;
  padding: 26px 32px;
  border: 1px solid var(--line-card);
  border-radius: 20px;
  background: var(--surface-panel);
}

.dia__control p {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-body);
}

.dia__outputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.out-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border: 1px solid var(--line-card);
  border-radius: 16px;
  background: var(--surface-card);
  color: var(--lime);
}

.out-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-pill);
}

.out-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-body);
}

.dia__loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 22px;
  border: 1px dashed var(--line-menu);
  border-radius: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

.dia__loop svg {
  flex: none;
  color: var(--lime);
}

/* Confidence demo ---------------------------------------------------------

   The page's only stateful piece. Percentages, the band each row sits in and
   the status line all come from assets/js/confidence.js; the band arrives as
   data-band so the colours stay here in the token layer.
   ------------------------------------------------------------------------- */

.conf {
  margin-top: 56px;
  padding: 34px 36px 38px;
  border: 1px solid var(--line-card);
  border-radius: 24px;
  background: var(--surface-panel);
  text-align: left;
}

.conf__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.signal-toggle {
  padding: 10px 16px;
  border: 1px solid var(--line-chip);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}

.signal-toggle:hover { border-color: var(--ink-muted); }

.signal-toggle[aria-pressed='true'] {
  border-color: var(--lime);
  background: var(--lime-tint);
  color: var(--lime-text);
}

.signal-toggle[aria-pressed='true']:hover { border-color: var(--lime-hover); }

.conf__rows { margin-top: 34px; }

.conf__row {
  display: grid;
  grid-template-columns: 150px 1fr 92px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line-rule);
}

.conf__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  color: var(--ink-pill);
}

.conf__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line-rule);
  overflow: hidden;
}

.conf__fill {
  height: 6px;
  border-radius: 3px;
  background: var(--conf-high);
  transition: width .45s cubic-bezier(.4, 0, .2, 1), background .3s;
}

.conf__pct {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: right;
  color: var(--conf-high-text);
  transition: color .3s;
}

.conf__row[data-band='mid'] .conf__fill { background: var(--conf-mid); }
.conf__row[data-band='mid'] .conf__pct { color: var(--conf-mid-text); }
.conf__row[data-band='low'] .conf__fill { background: var(--conf-low); }
.conf__row[data-band='low'] .conf__pct { color: var(--conf-low-text); }

.conf__status {
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
}

/* One-to-three branch diagram --------------------------------------------- */

.fanout {
  position: relative;
  width: 600px;
  max-width: 100%;
  height: 208px;
  margin: 60px auto 0;
}

.fanout__hub {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1.4px solid var(--lime);
  box-shadow: var(--lime-glow-ring);
  background: var(--canvas);
  color: var(--lime);
}

.fanout__spine,
.fanout__drop {
  position: absolute;
  width: 1px;
  background: rgba(255, 255, 255, .28);
}

.fanout__spine { left: 50%; top: 76px; height: 34px; }
.fanout__drop { top: 110px; height: 26px; left: var(--x); }

.fanout__bar {
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 110px;
  height: 1px;
  background: rgba(255, 255, 255, .28);
}

.fanout__label {
  position: absolute;
  top: 136px;
  left: var(--x);
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   Science
   --------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding: var(--pt, 250px) var(--gutter) var(--pb, 120px);
  text-align: center;
  overflow: hidden;
}

.science-hero__waves {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 1900px;
  height: 260px;
  max-width: none;
}

.compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin-top: 56px;
}

.compare__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.compare__item .mono-label { color: var(--ink-muted); }

.compare__divider {
  width: 1px;
  height: 84px;
  background: var(--line-menu);
}

/* ---------------------------------------------------------------------------
   Company
   --------------------------------------------------------------------------- */

.manifesto p + p { margin-top: 28px; }

/* ---------------------------------------------------------------------------
   Aqademiq
   --------------------------------------------------------------------------- */

.split-hero {
  position: relative;
  padding: 200px var(--gutter) 80px;
  overflow: hidden;
}

.split-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}

.split-hero__copy .h1 { margin-inline: 0; margin-top: 18px; }
.split-hero__copy .lead { margin: 24px 0 0; max-width: 480px; }
.split-hero__copy .btn-row { margin-top: 36px; }

.platforms {
  display: flex;
  gap: 26px;
  margin-top: 30px;
}

.device-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
}

.device-stage__wash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), transparent 72%);
}

.device-stage__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: r13ring 5.2s ease-out var(--delay, 0s) infinite;
}

.phone {
  position: relative;
  width: 264px;
  height: 548px;
  border-radius: 44px;
  border: 1.5px solid var(--line-button);
  background: var(--surface-well);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 44px rgba(255, 255, 255, .07);
  overflow: hidden;
  flex: none;
}

.phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: #000;
  border: 1px solid #261d17;
}

.phone__screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 58px 22px 26px;
}

.phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phone__status span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.phone__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.phone__dial { position: relative; width: 150px; height: 150px; }

.phone__dial-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.phone__dial-readout strong {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.02em;
}

.phone__dial-readout span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.phone__caption {
  font-size: 13px;
  color: var(--ink-caption);
  text-align: center;
  line-height: 1.5;
}

.phone__controls {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.phone__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-chip);
}

.phone__control--primary {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 16px rgba(255, 255, 255, .2);
}

/* ---------------------------------------------------------------------------
   Venues
   --------------------------------------------------------------------------- */

.venues-hero__ripple {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 900px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  animation: r13ripple 6s ease-out var(--delay, 0s) infinite;
}

.venues-hero__wash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 340px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .1), transparent 72%);
}

/* ---------------------------------------------------------------------------
   Automotive
   --------------------------------------------------------------------------- */

.auto-hero__wash {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 760px;
  height: 340px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .1), transparent 72%);
}

.cabin-plate {
  position: relative;
  max-width: 880px;
  margin: 80px auto 0;
  border: 1px solid var(--line-card);
  border-radius: 28px;
  background: var(--surface-deep);
  padding: 46px 50px 40px;
  overflow: hidden;
}

.cabin-plate .grid-overlay {
  --grid-a: .035;
  --grid-size: 42px;
  --grid-mask: radial-gradient(90% 90% at 50% 40%, #000 25%, transparent 88%);
}

.cabin-plate__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cabin-plate__readouts {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 38px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.cabin-plate__readouts span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--ink-muted);
}

.road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 120px;
  height: 1px;
  overflow: hidden;
}

.road__track {
  display: flex;
  gap: 56px;
  width: 200%;
  animation: r13road 1.6s linear infinite;
}

.road__track span {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, .4);
  flex: none;
}

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */

.contact {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1100px;
  margin-inline: auto;
}

.contact__copy .h1 { margin-inline: 0; }
.contact__copy .lead { margin: 22px 0 0; max-width: 400px; font-size: 19px; line-height: 1.55; }

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 48px;
}

.contact__detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact__detail .mono-label { font-size: 11.5px; letter-spacing: .18em; }
.contact__detail a { font-size: 18px; }
.contact__detail span:last-child { font-size: 18px; color: var(--ink-link); }

.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--surface-panel);
  border: 1px solid var(--line-card);
  border-radius: 26px;
  padding: 38px 38px 42px;
}

.form[hidden] { display: none; }

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.field > label,
.fieldset__legend {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.field input,
.field textarea {
  background: var(--surface-well);
  border: 1px solid var(--line-input);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s;
}

.field textarea {
  resize: vertical;
  min-height: 110px;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field input:focus,
.field textarea:focus { border-color: var(--lime); }

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--danger); }

.field__error {
  font-size: 13.5px;
  color: var(--danger-text);
}

.field__error[hidden] { display: none; }

.fieldset {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Bot trap. Moved off-screen rather than display:none — plenty of scripts skip
   hidden inputs, but follow one that is technically rendered. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.topics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.topic {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-chip);
  background: transparent;
  color: var(--ink-soft);
  transition: border-color .18s, background .18s, color .18s;
}

.topic:hover { border-color: var(--ink-muted); }

.topic[aria-pressed='true'] {
  border-color: var(--lime);
  background: var(--lime-tint);
  color: var(--ink);
}

.form__submit { margin-top: 6px; padding: 15px 28px; }

.form-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 420px;
  padding: 70px 44px;
  background: var(--surface-panel);
  border: 1px solid var(--line-card);
  border-radius: 26px;
  text-align: center;
}

.form-sent[hidden] { display: none; }

.form-sent__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 28px rgba(255, 255, 255, .24);
}

.form-sent h2 {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.015em;
}

.form-sent p {
  margin: 0;
  max-width: 320px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-lead);
}

.form-sent .btn--ghost { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line-footer);
  padding: 72px var(--gutter) 44px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin-inline: auto;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

.footer__logo img { height: 28px; width: auto; }

.footer__tagline {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.footer__columns {
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__heading { margin: 0 0 6px; }

.footer__column a {
  font-size: 15px;
  color: var(--ink-link);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 56px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-footer-inner);
  font-size: 13px;
  color: var(--ink-faint);
}

.footer__legal {
  display: flex;
  gap: 24px;
}

.footer__legal a {
  font-size: 13px;
  color: var(--ink-faint);
}

.footer__legal a:hover { color: #c0bab3; }

/* ---------------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------------- */

@keyframes r13wave { to { transform: translateX(-720px); } }
@keyframes r13pulse { 0%, 100% { opacity: .25 } 50% { opacity: .9 } }
@keyframes r13pulse-strong { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes r13beam { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes r13glow { 0%, 100% { opacity: .65 } 50% { opacity: 1 } }
@keyframes r13fade { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes r13eq { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.8) } }
@keyframes r13glowpulse {
  0%, 100% { box-shadow: 0 0 26px rgba(255, 255, 255, .22) }
  50% { box-shadow: 0 0 44px rgba(255, 255, 255, .5) }
}
@keyframes r13flow { to { stroke-dashoffset: -32 } }
@keyframes r13flow-short { to { stroke-dashoffset: -14 } }
@keyframes r13drift { to { stroke-dashoffset: -24 } }
@keyframes r13arc { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes r13road { to { transform: translateX(-136px) } }
@keyframes r13ring {
  0% { transform: translate(-50%, -50%) scale(.55); opacity: .55 }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0 }
}
@keyframes r13ripple {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: .6 }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0 }
}

/* ---------------------------------------------------------------------------
   Responsive

   The prototypes are desktop compositions; below are the breakpoints that carry
   them down to tablet and phone. Section rhythm scales proportionally so the
   pacing survives, and the decorative art is scaled or dropped rather than
   allowed to overflow.
   --------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .split-hero__inner { gap: 40px; }
  .contact { gap: 48px; }
}

@media (max-width: 980px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { gap: 32px; }
  .dia__control { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 900px) {
  :root { --gutter: 28px; }

  /* Nav collapses into a disclosure panel. */
  .nav {
    flex-wrap: wrap;
    background: rgba(20, 14, 11, .96);
    backdrop-filter: blur(12px);
  }

  .nav__toggle { display: inline-flex; }

  .nav__panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 18px 0 8px;
    margin-top: 14px;
    border-top: 1px solid var(--line-footer);
    /* A landscape phone has ~390px of height; the panel scrolls rather than
       running off the bottom of the screen. */
    max-height: calc(100svh - var(--nav-height) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav__panel.is-open { display: flex; }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav__link,
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 13px 4px;   /* keeps the row a ~44px touch target */
    font-size: 17px;
  }

  .nav__dropdown {
    position: static;
    transform: none;
    padding-top: 4px;
  }

  .nav__dropdown-panel {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0 0 6px 14px;
    min-width: 0;
  }

  .nav__dropdown-panel a { padding: 10px 4px; }

  .nav__cta { align-self: flex-start; margin-top: 10px; }

  .split-hero__inner,
  .contact { grid-template-columns: 1fr; }

  .split-hero { padding-top: 150px; }
  .split-hero__copy .lead { max-width: none; }
  .device-stage { min-height: 0; margin-top: 24px; }
  .device-stage__wash { width: 380px; height: 380px; }
  .device-stage__ring { width: 330px; height: 330px; }

  .form-sent { min-height: 320px; padding: 56px 32px; }
}

@media (max-width: 860px) {
  .hero { padding-top: 128px; }
  .hero__stage { height: 300px; }
  .tech-hero__body { padding-top: 110px; }
  .page-hero { padding-top: 180px; }
}

/* The architecture diagram reflows to 3 / 2 / 1 columns here. Its connector
   SVGs are dropped rather than redrawn: their endpoint x-coordinates are baked
   to the desktop column counts, so they stop meeting the cards the moment the
   grids change shape. Vertical order carries the flow instead. */
@media (max-width: 700px) {
  .dia__link { height: 20px; }
  .dia__link svg { display: none; }

  .dia__signals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia__outputs { grid-template-columns: minmax(0, 1fr); }

  .dia__engine {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 22px;
  }

  .dia__control { padding: 24px 22px; }
  .dia__legend { gap: 12px 18px; }
  .dia__loop { padding: 16px 18px; letter-spacing: .12em; }

  /* Label and figure share a line, the bar takes the one below. */
  .conf { padding: 26px 22px 30px; }
  .conf__row { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .conf__label { grid-area: 1 / 1; }
  .conf__pct { grid-area: 1 / 2; }
  .conf__bar { grid-area: 2 / 1 / 3 / 3; }
}

@media (max-width: 680px) {
  :root { --gutter: 22px; }

  /* Scale the design's very generous vertical rhythm rather than dropping it. */
  .section {
    padding-top: calc(var(--pt, 0px) * .55);
    padding-bottom: calc(var(--pb, 0px) * .55);
  }

  .rule { padding-top: calc(var(--rule-pt, 110px) * .6); }

  .grid--2,
  .grid--3 { grid-template-columns: minmax(0, 1fr); }

  .hero { padding-top: 116px; }
  .hero__stage { height: 240px; }
  .hero__wave { bottom: 48px; }
  .hero__actions .btn { flex: 1 1 auto; }

  .page-hero { padding-top: 150px; padding-bottom: 70px; }
  .split-hero { padding-top: 128px; padding-bottom: 40px; }
  .tech-hero { padding-top: 96px; padding-bottom: 50px; }
  .tech-hero__body { padding-top: 90px; }
  .tech-hero__diagram,
  .science-hero__waves { opacity: .5; }

  .card { padding: 28px 26px; }
  .card--roomy,
  .card--wide,
  .card--tall { padding: 28px 26px; }

  .cabin-plate { padding: 30px 22px 26px; margin-top: 48px; }
  .cabin-plate__readouts { gap: 18px; }

  .form { padding: 28px 24px 32px; }

  .compare { flex-direction: column; gap: 28px; }
  .compare__divider { width: 84px; height: 1px; }

  .fanout { height: 240px; }
  .fanout__label { font-size: 10.5px; padding: 9px 14px; }

  .footer__columns { gap: 40px; }
  .footer__top { gap: 40px; }
  .footer__bottom { margin-top: 40px; }

  .statement { font-size: 22px; }
  .statement--sm,
  .statement--prose { font-size: 20px; }
  .lead { font-size: 18px; }
  .body-lg { font-size: 17px; }

  .mt-52 { margin-top: 38px }
  .mt-56 { margin-top: 40px }
  .mt-60 { margin-top: 42px }
  .mt-70 { margin-top: 48px }
  .mt-80 { margin-top: 52px }
}

@media (max-width: 680px) {
  /* Comfortable touch targets in the footer's link columns. */
  .footer__column { gap: 2px; }
  .footer__column a { padding: 9px 0; }
  .footer__legal { gap: 8px 24px; flex-wrap: wrap; }
  .footer__legal a { padding: 6px 0; }
}

@media (max-width: 480px) {
  .pill { white-space: normal; }
  .tech-hero__trail { font-size: 9.5px; letter-spacing: .14em; }
  .tech-hero__badge { font-size: 10px; letter-spacing: .12em; text-align: center; }
  .dia__loop { letter-spacing: .1em; }
  .btn-row .btn,
  .btn-row .btn:only-child { width: 100%; }
  .platforms { gap: 18px; }
}

/* ---------------------------------------------------------------------------
   Short viewports — a phone or small tablet held in landscape. The designs open
   each page with 200–250px of breathing room above the headline, which is more
   than the whole screen here, so the hero tops are pulled in.
   --------------------------------------------------------------------------- */

@media (max-height: 600px) and (min-width: 560px) and (orientation: landscape) {
  .hero { padding-top: 104px; }
  .hero__stage { height: 260px; }
  .page-hero { padding-top: 128px; padding-bottom: 56px; }
  .split-hero { padding-top: 118px; padding-bottom: 48px; }
  .tech-hero { padding-top: 84px; padding-bottom: 48px; }
  .tech-hero__body { padding-top: 96px; }

  .section {
    padding-top: calc(var(--pt, 0px) * .6);
    padding-bottom: calc(var(--pb, 0px) * .6);
  }

  .rule { padding-top: calc(var(--rule-pt, 110px) * .6); }
}

/* ---------------------------------------------------------------------------
   Reduced motion — the design ships a static variant of the hero wave, so the
   whole decorative motion layer simply resolves to its resting state.
   --------------------------------------------------------------------------- */

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

  .device-stage__ring,
  .venues-hero__ripple,
  .road { display: none; }

  .beam,
  .hero__prism { opacity: 1; }
}