/* Easy TCG Lister — landing page
 * Supabase × Anduril aesthetic. Pinned three.js hero with HUD spec callouts.
 * Tokens come from glass.css. Light default, dark + auto via [data-theme].
 */

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

html, body {
  background: var(--bg-1);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body.landing {
  background: var(--bg-1);
  min-height: 100vh;
}

/* =====================================================================
 * Top navigation
 * ===================================================================== */
.landing-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.6rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.15s, border-color 0.15s;
}
/* Landing nav (.nav-onhero — only the landing nav carries this class; the
   marketing-shell pages keep the plain solid nav). DARK glass by default, over
   the dark hero, and borderless so it blends into the hero. JS adds .nav-light
   once the user scrolls into the light body, flipping it to a light frosted nav
   (Notion-style). .landing-nav.nav-onhero (0-2-0) beats base .landing-nav. */
.landing-nav.nav-onhero {
  background: rgba(10, 13, 25, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.nav-onhero .landing-logo,
.nav-onhero .landing-nav-links a:not(.btn) {
  color: rgba(232, 236, 255, 0.86);
  transition: color 0.18s;
}
.nav-onhero .landing-nav-links a:not(.btn):hover { color: #ffffff; }
/* Scrolled into the light body → light frosted nav with dark text + a hairline. */
.landing-nav.nav-onhero.nav-light {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--glass-border);
}
.nav-onhero.nav-light .landing-logo,
.nav-onhero.nav-light .landing-nav-links a:not(.btn) { color: var(--text); }
.nav-onhero.nav-light .landing-nav-links a:not(.btn):hover { color: var(--accent); }
/* Logo icon: WHITE over the dark hero nav, fading to BLACK once the nav flips
   light on scroll. The .brand-logo SVG is white by default — invert(0) keeps it
   white, invert(1) makes it black; the transition fades between them. Overrides
   the global [data-theme="light"] .brand-logo invert. */
.nav-onhero .brand-logo {
  filter: invert(0);
  transition: filter 0.25s ease;
}
.nav-onhero.nav-light .brand-logo {
  filter: invert(1);
}
.landing-logo {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0;
}
.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.landing-nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  transition: color 0.12s;
}
.landing-nav-links a:hover { color: var(--text); }

.landing-nav-links a.btn {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  font-weight: 500;
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: background 0.12s, border-color 0.12s;
}
.landing-nav-links a.btn:hover {
  color: #FFFFFF;
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* (May 2026: removed #landing-canvas rules — the three.js scene was
   deleted in favor of a static hero with a subtle dot-grid backdrop,
   shipped as .hero-bg below.) */

/* Content wrapper */
.landing-content {
  position: relative;
  z-index: 2;
  /* No top padding: the hero block must reach the very top (y=0) so its dark
     backdrop sits behind the fixed, transparent nav. Without this the body's
     (now light) background showed as a white strip behind the glass nav. The
     hero's own padding-top clears the nav for the headline. */
}

/* =====================================================================
 * HERO
 * ===================================================================== */

/* Hero + screenshot + supported-TCGs share ONE themed dark backdrop (the
   workflow illustration), spanning all three as a single dark scene — like the
   reference mock. The image fills the full width at the top so its decorations
   frame the content; the matched navy fill (#10131f = the image's bottom edge)
   continues seamlessly below it so the lower content sits on one dark surface.
   The screenshot floats on top with an indigo glow. */
.hero-block {
  position: relative;
  background-color: #10131f;
  background-image: url("/static/landing/tcg-ui-scaled-3.jpg");
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.hero-block .ui-preview { background: transparent; }
/* (The hero screenshot's glow now lives on .hero-block .browser-frame — see the
   browser-chrome block in the UI-screenshot section below.) */
@media (max-width: 720px) {
  /* The wide illustration doesn't read at phone widths — fall back to the solid
     dark surface so the hero stays clean and the text stays legible. */
  .hero-block {
    background-image: none;
    background-color: #10131f;
  }
  .hero-block .browser-frame {
    box-shadow:
      0 0 0 1px rgba(129, 140, 248, 0.45),
      0 0 18px 2px rgba(129, 140, 248, 0.60),
      0 0 60px 8px rgba(99, 102, 241, 0.40),
      0 16px 44px rgba(0, 0, 0, 0.5);
  }
}

.hero {
  position: relative;
  /* Was 100vh — a full-viewport hero pushed the product screenshot a whole
     screen below the CTAs. The screenshot now follows immediately, so the
     hero is sized to its content (generous padding still gives it presence). */
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Was 6rem top — too much air between the fixed nav and the eyebrow. */
  padding: 4.5rem 1.5rem 2rem;
  text-align: center;
  /* No background here — the themed image now lives on .hero-block so it spans
     the header AND the screenshot below; .hero is transparent over it. */
}
/* The backdrop image replaces the old dot-grid texture. */
.hero .hero-bg { display: none; }
/* The hero sits on a DARK image in BOTH light and dark themes, so its text and
   the outline button are forced light regardless of the active theme tokens.
   The .landing prefix lifts specificity above the base .hero/.landing rules so
   these win no matter their source order. */
.landing .hero h1 { color: #ffffff; }
.landing .hero .brand-text { color: #a5b4fc; }
.landing .hero .hud-eyebrow { color: rgba(226, 232, 255, 0.74); }
.landing .hero .subhead { color: rgba(226, 232, 255, 0.82); }
.landing .hero a.btn.secondary {
  color: #f5f7ff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}
.landing .hero a.btn.secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
}
.hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
}
.hud-eyebrow {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--muted);
}
.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: 1.5rem;
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}
.brand-text { color: var(--accent); }

.hero .subhead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--muted);
  max-width: 38rem;
  margin: 0 auto 2.25rem;
  line-height: 1.55;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 3rem;
}
/* In the hero the product screenshot follows immediately, so drop the
   strip-era trailing gap and let the screenshot sit close under the CTAs. */
