@import url('./tokens.css');

/*
 * FilmLedger public site — base layer and Source Ledger type roles.
 *
 * Visual source of truth: _bmad-output/planning-artifacts/ux-designs/
 * ux-FilmLedger-2026-09-08/DESIGN.md
 *
 * Nothing below defines a colour of its own; every value comes from tokens.css.
 * Sections are built on these roles rather than on bespoke rules, so the six
 * sections still to come inherit the system rather than re-describing it.
 */

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

html {
  /* An anchor target clears the fixed header rather than hiding beneath it. */
  scroll-padding-top: 96px;
  /* Native smooth scrolling. The JavaScript that used to intercept anchor
     clicks and animate this by hand is gone: the spine requires native
     scrolling and forbids taking over the gesture. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fl-canvas);
  color: var(--fl-text-primary);
  font-family: var(--fl-font-sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fl-text-primary);
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

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

a { color: var(--fl-link); }

/* Links in running prose are underlined and stay distinguishable without
   colour. Buttons and navigation opt out — they are not running text. */
a:not([class*="btn"]):not([class*="nav-"]):not([class*="logo"]) {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:focus-visible {
  outline: var(--fl-focus-width) solid var(--fl-focus);
  outline-offset: var(--fl-focus-offset);
}

::selection {
  background-color: var(--fl-selected);
  color: var(--fl-text-primary);
}

/* ── Source Ledger type roles ───────────────────────────────────────────────
 *
 *   Serif (Source Serif 4)  — page identity and section titles.
 *   Sans  (Source Sans 3)   — reading, navigation, actions.
 *   Mono  (Source Code Pro) — photographic data, status, overlines.
 *
 * No role is smaller than .type-label (14px) except .type-overline, which is
 * decorative or redundant metadata only.
 */

.type-display {
  font-family: var(--fl-font-serif);
  font-size: clamp(2.75rem, 13vw, 3.5rem);
  font-weight: 475;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-optical-sizing: auto;
}

@media (min-width: 768px) {
  .type-display {
    font-size: clamp(3.5rem, 6vw, 5rem);
    line-height: 0.97;
    letter-spacing: -0.05em;
  }
}

.type-heading-lg {
  font-family: var(--fl-font-serif);
  font-size: 2.625rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-optical-sizing: auto;
}

.type-heading-md {
  font-family: var(--fl-font-serif);
  font-size: 1.75rem;
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
}

.type-heading-sm {
  font-family: var(--fl-font-serif);
  font-size: 1.375rem;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

.type-body-lg {
  font-family: var(--fl-font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
}

.type-body {
  font-family: var(--fl-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}

.type-label {
  font-family: var(--fl-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
}

.type-data {
  font-family: var(--fl-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.type-overline {
  font-family: var(--fl-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.type-status {
  font-family: var(--fl-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--fl-content-max);
  margin-inline: auto;
  padding-inline: var(--fl-gutter-mobile);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--fl-gutter-tablet); }
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--fl-gutter-desktop); }
}

section {
  padding-block: var(--fl-section-mobile);
}

@media (min-width: 768px) {
  section { padding-block: var(--fl-section-desktop); }
}

.measure { max-width: var(--fl-measure); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  padding: 12px 20px;
  background-color: var(--fl-surface);
  color: var(--fl-text-primary);
  border: 1px solid var(--fl-control-border);
  border-radius: var(--fl-radius-md);
}

/* ── Buttons ────────────────────────────────────────────────────────────────
 * Brand fill for the one dominant action, control border for the alternative.
 * `rounded-full`, 44px minimum, exact state colours from the spine — never
 * derived at runtime.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--fl-target-min);
  padding: 10px 24px;
  border-radius: var(--fl-radius-full);
  border: 1px solid transparent;
  font-family: var(--fl-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fl-transition-fast), border-color var(--fl-transition-fast);
}

.btn-primary {
  background-color: var(--fl-brand);
  color: var(--fl-on-brand);
}

.btn-primary:hover { background-color: var(--fl-brand-hover); }
.btn-primary:active { background-color: var(--fl-brand-pressed); }

.btn-secondary {
  background-color: transparent;
  color: var(--fl-text-primary);
  border-color: var(--fl-control-border);
}

.btn-secondary:hover { background-color: var(--fl-interactive-hover); }
.btn-secondary:active { background-color: var(--fl-interactive-pressed); }

.btn-large {
  padding: 14px 32px;
  font-size: 1rem;
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */

.card {
  background-color: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  padding: 24px;
}

/* ── Site Header ────────────────────────────────────────────────────────────
 * 72px rhythm, canvas tone, hairline lower border. Wordmark left, concise
 * navigation and the account action right.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--fl-canvas);
  border-bottom: 1px solid var(--fl-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding-block: 12px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The mark is 36px; the link itself still has to meet the target floor. */
  min-height: var(--fl-target-min);
  color: var(--fl-text-primary);
  text-decoration: none;
}

/* The Frame Stamp, the approved FilmLedger mark (DESIGN.md). It is drawn in
   currentColor so a one-colour form exists for free. */
.frame-stamp {
  color: var(--fl-brand);
  flex-shrink: 0;
  overflow: visible;
}

.logo__word {
  font-family: var(--fl-font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.site-nav__list,
.nav-disclosure__list,
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--fl-target-min);
  padding-inline: 16px;
  border-radius: var(--fl-radius-full);
  color: var(--fl-text-secondary);
  font-family: var(--fl-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--fl-transition-fast), color var(--fl-transition-fast);
}

.nav-link:hover {
  background-color: var(--fl-interactive-hover);
  color: var(--fl-text-primary);
}

.nav-link:active { background-color: var(--fl-interactive-pressed); }

/* ── Compact disclosure ─────────────────────────────────────────────────────
 * Native <details>. The summary carries an implicit button role and its own
 * expanded state, Enter and Space toggle it, and focus stays on the trigger
 * throughout — so closing returns focus to it by construction rather than by
 * script. Nothing here depends on JavaScript.
 */

.nav-disclosure { display: none; }

.nav-disclosure__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--fl-target-min);
  min-width: var(--fl-target-min);
  padding-inline: 20px;
  border: 1px solid var(--fl-control-border);
  border-radius: var(--fl-radius-full);
  color: var(--fl-text-primary);
  font-family: var(--fl-font-sans);
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--fl-transition-fast);
}

/* Suppress the platform disclosure triangle; the label carries the meaning. */
.nav-disclosure__trigger::-webkit-details-marker { display: none; }
.nav-disclosure__trigger::marker { content: ''; }

.nav-disclosure__trigger:hover { background-color: var(--fl-interactive-hover); }

.nav-disclosure[open] .nav-disclosure__trigger {
  background-color: var(--fl-selected);
  border-color: var(--fl-control-border);
}

/* The label swaps with state, so the control says what it will do next. */
.nav-disclosure[open] .nav-disclosure__label::after { content: ''; }

/* Positioned against the sticky header rather than the padded container, so
   the panel spans the full width and its list supplies the gutter once. */
.nav-disclosure__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: var(--fl-surface);
  border-block: 1px solid var(--fl-border);
  padding-block: 12px;
}

.nav-disclosure__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: var(--fl-content-max);
  margin-inline: auto;
  padding-inline: var(--fl-gutter-mobile);
}

