/* SMART SWINE — company site
   Tokens: plum-charcoal stack + pink brand (the mascot's own color).
   --coral/--teal/--seal keep their names as historical aliases; every value
   resolves into the pink system.
   Type: system stack (SF Pro on Apple hardware), self-hosted Roboto as the
   fallback for platforms without a suitable system face (css/fonts.css).
   Surface language: borderless elevated cards, large radii, pill buttons,
   centered section heads — decoration carries nothing the layout doesn't. */

@import url("fonts.css");

:root {
  /* Well off black: the darkest surface is a plum-tinted charcoal, not a void.
     Every step is ~11 levels apart so cards, cards-on-cards and rules all
     separate without needing borders to do the work. */
  --bg0: #363247;
  --bg1: #3f3a52;
  --bg2: #4a4560;
  --bg3: #57516e;
  --line: #6b6383;
  --ink: #f8f6f9;
  --mut: #c5bfcd;
  --dim: #a49cb0;
  --pink: #f6538f;
  --rose: #f9a8c7;
  --coral: var(--pink);
  --teal: var(--rose);
  --seal: #cf3d78;
  --seal-hi: #f76fa8;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* One family — label roles keep their own voice through tracking, case
     and weight rather than a second face. */
  --mono: var(--sans);
  --pad: clamp(20px, 5vw, 72px);
  /* Nav height is read by the promo bar, the mobile menu and every hero's
     top padding, so it lives here rather than as a literal in five places. */
  --nav-h: 70px;
  --r-lg: 22px;   /* media tiles, feature cards */
  --r-md: 18px;   /* stat tiles, list cards */
  --r-sm: 14px;   /* small chrome */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  text-wrap: pretty;
  background: var(--bg1);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
section { scroll-margin-top: 64px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--mono); font-size: 0.8em; font-weight: 500; letter-spacing: 0.1em; }
.mut { color: var(--mut); }
.teal { color: var(--teal); }
.fine { color: var(--dim); font-size: 12.5px; line-height: 1.7; margin-top: 40px; }
.fine.center { text-align: center; max-width: 720px; margin: 28px auto 0; padding: 0 var(--pad); }
/* section-bottom disclaimers sit centered under centered section bodies */
.sec .wrap > .fine { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- headings ---------- */
h1, h2, h3, h4 {
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.08;
  /* balance: a two-line heading splits evenly instead of running full width
     and then dropping two words onto a stub line */
  text-wrap: balance;
}
.beat h1, .beat h2, .page-hero h1, .cta h2 { font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: clamp(36px, 5vw, 64px); margin-bottom: 20px; }
h3 { font-size: 21px; letter-spacing: -0.01em; margin-bottom: 10px; }
.sub-h { font-size: clamp(26px, 3.2vw, 40px); margin: 90px 0 18px; }
.lede {
  color: var(--mut); max-width: 700px; font-size: 19px; line-height: 1.55;
  margin-bottom: 12px;
  /* pretty: never leave a single word alone on the last line */
  text-wrap: pretty;
}
.lede a { color: var(--pink); }

/* Section kicker: a small pink label above the headline, nothing else. */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pink);
  margin-bottom: 16px;
}

/* Centered section head: kicker → headline → lede, one pattern everywhere. */
.sec-head { max-width: 800px; margin: 0 auto; text-align: center; }
.sec-head .lede { margin-left: auto; margin-right: auto; }
.lede.center { margin: 30px auto 0; text-align: center; }

/* Display headlines fade from ink into the muted tone toward the baseline —
   the big-type treatment of premium dark product pages. Skipped on the hero
   beats, whose text-shadow would show through a transparent fill. */
.sec-head h2, .sec-head .sub-h, .page-hero h1, .cta h2 {
  background: linear-gradient(180deg, var(--ink) 52%, rgba(197, 191, 205, 0.82));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
}
.page-hero h1 em { -webkit-text-fill-color: var(--pink); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 0 clamp(16px, 3vw, 36px);
  height: var(--nav-h);
  /* opaque enough that the links keep their weight over bright media —
     at 0.78 they washed out anywhere the page went light */
  background: rgba(48, 44, 63, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(107, 99, 131, 0.6);
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: 0.12em; font-size: 16.5px;
  text-decoration: none;
}
.nav-brand img { width: 38px; height: 38px; }
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Destinations have to out-rank the brand and the pill, or the bar reads as
   a logo and a button with grey noise in between. Near-ink at 550 does it
   without turning five links into five headlines. */
.nav-links a {
  position: relative;
  font-size: 16px; font-weight: 500; letter-spacing: 0.005em;
  color: #e7e3ec; text-decoration: none;
  padding: 8px 13px; border-radius: 980px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.09); }
/* The current page is marked with the brand pink under the label. A 6%
   white pill was the old marker and nobody could see it. */
.nav-links a.on { color: var(--ink); font-weight: 700; }
.nav-links a.on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--pink);
}
/* the sub-menu entries are a list, not tabs — no underline rule there */
.nav-sub a.on::after { display: none; }
/* Products dropdown: both product pages live under one nav item.
   CSS-only — opens on hover and on keyboard focus (focus-within), the
   top link itself still goes to product.html. */
.nav-drop { position: relative; }
/* the caret is the only sign that two products live behind one label, so it
   is readable rather than decorative */