.hero .cta-row { margin-bottom: 0; }

/* HUD readout strip */
.hud-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: 1rem 0;
}
.hud-strip > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  border-right: 1px solid var(--glass-border);
}
.hud-strip > div:last-child { border-right: 0; }
.hud-stat-sm {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.hud-stat-sm .unit {
  font-size: 0.7em;
  color: var(--muted);
  margin-left: 0.15rem;
}

/* =====================================================================
 * PIPELINE STAGES
 * ===================================================================== */
/* Steps section. Pre-May-2026 each step was 100vh tall with a narrow
   left-aligned callout, because the three.js canvas filled the rest of
   the viewport behind it. With the canvas gone, that layout left a
   huge empty right column. Now each step is a content-section-wide
   2-column grid: text on one side, illustration slot on the other.
   Sides alternate per step for visual rhythm — Steps 01 and 03 put
   text left / illustration right; Steps 02 and 04 reverse. */
/* =====================================================================
 * UI SCREENSHOT — between hero and Step 01.
 * Minimal social-proof beat. The image carries the moment; no eyebrow
 * or headline to compete with the surrounding sections. Width caps at
 * 1100px (matches .stage content rhythm) and scales fluidly below.
 * ===================================================================== */
.ui-preview {
  position: relative;
  /* Sits tight under the hero CTAs (smaller top); the supported-TCGs band now
     follows close below (small bottom pad). */
  padding: 2.5rem 1.5rem 2rem;
  background: var(--bg-1);
}
.ui-preview-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ui-preview-inner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Browser-window chrome around the product screenshots =====
   A SaaS-style frame: macOS traffic-light dots + a faux address bar on top,
   so the screenshot reads as the live app running in a browser. The frame owns
   the border, rounding, and the glow (the image is clipped inside it). */
.browser-frame {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--glass-border-strong);
  overflow: hidden;
  background: #0e1120;
  /* Clear indigo perimeter glow (glowing edge + tight halo + soft bloom). */
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.30),
    0 0 24px 2px rgba(99, 102, 241, 0.40),
    0 0 70px 10px rgba(99, 102, 241, 0.28),
    0 22px 55px rgba(0, 0, 0, 0.18);
}
/* (.browser-bar / .browser-dots removed — the screenshot now bakes in its own
   browser chrome, so the code-drawn dots bar would double the browser top.) */
