/* ===========================================================================
   RESONANCE LOUNGE - THE PRODUCT PAGES
   ===========================================================================

   One stylesheet, shared by the three static pages served out of wwwroot:

     /            wwwroot/index.html      what the product is, for members
     /tech        wwwroot/tech.html       what it is made of, in depth
     /download    wwwroot/download.html   every build, every platform

   WHY THIS IS A FILE AND NOT THREE <style> BLOCKS. It used to be inline, and
   that was right while there was one page. With three, an inline block means a
   colour is changed in three places and is wrong in two of them by the end of
   the week. Same reasoning as the download links: one place to edit, or it
   goes stale.

   It is still a SAME-ORIGIN request and there is still nothing third-party on
   these pages. Fonts come from /fonts/poppins/, the mark from /images/brand/,
   and no request leaves this server.

   ⛔ Not wwwroot/css/site.css - that name belongs to the MVC site next door,
   which is a different design entirely and predates all of this.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts. Self-hosted deliberately: a CDN font logs the visitor's IP, which
   this project rules out. Same five files the MVC site already serves.
   --------------------------------------------------------------------------- */
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-Bold.ttf') format('truetype'); }

/* ---------------------------------------------------------------------------
   Palette. Taken verbatim from Docs/Specs/ResonanceLounge_Colors_01_Palette.html
   and mirrored by MobileApps/ResonanceLounge/src/theme/palette.ts. Do not
   hand-pick a hex value below this block.

   Proportion rule from the colour system, which this page follows:
   Ground ~65% of the surface, hero magenta plus one register ~25%,
   accents ~7%, amber ~3%. Body text is Starlight or Lilac and nothing else.
   Electric green is never text.
   --------------------------------------------------------------------------- */
:root {
  --void:      #080410;
  --cosmic:    #0C0618;
  --indigo:    #150A28;

  --magenta:   #EC2B8A;
  --magenta-glow: #FF5CB0;
  --green:     #91F029;
  --cyan:      #29E0E6;
  --uv:        #8A2BD0;

  --amber:     #F0A020;
  --gold:      #FFC94A;

  --forest:    #2F6B3A;
  --berry:     #9B2C63;
  --pine:      #1B6E72;

  --starlight: #F2ECFA;
  --lilac:     #B9A8D8;

  --hairline:  rgba(185, 168, 216, 0.14);
  --hairline-strong: rgba(185, 168, 216, 0.28);
  --panel:     rgba(21, 10, 40, 0.55);

  --measure: 1160px;
  --radius: 16px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--starlight);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The ambient Ground. Three very low-opacity fields, fixed, so the page reads
   as one continuous space rather than a stack of boxes. */
body::before {
  content: '';
  position: fixed;
  inset: -20vh -10vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(48vw 48vw at 18% 8%,  rgba(236, 43, 138, 0.16), transparent 62%),
    radial-gradient(52vw 52vw at 86% 22%, rgba(138, 43, 208, 0.16), transparent 64%),
    radial-gradient(60vw 60vw at 50% 96%, rgba(27, 110, 114, 0.14), transparent 66%);
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lilac);
  margin: 0 0 20px;
}
.eyebrow .dot { color: var(--magenta); }

.lede { color: var(--lilac); font-size: 19px; }

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(8, 4, 16, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
header.is-stuck { border-bottom-color: var(--hairline); background: rgba(8, 4, 16, 0.9); }

.bar { display: flex; align-items: center; gap: 28px; height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: 30px; height: 30px; display: block; }
.brand span {
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--starlight);
}
.brand:hover { text-decoration: none; }

