/* ============================================================================
 * Plyvona — Landing page styles (spec 010)
 * ----------------------------------------------------------------------------
 * Depends on: tokens.css + base.css (loaded first). Landing-only patterns.
 * v2.1 Pop Behavioral. Card discipline: cards/tiles are reserved for
 * INTERACTIVE surfaces (game tiles, pricing tiers, the inline demo, FAQ
 * disclosures). Everything else groups with spacing + dividers + type.
 * ========================================================================= */

/* ── Landing top bar (extends base .topbar) ───────────────────────────── */
.lg-nav { gap: var(--space-4); }
.lg-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.lg-nav__link {
  font-family: var(--font-body);
  font-size: var(--fs-ui-sm);
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
.lg-nav__link:hover { color: var(--brand); opacity: 1; }
@media (max-width: 720px) {
  .lg-nav__links { display: none; }
}

/* ── Section scaffolding ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; } /* smooth in-page anchor jumps (reduced-motion overridden in tokens.css) */
.lg-section {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
  /* Anchor targets must clear the sticky top bar so the heading lands fully
     below it — not sliced or mid-viewport. */
  scroll-margin-top: 88px;
}
.lg-section--narrow { max-width: var(--container-base); }
.lg-section--tight { padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(24px, 4vw, 40px); }
.lg-section + .lg-section { padding-top: 0; }

.lg-section__head { max-width: 640px; margin-bottom: var(--space-8); }
.lg-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lg-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  margin-top: var(--space-3);
}
.lg-section__title em { font-style: italic; color: var(--brand); }
.lg-section__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-muted);
  margin-top: var(--space-4);
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.lg-hero {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 48px) clamp(40px, 7vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 920px) {
  .lg-hero { grid-template-columns: 1.05fr 0.95fr; }
}
.lg-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-5);
}
.lg-hero__title em { font-style: italic; color: var(--brand); }
.lg-hero__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-muted);
  max-width: 520px;
}
.lg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.lg-hero__microcopy {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  margin-top: var(--space-4);
}
.lg-hero__trust {
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  max-width: 460px;
}

/* ── INLINE BALLOONS DEMO (interactive → card chrome OK) ──────────────── */
.demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.demo__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.demo__counter {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--brand);
  font-feature-settings: "tnum" 1;
}
.demo__screen { display: none; flex-direction: column; gap: var(--space-4); }
.demo__screen.is-active { display: flex; }

.demo__lead { font-size: var(--fs-body); line-height: var(--lh-ui); color: var(--ink-2); }
.demo__hint { font-size: var(--fs-caption); color: var(--ink-faint); }
.demo__playhint { font-size: var(--fs-body); line-height: var(--lh-ui); color: var(--ink-muted); margin: -2px 0 2px; }

/* stage (balloon) */
.demo__stage {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--space-4);
}
.demo__balloon-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.demo__balloon { color: var(--brand); transition: transform 0.18s var(--ease-out); transform-origin: center bottom; }
.demo__balloon .body { fill: currentColor; }
.demo__balloon .knot { fill: var(--brand-deep); }
.demo__balloon .string { stroke: var(--ink-faint); stroke-width: 1.5; }
.demo__balloon.is-pop { animation: demoPop 0.3s var(--ease) forwards; }
@keyframes demoPop { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(1.16); } 100% { opacity: 0; transform: scale(0.4); } }
.demo__online {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--brand);
  font-feature-settings: "tnum" 1;
}
/* Pump-count badge (matches the real game's "N pumps"). A label, not a control. */
.demo__pumps {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--ink);
  color: var(--bg);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}
.demo__flash {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s var(--ease);
}
.demo__flash.is-shown { opacity: 1; background: color-mix(in oklab, var(--bg) 68%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
/* A status moment, not a control — no box/border/shadow so it never reads as a button. */
.demo__flash-word {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-h1);
}
.demo__flash.is-pop { color: var(--danger); }
.demo__flash.is-bank { color: var(--success); }

/* tension meter */
.demo__meter-head {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.demo__meter-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.demo__meter-fill { height: 100%; width: 0%; background: var(--brand); border-radius: 2px; transition: width 0.18s var(--ease), background 0.18s var(--ease); }
.demo__meter-fill.is-high { background: var(--danger); }

/* stats row (non-interactive — inline, no cards) */
.demo__stats { display: flex; gap: var(--space-8); }
.demo__stat { display: flex; flex-direction: column; gap: 2px; }
.demo__stat-label { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); }
.demo__stat-val { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink); font-feature-settings: "tnum" 1; }
.demo__stat-val--banked { color: var(--success); }

