/* Tidewater — sales site
 *
 * Visual reference: oceanographic charts pushed cinematic. Deep navy paper,
 * warm cream type, teal tide-line accents, and a single warm amber for the
 * sunlit-water CTAs. The brand reads like a real artefact from the sea —
 * bathymetric labels, depth legends, a graticule line running across the
 * bottom of every cinema moment, ship's-instrument type rhythm.
 *
 * What we do NOT do (every one of these is an AI-design tell to avoid;
 * see ~/.claude/frontend-design.md):
 *   – No blue→purple gradients. No indigo/violet anywhere.
 *   – No glassmorphism. No backdrop-filter: blur(). Solid surfaces only.
 *   – No "aurora" / "nebula" / blurred gradient orbs in backgrounds.
 *   – No bento. No cards-in-cards. No `shadow-xl` soft floating.
 *   – No `rounded-2xl` everywhere. Borders are 1px hairlines, not pillows.
 *   – No Inter / Geist / DM Sans default. System stack + a chart mono.
 *   – No `letter-spacing: -0.02em` on every heading. We breathe.
 *   – No on-scroll fade-in-on-everything. The site moves when content moves.
 */

/* --------------------------------------------------------------- tokens */
:root {
  /* Palette (from /demo HUD; oceanographic chart family). */
  --paper:      #06121a;      /* deep navy, the page paper */
  --paper-2:    #0a1a23;      /* one-step lift for blocks that earn it */
  --paper-3:    #0f2330;      /* surface stripe for callouts */
  --ink:        #efe7cf;      /* warm cream, body copy */
  --ink-2:      #d8d0b8;      /* cream display */
  --ink-mute:   #7fa8b8;      /* desaturated mute, chart labels */
  --ink-dim:    #5a7e8d;      /* deepest mute, footers */
  --tide:       #2c7d76;      /* brand teal, used sparingly */
  --tide-lift:  #4ec1b3;      /* hover teal */
  --sun:        #e8b96b;      /* warm amber, the single CTA colour */
  --sun-lift:   #f4cf86;
  --rule:       rgba(216, 208, 184, 0.18);
  --rule-2:     rgba(216, 208, 184, 0.34);
  --rule-3:     rgba(216, 208, 184, 0.55);

  /* Type — system stack on body, no imported "default" face. The display
   * weight does the work; we deliberately avoid `tracking-tight` on headings. */
  --fs-body:    1rem;
  --fs-lead:    1.18rem;
  --fs-h2:      clamp(2.1rem, 4.4vw, 3.3rem);
  --fs-cinema:  clamp(2.4rem, 5.2vw, 4.4rem);
  --fs-display: clamp(3.4rem, 8.4vw, 6.6rem);
  --fs-mono:    0.78rem;

  /* Layout. Cinema sections break out to 100vw; prose blocks live on a
   * narrower text column so reading is comfortable. */
  --col:        min(1280px, 100% - 48px);
  --col-narrow: min(960px,  100% - 48px);
  --gutter:     clamp(28px, 5vw, 88px);
}

/* --------------------------------------------------------- base + reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* cinema sections break out to 100vw */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--ink-2); }
section[id],
header[id] {
  scroll-margin-top: 76px;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  color: var(--ink-2);
  background: rgba(216, 208, 184, 0.06);
  padding: 1px 6px;
  border-radius: 2px;
}
::selection { background: var(--tide); color: var(--ink); }

/* Chart-label face — used for kickers, captions, graticule, section markers. */
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 18, 26, 0.94);
  border-bottom: 1px solid var(--rule);
  /* Solid colour, not glassmorphism. A ship's nav strip, not a frosted bar. */
}
.nav-inner {
  width: var(--col);
  margin: 0 auto;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.brand-mark {
  width: 22px;
  height: 22px;
  /* Wave glyph drawn in pure CSS (no extra HTTP hit, no SVG file). */
  background:
    radial-gradient(circle at 30% 70%, var(--tide-lift) 0 2.5px, transparent 3px),
    radial-gradient(circle at 70% 70%, var(--tide-lift) 0 2.5px, transparent 3px);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
}
.brand--lg {
  font-size: 1.04rem;
  letter-spacing: 0.18em;
}
.brand--lg .brand-mark { width: 28px; height: 28px; }
.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.14s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  border: 1px solid var(--sun);
  color: var(--sun);
  padding: 8px 14px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.16s, color 0.16s;
}
.nav-cta:hover { background: var(--sun); color: var(--paper); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-veil {
  /* Directional veil. The hero video is bright + warm at the top (sky);
   * the title sits in the lower third over the darkest gradient stop.
   * No uniform darkening — the water at the top stays cinematic. */
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(6, 18, 26, 0.10) 0%,
      rgba(6, 18, 26, 0.00) 28%,
      rgba(6, 18, 26, 0.00) 48%,
      rgba(6, 18, 26, 0.78) 84%,
      rgba(6, 18, 26, 1.00) 100%);
}
.hero-inner {
  width: var(--col);
  margin: 0 auto;
  padding: 0 0 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.hero-kicker { color: var(--ink-2); }
.hero-title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.005em;  /* a hair, NOT the AI -0.02em. */
  line-height: 0.92;
  color: var(--ink-2);
  max-width: 16ch;
}
.hero-tagline {
  font-size: var(--fs-lead);
  max-width: 56ch;
  color: var(--ink);
  margin-top: 4px;
}
.hero-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

/* Chart graticule strip across the bottom of the hero — bathymetric metadata,
 * not "scroll cue ↓" decoration. Tiny mono labels, 1px rule. */
.hero-graticule {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  pointer-events: none;
}
.hero-graticule .mono { color: var(--ink-mute); font-size: 0.7rem; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  transition: background 0.16s, color 0.16s, transform 0.16s;
  cursor: pointer;
}
.btn-primary {
  background: var(--sun);
  color: var(--paper);
  border-color: var(--sun);
}
.btn-primary:hover {
  background: var(--sun-lift);
  border-color: var(--sun-lift);
  transform: translateY(-1px);
}
.btn-ghost { color: var(--ink-2); background: transparent; }
.btn-ghost:hover { background: var(--ink-2); color: var(--paper); }
.btn-lg { padding: 18px 28px; font-size: 1.04rem; }

/* Bathymetric chip — small chart-label tags. */
.chip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  padding: 5px 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ============================================================= PROSE
 * Quiet text-only sections between cinema moments. These are the page's
 * exhale points — the cinema sections shout, the prose sections murmur. */
