/* ==========================================================================
   Groundrush — shared stylesheet
   Design tokens and every component used by index.html, privacy.html and
   flasher.html. No build step: this file is served as-is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted from site/fonts — no third-party font CDN at runtime)
   -------------------------------------------------------------------------- */

/* Orbitron 500-900 — latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('../fonts/orbitron-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rajdhani 400 — latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rajdhani-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rajdhani 400 — latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rajdhani-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rajdhani 500 — latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rajdhani-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rajdhani 500 — latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rajdhani-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rajdhani 600 — latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rajdhani 600 — latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rajdhani 700 — latin */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rajdhani 700 — latin-ext */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 400-600 — latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 400-600 — latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* palette */
  --cyan: #00ffff;
  --magenta: #ff00d4;
  --lime: #d8ff00;
  --bg: #04050c;
  --panel: rgba(8, 11, 22, .8);
  --panel-solid: rgba(5, 7, 16, .85);
  --text: #a9c2d8;
  --text-bright: #eaf6ff;
  --text-muted: #7e9ab4;

  /* derived lines / glows */
  --line: rgba(0, 255, 255, .25);
  --line-soft: rgba(0, 255, 255, .18);
  --line-faint: rgba(0, 255, 255, .12);
  --glow-cyan: rgba(0, 255, 255, .35);

  /* type */
  --font-display: 'Orbitron', 'Trebuchet MS', sans-serif;
  --font-body: 'Rajdhani', 'Trebuchet MS', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* metrics */
  --gutter: clamp(20px, 3vw, 48px);
  --maxw: 1280px;
  --chamfer: 22px;
  --chamfer-sm: 14px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-body);
  color: #d8e2ec;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--magenta); }

::selection { background: var(--magenta); color: var(--bg); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--cyan);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 10px 18px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Page shell + animated grid background
   -------------------------------------------------------------------------- */

@keyframes pulse   { 0%, 100% { opacity: 1; }  50% { opacity: .35; } }
@keyframes gridfloat { 0% { background-position: 0 0; } 100% { background-position: 0 48px; } }

.page {
  min-height: 100vh;
  background: var(--bg);
  position: relative;
}

.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridfloat 6s linear infinite;
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --------------------------------------------------------------------------
   5. Chamfered ("clipped corner") surfaces
   -------------------------------------------------------------------------- */

.chamfer {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer))
  );
}
.chamfer-sm {
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer-sm)) 0,
    100% var(--chamfer-sm),
    100% 100%,
    var(--chamfer-sm) 100%,
    0 calc(100% - var(--chamfer-sm))
  );
}

/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 14px;
  column-gap: 32px;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-right: 12px;
}
.brand > a { display: flex; align-items: center; gap: 12px; }
.brand > a:hover .wordmark { color: var(--text-bright); }

/* the little logo mark, drawn in CSS exactly as in the design */
.mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: radial-gradient(120% 120% at 50% 0%, #101a2e 0%, #04050c 70%);
  border: 1px solid rgba(0, 255, 255, .45);
  box-shadow: 0 0 16px rgba(0, 255, 255, .4);
  position: relative;
  overflow: hidden;
  flex: none;
}
.mark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 2px;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}
.mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 10px;
  width: 13px; height: 13px;
  border-right: 3px solid var(--cyan);
  border-bottom: 3px solid var(--cyan);
  transform: translateX(-50%) rotate(45deg);
}
.mark--sm { width: 26px; height: 26px; border-radius: 7px; }
.mark--sm::before { bottom: 7px; }
.mark--sm::after {
  top: 7px; width: 10px; height: 10px;
  border-right-width: 2px; border-bottom-width: 2px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--text-bright);
}
.wordmark span { color: var(--cyan); }
.wordmark--sm {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
}

.tag-stage {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--magenta);
  border: 1px solid rgba(255, 0, 212, .5);
  padding: 2px 8px;
  letter-spacing: 2px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  align-items: center;
}
.nav a { color: var(--text); }
.nav a:hover { color: var(--cyan); }
.nav a[aria-current="page"] { color: var(--cyan); }
.nav .nav-flasher { color: var(--lime); }
.nav .nav-flasher:hover { color: var(--magenta); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 72px;
}
.hero > * { min-width: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 7.2vw, 72px);
  line-height: 1.02;
  margin: 0 0 24px;
  color: var(--text-bright);
  /* chromatic aberration */
  text-shadow:
    3px 0 0 rgba(255, 0, 212, .8),
    -3px 0 0 rgba(0, 255, 255, .8),
    0 0 32px var(--glow-cyan);
}

.hero-lede {
  font-size: 21px;
  line-height: 1.5;
  color: var(--text);
  max-width: 520px;
  margin: 0 0 36px;
}

.cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Official store badges. Neither Apple's nor Google's artwork may be
   recoloured, outlined, glowed or otherwise restyled, so they get no cyberpunk
   treatment — only a proportional resize, which both guidelines allow.

   Apple's SVG is the badge itself, edge to edge, so 44px of element = 44px of
   badge, above Apple's 40px web minimum.

   Google's PNG is 646x250 with the badge occupying 564x168 inside it; the rest
   is the mandatory clear space (a quarter of the badge height on every side)
   shipped as a transparent margin. So the element must be 250/168 taller than
   the badge you want: 66px of element = 44.4px of visible badge. That clears
   Google's 28px minimum and keeps its badge marginally the larger of the two,
   which Google requires when its badge sits next to another store's. Do not
   "fix" the height to 44px — that would shrink the badge below Apple's. */
.btn-badge {
  display: inline-flex;
  align-items: center;
  box-shadow: none;
}
.btn-badge img {
  display: block;
  height: 44px;
  width: auto;
}
.btn-badge--play img { height: 66px; }
.btn-badge:hover { opacity: .82; }

.btn-store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 4px 26px;
  background: var(--cyan);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 0 28px rgba(0, 255, 255, .65);
}
.btn-store:hover { background: #8bffff; color: var(--bg); }
.btn-store small {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 2px;
  opacity: .7;
}
.btn-store strong {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 1px;
}
.btn-store--ghost {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  box-shadow: none;
}
.btn-store--ghost:hover { background: rgba(0, 255, 255, .1); color: var(--cyan); }

/* telemetry panel */

.telemetry {
  border: 1px solid rgba(0, 255, 255, .3);
  background: var(--panel-solid);
  padding: 24px;
  box-shadow: 0 0 48px rgba(0, 255, 255, .12);
}
.telemetry-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.telemetry-head span:first-child {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--magenta);
}
.led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: pulse 1.4s ease infinite;
}
.telemetry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.metric {
  border: 1px solid rgba(0, 255, 255, .2);
  padding: 14px 16px;
}
.metric--accent { border-color: rgba(255, 0, 212, .35); }
.metric dt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin: 0;
}
.metric dd {
  font-family: var(--font-display);
  font-size: clamp(24px, 4.4vw, 32px);
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
}
.metric--cyan dd { color: var(--cyan); }
.metric--accent dd { color: var(--magenta); }
.metric dd .unit { font-size: 14px; color: var(--text-muted); }
.telemetry-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. Sections
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px;
}
.section--last { padding-bottom: 88px; }

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--magenta);
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 40px;
}

/* features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Two cards in a three-column grid leave a hole, and the roadmap has two. The
   mobile rule further down still collapses either variant to one column. */
.feature-grid--two { grid-template-columns: repeat(2, 1fr); }
.card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 28px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card:hover, .card:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 32px rgba(0, 255, 255, .15);
}
.card h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: 2px;
  margin: 0 0 14px;
}
.card p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.card .card-link { margin-top: 18px; }
.card-link a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
}

/* screens */

.screens-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
/* Three real screenshots rather than four placeholders. Capped and centred so a
   phone capture is not stretched across a quarter of a wide desktop. */
.screens-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 960px;
  margin: 0 auto;
}
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}
/* The line under the store buttons carrying the only route that actually works
   today — an email. Kept quiet so it reads as a note, not a second CTA. */
.cta-note {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}
.shot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shot-frame {
  border: 1px solid rgba(0, 255, 255, .3);
  padding: 6px;
  background: var(--panel);
}
/* The frame is a <button>: at 540px the charts are a shape, not a reading, so
   every shot opens full size. Reset what a button brings with it and say so
   with the cursor. */
button.shot-frame {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  transition: border-color .18s ease, box-shadow .18s ease;
}
button.shot-frame:hover,
button.shot-frame:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 28px rgba(0, 255, 255, .18);
}
.shots-hint {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
}

/* The lightbox. Hidden with [hidden], so it is inert to screen readers and
   needs no aria juggling. */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 5, 12, .93);
  backdrop-filter: blur(3px);
}
.lightbox img {
  max-width: min(94vw, 560px);
  max-height: 94vh;
  width: auto;
  height: auto;
  border: 1px solid rgba(0, 255, 255, .35);
  box-shadow: 0 0 60px rgba(0, 255, 255, .12);
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: var(--text-bright);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus-visible { border-color: var(--cyan); color: var(--cyan); }
/* Nothing scrolls behind the overlay. */
.has-lightbox, .has-lightbox body { overflow: hidden; }
.shot-placeholder {
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0, 255, 255, .035) 0px,
      rgba(0, 255, 255, .035) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(120% 90% at 50% 0%, #0a1020 0%, #04050c 72%);
  border: 1px dashed rgba(0, 255, 255, .22);
}
.shot-placeholder .glyph {
  width: 34px; height: 34px;
  border-right: 2px solid rgba(0, 255, 255, .5);
  border-bottom: 2px solid rgba(0, 255, 255, .5);
  transform: rotate(45deg);
  margin-bottom: 8px;
}
.shot-placeholder .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-align: center;
  padding: 0 10px;
}
.shot-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* roadmap — deliberately a single TBD state */