.nav-drop-top .caret {
  display: inline-block; margin-left: 6px; font-size: 10px;
  transform: translateY(-1px); opacity: 0.95;
  transition: transform 0.2s;
}
.nav-drop:hover .caret, .nav-drop:focus-within .caret { transform: translateY(1px); }
.nav-sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;                 /* hover bridge over the gap */
  display: none; min-width: 250px;
}
.nav-sub-panel {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(54, 50, 71, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(107, 99, 131, 0.45); border-radius: 16px;
  padding: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.nav-drop:hover .nav-sub,
.nav-drop:focus-within .nav-sub { display: block; }
.nav-sub a { display: block; white-space: nowrap; }
.nav-sub a b { color: var(--ink); font-weight: 700; }
.nav-sub a span { display: block; font-size: 11px; letter-spacing: 0.04em;
                  color: var(--dim); margin-top: 1px; }
/* A hairline splits the destinations from the action, so the pill stops
   reading as a sixth place to go. */
.nav-links::after {
  content: ""; align-self: center;
  width: 1px; height: 22px; margin: 0 6px 0 12px;
  background: rgba(107, 99, 131, 0.75);
}
/* .btn.nav-cta: compound beats the later .btn rule regardless of order */
.nav-cta { margin-left: 0; }
.btn.nav-cta { padding: 9px 20px; font-size: 14.5px; }
/* Six destinations at 16px plus the brand and the pill need the room. Below
   this the row would have to shrink back down to fit, so it hands over to the
   burger instead of getting quietly smaller again. */
@media (max-width: 1120px) { .nav-links::after { display: none; } }
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}
/* very narrow: the bar holds brand + pill + burger on one line */
@media (max-width: 560px) {
  :root { --nav-h: 62px; }
  .nav { gap: 10px; }
  .nav-brand { gap: 9px; }
  .nav-brand img { width: 30px; height: 30px; }
  .nav-brand span { font-size: 13px; letter-spacing: 0.1em; }
  .btn.nav-cta { padding: 8px 15px; font-size: 13px; }
}

/* ---------- mobile menu ----------
   Burger lives in the nav on small screens; the panel drops below the
   bar, covers the promo strip, and locks page scroll while open. */
.nav-burger {
  display: none;
  width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 980px;
  background: transparent; cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute; left: 50%; top: 50%;
  width: 21px; height: 1.8px; border-radius: 1px;
  background: var(--ink);
  transition: transform 0.3s ease;
}
.nav-burger span:first-child { transform: translate(-50%, -4px); }
.nav-burger span:last-child { transform: translate(-50%, 3px); }
.nav-burger.open span:first-child { transform: translate(-50%, -1px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translate(-50%, -1px) rotate(-45deg); }
/* after the base display:none, so source order can't cancel it */
@media (max-width: 1120px) { .nav-burger { display: block; } }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 51;
  display: none;
  flex-direction: column;
  padding: 24px var(--pad) 44px;
  background: rgba(54, 50, 71, 0.97);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  overflow-y: auto;
}
body.menu-open .mobile-menu { display: flex; }
body.menu-open { overflow: hidden; }
.mobile-menu a {
  text-decoration: none; color: var(--ink);
  font-size: 24px; font-weight: 600; letter-spacing: -0.015em;
  padding: 18px 0;
  border-bottom: 1px solid rgba(107, 99, 131, 0.35);
}
.mobile-menu a span {
  display: block;
  font-size: 13px; font-weight: 400; letter-spacing: 0.01em;
  color: var(--dim); margin-top: 2px;
}
.mobile-menu a.on { color: var(--pink); }
.mobile-menu .btn {
  margin-top: 30px; align-self: flex-start;
  font-size: 15px; padding: 13px 28px;
  border-bottom: 0;
}
@media (min-width: 1121px) {
  .mobile-menu { display: none !important; }
  body.menu-open { overflow: auto; }
}

/* ---------- buttons: pills ---------- */
.btn {
  display: inline-block;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  padding: 12px 24px; border-radius: 980px;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
}
.btn-coral {
  background: var(--coral); color: #2b0a19; font-weight: 600;
  position: relative; overflow: hidden;
}
.btn-coral:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(246, 83, 143, 0.35); }
/* a single light sweep crosses the pill on hover */
.btn-coral::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.btn-coral:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0) scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn-coral::after { display: none; } }
.btn-ghost { background: var(--bg3); color: var(--ink); }
.btn-ghost:hover { background: var(--line); transform: translateY(-2px); }
:is(a, button):focus-visible { outline: 2px solid var(--seal-hi); outline-offset: 3px; }

/* ---------- hero ---------- */
.hero { height: 100vh; position: relative; background: var(--bg0); }
/* 190vh, not 430vh: the turntable used to cost four full screens of wheel
   before the page moved on. One extra screen buys the whole rotation. */
.hero--scrub { height: 190vh; }
/* SPC-01 travel hero: 48 frames of hem travel need more runway than the
   turntable, and the close must COMPLETE before the pin releases — the
   travel finishes at 62% of this scrub (main.js) so the last screen is a
   hold on the closed state. 190vh let the page move on mid-drop
   (user 2026-08-04). */
#spcHero.hero--scrub { height: 300vh; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-ring {
  position: absolute; width: min(78vh, 88vw); height: min(78vh, 88vw);
  transform: rotate(-90deg);
}
.hero-ring circle {
  fill: none; stroke: var(--seal-hi); stroke-width: 0.35;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  opacity: 0.5;
}
.hero-fallback, .hero-turn {
  position: absolute;
  width: min(86vh, 92vw); height: min(86vh, 92vw);
  object-fit: contain;
}
.hero-fallback {
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.6));
}
.hero-turn { display: none; }
.hero--scrub .hero-turn { display: block; }
.hero--scrub .hero-fallback { display: none; }

.beat {
  position: absolute; z-index: 5;
  left: clamp(20px, 7vw, 110px); bottom: clamp(72px, 13vh, 150px);
  max-width: 640px;
  text-shadow: 0 2px 26px rgba(54, 50, 71, 0.92);
}
.beat h1 {
  font-size: clamp(64px, 11vw, 148px);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.beat h2 { font-size: clamp(40px, 6vw, 84px); }
.hero-sub {
  font-size: clamp(20px, 2.6vw, 32px); font-weight: 700;
  margin: 8px 0 14px;
}
.hero-tag, .beat > p:not(.eyebrow):not(.hero-sub) { color: var(--mut); font-size: clamp(15px, 1.6vw, 19px); margin-top: 14px; }
.beat-2, .beat-3 { opacity: 0; visibility: hidden; }
.beat-3 { left: auto; right: clamp(20px, 7vw, 110px); text-align: right; }

@media (max-width: 640px) {
  .beat { right: 20px; }
  .beat-3 { left: 20px; text-align: left; }
  .hero-tag { font-size: 14.5px; }
}

.hero-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em;
  color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-cue span {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, transparent, var(--seal-hi));
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-cue span { animation: none; } }

/* ---------- generic sections ---------- */
.sec { padding: clamp(100px, 14vh, 170px) 0; position: relative; }
.sec-deep { background: var(--bg0); }

/* stats */
.stats { display: grid; gap: 16px; margin: 54px 0; }
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stats-4 { grid-template-columns: repeat(4, 1fr); }
.stats-5 { grid-template-columns: repeat(5, 1fr); }
.stat {
  background: var(--bg2); border-radius: var(--r-md);
  padding: 26px 24px 22px;
}
.stat strong {
  display: block;
  font-size: clamp(28px, 3vw, 42px); font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.stat span { color: var(--mut); font-size: 12.5px; line-height: 1.5; display: block; }
@media (max-width: 900px) { .stats-4, .stats-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats-3 { grid-template-columns: 1fr; } }
/* below ~400px two columns hit the longest word's min-content and overflow */
@media (max-width: 400px) { .stats-4, .stats-5 { grid-template-columns: 1fr; } }
.stat { min-width: 0; }

/* cards */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.card {
  background: var(--bg2); border-radius: var(--r-lg);
  padding: 32px 30px;
}
.card p { color: var(--mut); font-size: 15px; }
.edge-coral h3 { color: var(--coral); font-size: 17px; }
.edge-teal h3 { color: var(--teal); font-size: 17px; }

/* split layout */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px); align-items: center;
}
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
/* splits keep their text left-aligned; the pattern is head + media */
.split .cta-row { justify-content: flex-start; }
.split-stack { margin-top: clamp(80px, 10vw, 120px); }
.split-img { position: relative; }
.split-img img { border-radius: var(--r-lg); }
/* the FOV overlay must be clipped to the card, not spill past its corners */
.split-img .fig-media { border-radius: var(--r-lg); overflow: hidden; }

.axis { margin-top: 30px; }
.axis p:last-child { color: var(--mut); font-size: 15px; }
.axis-tag {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em;
  color: var(--mut); margin-bottom: 8px;
}
.axis-tag.teal { color: var(--teal); }
.axis-tag.coral { color: var(--coral); }

