/* ==========================================================================
   DuaCar — duacarapp.com
   A web port of the app's Settings-screen design language. Every token below
   mirrors the app's shared source of truth:
     · colours   — android ui/theme/Color.kt  (DarkColors / LightColors)
     · spacing   — android ui/theme/UiConstants.kt
     · type      — android ui/theme/Type.kt   (OverlineStyle / ArabicDuaStyle)
   Never invent a value here that belongs in one of those files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Spacing rhythm (UiConstants.Spacing) */
  --sp-xs: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-xxl: 28px;
  --sp-xxxl: 32px;
  --sp-xxxxl: 40px;

  /* Radii & fixed sizes */
  --radius-button: 16px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --hairline: 1px;
  --h-gold-button: 54px;
  --h-primary-button: 56px;
  --size-icon-badge: 38px;

  /* Type (UiConstants.FontSize) */
  --fs-caption: 14px;
  --fs-body: 16px;
  --fs-headline: 24px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-arabic: "Amiri", "Noto Naskh Arabic", serif;

  /* Layout */
  --page-max: 1080px;
  --prose-max: 760px;

  color-scheme: dark;
}

/* Dark palette — DarkColors in Color.kt */
:root,
:root[data-theme="dark"] {
  --background: #121212;
  --surface: #151a18;
  --surface-elevated: #1e2522;
  --primary-green: #1f7a47;
  --green-deep: #0f4429;
  --accent: #c9a86a;
  --gold-soft: #6e5f3e;
  --text-primary: #f2f0e9;
  --text-secondary: #b3bdb7;
  --on-gold: #151a18;
  --glass-tint: rgba(255, 255, 255, 0.09);
  --on-green: #ffffff;
  --card-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  --card-highlight: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

/* Light palette — LightColors in Color.kt (warm sand, charcoal accent) */
:root[data-theme="light"] {
  --background: #b9b59f;
  --surface: #c9c5b0;
  --surface-elevated: #d6d2bc;
  --primary-green: #1b6e40;
  --green-deep: #0f4429;
  --accent: #2f3e46;
  --gold-soft: #9a855a;
  --text-primary: #23201a;
  --text-secondary: #5c584c;
  --on-gold: #f2f0e9;
  --glass-tint: rgba(255, 255, 255, 0.2);
  --on-green: #ffffff;
  --card-shadow: 0 6px 20px rgba(35, 32, 26, 0.22);
  --card-highlight: rgba(255, 255, 255, 0.35);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Fonts — Amiri is the calligraphy centrepiece; English UI stays system-native
   (PROJECT.md § Typography: no decorative Latin fonts).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100%;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: var(--sp-lg);
  top: -60px;
  z-index: 100;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-radius: var(--radius-button);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--sp-lg);
}

/* --------------------------------------------------------------------------
   Geometric pattern background (Common.kt § GeometricPattern)
   The source PNG is gold line-work on transparency; here it drives a CSS mask
   so the accent colour re-tints with the theme, exactly like ColorFilter.tint.
   Parallax mirrors the app's ±40dp gyroscope shift — pointer-driven on desktop,
   device-tilt on mobile (see theme.js).
   -------------------------------------------------------------------------- */