.prose {
  padding: clamp(96px, 14vw, 168px) 0;
  border-bottom: 1px solid var(--rule);
}
.prose-inner {
  width: var(--col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.prose-head {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.002em;
  line-height: 1.06;
  color: var(--ink-2);
  max-width: 22ch;
}
.prose-lede {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 80ch;
}
.prose-lede p {
  font-size: var(--fs-lead);
  color: var(--ink);
}
@media (max-width: 720px) {
  .prose-lede { grid-template-columns: 1fr; }
}

.prose-pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 8px;
}
.prose-pillars li {
  background: var(--paper);
  padding: 28px 28px 32px;
  color: var(--ink-mute);
  font-size: 0.98rem;
}
.prose-pillars b {
  display: block;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 1.06rem;
  margin-bottom: 8px;
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .prose-pillars { grid-template-columns: 1fr; }
}

/* ============================================================= CINEMA
 * Full-bleed showcase sections. Each cinema section is one big idea:
 * the video fills the viewport, text overlays in one of four anchor
 * positions (BL, TR, TL, BC). Anchor positions alternate across sections
 * so consecutive cinemas don't read identically — that's the rhythm. */
.cinema {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  border-bottom: 1px solid var(--rule);
}
.cinema--tall { min-height: 92vh; }
.cinema--mid  { min-height: 78vh; }

.cinema-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cinema-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* Base veil applies to every cinema section — a soft darken over the
 * whole video so even cream text catches some weight. The directional
 * veils stack on top to weight the text-anchor corner specifically. */
.cinema-veil {
  background:
    linear-gradient(180deg,
      rgba(6, 18, 26, 0.20) 0%,
      rgba(6, 18, 26, 0.32) 100%);
}
/* Directional veils. Each one applies a deep gradient from the text
 * anchor corner outward. Stronger and reaching further than v1 so the
 * cream type stays legible no matter what frame the video is on. */
.cinema-veil--bl {
  background:
    linear-gradient(180deg,
      rgba(6, 18, 26, 0.20) 0%,
      rgba(6, 18, 26, 0.32) 100%),
    radial-gradient(140% 110% at -10% 110%,
      rgba(6, 18, 26, 0.96) 0%,
      rgba(6, 18, 26, 0.80) 28%,
      rgba(6, 18, 26, 0.40) 55%,
      rgba(6, 18, 26, 0.00) 78%);
}
.cinema-veil--tr {
  background:
    linear-gradient(180deg,
      rgba(6, 18, 26, 0.20) 0%,
      rgba(6, 18, 26, 0.32) 100%),
    radial-gradient(140% 110% at 110% -10%,
      rgba(6, 18, 26, 0.96) 0%,
      rgba(6, 18, 26, 0.80) 28%,
      rgba(6, 18, 26, 0.40) 55%,
      rgba(6, 18, 26, 0.00) 78%);
}
.cinema-veil--top {
  background:
    linear-gradient(180deg,
      rgba(6, 18, 26, 0.92) 0%,
      rgba(6, 18, 26, 0.70) 22%,
      rgba(6, 18, 26, 0.30) 50%,
      rgba(6, 18, 26, 0.10) 70%,
      rgba(6, 18, 26, 0.55) 100%);
}
.cinema-veil--bottom {
  background:
    linear-gradient(180deg,
      rgba(6, 18, 26, 0.30) 0%,
      rgba(6, 18, 26, 0.10) 25%,
      rgba(6, 18, 26, 0.70) 65%,
      rgba(6, 18, 26, 0.96) 100%);
}

/* Anchor — absolute-positioned to a corner of the cinema section.
 * Using absolute (not grid-place) so TR / TL / BL / BC variants actually
 * pin to their corners regardless of the section's intrinsic height. */
.cinema-anchor {
  position: absolute;
  z-index: 1;
  max-width: 52ch;
  width: min(52ch, calc(100% - 2 * var(--gutter)));
  pointer-events: auto;
}
.cinema-anchor--bl {
  left: max(24px, calc((100vw - var(--col)) / 2));
  bottom: 88px;
}
.cinema-anchor--tl {
  left: max(24px, calc((100vw - var(--col)) / 2));
  top: clamp(96px, 14vh, 160px);
}
.cinema-anchor--tr {
  right: max(24px, calc((100vw - var(--col)) / 2));
  top: clamp(96px, 14vh, 160px);
  text-align: right;
}
.cinema-anchor--bc {
  left: 50%;
  transform: translateX(-50%);
  bottom: 88px;
  text-align: center;
}

.cinema-title {
  font-size: var(--fs-cinema);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.98;
  color: var(--ink-2);
  max-width: 18ch;
  /* Soft drop shadow for legibility insurance, NOT for "premium" decoration.
   * Single black 0.35α shadow at small offset — invisible on dark backgrounds,
   * saves the text the one frame the video flashes light. */
  text-shadow: 0 2px 12px rgba(6, 18, 26, 0.55);
}
.cinema-anchor--tr .cinema-title { margin-left: auto; }
.cinema-anchor--bc .cinema-title { margin-left: auto; margin-right: auto; max-width: 22ch; }
.cinema-copy {
  margin-top: 18px;
  font-size: var(--fs-lead);
  color: var(--ink);
  max-width: 48ch;
  text-shadow: 0 1px 8px rgba(6, 18, 26, 0.55);
}
.cinema-anchor--tr .cinema-copy { margin-left: auto; }
.cinema-anchor--bc .cinema-copy { margin-left: auto; margin-right: auto; }
.cinema-anchor .kicker {
  text-shadow: 0 1px 8px rgba(6, 18, 26, 0.7);
}

/* Graticule line — a 1px chart rule with mono labels, pinned across the
 * bottom of every cinema section. The same device on a real chart: the
 * thin border that carries grid coordinates and scale notes. */
.cinema-graticule {
  position: absolute;
  left: max(24px, calc((100vw - var(--col)) / 2));
  right: max(24px, calc((100vw - var(--col)) / 2));
  bottom: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  pointer-events: none;
}
.cinema-graticule .mono { color: var(--ink-mute); font-size: 0.7rem; }

/* Time-of-day axis — sits above the graticule, on the time-of-day cinema. */
.cinema-tod {
  position: absolute;
  left: max(24px, calc((100vw - var(--col)) / 2));
  right: max(24px, calc((100vw - var(--col)) / 2));
  bottom: 60px;
  pointer-events: none;
}
.cinema-tod-axis {
  position: relative;
  height: 28px;
  border-top: 1px solid var(--rule);
}
.cinema-tod-axis span {
  position: absolute;
  top: 0;
  transform: translate(-50%, 0);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 14px;
}
.cinema-tod-axis span i {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--rule-3);
  transform: translateX(-50%);
}
.cinema-tod-axis span:first-child { transform: translate(0, 0); }
.cinema-tod-axis span:first-child i { left: 0; transform: none; }
.cinema-tod-axis span:last-child { transform: translate(-100%, 0); }
.cinema-tod-axis span:last-child i { left: 100%; transform: none; }

