/* Wave X website (design approved by Dylan 2026-10-28). HIG skill §11: system font, Rajdhani
   only for the wordmark (outlined artwork, no font download), one accent, light/dark/increased
   contrast, reduced motion, phone width. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-alt: #f3f4f6;
  --card: #ffffff;
  --text: #121418;
  --text-2: #565c66;
  --rule: rgba(18, 20, 24, 0.12);
  /* The accent follows the Color picked in the gallery (Dylan, 2026-10-30): site.js sets
     --wave-accent (buttons; light-mode links and icons) and --wave-link-dark (dark-mode links and
     icons); contrast in site.js. The fallbacks are Dark Blue Day. */
  --accent: var(--wave-accent, #0f70bf);
  --on-accent: #ffffff;
  --link: var(--wave-accent, #0f70bf);
  --shadow: 0 30px 80px -20px rgba(10, 20, 40, 0.35), 0 0 0 1px rgba(10, 20, 40, 0.08);
  --radius: 18px;
  --max: 1080px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --bg-alt: #13161b;
    --card: #171a20;
    --text: #f1f2f4;
    --text-2: #a2a8b2;
    --rule: rgba(255, 255, 255, 0.12);
    --accent: var(--wave-accent, #0f70bf);
    --link: var(--wave-link-dark, #188dec);
    --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: #2e3238;
    --rule: rgba(18, 20, 24, 0.45);
    --accent: #084a99;
    --link: #084a99;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --text-2: #d6dae0;
    --rule: rgba(255, 255, 255, 0.5);
    --accent: #0e55b8;
    --link: #9cc8ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--bg); padding: 8px 12px; }

/* Wordmark: the R1 mark plus "Wave X" in Rajdhani, the app's lockup. */
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.wordmark:hover { text-decoration: none; }
.wordmark svg { width: 30px; height: 30px; }
.wordmark .word { display: block; height: 17px; aspect-ratio: 305.91 / 64.3; background: currentColor;
  -webkit-mask: url("wordmark.8cc75df1eb.svg") center / contain no-repeat; mask: url("wordmark.8cc75df1eb.svg") center / contain no-repeat; }
@media (forced-colors: active) { .wordmark .word { background: CanvasText; forced-color-adjust: none; } }

/* Top bar */
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a:not(.btn):not(.wordmark) { color: inherit; font-size: 15px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 17px; cursor: pointer; border: 0;
  background: var(--accent); color: var(--on-accent);
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.small { min-height: 34px; padding: 0 16px; font-size: 15px; }
.btn.quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Hero: the copy, then the whole movie frame, edge to edge (Dylan, 2026-10-30: show all of the
   wave, not a close crop), then the app window overlapping its foot. */
.hero { position: relative; color: #fff; }
/* Above the movie, the sky carries on in the colors of the frame's top edge (sampled from the
   poster), so the join can't be seen. The copy's foot overlaps only the frame's empty sky: the
   wave starts 43% down the frame and the overlap is 25%. Contrast in docs/WEBSITE_DESIGN.md. */
.hero-stage {
  --frame-h: 56.25vw;                       /* 16:9 at full width */
  --overlap: calc(var(--frame-h) * 0.25);
  position: relative; overflow: hidden;
  background: linear-gradient(to right, #01054e 0%, #010a55 20%, #05166e 40%, #082f8c 60%, #0844a4 80%, #0551af 100%);
}
.hero-media { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; margin-top: calc(-1 * var(--overlap)); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* The frame's top fades in, so the join with the sampled sky above can't be seen. No scrim:
   white on this sky measures well above AA (docs/WEBSITE_DESIGN.md). */
.hero-media video, .hero-media img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
.hero-top { position: relative; z-index: 2; }
.hero-copy { text-align: center; padding-top: clamp(40px, 9vh, 110px); }
.hero h1 { font-size: clamp(40px, 7vw, 80px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 700; }
.hero p.lede { font-size: clamp(18px, 2.2vw, 23px); max-width: 640px; margin: 0 auto 28px; color: rgba(255, 255, 255, 0.92); }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .btn.quiet { color: #fff; background: rgba(0, 10, 30, 0.32); }
.hero .meta { margin-top: 16px; font-size: 14px; font-weight: 500; color: #fff; }
.hero-pause {
  position: absolute; right: 20px; bottom: 186px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); color: #fff; display: grid; place-items: center;
}
.hero-window { position: relative; z-index: 3; margin-top: -170px; }
.window-frame { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: #000; position: relative; }
.window-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Until the window recording exists the build drops the window (tools/build-site.mjs). */
.hero.no-window .hero-pause { bottom: 20px; }
.window-bar { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; position: absolute; inset: 0 0 auto 0; }
.window-bar i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }

/* Sections */
section { padding: clamp(64px, 10vw, 120px) 0; }
section.alt { background: var(--bg-alt); }
h2 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 16px; }
.intro { font-size: clamp(18px, 2vw, 21px); color: var(--text-2); max-width: 680px; margin: 0 0 48px; }
.center { text-align: center; }
.center .intro { margin-left: auto; margin-right: auto; }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.features h3, .pro-list h3 { font-size: 21px; margin: 0 0 6px; letter-spacing: -0.005em; }
.features p, .pro-list p { margin: 0; color: var(--text-2); }

.pro-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
/* Pro features as cards: the first spans both columns, the rest pair up; one column on phones.
   Icons take the accent, so they follow the gallery's Color. */
.pro-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pro-list .card { background: var(--bg-alt); border-radius: 16px; padding: 22px; }
.pro-list .card:first-child { grid-column: 1 / -1; }
.pro-list .icon { display: block; width: 28px; height: 28px; margin-bottom: 12px; color: var(--link); }
.note { margin-top: 36px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--rule); color: var(--text-2); font-size: 15px; }
.note b { color: var(--text); }

.price-card {
  background: var(--card); border-radius: var(--radius); padding: 36px 32px;
  box-shadow: 0 0 0 1px var(--rule); position: sticky; top: 24px;
}
.price-card .label { font-weight: 600; font-size: 17px; margin: 0; }
.price { display: flex; align-items: baseline; gap: 10px; line-height: 1; margin: 12px 0 8px; }
.price .amount { font-size: 64px; font-weight: 700; letter-spacing: -0.03em; }
.price .currency { font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); }
.price-card .then { color: var(--text-2); margin: 0 0 20px; font-size: 15px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--rule); }
.price-card li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.price-card .btn { width: 100%; }
.price-card .fine { font-size: 13px; color: var(--text-2); margin: 14px 0 0; }
.price-card .soon { margin: 0; min-height: 44px; display: grid; place-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-weight: 600; font-size: 15px; }
.note p { margin: 0; }
.note p + p { margin-top: 10px; }

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-2); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; color: var(--text-2); }

.download-band { text-align: center; }
.download-band .intro { margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.download-band .meta { color: var(--text-2); font-size: 15px; margin-top: 14px; }

footer { border-top: 1px solid var(--rule); padding: 36px 0 48px; font-size: 14px; color: var(--text-2); }
footer .row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
footer a { color: inherit; }
footer a:hover, .doc a:hover { color: var(--link); }
footer .copyright { margin: 0; }
footer .wordmark .word { height: 13px; }
footer .wordmark svg { width: 22px; height: 22px; }
footer .legal-line { margin: 20px 0 0; font-size: 12px; max-width: 760px; }

/* Colors gallery: the app's stage and shelf. One dark surface in both appearances, like the
   app's window over the wave; flat translucent panels, no blur (FINDINGS §23.2). */
.gallery { position: relative; border-radius: 22px; overflow: hidden; background: #05070a; color: #fff; box-shadow: var(--shadow); }
.stage { position: relative; aspect-ratio: 16 / 9; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.42) 18%, rgba(0, 0, 0, 0) 44%);
}
.stage-head { position: absolute; z-index: 2; left: 28px; right: 28px; top: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.stage-head h3 { margin: 0; font-size: 30px; letter-spacing: -0.01em; line-height: 1.15; }
.stage-head p { margin: 4px 0 0; font-size: 16px; color: #fff; }
.stage-controls { display: flex; gap: 10px; align-items: center; }
.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.58); }
.segmented button {
  font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: transparent; border: 0; cursor: pointer;
  min-height: 34px; padding: 0 16px; border-radius: 999px;
}
.segmented button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.24); }
.round-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0, 0, 0, 0.58); color: #fff; display: grid; place-items: center; }
.shelf-wrap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; border-radius: 16px; background: rgba(4, 8, 16, 0.55); }
.shelf { display: flex; gap: 12px; overflow-x: auto; padding: 12px 12px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
.tile { flex: 0 0 152px; scroll-snap-align: start; border: 0; padding: 0; background: none; color: #fff; cursor: pointer; font: inherit; text-align: center; }
.tile .thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.tile video, .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .name { display: block; font-size: 13px; margin-top: 6px; color: rgba(255, 255, 255, 0.86); }
.tile[aria-selected="true"] .thumb { box-shadow: 0 0 0 3px #fff; }
.tile[aria-selected="true"] .name { color: #fff; font-weight: 600; }
.tile .check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: none; place-items: center; }
.tile[aria-selected="true"] .check { display: grid; }
.tile:focus-visible { outline: none; }
.tile:focus-visible .thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--link); }

/* Text pages (Privacy, Terms, Support, Licenses) */
.doc { max-width: 720px; padding-top: 48px; padding-bottom: 96px; }
.doc h1 { font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 12px; }
.doc .updated { color: var(--text-2); margin: 0 0 40px; font-size: 15px; }
.doc h2 { font-size: 24px; margin: 40px 0 10px; letter-spacing: -0.005em; }
.doc p, .doc li { color: var(--text-2); }
.doc p b, .doc li b { color: var(--text); }
.doc .contact-card { margin: 24px 0 8px; padding: 24px; border-radius: var(--radius); background: var(--bg-alt); }
.doc .contact-card p { margin: 6px 0 0; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc h3 { font-size: 18px; margin: 28px 0 6px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); color: var(--text-2); }
.doc th { color: var(--text); font-weight: 600; }
.doc .table-scroll { overflow-x: auto; }
.doc pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; background: var(--bg-alt); color: var(--text-2); padding: 16px; border-radius: 12px; }
/* Preview builds only: a launch fact still to fill in. A release build refuses to run while any
   remains (tools/build-site.mjs), so this never reaches the live site. */