.tbd {
  border: 1px solid var(--line-faint);
  background: var(--panel);
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.tbd .tbd-mark {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--text-muted);
}
.tbd p {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin: 0;
  max-width: 560px;
  line-height: 1.7;
}
.tbd .rule {
  width: 64px;
  height: 1px;
  background: rgba(0, 255, 255, .3);
}

/* flasher teaser */

.teaser {
  border: 1px solid rgba(216, 255, 0, .35);
  background: rgba(8, 11, 22, .85);
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: 0 0 48px rgba(216, 255, 0, .06);
}
.teaser-body { max-width: 640px; }
.badge-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bg);
  background: var(--lime);
  padding: 2px 10px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 12px;
}
.teaser h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 10px;
}
.teaser p {
  font-size: 18px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.btn-lime {
  display: inline-block;
  padding: 16px 32px;
  background: var(--lime);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  box-shadow: 0 0 28px rgba(216, 255, 0, .55);
}
.btn-lime:hover { background: #eaff4d; color: var(--bg); }

/* FAQ */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.faq-item {
  border: 1px solid rgba(0, 255, 255, .2);
  background: var(--panel);
  padding: 24px 28px;
}
.faq-item dt {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: 1px;
  margin: 0 0 10px;
  line-height: 1.35;
}
.faq-item dd {
  font-size: 16.5px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-soft);
  padding: 28px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   10. Prose (privacy policy)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 820px;
  padding-top: 56px;
  padding-bottom: 88px;
}
.prose h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.5vw, 46px);
  line-height: 1.1;
  color: var(--text-bright);
  margin: 0 0 16px;
  text-shadow:
    2px 0 0 rgba(255, 0, 212, .7),
    -2px 0 0 rgba(0, 255, 255, .7),
    0 0 26px var(--glow-cyan);
}
.prose .updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin: 0 0 36px;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 1px;
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-faint);
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: 2px;
  margin: 30px 0 12px;
}
.prose p,
.prose li {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text);
}
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--cyan); }
.prose strong { color: var(--text-bright); font-weight: 700; }
.prose em { color: var(--text-bright); font-style: italic; }
.prose code {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--lime);
  background: rgba(216, 255, 0, .07);
  border: 1px solid rgba(216, 255, 0, .18);
  padding: 1px 5px;
  word-break: break-word;
}
.prose .lead-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 24px 28px;
  margin-bottom: 28px;
}
.prose .lead-panel p:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: 0 0 22px; }
.prose table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border: 1px solid var(--line-faint);
  background: var(--panel);
}
.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-faint);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text);
}
.prose th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--magenta);
  text-transform: uppercase;
  border-bottom-color: rgba(0, 255, 255, .25);
}
.prose tbody tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .screens-grid, .screens-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .feature-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .teaser { padding: 32px 28px; }
  .section { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 640px) {
  :root { --chamfer: 16px; --chamfer-sm: 12px; }

  .site-header { padding: 16px var(--gutter); }
  .nav {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    gap: 9px 14px;
  }
  .wordmark { font-size: 18px; letter-spacing: 3px; }

  .eyebrow { font-size: 11px; letter-spacing: 2px; overflow-wrap: anywhere; }
  .hero h1 { font-size: 34px; overflow-wrap: anywhere; }
  .hero-lede { max-width: 100%; }
  .hero-lede { font-size: 18.5px; }
  .cta-row { gap: 12px; }
  .btn-store { flex: 1 1 100%; padding: 5px 20px; }
  /* never stretch the badge — Apple forbids distorting it */
  .btn-badge { flex: 0 0 auto; }

  .telemetry { padding: 18px; }
  .telemetry-grid { gap: 10px; }
  .metric { padding: 12px; }

  .screens-grid, .screens-grid--three { grid-template-columns: 1fr; gap: 28px; }
  .shot-frame { max-width: 320px; }
  .shot-placeholder { height: 420px; }

  .tbd { padding: 32px 20px; }
  .teaser { padding: 26px 20px; }
  .btn-lime { width: 100%; text-align: center; }

  .site-footer { justify-content: flex-start; }
  .prose p, .prose li { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   12. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .grid-bg,
  .led {
    animation: none !important;
  }
  *, *::before, *::after {
    transition-duration: .01ms !important;
  }
}