nav.primary { margin-left: auto; display: flex; gap: 26px; }
nav.primary a {
  color: var(--lilac);
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
nav.primary a:hover { color: var(--starlight); border-bottom-color: var(--magenta); text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: var(--magenta);
  color: #FFFFFF;
  box-shadow: 0 0 0 0 rgba(236, 43, 138, 0.5), 0 10px 30px -14px rgba(236, 43, 138, 0.9);
}
.btn-primary:hover { background: var(--magenta-glow); box-shadow: 0 0 28px -4px rgba(236, 43, 138, 0.55); }

.btn-ghost {
  background: transparent;
  color: var(--starlight);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { border-color: var(--lilac); background: rgba(185, 168, 216, 0.07); }

.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   The language marquee

   Two colours only, both already in the logo, because the colour system puts
   about two thirds of any surface on the dark Ground and a third hue would
   fight it:

     idle    Forest, the green of the orbit arc in the mark, which ties the
             drifting names to the logo above them
     active  Resonance Magenta, the exact colour of the wordmark. That is what
             marks the current language - no pill, no chrome

   Sizes are the app's: a 44px viewport, 16px of horizontal padding per item
   (Spacing.three) and 8px vertical (Spacing.two).
   --------------------------------------------------------------------------- */
.marquee {
  height: 44px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Nothing to show and nothing to pick without the script that fills it. */
  visibility: hidden;
}
.js-marquee .marquee { visibility: visible; }
.marquee-track { display: flex; will-change: transform; }
.marquee-row { display: flex; align-items: center; }
.marquee-item {
  padding: 8px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
  background: none;
  border: 0;
  color: #2F6B3A;
  cursor: pointer;
  /* The row is grabbable, so the browser must not also try to select the text
     or scroll the page when a drag starts on it. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.marquee-item:hover { opacity: 0.75; }
/* The current language is NOT a button. Tapping it would do nothing, and an
   affordance that promises an action there is not is worse than none. */
.marquee-item[aria-current="true"] { color: var(--magenta); cursor: default; }
.marquee-item[aria-current="true"]:hover { opacity: 1; }
/* Scripts whose letters JOIN break at any letter-spacing at all. */
.marquee-item[lang="ar"], .marquee-item[lang="ur"] { letter-spacing: 0; }
/* Poppins covers Latin and Devanagari and nothing else that we ship. Forcing
   it on the rest produces tofu, so those names get the platform's own font -
   the same rule, and the same list, as the app's fontFamilyFor. */
.marquee-item.sys-font {
  font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif;
}
/* Dragging the row is a pointer gesture; keyboard users tab the items. */
.marquee.is-held .marquee-item { cursor: grabbing; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero { padding: 92px 0 104px; text-align: center; position: relative; }

/* Concentric rings behind the lockup, echoing the mark itself. They breathe by
   1.8%, which is the same figure the app uses for the logo at rest - small
   enough to be invisible in a screenshot and unmistakable in motion. */
.rings {
  position: absolute;
  top: 0; left: 50%;
  /* Never wider than the viewport. At 130vw the halo looked better on a phone
     and put 50px of nothing to the right of the document, which body's
     overflow-x hid without removing. */
  width: min(860px, 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -22%);
  pointer-events: none;
  z-index: -1;
}
.rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(236, 43, 138, 0.16);
  animation: breathe 5.2s ease-in-out infinite;
}
.rings i:nth-child(2) { inset: 12%; border-color: rgba(236, 43, 138, 0.12); animation-delay: 0.28s; }
.rings i:nth-child(3) { inset: 24%; border-color: rgba(138, 43, 208, 0.16); animation-delay: 0.56s; }
.rings i:nth-child(4) { inset: 36%; border-color: rgba(41, 224, 230, 0.10); animation-delay: 0.84s; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  42%      { transform: scale(1.018); opacity: 1; }
}
/* With scripting, the heartbeat clock drives these instead, so they stay in
   phase with the mark and the sound. The CSS loop is the no-script fallback
   and would otherwise run alongside and fight it. */
.js .rings i { animation: none; }

/* height:auto is load-bearing. The img carries width/height attributes so the
   browser can reserve the right box before the SVG arrives, and those are
   presentational hints: without this the mark renders 597px tall inside its
   own letterbox with a dead band above it. */
.hero-lockup { width: min(680px, 100%); height: auto; margin: 0 auto 44px; display: block; }

.hero h1 {
  font-size: clamp(38px, 6.2vw, 74px);
  max-width: 17ch;
  margin: 0 auto 26px;
  letter-spacing: -0.035em;
}
/* The second line is the qualifier, not a second headline: smaller, magenta,
   and set on its own line so "Find your people." lands on its own first. */
.hero h1 em {
  font-style: normal;
  color: var(--magenta);
  font-size: 0.56em;
  letter-spacing: -0.02em;
  display: inline-block;
  margin-top: 0.34em;
}
.hero p.sub {
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--lilac);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.hero-meta {
  margin-top: 30px;
  font-size: 13.5px;
  color: var(--lilac);
  display: flex;
  gap: 10px 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--forest);
}
.hero-meta span.live::before { background: var(--green); box-shadow: 0 0 10px rgba(145, 240, 41, 0.8); }

/* The sound switch. Deliberately the quietest control on the page: the
   heartbeat is decoration, it is never on until somebody asks for it, and a
   loud button asking to play audio is the thing everybody has learned to
   distrust. Hidden entirely until the script confirms it can honour it. */
.hero-sound { margin-top: 22px; min-height: 30px; }
.sound-btn {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 6px 14px 6px 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--lilac);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.js-audio .sound-btn { display: inline-flex; }
.sound-btn:hover { color: var(--starlight); border-color: var(--hairline-strong); }
.sound-btn[aria-pressed="true"] { color: var(--magenta); border-color: rgba(236, 43, 138, 0.45); }
.sound-icon { display: block; line-height: 0; }
/* Off: the two arcs are replaced by a cross. On: the arcs, no cross. */
.sound-btn .wave-1, .sound-btn .wave-2 { opacity: 0; }
.sound-btn[aria-pressed="true"] .wave-1,
.sound-btn[aria-pressed="true"] .wave-2 { opacity: 1; }
.sound-btn[aria-pressed="true"] .wave-off { opacity: 0; }

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
section { padding: 96px 0; }
section + section { border-top: 1px solid var(--hairline); }

.section-head { max-width: 72ch; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 20px; }
.section-head p { color: var(--lilac); font-size: 18.5px; }

/* Three pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 34px 30px 36px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pillar:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--magenta));
}
.pillar h3 { font-size: 23px; margin-bottom: 8px; }
.pillar .kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent, var(--magenta));
  margin-bottom: 14px;
}
.pillar p { color: var(--lilac); font-size: 16px; }
.pillar p + p { margin-top: 14px; }

/* The two halves */
.halves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.halves .kicker { display: flex; align-items: center; gap: 8px; }
.kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(145, 240, 41, 0.9);
}
.halves-note {
  margin-top: 28px;
  color: var(--lilac);
  font-size: 16.5px;
  max-width: 62ch;
}

/* Resonate-with list */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline);
         border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.mode { background: var(--void); padding: 30px 28px; }