/* ============================================================== SPLIT
 * The wave-sim section — video pinned to the left, deeper technical
 * copy on the right. Asymmetric vs. the cinema sections to break rhythm. */
.split {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: clamp(96px, 14vw, 168px) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.split-inner-flex,
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: stretch;
}
.split { padding-left: var(--gutter); padding-right: var(--gutter); }
.split-media {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  align-self: start;
  aspect-ratio: 16 / 11;
}
.split-media video,
.split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(6, 18, 26, 0) 0%, rgba(6, 18, 26, 0.85) 100%);
}
.split-caption .mono { color: var(--ink-mute); font-size: 0.7rem; }

.split-copy { max-width: 60ch; }
.split-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.002em;
  line-height: 1.05;
  color: var(--ink-2);
  max-width: 18ch;
  margin-bottom: 18px;
}
.split-copy p {
  font-size: var(--fs-lead);
  color: var(--ink);
  margin-top: 14px;
}
.split-spec {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.split-spec > div {
  background: var(--paper-2);
  padding: 14px 16px;
}
.split-spec dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.split-spec dd {
  color: var(--ink-2);
  font-size: 0.96rem;
}
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
}

/* ============================================================= SPEC ROW
 * Three smaller features in a tight row — surface shading, foam, buoyancy.
 * Each is a still + caption + headline + 4-line paragraph. */
.spec-row {
  width: var(--col);
  margin: 0 auto;
  padding: clamp(96px, 14vw, 168px) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.spec figure {
  position: relative;
  border: 1px solid var(--rule);
  margin-bottom: 20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.spec img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spec figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(6, 18, 26, 0) 0%, rgba(6, 18, 26, 0.85) 100%);
  color: var(--ink-mute);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}
.spec h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.002em;
  line-height: 1.12;
  color: var(--ink-2);
  margin-bottom: 10px;
  max-width: 22ch;
}
.spec p {
  color: var(--ink-mute);
  font-size: 0.98rem;
  max-width: 36ch;
}
@media (max-width: 920px) {
  .spec-row { grid-template-columns: 1fr; gap: 56px; }
}

/* =========================================================== MODES GRID
 * Uniform-aspect-ratio grid (NOT bento — every card is the same shape).
 * Three columns on desktop so each preset gets real estate. */
.modes {
  width: var(--col);
  margin: 0 auto;
  padding: clamp(96px, 14vw, 168px) 0;
  border-bottom: 1px solid var(--rule);
}
.modes-head {
  max-width: 64ch;
  margin-bottom: 48px;
}
.modes-head h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.002em;
  line-height: 1.05;
  color: var(--ink-2);
  margin-bottom: 18px;
  max-width: 16ch;
}
.modes-head p {
  font-size: var(--fs-lead);
  color: var(--ink);
}
.modes-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.modes-grid > li { background: var(--paper); }
.mode {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.mode img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}
.mode:hover img { transform: scale(1.03); }
.mode figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: linear-gradient(180deg, rgba(6, 18, 26, 0) 0%, rgba(6, 18, 26, 0.9) 100%);
}
.mode-name {
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.02rem;
}
.mode-coord {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
/* Ghost cells — presets not yet shipped. Diagonal-hatch hint without
 * any glassmorphism / glow. */
.mode--ghost {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px,
      rgba(216, 208, 184, 0.05) 11px 12px);
  display: grid;
  place-content: center;
  padding: 16px;
  text-align: center;
}
.mode--ghost div { display: grid; gap: 6px; }
.mode--ghost .mode-name { color: var(--ink-mute); }
.mode--ghost .mode-coord { color: var(--ink-dim); }

@media (max-width: 920px) { .modes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .modes-grid { grid-template-columns: 1fr; } }

/* ===================================================== PERFORMANCE TABLE */
.tier-table {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tier-table > div {
  background: var(--paper);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: baseline;
}
.tier-table dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun);
}
.tier-table dd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink-2);
  font-size: 0.9rem;
}

