/* ============================================================================
   RaveGang — ravegang.com
   Tokens transcribed verbatim from the RaveGang design system
   (_ds/ravegang-design-system-44e5a5f2/tokens/*.css). Names are kept identical
   so any value here can be diffed against the source of truth.
   Dark only: it is a festival app, there is no day mode at 3 AM.
   ========================================================================== */

/* ---- fonts.css: self-hosted, because a lander that sells "no third parties"
   must not fetch its type from one. Space Grotesk is the app's own variable
   binary (app/src/main/res/font/space_grotesk.ttf), wght 300-700. ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---- colors.css — chrome and meaning are two separate systems ---- */
  --rg-ember: #FF6B00;
  --rg-on-ember: #1A0800;
  --rg-bg: #0B0B0F;
  --rg-surface: #14141A;
  --rg-surface-high: #1D1D26;
  --rg-text: #E8E8EC;
  --rg-text-dim: #B0B0BE;

  --rg-lime: #B4FF39;
  --rg-cyan: #6EE7F2;
  --rg-cold: #FF9D42;
  --rg-magenta: #FF4FD8;
  --rg-violet: #9D6CFF;
  --rg-error: #FF5470;
  --rg-warm: var(--rg-lime);

  --rg-outline: rgb(176 176 190 / 0.45);

  /* identity hues — hue = (slot * 137.508) mod 360, the golden angle */
  --rg-slot-ink-1: #26FF65;
  --rg-slot-ink-2: #A526FF;
  --rg-slot-ink-4: #26DBFF;
  --rg-slot-ink-6: #5CFF26;
  --rg-slot-ink-9: #26FFAE;
  --rg-slot-ink-11: #D2FF26;
  --rg-slot-ink-12: #2692FF;
  --rg-slot-ink-14: #26FF39;

  /* ---- typography.css ---- */
  --rg-font: "Space Grotesk", system-ui, sans-serif;
  --rg-font-mono: "Space Mono", ui-monospace, monospace;
  --rg-title-md-size: 17px;
  --rg-title-md-weight: 600;
  --rg-title-md-tracking: 0.2px;
  --rg-body-lg-size: 16px;
  --rg-body-md-size: 14px;
  --rg-body-md-line: 20px;
  --rg-body-sm-size: 12.5px;
  --rg-body-sm-line: 17px;
  --rg-label-lg-size: 14px;
  --rg-label-lg-weight: 600;
  --rg-label-lg-tracking: 0.8px;
  --rg-canvas-label-size: 11px;
  --rg-canvas-label-tracking: 1px;
  --rg-canvas-tick-size: 10px;
  --rg-numeric: tabular-nums slashed-zero;

  /* ---- spacing.css — the ONE 4dp layout scale ---- */
  --rg-space-xs: 4px;
  --rg-space-sm: 8px;
  --rg-space-md: 12px;
  --rg-space-lg: 16px;
  --rg-space-xl: 24px;
  --rg-touch: 48px;
  --rg-badge-pad-x: 6px;
  --rg-badge-pad-y: 1px;

  /* ---- geometry.css — off the 4dp grid on purpose ---- */
  --rg-radius-pill: 999px;
  --rg-radius-chip: 14px;
  --rg-radius-row: 12px;
  --rg-radius-panel: 12px;
  --rg-radius-banner: 8px;
  --rg-radius-badge: 4px;
  --rg-radius-tick: 2px;
  --rg-stale-rail: 3px;

  /* ---- motion.css / rhythm.css — one 150 BPM clock ---- */
  --rg-ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --rg-dur-ui: 180ms;

  /* ---- page layout ---- */
  --rg-page: 1120px;
  --rg-gutter: clamp(20px, 5vw, 32px);
  --rg-section-y: clamp(72px, 9vw, 128px);
  --rg-block-gap: clamp(36px, 4.5vw, 56px);
}

/* ============================================================================
   base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--rg-bg);
  color: var(--rg-text);
  font-family: var(--rg-font);
  font-size: var(--rg-body-md-size);
  line-height: var(--rg-body-md-line);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-wrap: pretty;
}

a { color: var(--rg-cyan); text-decoration: none; }
a:hover { filter: brightness(1.08); }
a:active { opacity: 0.7; }
::selection { background: var(--rg-ember); color: var(--rg-on-ember); }
img, svg { display: block; }
summary::-webkit-details-marker { display: none; }

:where(a, button, summary, input, details):focus-visible {
  outline: 2px solid var(--rg-cyan);
  outline-offset: 3px;
  border-radius: var(--rg-radius-badge);
}

/* Every measured figure. Proportional figures make a live distance twitch as it
   counts down, and a number that appears to be moving is a number you re-read. */