/* adjustable field-of-view wedges on the heads figure */
.fig-media { position: relative; }
.fov {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.fov-fill { stroke: none; }
.fov-edge { stroke-width: 1.1; stroke-dasharray: 5 4; fill: none; }
.fov-scan { stroke-width: 1.6; opacity: 0.95; }
.fov-pivot { stroke: none; }

.fov-fwd .fov-fill  { fill: rgba(249, 168, 199, 0.10); }
.fov-fwd .fov-edge,
.fov-fwd .fov-scan  { stroke: var(--rose); }
.fov-fwd .fov-pivot { fill: var(--rose); }
.fov-down .fov-fill { fill: rgba(246, 83, 143, 0.10); }
.fov-down .fov-edge,
.fov-down .fov-scan { stroke: var(--pink); }
.fov-down .fov-pivot { fill: var(--pink); }

/* the sweep: each ray pivots between its own wedge limits */
.fov-fwd .fov-scan {
  transform-origin: 305px 111px;
  animation: sweepFwd 4.2s ease-in-out infinite;
}
.fov-down .fov-scan {
  transform-origin: 194px 211px;
  animation: sweepDown 4.2s ease-in-out infinite;
  animation-delay: -1.4s;
}
@keyframes sweepFwd {
  0%, 100% { transform: rotate(-17deg); }
  50%      { transform: rotate(17deg); }
}
@keyframes sweepDown {
  0%, 100% { transform: rotate(-19deg); }
  50%      { transform: rotate(19deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fov-scan { animation: none; }
}

.split-img figcaption {
  color: var(--dim); font-size: 12.5px; line-height: 1.6;
  margin-top: 14px; max-width: 460px;
}

/* ---------- exploded (scroll-scrubbed assembly) ---------- */
.xstage { height: 100vh; position: relative; }
.xstage--scrub { height: 260vh; }
.xsticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}
.xfallback, .xcanvas {
  position: absolute;
  width: min(1500px, 96vw);
  height: min(84vh, 54vw);
  object-fit: contain;
}
.xcanvas { display: none; }
.xstage--scrub .xcanvas { display: block; }
.xstage--scrub .xfallback { display: none; }

.xlabels { position: absolute; inset: 0; pointer-events: none; }
.xlabel {
  position: absolute; left: 0; top: 0;   /* JS writes transform in px */
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  line-height: 1.5; white-space: nowrap;
  opacity: 0;
  transition: opacity 0.45s ease;
  text-shadow: 0 1px 4px rgba(40, 37, 52, 0.95), 0 0 14px rgba(54, 50, 71, 0.92);
}
.xlabels.on .xlabel { opacity: 1; }
.xlabel b { color: var(--pink); margin-right: 7px; font-weight: 700; }
.xlabel em { display: block; font-style: normal; color: var(--mut); font-size: 10px; }
.xlabel .lead {                          /* dot + riser, drawn by JS length */
  position: absolute; left: 0; width: 1px;
  background: linear-gradient(var(--g));
}
.xlabel .lead::after {
  content: ""; position: absolute; left: 50%; width: 9px; height: 9px;
  transform: translateX(-50%);
  background: var(--bg0); border: 2px solid var(--pink); border-radius: 50%;
  box-shadow: 0 0 10px rgba(246, 83, 143, 0.75);
}
.xlabel.up   .lead { top: 100%; --g: 180deg, var(--pink), rgba(246, 83, 143, 0.15); }
.xlabel.up   .lead::after { bottom: -5px; }
.xlabel.down .lead { bottom: 100%; --g: 0deg, var(--pink), rgba(246, 83, 143, 0.15); }
.xlabel.down .lead::after { top: -5px; }

/* Component list: the full sixteen, readable on any screen, and the only
   label surface on mobile where the pinned canvas is not shown. */
.xlist {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 26px;
  margin-top: 34px;
}
@media (max-width: 900px) { .xlist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xlist { grid-template-columns: 1fr; } }
.xlist li {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.xlist b { color: var(--pink); margin-right: 9px; }
.xlist em { font-style: normal; color: var(--dim); display: block; font-size: 10.5px; margin-top: 2px; }

@media (max-width: 900px) {
  .xstage, .xstage--scrub { height: auto; }
  .xsticky { position: static; height: auto; display: block; padding: 0 var(--pad); }
  body.has-promo .xsticky { top: auto; height: auto; }
  .xfallback { position: static; width: 100%; height: auto; }
  .xstage--scrub .xcanvas { display: none; }
  .xstage--scrub .xfallback { display: block; }
  .xlabels { display: none; }
}

/* ---------- washdown ---------- */
.wash { position: relative; overflow: hidden; padding: clamp(110px, 16vh, 190px) 0; }
.wash-bg {
  position: absolute; inset: -12% 0;
  background: url("../assets/img/washdown.webp") center 30% / cover no-repeat;
  will-change: transform;
}
.wash-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(54, 50, 71, 0.94) 0%, rgba(54, 50, 71, 0.62) 52%, rgba(54, 50, 71, 0.30) 100%);
}
.wash-inner { position: relative; z-index: 2; }
.wash-inner .lede { max-width: 560px; }
.wash .stats { grid-auto-rows: 1fr; max-width: 900px; }
.wash .stat { background: rgba(74, 69, 96, 0.80); backdrop-filter: blur(6px); }

/* ---------- wide media figures ----------
   Same column as the text (.wrap's 1180px), so film and stills sit on the
   grid instead of bleeding past it. */
.wide-fig { max-width: 1180px; margin: 56px auto 0; padding: 0 var(--pad); }
.wide-fig img { border-radius: var(--r-lg); }
.wide-fig figcaption {
  color: var(--dim); font-size: 12.5px; margin-top: 16px; letter-spacing: 0.02em;
  text-align: center;
}
.wide-fig .mono { color: var(--mut); }

/* ---------- concept films ----------
   Short looping clips share the stills' frame language exactly: same radius,
   no chrome. Playback rules live in main.js. */
.film {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  background: var(--bg1);
}
.mounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 10px; }
@media (max-width: 980px) { .mounts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .mounts { grid-template-columns: 1fr; } }
.mcard {
  background: var(--bg2); border-radius: var(--r-md);
  overflow: hidden;
  transform-style: preserve-3d; will-change: transform;
}
.mcard img { aspect-ratio: 4 / 5; object-fit: cover; }
.mcard h4 { font-size: 16px; margin: 16px 18px 6px; }
.mcard p { color: var(--mut); font-size: 13px; margin: 0 18px 18px; line-height: 1.55; }
.tilt-note { margin: 26px auto 0; max-width: 760px; text-align: center; }