.browser-frame img,
.browser-frame video {
  display: block;
  width: 100%;
  height: auto;
}
/* Second product clip: its own beat between the manifesto and the how-it-works
   steps. Transparent so it flows with the body; comfortable vertical rhythm. */
.ui-preview-secondary {
  background: transparent;
  padding: 0.5rem 1.5rem 3.5rem;
}
/* Second clip: drop the indigo glow — just a soft neutral shadow for depth.
   (The hero's .hero-block .browser-frame keeps its glow.) */
.ui-preview-secondary .browser-frame {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}
/* Hero screenshot frame: stronger indigo glow on the dark backdrop. */
.hero-block .browser-frame {
  border-color: rgba(129, 140, 248, 0.60);
  /* Strong, clear indigo glow hugging the whole perimeter: a glowing 1px edge,
     a tight bright halo, then medium + large blooms, plus a depth shadow. */
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.45),
    0 0 26px 2px rgba(129, 140, 248, 0.65),
    0 0 80px 10px rgba(99, 102, 241, 0.50),
    0 0 170px 30px rgba(99, 102, 241, 0.32),
    0 30px 80px rgba(0, 0, 0, 0.55);
}

.stage {
  position: relative;
  padding: 4rem 1.5rem;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-border);
}
[data-theme="dark"] .stage {
  background: var(--bg-0);
}
.stage-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  /* Text column gets slightly more room than the visual to keep body
     copy comfortable at narrower widths. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
/* Alternate sides — even-numbered steps put the visual on the LEFT */
.stage[data-stage="2"] .stage-grid,
.stage[data-stage="4"] .stage-grid {
  direction: rtl;
}
.stage[data-stage="2"] .stage-grid > *,
.stage[data-stage="4"] .stage-grid > * {
  direction: ltr;
}
/* Stack only on actual mobile/small-tablet widths. The previous 880px
   breakpoint was too eager — collapsed the 2-col layout on any window
   under desktop full-width. Threshold dropped to 640px so anything
   roughly iPad-portrait or wider stays side-by-side. */
@media (max-width: 640px) {
  .stage-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .stage[data-stage="2"] .stage-grid,
  .stage[data-stage="4"] .stage-grid {
    direction: ltr;
  }
}

.stage .stage-text {
  padding: 0;
  background: transparent;
  border: 0;
}
.stage .hud-callout {
  position: relative;
  z-index: 3;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Illustration slot — a clean tile with a subtle indigo-tinted backdrop
   that matches the website's hero-bg pattern. SVGs centered, sized
   responsively. */
.stage-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 4:3 to match the shipped step-01..step-04 PNGs (1448 × 1086).
     Larger cap than the old square SVGs (360→440px) because the
     PNGs have more horizontal real estate to show off. */
  aspect-ratio: 4 / 3;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  /* No plate, no border, no padding — pure art sitting directly
     on the page background. PNGs are transparent so the page
     background shows through any whitespace. */
  padding: 0;
  background: transparent;
  border: 0;
}
.stage-visual > svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Theme-aware stroke color via currentColor for any remaining SVGs.
   The shipped landing currently uses PNGs (.step-art below) — this
   rule stays in case we re-introduce SVG steps later. */
.step-svg {
  color: var(--text);
}
/* Raster step illustrations (step-01..step-04 PNGs). Fill the
   stage-visual container; preserve aspect via `object-fit: contain`
   so any sub-4:3 image still renders without cropping. */