.fill { background: rgba(255, 196, 0, 0.22); border-radius: 4px; padding: 0 3px; color: var(--text); }

/* Phone width */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .nav ul li.hide-s { display: none; }
  .nav ul { gap: 18px; }
  .hero-pause { bottom: 104px; right: 12px; }
  .hero.no-window .hero-pause { bottom: 12px; }
  .hero-window { margin-top: -90px; }
  .window-frame { border-radius: 10px; }
  .features, .pro-grid { grid-template-columns: 1fr; gap: 28px; }
  .pro-list { grid-template-columns: 1fr; }
  .gallery { border-radius: 16px; }
  /* The title block moves under the picture, so it never covers the wave. */
  .stage { aspect-ratio: auto; display: flex; flex-direction: column; }
  .stage video { position: relative; aspect-ratio: 16 / 9; height: auto; }
  .stage::before { display: none; }
  .stage-head { position: static; padding: 14px 16px 2px; background: #0b0f16; align-items: center; }
  .stage-head h3 { font-size: 22px; }
  .stage-head p { font-size: 14px; }
  .shelf-wrap { position: static; border-radius: 0; background: #0b0f16; }
  .tile { flex-basis: 128px; }
  .price-card { position: static; padding: 28px 22px; }
  footer .row { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion: no movie plays (site.js); each shows its poster still. */
@media (prefers-reduced-motion: reduce) {
  .hero-pause, #gallery-pause { display: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}