/* ---------- phone ---------- */
.phone-col { display: grid; place-items: center; }
.phone {
  width: min(330px, 88vw);
  background: #201e28;
  border: 1px solid #5a5470;
  border-radius: 44px;
  padding: 14px 14px 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 6px #363144;
  position: relative;
}
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; background: #363144; border-radius: 12px;
}
.phone-status {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--mut); padding: 2px 10px 8px;
}
.phone-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 10px;
  font-size: 10px; letter-spacing: 0.14em; font-weight: 700;
}
.phone-head img { width: 20px; height: 20px; }
.live {
  margin-left: auto;
  background: var(--coral); color: #2b0a19;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: 20px;
  animation: livepulse 2s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 83, 143, 0.55); }
  55% { box-shadow: 0 0 0 7px rgba(246, 83, 143, 0); }
}
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }
.phone-feed { position: relative; border-radius: 14px; overflow: hidden; }
.dbox { position: absolute; border: 1.5px solid var(--teal); border-radius: 3px; }
.dbox i {
  position: absolute; top: -15px; left: -1.5px;
  font-family: var(--mono); font-style: normal;
  font-size: 7px; letter-spacing: 0.06em;
  background: var(--teal); color: #3a0d20;
  padding: 1.5px 5px; border-radius: 2px; white-space: nowrap;
}
.dbox.coral-b { border-color: var(--coral); }
.dbox.coral-b i { background: var(--coral); color: #2b0a15; }
.feed-tag {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 8px; color: var(--ink);
  background: rgba(10, 10, 13, 0.72); padding: 3px 7px; border-radius: 4px;
}
.phone-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0; }
.phone-stats div { background: #2e2b38; border-radius: 10px; padding: 9px 10px; }
.phone-stats strong { font-size: 19px; display: block; }
.phone-stats span { color: var(--dim); font-size: 8.5px; }
.phone-chart { background: #2e2b38; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.phone-chart .mono, .phone-brief .mono { font-size: 8px; color: var(--dim); letter-spacing: 0.16em; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 58px; margin-top: 8px; }
.bars i {
  flex: 1; height: var(--h);
  background: var(--teal); border-radius: 3px 3px 0 0; opacity: 0.85;
  transform-origin: 50% 100%;
}
.bars i.hot { background: var(--coral); }
.phone-brief { background: #2e2b38; border-radius: 10px; padding: 10px 12px; }
.phone-brief p:last-child { font-size: 10.5px; color: var(--mut); line-height: 1.55; margin-top: 5px; }
.phone-brief strong { color: var(--ink); }
.phone-alert {
  display: flex; align-items: center; gap: 8px;
  background: #2e2b38; border-radius: 10px; padding: 9px 12px; margin-top: 7px;
  font-size: 10px; color: var(--mut);
}
.phone-alert .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }
.phone-alert em { margin-left: auto; font-style: normal; font-size: 8.5px; color: var(--dim); }
.phone-tabs {
  display: flex; justify-content: space-between;
  font-size: 8px; color: var(--dim);
  padding: 12px 14px 6px;
}
.phone-tabs .on { color: var(--coral); }

/* ---------- pricing ---------- */
.price-card p:last-child { font-size: 15px; }
.warranty {
  margin-top: 16px;
  background: linear-gradient(120deg, rgba(246, 83, 143, 0.09), rgba(207, 61, 120, 0.08));
  border-radius: var(--r-lg);
  padding: 40px 36px;
}
.warranty h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.warranty p:last-child { color: var(--mut); max-width: 760px; }

/* ---------- logo marquee ----------
   Partners run as one slow seamless band, faded at both edges; the track
   holds two identical sets so -50% loops invisibly. The loop NEVER stops:
   no hover pause and no reduced-motion fallback (client 2026-08-05). */
.logo-marquee {
  overflow: hidden; margin-top: 50px;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logo-track {
  display: flex; width: max-content;
  animation: logoScroll 44s linear infinite;
}
.logo-set { display: flex; gap: 16px; padding-right: 16px; flex: none; }
.logo-set span {
  background: #f2f2f4; border-radius: var(--r-md);
  display: grid; place-items: center;
  padding: 18px 36px; height: 92px; min-width: 190px;
}
.logo-set img { max-height: 52px; width: auto; max-width: 150px; object-fit: contain; }
@keyframes logoScroll { to { transform: translateX(-50%); } }

/* ---------- CTA + footer ---------- */
.cta {
  padding: clamp(110px, 16vh, 190px) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 115%, rgba(246, 83, 143, 0.16), transparent 70%),
    var(--bg0);
}
.cta h2 { font-size: clamp(40px, 6vw, 76px); }
.cta .lede { margin: 0 auto 18px; text-wrap: balance; }
.cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ---------- company pages (about / resources / contact) ---------- */


.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(80px, 14vh, 170px)) 0 clamp(70px, 11vh, 140px);
  background: var(--bg0);
  text-align: center;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.03em; line-height: 1.0;
  max-width: 900px; margin: 0 auto;
}
.page-hero h1 em { font-style: normal; color: var(--pink); }
.page-hero .lede { font-size: clamp(17px, 1.9vw, 21px); margin: 22px auto 0; }
.page-hero .cta-row { justify-content: center; margin-top: 34px; }

.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
@media (max-width: 860px) { .vm { grid-template-columns: 1fr; } }
.vm article {
  background: var(--bg2); border-radius: var(--r-lg);
  padding: 38px 34px;
  text-align: left;
}
.vm h3 { font-size: clamp(22px, 2.4vw, 28px); margin: 8px 0 12px; }
.vm p:last-child { color: var(--mut); font-size: 15.5px; }

.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }
.tcard {
  background: var(--bg2); border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  transition: transform 0.25s;
}
.tcard:hover { transform: translateY(-5px); }
.tcard img { aspect-ratio: 1; object-fit: cover; width: 100%; filter: saturate(0.92); }
.tcard .t-body { padding: 20px 22px 24px; }
.tcard h4 { font-size: 19px; margin-bottom: 4px; }
.tcard .t-role {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  color: var(--pink); text-transform: uppercase; margin-bottom: 10px;
}
/* the bio, addressed directly — :last-child broke the moment a card
   gained a trailing link */
.tcard .t-body p:not(.t-role) { color: var(--mut); font-size: 13.5px; line-height: 1.6; }

.rescat { margin-top: clamp(70px, 9vw, 110px); }
.rescat:first-of-type { margin-top: 20px; }
.resgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 980px) { .resgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .resgrid { grid-template-columns: 1fr; } }
.rcard {
  display: block; text-decoration: none;
  background: var(--bg2); border-radius: var(--r-md);
  padding: 26px 26px 22px;
  text-align: left;
  transition: transform 0.22s, background 0.22s;
}
.rcard:hover { transform: translateY(-4px); background: var(--bg3); }
.rcard .r-kind {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  color: var(--pink); text-transform: uppercase;
}
.rcard h4 { font-size: 16.5px; margin: 10px 0 8px; }
.rcard p { color: var(--mut); font-size: 13.5px; line-height: 1.6; }
.rcard .r-url {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcard:hover .r-url { color: var(--rose); }

/* news cards carry the publisher's own preview image */
.rcard:has(.nthumb) { padding: 0 0 22px; overflow: hidden; }
.rcard:has(.nthumb) > :not(.nthumb) { margin-left: 26px; margin-right: 26px; }
.nthumb {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg3); margin-bottom: 18px;
}
.nthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.rcard:hover .nthumb img { transform: scale(1.05); }
.nthumb::after {          /* keep the eyebrow legible over any photo */
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(54, 50, 71, 0.55));
}

/* video cards */
.vcard { padding: 0 0 22px; overflow: hidden; }
.vcard > :not(.vthumb) { margin-left: 26px; margin-right: 26px; }
.vthumb {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--bg3); margin-bottom: 18px;
}
.vthumb img {
  width: 100%; height: 100%; object-fit: cover;
  /* hqdefault is 4:3 with letterbox bars; scaling up crops them off */
  transform: scale(1.36);
  transition: transform 0.4s;
}
.vcard:hover .vthumb img { transform: scale(1.42); }
.vplay {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(54, 50, 71, 0.74);
  border: 2px solid var(--pink);
  backdrop-filter: blur(3px);
  transition: background 0.25s, transform 0.25s;
}
.vplay::after {
  content: ""; position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-38%, -50%);
  border-left: 15px solid var(--pink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.vcard:hover .vplay { background: var(--pink); transform: translate(-50%, -50%) scale(1.08); }
.vcard:hover .vplay::after { border-left-color: #2b0a19; }
.vlen {
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  background: rgba(54, 50, 71, 0.86); color: var(--ink);
  padding: 3px 7px; border-radius: 4px;
}

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.ccard {
  background: var(--bg2); border-radius: var(--r-lg);
  padding: 44px 40px;
}
.ccard.hot {
  background: linear-gradient(150deg, rgba(246, 83, 143, 0.12), var(--bg2) 58%);
}
.ccard.wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .ccard.wide { grid-column: auto; } }
.ccard[id] { scroll-margin-top: calc(64px + var(--promo-h)); }
.ccard h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 10px 0 14px; }
.ccard p { color: var(--mut); font-size: 15.5px; }
.ccard .btn { margin-top: 26px; }
/* Role cards carry a second small label further down the card, over the list
   of what the job owns. Muted rather than pink, so it sits under the role
   title instead of competing with it. */
