/* Wave X website (design approved by Dylan 2026-10-28). HIG skill §11: the system font
   everywhere, the wordmark included (Dylan, 2026-10-30), 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 the system font, as in the app. */
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.wordmark:hover { text-decoration: none; }
.wordmark svg { width: 30px; height: 30px; }
.wordmark .word { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }

/* 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.
   The hero shows the look picked in the gallery (Dylan, 2026-10-30): site.js sets --hero-sky to
   that look's sampled sky and adds .ink-dark where dark text measures better than white. The
   fallback is Dark Blue Day. */
.hero-stage {
  --frame-h: 56.25vw;                       /* 16:9 at full width */
  --overlap: calc(var(--frame-h) * 0.25);
  position: relative; overflow: hidden;
  background: var(--hero-sky, 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; }
/* On a mid-tone sky neither white nor dark text reaches 4.5:1, so a light veil (black under white
   text, white under dark) settles behind the top bar and copy and fades out before the wave.
   site.js sets --veil per look: the faintest that measures >= 4.6:1 (docs/WEBSITE_DESIGN.md §10). */
.hero-top::before {
  content: ""; position: absolute; inset: 0 0 -240px 0; z-index: -1; pointer-events: none;
  background: var(--veil, transparent);
  /* A long eased tail, so the veil has no visible edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.8) 72%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.22) 91%, rgba(0, 0, 0, 0.06) 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.8) 72%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.22) 91%, rgba(0, 0, 0, 0.06) 97%, transparent 100%);
}
.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: 1000px; margin: 0 auto 28px; color: rgba(255, 255, 255, 0.92); }
/* Each sentence on its own line (Dylan, 2026-10-30); a narrow screen wraps them, evenly. */
.hero p.lede span { display: block; text-wrap: balance; }
.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: inherit; }
.hero.ink-dark .hero-stage { color: #111316; }
.hero.ink-dark p.lede { color: rgba(17, 19, 22, 0.92); }
.hero.ink-dark .btn.quiet { color: #111316; background: rgba(255, 255, 255, 0.3); }
/* On some skies the accent is close to the sky itself: a faint light edge keeps the button's shape. */
.hero .btn:not(.quiet) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
/* Scroll hint: a chevron near the foot of the first screen (or of the hero, if that is shorter),
   which nods a few times, then rests, and fades out over the first 120 px of scrolling. */
.scroll-hint {
  position: absolute; z-index: 3; left: 0; right: 0; margin: 0 auto;
  top: calc(min(100svh, 100%) - 72px);
  width: 44px; height: 44px; display: grid; place-items: center;
  color: inherit; opacity: 0.8;
}
.scroll-hint:hover { opacity: 1; text-decoration: none; }
.scroll-hint[hidden] { display: none; }
@keyframes hint-nod { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
@keyframes hint-out { to { opacity: 0; visibility: hidden; } }
@keyframes copy-out { to { opacity: 0; transform: translateY(-48px); } }
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint { animation: hint-nod 1.6s ease-in-out 1.2s 3; }
  /* As the page scrolls, the hint goes first and the copy fades and drifts up a little. The
     browser runs these from the scroll position (no script); without support they simply stay. */
  @supports (animation-timeline: scroll()) {
    .scroll-hint {
      animation: hint-nod 1.6s ease-in-out 1.2s 3, hint-out linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 120px;
    }
    .hero-copy { animation: copy-out linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
  }
}
.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 { font-size: 16px; }
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; }
  .scroll-hint { top: calc(min(100svh, 100%) - 60px); }
  .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; }
}