.rg-num { font-variant-numeric: var(--rg-numeric); }

/* The header is sticky, so an anchor jump would otherwise park its own heading
   underneath it. 69px of header plus room to breathe. */
#how, #faq, #get, #ios { scroll-margin-top: 88px; }

.rg-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--rg-ember);
  color: var(--rg-on-ember);
  font-size: var(--rg-label-lg-size);
  font-weight: var(--rg-label-lg-weight);
  letter-spacing: var(--rg-label-lg-tracking);
}
.rg-skip:focus { left: 0; }

/* BREATHING, NOT BLINKING. Amplitude floors, never to black. */
@keyframes rg-breath {
  0% { opacity: .45; }
  50% { opacity: 1; }
  100% { opacity: .45; }
}

.rg-dot {
  border-radius: 50%;
  animation: rg-breath 4.2s linear infinite;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rg-dot { animation: none; opacity: 1; }
}

/* ============================================================================
   shared layout
   ========================================================================== */

.rg-wrap {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding-inline: var(--rg-gutter);
}

.rg-section { padding-top: var(--rg-section-y); }

.rg-eyebrow {
  margin: 0 0 var(--rg-space-lg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--rg-ember);
}

.rg-h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}

.rg-lede {
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--rg-text-dim);
  text-wrap: pretty;
}

/* an <em> that is not italic: it is the app's own voice quoted inside prose */
.rg-quoted { font-style: normal; color: var(--rg-text); }

.rg-head-center {
  text-align: center;
  margin: 0 auto var(--rg-block-gap);
}

.rg-card {
  background: var(--rg-surface);
  border-radius: var(--rg-radius-panel);
  padding: 28px;
}
.rg-card-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}
.rg-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--rg-text-dim);
}

/* ============================================================================
   design-system controls
   ========================================================================== */

/* The committing action. A filled Ember pill with warm-black ink, so the pill
   reads as ONE object rather than as ink sitting on a color.
   LABEL CASE IS PART OF THE COMPONENT: a pill's label is ALL CAPS, always. */
.rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rg-space-sm);
  min-height: var(--rg-touch);
  padding: 0 var(--rg-space-xl);
  border: none;
  border-radius: var(--rg-radius-pill);
  background: var(--rg-ember);
  color: var(--rg-on-ember);
  font-family: var(--rg-font);
  font-size: var(--rg-label-lg-size);
  font-weight: var(--rg-label-lg-weight);
  letter-spacing: var(--rg-label-lg-tracking);
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--rg-dur-ui) var(--rg-ease-ui),
              opacity var(--rg-dur-ui) var(--rg-ease-ui);
}
.rg-btn:hover { filter: brightness(1.08); }
.rg-btn:active { opacity: 0.7; }
.rg-btn--full { width: 100%; }

/* The second committing action. Same pill, same ALL-CAPS grammar, no fill:
   a 1px ring in TextDim @45% with Ember ink. */
.rg-btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rg-space-sm);
  min-height: var(--rg-touch);
  padding: 0 var(--rg-space-xl);
  border: 1px solid var(--rg-outline);
  border-radius: var(--rg-radius-pill);
  background: transparent;
  color: var(--rg-ember);
  font-family: var(--rg-font);
  font-size: var(--rg-label-lg-size);
  font-weight: var(--rg-label-lg-weight);
  letter-spacing: var(--rg-label-lg-tracking);
  cursor: pointer;
  transition: filter var(--rg-dur-ui) var(--rg-ease-ui);
}
.rg-btn-outlined:hover { filter: brightness(1.12); }
.rg-btn-outlined--full { width: 100%; }

/* SUB-GRID PADDING IS THE POINT: 5-6px horizontal, 1px vertical. These are
   DRAWN OBJECTS sized to their own type. On the 4dp grid they read as buttons,
   which is exactly what they must not read as. */
.rg-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--rg-badge-pad-y) var(--rg-badge-pad-x);
  border-radius: var(--rg-radius-badge);
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: var(--rg-body-sm-size);
  line-height: var(--rg-body-sm-line);
  white-space: nowrap;
}

/* ============================================================================
   header
   ========================================================================== */