.mut-tag { color: var(--dim); margin-top: 30px; }
.ccard ul { list-style: none; margin-top: 4px; }
.ccard ul + p { margin-top: 22px; }
.ccard li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ccard li:last-child { border-bottom: none; }
.ccard li a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
@media (max-width: 380px) { .ccard { padding: 36px 26px; } }
.ccard li a:hover { color: var(--pink); }
.ccard li .mono { color: var(--dim); margin-right: 12px; }

.statusband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 46px; }
@media (max-width: 900px) { .statusband { grid-template-columns: 1fr 1fr; } }

.foot { border-top: 1px solid var(--line); padding: 54px 0 70px; background: var(--bg0); }
.foot-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.14em; font-size: 13px; margin-bottom: 12px; }
.foot .mut { font-size: 13.5px; }
.foot a { color: var(--mut); }
.foot a:hover { color: var(--ink); }
.foot .fine { margin: 0; }

/* =====================================================================
   Ambient light — large soft brand-pink light fields that drift very
   slowly behind the dark sections, plus a lit-from-above material touch
   on cards and media. Transform/opacity only, so every animation stays
   on the compositor; reduced motion holds the light still.
   ===================================================================== */
.sec-deep, .wash, .page-hero { position: relative; isolation: isolate; }
.cta { position: relative; isolation: isolate; }

/* Vertical-only drift: the light fields sit 3% inside each edge and never
   scale past 1.06, so no animation frame can push them outside the page
   and fake a horizontal scrollbar. */
@keyframes auraDrift {
  0%, 100% { transform: translate3d(0, -2%, 0) scale(1); }
  50%      { transform: translate3d(0, 2.5%, 0) scale(1.06); }
}
@keyframes auraDrift2 {
  0%, 100% { transform: translate3d(0, 2%, 0) scale(1.05); }
  50%      { transform: translate3d(0, -2.5%, 0) scale(0.97); }
}

/* page heroes: a warm key light high on one side, a cool rose fill low
   on the other, breathing against each other */
.page-hero::after {
  content: "";
  position: absolute; inset: -8% 3%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 36% at 68% 14%, rgba(246, 83, 143, 0.16), transparent 66%),
    radial-gradient(ellipse 36% 30% at 30% 34%, rgba(249, 168, 199, 0.09), transparent 70%);
  animation: auraDrift 16s ease-in-out infinite;
}
.page-hero::before {
  content: "";
  position: absolute; inset: -8% 3%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 40% at 16% 82%, rgba(207, 61, 120, 0.11), transparent 72%);
  animation: auraDrift2 22s ease-in-out infinite;
}

/* deep sections: the same two-source light, quieter */
.sec-deep::after {
  content: "";
  position: absolute; inset: -8% 3%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 38% at 82% 8%, rgba(246, 83, 143, 0.11), transparent 66%),
    radial-gradient(ellipse 44% 36% at 10% 92%, rgba(249, 168, 199, 0.06), transparent 70%);
  animation: auraDrift 20s ease-in-out infinite;
}
.sec-deep::before {
  content: "";
  position: absolute; inset: -8% 3%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 40% 34% at 32% 28%, rgba(207, 61, 120, 0.07), transparent 70%);
  animation: auraDrift2 26s ease-in-out infinite;
}

/* product scrub heroes: a living backlight behind the turntable */
.hero-stage::before {
  content: "";
  position: absolute; inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 42% at 50% 46%, rgba(246, 83, 143, 0.14), transparent 64%),
    radial-gradient(ellipse 28% 28% at 70% 28%, rgba(249, 168, 199, 0.08), transparent 70%);
  animation: auraDrift 18s ease-in-out infinite;
}

/* closing CTA: the bottom glow it already had learns to breathe */
.cta::before {
  content: "";
  position: absolute; inset: -8% 3%; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 44% 38% at 74% 20%, rgba(246, 83, 143, 0.10), transparent 68%);
  animation: auraDrift2 24s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .page-hero::after,
  .sec-deep::before, .sec-deep::after,
  .hero-stage::before, .cta::before { animation: none; }
}

/* Lit from above: a one-pixel top highlight and a soft ambient shadow
   give every surface the same overhead light source. */
.card, .stat, .tcard, .rcard, .ccard, .mcard, .vm article,
.warranty, .step, .prow {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 14px 34px rgba(24, 20, 34, 0.22);
  position: relative;
}
.wide-fig img, .film, .split-img img, .pstack img, .loopcard img {
  box-shadow: 0 18px 44px rgba(24, 20, 34, 0.30);
}

/* Pointer-tracked glow: the hovered card carries a soft pink light that
   follows the cursor (JS writes --mx/--my). Fine pointers only. */
@media (pointer: fine) {
  .card::after, .stat::after, .tcard::after, .rcard::after, .ccard::after,
  .mcard::after, .vm article::after, .warranty::after, .step::after, .prow::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                rgba(246, 83, 143, 0.10), transparent 65%);
    opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
  }
  .card:hover::after, .stat:hover::after, .tcard:hover::after,
  .rcard:hover::after, .ccard:hover::after, .mcard:hover::after,
  .vm article:hover::after, .warranty:hover::after, .step:hover::after,
  .prow:hover::after { opacity: 1; }
}

/* Media tiles rise to the pointer; split figures keep their scroll
   parallax instead (an inline transform would fight the hover one). */
.wide-fig img, .film, .loopcard img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.wide-fig:hover img, .film:hover, .loopcard:hover img {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(24, 20, 34, 0.38);
}

/* Card lift: the whole grid responds, not only the ones that already did */
.card, .stat, .ccard {
  transition: transform 0.22s, background 0.22s;
}
.card:hover, .stat:hover, .ccard:hover { transform: translateY(-3px); }

/* ---------- antenna: the two radios, drawn as they behave ---------- */
.rf {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.rf-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 176px 101px;   /* the dome apex — both fans pivot here */
  opacity: 0;
}
.rf-dot { fill: var(--pink); filter: drop-shadow(0 0 4px rgba(246, 83, 143, 0.9)); }
.rf-tag {
  font-family: var(--sans);
  font-size: 9px; font-weight: 500; letter-spacing: 0.18em;
  fill: var(--mut);
  /* the labels cross both the dark backdrop and the bright quick-mount
     plate, so they carry their own halo rather than relying on either */
  paint-order: stroke;
  stroke: rgba(24, 22, 30, 0.85);
  stroke-width: 2.6px;
  stroke-linejoin: round;
}

.rf-wifi .rf-arc { stroke: var(--pink); }
.rf-wifi .rf-tag { fill: var(--pink); }
.rf-bt   .rf-arc { stroke: var(--rose); }
.rf-bt   .rf-tag { fill: var(--rose); }

/* Wi-Fi: arcs grow away from the dome — the unit talking to the barn */
.rf-wifi .rf-arc { animation: rfOut 2.8s cubic-bezier(.35,.6,.4,1) infinite; }
.rf-wifi .a1 { animation-delay: 0s; }
.rf-wifi .a2 { animation-delay: .34s; }
.rf-wifi .a3 { animation-delay: .68s; }