.nav-link--block {
  justify-content: flex-start;
  width: 100%;
}

.nav-disclosure__cta { margin-top: 8px; }

@media (max-width: 767px) {
  .site-nav { display: none; }
  .nav-disclosure { display: block; }
}

/* ── Public Footer ──────────────────────────────────────────────────────────
 * Single-column reading order first, widening into groups. It introduces no
 * text role smaller than label.
 */

.site-footer {
  background-color: var(--fl-surface);
  border-top: 1px solid var(--fl-border);
  padding-block: 48px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
  }
}

.site-footer__brand { display: flex; flex-direction: column; gap: 8px; }

.site-footer__word {
  font-family: var(--fl-font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.site-footer__promise {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--fl-text-secondary);
}

.site-footer__list { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 768px) {
  .site-footer__list { align-items: flex-end; }
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--fl-target-min);
  color: var(--fl-text-secondary);
  font-size: 0.875rem;
  font-weight: 650;
}

.site-footer__list a:hover { color: var(--fl-text-primary); }

.site-footer__copyright {
  font-family: var(--fl-font-mono);
  font-size: 0.875rem;
  color: var(--fl-text-secondary);
}

/* ── Conversion hero ────────────────────────────────────────────────────────
 * Two-part composition: expressive copy and one dominant Frame record. Below
 * 1024px it becomes a single reading-order column with the copy first.
 */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__light {
  position: absolute;
  top: -20%;
  right: -10%;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--fl-hero-light) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    /* The record is given the larger share: the spine wants one dominant
       photographic element, not a balanced split. */
    grid-template-columns: 5fr 6fr;
    gap: 64px;
  }
}

/* Balance the display lines rather than letting the last one strand a word. */
.hero h1 { text-wrap: balance; }

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero__lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fl-text-secondary);
  max-width: var(--fl-measure);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__note { color: var(--fl-text-secondary); font-weight: 400; }