.rg-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--rg-bg);
  border-bottom: 1px solid var(--rg-surface-high);
}
.rg-header-inner {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding: 12px var(--rg-gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* THE MARK HAS SIZE TIERS and the header is below the top one. geometry.css:
   --rg-mark-tier-full is 44px (7 ribs, gorge, ticks), --rg-mark-tier-compact is
   26px (the reduced 3-section cut). At header size the full wireframe is two
   tiers too fine — its bright mass is a fraction of its box, so it reads as a
   smudge next to the wordmark. /assets/logo-mark.svg is the launcher icon's cut:
   three solid sections and the identity diamond, trimmed to its own bounding
   box so the drawn area IS the box.

   Which means it needs LESS height than the old one, not more: 28px of thin
   wireframe was maybe half that in visible mass, so matching the old number in
   solid ink reads twice as heavy. Sized against the wordmark instead — a little
   taller than its 20px box, which is what a lockup wants. */
.rg-header-mark { height: 24px; width: auto; }
.rg-wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--rg-text);
}
.rg-spacer { flex: 1; }
.rg-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--rg-radius-pill);
  background: var(--rg-ember);
  color: var(--rg-on-ember);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

/* A modest bump on a phone, where the mark carries more of the identity because
   there is less around it. */
@media (max-width: 620px) {
  .rg-header-mark { height: 26px; }
}

/* ============================================================================
   hero
   ========================================================================== */

.rg-hero {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--rg-gutter) clamp(56px, 7vw, 88px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.rg-hero-copy { flex: 1 1 440px; min-width: 280px; }

.rg-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.rg-kicker .rg-dot { width: 9px; height: 9px; background: var(--rg-ember); }
.rg-kicker span:last-child {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--rg-text-dim);
  text-transform: uppercase;
}

.rg-h1 {
  margin: 0;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--rg-text);
  text-wrap: balance;
}
.rg-h1 span { color: var(--rg-ember); }

.rg-hero-sub {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  max-width: 27em;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--rg-text-dim);
  text-wrap: pretty;
}

.rg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.rg-cta-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 320px);
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--rg-radius-pill);
  background: var(--rg-ember);
  color: var(--rg-on-ember);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-align: center;
}
.rg-cta-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--rg-cyan);
  font-size: 15px;
}

/* Under every direct APK link: the two things you can actually check. The file
   hash catches a tampered or truncated download; the signing-key fingerprint
   says the build came from us and not from someone who re-signed it. Quiet by
   default — the people who check these know to look, and everyone else is not
   served by making them loud. Selectable, wrapping, never truncated: a hash you
   cannot copy in full is decoration. */
.rg-verify {
  margin-top: clamp(20px, 2.6vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.rg-verify p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rg-verify span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgb(176 176 190 / 0.65);
}
.rg-verify code {
  font-family: var(--rg-font-mono);
  font-size: 11px;
  line-height: 16px;
  color: rgb(176 176 190 / 0.85);
  word-break: break-all;
  user-select: all;
}

.rg-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: clamp(22px, 3vw, 30px);
  font-size: 12.5px;
  line-height: 17px;
  color: var(--rg-text-dim);
}
.rg-trust i { font-style: normal; opacity: .3; }

/* On a phone the four claims wrap 3+1 and the orphan drags its leading diamond
   onto the second line, which reads as a bullet that lost its item. Below the
   wrap point they become a 2x2 block and the separators go away entirely —
   the grid is already doing the separating. */
@media (max-width: 620px) {
  .rg-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }
  .rg-trust i { display: none; }
}

/* ---- the live radar panel ---- */
.rg-hero-demo {
  flex: 1 1 380px;
  min-width: 280px;
  display: flex;
  justify-content: center;
}
.rg-demo {
  width: 100%;
  max-width: 460px;
  background: var(--rg-surface);
  border: 1px solid var(--rg-surface-high);
  border-radius: var(--rg-radius-panel);
  overflow: hidden;
}
.rg-demo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rg-surface-high);
}
.rg-demo-head .rg-dot { width: 8px; height: 8px; background: var(--rg-lime); }
.rg-demo-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--rg-text-dim);
}
.rg-demo-count {
  font-family: var(--rg-font-mono);
  font-size: 11px;
  color: rgb(176 176 190 / 0.7);
}
.rg-demo-canvas { aspect-ratio: 1 / 1; padding: 8px; }
.rg-demo-foot {
  border-top: 1px solid var(--rg-surface-high);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.rg-summon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--rg-radius-row);
  border: 1px solid rgb(255 84 112 / 0.6);
  background: rgb(255 84 112 / 0.16);
  color: var(--rg-error);
  font-family: var(--rg-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--rg-dur-ui) var(--rg-ease-ui);
}
.rg-summon:hover { filter: brightness(1.12); }
.rg-demo-caption {
  flex: 1 1 160px;
  font-size: 12.5px;
  line-height: 17px;
  color: var(--rg-text-dim);
}