/* ======================================================== INTEGRATION */
.integrate {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: clamp(96px, 14vw, 168px) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.integrate-inner {
  width: var(--col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.integrate-copy h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.002em;
  line-height: 1.05;
  color: var(--ink-2);
  margin-bottom: 18px;
  max-width: 14ch;
}
.integrate-copy p {
  font-size: var(--fs-lead);
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 48ch;
}
.integrate-list {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 52ch;
}
.integrate-list li {
  background: var(--paper-2);
  padding: 12px 16px;
  color: var(--ink-mute);
  font-size: 0.94rem;
  position: relative;
  padding-left: 32px;
}
.integrate-list li::before {
  content: "·";
  position: absolute;
  left: 16px;
  top: 10px;
  color: var(--tide-lift);
  font-weight: 900;
}
.code {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  padding: 24px 26px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
}
.code .c { color: var(--ink-mute); }
@media (max-width: 920px) {
  .integrate-inner { grid-template-columns: 1fr; }
}

/* ============================================================== FAQ */
.faq {
  padding: clamp(96px, 14vw, 168px) 0;
  border-bottom: 1px solid var(--rule);
}
.faq-inner {
  width: var(--col-narrow);
  margin: 0 auto;
}
.faq h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  margin: 0;
}
.faq .prose-head { margin-bottom: 36px; }
.faq details {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--ink-mute);
  font-size: 1.4rem;
  font-weight: 400;
  width: 22px;
  text-align: right;
  transition: transform 0.14s;
}
.faq details[open] summary::after { content: "−"; }
.faq p {
  margin-top: 14px;
  color: var(--ink);
  max-width: 64ch;
}

/* ============================================================== BUY */
.buy {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: clamp(96px, 12vw, 144px) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.buy-inner {
  width: var(--col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.buy-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.buy-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  padding: 36px 40px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
}
.buy-price {
  font-size: clamp(3.8rem, 7vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink-2);
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.buy-price small {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
  font-weight: 500;
}
.buy-note { font-size: 0.66rem; color: var(--ink-mute); text-align: right; }
.buy-fineprint {
  max-width: 34ch;
  color: var(--ink-mute);
  font-size: 0.88rem;
  text-align: right;
}
@media (max-width: 820px) {
  .buy-inner { grid-template-columns: 1fr; }
  .buy-right { align-items: flex-start; }
  .buy-note,
  .buy-fineprint { text-align: left; }
}

/* =========================================================== FOOTER */
.footer {
  padding: 64px 0 48px;
  color: var(--ink-mute);
  font-size: 0.9rem;
}
.footer-inner {
  width: var(--col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer h4 {
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer a { display: block; padding: 4px 0; color: var(--ink-mute); transition: color 0.14s; }
.footer a:hover { color: var(--ink); }
.footer-brand a.brand { display: inline-flex; padding: 0; }
.footer-tag {
  color: var(--ink-mute);
  max-width: 44ch;
  font-size: 0.88rem;
}
.footer-bottom {
  width: var(--col);
  margin: 36px auto 0;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ============================================ MOBILE / NAV FALLBACKS */
@media (max-width: 920px) {
  .nav-links { gap: 14px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-links a[href="/demo/"], .nav-links a[href="/docs/"] { display: inline; }

  .hero-inner { padding-bottom: 80px; }
  .hero-graticule { display: none; }   /* too cramped on phones */
  .hero-title { font-size: clamp(3rem, 13vw, 5.6rem); }

  .cinema-anchor { padding-left: 20px; padding-right: 20px; }
  .cinema-anchor--tr { text-align: left; }
  .cinema-anchor--tr .cinema-title,
  .cinema-anchor--tr .cinema-copy { margin-left: 0; margin-right: auto; }
  .cinema-graticule { left: 20px; right: 20px; gap: 14px; }
  .cinema-graticule .mono:nth-child(2) { display: none; }
  .cinema-tod { left: 20px; right: 20px; bottom: 64px; }
}

/* The lazy-video JS pauses off-screen videos. For users who explicitly
 * prefer reduced motion, force the posters and skip autoplay altogether. */
@media (prefers-reduced-motion: reduce) {
  .hero-video,
  .cinema-video,
  .lazy-video {
    display: none;
  }
  .hero,
  .cinema {
    background-image: var(--poster-fallback, none);
    background-size: cover;
    background-position: center;
  }
}