.mode h4 { font-size: 17.5px; margin-bottom: 8px; }
.mode h4 b { font-weight: 600; color: var(--magenta); }
.mode p { color: var(--lilac); font-size: 15px; line-height: 1.55; }

/* Status strip */
.status-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid currentColor;
}
.chip.now   { color: var(--green); }
.chip.next  { color: var(--amber); }
.chip.later { color: var(--lilac); }

/* Feature grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.feature { padding-top: 20px; border-top: 1px solid var(--hairline); }
.feature h3 { font-size: 17.5px; margin-bottom: 9px; letter-spacing: -0.01em; }
.feature p { color: var(--lilac); font-size: 15.5px; line-height: 1.58; }
.feature .tag {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: 11px;
}
.feature.is-next .tag { color: var(--amber); }
.feature.is-later .tag { color: var(--lilac); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  border-left: 2px solid var(--magenta);
  padding: 4px 0 4px 20px;
}
.stat:nth-child(2) { border-left-color: var(--cyan); }
.stat:nth-child(3) { border-left-color: var(--amber); }
.stat:nth-child(4) { border-left-color: var(--green); }
.stat b {
  display: block;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat span { color: var(--lilac); font-size: 14.5px; }

/* Engineering notes */
.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.note {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.note h3 { font-size: 19px; margin-bottom: 12px; }
.note p { color: var(--lilac); font-size: 15.5px; }
.note p + p { margin-top: 12px; }
.note code {
  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--starlight);
  background: rgba(185, 168, 216, 0.1);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Pull quote */
.quote {
  border-left: 2px solid var(--amber);
  padding: 6px 0 6px 28px;
  max-width: 68ch;
}
.quote p { font-size: clamp(20px, 2.6vw, 27px); font-weight: 500; line-height: 1.42; letter-spacing: -0.02em; }
.quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 14.5px; color: var(--lilac); }

/* Model list */
.model { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 46px; }
.model > div { border-top: 1px solid var(--hairline); padding-top: 20px; }
.model h3 { font-size: 18px; margin-bottom: 10px; }
.model p { color: var(--lilac); font-size: 15.5px; }