/* ============================================================================
   the NO strip
   ========================================================================== */

.rg-strip {
  border-top: 1px solid var(--rg-surface-high);
  border-bottom: 1px solid var(--rg-surface-high);
}
.rg-strip-inner {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding: 16px var(--rg-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(18px, 3vw, 40px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: rgb(255 107 0 / 0.9);
}

/* Five denials wrap 4+1 on a phone, and one word alone on a second line looks
   like an accident rather than a stop. Below the wrap point: two columns, with
   the fifth centered across both so the odd one out is deliberate. */
@media (max-width: 660px) {
  .rg-strip-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 12px;
  }
  .rg-strip-inner span:last-child { grid-column: 1 / -1; }
}

/* ============================================================================
   the 2 AM problem
   ========================================================================== */

.rg-h2--narrow { max-width: 15em; }

.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin-top: var(--rg-block-gap);
}
.rg-grid .rg-card-title { color: var(--rg-cold); }

/* ============================================================================
   three moves
   ========================================================================== */

.rg-head-center--how { max-width: 26em; }

.rg-moves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.rg-move {
  background: var(--rg-surface);
  border-radius: var(--rg-radius-panel);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rg-move-n {
  font-family: var(--rg-font-mono);
  font-size: 12.5px;
  color: var(--rg-ember);
}
.rg-move h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--rg-ember);
}
.rg-move p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--rg-text-dim);
}
.rg-move-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: rgb(176 176 190 / 0.8);
  background: var(--rg-bg);
  border-radius: var(--rg-radius-banner);
  padding: 10px 12px;
}
.rg-move-note--mono {
  font-family: var(--rg-font-mono);
  font-size: 12px;
}
.rg-vocab { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================================
   the screens
   ========================================================================== */

.rg-head-center--screens { max-width: 24em; }

.rg-screens {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.rg-screen {
  margin: 0;
  flex: 0 0 300px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rg-phone {
  width: 300px;
  height: 657px;
  border: 9px solid #000;
  border-radius: 40px;
  overflow: hidden;
  background: var(--rg-bg);
  position: relative;
}
/* The app canvas is 360x816 dp; the frame shows it at 0.783333 so the screens
   are the real layout scaled, never a redrawn approximation of it. */
.rg-phone-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 816px;
  transform: scale(0.783333);
  transform-origin: top left;
  display: flex;
  flex-direction: column;
}
.rg-screen figcaption {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--rg-text-dim);
  text-align: center;
}

/* screen 1 — welcome */
.rg-scr-welcome {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  gap: 16px;
}
.rg-scr-welcome .rg-scr-mark { width: 84px; height: auto; }
.rg-scr-welcome .rg-scr-word {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--rg-ember);
}
.rg-scr-welcome p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--rg-text-dim);
}
.rg-scr-welcome .rg-scr-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.rg-scr-welcome .rg-scr-fine {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 17px;
}
.rg-scr-welcome .rg-scr-link { font-size: 14px; color: var(--rg-cyan); }

/* screen 2 — radar */
.rg-scr-radar { padding: 16px; gap: 12px; }
.rg-scr-radar-head { display: flex; align-items: center; gap: 8px; }
.rg-scr-radar-head .rg-dot { width: 10px; height: 10px; background: var(--rg-ember); }
.rg-scr-radar-head .rg-scr-word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* the app's only labelSmall, sized on purpose */
.rg-scr-ultra {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--rg-ember);
  align-self: flex-start;
}
.rg-scr-sonar { height: 300px; }
.rg-scr-rows { display: flex; flex-direction: column; gap: 8px; }

/* YOUR on-air identity. Chip, chevron and label all come from one hue, so the
   chip reads as one object in the status's own color. */