.pattern {
  position: fixed;
  inset: -50px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
  background-color: var(--accent);
  -webkit-mask-image: url("../img/geometric-pattern.webp");
  mask-image: url("../img/geometric-pattern.webp");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  /* Motion is driven frame-by-frame in theme.js (spring-smoothed), so no CSS
     transition here — one would fight the rAF loop. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  z-index: 1;
}

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

.shell--prose {
  max-width: var(--prose-max);
}

section {
  padding: var(--sp-xxxxl) 0;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background: color-mix(in srgb, var(--background) 72%, transparent);
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--gold-soft) 30%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: var(--hairline) solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  margin-left: auto;
}

.site-nav a {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

.site-nav a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Theme switch — mirrors the app's Appearance card button, which cycles
   Auto → Light → Dark → Auto (SettingsScreen.kt § AppearanceCard).
   -------------------------------------------------------------------------- */

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  height: 38px;
  padding: 0 var(--sp-md);
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.theme-switch:hover {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}

.theme-switch:active {
  transform: scale(0.97);
}

.theme-switch svg {
  width: var(--sp-lg);
  height: var(--sp-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Only the icon for the active mode is shown. */
.theme-switch__icon {
  display: none;
}

:root[data-theme-mode="auto"] .theme-switch__icon--auto,
:root[data-theme-mode="light"] .theme-switch__icon--light,
:root[data-theme-mode="dark"] .theme-switch__icon--dark {
  display: block;
}

/* --------------------------------------------------------------------------
   Cards (Common.kt § AppCard) — frosted glass over the pattern, gold hairline,
   explicit dark drop shadow (not native elevation, which vanishes on #121212).
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--sp-xl);
  border: var(--hairline) solid color-mix(in srgb, var(--gold-soft) 35%, transparent);
  border-radius: var(--radius-card);
  background: var(--glass-tint);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  box-shadow: var(--card-shadow), inset 0 2px 0 var(--card-highlight);
}

/* Opaque variant for long-form reading (legal / privacy) — those pages carry no
   pattern behind them, so glass has nothing to frost. */
.card--solid {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card--hero {
  padding: var(--sp-xxl) var(--sp-xl);
}

/* --------------------------------------------------------------------------
   Overline (Type.kt § OverlineStyle) — 12sp, 600, 2sp tracking, uppercase
   -------------------------------------------------------------------------- */

.overline {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Buttons
   Colour convention (PROJECT.md § First Launch Experience): green when the
   action leaves the app / hands off to a system surface — so both store
   buttons are green. Gold stays with in-page, secondary actions.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  border-radius: var(--radius-button);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.btn:active {
  transform: scale(0.985);
}

.btn--primary {
  height: var(--h-primary-button);
  padding: 0 var(--sp-xxl);
  border: none;
  background: var(--primary-green);
  color: var(--on-green);
}

.btn--solid {
  height: var(--h-primary-button);
  padding: 0 var(--sp-xxl);
  border: none;
  background: var(--accent);
  color: var(--on-gold);
}

.btn--outline {
  height: var(--h-gold-button);
  padding: 0 var(--sp-xl);
  border: var(--hairline) solid var(--accent);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  color: var(--accent);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Store buttons: two-line label with the platform glyph, on the green fill.
   Tighter side padding than the other buttons — the "Download free on the"
   overline is long enough that --sp-xxl pushes the pair onto two rows. */
.btn--store {
  gap: var(--sp-md);
  height: auto;
  min-height: 62px;
  padding: var(--sp-md) var(--sp-xl);
  text-align: left;
}

.btn--store svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: currentColor;
}

.btn__label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.btn__label small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.82;
}

.btn__label span {
  font-size: 17px;
  font-weight: 600;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

/* --------------------------------------------------------------------------
   Chips & pills (Common.kt § GoldChip / GoldPillButton)
   -------------------------------------------------------------------------- */

.chip {
  display: inline-block;
  padding: 7px var(--sp-md);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.3;
}

.pill {
  display: inline-block;
  padding: 7px var(--sp-md);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-gold);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Icon badge (Common.kt § IconBadge)
   -------------------------------------------------------------------------- */

.icon-badge {
  display: grid;
  place-items: center;
  width: var(--size-icon-badge);
  height: var(--size-icon-badge);
  flex: none;
  border-radius: 50%;
  background: var(--surface-elevated);
  border: var(--hairline) solid color-mix(in srgb, var(--accent) 50%, transparent);
}

.icon-badge svg {
  width: calc(var(--size-icon-badge) * 0.5);
  height: calc(var(--size-icon-badge) * 0.5);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-badge--lg {
  --size-icon-badge: 52px;
}

/* Logo swaps with the palette — the app ships a dark and a light mark. */
:root[data-theme="dark"] .theme-img--light,
:root[data-theme="light"] .theme-img--dark {
  display: none;
}

/* --------------------------------------------------------------------------
   Gold ornament (Common.kt § GoldOrnament) — fading hairlines flanking a
   manuscript-style triple-diamond centre.
   -------------------------------------------------------------------------- */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
}

.ornament__line {
  width: 64px;
  height: var(--hairline);
}

.ornament__line--l {
  background: linear-gradient(to right, transparent, var(--accent));
}

.ornament__line--r {
  background: linear-gradient(to right, var(--accent), transparent);
}

.ornament__dia {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--accent);
}

.ornament__stack {
  position: relative;
  display: grid;
  place-items: center;
  width: 11px;
  height: 11px;
}

.ornament__stack::before,
.ornament__stack::after {
  content: "";
  position: absolute;
  transform: rotate(45deg);
}

.ornament__stack::before {
  width: 11px;
  height: 11px;
  border: var(--hairline) solid var(--accent);
}

.ornament__stack::after {
  width: 4px;
  height: 4px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Mihrab frame (Common.kt § MihrabFrame) — the arch that houses the dua. The
   path is drawn by mihrab.js so the ogee geometry keeps its true proportions
   at any width instead of being stretched by preserveAspectRatio.
   -------------------------------------------------------------------------- */

.mihrab {
  position: relative;
  padding: 56px var(--sp-md) var(--hairline);
}

.mihrab__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mihrab__arch {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-width: 1;
}

.mihrab__finial {
  fill: var(--accent);
}

.mihrab__stop--in {
  stop-color: var(--accent);
  stop-opacity: 0.4;
}

.mihrab__stop--out {
  stop-color: var(--accent);
  stop-opacity: 0;
}

/* --------------------------------------------------------------------------
   Arabic dua (Type.kt § ArabicDuaStyle) — 30sp Amiri bold, 58sp line height
   -------------------------------------------------------------------------- */

.dua {
  margin: 0;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.93;
  text-align: center;
  color: var(--text-primary);
  direction: rtl;
}

.dua--sm {
  font-size: 26px;
}

.dua-translation {
  margin: var(--sp-lg) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  text-align: center;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Background glow (Common.kt § BackgroundGlow) — a soft, unbounded wash of the
   page's own background colour that lifts text off the busy pattern without
   putting an opaque card under it. Used wherever copy sits straight on the
   texture rather than inside an AppCard.
   -------------------------------------------------------------------------- */

.glow-behind {
  position: relative;
}

.glow-behind::before {
  content: "";
  position: absolute;
  inset: -32px -56px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--background) 92%, transparent) 0%,
    color-mix(in srgb, var(--background) 70%, transparent) 42%,
    transparent 72%
  );
  filter: blur(22px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: var(--sp-xxxxl) 0 var(--sp-xxl);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-xxxxl);
  align-items: center;
}

.hero__title {
  margin: var(--sp-lg) 0 0;
  font-size: clamp(38px, 5.4vw, 60px);
  letter-spacing: -0.025em;
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--accent);
}

.hero__lede {
  margin: var(--sp-xl) 0 0;
  max-width: 33ch;
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 1.6;
}

.hero__cta {
  margin-top: var(--sp-xxl);
}

.hero__note {
  margin-top: var(--sp-lg);
  color: var(--text-secondary);
  font-size: 13px;
}

.hero__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}

.hero__ornament {
  margin: var(--sp-lg) 0 0;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-xxl);
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  margin-top: var(--sp-md);
  font-size: clamp(27px, 3.4vw, 36px);
}