/* ---------------------------------------------------------------------------
   Downloads
   --------------------------------------------------------------------------- */
.dl-panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(12, 6, 24, 0.66);
}
.dl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 28px;
  border-bottom: 1px solid var(--hairline);
}
.dl-head strong { font-weight: 600; font-size: 16px; }
.dl-head .build {
  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--lilac);
}

table.dl { width: 100%; border-collapse: collapse; }
table.dl th { display: none; }
table.dl td { padding: 20px 28px; vertical-align: baseline; border-top: 1px solid var(--hairline); }
table.dl tr:first-child td { border-top: 0; }
table.dl td.plat { width: 34%; font-weight: 500; }
table.dl td.plat .os { display: block; font-size: 12.5px; font-weight: 400; color: var(--lilac); margin-top: 2px; }
table.dl td.get { color: var(--lilac); font-size: 15.5px; }
table.dl td.get a { font-weight: 500; }
table.dl td.get .size { color: var(--lilac); font-weight: 400; font-size: 13.5px; }
table.dl td.get .alt { display: block; margin-top: 6px; font-size: 14px; }
table.dl tr.secondary td { background: rgba(8, 4, 16, 0.5); }
table.dl tr.secondary td.plat { font-weight: 400; color: var(--lilac); }
table.dl td.get .quiet { display: block; margin-top: 8px; font-size: 13.5px; color: var(--lilac); }
table.dl td.get .quiet a { color: var(--lilac); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
table.dl td.get .quiet a:hover { color: var(--starlight); }

.dl-foot {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--hairline);
  color: var(--lilac);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--hairline);
  padding: 60px 0 44px;
  color: var(--lilac);
  font-size: 14.5px;
}
.foot-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.foot-brand img { width: 26px; height: 26px; }
.foot-brand span { color: var(--starlight); font-weight: 600; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a { color: var(--lilac); }
footer nav a:hover { color: var(--starlight); }
.legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sanskrit { color: rgba(185, 168, 216, 0.4); letter-spacing: 0.06em; }

/* ---------------------------------------------------------------------------
   Other languages

   Two things change when the page is not in English, and only two.
   --------------------------------------------------------------------------- */

/* 1. The typeface. Poppins covers Latin and Devanagari and nothing else we
      ship, so for the rest the whole page borrows the platform's font. Per
      locale, not per glyph: a line mixing Poppins and Noto looks worse than a
      consistent Noto one. Same trade the app made, verified on a device. */
.sys-font-page body,
.sys-font-page .btn,
.sys-font-page .marquee-item { font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif; }
/* Poppins' tight display tracking is drawn for Poppins. On a substituted face
   it reads as a squeeze, and on a joined script it breaks the joins outright. */
.sys-font-page h1, .sys-font-page h2, .sys-font-page h3, .sys-font-page h4 { letter-spacing: -0.005em; }
[dir="rtl"] .eyebrow, [dir="rtl"] .kicker, [dir="rtl"] .chip, [dir="rtl"] .tag { letter-spacing: 0; }

/* 2. The direction. Everything that had a side now takes a side from the
      reader instead of from the page. */
[dir="rtl"] .stat { border-left: 0; border-right: 2px solid var(--magenta); padding: 4px 20px 4px 0; }
[dir="rtl"] .stat:nth-child(2) { border-right-color: var(--cyan); }
[dir="rtl"] .stat:nth-child(3) { border-right-color: var(--amber); }
[dir="rtl"] .stat:nth-child(4) { border-right-color: var(--green); }
[dir="rtl"] .quote { border-left: 0; border-right: 2px solid var(--amber); padding: 6px 28px 6px 0; }
[dir="rtl"] .quote[style*="magenta"] { border-right-color: var(--magenta); }
[dir="rtl"] nav.primary { margin-left: 0; margin-right: auto; }
[dir="rtl"] .bar .btn-sm { margin-left: 0; }

/* ⛔ The marquee is NOT mirrored. Its content is two dozen scripts at once, so
   there is no reading direction to honour; flipping it would only mean the
   drift changes hands when the page language does, which reads as a glitch
   rather than as a courtesy. */
[dir="rtl"] .marquee-track, [dir="rtl"] .marquee-row { direction: ltr; }

/* A locale being fetched. One frame or two on a warm connection, so this is
   about the cold case only: something must acknowledge the press. */
.i18n-loading .marquee { opacity: 0.55; transition: opacity 0.2s var(--ease); }

/* ---------------------------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .rings i { animation: none; }
  .btn:hover, .pillar:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .pillars, .modes, .features, .notes, .model { grid-template-columns: 1fr 1fr; }
  .halves { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  nav.primary { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  section { padding: 68px 0; }
  .hero { padding: 56px 0 72px; }
  .hero-lockup { margin-bottom: 34px; }
  .pillars, .modes, .features, .notes, .model, .stats, .halves { grid-template-columns: 1fr; }
  .modes { gap: 1px; }
  .hero-actions .btn { width: 100%; }
  /* The masthead CTA is the only thing competing with the wordmark for room,
     so it gives way first rather than wrapping onto two lines. */
  .bar .btn-sm { padding: 9px 14px; font-size: 13px; }
  .brand span { font-size: 15px; }
  .section-head { margin-bottom: 40px; }

  /* The download table becomes stacked rows: a table this wide cannot hold a
     phone, and a horizontal scroller hides the thing people came for. */
  table.dl td { display: block; padding: 0 18px; border-top: 0; }
  table.dl tr { display: block; padding: 18px 0; border-top: 1px solid var(--hairline); }
  table.dl tr:first-child { border-top: 0; }
  table.dl td.plat { width: auto; margin-bottom: 6px; }
  .dl-head, .dl-foot { padding-left: 18px; padding-right: 18px; }
}