/* ── Frame Record Card ──────────────────────────────────────────────────────
 * Surface tone, hairline border, rounded-lg. The one place on this page a
 * float shadow is permitted.
 */

.frame-record { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.frame-record__card {
  background-color: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
  box-shadow: var(--fl-shadow-float);
  overflow: hidden;
  position: relative;
}

/* Visible, unobtrusive, and never overlapping the record's own data. */
.frame-record__example {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 6px 10px;
  border-radius: var(--fl-radius-full);
  background-color: var(--fl-elevated);
  border: 1px solid var(--fl-border);
  color: var(--fl-text-primary);
}

.frame-record__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }

.frame-record__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.frame-record__id { color: var(--fl-text-secondary); }

.frame-record__title { color: var(--fl-text-primary); }

/* Columns size to their content rather than splitting evenly, so an exposure
   triplet is not broken across lines while a short label keeps slack. */
.frame-record__meta {
  display: grid;
  gap: 12px 20px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--fl-border);
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
}

.frame-record__meta dt { color: var(--fl-text-secondary); margin-bottom: 4px; }
.frame-record__meta dd { color: var(--fl-text-primary); margin: 0; }

.frame-record__caption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fl-text-secondary);
  max-width: var(--fl-measure);
}

/* ── Photo Placeholder ──────────────────────────────────────────────────────
 * An abstract composition that says what it is. It reserves the production
 * aspect ratio and a text-safe region, so real photography is a swap rather
 * than a re-layout — and it must never read as a product screenshot.
 */

.photo-placeholder {
  aspect-ratio: 3 / 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background-color: var(--fl-elevated);
  background-image: radial-gradient(circle at 30% 30%, var(--fl-hero-light) 0%, transparent 60%);
  border-bottom: 1px solid var(--fl-border);
}

.photo-placeholder__stamp {
  color: var(--fl-text-secondary);
  text-align: center;
}

/* The sample frame's photograph: same 3:2 box the placeholder reserved. */
.frame-record__photo {
  display: block;
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: var(--fl-elevated);
  border-bottom: 1px solid var(--fl-border);
}

/* ── Status badge ───────────────────────────────────────────────────────────
 * Always carries its word. Colour is the second signal, never the only one,
 * and the badge has no fixed height so it wraps at enlarged text sizes.
 */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--fl-radius-full);
  background-color: var(--fl-elevated);
  border: 1px solid var(--fl-border);
  color: var(--fl-text-secondary);
}

.status-badge--success { color: var(--fl-success); }
.status-badge--warning { color: var(--fl-warning); }

/* ── Trust strip ────────────────────────────────────────────────────────────
 * A short wrapping list of verified statements. Not a carousel, not a ticker,
 * and nothing here moves.
 */

.trust {
  padding-block: 32px;
  border-block: 1px solid var(--fl-border);
  background-color: var(--fl-surface);
}

.trust__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
  padding: 0;
}

.trust__item { color: var(--fl-text-primary); }

/* ── Utility ────────────────────────────────────────────────────────────── */

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

/* ── Section heads ──────────────────────────────────────────────────────── */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  max-width: var(--fl-measure);
}

.section-head h2 { text-wrap: balance; }

.section-lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fl-text-secondary);
}

/* ── Workflow Stage Cards ───────────────────────────────────────────────────
 * Equal visual weight across the three, so the sequence reads as one process —
 * while the status badges keep the honest differences between them obvious.
 * The badge sits at the foot of every card, in the same place each time.
 */

.stages__list {
  list-style: none;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .stages__list { grid-template-columns: repeat(3, 1fr); }
}

.stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background-color: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
}

.stage__number { color: var(--fl-brand); }

.stage__title { color: var(--fl-text-primary); }

.stage__desc { color: var(--fl-text-secondary); }

/* Pinned to the foot so the three badges align across the row. */
.stage__status {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Every Live badge names the surface it is live on, per the capability
   matrix — the spine forbids an unqualified claim. */
.stage__surface { color: var(--fl-text-secondary); font-weight: 400; }

/* ── Example records ────────────────────────────────────────────────────────
 * Real markup rather than screenshots, so they reflow, scale with text, and
 * stay legible to a screen reader — and each says what it is.
 */

.records__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .records__grid { grid-template-columns: repeat(2, 1fr); }
}

.record-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background-color: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
}

.record-card__example {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: var(--fl-radius-full);
  background-color: var(--fl-elevated);
  border: 1px solid var(--fl-border);
  color: var(--fl-text-primary);
}

.record-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-card__title { color: var(--fl-text-primary); }

.record-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 20px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--fl-border);
}

.record-card__meta dt { color: var(--fl-text-secondary); margin-bottom: 4px; }
.record-card__meta dd { color: var(--fl-text-primary); margin: 0; }