.rg-chip {
  display: flex;
  align-items: center;
  gap: var(--rg-space-sm);
  width: 100%;
  min-height: var(--rg-touch);
  padding: var(--rg-space-sm) var(--rg-space-lg);
  border: none;
  border-radius: var(--rg-radius-chip);
  background: color-mix(in srgb, currentColor 12%, transparent);
  text-align: left;
}
.rg-chip-you {
  font-size: var(--rg-label-lg-size);
  font-weight: var(--rg-label-lg-weight);
  letter-spacing: var(--rg-label-lg-tracking);
  opacity: 0.6;
}
.rg-chip-status {
  font-size: var(--rg-title-md-size);
  font-weight: var(--rg-title-md-weight);
  letter-spacing: var(--rg-title-md-tracking);
}
.rg-chip svg { opacity: 0.7; }

/* One person in the HUD list. STALENESS IS SAID IN WORDS AND SHOWN AS A RAIL,
   NEVER AS OPACITY ON THE ROW — the fade is scoped to the SECONDARY line. */
.rg-row {
  display: flex;
  align-items: center;
  gap: var(--rg-space-md);
  background: var(--rg-surface);
  border-radius: var(--rg-radius-row);
  padding: var(--rg-space-md) var(--rg-space-lg);
  min-height: var(--rg-touch);
}
.rg-row-rail {
  width: var(--rg-stale-rail);
  height: 28px;
  border-radius: var(--rg-radius-tick);
  background: rgb(176 176 190 / 0.35);
  flex: 0 0 auto;
}
.rg-row-main { flex: 1; min-width: 0; }
.rg-row-line1 {
  display: flex;
  align-items: center;
  gap: var(--rg-space-sm);
  flex-wrap: wrap;
}
.rg-row-name {
  font-size: var(--rg-title-md-size);
  font-weight: var(--rg-title-md-weight);
  letter-spacing: var(--rg-title-md-tracking);
  color: var(--rg-text);
}
.rg-row-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--rg-body-sm-size);
  color: var(--rg-text-dim);
}
.rg-row--stale .rg-row-line2 { opacity: 0.72; }
.rg-row-trend { color: var(--rg-warm); }
.rg-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  font-size: var(--rg-body-sm-size);
  color: var(--rg-text-dim);
}
.rg-row-go { color: var(--rg-ember); font-size: var(--rg-body-lg-size); }
.rg-row-menu {
  width: var(--rg-touch);
  height: var(--rg-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rg-text-dim);
  flex: 0 0 auto;
}

/* screen 3 — the arrow */
.rg-scr-arrow {
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  gap: 20px;
}
.rg-scr-arrow-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--rg-slot-ink-1);
}
.rg-scr-reticle { width: 100%; display: flex; justify-content: center; }
.rg-scr-dist {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--rg-text);
}
.rg-scr-bearing { font-size: 14px; line-height: 20px; color: var(--rg-text-dim); }
.rg-scr-hint {
  font-size: 12.5px;
  line-height: 17px;
  color: rgb(176 176 190 / 0.85);
}

/* ============================================================================
   how it actually works
   ========================================================================== */

.rg-mech {
  background: var(--rg-surface);
  margin-top: var(--rg-section-y);
}
.rg-mech-inner {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding: var(--rg-section-y) var(--rg-gutter);
}
.rg-h2--mech { max-width: 14em; }
.rg-lede--mech { max-width: 38em; }

/* 1px gaps over the surface-high fill: the hairlines are the container showing
   through, not six borders that can disagree at a corner. */
.rg-mesh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--rg-surface-high);
  border: 1px solid var(--rg-surface-high);
  border-radius: var(--rg-radius-panel);
  overflow: hidden;
  margin-top: var(--rg-block-gap);
}
.rg-mesh > div {
  background: var(--rg-surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rg-mesh h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--rg-ember);
}
.rg-mesh p {
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--rg-text-dim);
}

/* ============================================================================
   for festivals
   ========================================================================== */