/* action buttons */
.demo__btns { display: flex; gap: var(--space-3); }
.demo__btn {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  transition: background var(--t-fast) var(--ease), transform 0.08s var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
  touch-action: manipulation;
}
.demo__btn:active { transform: scale(0.97); }
.demo__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.demo__btn--pump { background: var(--brand); border: 1px solid var(--brand); color: var(--ink-on-brand); }
.demo__btn--pump:hover { background: var(--brand-2); border-color: var(--brand-2); }
.demo__btn--bank { background: transparent; border: 1px solid var(--border); color: var(--ink); }
.demo__btn--bank:hover { border-color: var(--success); color: var(--success); }
.demo__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.demo__done-score {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--brand);
}
.demo__done-score em { font-style: italic; }
.demo__done-msg { font-size: var(--fs-body); line-height: var(--lh-lead); color: var(--ink-muted); }
.demo__done .btn { width: 100%; }

/* ── PATTERN REVEAL (non-interactive — no card) ───────────────────────── */
.lg-reveal {
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.lg-reveal__text {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
}
.lg-reveal__text em { font-style: italic; color: var(--brand); }

/* ── HOW IT WORKS (3 steps — no cards, numbered) ──────────────────────── */
.lg-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 720px) { .lg-steps { grid-template-columns: repeat(3, 1fr); } }
.lg-step { display: flex; flex-direction: column; gap: var(--space-3); }
.lg-step__num {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1;
}
.lg-step__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lg-step__body { font-size: var(--fs-body); line-height: var(--lh-lead); color: var(--ink-muted); }

/* ── 12 GAMES GRID (interactive tiles → card chrome OK) ───────────────── */
.lg-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 720px) { .lg-games { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .lg-games { grid-template-columns: repeat(4, 1fr); } }

.lg-game {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lg-game:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  opacity: 1;
}
.lg-game:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lg-thumb {
  height: 96px;
  display: flex; align-items: center; justify-content: center;
}
.lg-thumb svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base) var(--ease); }
.lg-game:hover .lg-thumb svg { transform: scale(1.08); }
.lg-game[data-tint="light"] .lg-thumb { background: linear-gradient(135deg, #FBFAFE, #ECE8FB); color: #8B7FE0; }
.lg-game[data-tint="mid"]   .lg-thumb { background: linear-gradient(135deg, #F7F5FE, #E4DFF6); color: #5B4FBD; }
.lg-game[data-tint="deep"]  .lg-thumb { background: linear-gradient(135deg, #F4F1FB, #DED7F1); color: #4A3FA0; }
.lg-game__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.lg-game__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); color: var(--ink); letter-spacing: -0.01em; }
.lg-game__desc { font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--ink-muted); }
/* "What you'll do" line — the expected task, distinct from the trait desc above. */
.lg-game__task {
  display: flex;
  gap: 6px;
  font-size: var(--fs-caption);
  line-height: var(--lh-ui);
  color: var(--ink-2);
  font-weight: 500;
  flex: 1;
}
.lg-game__task::before { content: none; }
.lg-game__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lg-game__tag {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-muted);
  border: 1px solid var(--border);
}

/* ── WHY IT WORKS (non-interactive — dividers, no cards) ──────────────── */
.lg-why {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) { .lg-why { grid-template-columns: repeat(3, 1fr); } }
.lg-why__item { padding-top: var(--space-4); border-top: 2px solid var(--brand); }
.lg-why__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.lg-why__body { font-size: var(--fs-body); line-height: var(--lh-lead); color: var(--ink-muted); }

/* ── TESTIMONIALS (non-interactive — type + dividers, no cards) ───────── */
.lg-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 720px) { .lg-quotes { grid-template-columns: repeat(3, 1fr); } }
.lg-quote { display: flex; flex-direction: column; gap: var(--space-4); }
.lg-quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--ink);
}
.lg-quote__by {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.lg-quote__by strong { color: var(--ink); font-weight: 600; }

/* ── PRICING (interactive tiers → card chrome OK) ─────────────────────── */
.lg-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 720px) { .lg-pricing { grid-template-columns: repeat(2, 1fr); } }
.lg-tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lg-tier--featured { border-color: var(--brand); box-shadow: var(--shadow-md); }
.lg-tier__name {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lg-tier__price {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--ink);
}
.lg-tier__price small { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; color: var(--ink-muted); }
.lg-tier__note { font-size: var(--fs-caption); color: var(--ink-faint); }
.lg-tier__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.lg-tier__features li { display: flex; gap: var(--space-2); font-size: var(--fs-body); color: var(--ink-2); line-height: var(--lh-ui); }
.lg-tier__features li::before { content: '✓'; color: var(--brand); font-weight: 700; flex-shrink: 0; }
.lg-tier .btn { margin-top: auto; }
/* Card discipline + a11y: sunset is a GRAPHIC accent only (it fails text
   contrast on cream — DESIGN_SYSTEM § Palette). The pill border + soft fill
   carry the warmth; the label text uses --ink (the documented "dark ink on
   accent" pattern) so it clears WCAG AA in both themes. */
.lg-tier__soon {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(var(--sunset-rgb), 0.16);
  border: 1px solid rgba(var(--sunset-rgb), 0.55);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* ── FAQ (native disclosure — interactive, restrained) ────────────────── */
.lg-faq { max-width: var(--container-base); margin: 0 auto; }
.lg-faq__item { border-bottom: 1px solid var(--border); }
.lg-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lg-faq__item summary::-webkit-details-marker { display: none; }
.lg-faq__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
  transition: transform var(--t-base) var(--ease);
}
.lg-faq__icon::before, .lg-faq__icon::after {
  content: '';
  position: absolute;
  background: var(--brand);
  border-radius: 1px;
}
.lg-faq__icon::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.lg-faq__icon::after { top: 2px; left: 9px; width: 2px; height: 16px; transition: opacity var(--t-base) var(--ease); }
.lg-faq__item[open] .lg-faq__icon::after { opacity: 0; }
.lg-faq__item summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }
.lg-faq__answer {
  padding: 0 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-lead);
  color: var(--ink-muted);
  max-width: 680px;
}

/* ── FINAL CTA (band) ─────────────────────────────────────────────────── */
.lg-final {
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.lg-final__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
}
.lg-final__title em { font-style: italic; color: var(--brand); }
.lg-final__sub { font-size: var(--fs-lead); color: var(--ink-muted); margin-top: var(--space-4); }
.lg-final__actions { margin-top: var(--space-7); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.lg-final__microcopy { font-size: var(--fs-caption); color: var(--ink-muted); margin-top: var(--space-4); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.lg-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.lg-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.lg-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.lg-footer__brand {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: var(--ls-display);
  color: var(--brand);
  text-decoration: none;
}
.lg-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.lg-footer__link {
  font-family: var(--font-body);
  font-size: var(--fs-ui-sm);
  color: var(--ink-muted);
  text-decoration: none;
}
.lg-footer__link:hover { color: var(--brand); opacity: 1; }
.lg-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.lg-footer__follow { font-family: var(--font-body); font-size: var(--fs-ui-sm); color: var(--ink-muted); }
.lg-footer__follow strong { color: var(--ink); font-weight: 600; }
.lg-footer__icons { display: flex; gap: var(--space-2); }
/* Official brand marks, recoloured to the brand violet (single-colour glyphs). */
.lg-footer__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--brand);
  text-decoration: none;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.lg-footer__icon:hover { color: var(--brand-deep); border-color: var(--brand); background: var(--brand-soft); opacity: 1; }
.lg-footer__icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lg-footer__icon svg { width: 17px; height: 17px; fill: currentColor; }
.lg-footer__legal {
  font-size: var(--fs-caption);
  line-height: var(--lh-lead);
  color: var(--ink-faint);
  max-width: 720px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}