/* Bluetooth: arcs close in on the dome — a phone reaching the unit */
.rf-bt .rf-arc { animation: rfIn 2.8s cubic-bezier(.35,.6,.4,1) infinite; }
.rf-bt .a3 { animation-delay: 1.4s; }
.rf-bt .a2 { animation-delay: 1.74s; }
.rf-bt .a1 { animation-delay: 2.08s; }

@keyframes rfOut {
  0%   { opacity: 0;   transform: scale(0.45); }
  18%  { opacity: 0.95; }
  55%  { opacity: 0.5;  }
  75%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes rfIn {
  0%   { opacity: 0;    transform: scale(1.18); }
  18%  { opacity: 0.95; }
  55%  { opacity: 0.5;  }
  75%, 100% { opacity: 0; transform: scale(0.45); }
}

/* Motion off: hold the fans at full spread so the diagram still reads */
@media (prefers-reduced-motion: reduce) {
  .rf-arc { animation: none !important; opacity: 0.75; }
}

/* ---------- team card: personal site link ---------- */
/* The card is the column, not the body: height:100% on .t-body resolved
   against the whole card (image included) and pushed the link out through
   overflow:hidden. */
.tcard { display: flex; flex-direction: column; }
.tcard .t-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.tcard .t-body > p:not(.t-role) { flex: 1 1 auto; }
.t-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  align-self: flex-start;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--mut); text-decoration: none;
  transition: color 0.2s;
}
.t-link .t-kind { color: var(--dim); }
.t-link:hover .t-kind { color: inherit; }
.t-link svg {
  width: 11px; height: 11px; flex: none; align-self: center;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s;
}
.t-link:hover { color: var(--pink); }
.t-link:hover svg { transform: translate(2px, -2px); }
/* screen-reader-only text */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* =====================================================================
   Offer bar — pinned directly under the fixed nav, so it rides with it
   rather than scrolling away. Two offers share the strip and stay
   separate: the trial is the way in, the referral is what taking it
   earns you. Both carry the same light pill so neither reads as the
   afterthought; what tells them apart is the marker, a live dot on the
   trial and the +3 MO badge on the referral, plus a hairline between.
   --promo-h is measured in JS so every offset below stays exact when
   the rail wraps to two rows on narrow screens.
   ===================================================================== */
:root { --promo-h: 42px; }

.promo {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 46px;
  background: linear-gradient(90deg,
    rgba(207, 61, 120, 0.92) 0%, rgba(246, 83, 143, 0.92) 55%, rgba(207, 61, 120, 0.92) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(54, 50, 71, 0.35);
  color: #2b0a19;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  overflow: hidden;
}
/* a slow sheen, so the bar reads as live without blinking at anyone */
.promo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.30) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: promoSheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoSheen { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .promo::before { animation: none; opacity: 0; } }

/* the rail is positioned so both offers paint above the sheen */
.promo-rail {
  position: relative;
  display: flex; align-items: center;
  gap: clamp(26px, 3.2vw, 48px);
}
/* nothing here may shrink: a nowrap claim squeezed below its own width
   spills out of its box and lands on top of the next offer */
.promo-offer { flex: none; display: flex; align-items: center; gap: 10px; }
.promo-txt, .promo-cta { flex: none; }
.promo-rule { flex: none; width: 1px; height: 22px; background: rgba(43, 10, 25, 0.34); }

/* one slot, two markers, so the stacked rows share a left edge */
.promo-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.promo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2b0a19;
  animation: promoPulse 2.4s ease-in-out infinite;
}
@keyframes promoPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .promo-dot { animation: none; } }

/* the reward, stated as a unit of time rather than a second live dot, on
   the same light surface as the buttons so the offer carries its own weight */
.promo-badge {
  flex: none;
  font: 700 10px/1 var(--mono); letter-spacing: 0.09em;
  padding: 5px 7px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  color: #2b0a19;
}

.promo-txt { white-space: nowrap; }
.promo-txt b { font-weight: 700; }
.promo-cta {
  position: relative;
  flex: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: #2b0a19; text-decoration: none;
  padding: 5px 13px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.promo-cta:hover { background: #fff; transform: translateY(-1px); }
.promo-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; border-radius: 5px;
  background: transparent; color: #2b0a19; cursor: pointer;
  font: 400 17px/1 var(--sans);
  opacity: 0.55; transition: opacity 0.2s, background 0.2s;
}
.promo-x:hover { opacity: 1; background: rgba(255,255,255,0.35); }

/* Each offer stays on one line or it stops being scannable, so the rail
   stacks rather than letting either claim wrap. Both keep their claim and
   their button at every width; the terms live on the contact page. */
@media (max-width: 1180px) {
  .promo { padding: 8px 44px 8px 16px; font-size: 12.5px; line-height: 1.35; }
  .promo-rail { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  .promo-offer { max-width: 100%; }
  .promo-txt { flex: 0 1 auto; min-width: 0; white-space: normal; }
  .promo-rule { width: 100%; height: 1px; }
  .promo-mark { min-width: 52px; }   /* the badge's own width, so both rows start level */
}
/* phones: the claim takes the row and the button drops under it. The dot is
   decoration and goes; the badge stays because it states the offer. */
@media (max-width: 560px) {
  .promo { padding: 9px 38px 9px 14px; font-size: 12px; }
  .promo-offer { flex-wrap: wrap; row-gap: 7px; column-gap: 8px; }
  .promo-mark { min-width: 0; }
  .promo-mark:not(.promo-badge) { display: none; }
}

/* the bar sits between the nav and the page, so anything that measured from
   the nav's 60px has to clear the nav plus whatever the bar currently is */
body.has-promo section { scroll-margin-top: calc(64px + var(--promo-h)); }
body.has-promo .page-hero { padding-top: calc(var(--nav-h) + var(--promo-h) + clamp(80px, 14vh, 170px)); }
body.has-promo .hero-stage { top: var(--promo-h); height: calc(100vh - var(--promo-h)); }
body.has-promo .xsticky { top: var(--promo-h); height: calc(100vh - var(--promo-h)); }

/* =====================================================================
   SPC-01 page — travel hero, control-law schematic, posture gallery.
   Same tokens, same material language as everything above.
   ===================================================================== */

/* ---------- hero travel rail: the hem's progress, drawn as a gauge ---- */
.trail {
  position: absolute; right: clamp(18px, 4vw, 64px); top: 50%;
  transform: translateY(-50%);
  height: min(52vh, 480px);
  display: none; flex-direction: column; align-items: center; gap: 14px;
  z-index: 4;
}
.hero--scrub .trail { display: flex; }
.trail-track {
  flex: 1 1 auto; width: 2px; position: relative;
  background: rgba(107, 99, 131, 0.8); border-radius: 2px;
}
.trail-fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--seal-hi), var(--seal));
  transform-origin: 50% 0; transform: scaleY(0);
  border-radius: 2px;
}
.trail-tag {
  font-size: 10px; letter-spacing: 0.22em; color: var(--dim);
  writing-mode: vertical-rl; white-space: nowrap;
}
@media (max-width: 900px) { .trail { display: none !important; } }

/* ---------- filmed control-loop stage ----------
   Same guard pattern as .hero/.xstage: base height stays 100vh (a no-op
   single-screen block, so no-JS/reduced-motion/GSAP-failure users never
   pay for dead pinned scroll) and the tall scrub height only arrives via
   a JS-added --scrub class once the frame sequence has actually loaded. */