.stage-visual > .step-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Dark-theme legibility — the shipped PNGs are pure-black line art on
   a transparent background (designed for the white default theme).
   Against the dark surface they're nearly invisible. `filter: invert(1)`
   flips pure black to pure white losslessly and only affects opaque
   pixels (transparent stays transparent), giving us white line art on
   the dark surface for free without shipping a second image set. */
[data-theme="dark"] .stage-visual > .step-art {
  filter: invert(1);
}

.hud-callout .hud-rule {
  border: none;
  border-top: 1px solid var(--accent);
  width: 48px;
  margin: 0 0 1rem 0;
}
.hud-callout > .hud-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}
.hud-callout h2 {
  /* Bigger + bolder so each step reads as a clear headline, not a subhead. */
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  line-height: 1.12;
  color: var(--text);
}
.hud-callout p {
  color: var(--text-2);
  /* Larger body copy — the old 0.96rem read too small/nuanced in the steps. */
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.stage-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}
.stage-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* =====================================================================
 * CONTENT SECTIONS (below the pipeline)
 * ===================================================================== */
.content-section {
  position: relative;
  z-index: 4;
  background: var(--bg-1);
  padding: 6rem 1.5rem 5rem;
  border-top: 1px solid var(--glass-border);
}
.content-section > .hud-label {
  display: block;
  text-align: center;
  margin-bottom: 0.6rem;
  color: var(--accent);
}
.content-section h2 {
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 0.8rem;
  line-height: 1.1;
  color: var(--text);
}
.content-section .subhead {
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  max-width: 38rem;
  margin: 0 auto 3rem;
  line-height: 1.55;
}

/* ===== Highlights ===== */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.highlight-tile {
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  text-align: left;
  transition: border-color 0.12s;
}
.highlight-tile:hover { border-color: var(--glass-border-strong); }
.highlight-tile .hud-label {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--muted);
}
.highlight-tile.featured {
  border-color: var(--accent);
  background: var(--brand-50);
}
[data-theme="dark"] .highlight-tile.featured {
  background: var(--bg-1);
}
.highlight-tile.featured .hud-label { color: var(--accent); }
.highlight-tile .big-stat {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 1rem;
}
.highlight-tile .big-stat .unit {
  font-size: 0.45em;
  color: var(--muted);
  margin-left: 0.2rem;
}
.highlight-tile h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.highlight-tile p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ===== Pricing tiles ===== */
.landing-pricing {
  padding: 6rem 1.5rem;
  /* Continue the grey band down from the benefits section through pricing +
     the comparison chart; no top border so it's one continuous grey area. */
  background: #f3f4f6;
  border-top: none;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.pricing-tile {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: border-color 0.12s;
}
.pricing-tile:hover { border-color: var(--glass-border-strong); }
.pricing-tile.featured {
  border: 2px solid var(--accent);
  background: var(--brand-50);
}
[data-theme="dark"] .pricing-tile.featured {
  background: var(--bg-1);
}
.pricing-tile .badge-popular {
  position: absolute;
  top: -10px; right: 16px;
  padding: 0.2rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--accent);
  border-radius: var(--radius-sm);
}
.pricing-tile h3 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.pricing-tile .price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.pricing-tile .price .big {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
.pricing-tile .price .period {
  color: var(--muted);
  font-size: 0.82rem;
}
.pricing-tile .features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  width: 100%;
  font-size: 0.88rem;
  color: var(--text-2);
}
.pricing-tile .features-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--glass-border);
  line-height: 1.4;
}
.pricing-tile .features-list li:last-child { border-bottom: none; }
.pricing-tile .features-list li strong { color: var(--text); }

.pricing-tile .btn {
  display: block;
  text-align: center;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: auto;
}
.pricing-tile .btn.primary {
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid var(--accent);
}
.pricing-tile .btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.pricing-tile .btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border-strong);
}
.pricing-tile .btn.secondary:hover {
  background: var(--glass-3);
  border-color: var(--muted-2);
}