.record-card__caption {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.875rem;
  color: var(--fl-text-secondary);
}

/* ── Privacy promise ────────────────────────────────────────────────────────
 * The two sentences the spine permits, and nothing broader. No absolute
 * guarantee, and no promise about pricing that has not been decided.
 */

.privacy {
  background-color: var(--fl-surface);
  border-block: 1px solid var(--fl-border);
}

.privacy__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--fl-measure);
}

.privacy__inner h2 { text-wrap: balance; }

.privacy__body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fl-text-secondary);
}

/* ── Capability roadmap ─────────────────────────────────────────────────────
 * A labelled list rather than a table, which DESIGN.md permits and which
 * reflows to one column without restyling semantics or repeating headers in
 * CSS content. Every status is a word beside the platform it belongs to;
 * there is not a checkmark anywhere.
 */

.roadmap__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 48px;
  padding: 0;
}

.capability {
  display: grid;
  gap: 20px;
  padding: 24px;
  background-color: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
}

@media (min-width: 1024px) {
  .capability {
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    align-items: start;
  }
}

.capability__what { display: flex; flex-direction: column; gap: 8px; }

.capability__name { color: var(--fl-text-primary); }

.capability__desc { color: var(--fl-text-secondary); }

.capability__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 0;
}

.capability__cell { display: flex; flex-direction: column; gap: 8px; }

.capability__cell dt { color: var(--fl-text-secondary); }

.capability__cell dd { margin: 0; }

/* ── Platform availability ─────────────────────────────────────────────── */

.platforms {
  padding: 24px;
  background-color: var(--fl-elevated);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg);
}

.platforms__heading { margin-bottom: 20px; }

.platforms__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.platform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--fl-border);
}

.platform:last-child { padding-bottom: 0; border-bottom: 0; }

.platform__name { min-width: 12rem; color: var(--fl-text-primary); }

.platform__note { color: var(--fl-text-secondary); font-size: 0.875rem; }

/* ── Product updates ────────────────────────────────────────────────────────
 * No form. The spine is explicit that the email preference lives in an
 * account, not in an anonymous box on a marketing page.
 */

.updates {
  background-color: var(--fl-surface);
  border-block: 1px solid var(--fl-border);
}

.updates__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: var(--fl-measure);
}

.updates__body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fl-text-secondary);
}

/* ── FAQ ────────────────────────────────────────────────────────────────────
 * Hairline-separated rows on native disclosures. The answer is in the
 * document whether open or closed, so it is findable by in-page search and by
 * a screen reader's own reading mode.
 */

.faq__list {
  border-top: 1px solid var(--fl-border);
  max-width: var(--fl-measure);
}

.faq__item { border-bottom: 1px solid var(--fl-border); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--fl-target-min);
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  color: var(--fl-text-primary);
  transition: color var(--fl-transition-fast);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }

.faq__question:hover { color: var(--fl-brand); }

/* A non-colour affordance for open and closed, since colour alone may not
   survive forced-colors or reach every reader. */
.faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--fl-font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fl-text-secondary);
}

.faq__item[open] .faq__question::after { content: '\2212'; }

.faq__item[open] .faq__question { color: var(--fl-brand); }

.faq__answer {
  padding-bottom: 20px;
  color: var(--fl-text-secondary);
  line-height: 1.65;
}

/* ── Closing CTA ────────────────────────────────────────────────────────── */

.closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.closing__inner h2 { text-wrap: balance; }

.closing__body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fl-text-secondary);
  max-width: var(--fl-measure);
}

.closing__note { color: var(--fl-text-secondary); font-weight: 400; }

/* ── Motion ─────────────────────────────────────────────────────────────── */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Forced colors ──────────────────────────────────────────────────────────
 * The system takes over colour and every custom fill is dropped, so anything
 * whose meaning rode on a fill has to say it another way.
 */
@media (forced-colors: active) {
  .card,
  .feature-card,
  .btn,
  .skip-link:focus {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* ── Text pages (support, account deletion, later privacy and terms) ────────
 * One readable column of running prose under the site header. */

.page { padding-block: var(--fl-section-mobile); }

@media (min-width: 768px) {
  .page { padding-block: var(--fl-section-desktop); }
}

.page__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--fl-measure);
  line-height: 1.65;
  color: var(--fl-text-secondary);
}

.page__inner h1 { text-wrap: balance; margin-bottom: 8px; }
.page__inner h2 { margin-top: 24px; }
.page__inner strong { color: var(--fl-text-primary); }
.page__inner ul,
.page__inner ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.5em; }

.page__lede {
  font-size: 1.125rem;
  color: var(--fl-text-primary);
}