/* ===========================================================================
   ADDED WITH THE THREE-PAGE SPLIT (2026-09-21)
   ===========================================================================
   Everything above this line was the single product page's stylesheet and is
   unchanged. Everything below is new, and exists because there are now three
   pages that have to end the same way.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The call to action.

   The same block closes both product pages, and it is deliberately the ONLY
   place either of them mentions getting the app. It carries no version, no
   file size and no download URL - those live on /download, once, which is the
   whole reason that page exists.
   --------------------------------------------------------------------------- */
.cta-band { padding-bottom: 20px; }

.cta {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 44px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(236, 43, 138, 0.14), transparent 70%),
    var(--panel);
}
.cta h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.cta p { color: var(--lilac); max-width: 46ch; }

.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-actions .btn { width: 100%; justify-content: center; }
/* Stretched to the column width so the link centres under the buttons, which
   are themselves width:100% of it. Without align-self it shrinks to its own
   text and sits left of them, and without the max-width reset it inherits the
   46ch measure from `.cta p` above and centres 12px off. The selector is
   doubled up only to out-specify that rule. */
.cta .cta-alt { font-size: 15px; align-self: stretch; max-width: none; text-align: center; }

.btn-lg { padding: 15px 28px; font-size: 17px; }

/* The primary button carries one label per platform and shows the one that
   applies. Nothing here is ever written by script, so the button stays in
   whatever language the page is in - the same reasoning as the sound button. */
[data-plat-button] [data-plat][hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Compact page header, for pages that are not the front door and so do not get
   a hero. /download uses this.
   --------------------------------------------------------------------------- */
.pagehead { padding: 76px 0 44px; text-align: center; }
.pagehead h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 18px; }
.pagehead p { color: var(--lilac); max-width: 60ch; margin: 0 auto; font-size: 19px; }
.pagehead .eyebrow { margin-bottom: 16px; }

/* ---------------------------------------------------------------------------
   Numbered steps. Used once, for what actually happens after the download.
   --------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step {
  counter-increment: step;
  padding: 26px 24px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}
.step::before {
  content: counter(step);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--magenta);
  margin-bottom: 12px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--lilac); font-size: 16px; }

/* ---------------------------------------------------------------------------
   The row on /download matching the visitor's own platform. Marked by script;
   without script every row simply looks the same, which is fine.
   --------------------------------------------------------------------------- */
table.dl tr.is-yours td { background: rgba(236, 43, 138, 0.07); }
table.dl tr.is-yours td.plat .name { color: var(--magenta-glow); }
.yours-note { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); }

/* Cross-links between the two product pages. A quiet line, not a banner. */
.crosslink {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--lilac);
  font-size: 16px;
}

@media (max-width: 860px) {
  .cta { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .steps { grid-template-columns: 1fr; }
  .pagehead { padding: 56px 0 32px; }
}