/* ===== Infrastructure section ===== */
.infrastructure { padding: 6rem 1.5rem; }
.infra-list {
  list-style: none;
  max-width: 760px;
  margin: 2rem auto 0;
  padding: 0;
  border-top: 1px solid var(--glass-border);
}
.infra-list li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 1.5rem;
  padding: 1.1rem 0.5rem;
  border-bottom: 1px solid var(--glass-border);
  align-items: baseline;
}
.infra-list .tech {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0;
}
.infra-list .use {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* ===== Final CTA ===== */
.final-cta {
  position: relative;
  z-index: 4;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-border);
  padding: 6rem 1.5rem 6rem;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text);
}
.final-cta p {
  color: var(--muted);
  max-width: 38rem;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* ===== Footer ===== */
.landing-footer {
  position: relative;
  z-index: 4;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-border);
  padding: 2.5rem 1.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.landing-footer .footer-links { display: flex; gap: 1rem; }
.landing-footer a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s;
}
.landing-footer a:hover { color: var(--text); }

/* =====================================================================
 * Landing-specific button overrides
 * ===================================================================== */
.landing .btn.primary, .landing .btn.secondary {
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* Center the label even when the button is full-width (pricing-tile buttons,
     and the hero CTAs on mobile) — otherwise the flex item sits left. */
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.landing .btn.primary {
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid var(--accent);
}
.landing .btn.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.landing .btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border-strong);
}
.landing .btn.secondary:hover {
  background: var(--glass-3);
  border-color: var(--muted-2);
}

/* =====================================================================
 * Tablet — center the card text (benefit cards + pricing tiles). Left-aligned
 * reads off-balance once the cards stack to 1–2 columns. (.landing prefix
 * lifts specificity above the base left-aligned rules regardless of order.)
 * ===================================================================== */
@media (max-width: 900px) {
  .landing .benefit-card { text-align: center; }
  .landing .pricing-tile { align-items: center; text-align: center; }
}

/* =====================================================================
 * Mobile (<720px)
 * ===================================================================== */
@media (max-width: 720px) {
  .landing-nav { padding: 0.7rem 1rem; }
  .landing-nav-links { gap: 0.75rem; }
  .landing-nav-links a:not(.btn) { display: none; }
  .landing-nav-links a:nth-last-child(2) { display: inline; }

  .hero { padding: 6rem 1rem 2rem; min-height: auto; }
  .hud-strip {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
  }
  .hud-strip > div:nth-child(2n) { border-right: 0; }
  .hud-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--glass-border); padding-bottom: 1rem; }
  .hud-strip > div:nth-child(n+3) { padding-top: 1rem; }

  .stage {
    min-height: 80vh;
    padding: 3rem 1rem;
  }
  .stage .hud-callout {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding: 1.5rem;
  }
  .stage-stats { grid-template-columns: 1fr 1fr; }

  .content-section { padding: 4rem 1rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .infra-list li { grid-template-columns: 1fr; gap: 0.3rem; }
  .final-cta { padding: 4rem 1rem; }
}

/* =====================================================================
 * Very narrow phones (<480px) — tighten further. iPhone SE is 375px wide;
 * we want everything to still read well without horizontal scroll.
 * ===================================================================== */
