/* ===========================================================================
   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.707fdc5c8b.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-Medium.8d909883de.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-SemiBold.248c0244b3.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap;
             src: url('/fonts/poppins/Poppins-Bold.7219547ee2.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
   --------------------------------------------------------------------------- */
/* overflow-x: clip, not hidden: the halo behind the mark is wider than a phone's
   viewport since it scales with the lockup (below). clip cuts it at the section's
   edge without making the section a scroll container, and leaves the vertical
   overflow (the outer rings reaching into the header) exactly as it was. */
.hero { padding: 92px 0 104px; text-align: center; position: relative; overflow-x: clip; }

/* 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. */
/* The mark and the halo share one box (`.hero-mark`), so the halo is centred
   on the CORE and not on the section: the core sits at 50% across and 56%
   down the lockup's viewBox (342.87 of 612), and the halo's centre is pinned
   there. Until 2026-10-01 the halo hung off the section's top left and
   drifted off the core with the viewport. */
.hero-mark { position: relative; width: min(680px, 100%); margin: 0 auto 44px; }
.rings {
  position: absolute;
  left: 50%; top: 56%;
  /* Sized from the LOCKUP, not the viewport (2026-10-02): 126.47% of .hero-mark
     is the 860px the halo always had at the lockup's 680px, and on a phone the
     halo now shrinks with the mark instead of staying viewport-wide. That is
     what lets the innermost ring sit on the Sanskrit's shirorekha at every
     width (its inset below is derived from the lockup's geometry). It used to
     be min(860px, 100vw); the overflow on a phone, which that cap avoided, is
     clipped by .hero now. */
  width: 126.47%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  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; }
/* The innermost ring lies in the middle of the shirorekha, the line over the
   Sanskrit (Jashan, 2026-10-02): the arc `rl-deva-arc` has radius 338.73 in
   lockup units about the core, i.e. a diameter of 2 * 338.73 / 1736.46 = 39.014%
   of the lockup, and the halo box is 126.47% of it, so the inset is
   (1 - 0.39014 / 1.2647) / 2 = 34.576%. At 36% it cut through the letters. It
   also passes about 10 units inside the e of Resonance and the L of Lounge. */
.rings i:nth-child(4) { inset: 34.576%; 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. */
/* overflow visible so a beat's swell is never clipped by the viewBox, on top
   of the viewBox itself having room since V0.1.3 (612 tall, was 597). */
.hero-lockup { width: 100%; height: auto; margin: 0; display: block; overflow: visible; }

.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-mark { 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; }
}

/* ===========================================================================
   ADDED WITH THE NEW FRONT DOOR (2026-10-01)
   ===========================================================================
   The page at / since 2026-10-01 speaks about what people need and what the
   product gives them; the page that was there moved to /now. Three things are
   new: running prose under a section head, the circle around the fire, and the
   one quiet action in the Carry section. Everything above is unchanged.
   =========================================================================== */

/* Running prose: the Why, Machines, How we work, Carry and Join sections are
   paragraphs, not cards. Measured at 66ch, in Lilac like every other body
   text, with the first paragraph a touch larger so the section opens. */
.prose { max-width: 66ch; }
.prose p { color: var(--lilac); font-size: 17.5px; line-height: 1.66; }
.prose p + p { margin-top: 18px; }
.prose > p:first-child { color: var(--starlight); font-size: 19px; }
.prose-action { margin-top: 26px; }

/* The six evenings are the feature grid without headings: the tag is the
   place, the paragraph is the scene. */
.evenings .feature .tag { color: var(--cyan); }
.evenings .feature p { color: var(--starlight); }

/* ---------------------------------------------------------------------------
   The circle around the fire.

   Twelve figures around a glowing centre, all at one table: filled Magenta is
   in the room, UV is in a headset far away, outlined Cyan is on a screen far
   away. The core beats with the page's one clock (rl-product.js, the
   `rl-circle` module); without scripting it breathes on its own, the same
   envelope as the halo rings behind the mark.
   --------------------------------------------------------------------------- */
.circle {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
  margin-top: 72px;
  padding: 40px 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}
.circle-figure { margin: 0; }
.circle-figure svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.circle-text h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.circle-text p { color: var(--lilac); font-size: 16.5px; }
.circle-text p + p { margin-top: 14px; }
.circle-text .status-row { margin-bottom: 14px; }

#rl-circle .threads line { stroke: var(--lilac); stroke-opacity: 0.16; stroke-width: 1; }
#rl-circle .ring { fill: none; stroke: var(--lilac); stroke-opacity: 0.12; stroke-width: 1; }
#rl-circle .ember { fill: var(--gold); }
#rl-circle .core { transform-origin: 200px 200px; transition: transform 0.28s var(--ease); }
#rl-circle .halo { transition: opacity 0.28s var(--ease); }
#rl-circle .core.is-beat { transform: scale(1.1); }
#rl-circle .core.is-beat .halo { opacity: 1.15; }
#rl-circle .fig circle, #rl-circle .fig path { stroke-width: 1.6; }
#rl-circle .fig-here circle,   #rl-circle .fig-here path   { fill: var(--magenta); stroke: var(--magenta); }
#rl-circle .fig-vr circle,     #rl-circle .fig-vr path     { fill: var(--uv); stroke: var(--uv); }
#rl-circle .fig-screen circle, #rl-circle .fig-screen path { fill: transparent; stroke: var(--cyan); }
/* No script: breathe on the same envelope as the halo rings behind the mark. */
#rl-circle .core { animation: breathe 5.2s ease-in-out infinite; }
.js #rl-circle .core { animation: none; }

@media (max-width: 860px) {
  .circle { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; margin-top: 48px; }
  .circle-figure svg { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  #rl-circle .core { animation: none; transition: none; }
  #rl-circle .core.is-beat { transform: none; }
}