.loop-stage { height: 100vh; position: relative; margin-top: 30px; }
/* 520vh, was 340: the client wants the whole filmed loop to run slower
   under the wheel (2026-08-04 evening) — more runway per frame, and the
   widened signal windows get real dwell time. */
.loop-stage--scrub { height: 520vh; }
.loop-sticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-rows: 1fr auto;
  place-items: center;
  padding: 76px var(--pad) 30px;
  overflow: hidden;
}
body.has-promo .loop-sticky { top: var(--promo-h); height: calc(100vh - var(--promo-h)); }
.loop-view {
  /* the 4/3 frame must leave the caption strip on screen inside a 100vh
     pin, so the width is also capped by the height budget (~66vh) */
  position: relative;
  width: min(1240px, 94vw, calc(66vh * 4 / 3));
  aspect-ratio: 4 / 3;
}
.loop-fallback, .loop-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; border-radius: var(--r-lg);
}
.loop-canvas { display: none; }
.loop-stage--scrub .loop-canvas { display: block; }
.loop-stage--scrub .loop-fallback { display: none; }

/* status card (shared with nothing else, kept its schematic-era name) */
.sk-status {
  position: absolute; top: 0; right: 0;
  width: min(240px, 24vw);
  background: rgba(63, 58, 82, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-radius: var(--r-sm);
  padding: 14px 16px 12px;
}
.sk-st-h { font-size: 10px; color: var(--dim); letter-spacing: 0.22em;
           margin-bottom: 10px; }
.sk-status dl { display: grid; gap: 7px; }
.sk-status div { display: grid; gap: 1px; }
.sk-status dt { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
                letter-spacing: 0.18em; color: var(--dim); }
.sk-status dd { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
                letter-spacing: 0.06em; color: var(--ink); }
.sk-status dd.ok  { color: #57e0a8; }
.sk-status dd.hot { color: var(--pink); }

/* captions under the loop stage — mirrors .beat-2/.beat-3: every caption
   but the first is hidden by PLAIN CSS (no JS-added class required), so a
   no-JS or reduced-motion visitor always gets exactly one legible caption
   instead of six stacked ones overflowing the pinned box. JS crossfades
   between them for everyone who gets the scrub. */
.sk-caps { position: relative; width: min(860px, 90vw); min-height: 64px;
           margin-top: 18px; text-align: center; }
.sk-cap {
  position: absolute; inset: 0;
  color: var(--mut); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.55;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease;
}
.sk-cap[data-i="0"] { opacity: 1; visibility: visible; }   /* no-JS default */
.sk-caps.sk-live .sk-cap { opacity: 0; visibility: hidden; }  /* JS takes over */
.sk-caps.sk-live .sk-cap.on { opacity: 1; visibility: visible; }

/* small screens: no pin, static fallback frame + all captions readable */
@media (max-width: 900px) {
  .loop-stage, .loop-stage--scrub { height: auto; }
  .loop-sticky { position: static; height: auto; display: block; padding: 10px 0 0; }
  body.has-promo .loop-sticky { top: auto; height: auto; }
  .loop-view { width: 100%; }
  .loop-fallback { position: static; width: 100%; height: auto; max-height: none; }
  .loop-stage--scrub .loop-canvas { display: none; }
  .loop-stage--scrub .loop-fallback { display: block; }
  .sk-status { position: static; width: 100%; margin-top: 14px;
               display: none; }
  .sk-caps { min-height: 0; margin: 18px 0 0; text-align: left;
             display: grid; gap: 10px; }
  .sk-cap {
    position: static; opacity: 1 !important; visibility: visible !important;
    padding-left: 14px; border-left: 2px solid var(--seal);
  }
}

/* ---------- posture gallery ---------- */
.pgal { display: grid; grid-template-columns: minmax(340px, 5fr) 7fr;
        gap: clamp(20px, 3vw, 40px); margin-top: 46px; align-items: start; }
@media (max-width: 940px) { .pgal { grid-template-columns: 1fr; } }
.prows { display: grid; gap: 10px; }
.prow {
  text-align: left; cursor: pointer;
  background: var(--bg2); border: 0; border-radius: var(--r-sm);
  padding: 18px 20px 16px;
  color: var(--ink); font-family: var(--sans); font-size: 15px;
  transition: background 0.25s, transform 0.25s;
  position: relative;
}
.prow:hover { transform: translateY(-2px); }
.prow.on { background: var(--bg3); }
.prow.on::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 2px; background: var(--pink);
}
.prow b { display: block; font-size: 16.5px; letter-spacing: -0.01em; }
.prow em { display: block; font-style: normal; color: var(--mut);
           font-size: 13px; line-height: 1.5; margin: 4px 0 10px; }
.pbadge { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
          letter-spacing: 0.14em; padding: 4px 9px; border-radius: 4px; }
.pbadge.hot { color: var(--pink); background: rgba(246, 83, 143, 0.12);
              border: 1px solid rgba(246, 83, 143, 0.4); }
.pbadge.ok { color: #57e0a8; background: rgba(87, 224, 168, 0.09);
             border: 1px solid rgba(87, 224, 168, 0.35); }
.pstack { position: relative; }
.pstack img {
  border-radius: var(--r-lg);
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.pstack img:not(:first-child) { position: absolute; inset: 0; }
.pstack img { opacity: 0; transition: opacity 0.55s ease; }
.pstack img.on { opacity: 1; }
.pstack figcaption { color: var(--dim); font-size: 12.5px; line-height: 1.6;
                     margin-top: 14px; }

/* ---------- closed-loop cards + steps ---------- */
.loop-cards { margin-top: 40px; }
.loopcard { text-decoration: none; display: block; }
.loopcard img { border-radius: var(--r-sm);
                aspect-ratio: 16 / 9; object-fit: cover; width: 100%;
                margin-bottom: 18px; background: var(--bg0); }
.loopcard h3 { font-size: 18px; }
.loopcard .t-link { border-top: 1px solid var(--line); }
a.loopcard:hover .t-link { color: var(--pink); }
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
         gap: 14px; align-items: center; margin-top: 40px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); justify-self: center; } }
.step { background: var(--bg2); border-radius: var(--r-md);
        padding: 24px 24px 20px; height: 100%; }
.step h3 { font-size: 17px; }
.step p:last-child { color: var(--mut); font-size: 13.5px; line-height: 1.6; }
.step-arrow { color: var(--pink); font-size: 26px; }

/* ---------- spec list ---------- */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px;
        margin-top: 26px; }
@media (max-width: 760px) { .spec { grid-template-columns: 1fr; } }
.spec div { display: grid; grid-template-columns: 150px 1fr; gap: 16px;
            padding: 13px 0; border-bottom: 1px solid var(--line);
            align-items: baseline; }
