/* ============================================================
   Teleprompter — brand token overrides.
   Taken from the app's own DesignSystem/Tokens.swift (Prompter repo):
   the screens sit on the system background and accent in a deep blue
   that its ColorContrastTests measure. Fraunces + Geist kept from base.
   ============================================================ */
:root {
  --brand-bg-dark: #000000;     /* systemBackground, dark — the band is black too */
  --brand-bg-light: #F2F2F7;    /* systemGroupedBackground, light */
  --brand-accent: #5AA9FF;      /* Tokens.Colors.accent, dark variant */
  --brand-accent-2: #0058CC;    /* Tokens.Colors.accent, light variant (light sections) */
  --brand-accent-ink: #000000;  /* black ink on the light-blue accent, 8:1 */
}

/* ---- the reading band, composed in CSS ----
   The app has no icon and no screenshots this site may use yet: its store
   screenshots are App Store frames with headlines, and the one that shows the
   band was shot over black because the simulator has no camera. So the hero
   carries this card instead (README -> Adding a product page, step 5): type,
   borders and the page's tokens, never a mockup of a screen. It draws the one
   idea the app is built on — the script sits right under the front lens —
   using the band's real styling: white semibold on black, the next line at
   90 %, a cue drawn as a chip instead of a word to read. */
.band-card {
  width: min(100%, 420px);
  margin-inline: auto;
  padding: 1.1rem 1.1rem 1.4rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-align: left;
}
.band-card__lens {
  width: 14px; height: 14px; margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a66 0 30%, #0b0d12 60%);
  box-shadow: 0 0 0 4px #000, 0 0 0 5px var(--hairline-strong);
}
.band-card__band {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  font-weight: 600;
  line-height: 1.35;
}
.band-card__line { color: #fff; font-size: clamp(1.05rem, 1vw + 0.9rem, 1.3rem); }
.band-card__line--next { color: rgba(255, 255, 255, 0.9); }
.band-card__cue {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.55rem; padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-accent) 22%, transparent);
  color: var(--text-1);
  font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500;
}
.band-card__cue svg { width: 14px; height: 14px; }
.band-card__caption {
  margin-top: 1rem;
  font-family: var(--font-mono); font-size: var(--fs-cap);
  color: var(--text-2); text-align: center; letter-spacing: 0.04em;
}

/* ---- support ----
   This landing doubles as the app's support URL (App Store Connect asks for
   one), so it carries a short question list. Same card surface as .card,
   without the hover lift: these are answers, not links. */
.faq { display: grid; gap: var(--gap); }
.faq__item {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.6rem;
}
.faq__item h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.faq__item p { color: var(--text-2); font-size: var(--fs-sm); }
.support__mail { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }