/* ══════════════════════════════════════════════════════════════════════════
   Get Real — corpsite styles (2026-04 redesign)

   Mirrors the app's design system exactly. Warm near-black ground, dusty
   rose accent, Georgia serif for editorial/card moments, system sans for
   UI and body copy. No purple, no gradients on type — the earlier
   pink→purple hero was retired when the app moved to the restrained
   palette, and the corpsite was out of step for several weeks before
   this rewrite.

   Token names, values, and typographic scale match css/app.css so a token
   referenced in the app (e.g. --card, --pink, --t-body) behaves identically
   here. If you change a token here, check the app and update in lockstep.
   ══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Palette — mirrors css/app.css tokens ──────────────────────── */
  --bg:              #1a1612;
  --surface:         #231f1a;
  --surface-elevated:#332e27;
  --card:            #332e27;
  --border:          #3d362e;
  --border-strong:   #4d4640;
  --card-border:     #7a7164;
  --text:            #f5ede0;
  --muted:           #8a8377;       /* 5.8:1 on --bg */
  --pink:            #d4a0a8;       /* dusty rose — primary accent */
  --red:             #ef4444;

  /* Subtle warm accent glows for the atmospheric bg — not the loud pink
     glow the old site had. These wash the ground at very low alpha so
     the page has air without competing with the card in the hero. */
  --glow-1:          rgba(212, 160, 168, 0.05);  /* pink wash */
  --glow-2:          rgba(125, 100, 85, 0.06);   /* warm amber wash */

  /* Typography — native stacks only, same as the app. No web fonts. */
  --font-serif: Georgia, 'Times New Roman', 'Times', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale — matches app tokens */
  --t-caption:   11px;
  --t-meta:      13px;
  --t-secondary: 15px;
  --t-body:      17px;
  --t-lede:      19px;
  --t-heading:   22px;
  --t-title:     28px;
  --t-display:   clamp(48px, 12vw, 96px);

  --tr-caps-sm: 0.12em;
  --tr-caps-lg: 0.14em;
  --tr-title:   0.01em;

  --radius:      22px;     /* matches the card radius in the app */
  --radius-sm:   12px;
}

/* ── Base ───────────────────────────────────────────────────────── */

html, body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Atmospheric background — two very low-alpha warm washes positioned
   asymmetrically so the ground feels like a lit room, not flat paper.
   Far dimmer than the old pink/purple gradient bloom. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 25% 0%,   var(--glow-1) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 35%,  var(--glow-2) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

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

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Typography ─────────────────────────────────────────────────── */

h1, h2, h3 {
  color: var(--text);
  line-height: 1.15;
  font-weight: 400;
}

.display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-display);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
}

.display-tagline {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 3.5vw, 22px);
  color: var(--muted);
  letter-spacing: var(--tr-title);
  margin-top: 20px;
}

.display-lede {
  font-size: var(--t-lede);
  color: var(--text);
  max-width: 560px;
  margin: 28px auto 0;
  line-height: 1.55;
  font-weight: 300;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-meta);
  color: var(--pink);
  letter-spacing: var(--tr-caps-lg);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

p {
  color: var(--text);
  font-size: var(--t-body);
  line-height: 1.65;
  margin-bottom: 14px;
}

p.muted {
  color: var(--muted);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s, opacity 0.2s;
}

a:hover {
  opacity: 0.75;
}

strong {
  color: var(--text);
  font-weight: 600;
}

ul {
  margin: 12px 0 16px 0;
  padding-left: 22px;
}

li {
  color: var(--text);
  font-size: var(--t-body);
  line-height: 1.65;
  margin-bottom: 6px;
}

code {
  font-size: 0.88em;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--pink);
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* Focus ring — matches app convention.
   No border-radius on the ring itself — let each element's own radius
   propagate to the outline (modern browsers respect it). Setting a
   radius here would clobber the 999px pill on .btn. */
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Screen-reader-only utility — matches app .sr-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Buttons — ghost-style, matching the app's #mainBtn ────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13.5px 28px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: var(--tr-title);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: 1.5px solid var(--pink);
  color: var(--pink);
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.15s;
}

.btn:hover {
  background: var(--pink);
  color: var(--bg);
  opacity: 1;
}

.btn:active {
  transform: translateY(1px);
  opacity: 0.9;
}

.btn-primary {
  /* Same ghost treatment by default; kept as an alias so templates that
     use .btn-primary don't need to change. Filled-pink is reserved for
     the hover state only — matches the app's #mainBtn. */
}

/* Filled-pink emphasis — for the single highest-priority action in a pair
   (the App Store download). Solid by default instead of only on hover, so it
   visually outranks the ghost .btn-primary sitting next to it. Token-based so
   it flips correctly in light mode. */
.btn-filled {
  background: var(--pink);
  color: var(--bg);
  border-color: var(--pink);
}
.btn-filled:hover {
  background: var(--pink);
  color: var(--bg);
  opacity: 0.9;
}

/* Subtle variant — for secondary actions sitting next to a primary btn.
   Quieter than the pink ghost: muted border, text color, fills to a
   warm neutral on hover instead of the accent color. */
.btn-muted {
  border-color: var(--border-strong);
  color: var(--muted);
}
.btn-muted:hover {
  background: var(--surface-elevated);
  color: var(--text);
  border-color: var(--card-border);
}

.btn-disabled,
.btn[aria-disabled='true'] {
  border-color: var(--border);
  color: var(--muted);
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

/* ── Site header (minimal, on all pages) ───────────────────────── */

.site-header {
  padding: 28px 24px 0;
  text-align: center;
}

.site-header a {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-heading);
  color: var(--text);
  text-decoration: none;
  letter-spacing: var(--tr-title);
}
.site-header a:hover {
  opacity: 1;
  color: var(--pink);
}

/* ── Hero ───────────────────────────────────────────────────────── */

.hero {
  padding: 48px 24px 72px;
  text-align: center;
  position: relative;
}

.hero .display {
  margin-top: 8px;
}

/* ── Card visual (hero + anywhere a card demo is shown) ─────────── */

/* Stage holds three stacked card layers: .card-back-2, .card-back-1,
   and .card-front. Sizes echo the app's aspect ratio (~0.72). The
   stage is a relative container; the cards are absolutely positioned
   around its center using translate+rotate so the stack reads as a
   tilted deck. */
.card-stage {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 0.72 / 1;
  margin: 48px auto 40px;
  --card-radius: var(--radius);
}

.card-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/* Two tilted backs — slight opposite rotations, small offsets, so the
   stack reads as a deck with top card ready to draw. Matches the app's
   quoteArea backs: same rotation angles, same translate offsets. */
.card-back-2 {
  transform: translate(-11px, 18px) rotate(-3deg);
  z-index: 1;
}

.card-back-1 {
  transform: translate(9px, 11px) rotate(2.4deg);
  z-index: 2;
}

/* Inset frame on .card-back-1 — a thin editorial rule just inside
   the outer border. TL/BR corners are masked by the "GET REAL" labels.
   Mirrors the app's .card-back-frame exactly. */
.card-back-frame {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  bottom: 22px;
  border: 1px solid rgba(245, 237, 224, 0.5);
  border-radius: 8px;
  pointer-events: none;
}

/* Corner labels — "GET REAL" in the TL and BR, the second rotated
   180°, same way rank/suit sit on a playing card. Background matches
   --card so they punch the frame rule behind them. */
.card-back-label {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-meta);
  letter-spacing: var(--tr-caps-lg);
  color: var(--pink);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--card);
  padding: 2px 5px;
}
.card-back-label-tl { top: 15px; left: 15px; }
.card-back-label-br { bottom: 15px; right: 15px; transform: rotate(180deg); }

/* Top card — live, upright, centered. Contains topic stamp, question,
   and the "Sit with this" affordance. Shadow is stronger than the backs
   so the top card reads as lifted. */
.card-front {
  z-index: 3;
  transform: translateY(-4px);
  display: flex;
  flex-direction: column;
  padding: 22px;
  gap: 20px;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  /* Gentle floating animation — 6s cycle, very small. Disabled under
     prefers-reduced-motion below. */
  animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(-10px); }
}

.card-topic {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-meta);
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps-lg);
  line-height: 1;
  flex: 0 0 auto;
  /* The hero centers its text; the topic stamp must read top-left like
     the app's card (the question/solo rows override the same way). */
  text-align: left;
}

.card-question {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 4.6vw, 24px);
  color: var(--text);
  line-height: 1.35;
  letter-spacing: 0.005em;
  text-align: left;
  /* Crossfade hook — JS toggles .fading class to cycle prompts. */
  transition: opacity 0.4s ease;
}

.card-question.fading {
  opacity: 0;
}

.card-solo {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--t-secondary);
  /* --pink on --card = 6.0:1 (AA for 15px normal). --muted on --card
     would be 3.6:1 which only clears AA for large text. Also matches
     the app's in-card CTA color. */
  color: var(--pink);
  letter-spacing: var(--tr-title);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  text-align: left;
  /* "Sit with this →" on the left, decorative thumbs on the right —
     mirrors the app's in-card rating in the bottom-right corner. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Card thumbs — decorative echo of the app's question rating ──────
   Static, non-interactive (rendered as <span>s, no JS): the marketing
   cards show the affordance the real app gives every question. Markup
   and geometry mirror css/app.css .card-feedback / .thumb-btn. Colors
   use site tokens (--muted / --pink), never RGB literals. */