@media (max-width: 480px) {
  .hero { padding: 5rem 0.75rem 2rem; min-height: auto; }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero .subhead { font-size: 0.95rem; }
  .cta-row { flex-direction: column; gap: 0.6rem; }
  .cta-row .btn { width: 100%; text-align: center; }

  /* Stack hud-strip as 4 single rows so each stat reads cleanly. */
  .hud-strip {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  .hud-strip > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--glass-border);
    padding: 0.85rem 0;
  }
  .hud-strip > div:last-child { border-bottom: 0; }

  .stage { padding: 2.5rem 0.75rem; }
  .stage .hud-callout { padding: 1rem; }
  .stage-stats { grid-template-columns: 1fr; gap: 0.6rem; }

  .content-section { padding: 3rem 0.75rem; }
  .final-cta { padding: 3rem 0.75rem; }
  .final-cta h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  .landing-nav { padding: 0.6rem 0.75rem; }
  .landing-logo { font-size: 0.9rem; }
  .landing-logo span { display: none; }   /* icon-only on tiny screens */

  /* Tighten the TCG pills strip. */
  .hero-tcg-strip { gap: 0.4rem; }
  .tcg-pill { font-size: 0.72rem; padding: 0.25rem 0.55rem; }

  /* Marketing footer wraps nicely. */
  .marketing-footer a { display: inline-block; margin: 0.25rem 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; }
}

/* =====================================================================
 * Post-2026-05 landing additions
 *   - .hero-tcg-strip / .tcg-pill   : supported-games chips under hero
 *   - .muted-fineprint              : "Manual upload also available" note
 *   - .manifesto                     : big problem→solution hook after hero
 *   - .compare-plans-link           : centered link under pricing tiles
 * ===================================================================== */

/* Hero TCG-names strip. Lives where the old hud-strip used to be — same
   horizontal-flow layout but pills instead of stat readouts. */
.hero-tcg-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  /* The strip now lives in its own full-width .tcg-section band (not the old
     900px hero column), so it just centers normally within a comfortable
     max-width. The previous viewport-width breakout (width:95vw +
     margin-left:50% + translateX) mis-centered in this context and caused
     horizontal scrolling on phones — removed. Rows flex-wrap to more lines
     as the screen narrows. */
  /* Wide enough to hold all 10 long-named pills on a single line (so the band
     reads as exactly two rows on desktop instead of wrapping a stray pill). */
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}
/* Two stacked rows (see landing.html). Each row centers its own pills and
   flex-wraps independently, so the strip stays a clean 2-row grid on
   desktop and reflows gracefully when the viewport gets narrow. */
.tcg-pills {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.tcg-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}
.tcg-pill {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.26rem 0.5rem;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--glass-2);
  border: 1px solid var(--glass-border-strong);
  color: var(--text-2);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.tcg-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--brand-50);
}
.tcg-pill-more {
  font-style: italic;
  color: var(--muted);
  background: transparent;
  border-color: var(--glass-border);
}

/* Supported-TCGs band. The pill strip used to live inside the hero; it's now
   promoted to its own quiet band directly under the product screenshot, so
   "the games you sell" reads as a distinct beat in the page flow. Same pills,
   same tokens — just a section wrapper to match the .manifesto/.benefits
   band rhythm (shared bg, 1px hairline top + bottom). */
.tcg-section {
  position: relative;
  z-index: 4;
  /* Now lives INSIDE .hero-block, over the themed dark backdrop — transparent
     so the backdrop shows through (no solid band, no separating borders). */
  background: transparent;
  padding: 2.25rem 1.5rem 3rem;
  text-align: center;
}
/* The supported-TCGs band sits on the dark hero backdrop in BOTH themes, so its
   label + pills use a dark-surface treatment regardless of the active theme. */
.hero-block .tcg-section .hud-label { color: rgba(226, 232, 255, 0.74); }
.hero-block .tcg-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(232, 236, 255, 0.90);
}
.hero-block .tcg-pill:hover {
  border-color: var(--accent);
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.18);
}
.hero-block .tcg-pill-more {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(226, 232, 255, 0.60);
}
/* In its own section the strip no longer needs the hero's top margin — the
   section padding owns the vertical spacing on every breakpoint. */
.tcg-section .hero-tcg-strip { margin-top: 0; }
@media (max-width: 720px) {
  .tcg-section { padding: 1.75rem 1rem; }
}

/* The "Manual photo upload" note under Step 01 — quieter than the body
   copy, italicized, slightly indented. */
.muted-fineprint {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin-top: -0.4rem;
}