.spec dt { font-family: var(--mono); font-size: 11px; font-weight: 500;
           letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
.spec dd { color: var(--ink); font-size: 14.5px; line-height: 1.5; }

/* ---------- field evidence ----------
   The only unrendered media on the site. These are the inference scripts' own
   annotated outputs over video recorded in the trial barn, so the frame
   language deliberately reads as a camera feed and not as product
   photography: media flush to the card edge, a green verification badge
   instead of the pink concept-film label, and every number the overlay burns
   into the frame restated as text, because 5 fps of 640x480 barn video is not
   legible to everyone the way a readout is. */
.evi { padding: 0; overflow: hidden; }
.evi .evi-film { border-radius: 0; background: #000; }
.evi-body { padding: 24px 28px 26px; }
.evi-body h3 { font-size: 18px; margin-bottom: 8px; }
.evi-body > p { color: var(--mut); font-size: 14.5px; }

/* Verification badge. Green on purpose: the AI concept films are labelled in
   the pink system, so real footage must never share their signal. */
.evi-real {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #57e0a8; background: rgba(87, 224, 168, 0.09);
  border: 1px solid rgba(87, 224, 168, 0.35);
  border-radius: 980px; padding: 5px 12px 5px 11px;
  margin-bottom: 14px;
}
.evi-real::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #57e0a8; flex: none;
}

/* what the overlay drew, as a table a reader can scan */
.evi-read { display: grid; margin-top: 20px; }
.evi-read div {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.evi-read div:last-child { border-bottom: 0; }
.evi-read dt {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.13em; color: var(--dim); text-transform: uppercase;
}
.evi-read dd { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.evi-read dd.hot { color: var(--pink); font-weight: 700; }
.evi-read dd.ok { color: #57e0a8; font-weight: 700; }

/* The respiration fit is a matplotlib figure straight out of the pipeline.
   It keeps its own white ground and is framed as the printout it is, rather
   than being redrawn in brand colors, which would make it our picture of the
   result instead of the result. */
.evi-plot { background: #fff; border-radius: var(--r-lg); padding: 14px; }
.evi-plot img, .evi-plot video { border-radius: 8px; width: 100%; }

/* Same printout logic, running. These clips carry the script's own header and
   its live traces, so they get the white ground rather than the black camera
   frame — what is on screen is the figure, and the barn video is inside it.
   Full column width, because the burned-in header is the whole point and it
   stops being readable much below this. */
.evi-wide { margin: 46px 0 0; }
.evi-wide .evi-real { margin-bottom: 12px; }
.evi-wide figcaption {
  color: var(--mut); font-size: 14.5px; line-height: 1.6;
  max-width: 760px; margin-top: 16px;
}
/* The readout under a wide clip runs across rather than down, so the label
   sits over its value instead of beside it — side by side in a narrow column
   breaks values like "848 x 480" across two lines. */
.evi-read-wide {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 30px; margin: 26px 0 46px;
}
.evi-read-wide div {
  display: block; padding: 0;
  border-bottom: 0; border-top: 1px solid var(--line);
  padding-top: 12px;
}
.evi-read-wide dd { text-align: left; margin-top: 5px; font-size: 15px; }

/* Squeezed to a phone column these clips fall to about 100px tall and the
   boxes stop being visible at all, so below the breakpoint the frame holds
   its readable width and pans instead of shrinking. The readout underneath
   still carries every number for anyone who does not pan. */
@media (max-width: 760px) {
  .evi-wide .evi-plot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .evi-wide .evi-plot video { width: 620px; max-width: none; }
  .evi-wide figcaption::after {
    content: "Drag the frame sideways to read it at full size.";
    display: block; margin-top: 10px;
    font-size: 12.5px; color: var(--dim);
  }
}

/* the headline figure a clip resolves to, sat beside its own explanation */
.evi-figure { margin-top: 30px; }
.evi-figure strong {
  display: block; font-size: clamp(34px, 4vw, 52px); font-weight: 700;
  letter-spacing: -0.03em; color: var(--pink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.evi-figure span { display: block; color: var(--mut); font-size: 14px; margin-top: 10px; }

/* Evidence page's classifier gallery reuses .pstack, but those frames are the
   barn camera's own 848x480 and the model prints its label and confidence in
   the top-left corner. The 4:3 cover crop that suits the curtain renders cuts
   that label off, which would remove the very thing the frame is evidence of.
   So: the frames' own ratio, contained, never cropped. */
.pstack--wide img { aspect-ratio: 16 / 9; object-fit: contain; background: #000; }

/* Evidence gallery, stacked.
   Side by side never sat right here: at half width a 16:9 frame is ~330px tall
   while six class cards run to ~500, and squeezing either to match the other
   costs the thing that matters. Stacked removes the problem instead of tuning
   it. The frame is held well inside the text column rather than spanning it, so
   the six class cards below can be full size and carry their own description,
   in two rows of three. The whole block is centered as one object, so the cards
   and the frame always share an edge. */
.pgal--evi {
  grid-template-columns: 1fr; gap: 26px;
  max-width: 830px; margin-left: auto; margin-right: auto;
}
.pgal--evi .prows { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pgal--evi .prow {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 9px;
  padding: 22px 20px 20px;
}
.pgal--evi .prow b { font-size: 16.5px; letter-spacing: -0.01em; }
/* gap owns the rhythm here, so the base card's own margins would double it */
.pgal--evi .prow em { margin: 0; }
/* the badge is the row's verdict: push it to the card's floor so all six read
   along one line however long the description runs */
.pgal--evi .prow .pbadge { flex: none; margin-top: auto; }
/* the caption swaps between one and two lines as classes change; reserving the
   tall case stops the card grid below from jumping on every click */
.pgal--evi .pstack figcaption { min-height: 2.9em; }
/* Stacked frames inherit inset:0 from the base gallery, which stretches every
   frame after the first over the caption too. Releasing the bottom edge lets
   aspect-ratio govern again, so all six occupy exactly the same box. */
.pgal--evi .pstack img:not(:first-child) { inset: 0 0 auto 0; height: auto; }
@media (max-width: 760px) { .pgal--evi .prows { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pgal--evi .prows { grid-template-columns: 1fr; } }

/* ---------- evidence: results table ----------
   For scored comparisons where two numbers per row carry the argument and a
   readout list would flatten them. Row rules only, no vertical lines, numbers
   tabular so the columns read down. The winning row is the point of the table,
   so it gets the brand color rather than a note underneath saying which one
   won. */
.evi-tbl {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--bg2); border-radius: var(--r-md);
  overflow: hidden;
}
.evi-tbl caption {
  caption-side: bottom; text-align: left;
  color: var(--dim); font-size: 12.5px; line-height: 1.6; padding-top: 14px;
}
.evi-tbl th, .evi-tbl td { padding: 13px 18px; text-align: right; }
.evi-tbl thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.evi-tbl tbody th {
  text-align: left; font-weight: 500; font-size: 14.5px; color: var(--ink);
}
.evi-tbl thead th:first-child { text-align: left; }
.evi-tbl tbody td { font-size: 14.5px; color: var(--mut); }
.evi-tbl tbody tr + tr th, .evi-tbl tbody tr + tr td {
  border-top: 1px solid rgba(107, 99, 131, 0.45);
}
.evi-tbl tbody tr.best { background: rgba(246, 83, 143, 0.10); }
.evi-tbl tbody tr.best th, .evi-tbl tbody tr.best td { color: var(--pink); font-weight: 700; }
.evi-tbl-note { color: var(--dim); font-size: 12.5px; line-height: 1.7; margin-top: 18px; }
@media (max-width: 520px) {
  .evi-tbl th, .evi-tbl td { padding: 11px 12px; font-size: 13.5px; }
  .evi-tbl tbody th { font-size: 13.5px; }
}

/* .evi-figure was written for the end of a column, where its own top margin is
   the only spacing it needs. Where it opens a column beside a table it has to
   start level with that table, and where prose follows it the prose needs air. */
.evi-figure:first-child { margin-top: 0; }
.evi-figure:not(:last-child) { margin-bottom: 26px; }

/* the comparison table is three narrow columns, so it reads better centered at
   its own width than stretched across the text column */
.evi-tbl-wrap { max-width: 640px; margin: 8px auto 46px; }