.card-feedback {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}
.thumb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--muted);
}
.thumb-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Hero CTA row ──────────────────────────────────────────────── */

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}

/* App Store badge + stacked web button. The official Apple badge sits on top;
   the "Play on the web" button stacks beneath it (previously side-by-side) and
   is width-matched to the 245px badge so the two read as a deliberate vertical
   pair. Global box-sizing:border-box makes width:245px the button's outer width.
   The badge img is fixed at Apple's 245x82 to satisfy their badge guidelines. */
.appstore-badge {
  display: inline-block;
  line-height: 0;
}
.appstore-badge img {
  display: block;
  width: 245px;
  height: 82px;
  object-fit: contain;
}
.hero-cta .btn,
.cta-actions .btn {
  width: 245px;
}

.hero-microcopy {
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--t-secondary);
  letter-spacing: var(--tr-title);
}

/* ── Section blocks ─────────────────────────────────────────────── */

section {
  padding: 56px 0;
}

.section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 38px);
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: -0.005em;
}

.section-lede {
  color: var(--muted);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  font-size: var(--t-body);
  line-height: 1.6;
}

/* Editorial divider — a thin rule with the eyebrow reading centered
   on top. Used between major content blocks where a full section break
   would be too loud. */
.rule-eyebrow {
  text-align: center;
  margin: 0 auto 32px;
  position: relative;
}

.rule-eyebrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.rule-eyebrow .eyebrow {
  background: var(--bg);
  padding: 0 16px;
  position: relative;
  z-index: 1;
  margin: 0;
  display: inline-block;
}

/* ── Sample prompts — three on-brand card chips in a row ─────────── */

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.prompt {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.2s, border-color 0.2s;
}

.prompt:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
}

.prompt .card-topic {
  font-size: var(--t-caption);
}

.prompt .card-question {
  font-family: var(--font-serif);
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--text);
  flex: 1 1 auto;
  display: block;
}

/* Decorative thumbs sit bottom-right of each sample card, below the
   question (the question's flex:1 pushes them down). */
.prompt .card-feedback {
  align-self: flex-end;
  margin-top: -4px;
}

/* ── Feature grid — three how-it-plays steps ───────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

/* Hover keeps the --surface background (not --surface-elevated) so
   .feature p (--muted 15px) keeps its 4.4:1 contrast. Moving to
   --surface-elevated on hover would drop it to 3.6:1 — below AA for
   normal text. */
.feature:hover {
  border-color: var(--card-border);
  transform: translateY(-2px);
}

.feature-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-heading);
  color: var(--pink);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.feature h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-heading);
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.feature p {
  font-size: var(--t-secondary);
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Split block — image/visual on one side, copy on the other ── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split-copy h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 4.2vw, 32px);
  margin-bottom: 16px;
  text-align: left;
  letter-spacing: -0.005em;
}

.split-copy .eyebrow {
  margin-bottom: 12px;
}

.split-copy p {
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.7;
}

.split-copy p + p {
  margin-top: 12px;
}

/* Chat-bubble mock for the Play Solo section — two bubbles stacked
   at opposite edges, tight to the card stock feel. */
.chat-mock {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: var(--t-secondary);
  line-height: 1.55;
}

.chat-bubble.ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-serif);
  border-bottom-left-radius: 6px;
}

.chat-bubble.you {
  align-self: flex-end;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-bottom-right-radius: 6px;
}

.chat-mock .card-topic {
  font-size: var(--t-caption);
  margin-bottom: 4px;
}

/* ── Privacy callout — centered quiet block ──────────────────────── */

.privacy-callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.privacy-callout .eyebrow {
  margin-bottom: 12px;
}

.privacy-callout h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-title);
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.privacy-callout p {
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.65;
  max-width: 500px;
  margin: 0 auto;
}

/* ── Final CTA block ──────────────────────────────────────────── */

.cta-card {
  background: var(--surface-elevated);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 56px 32px;
  text-align: center;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cta-card h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 36px);
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}

.cta-card p {
  /* --text not --muted here: the cta-card sits on --surface-elevated
     (#332e27), where --muted would only hit 3.6:1 (AA for large text
     only). --text is 11.6:1 and reads as the emphasis this block
     wants anyway. */
  color: var(--text);
  font-size: var(--t-body);
  max-width: 460px;
  margin: 0 auto 32px;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────────── */

.site-footer {
  padding: 64px 24px 56px;
  text-align: center;
  margin-top: 32px;
  border-top: 1px solid var(--border);
}

.site-footer .brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-heading);
  color: var(--text);
  display: block;
  margin-bottom: 20px;
  letter-spacing: var(--tr-title);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 24px;
  font-size: var(--t-secondary);
}