/* "Manifesto" — the big, plain-language problem → solution hook that sits
   directly under the hero, before the product screenshot. Deliberately
   larger and bolder than the .content-section rhythm: oversized headlines,
   generous vertical space, a single centered column, no cards/boxes. The 4
   "stage" steps lower down cover HOW it works in technical terms; this is
   the WHY, in layman's terms, for a first-time visitor. (Replaced the
   smaller .why-use-this cards that used to sit above the pricing tiles.) */
.manifesto {
  position: relative;
  z-index: 4;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-border);
  padding: 7rem 1.5rem;
}
/* Centered editorial statement: Problem block above Solution block, a thin
   divider between, all copy centered. The product screenshot moved to its own
   beat above the All-In-One band, so this section is text-only now. */
.manifesto-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* The solution block sits below the problem block, separated by a thin
   divider. */
.manifesto-block + .manifesto-block {
  border-top: 1px solid var(--glass-border);
  margin-top: 2.75rem;
  padding-top: 2.75rem;
}
.manifesto-eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--muted);
}
.manifesto-eyebrow.is-solution { color: var(--accent); }
.manifesto-headline {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
.manifesto-body {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  margin: 1rem auto 0;
}

@media (max-width: 640px) {
  .manifesto-block + .manifesto-block {
    margin-top: 2rem;
    padding-top: 2rem;
  }
}
@media (max-width: 720px) {
  .manifesto { padding: 4.5rem 1rem; }
}
@media (max-width: 480px) {
  .manifesto { padding: 3.5rem 0.75rem; }
}

/* "Benefits" band — the emotional payoff section, sitting between the
   manifesto and the product screenshot. Six cards name the stress this
   relieves (0% commissions, hours saved, pricing control, etc.) rather than
   the technical mechanics the .stage steps cover lower down. Card titles
   borrow the big white headline font (a notch smaller than .manifesto-headline)
   so the benefits read as the loud, scannable promise of the page.
   (Replaced the old .highlights stat tiles that led with spec numbers.) */
.benefits {
  position: relative;
  z-index: 4;
  /* Grey band STARTS here and continues down through the pricing + comparison
     chart section (see .landing-pricing); the white benefit cards / pricing
     tiles pop on it (Notion-style). Top border only — the band flows seamlessly
     into pricing below. */
  background: #f3f4f6;
  border-top: 1px solid var(--glass-border);
  padding: 7rem 1.5rem;
}
.benefits-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.benefits-eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--accent);
}
.benefits-headline {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text);
  max-width: 20ch;
  margin: 0 auto;
}
.benefits-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 40rem;
  margin: 1rem auto 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 3rem auto 0;
}
.benefit-card {
  background: var(--bg-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem;
  text-align: left;
  transition: border-color 0.12s, transform 0.12s;
}
.benefit-card:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}
.benefit-card h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 0.7rem;
}
/* The "(Alt Arts / Parallels)" qualifier under the Variant Picker title —
   drops to a small muted line so it doesn't compete with the headline. */
.benefit-paren {
  display: block;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  margin-top: 0.2rem;
}
.benefit-card p {
  color: var(--text-2);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 720px) {
  .benefits { padding: 4.5rem 1rem; }
}

/* Plan-comparison chart wrapper. The .feature-matrix table styling itself
   comes from glass.css (scoped to the .pricing-page class we wrap it in — see
   the comment in landing.html); here we only constrain width + center so the
   chart's edges line up with .pricing-grid above (also max-width:1100px). */
.landing-pricing .compare-matrix {
  max-width: 1100px;
  margin: 2.5rem auto 0;
}

/* "Compare all plans →" link — was inline left-aligned; now centered
   under the pricing tile grid as one self-contained line. */
.compare-plans-link {
  margin: 2rem 0 0;
  text-align: center;
}
.compare-plans-link a {
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.12s;
}
.compare-plans-link a:hover { color: var(--accent); }