.rg-events {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px);
  align-items: flex-start;
}
.rg-events-copy { flex: 1 1 380px; }
.rg-eyebrow--violet { color: var(--rg-violet); }
.rg-h2--events {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.rg-events-caveat {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: rgb(176 176 190 / 0.85);
}
.rg-events-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 26px;
  padding: 0 24px;
  border-radius: var(--rg-radius-pill);
  border: 1px solid var(--rg-ember);
  color: var(--rg-ember);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.rg-events-list {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rg-event {
  background: var(--rg-surface);
  border-radius: var(--rg-radius-panel);
  padding: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rg-event-pip {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--rg-violet);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.rg-event h3 {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
}
.rg-event p {
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--rg-text-dim);
}

/* ============================================================================
   FAQ
   ========================================================================== */

.rg-faq {
  max-width: 840px;
  margin: 0 auto;
  padding: var(--rg-section-y) var(--rg-gutter) 0;
}
.rg-faq-head { text-align: center; margin-bottom: clamp(28px, 3.5vw, 44px); }
.rg-faq details { border-top: 1px solid var(--rg-surface-high); }
.rg-faq details:last-of-type { border-bottom: 1px solid var(--rg-surface-high); }
.rg-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--rg-text);
  min-height: 48px;
}
.rg-faq p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 23px;
  color: var(--rg-text-dim);
}

/* ============================================================================
   get it
   ========================================================================== */

.rg-get {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding: var(--rg-section-y) var(--rg-gutter);
}
.rg-get-panel {
  background: var(--rg-surface);
  border-radius: var(--rg-radius-panel);
  padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.rg-get-panel h2 {
  margin: 0;
  max-width: 14em;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.rg-get-panel .rg-lede { margin: 0; max-width: 32em; }
.rg-cta-xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  min-height: 56px;
  padding: 0 30px;
  border-radius: var(--rg-radius-pill);
  background: var(--rg-ember);
  color: var(--rg-on-ember);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.rg-get-fine {
  margin: 0;
  max-width: 34em;
  font-size: 12.5px;
  line-height: 18px;
  color: rgb(176 176 190 / 0.8);
}
.rg-get-fine + .rg-get-fine { margin-top: -12px; }

/* Centred panel, so the block centres its labels with it. */
.rg-get-panel .rg-verify {
  align-items: center;
  text-align: center;
  max-width: 34em;
  margin-top: 4px;
}

.rg-ios {
  width: min(100%, 420px);
  margin-top: 10px;
  background: var(--rg-bg);
  border-radius: var(--rg-radius-panel);
  padding: 26px;
  text-align: left;
}
.rg-ios-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--rg-cyan);
}
.rg-ios p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 22px;
  color: var(--rg-text-dim);
}
.rg-ios form { display: flex; flex-direction: column; gap: 12px; }
.rg-ios input[type="email"] {
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--rg-radius-chip);
  border: 1px solid var(--rg-outline);
  background: var(--rg-surface);
  color: var(--rg-text);
  font-family: var(--rg-font);
  font-size: 16px;
  width: 100%;
}
.rg-ios input::placeholder { color: rgb(176 176 190 / 0.6); }
.rg-ios button {
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: var(--rg-radius-pill);
  background: var(--rg-ember);
  color: var(--rg-on-ember);
  font-family: var(--rg-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: filter var(--rg-dur-ui) var(--rg-ease-ui);
}
.rg-ios button:hover { filter: brightness(1.08); }
.rg-ios button[disabled] {
  background: rgb(232 232 236 / 0.12);
  color: rgb(232 232 236 / 0.38);
  cursor: default;
}
.rg-ios-done {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--rg-lime);
}
.rg-ios-error {
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--rg-error);
}
/* the honeypot: off-screen, never focusable, never announced */
.rg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
[hidden] { display: none !important; }

/* ============================================================================
   footer
   ========================================================================== */

.rg-footer { border-top: 1px solid var(--rg-surface-high); }
.rg-footer-inner {
  max-width: var(--rg-page);
  margin: 0 auto;
  padding: 36px var(--rg-gutter) 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
}
.rg-footer-mark { height: 22px; width: auto; opacity: 0.9; }
.rg-footer-copy {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--rg-text-dim);
}
.rg-footer-inner nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.rg-footer-inner nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--rg-text-dim);
}

/* ============================================================================
   legal pages (privacy, 404)
   ========================================================================== */

.rg-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--rg-gutter) var(--rg-section-y);
}
.rg-doc h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.rg-doc-date {
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: 12.5px;
  line-height: 18px;
  color: rgb(176 176 190 / 0.8);
}
.rg-doc h2 {
  margin: clamp(32px, 4vw, 44px) 0 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--rg-ember);
}
.rg-doc p, .rg-doc li {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 24px;
  color: var(--rg-text-dim);
}
.rg-doc ul { margin: 0 0 14px; padding-left: 20px; }
.rg-doc strong { color: var(--rg-text); font-weight: 600; }

.rg-404 {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: var(--rg-section-y) var(--rg-gutter);
}