.section-head p {
  margin-top: var(--sp-md);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Feature grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.feature h3 {
  margin: var(--sp-lg) 0 var(--sp-xs);
  font-size: 18px;
}

.feature p {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.65;
}

.feature__tag {
  display: inline-block;
  margin-top: var(--sp-md);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.step {
  position: relative;
}

.step__n {
  display: grid;
  place-items: center;
  width: var(--size-icon-badge);
  height: var(--size-icon-badge);
  border-radius: 50%;
  background: var(--surface-elevated);
  border: var(--hairline) solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.step h3 {
  margin: var(--sp-lg) 0 var(--sp-xs);
  font-size: 17px;
}

.step p {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xxxl);
  align-items: center;
}

.price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-md);
  margin: var(--sp-lg) 0 0;
}

.price__amount {
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price__unit {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

.checklist {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-md);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

.checklist svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  fill: var(--primary-green);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--sp-md);
}

.faq details {
  border: var(--hairline) solid color-mix(in srgb, var(--gold-soft) 35%, transparent);
  border-radius: var(--radius-button);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  padding: 0 var(--sp-xl);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-lg) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  padding-bottom: var(--sp-xl);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.cta {
  text-align: center;
}

.cta h2 {
  margin: var(--sp-lg) 0 0;
  font-size: clamp(26px, 3.4vw, 34px);
}