.site-footer nav a {
  color: var(--muted);
}

.site-footer nav a:hover {
  color: var(--pink);
  opacity: 1;
}

.site-footer .contact {
  color: var(--muted);
  font-size: var(--t-secondary);
  margin-bottom: 8px;
}

.site-footer .copyright {
  color: var(--muted);
  font-size: var(--t-meta);
  margin-top: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Legal pages (privacy.html, terms.html)
   ══════════════════════════════════════════════════════════════════════════ */

.legal-header {
  padding: 56px 24px 32px;
  text-align: center;
}

.legal-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 44px);
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.legal-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-meta);
  color: var(--pink);
  letter-spacing: var(--tr-caps-lg);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}

.card-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 16px;
}

.card-panel h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-title);
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-panel h2 .icon {
  font-size: 0.85em;
  font-style: normal;
  color: var(--pink);
  /* Use serif italic for numerals/symbols, fall back to system for emoji */
}

.card-panel p,
.card-panel li {
  color: var(--text);
}

.effective-date {
  font-size: var(--t-secondary);
  color: var(--muted);
  margin-bottom: 18px;
}

.intro {
  font-size: var(--t-lede);
  line-height: 1.65;
  color: var(--text);
}

.highlight-box {
  background: var(--surface-elevated);
  border-left: 3px solid var(--pink);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 18px 0;
}

.highlight-box p {
  margin: 0;
  font-size: var(--t-secondary);
  line-height: 1.65;
  color: var(--text);
}

.toc {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.toc a {
  font-size: var(--t-secondary);
  font-weight: 400;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toc a:last-child {
  border-bottom: none;
}

.toc a::after {
  content: '↓';
  font-size: var(--t-meta);
  color: var(--muted);
}

.toc a:hover {
  color: var(--pink);
  opacity: 1;
}

.toc a:hover::after {
  color: var(--pink);
}

.disclaimer {
  margin-top: 20px;
  font-size: var(--t-secondary);
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .split-copy h2 { text-align: center; }
  .split-copy .eyebrow { text-align: center; }
}

@media (max-width: 720px) {
  .feature-grid,
  .prompt-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card-panel {
    padding: 26px 24px;
  }

  .legal-header {
    padding: 40px 24px 24px;
  }

  .hero {
    padding: 32px 24px 48px;
  }

  section {
    padding: 44px 0;
  }

  .cta-card {
    padding: 40px 24px;
  }

  .privacy-callout {
    padding: 32px 24px;
  }
}

@media (max-width: 420px) {
  .card-stage {
    width: 82vw;
  }
}

/* Honor the user's system-level motion preference — matches the app's
   A4 reduced-motion block. The floating hero card stops, hover lifts
   collapse to a no-op so nothing twitches on scroll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card-front {
    animation: none;
    transform: translateY(-4px);
  }
  .prompt:hover,
  .feature:hover {
    transform: none;
  }
}

/* ── QR share (floating top-right button + scan modal) ─────────────────────
   In-person install share: tap the corner icon, show the QR, they scan it.
   Scan target for the web panel is play.getrealgame.com (see index.html note). The QR
   itself is a static inline SVG; the frame is always white with dark modules
   so it scans regardless of any theming. */
.qr-share-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  color: var(--pink);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.qr-share-btn:hover { border-color: var(--pink); transform: translateY(-1px); }
.qr-share-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.qr-share-btn svg { width: 22px; height: 22px; }

.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.qr-modal[hidden] { display: none; }
.qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.qr-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 28px 28px 22px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.qr-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}
.qr-modal-close:hover { color: var(--text); }
.qr-modal-title { margin: 0 0 16px; font-size: 18px; color: var(--text); }

/* Segmented two-mode toggle (iOS app / Play on web) above the QR. The active
   tab fills pink to mirror .btn:hover; the inactive tab stays a quiet ghost. */
.qr-tabs {
  display: inline-flex;
  margin: 0 auto 18px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
.qr-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tr-title);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.qr-tab:hover { color: var(--text); }
.qr-tab.is-active { background: var(--pink); color: var(--bg); }
.qr-tab:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.qr-panel[hidden] { display: none; }
.qr-frame {
  width: 240px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  color: #1a1612;
  border-radius: 12px;
  padding: 16px;
}
.qr-frame .qr-svg { display: block; width: 100%; height: auto; }
.qr-modal-url { margin: 16px 0 4px; font-size: 15px; font-weight: 600; color: var(--pink); word-break: break-all; }
.qr-modal-hint { margin: 0; font-size: 13px; color: var(--muted); }
body.qr-open { overflow: hidden; }