.cta p {
  margin: var(--sp-md) auto 0;
  max-width: 46ch;
  color: var(--text-secondary);
}

.cta .store-buttons {
  justify-content: center;
  margin-top: var(--sp-xxl);
}

.cta .ornament {
  margin-bottom: var(--sp-xl);
}

/* --------------------------------------------------------------------------
   Long-form legal / privacy pages
   -------------------------------------------------------------------------- */

.doc-head {
  padding: var(--sp-xxxxl) 0 var(--sp-xl);
  text-align: center;
}

.doc-head h1 {
  margin-top: var(--sp-md);
  font-size: clamp(30px, 4vw, 40px);
}

.doc-head .ornament {
  margin-top: var(--sp-xl);
}

.doc-meta {
  margin-top: var(--sp-md);
  color: var(--text-secondary);
  font-size: 13px;
}

.doc-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-xs) var(--sp-lg);
  margin: var(--sp-xl) 0 0;
  padding: 0;
  list-style: none;
}

.doc-toc a {
  color: var(--text-secondary);
  font-size: 13px;
}

.doc-toc a:hover {
  color: var(--accent);
}

.doc {
  padding-bottom: var(--sp-xxxxl);
}

.doc .card + .card {
  margin-top: var(--sp-xl);
}

.doc h2 {
  margin: 0;
  font-size: 21px;
}

.doc h3 {
  margin: var(--sp-xxl) 0 var(--sp-xs);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.doc h3:first-of-type {
  margin-top: var(--sp-xl);
}

.doc p {
  margin-top: var(--sp-md);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  line-height: 1.75;
}

.doc ul {
  margin: var(--sp-md) 0 0;
  padding-left: var(--sp-xl);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  line-height: 1.75;
}

.doc li {
  margin-top: var(--sp-xs);
}

.doc li::marker {
  color: var(--accent);
}

.doc__sig {
  margin-top: var(--sp-xxl);
  padding-top: var(--sp-xl);
  border-top: var(--hairline) solid color-mix(in srgb, var(--gold-soft) 30%, transparent);
  color: var(--text-secondary);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Download interstitial
   -------------------------------------------------------------------------- */

.redirect {
  min-height: calc(100vh - 68px);
  display: grid;
  place-items: center;
  padding: var(--sp-xxxxl) 0;
}

.redirect__card {
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}

.redirect__card h1 {
  margin: var(--sp-lg) 0 0;
  font-size: 26px;
}

.redirect__card p {
  margin-top: var(--sp-md);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

.redirect .store-buttons {
  margin-top: var(--sp-xxl);
  flex-direction: column;
}

.redirect .btn--store {
  width: 100%;
}

.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sp-xxxxl);
  padding: var(--sp-xxxl) 0 var(--sp-xxxxl);
  border-top: var(--hairline) solid color-mix(in srgb, var(--gold-soft) 30%, transparent);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-lg);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  color: var(--text-secondary);
  font-size: 13px;
}

.site-footer__brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/* Deliberately quiet — reads as fine print, like the app's LegalFooter. */
.legal-links {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-left: auto;
}

.legal-links a {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

.legal-links a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.legal-links span {
  color: color-mix(in srgb, var(--text-secondary) 50%, transparent);
  font-size: var(--fs-caption);
}

/* --------------------------------------------------------------------------
   Entrance animation (Common.kt § Appear — 500ms fade-and-rise, 14dp)
   -------------------------------------------------------------------------- */

.appear {
  opacity: 0;
  transform: translateY(14px);
  animation: appear 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes appear {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appear {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__grid,
  .pricing {
    grid-template-columns: 1fr;
    gap: var(--sp-xxl);
  }

  .hero__lede {
    max-width: none;
  }
}

@media (max-width: 640px) {
  section {
    padding: var(--sp-xxxl) 0;
  }

  .shell {
    padding: 0 var(--sp-lg);
  }

  .site-nav {
    gap: var(--sp-md);
  }

  .site-nav__link {
    display: none;
  }

  .store-buttons .btn--store {
    width: 100%;
  }

  .dua {
    font-size: 25px;
  }

  .legal-links {
    margin-left: 0;
    width: 100%;
  }
}