/* =====================================================================
   PlayToEarn - Game Listing Funnel styles (scoped to .ListingFunnel)
   Hybrid: CoinGecko OHLC page STRUCTURE, PlayToEarn SKIN
   (light theme, blue brand, SF Pro Display).
   Reuses res/styles/style.css components (.Button, form fields, info pills).
   Brand vars (--blue, --blue-strong, --red, --deep-blue) come from the
   :root block inlined in res/layout/header/index.html, which every funnel
   page includes; we mirror them with fallbacks so this file is self-safe.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

/* Force the Inter font across the entire list-your-game funnel (overrides SF Pro / globals). */
.ListingFunnel,
.ListingFunnel *,
.ListingFunnel *::before,
.ListingFunnel *::after { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }

/* ---- Phase C1: design tokens ---------------------------------------- */
.ListingFunnel {
  /* Brand (blue) - inherit the site's globals, fall back to literals */
  --lf-blue:        var(--blue, #0f73ff);
  --lf-blue-strong: var(--blue-strong, #0062ff);
  --lf-blue-dark:   var(--blue-dark, #0e4ba0);
  --lf-blue-light:  var(--blue-light, #3678d3);
  --lf-blue-soft:   #e8f1ff;   /* tinted blue wash for pills / hovers */

  /* Accents */
  --lf-green:   #33b934;       /* "Approved" / positive */
  --lf-green-2: #00e676;
  --lf-gold:    #e0a106;       /* "★ Plus" tier */
  --lf-gold-2:  #ffcb3d;
  --lf-violet:  #651fff;
  --lf-red:     var(--red, #f33f60);

  /* Surfaces (light theme) */
  --lf-bg:       #ffffff;      /* default section background */
  --lf-bg-alt:   #f8f8f8;      /* alternating section background */
  --lf-bg-soft:  #f1f5fb;      /* soft blue-grey panel */

  /* Dark mini-card accent (CoinGecko-style code/UI card inside light sections) */
  --lf-dark:        #11161f;
  --lf-dark-2:      #1b2230;
  --lf-dark-border: #2a3344;
  --lf-dark-text:   #e6edf6;
  --lf-dark-muted:  #93a1b5;

  /* Text */
  --lf-text:       #0f172a;
  --lf-text-muted: #475569;
  --lf-text-soft:  #64748b;

  /* Lines */
  --lf-border:    #e3e8ef;
  --lf-border-2:  #d3dae6;

  /* Radius */
  --lf-radius-sm: 8px;
  --lf-radius:    14px;
  --lf-radius-lg: 22px;

  /* Shadow */
  --lf-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --lf-shadow:    0 6px 18px rgba(15,23,42,.08);
  --lf-shadow-lg: 0 18px 50px rgba(15,23,42,.14);
  --lf-shadow-blue: 0 14px 40px rgba(15,115,255,.22);

  /* Container widths */
  --lf-container:        1200px;
  --lf-container-narrow: 720px;

  /* Base canvas */
  font-family: 'SF Pro Display', -apple-system, sans-serif;
  color: var(--lf-text);
  background: var(--lf-bg);
}

/* Centered content containers (verifiable token consumers) */
.ListingFunnel .lf-container {
  width: 100%;
  max-width: var(--lf-container);
  margin-inline: auto;
  padding-inline: 24px;
}
.ListingFunnel .lf-container.lf-narrow {
  max-width: var(--lf-container-narrow);
}

/* Section background helpers */
.ListingFunnel .lf-section      { padding: 72px 0; background: var(--lf-bg); }
.ListingFunnel .lf-section.lf-alt { background: var(--lf-bg-alt); }

@media (max-width: 640px) {
  .ListingFunnel .lf-container { padding-inline: 16px; }
  .ListingFunnel .lf-section   { padding: 48px 0; }
}

/* ---- Phase C2: typography (SF Pro Display) -------------------------- */
.ListingFunnel h1,
.ListingFunnel h2,
.ListingFunnel h3,
.ListingFunnel .lf-h1,
.ListingFunnel .lf-h2,
.ListingFunnel .lf-h3 {
  margin: 0;
  font-family: 'SF Pro Display', -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lf-text);
}

/* Hero headline */
.ListingFunnel h1,
.ListingFunnel .lf-h1 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Section heading */
.ListingFunnel h2,
.ListingFunnel .lf-h2 {
  font-size: clamp(26px, 3.4vw, 40px);
}

/* Sub-heading / card title */
.ListingFunnel h3,
.ListingFunnel .lf-h3 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
}

/* Kicker - small tinted pill above a heading (Title Case, native PlayToEarn) */
.ListingFunnel .lf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--lf-blue-soft);
  color: var(--lf-blue-strong);
  font-size: 13px;
  font-weight: 600;
}

/* Sub / lead paragraph under a headline */
.ListingFunnel .lf-sub {
  margin: 16px 0 0;
  max-width: 640px;
  color: var(--lf-text-muted);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  font-weight: 400;
}

/* Colored keyword highlight inside a headline (CoinGecko-style emphasis).
   D4 later layers a gradient shimmer on top of this base color. */
.ListingFunnel .lf-hl       { color: var(--lf-blue); }
.ListingFunnel .lf-hl.lf-green { color: var(--lf-green); }
.ListingFunnel .lf-hl.lf-gold  { color: var(--lf-gold); }

/* Centered heading block helper */
.ListingFunnel .lf-center            { text-align: center; }
.ListingFunnel .lf-center .lf-sub    { margin-inline: auto; }

/* ---- Phase C3: reuse audit + layout glue ---------------------------- *
   AUDIT OUTCOME - the global res/styles/style.css components are reused
   AS-IS inside .ListingFunnel; we do NOT restyle them:
     • Buttons  .Button [.Filled|.Gray|.Big]  (pill, brand #0012ff, .Big=50px)
               → render identically: global `* { box-sizing:border-box }`
                 (style.css:30) means dimensions are unaffected here, and we
                 add no overriding .ListingFunnel .Button rule.
     • Info pills .RedInfo/.BlueInfo/.GreenInfo/.VioletInfo/.GrayInfo/.YellowInfo
               → parent-independent; usable for genre/blockchain/status tags.
     • Form fields select.White / input / textarea / .White radios+checkboxes /
       .InputMultiSelector → reused in Phase E (no changes needed now).
   Only the LAYOUT GLUE below was missing, so it's all we add here. */

/* Button row (hero / final CTA): primary .Button + secondary link/anchor */
.ListingFunnel .lf-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.ListingFunnel .lf-center .lf-cta-row { justify-content: center; }

/* Lightweight secondary text link (e.g. "See How It Works") */
.ListingFunnel .lf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--lf-blue-strong);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.ListingFunnel .lf-link:hover { color: var(--lf-blue-dark); text-decoration: underline; }

/* Pill group spacing (info pills define no inter-sibling gap of their own) */
.ListingFunnel .lf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- Phase D2: hero ------------------------------------------------- */
.ListingFunnel .lf-hero {
  position: relative;          /* anchor for D3 floating blobs */
  overflow: hidden;
  padding: 96px 0 80px;
  background:
    radial-gradient(58% 75% at 50% -8%, var(--lf-blue-soft) 0%, rgba(232,241,255,0) 70%),
    linear-gradient(180deg, #ffffff 0%, var(--lf-bg-alt) 100%);
}

/* Text column sits above the blobs and is narrower than the 1200 container */
.ListingFunnel .lf-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.ListingFunnel .lf-hero-title { margin-top: 22px; }
.ListingFunnel .lf-hero .lf-sub { margin-top: 18px; }
.ListingFunnel .lf-hero .lf-cta-row { margin-top: 30px; }

/* Green eyebrow variant (spec §3.2 uses a green label pill) */
.ListingFunnel .lf-eyebrow.lf-green {
  background: rgba(51,185,52,.12);
  color: #1f8f2e;
}

/* Stat strip - 3 columns, big colored numbers */
.ListingFunnel .lf-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 52px;
  margin-top: 50px;
}
.ListingFunnel .lf-stat { min-width: 120px; }
.ListingFunnel .lf-stat-num {
  font-family: 'SF Pro Display', -apple-system, sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ListingFunnel .lf-stat--green   { color: var(--lf-green); }
.ListingFunnel .lf-stat--blue    { color: var(--lf-blue); }
.ListingFunnel .lf-stat--neutral { color: var(--lf-text); }
.ListingFunnel .lf-stat-label {
  margin-top: 8px;
  color: var(--lf-text-soft);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .ListingFunnel .lf-hero { padding: 64px 0 52px; }
  .ListingFunnel .lf-stats { gap: 20px 28px; margin-top: 36px; }
  .ListingFunnel .lf-stat  { min-width: 90px; }
}

/* ---- Phase D3: hero floating gradient blobs (decorative) ----------- */
.ListingFunnel .lf-blob {
  position: absolute;
  z-index: 1;                 /* behind .lf-hero-inner (z-index:2) */
  border-radius: 50%;
  filter: blur(85px);
  pointer-events: none;
  will-change: transform, opacity;
  animation: lf-float 9s ease-in-out infinite;
}
.ListingFunnel .lf-blob-1 {
  width: 380px; height: 380px; top: -70px; left: -40px;
  background: radial-gradient(circle, rgba(15,115,255,.55), rgba(15,115,255,0) 70%);
  animation-delay: 0s;
}
.ListingFunnel .lf-blob-2 {
  width: 320px; height: 320px; top: 10px; right: -30px;
  background: radial-gradient(circle, rgba(0,200,255,.45), rgba(0,200,255,0) 70%);
  animation-delay: .5s;
}
.ListingFunnel .lf-blob-3 {
  width: 300px; height: 300px; bottom: -90px; left: 42%;
  background: radial-gradient(circle, rgba(51,185,52,.4), rgba(51,185,52,0) 70%);
  animation-delay: 1s;
}

@keyframes lf-float {
  0%, 100% { transform: translateY(-15px); opacity: .35; }
  50%      { transform: translateY(15px);  opacity: .6;  }
}

/* Off on mobile (perf + clarity) and when the user prefers reduced motion */
@media (max-width: 640px) {
  .ListingFunnel .lf-blob { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-blob { animation: none; opacity: .4; }
}

/* ---- Phase D4: hero keyword gradient shimmer ----------------------- *
   Layered on top of the solid-blue .lf-hl from C2. Gated behind
   @supports background-clip:text so the solid color stays as a safe
   fallback (no invisible text where clip-to-text is unsupported). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ListingFunnel .lf-hl {
    background-image: linear-gradient(
      90deg,
      var(--lf-blue) 0%,
      #00c8ff 25%,
      var(--lf-green) 50%,
      #00c8ff 75%,
      var(--lf-blue) 100%
    );
    background-size: 200% auto;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lf-shimmer 4s linear infinite;
  }
}

@keyframes lf-shimmer {
  to { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-hl { animation: none; }
}

/* =====================================================================
   Phase D6/D7 - Approved-badge section (/list-your-game, spec §3.3)
   Light "lf-alt" band + subtle blue glow behind the head; 2-col layout
   (text bullets + a dark mini-card game mock), badges as info pills.
   ===================================================================== */

/* Section: subtle blue glow behind the centered head (spec §3.3) */
.ListingFunnel .lf-approved { position: relative; overflow: hidden; }
.ListingFunnel .lf-approved::before {
  content: "";
  position: absolute;
  top: -8%; left: 50%;
  width: 760px; max-width: 92%; height: 360px;
  transform: translateX(-50%);
  background: radial-gradient(60% 60% at 50% 0%, rgba(15,115,255,.10) 0%, rgba(15,115,255,0) 70%);
  pointer-events: none;
}
.ListingFunnel .lf-approved > .lf-container { position: relative; z-index: 1; }

.ListingFunnel .lf-approved-head { margin-bottom: 48px; }

/* 2-column layout: text | dark mock */
.ListingFunnel .lf-approved-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* LEFT - intro paragraphs + checklist + CTA */
.ListingFunnel .lf-approved-text p {
  margin: 0 0 16px;
  color: var(--lf-text-muted);
  font-size: 16.5px;
  line-height: 1.6;
}
.ListingFunnel .lf-checklist {
  list-style: none;
  margin: 24px 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ListingFunnel .lf-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--lf-text);
  font-size: 15.5px;
  line-height: 1.45;
}
.ListingFunnel .lf-checkmark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(51,185,52,.14);
  color: var(--lf-green);
  font-size: 12px;
  font-weight: 700;
}

/* RIGHT - dark mini-card game mock (CoinGecko-style dark accent on light) */
.ListingFunnel .lf-approved-mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ListingFunnel .lf-gamecard {
  width: 100%;
  max-width: 420px;
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--lf-dark);
  border: 1px solid var(--lf-dark-border);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow-lg);
}
.ListingFunnel .lf-gamecard-img {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lf-dark-2), #243049);
  border: 1px solid var(--lf-dark-border);
  color: var(--lf-dark-muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.ListingFunnel .lf-gamecard-body { min-width: 0; }
.ListingFunnel .lf-gamecard-name {
  color: var(--lf-dark-text);
  font-weight: 700;
  font-size: 16px;
}
.ListingFunnel .lf-gamecard-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.ListingFunnel .lf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.ListingFunnel .lf-badge-approved {
  background: rgba(51,185,52,.16);
  color: var(--lf-green-2);
  border: 1px solid rgba(51,185,52,.32);
}
.ListingFunnel .lf-badge-plus {
  background: rgba(224,161,6,.16);
  color: var(--lf-gold-2);
  border: 1px solid rgba(224,161,6,.34);
}
.ListingFunnel .lf-gamecard-meta {
  color: var(--lf-dark-muted);
  font-size: 13.5px;
}
.ListingFunnel .lf-gamecard-score {
  margin-top: 4px;
  color: var(--lf-dark-text);
  font-size: 13.5px;
  font-weight: 600;
}
.ListingFunnel .lf-gamecard-cap {
  color: var(--lf-text-soft);
  font-size: 13px;
  font-style: italic;
}

/* D7 responsive: stack the two columns */
@media (max-width: 880px) {
  .ListingFunnel .lf-approved-cols { grid-template-columns: 1fr; gap: 32px; }
  .ListingFunnel .lf-approved-head { margin-bottom: 36px; }
}

/* ---- D8: "Approved ✓" gradient shimmer (same technique as D4) -------
   Green-leaning (Approved = green trust signal) with a hint of cyan.
   Solid-green fallback first, then clip-to-text gradient under @supports;
   reuses the D4 `lf-shimmer` keyframe. Disabled under reduced-motion. */
.ListingFunnel .lf-approved-shimmer { color: var(--lf-green); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ListingFunnel .lf-approved-shimmer {
    background-image: linear-gradient(
      90deg,
      var(--lf-green) 0%,
      var(--lf-green-2) 25%,
      #00c8ff 50%,
      var(--lf-green-2) 75%,
      var(--lf-green) 100%
    );
    background-size: 200% auto;
    background-position: 0% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lf-shimmer 4s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-approved-shimmer { animation: none; }
}

/* =====================================================================
   Phase D9-D21 - Landing below-the-fold sections (spec §3.3-3.8)
   Tier cards (D9-D11), Before/After (D12-D13), Plus Benefits (D14-D15),
   Social Proof (D16-D17), FAQ reuse (D18-D19), Final CTA (D20-D21).
   ===================================================================== */

/* ---- Shared scroll-reveal (replaces the spec's GSAP stagger) -------- */
.ListingFunnel .lf-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.ListingFunnel .lf-reveal.is-in { opacity: 1; transform: none; }

/* ---- D9-D11: badge-tier cards (3 across; dim / blue / gold) --------- */
.ListingFunnel .lf-tiers {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ListingFunnel .lf-tiers .lf-reveal:nth-child(1) { transition-delay: 0s;   }
.ListingFunnel .lf-tiers .lf-reveal:nth-child(2) { transition-delay: .1s;  }
.ListingFunnel .lf-tiers .lf-reveal:nth-child(3) { transition-delay: .2s;  }

.ListingFunnel .lf-tier {
  padding: 26px 24px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  background: #fff;
  text-align: center;
}
.ListingFunnel .lf-tier-none { opacity: .62; background: var(--lf-bg-alt); }
.ListingFunnel .lf-tier-approved {
  border: 1.5px solid var(--lf-blue);
  box-shadow: 0 0 0 4px rgba(15,115,255,.08), var(--lf-shadow);
}
.ListingFunnel .lf-tier-plus {
  border: 1.5px solid var(--lf-gold);
  box-shadow: 0 0 0 4px rgba(224,161,6,.10), var(--lf-shadow);
}
.ListingFunnel .lf-tier-cap { margin-bottom: 16px; }
.ListingFunnel .lf-tier-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.ListingFunnel .lf-tier-none .lf-tier-name     { background: #eceff3; color: var(--lf-text-soft); }
.ListingFunnel .lf-tier-approved .lf-tier-name { background: rgba(51,185,52,.12);  color: #1f8f2e; }
.ListingFunnel .lf-tier-plus .lf-tier-name     { background: rgba(224,161,6,.14);  color: #a9760a; }
.ListingFunnel .lf-tier-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ListingFunnel .lf-tier-points li { font-size: 14.5px; line-height: 1.4; color: var(--lf-text-muted); }
.ListingFunnel .lf-tier-approved .lf-tier-points li,
.ListingFunnel .lf-tier-plus .lf-tier-points li { color: var(--lf-text); }

/* ---- D12-D13: Before / After (2 cols, cross vs check) -------------- */
.ListingFunnel .lf-ba {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ListingFunnel .lf-ba-card {
  padding: 30px 28px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
}
.ListingFunnel .lf-ba-bad  { background: var(--lf-bg-alt); }
.ListingFunnel .lf-ba-good {
  background: linear-gradient(180deg, rgba(51,185,52,.06), #fff 62%);
  border-color: rgba(51,185,52,.32);
  box-shadow: 0 0 0 4px rgba(51,185,52,.06), var(--lf-shadow);
}
.ListingFunnel .lf-ba-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.ListingFunnel .lf-ba-bad .lf-ba-title  { color: var(--lf-text-soft); }
.ListingFunnel .lf-ba-good .lf-ba-title { color: #1f8f2e; }
.ListingFunnel .lf-ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ListingFunnel .lf-ba-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--lf-text-muted);
}
.ListingFunnel .lf-ba-good .lf-ba-list li { color: var(--lf-text); }
.ListingFunnel .lf-ba-list b { color: var(--lf-text); font-weight: 700; }
.ListingFunnel .lf-x,
.ListingFunnel .lf-ck {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.ListingFunnel .lf-x  { background: rgba(243,63,96,.12); color: var(--lf-red);   }
.ListingFunnel .lf-ck { background: rgba(51,185,52,.14); color: var(--lf-green); }
.ListingFunnel .lf-ba-cta { margin-top: 36px; text-align: center; }

/* ---- D14-D15: Plus benefits (3x2 grid, 6 cards) ------------------- */
.ListingFunnel .lf-benefits {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ListingFunnel .lf-benefits .lf-reveal:nth-child(1) { transition-delay: 0s;   }
.ListingFunnel .lf-benefits .lf-reveal:nth-child(2) { transition-delay: .07s; }
.ListingFunnel .lf-benefits .lf-reveal:nth-child(3) { transition-delay: .14s; }
.ListingFunnel .lf-benefits .lf-reveal:nth-child(4) { transition-delay: .21s; }
.ListingFunnel .lf-benefits .lf-reveal:nth-child(5) { transition-delay: .28s; }
.ListingFunnel .lf-benefits .lf-reveal:nth-child(6) { transition-delay: .35s; }
.ListingFunnel .lf-bcard {
  padding: 26px 24px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  background: #fff;
  box-shadow: var(--lf-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ListingFunnel .lf-bcard:hover {
  box-shadow: var(--lf-shadow);
  transform: translateY(-3px);
  border-color: var(--lf-border-2);
}
.ListingFunnel .lf-bcard-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--lf-blue-soft);
  color: var(--lf-blue-strong);
}
.ListingFunnel .lf-bcard-ico svg { width: 24px; height: 24px; }
.ListingFunnel .lf-bcard-gold .lf-bcard-ico { background: rgba(224,161,6,.14); color: #a9760a; }
.ListingFunnel .lf-bcard h3 { font-size: 17px; margin-bottom: 8px; }
.ListingFunnel .lf-bcard p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lf-text-muted); }
.ListingFunnel .lf-bcard p.lf-disclaim { font-style: italic; color: var(--lf-text-soft); font-size: 13.5px; }

/* ---- D16-D17: Social proof (3 cards, count-up reuses .lf-stat-num) - */
.ListingFunnel .lf-soc {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ListingFunnel .lf-soc .lf-reveal:nth-child(1) { transition-delay: 0s;  }
.ListingFunnel .lf-soc .lf-reveal:nth-child(2) { transition-delay: .1s; }
.ListingFunnel .lf-soc .lf-reveal:nth-child(3) { transition-delay: .2s; }
.ListingFunnel .lf-soc-card {
  padding: 28px 26px;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  background: #fff;
  box-shadow: var(--lf-shadow-sm);
}
.ListingFunnel .lf-soc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: 11px;
  color: #fff;
}
.ListingFunnel .lf-soc-ico svg { width: 22px; height: 22px; }
.ListingFunnel .lf-soc-x        { background: #0f172a; }
.ListingFunnel .lf-soc-discord  { background: #5865f2; }
.ListingFunnel .lf-soc-telegram { background: #229ed9; }
.ListingFunnel .lf-soc-card .lf-stat-num { font-size: clamp(30px, 4vw, 42px); }
.ListingFunnel .lf-soc-label { margin-top: 6px; color: var(--lf-text-soft); font-size: 15px; font-weight: 500; }

/* ---- D18-D19: FAQ - reuse the pricing accordion, trim top margin --- */
.ListingFunnel .lf-faq.lf-faq-landing { margin: 36px auto 0; }

/* ---- D20-D21: Final CTA (centered, blue radial glow, pulse) -------- */
.ListingFunnel .lf-final { position: relative; overflow: hidden; }
.ListingFunnel .lf-final::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 720px; max-width: 92%; height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(15,115,255,.10) 0%, rgba(15,115,255,0) 70%);
  pointer-events: none;
}
.ListingFunnel .lf-final > .lf-container { position: relative; z-index: 1; }
.ListingFunnel .lf-final .lf-cta-row { margin-top: 30px; }
.ListingFunnel .lf-final-meta { margin-top: 26px; color: var(--lf-text-soft); font-size: 15px; font-weight: 500; }

.ListingFunnel .lf-pulse.is-in { animation: lf-pulse-glow 1.6s ease-out 2; }
@keyframes lf-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15,115,255,0); }
  50%      { box-shadow: 0 0 0 12px rgba(15,115,255,.20); }
}

/* ---- D23: responsive (stack grids; blobs already off <=640 in D3) -- */
@media (max-width: 880px) {
  .ListingFunnel .lf-tiers,
  .ListingFunnel .lf-benefits,
  .ListingFunnel .lf-soc { grid-template-columns: 1fr 1fr; }
  .ListingFunnel .lf-ba  { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ListingFunnel .lf-tiers,
  .ListingFunnel .lf-benefits,
  .ListingFunnel .lf-soc { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-reveal { opacity: 1; transform: none; transition: none; }
  .ListingFunnel .lf-pulse.is-in { animation: none; }
}

/* =====================================================================
   Phase E - Multi-step form (/list-your-game/submit)
   Centered card, step indicator, fields, pill/device toggles, uploads.
   ===================================================================== */

/* ---- E1: section + card shell ---- */
.ListingFunnel .lf-form-section {
  padding: 56px 0 80px;
  background: var(--lf-bg-alt);
  min-height: 60vh;
}
.ListingFunnel .lf-card {
  background: #fff;
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  box-shadow: var(--lf-shadow);
  padding: 36px;
}
.ListingFunnel .lf-panel { display: none; }
.ListingFunnel .lf-panel.is-active { display: block; }
.ListingFunnel .lf-panel-title { font-size: clamp(22px, 3vw, 28px); }
.ListingFunnel .lf-panel-sub { margin-top: 6px; color: var(--lf-text-muted); }
.ListingFunnel .lf-storehint { margin: -4px 0 16px; font-size: 12.5px; }
.ListingFunnel .lf-rule { border: 0; border-top: 1px solid var(--lf-border); margin: 22px 0; }

/* "Already listed?" -> Plus upsell banner at the top of submit step 1 */
.ListingFunnel .lf-already {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px; padding: 14px 16px;
  background: var(--lf-bg-soft);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
  text-decoration: none; color: var(--lf-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ListingFunnel .lf-already:hover { border-color: var(--lf-blue); box-shadow: var(--lf-shadow-sm); transform: translateY(-1px); }
.ListingFunnel .lf-already-ico {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(224,161,6,.12); color: var(--lf-gold);
}
.ListingFunnel .lf-already-ico svg { width: 20px; height: 20px; display: block; }
.ListingFunnel .lf-already-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ListingFunnel .lf-already-txt b { font-size: 14.5px; font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-already-txt small { font-size: 12.5px; color: var(--lf-text-soft); }
.ListingFunnel .lf-already-go { margin-left: auto; flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--lf-blue-strong); white-space: nowrap; }
@media (max-width: 480px) {
  .ListingFunnel .lf-already { flex-wrap: wrap; }
  .ListingFunnel .lf-already-go { margin-left: 52px; }
}
.ListingFunnel .lf-subhead {
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lf-border);
  font-size: 18px; font-weight: 600;
  color: var(--lf-text);
}

/* ---- E2/E3: step indicator ---- */
.ListingFunnel .lf-steps {
  display: flex; align-items: flex-start; justify-content: center;
  margin: 8px 0 6px;
}
.ListingFunnel .lf-stepdot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.ListingFunnel .lf-stepdot-circle {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: #fff; border: 2px solid var(--lf-border-2); color: var(--lf-text-soft);
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ListingFunnel .lf-stepdot-name { font-size: 13px; font-weight: 600; color: var(--lf-text-soft); }
.ListingFunnel .lf-stepdot.is-current .lf-stepdot-circle {
  background: var(--lf-blue); border-color: var(--lf-blue); color: #fff;
  box-shadow: 0 0 0 4px var(--lf-blue-soft);
}
.ListingFunnel .lf-stepdot.is-current .lf-stepdot-name { color: var(--lf-blue-strong); }
.ListingFunnel .lf-stepdot.is-done .lf-stepdot-circle { background: var(--lf-green); border-color: var(--lf-green); color: #fff; }
.ListingFunnel .lf-stepdot.is-done .lf-stepdot-name { color: var(--lf-text); }

/* E4: connector with animated fill */
.ListingFunnel .lf-stepline {
  flex: 1 1 auto; max-width: 120px; height: 3px; margin: 18px 6px 0;
  background: var(--lf-border-2); border-radius: 2px; overflow: hidden;
}
.ListingFunnel .lf-stepline-fill { display: block; width: 0; height: 100%; background: var(--lf-green); transition: width .5s ease; }
.ListingFunnel .lf-stepline.is-filled .lf-stepline-fill { width: 100%; }

/* E4: panel swap animation */
@keyframes lf-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ListingFunnel .lf-anim-in { animation: lf-panel-in .35s ease both; }

/* ---- E5/E7/E9: fields ---- */
.ListingFunnel .lf-field { margin-bottom: 20px; }
.ListingFunnel .lf-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--lf-text); }
.ListingFunnel .lf-req { color: var(--lf-red); }
.ListingFunnel .lf-hint { font-weight: 400; color: var(--lf-text-soft); }
.ListingFunnel .lf-help { display: block; margin-top: 6px; font-size: 13px; color: var(--lf-text-soft); }
.ListingFunnel .lf-counter { display: block; margin-top: 6px; font-size: 12px; color: var(--lf-text-soft); text-align: right; }

.ListingFunnel .lf-field input[type=text],
.ListingFunnel .lf-field input[type=email],
.ListingFunnel .lf-field input[type=url],
.ListingFunnel .lf-field textarea,
.ListingFunnel .lf-pillfilter,
.ListingFunnel .lf-chain-ca {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--lf-text);
  background: #fff; border: 1px solid var(--lf-border-2); border-radius: var(--lf-radius-sm);
  padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.ListingFunnel .lf-field input[type=text]:focus,
.ListingFunnel .lf-field input[type=email]:focus,
.ListingFunnel .lf-field input[type=url]:focus,
.ListingFunnel .lf-field textarea:focus,
.ListingFunnel .lf-pillfilter:focus,
.ListingFunnel .lf-chain-ca:focus {
  border-color: var(--lf-blue); box-shadow: 0 0 0 3px var(--lf-blue-soft); outline: none;
}
.ListingFunnel .lf-field textarea { resize: vertical; min-height: 120px; }
.ListingFunnel .lf-pillfilter { margin-bottom: 10px; }

/* E11: live valid checkmark */
.ListingFunnel .lf-control { position: relative; }
.ListingFunnel .lf-control input { padding-right: 38px; }
.ListingFunnel .lf-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(0);
  opacity: 0; color: var(--lf-green); font-weight: 700; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.ListingFunnel .lf-check svg { width: 20px; height: 20px; display: block; }
.ListingFunnel .lf-field.is-valid .lf-check { transform: translateY(-50%) scale(1); opacity: 1; }

/* error state */
.ListingFunnel .lf-error { display: none; margin-top: 6px; color: var(--lf-red); font-size: 13px; }
.ListingFunnel .lf-field.has-error .lf-error { display: block; }
.ListingFunnel .lf-field.has-error input,
.ListingFunnel .lf-field.has-error textarea,
.ListingFunnel .lf-field.has-error select,
.ListingFunnel .lf-field.has-error .lf-pillgroup,
.ListingFunnel .lf-field.has-error .lf-drop { border-color: var(--lf-red); }

/* ---- E5: pill toggles (genre / blockchain) + device toggles ---- */
.ListingFunnel .lf-pillgroup { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; border: 1px solid transparent; border-radius: var(--lf-radius-sm); }
.ListingFunnel .lf-scroll { max-height: 220px; overflow-y: auto; border-color: var(--lf-border-2); padding: 10px; }
.ListingFunnel .lf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 2px solid var(--lf-border-2); border-radius: 999px;
  background: #fff; color: var(--lf-text-muted); font-size: 14px; font-weight: 500;
  line-height: 1; cursor: pointer; user-select: none; transition: all .15s ease;
}
.ListingFunnel .lf-pill:hover { border-color: var(--lf-blue); color: var(--lf-blue-strong); }
.ListingFunnel .lf-pill input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.ListingFunnel .lf-pill.is-on { background: var(--lf-blue-soft); border-color: var(--lf-blue); color: var(--lf-blue-strong); font-weight: 600; }
.ListingFunnel .lf-devicegroup .lf-device { padding: 10px 16px; font-size: 14px; }
.ListingFunnel .lf-device-ico { display: inline-flex; align-items: center; }
.ListingFunnel .lf-device-ico svg { width: 18px; height: 18px; display: block; }

/* ---- E7/E8: uploads ---- */
/* Profile picture = a SQUARE icon (512x512 recommended) -> compact square upload frame. */
.ListingFunnel .lf-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; width: 150px; max-width: 100%; aspect-ratio: 1 / 1; padding: 14px; text-align: center;
  border: 2px dashed var(--lf-border-2); border-radius: var(--lf-radius);
  background: var(--lf-bg-alt); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ListingFunnel .lf-drop:hover { border-color: var(--lf-blue); background: var(--lf-blue-soft); }
.ListingFunnel .lf-drop .lf-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ListingFunnel .lf-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ListingFunnel .lf-drop-plus { font-size: 32px; line-height: 1; color: var(--lf-blue); }
.ListingFunnel .lf-drop-text { margin-top: 8px; font-weight: 600; color: var(--lf-text); }
.ListingFunnel .lf-drop-hint { font-size: 13px; color: var(--lf-text-soft); }
.ListingFunnel .lf-drop-preview { display: none; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: calc(var(--lf-radius) - 2px); background-size: cover; background-position: center; }
.ListingFunnel .lf-drop.has-image .lf-drop-empty { display: none; }
.ListingFunnel .lf-drop.has-image .lf-drop-preview { display: block; }

.ListingFunnel .lf-file-hidden { display: none; }
.ListingFunnel .lf-thumbs { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
/* Game images keep their REAL aspect ratio (portrait 1080x1920 OR landscape 1920x1080):
   fixed height, width follows the image so screenshots show uncropped. */
.ListingFunnel .lf-thumb { position: relative; height: 210px; border-radius: var(--lf-radius-sm); background-color: var(--lf-bg-alt); }
.ListingFunnel .lf-thumb img { height: 100%; width: auto; display: block; border-radius: var(--lf-radius-sm); border: 1px solid var(--lf-border); }
.ListingFunnel .lf-thumb-del {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(17,17,17,.78); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.ListingFunnel .lf-thumb-del:hover { background: var(--lf-red, #d32f2f); }
.ListingFunnel .lf-thumb-add {
  width: 150px; height: 210px; border-radius: var(--lf-radius-sm);
  border: 2px dashed var(--lf-border-2); background: var(--lf-bg-alt); color: var(--lf-blue);
  font-size: 28px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ListingFunnel .lf-thumb-add:hover { border-color: var(--lf-blue); background: var(--lf-blue-soft); }
@keyframes lf-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.ListingFunnel .lf-anim-pop { animation: lf-pop .25s ease both; }
.ListingFunnel .lf-saved { display: none; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--lf-green); }

/* ---- E7: "show more links" expander ---- */
.ListingFunnel .lf-showmore { display: inline-block; margin: 4px 0 16px; background: none; padding: 4px 0; }
.ListingFunnel .lf-morelinks { display: block; }

/* ---- E9: feature radios + agreement ---- */
.ListingFunnel .lf-radio-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ListingFunnel .lf-radio-row label { font-size: 14px; color: var(--lf-text); cursor: pointer; }
.ListingFunnel .lf-agree { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--lf-text-muted); }
.ListingFunnel .lf-agree input { flex: 0 0 auto; margin-top: 2px; }

/* ---- E10: action rows + button resets ---- */
.ListingFunnel .lf-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 30px; }
.ListingFunnel .lf-actions-end { justify-content: flex-end; }
.ListingFunnel button.Button { font: inherit; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ListingFunnel .lf-next.is-loading { opacity: .65; pointer-events: none; }

/* ---- E15: responsive ---- */
@media (max-width: 640px) {
  .ListingFunnel .lf-form-section { padding: 32px 0 56px; }
  .ListingFunnel .lf-card { padding: 22px 18px; }
  .ListingFunnel .lf-stepdot-name { display: none; }
  .ListingFunnel .lf-stepline { margin-top: 18px; }
  .ListingFunnel .lf-actions { flex-direction: column-reverse; align-items: stretch; }
  .ListingFunnel .lf-actions .Button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-anim-in,
  .ListingFunnel .lf-anim-pop { animation: none; }
  .ListingFunnel .lf-stepline-fill { transition: none; }
}

/* =====================================================================
   Phase F2 - Pricing REWORK (conversion checkout page)
   Split view: selectable cards (left) + sticky order summary (right),
   value strip, trust row, compact FAQ. Replaces the original Phase F
   brochure layout (success banner / 3-up grid / standalone upsells).
   ===================================================================== */

/* the JS toggles [hidden]; without this, our display:flex rules below would
   override the UA [hidden]{display:none} and leak the consent box / empty rows */
.ListingFunnel [hidden] { display: none !important; }

/* ---- F2-1: hero ---- */
/* clear the 55px fixed site header (.HeaderLayout) + a comfortable gap */
.ListingFunnel.lf-funnel-f5 .lf-form-section { padding-top: 80px; }
.ListingFunnel .lf-pricing-hero { margin: 0 auto 44px; max-width: 880px; }
.ListingFunnel .lf-pricing-hero h1 { font-size: clamp(19px, 2.4vw, 27px); line-height: 1.2; letter-spacing: -.01em; }
/* Global style.css has `* { font-size:14px }` which would otherwise shrink any inline child
   span in the headline back to 14px - force the highlight to inherit the h1's size.
   Also override the shimmer-gradient from .lf-hl so the second line stays plain black. */
.ListingFunnel .lf-pricing-hero h1 .lf-hl {
  font-size: inherit; display: inline-block; font-weight: 800;
  color: inherit; background: none; -webkit-text-fill-color: currentColor; animation: none;
}
/* Second headline line ("& start driving traffic immediately") reads as a lighter subhead. */
.ListingFunnel .lf-pricing-hero h1 .lf-hero-subline {
  font-size: clamp(19px, 2.4vw, 27px); font-weight: 700; line-height: 1.2; margin-top: 4px;
}
.ListingFunnel .lf-pricing-hero .lf-sub { margin-top: 16px; font-size: 17px; }

/* Hero actions row: Compare + Contact Support side-by-side under the hero subline.
   Shared between the pricing page and the plus upgrade page. */
.ListingFunnel .lf-pricing-hero .lf-hero-actions,
.ListingFunnel .lf-plus-hero .lf-hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px;
}
/* Compare link moved below the cards: centered row with breathing room above the cart/feature table. */
.ListingFunnel .lf-cards-actions {
  display: flex; justify-content: center; margin-top: 8px;
}
.ListingFunnel .lf-pricing-hero .lf-compare-link,
.ListingFunnel .lf-plus-hero .lf-compare-link,
.ListingFunnel .lf-cards-actions .lf-compare-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: transparent; border: 1px solid var(--lf-border);
  border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--lf-blue, #0f73ff); cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ListingFunnel .lf-pricing-hero .lf-compare-link:hover,
.ListingFunnel .lf-plus-hero .lf-compare-link:hover,
.ListingFunnel .lf-cards-actions .lf-compare-link:hover {
  background: var(--lf-blue-soft); border-color: var(--lf-blue, #0f73ff);
}
.ListingFunnel .lf-pricing-hero .lf-compare-link svg,
.ListingFunnel .lf-plus-hero .lf-compare-link svg,
.ListingFunnel .lf-cards-actions .lf-compare-link svg {
  width: 14px; height: 14px;
  transition: transform .2s ease;
}
.ListingFunnel .lf-pricing-hero .lf-compare-link:hover svg,
.ListingFunnel .lf-plus-hero .lf-compare-link:hover svg,
.ListingFunnel .lf-cards-actions .lf-compare-link:hover svg { transform: translateY(2px); }
/* Support button: same pill shell, Telegram-blue accent + plane icon nudges up-right on hover */
.ListingFunnel .lf-pricing-hero .lf-support-link,
.ListingFunnel .lf-plus-hero .lf-support-link { color: #229ED9; }
.ListingFunnel .lf-pricing-hero .lf-support-link:hover,
.ListingFunnel .lf-plus-hero .lf-support-link:hover {
  background: rgba(34,158,217,.10); border-color: #229ED9; color: #229ED9;
}
.ListingFunnel .lf-pricing-hero .lf-support-link:hover svg,
.ListingFunnel .lf-plus-hero .lf-support-link:hover svg { transform: translate(2px, -2px); }

/* ---- F2-2: value strip (anchor value before price) ---- */
.ListingFunnel .lf-value-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 22px; }
.ListingFunnel .lf-value-strip span {
  padding: 7px 14px; border-radius: 999px; background: var(--lf-bg-soft);
  border: 1px solid var(--lf-border); font-size: 13px; font-weight: 600; color: var(--lf-text-muted);
}
.ListingFunnel .lf-value-badge { color: var(--lf-blue-strong); border-color: var(--lf-blue); background: var(--lf-blue-soft); }

/* ---- F2-3: split layout ----
   TRIAL: horizontal cards (boss feedback - "beide Optionen ohne Scroll sichtbar"). If we need to
   roll back, swap THIS active block with the REVERT-FALLBACK block right below, and in the
   media query lower in the file (`@media (max-width: 1180px)` block) put back the original
   `max-width: 1024px` / `max-width: 640px` / removed-transform rules.
   ----------------------------------------------------------------- */
.ListingFunnel .lf-pricing-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px;
  align-items: start; max-width: 1320px; margin: 0 auto;
}
.ListingFunnel .lf-pricing-cards { display: flex; flex-direction: row; gap: 20px; align-items: stretch; }
.ListingFunnel .lf-pricing-cards > .lf-pcard { flex: 1 1 0; min-width: 0; }

/* REVERT-FALLBACK (pre-horizontal vertical stack) - uncomment to roll back:
.ListingFunnel .lf-pricing-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px;
  align-items: start; max-width: 1080px; margin: 0 auto;
}
.ListingFunnel .lf-pricing-cards { display: flex; flex-direction: column; gap: 24px; }
*/

/* ---- F2-6: selectable pricing cards ---- */
.ListingFunnel .lf-pcard {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--lf-border); border-radius: var(--lf-radius-lg);
  box-shadow: var(--lf-shadow); padding: 36px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ListingFunnel .lf-pcard:hover { border-color: var(--lf-blue); box-shadow: var(--lf-shadow-sm); }
.ListingFunnel .lf-pcard:focus-visible { outline: 3px solid rgba(15,115,255,.4); outline-offset: 2px; }
.ListingFunnel .lf-pcard.is-selected { border-color: var(--lf-blue); box-shadow: var(--lf-shadow-blue); }

.ListingFunnel .lf-pcard-main { flex: 1 1 auto; }
.ListingFunnel .lf-pcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.ListingFunnel .lf-pcard-name { font-size: 19px; font-weight: 700; }
/* F3-8: price typography - large, bold, dark (no green); raised small "$"; suffix to the right */
.ListingFunnel .lf-pcard-price { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 7px; text-align: right; }
.ListingFunnel .lf-price { display: inline-flex; align-items: baseline; font-size: clamp(44px, 4.8vw, 64px); font-weight: 800; line-height: .9; letter-spacing: -.03em; color: var(--lf-text); }
.ListingFunnel .lf-price-cur { font-size: .58em; font-weight: 500; color: var(--lf-text-soft); transform: translateY(-.5em); margin-right: 2px; }
.ListingFunnel .lf-price-per { color: var(--lf-text-soft); font-size: 1rem; font-weight: 500; }

.ListingFunnel .lf-feat { list-style: none; margin: 0; padding: 0; }
.ListingFunnel .lf-feat li { position: relative; padding: 6px 0 6px 24px; font-size: 14.5px; color: var(--lf-text); }
.ListingFunnel .lf-feat li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--lf-green); font-weight: 700; }
.ListingFunnel .lf-feat-key { font-weight: 700; }
.ListingFunnel .lf-feat-hl { color: var(--lf-blue-strong); font-weight: 600; }
.ListingFunnel .lf-feat-hl::before { color: var(--lf-blue-strong); }
.ListingFunnel .lf-feat-gold { color: var(--lf-gold); font-weight: 600; }
.ListingFunnel .lf-feat-gold::before { content: "★"; color: var(--lf-gold); }

.ListingFunnel .lf-pcard-foot { margin-top: 20px; }
.ListingFunnel .lf-pcard-cta { width: 100%; justify-content: center; }
.ListingFunnel .lf-pcard-cta.is-loading { opacity: .7; pointer-events: none; cursor: progress; }
.ListingFunnel .lf-pcard-note { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--lf-text-soft); line-height: 1.5; }

/* F3-7: featured (bundle) - layered depth, gradient wash, scale, premium banner with shimmer */
.ListingFunnel .lf-pcard-featured {
  border: 2px solid var(--lf-blue); padding-top: 62px;
  background:
    linear-gradient(180deg, rgba(15,115,255,.06) 0%, rgba(15,115,255,0) 42%),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 28px rgba(15,23,42,.10),
    0 24px 60px rgba(15,115,255,.22);
  transform: scale(1.04); transform-origin: center top; z-index: 1;
}
.ListingFunnel .lf-pcard-featured:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 34px rgba(15,23,42,.12), 0 30px 72px rgba(15,115,255,.28);
}
.ListingFunnel .lf-pcard-featured.is-selected {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px rgba(15,115,255,.30), 0 32px 84px rgba(15,115,255,.34);
}
.ListingFunnel .lf-pcard-banner {
  position: absolute; top: -34px; left: 14px; right: 14px; overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lf-blue-strong) 0%, var(--lf-blue) 48%, #00c8ff 100%);
  box-shadow: 0 6px 18px rgba(15,115,255,.35);
  color: #fff; text-align: center; font-size: 12.5px; font-weight: 800; padding: 8px 16px; line-height: 1.2;
}
.ListingFunnel .lf-pcard-banner span { position: relative; z-index: 1; }
.ListingFunnel .lf-pcard-banner::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: lf-banner-shimmer 3.2s linear infinite;
}
@keyframes lf-banner-shimmer { 0% { left: -60%; } 55%, 100% { left: 120%; } }

/* auto-renewal consent (legal) - reused inside the order summary, gates checkout */
.ListingFunnel .lf-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--lf-border-2); border-radius: var(--lf-radius-sm);
  background: var(--lf-bg-soft); cursor: pointer; font-size: 12.5px; line-height: 1.5; color: var(--lf-text-muted);
}
.ListingFunnel .lf-consent input { flex: 0 0 auto; margin-top: 2px; }

/* ---- F2-4 / F2-5: sticky order summary (with upsells + live total) ---- */
/* F3-9: sticky order summary - elevated card, generous padding */
.ListingFunnel .lf-order { position: sticky; top: 100px; align-self: start; }
.ListingFunnel .lf-order-inner {
  background: #fff; padding: 28px;
}
.ListingFunnel .lf-order-title { font-size: 16px; font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-order-selection { margin-top: 14px; min-height: 24px; }
.ListingFunnel .lf-order-empty { color: var(--lf-text-soft); font-size: 14px; }
.ListingFunnel .lf-order-pkg { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ListingFunnel .lf-order-pkg-name { font-weight: 700; font-size: 16px; }
.ListingFunnel .lf-order-pkg-price { font-weight: 700; white-space: nowrap; }

.ListingFunnel .lf-os-upsells { margin-top: 18px; border-top: 1px solid var(--lf-border); padding-top: 16px; }
.ListingFunnel .lf-os-label { font-size: 14px; font-weight: 700; color: var(--lf-text); margin-bottom: 8px; }
.ListingFunnel .lf-os-upsell { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--lf-radius-sm); cursor: pointer; transition: background .15s ease; font-size: 14px; }
.ListingFunnel .lf-os-upsell:hover { background: var(--lf-bg-soft); }
.ListingFunnel .lf-os-upsell.is-on { background: var(--lf-blue-soft); font-weight: 600; }
.ListingFunnel .lf-os-upname { flex: 1 1 auto; }
.ListingFunnel .lf-os-upprice { font-weight: 700; color: var(--lf-green); white-space: nowrap; }
.ListingFunnel .lf-os-consent { margin-top: 14px; margin-bottom: 14px; }

/* ---- coupon / discount code ---- */
.ListingFunnel .lf-os-coupon { margin-top: 16px; }
.ListingFunnel .lf-os-coupon-label { display: block; font-size: 13px; font-weight: 600; color: var(--lf-text-muted); margin-bottom: 6px; }
.ListingFunnel .lf-os-coupon-row { display: flex; gap: 8px; }
.ListingFunnel .lf-coupon-input {
  flex: 1 1 auto; min-width: 0; padding: 11px 12px;
  border: 1px solid var(--lf-border-2); border-radius: var(--lf-radius-sm);
  font-size: 14px; background: #fff; color: var(--lf-text);
}
.ListingFunnel .lf-coupon-input:focus { outline: none; border-color: var(--lf-blue); box-shadow: 0 0 0 3px var(--lf-blue-soft); }
.ListingFunnel .lf-coupon-input[disabled] { background: var(--lf-bg-soft); color: var(--lf-text-muted); }
.ListingFunnel .lf-coupon-apply {
  flex: 0 0 auto; padding: 11px 18px; border: 0; border-radius: var(--lf-radius-sm);
  background: var(--lf-text); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ListingFunnel .lf-coupon-apply:hover { opacity: .92; }
.ListingFunnel .lf-coupon-apply.is-applied { background: var(--lf-red); }
.ListingFunnel .lf-coupon-apply.is-loading { opacity: .6; pointer-events: none; }
.ListingFunnel .lf-os-coupon-msg { margin: 8px 0 0; font-size: 12.5px; }
.ListingFunnel .lf-os-coupon-msg.is-ok { color: var(--lf-green); }
.ListingFunnel .lf-os-coupon-msg.is-err { color: var(--lf-red); }
.ListingFunnel .lf-order-discount { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--lf-green); margin-bottom: 8px; }
.ListingFunnel .lf-order-discount-code { font-weight: 500; color: var(--lf-text-soft); }

/* ---- inline link icons (Tabler) on the submit-form social/store fields ---- */
.ListingFunnel .lf-link-ico { display: inline-flex; vertical-align: -3px; margin-right: 5px; color: var(--lf-text-muted); }
.ListingFunnel .lf-link-ico svg { width: 17px; height: 17px; }
.ListingFunnel .lf-order-rule { margin: 16px 0; border: 0; border-top: 1px solid var(--lf-border); }
.ListingFunnel .lf-order-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 15px; }
.ListingFunnel .lf-order-total-amt { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--lf-text); }
.ListingFunnel .lf-order-sub { margin: 7px 0 0; font-size: 12.5px; color: var(--lf-text-soft); }
.ListingFunnel .lf-order-cta { width: 100%; justify-content: center; margin-top: 16px; }
.ListingFunnel .lf-order-cta[disabled] { opacity: .45; pointer-events: none; }
.ListingFunnel .lf-order-cta.is-loading { opacity: .7; pointer-events: none; cursor: progress; }
.ListingFunnel .lf-order-error { margin: 10px 0 0; font-size: 13px; color: var(--lf-red, #d32f2f); line-height: 1.45; }
.ListingFunnel .lf-order-trust { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--lf-text-soft); }

/* ---- F2-8 / F3-10: trust signals row (SVG icons + descriptions) ---- */
.ListingFunnel .lf-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 72px auto 0; max-width: 1000px; padding: 30px 22px 0; border-top: 1px solid var(--lf-border); }
.ListingFunnel .lf-trust { display: flex; align-items: center; gap: 12px; text-align: left; }
.ListingFunnel .lf-trust-ico { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--lf-blue-soft); color: var(--lf-blue-strong); }
.ListingFunnel .lf-trust-ico svg { width: 20px; height: 20px; display: block; }
.ListingFunnel .lf-trust-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ListingFunnel .lf-trust-txt b { font-size: 13.5px; font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-trust-txt small { font-size: 12px; color: var(--lf-text-soft); }

/* ---- F2-9 / F3-11: compact FAQ accordion (cards, hover lift, active blue border) ---- */
.ListingFunnel .lf-faq { max-width: 760px; margin: 80px auto 8px; }
.ListingFunnel .lf-faq > h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 28px; }
.ListingFunnel .lf-faq-item { border: 1px solid var(--lf-border); border-left: 3px solid transparent; border-radius: var(--lf-radius); margin-bottom: 12px; background: #fff; overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.ListingFunnel .lf-faq-item:hover { box-shadow: var(--lf-shadow); transform: translateY(-1px); }
.ListingFunnel .lf-faq-item.is-open { border-left-color: var(--lf-blue); box-shadow: var(--lf-shadow-sm); }
.ListingFunnel .lf-faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; font-size: 16px; font-weight: 600; color: var(--lf-text);
}
.ListingFunnel .lf-faq-chev { flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--lf-text-soft); border-bottom: 2px solid var(--lf-text-soft); transform: rotate(45deg); transition: transform .2s ease; }
.ListingFunnel .lf-faq-item.is-open .lf-faq-chev { transform: rotate(-135deg); }
.ListingFunnel .lf-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.ListingFunnel .lf-faq-item.is-open .lf-faq-a { max-height: 340px; }
.ListingFunnel .lf-faq-a p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--lf-text-muted); }

/* ---- F2-10: mobile sticky bottom bar (hidden on desktop) ---- */
.ListingFunnel .lf-mobile-bar { display: none; }

/* ---- F2-11: responsive (TRIAL: tuned for horizontal cards) ---- */
@media (max-width: 1180px) {
  .ListingFunnel .lf-pricing-layout { grid-template-columns: 1fr; max-width: 940px; }
  .ListingFunnel .lf-order { position: static; }
  .ListingFunnel .lf-trust-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .ListingFunnel .lf-pricing-cards { flex-direction: column; gap: 24px; }
  .ListingFunnel .lf-pcard-featured { transform: none; }   /* no scale once full-width (avoids overflow) */
}

/* REVERT-FALLBACK responsive (pre-horizontal) - uncomment with the layout fallback above:
@media (max-width: 1024px) {
  .ListingFunnel .lf-pricing-layout { grid-template-columns: 1fr; max-width: 640px; }
  .ListingFunnel .lf-order { position: static; }
  .ListingFunnel .lf-pcard-featured { transform: none; }
  .ListingFunnel .lf-trust-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
*/
@media (max-width: 640px) {
  .ListingFunnel .lf-pcard { padding: 28px 22px; }
  .ListingFunnel .lf-pcard-featured { padding-top: 54px; }
  .ListingFunnel .lf-pcard-head { flex-direction: column; gap: 6px; }
  .ListingFunnel .lf-pcard-price { text-align: left; align-items: flex-start; justify-content: flex-start; }
  .ListingFunnel .lf-trust-row { grid-template-columns: 1fr; gap: 16px; }
  .ListingFunnel .lf-mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 16px; background: #fff; border-top: 1px solid var(--lf-border); box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  }
  .ListingFunnel .lf-mobile-bar .lf-order-cta { width: auto; height: auto; margin-top: 0; flex: 0 0 auto; padding: 13px 22px; font-size: 15px; }
  .ListingFunnel .lf-mobile-bar-total { display: flex; flex-direction: column; line-height: 1.1; }
  .ListingFunnel .lf-mobile-bar-label { font-size: 11px; color: var(--lf-text-soft); }
  .ListingFunnel .lf-mobile-bar .lf-order-total-amt { font-size: 22px; font-weight: 800; }
  .ListingFunnel .lf-faq { margin-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-pcard-banner::after { animation: none; display: none; }
  .ListingFunnel .lf-faq-a { transition: none; }
}

/* =====================================================================
   Phase F3 - High-end pricing polish (new selectors)
   "Your game" summary, value stacks, Gold Game Listing accents,
   upsell strikethrough, brand-blue CTAs, inline icons.
   ===================================================================== */

/* ---- F3-2: "Your game" order-summary block ---- */
.ListingFunnel .lf-dg-label { font-size: 13px; font-weight: 700; color: var(--lf-text-muted); }
.ListingFunnel .lf-dg-head { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.ListingFunnel .lf-dg-thumb {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 12px;
  background-size: cover; background-position: center;
  background-color: var(--lf-bg-soft); border: 1px solid var(--lf-border);
}
.ListingFunnel .lf-dg-meta { min-width: 0; }
.ListingFunnel .lf-dg-name { font-weight: 700; font-size: 16px; color: var(--lf-text); line-height: 1.2; }
.ListingFunnel .lf-dg-teaser {
  margin-top: 3px; font-size: 12.5px; color: var(--lf-text-soft); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ListingFunnel .lf-dg-facts { margin: 14px 0 0; display: grid; gap: 7px; }
.ListingFunnel .lf-dg-fact { display: grid; grid-template-columns: 82px 1fr; gap: 8px; font-size: 12.5px; }
.ListingFunnel .lf-dg-fact dt { color: var(--lf-text-soft); font-weight: 600; }
.ListingFunnel .lf-dg-fact dd { margin: 0; color: var(--lf-text); font-weight: 500; }

/* ---- F3-6: Gold Game Listing accents ---- */
.ListingFunnel .lf-value-gold {
  color: #8a6300 !important; border-color: var(--lf-gold) !important;
  background: linear-gradient(180deg, #fff7e0, #fdeec2) !important;
}
.ListingFunnel .lf-gold-pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--lf-gold-2), var(--lf-gold)); color: #4a3500;
  font-size: 11px; font-weight: 800; vertical-align: middle;
}
.ListingFunnel .lf-feat-worth { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--lf-text-soft); }

/* ---- F3-3/4/5: value stacks ---- */
.ListingFunnel .lf-vstack {
  margin-top: 22px; padding: 16px 18px; border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius); background: var(--lf-bg-soft);
}
.ListingFunnel .lf-vstack-basic { background: transparent; border-style: dashed; }
.ListingFunnel .lf-vstack-title { font-size: 14px; font-weight: 700; color: var(--lf-text); margin-bottom: 10px; }
.ListingFunnel .lf-vstack-rows { list-style: none; margin: 0; padding: 0; }
.ListingFunnel .lf-vstack-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.ListingFunnel .lf-vs-label { color: var(--lf-text-muted); }
.ListingFunnel .lf-vs-label em { font-style: normal; color: var(--lf-text-soft); font-size: .9em; }
.ListingFunnel .lf-vs-amt { font-weight: 600; white-space: nowrap; color: var(--lf-text); }
.ListingFunnel .lf-vs-inc .lf-vs-amt { color: var(--lf-green); }
.ListingFunnel .lf-vstack-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lf-border-2); }
.ListingFunnel .lf-vs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0; font-size: 14px; }
.ListingFunnel .lf-vs-total { color: var(--lf-text-soft); }
.ListingFunnel .lf-vs-total s { opacity: .85; }
.ListingFunnel .lf-vs-today { font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-vs-today span:last-child { font-size: 16px; }
.ListingFunnel .lf-vs-save { color: var(--lf-green); font-weight: 700; }
.ListingFunnel .lf-vstack-note { margin: 10px 0 0; font-size: 12.5px; color: var(--lf-text-soft); font-weight: 500; }

/* ---- F3-5: upsell strikethrough rows ---- */
.ListingFunnel .lf-os-upsell { align-items: flex-start; }
.ListingFunnel .lf-os-upmain { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ListingFunnel .lf-os-upline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ListingFunnel .lf-os-upwas { color: var(--lf-text-soft); font-size: 12.5px; }
.ListingFunnel .lf-os-upnow { font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-os-upsave { font-size: 11.5px; font-style: italic; color: var(--lf-green); font-weight: 600; }
.ListingFunnel .lf-os-upname { font-weight: 600; }
.ListingFunnel .lf-os-updesc { font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--lf-text-soft); margin: 1px 0 3px; }

/* =====================================================================
   Phase L - Launch Package Proposal (4-tier layout)
   L2: cards full-width above, order summary 2-col below.
   ===================================================================== */

/* Stacked layout: cards row + summary row + compare table (no more sticky sidebar). */
.ListingFunnel .lf-pricing-layout-stacked {
  display: block; max-width: 1280px; margin: 0 auto;
}
.ListingFunnel .lf-pricing-layout-stacked > .lf-pricing-cards { margin-bottom: 28px; }
.ListingFunnel .lf-pricing-layout-stacked > .lf-order {
  display: block; position: static; max-width: 720px; margin: 0 auto;
}

/* 4-card grid: wide=4 cols, mid=2x2, mobile=1 col. Top padding reserves space for the Annual banner that floats above its card. */
.ListingFunnel .lf-pricing-cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: stretch; padding-top: 36px; }
.ListingFunnel .lf-pricing-cards-4 > .lf-pcard {
  padding: 24px 22px; display: flex; flex-direction: column;
}
.ListingFunnel .lf-pricing-cards-4 > .lf-pcard > .lf-pcard-main { flex: 1 1 auto; display: flex; flex-direction: column; }
.ListingFunnel .lf-pricing-cards-4 > .lf-pcard > .lf-pcard-main > .lf-feat { flex: 1 1 auto; }
/* Featured card no longer needs extra top padding - banner is lifted above it */
.ListingFunnel .lf-pricing-cards-4 > .lf-pcard-featured { overflow: visible; }

@media (max-width: 1180px) {
  .ListingFunnel .lf-pricing-cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .ListingFunnel .lf-pricing-cards-4 { grid-template-columns: 1fr; }
}

/* Per-tier badge pill at the top of each card */
.ListingFunnel .lf-pcard-badge-pill {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px; letter-spacing: .2px;
}
.ListingFunnel .lf-pcard-badge-pill.lf-badge-approved {
  color: #fff; background: var(--lf-blue, #0f73ff);
}
.ListingFunnel .lf-pcard-badge-pill.lf-badge-plus {
  color: #6b4400; background: linear-gradient(135deg, #ffd166 0%, #f0a500 100%);
}

/* Featured (Annual) card: banner sits absolute at the top; pill stays visible below it (per PDF S.1, all 4 cards carry a tier checkmark) */

/* Head: stack name + price; the $-sign sits inline next to the number (no wrap) */
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-name { margin: 0; font-size: 17px; font-weight: 700; }
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-price {
  display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
}
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-price .lf-price {
  display: inline-flex; align-items: baseline; gap: 1px;
}
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-price .lf-price-cur {
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--lf-text);
}
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-price .lf-price > :not(.lf-price-cur) {
  font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.5px;
}
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-price .lf-price-per {
  font-size: 12px; color: var(--lf-text-soft); font-weight: 500;
}

.ListingFunnel .lf-pcard-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--lf-text-soft); }
.ListingFunnel .lf-pcard-sub-strong { color: var(--lf-text); font-weight: 700; font-size: 13px; }
.ListingFunnel .lf-pcard-pitch { margin: 10px 0 12px; font-size: 13px; line-height: 1.45; color: var(--lf-text-muted); }

/* Feature list: leaner */
.ListingFunnel .lf-pricing-cards-4 .lf-feat { margin: 0 0 14px; padding: 0; list-style: none; }
.ListingFunnel .lf-pricing-cards-4 .lf-feat li { font-size: 13px; line-height: 1.5; padding: 4px 0 4px 18px; position: relative; }
.ListingFunnel .lf-pricing-cards-4 .lf-feat li::before {
  content: '\2713'; position: absolute; left: 0; top: 4px; color: var(--lf-green, #2db564); font-weight: 700;
}
.ListingFunnel .lf-pricing-cards-4 .lf-feat .lf-feat-hl { font-weight: 600; color: var(--lf-text); }

/* Foot pinned to the bottom; consistent card heights */
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lf-border); }
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-cta { width: 100%; margin: 10px 0 6px; }
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-note { font-size: 11.5px; color: var(--lf-text-soft); margin: 6px 0 0; text-align: center; line-height: 1.4; }

/* Value-stack box (Annual/Pro): more compact in the narrower cards */
.ListingFunnel .lf-pricing-cards-4 .lf-vstack { padding: 10px 12px; margin-top: 8px; }
.ListingFunnel .lf-pricing-cards-4 .lf-vstack-foot .lf-vs-row { font-size: 12px; padding: 3px 0; }

/* Upsells already included by the selected tier: clear "no charge, you've already got it" framing */
.ListingFunnel .lf-os-upsell.is-incl {
  pointer-events: none;
  background: rgba(45, 181, 100, .08);
  border: 1px solid rgba(45, 181, 100, .35);
  border-radius: var(--lf-radius-sm);
}
.ListingFunnel .lf-os-upsell.is-incl .lf-upsell-cb { visibility: hidden; }
.ListingFunnel .lf-os-upsell.is-incl .lf-os-upname { color: var(--lf-text); font-weight: 700; }
.ListingFunnel .lf-os-upsell.is-incl .lf-os-upline {
  text-decoration: line-through; text-decoration-color: rgba(15,23,42,.45);
  opacity: .55;
}
.ListingFunnel .lf-os-upsell.is-incl::after {
  content: '\2713  Included';
  display: inline-flex; align-items: center;
  background: var(--lf-green, #2db564); color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(45,181,100,.30);
}

/* Phase L2: featured card visual hierarchy + decoy framing */
.ListingFunnel .lf-pcard-annual {
  border-width: 2.5px; transform: none;       /* no scale: keeps heights aligned */
}
.ListingFunnel .lf-pcard-pro {
  border: 2px solid #f0a500;
  background: linear-gradient(180deg, rgba(240,165,0,.04) 0%, rgba(240,165,0,0) 38%), #fff;
}

/* Bold disclosure directly under price (PDF S.5: Stripe/EU auto-renew compliance).
   min-height: 2-line worst case so the disclose row aligns across all 4 cards. */
.ListingFunnel .lf-pcard-disclose {
  margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--lf-text); line-height: 1.35;
  min-height: 34px;
}
.ListingFunnel .lf-pcard-disclose .lf-disc-soft { font-weight: 500; color: var(--lf-text-muted); }

/* Pill row across all 4 cards: badge always sits at the same y position. Featured card uses the pill too (banner floats above) so they line up perfectly. */
.ListingFunnel .lf-pricing-cards-4 .lf-pcard-badge-pill { min-height: 22px; }

/* Mobile / mid-width: banner goes back inside the card (no room to float above between rows) */
@media (max-width: 1180px) {
  .ListingFunnel .lf-pricing-cards-4 { padding-top: 0; }
  .ListingFunnel .lf-pricing-cards-4 > .lf-pcard-featured { padding-top: 56px; overflow: hidden; }
  .ListingFunnel .lf-pcard-banner {
    top: 0; left: 0; right: 0;
    border-radius: calc(var(--lf-radius-lg) - 2px) calc(var(--lf-radius-lg) - 2px) 0 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
    padding: 10px 12px; font-size: 13px;
  }
}

/* Phase L (re-work): single-column order summary - linear flow, tight rhythm */
.ListingFunnel .lf-pricing-layout-stacked .lf-order-inner {
  display: block; padding: 28px;
  background: #fff; border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius-lg); box-shadow: var(--lf-shadow);
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-inner > * { margin-top: 16px; }
.ListingFunnel .lf-pricing-layout-stacked .lf-order-inner > :first-child { margin-top: 0; }

/* Dividers stay full-width and dim */
.ListingFunnel .lf-pricing-layout-stacked .lf-order-rule {
  border: 0; height: 1px; background: var(--lf-border); margin: 20px 0;
}

/* "Your game": compact thumb + name + teaser, facts inline as chips */
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-label {
  font-size: 12px; font-weight: 700; color: var(--lf-text-soft); margin-bottom: 8px;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-head {
  display: flex; gap: 14px; align-items: center;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-thumb {
  width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center;
  background-color: var(--lf-bg-soft); flex: 0 0 56px; border: 1px solid var(--lf-border);
}
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-name { font-size: 16px; font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-teaser { font-size: 12.5px; color: var(--lf-text-muted); margin-top: 2px; line-height: 1.4; }
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-facts {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-fact {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--lf-bg-soft); border-radius: 6px; padding: 4px 8px;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-fact dt {
  font-size: 11px; font-weight: 600; color: var(--lf-text-soft);
}
.ListingFunnel .lf-pricing-layout-stacked .lf-dg-fact dd {
  margin: 0; font-size: 11.5px; color: var(--lf-text); font-weight: 600;
}

/* Order header + section labels */
.ListingFunnel .lf-pricing-layout-stacked .lf-order-title,
.ListingFunnel .lf-pricing-layout-stacked .lf-os-label,
.ListingFunnel .lf-pricing-layout-stacked .lf-os-coupon-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--lf-text-soft); margin-bottom: 8px;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-selection { margin-top: 8px; }
.ListingFunnel .lf-pricing-layout-stacked .lf-order-empty {
  margin: 0; font-size: 13.5px; color: var(--lf-text-muted); font-style: italic;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-pkg {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 700; color: var(--lf-text);
}

/* Total: prominent, right-aligned amount */
.ListingFunnel .lf-pricing-layout-stacked .lf-order-discount,
.ListingFunnel .lf-pricing-layout-stacked .lf-order-total {
  display: flex; justify-content: space-between; align-items: baseline;
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-discount {
  font-size: 13px; color: var(--lf-green, #2db564);
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-total {
  font-size: 18px; font-weight: 800; color: var(--lf-text);
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-total-amt { font-size: 22px; }
.ListingFunnel .lf-pricing-layout-stacked .lf-order-sub {
  text-align: right; font-size: 12px; color: var(--lf-text-muted); margin-top: 4px;
}

/* CTA + trust line below */
.ListingFunnel .lf-pricing-layout-stacked .lf-order-cta { margin-top: 18px; }
.ListingFunnel .lf-pricing-layout-stacked .lf-order-trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; font-size: 12px; color: var(--lf-text-soft);
}
.ListingFunnel .lf-pricing-layout-stacked .lf-order-trust .lf-ico { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .ListingFunnel .lf-pricing-layout-stacked .lf-order-inner { padding: 20px; }
  .ListingFunnel .lf-pricing-layout-stacked .lf-order-inner > * { margin-top: 14px; }
  .ListingFunnel .lf-pricing-layout-stacked .lf-order-rule { margin: 16px 0; }
}

/* Compare-Table (PDF p.2) */
.ListingFunnel .lf-compare {
  max-width: 1280px; margin: 40px auto 0; padding: 28px; background: #fff;
  border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); box-shadow: var(--lf-shadow);
}
.ListingFunnel .lf-compare h2 { margin: 0 0 6px; font-size: 22px; }
.ListingFunnel .lf-compare-sub { margin: 0 0 18px; color: var(--lf-text-muted); font-size: 14px; }
.ListingFunnel .lf-compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ListingFunnel .lf-compare-table thead th {
  text-align: left; padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--lf-text);
  border-bottom: 1px solid var(--lf-border); position: sticky; top: 0; background: #fff;
}
.ListingFunnel .lf-compare-table thead th.lf-col-tier { text-align: center; min-width: 110px; }
.ListingFunnel .lf-compare-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--lf-border); color: var(--lf-text-muted); }
.ListingFunnel .lf-compare-table tbody td:first-child { color: var(--lf-text); }
.ListingFunnel .lf-compare-table tbody td.lf-cell { text-align: center; font-weight: 600; }
.ListingFunnel .lf-compare-table tbody td.lf-cell-yes { color: var(--lf-green, #2db564); }
.ListingFunnel .lf-compare-table tbody td.lf-cell-no { color: var(--lf-text-soft); }
.ListingFunnel .lf-compare-table tbody td.lf-cell-inc { color: var(--lf-green, #2db564); font-weight: 700; }
.ListingFunnel .lf-compare-table tbody tr.lf-compare-group td {
  background: var(--lf-bg-soft, #f6f8fb); font-size: 13px; font-weight: 700;
  color: var(--lf-text); padding: 10px 12px;
}
.ListingFunnel .lf-compare-table tbody tr.lf-compare-price td {
  background: var(--lf-blue-soft, rgba(15,115,255,.06));
  font-weight: 700; color: var(--lf-text);
}

@media (max-width: 760px) {
  .ListingFunnel .lf-compare { padding: 18px; margin-top: 28px; }
  .ListingFunnel .lf-compare-table { font-size: 12.5px; }
  .ListingFunnel .lf-compare-table thead th,
  .ListingFunnel .lf-compare-table tbody td { padding: 7px 8px; }
}

/* F4-14: scroll the compare table horizontally on narrow screens instead of
   clipping the right-hand tier columns. Desktop/tablet (>=760px) keep overflow
   visible so the above-positioned tooltip bubbles are never clipped. */
.ListingFunnel .lf-compare-scroll { max-width: 100%; }
.ListingFunnel .lf-compare-scrollhint { display: none; }
@media (max-width: 760px) {
  .ListingFunnel .lf-compare-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -4px; padding: 0 4px 2px;
  }
  .ListingFunnel .lf-compare-table { min-width: 560px; }
  .ListingFunnel .lf-compare-scrollhint {
    display: block; margin: 10px 0 0; font-size: 12px; color: var(--lf-text-soft); text-align: right;
  }
}

/* ---- F4-11 (§6): accessible (i) info tooltips on comparison-table feature names ---- */
.ListingFunnel .lf-tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; padding: 0; vertical-align: text-bottom;
  border: 0; border-radius: 50%; background: transparent; color: var(--lf-text-soft);
  cursor: help; flex: 0 0 auto;
}
.ListingFunnel .lf-tip svg { width: 15px; height: 15px; display: block; }
.ListingFunnel .lf-tip:hover { color: var(--lf-blue); }
.ListingFunnel .lf-tip:focus { outline: none; }
.ListingFunnel .lf-tip:focus-visible { color: var(--lf-blue); outline: 2px solid var(--lf-blue); outline-offset: 2px; }
.ListingFunnel .lf-tip-bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 240px; padding: 8px 10px;
  background: #0f172a; color: #fff; font-size: 12px; line-height: 1.45; font-weight: 500;
  text-align: left; white-space: normal; border-radius: 8px; box-shadow: 0 6px 20px rgba(2,12,27,.22);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 40; pointer-events: none;
}
.ListingFunnel .lf-tip-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #0f172a;
}
.ListingFunnel .lf-tip:hover .lf-tip-bubble,
.ListingFunnel .lf-tip:focus .lf-tip-bubble,
.ListingFunnel .lf-tip:focus-visible .lf-tip-bubble { opacity: 1; visibility: visible; }
@media (max-width: 760px) {
  /* F4-14: keep the bubble above the icon (its default) but LEFT-anchor it. The old
     right-anchoring ran first-column bubbles off the viewport's left edge; left-anchoring
     extends the bubble rightward into the table instead. Above-positioning is contained by
     the group-header + thead rows above each cell, so nothing clips at the scroll-box edges. */
  .ListingFunnel .lf-tip-bubble { left: -6px; right: auto; transform: none; max-width: min(240px, 72vw); }
  .ListingFunnel .lf-tip-bubble::after { left: 12px; right: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-tip-bubble { transition: none; }
}

/* ---- F3-9 / bug #3: brand-blue CTAs (override global indigo .Button) ---- */
.ListingFunnel .lf-order-cta {
  width: 100%; height: auto; padding: 16px 28px; margin-top: 18px;
  border: 0; border-radius: 12px; font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--lf-blue) 0%, var(--lf-blue-strong) 100%);
  box-shadow: 0 6px 16px rgba(15,115,255,.30);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ListingFunnel .lf-order-cta:hover:not([disabled]) {
  color: #fff; border: 0; transform: translateY(-2px);
  background: linear-gradient(135deg, var(--lf-blue) 0%, var(--lf-blue-strong) 100%);
  box-shadow: 0 12px 26px rgba(15,115,255,.42);
}
.ListingFunnel .lf-order-cta[disabled] { opacity: .5; box-shadow: none; pointer-events: none; cursor: not-allowed; }

/* card CTAs: light-blue always (Basic/Plus), full-blue on hover; filled gradient (featured Bundle) */
.ListingFunnel .lf-pcard-cta {
  border: 2px solid var(--lf-blue); color: var(--lf-blue-strong); background: var(--lf-blue-soft);
  font-weight: 800; letter-spacing: .15px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ListingFunnel .lf-pcard:not(.lf-pcard-featured) .lf-pcard-cta:hover {
  background: linear-gradient(135deg, var(--lf-blue) 0%, var(--lf-blue-strong) 100%);
  color: #fff; border-color: var(--lf-blue-strong);
  box-shadow: 0 8px 18px rgba(15,115,255,.30); transform: translateY(-1px);
}
.ListingFunnel .lf-pcard-featured .lf-pcard-cta {
  border: 0; color: #fff;
  background: linear-gradient(135deg, var(--lf-blue) 0%, var(--lf-blue-strong) 100%);
  box-shadow: 0 6px 16px rgba(15,115,255,.30);
}
.ListingFunnel .lf-pcard-featured .lf-pcard-cta:hover { color: #fff; border: 0; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,115,255,.42); }

/* inline lock icon in the secure-payment microcopy */
.ListingFunnel .lf-order-trust { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.ListingFunnel .lf-ico { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---- F3-12: value-strip pill polish (subtle inner highlight + gradient) ---- */
.ListingFunnel .lf-value-strip span {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}

/* ===================================================================
   Plus page (/list-your-game/plus) - "add Plus to an existing listing"
   =================================================================== */
.ListingFunnel .lf-eyebrow.lf-gold { background: rgba(224,161,6,.12); color: #a9760a; }

.ListingFunnel .lf-plus-hero { margin-bottom: 28px; text-align: center; }
.ListingFunnel .lf-plus-hero h1 { margin-top: 10px; }
.ListingFunnel .lf-plus-hero .lf-sub { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---- 3-tier picker on /plus (radio-card pattern) -------------------- */
.ListingFunnel .lf-ptiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 6px 0 30px;
}
.ListingFunnel .lf-ptier {
  position: relative;
  display: block;
  padding: 18px 18px 20px;
  border: 1.5px solid var(--lf-border);
  border-radius: var(--lf-radius-lg);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ListingFunnel .lf-ptier:hover { border-color: var(--lf-blue); box-shadow: 0 2px 12px rgba(15,115,255,.06); }
.ListingFunnel .lf-ptier.is-selected {
  border-color: var(--lf-blue);
  box-shadow: 0 0 0 3px rgba(15,115,255,.12), 0 2px 14px rgba(15,115,255,.10);
}
.ListingFunnel .lf-ptier-input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.ListingFunnel .lf-ptier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ListingFunnel .lf-ptier-label { font-size: 15px; font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-ptier-pill {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: rgba(224,161,6,.14); color: #a9760a; letter-spacing: .02em;
}
.ListingFunnel .lf-ptier-price { display: inline-flex; align-items: baseline; gap: 4px; }
.ListingFunnel .lf-ptier-amount { font-size: 26px; font-weight: 800; color: var(--lf-text); letter-spacing: -.02em; white-space: nowrap; }
.ListingFunnel .lf-ptier-cadence { font-size: 13px; color: var(--lf-text-soft); font-weight: 600; }
.ListingFunnel .lf-ptier-eff { margin-top: 2px; font-size: 12.5px; color: var(--lf-text-soft); }
.ListingFunnel .lf-ptier-save {
  margin-top: 8px; display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(51,185,52,.12); color: #1f7a20;
}
.ListingFunnel .lf-ptier-tag { margin: 12px 0 14px; font-size: 13px; color: var(--lf-text-muted); line-height: 1.4; }
.ListingFunnel .lf-ptier-feats {
  list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--lf-border);
  display: flex; flex-direction: column; gap: 8px;
}
.ListingFunnel .lf-ptier-feats li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.4; color: var(--lf-text);
}
.ListingFunnel .lf-ptier-feats li svg {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px;
  color: #1f8f2e;
}
.ListingFunnel .lf-ptier-feats li.is-lead { font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-ptier-feats li.is-lead svg { color: var(--lf-blue); }
.ListingFunnel .lf-ptier-check {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lf-blue); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.ListingFunnel .lf-ptier-check svg { width: 14px; height: 14px; display: block; }
.ListingFunnel .lf-ptier.is-selected .lf-ptier-check { display: inline-flex; }

/* ---- compact 3-benefit list ----------------------------------------- */
.ListingFunnel .lf-plus-bens {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ListingFunnel .lf-plus-bens li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--lf-border); border-radius: var(--lf-radius); background: #fff;
}
.ListingFunnel .lf-plus-bens svg {
  flex: 0 0 auto; width: 22px; height: 22px;
  color: var(--lf-blue-strong);
}
.ListingFunnel .lf-plus-bens li:first-child svg { color: var(--lf-gold); }
.ListingFunnel .lf-plus-bens div { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.ListingFunnel .lf-plus-bens b { font-size: 14px; font-weight: 700; color: var(--lf-text); }
.ListingFunnel .lf-plus-bens span { font-size: 12.5px; color: var(--lf-text-soft); }

/* ---- action card: game picker / empty / no-account ------------------ */
.ListingFunnel .lf-plus-action { margin-top: 4px; }
.ListingFunnel .lf-plus-acttitle { font-size: clamp(20px, 2.6vw, 26px); }
.ListingFunnel .lf-plus-games { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ListingFunnel .lf-plus-game {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--lf-border); border-radius: var(--lf-radius); background: var(--lf-bg-alt);
}
.ListingFunnel .lf-plus-game-name { font-weight: 600; color: var(--lf-text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ListingFunnel .lf-plus-game .lf-plus-add { flex: 0 0 auto; }
.ListingFunnel .lf-plus-game-state { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--lf-gold); display: inline-flex; align-items: center; gap: 6px; }
.ListingFunnel .lf-plus-game.is-plus { opacity: .72; }
.ListingFunnel .lf-plus-add.is-loading { opacity: .6; pointer-events: none; }
/* F4-10 (§5): per-game actions row + the one-time $99 Basic "Approved badge" buy / owned chip */
.ListingFunnel .lf-plus-game-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ListingFunnel .lf-badge-buy {
  flex: 0 0 auto; white-space: nowrap; font-weight: 700;
  background: #fff; color: var(--lf-blue-strong);
  border: 1.5px solid var(--lf-blue); border-radius: var(--lf-radius-sm);
}
.ListingFunnel .lf-badge-buy:hover { background: var(--lf-blue-soft); }
.ListingFunnel .lf-badge-buy.is-loading { opacity: .6; pointer-events: none; }
.ListingFunnel .lf-plus-game-state svg { width: 15px; height: 15px; }
.ListingFunnel .lf-plus-game-state.lf-plus-game-owned { color: var(--lf-blue-strong); }
.ListingFunnel .lf-plus-hint { margin-top: 12px; font-size: 12.5px; color: var(--lf-text-soft); }
.ListingFunnel .lf-plus-err { margin-top: 14px; color: var(--lf-red); font-size: 13.5px; }
.ListingFunnel .lf-plus-foot { margin-top: 22px; font-size: 13px; color: var(--lf-text-soft); }

.ListingFunnel .lf-plus-flash { margin-bottom: 22px; padding: 14px 16px; border-radius: var(--lf-radius); font-size: 14px; font-weight: 500; }
.ListingFunnel .lf-plus-flash-ok { background: rgba(51,185,52,.10); border: 1px solid rgba(51,185,52,.30); color: #1f7a20; }
.ListingFunnel .lf-plus-flash-warn { background: rgba(224,161,6,.10); border: 1px solid rgba(224,161,6,.30); color: #8a6300; }

@media (max-width: 820px) {
  .ListingFunnel .lf-ptiers { grid-template-columns: 1fr; }
  .ListingFunnel .lf-plus-bens { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ListingFunnel .lf-plus-game { flex-wrap: wrap; }
  .ListingFunnel .lf-plus-game-actions { width: 100%; justify-content: stretch; }
  .ListingFunnel .lf-plus-game .lf-plus-add,
  .ListingFunnel .lf-plus-game .lf-badge-buy { flex: 1 1 auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ListingFunnel .lf-order-cta,
  .ListingFunnel .lf-pcard-cta,
  .ListingFunnel .lf-faq-item { transition: none; }
}

/* ===================================================================
   Phase F4 - Pricing toggle revision (UPDATEPLAN PDF)
   Billing toggle + Annual 3-card / Monthly 2-card sets. Reuses the
   .lf-pcard infrastructure; this block overrides the 4-col grid with a
   centered flex row and styles the new card chrome (tinted header bar,
   sub-label, value pill, ribbon).
   =================================================================== */

/* --- billing toggle (default Annual) --- */
.ListingFunnel .lf-toggle-wrap { margin: 4px 0 16px; }
.ListingFunnel .lf-toggle {
  display: inline-flex; align-items: stretch; gap: 4px; padding: 4px;
  background: var(--lf-bg-soft); border: 1px solid var(--lf-border); border-radius: 999px;
}
.ListingFunnel .lf-toggle-btn {
  appearance: none; border: 0; cursor: pointer; background: transparent; font: inherit;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--lf-text-muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.ListingFunnel .lf-toggle-btn:hover { color: var(--lf-text); }
.ListingFunnel .lf-toggle-btn.is-active {
  background: #fff; color: var(--lf-text);
  box-shadow: 0 1px 3px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
}
.ListingFunnel .lf-toggle-btn:focus-visible { outline: 3px solid rgba(15,115,255,.4); outline-offset: 2px; }
.ListingFunnel .lf-toggle-save {
  font-size: 12px; font-weight: 800; color: var(--lf-green);
  background: rgba(51,185,52,.12); padding: 2px 8px; border-radius: 999px;
}

/* --- monthly nudge banner --- */
.ListingFunnel .lf-monthly-nudge {
  max-width: 760px; margin: 0 auto 22px; text-align: center;
  background: rgba(224,161,6,.10); border: 1px solid rgba(224,161,6,.30); border-radius: var(--lf-radius);
  padding: 12px 18px; font-size: 14px; color: #8a6300; font-weight: 600;
}
.ListingFunnel .lf-nudge-link {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-weight: 800; color: #a9760a; text-decoration: underline; padding: 0; margin-left: 4px;
}
.ListingFunnel .lf-nudge-link:hover { color: #7a5600; }

/* --- toggle card row: override the 4-col grid with a centered flex row --- */
.ListingFunnel .lf-pricing-cards-toggle {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 22px; padding-top: 30px;
}
.ListingFunnel .lf-pricing-cards-toggle > .lf-pcard { flex: 1 1 300px; max-width: 360px; min-width: 0; padding: 28px; }
.ListingFunnel .lf-pricing-cards-toggle > .lf-pcard[hidden] { display: none; }
.ListingFunnel .lf-pricing-cards-toggle .lf-pcard-featured { padding: 44px 28px 28px; }

/* tinted header bar carrying the tier name (PDF card head) */
.ListingFunnel .lf-pcard-bar {
  display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--lf-radius-sm);
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
}
.ListingFunnel .lf-pcard-bar-basic { background: var(--lf-blue-soft); color: var(--lf-blue-strong); }
.ListingFunnel .lf-pcard-bar-plus  { background: rgba(224,161,6,.14); color: #8a6300; }

/* price sub-label + descriptor */
.ListingFunnel .lf-pcard-sublabel { margin: 4px 0 0; font-size: 13px; color: var(--lf-text-soft); }
.ListingFunnel .lf-pricing-cards-toggle .lf-pcard-pitch { margin: 10px 0 14px; font-size: 13.5px; color: var(--lf-text-muted); line-height: 1.5; min-height: 38px; }

/* feature list grows so the value pill + button align across cards */
.ListingFunnel .lf-pricing-cards-toggle .lf-feat { margin: 0 0 16px; }
.ListingFunnel .lf-pricing-cards-toggle .lf-feat li { font-size: 13.5px; padding: 5px 0 5px 22px; }

/* value / highlight pill (above the button) */
.ListingFunnel .lf-pcard-value {
  margin: 0 0 12px; padding: 10px 14px; border-radius: var(--lf-radius-sm);
  text-align: center; font-size: 13.5px; font-weight: 800; line-height: 1.3;
}
.ListingFunnel .lf-pcard-value-grey  { background: var(--lf-bg-soft); color: var(--lf-text-muted); }
.ListingFunnel .lf-pcard-value-green { background: rgba(51,185,52,.12); color: #1f7a20; }
.ListingFunnel .lf-pcard-value-gold  { background: rgba(224,161,6,.16); color: #8a6300; }
.ListingFunnel .lf-pcard-value-blue  { background: var(--lf-blue-soft); color: var(--lf-blue-strong); }

/* featured ribbon pill (Best seller / Recommended) on the top edge */
.ListingFunnel .lf-pcard-ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; padding: 7px 16px; line-height: 1.2; z-index: 2;
  background: linear-gradient(90deg, var(--lf-blue-strong) 0%, var(--lf-blue) 55%, #00c8ff 100%);
  box-shadow: 0 6px 18px rgba(15,115,255,.35);
}

/* F4-9: "Free" rendering when a tier already includes an upsell */
.ListingFunnel .lf-os-upfree { font-weight: 800; color: var(--lf-green); }
.ListingFunnel .lf-os-upsell.is-incl { opacity: .9; cursor: default; }
.ListingFunnel .lf-os-upsell.is-incl:hover { background: transparent; }

@media (max-width: 1024px) {
  .ListingFunnel .lf-pricing-cards-toggle > .lf-pcard { flex-basis: 320px; }
  .ListingFunnel .lf-pricing-cards-toggle .lf-pcard-featured { transform: none; }
}
@media (max-width: 720px) {
  .ListingFunnel .lf-pricing-cards-toggle { gap: 30px; padding-top: 26px; }
  .ListingFunnel .lf-pricing-cards-toggle > .lf-pcard { flex: 1 1 100%; max-width: 440px; }
}

/* =====================================================================
   Phase F5 - Pricing page high-end redesign (DESIGN-ONLY re-skin)
   Spec: PRICING_DESIGN_CLONE.md - clone Linear's restraint in LIGHT mode
   with the single PlayToEarn blue accent + Vercel-style compare table.

   Scope: the SHARED root class `.ListingFunnel.lf-funnel-f5`. Both the pricing
   page (`.lf-pricing-page`) and the Plus upgrade page (`.lf-plus-page`) carry
   `lf-funnel-f5`, so this one design system skins BOTH (the /plus page was
   brought onto the same toggle + .lf-pcard card concept as pricing). Rules that
   use pricing-only inner classes (`.lf-pricing-hero`, `.lf-pricing-layout-stacked`,
   `.lf-order*`, `.lf-os-*`) still only match the pricing page; the card / toggle /
   compare-table / trust / faq rules are shared. The landing page does NOT carry
   `lf-funnel-f5`, so it stays untouched. This block re-skins by:
     (a) redefining the core --lf-* surface/text/blue/border/radius/shadow
         tokens on the funnel-f5 root, so the page inherits the premium palette;
     (b) targeted overrides that kill the green/gold decorative noise
         (one accent = blue), de-box the cards (no fake-button boxes),
         calm the checks to muted gray, and elevate the featured card
         subtly (soft lift + soft shadow + thin blue border).
   Blue/gold are kept ONLY where they are the real Approved/Plus badge
   representations (the compare-table badge cells stay blue/gold).
   ===================================================================== */

/* ---- F5-1: premium design tokens (spec §2), scoped to the pricing page ---- */
.ListingFunnel.lf-funnel-f5 {
  /* The single accent (blue) - brand blue #0012FF (entry #39: buttons + badges) */
  --lf-blue:        #0012FF;
  --lf-blue-strong: #000FCC;   /* hover / active (slightly darker) */
  --lf-blue-dark:   #000FCC;
  --lf-blue-soft:   #EFF4FF;   /* featured tint / soft fills */

  /* Surfaces */
  --lf-bg:      #FFFFFF;
  --lf-bg-alt:  #FAFBFC;       /* page background - barely-there gray */
  --lf-bg-soft: #F4F6F8;       /* subtle fills (compare stripes, chips) */

  /* Borders */
  --lf-border:   #E8EBEF;      /* default card/divider border - very light */
  --lf-border-2: #D7DCE2;      /* --border-strong */

  /* Text (no pure #000) */
  --lf-text:       #0A0E16;    /* near-black headings + prices */
  --lf-text-muted: #5B6472;    /* secondary */
  --lf-text-soft:  #98A1AE;    /* tertiary / captions / dashes */

  /* Calm gray-blue check (NOT bright green) */
  --lf-check: #8A94A4;

  /* Radius - cards 16, buttons/inputs 10, pills 100 */
  --lf-radius-sm: 10px;
  --lf-radius:    12px;
  --lf-radius-lg: 16px;

  /* Soft, low-opacity shadows */
  --lf-shadow-sm:   0 1px 2px rgba(10,14,22,.04), 0 4px 12px rgba(10,14,22,.04);
  --lf-shadow:      0 2px 6px rgba(10,14,22,.05), 0 10px 24px rgba(10,14,22,.06);
  --lf-shadow-lg:   0 10px 30px rgba(10,14,22,.10);
  --lf-shadow-blue: 0 8px 24px rgba(37,99,235,.10), 0 2px 8px rgba(37,99,235,.06);  /* featured */
}

/* ---- F5-7: spacing rhythm (spec §8) - section breathing room, 8px scale ---- */
.ListingFunnel.lf-funnel-f5 .lf-pricing-hero { margin: 0 auto 48px; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-layout-stacked > .lf-pricing-cards { margin-bottom: 40px; }
.ListingFunnel.lf-funnel-f5 .lf-compare   { margin-top: 80px; padding: 32px; }
.ListingFunnel.lf-funnel-f5 .lf-trust-row { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--lf-border); }
.ListingFunnel.lf-funnel-f5 .lf-faq       { margin-top: 80px; }

/* =====================================================================
   F5-2: pricing cards (spec §3) - de-box, plain names, big calm price,
   gray checks, equal heights + button pinned to bottom, subtle featured
   elevation, Plus Pro NO highlight border.
   ===================================================================== */

/* Card container: 1px border, 16 radius, 32 padding, soft shadow */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle { gap: 24px; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard {
  padding: 32px; background: #fff;
  border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg);
  box-shadow: var(--lf-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:not(.lf-pcard-featured):hover {
  border-color: var(--lf-border-2); box-shadow: var(--lf-shadow); transform: none;
}
.ListingFunnel.lf-funnel-f5 .lf-pcard.is-selected {
  border-color: var(--lf-blue); box-shadow: 0 0 0 1px var(--lf-blue), var(--lf-shadow);
}
.ListingFunnel.lf-funnel-f5 .lf-pcard:focus-visible {
  outline: 3px solid rgba(37,99,235,.4); outline-offset: 2px;
}

/* Featured (Plus Annual / Plus Monthly): subtle lift, NOT a loud scale/glow */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured {
  border: 1.5px solid var(--lf-blue); background: #fff;
  box-shadow: var(--lf-shadow-blue);
  transform: translateY(-4px);      /* subtle lift - just enough to read as elevated */
  padding: 40px 32px 32px;          /* top room for the ribbon */
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured:hover {
  box-shadow: 0 12px 30px rgba(37,99,235,.14), 0 3px 10px rgba(37,99,235,.08);
  transform: translateY(-6px);
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured.is-selected {
  box-shadow: 0 0 0 1px var(--lf-blue), var(--lf-shadow-blue);
}

/* Featured ribbon: clean solid-blue pill, no gradient, no shimmer */
.ListingFunnel.lf-funnel-f5 .lf-pcard-ribbon {
  top: -13px; background: var(--lf-blue);
  box-shadow: 0 4px 12px rgba(37,99,235,.30);
  font-size: 12px; font-weight: 700; padding: 6px 14px; letter-spacing: .01em;
}

/* === entry #19: join the three package cards into one seamless group ======
   No gap, shared inner borders, only the OUTER corners rounded. The featured
   Plus card's lift + blue border + shadow are flattened so the row stays flush
   (the ribbon still marks it). Selected/hover raise z-index so the highlight
   ring isn't clipped by the neighbouring card. */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle { gap: 0; flex-wrap: nowrap; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard {
  flex: 1 1 0; max-width: none; border-radius: 0; box-shadow: none; transform: none;
  border: 1px solid var(--lf-border); border-right-width: 0;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured {
  border: 1px solid var(--lf-border); border-right-width: 0; box-shadow: none; transform: none;
  /* entry #33: keep visible so the "Best seller" ribbon (floats above the top edge) is never
     clipped - an old @media(<=1180px) rule on .lf-pricing-cards-4 sets overflow:hidden here. */
  overflow: visible;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured:hover { box-shadow: none; transform: none; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:not(.lf-pcard-featured):hover {
  box-shadow: none; border-color: var(--lf-blue);
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:last-child { border-right-width: 1px; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:first-child {
  border-top-left-radius: var(--lf-radius-lg); border-bottom-left-radius: var(--lf-radius-lg);
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:last-child {
  border-top-right-radius: var(--lf-radius-lg); border-bottom-right-radius: var(--lf-radius-lg);
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:hover,
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard.is-selected { position: relative; z-index: 1; }
/* entry #38: selected state = a uniform 2px blue frame on ALL FOUR sides. The joined cards
   collapse their inner borders (border-right-width:0), so a plain border can't show the right
   edge. An inset outline (offset:-2px) draws a complete frame at the card edge regardless of
   which borders are collapsed - same on Basic, Plus and Plus Pro, no layout shift, not clipped
   by the neighbouring card. */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard.is-selected {
  border-color: var(--lf-blue); box-shadow: none;
  outline: 2px solid var(--lf-blue); outline-offset: -2px;
}
@media (max-width: 720px) {
  /* stacked: join VERTICALLY instead (shared horizontal borders, outer top/bottom radius) */
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle { gap: 0; flex-wrap: wrap; padding-top: 26px; }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard {
    flex: 1 1 100%; max-width: 440px; border-right-width: 1px; border-bottom-width: 0;
  }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:last-child { border-bottom-width: 1px; }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:first-child { border-radius: var(--lf-radius-lg) var(--lf-radius-lg) 0 0; }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:last-child  { border-radius: 0 0 var(--lf-radius-lg) var(--lf-radius-lg); }
}

/* Tier name: clean bold text with real presence (Linear/Stripe/Vercel) - NO pills, NO icons */
.ListingFunnel.lf-funnel-f5 .lf-pcard-bar,
.ListingFunnel.lf-funnel-f5 .lf-pcard-bar-basic,
.ListingFunnel.lf-funnel-f5 .lf-pcard-bar-plus {
  margin: 0; padding: 0; background: none; border-radius: 0;
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--lf-text);
}
/* Short tagline directly under the name - gives the tier context before the price hits.
   (Replaces the prior floating descriptor sentence; one contextual line, no duplication.) */
.ListingFunnel.lf-funnel-f5 .lf-pcard-tagline {
  margin: 4px 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--lf-text-muted);
}

/* Price: one big number, raised small "$", muted period; tabular-nums */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-price {
  display: flex; justify-content: flex-start; align-items: baseline; flex-wrap: nowrap;
  gap: 5px; margin: 16px 0 0; text-align: left;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-price .lf-price {
  align-items: baseline; font-size: 52px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--lf-text); font-variant-numeric: tabular-nums;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-price .lf-price-cur {
  align-self: flex-start; margin-top: .14em; margin-right: 1px;
  font-size: .55em; font-weight: 600; color: var(--lf-text-muted);
}
/* entry #18: the price digits live in their own span now (so GSAP can count them up).
   Global `* { font-size:14px }` would otherwise shrink it - force it back to the .lf-price size. */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-price .lf-price-num {
  font-size: inherit; font-weight: inherit; letter-spacing: inherit;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-price .lf-price-per {
  font-size: 15px; font-weight: 500; color: var(--lf-text-soft);
}

/* Price sub-label + descriptor */
.ListingFunnel.lf-funnel-f5 .lf-pcard-sublabel {
  margin: 8px 0 0; font-size: 14px; font-weight: 500; color: var(--lf-text-muted);
}
/* Feature rows: calm GRAY checks (not green), 12px row rhythm. The lists no longer flex-grow -
   instead the value pill's margin-top:auto pins the bottom group, so the included + (Basic)
   not-included lists sit contiguously at the top and fill the card height. */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard > .lf-pcard-main > .lf-feat { flex: 0 0 auto; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat { margin: 18px 0 12px; }

/* Basic "Not included" block - muted, dash markers; fills the shorter card's dead space. */
.ListingFunnel.lf-funnel-f5 .lf-pcard-out { margin: 0 0 4px; }
.ListingFunnel.lf-funnel-f5 .lf-pcard-out-label {
  display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lf-text-soft);
}
.ListingFunnel.lf-funnel-f5 .lf-feat-out { list-style: none; margin: 0; padding: 0; }
.ListingFunnel.lf-funnel-f5 .lf-feat-out li {
  position: relative; padding: 6px 0 6px 26px; font-size: 14px; line-height: 1.45; color: var(--lf-text-soft);
}
.ListingFunnel.lf-funnel-f5 .lf-feat-out li::before {
  content: "-"; position: absolute; left: 0; top: 6px; color: var(--lf-text-soft); font-weight: 600;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li {
  padding: 6px 0 6px 26px; font-size: 14px; line-height: 1.45; color: var(--lf-text);
}
/* entry #22: custom Tabler "check" icon (mask) replaces the unicode tick in every
   card feature list. Coloured via background-color so it keeps the --lf-check tone. */
.ListingFunnel.lf-funnel-f5 {
  --lf-check-svg: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20.707%206.293a1%201%200%200%201%200%201.414l-10%2010a1%201%200%200%201%20-1.414%200l-5%20-5a1%201%200%200%201%201.414%20-1.414l4.293%204.293l9.293%20-9.293a1%201%200%200%201%201.414%200%22/%3E%3C/svg%3E');
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li::before {
  content: ""; left: 0; top: 5px; width: 15px; height: 15px;
  background-color: var(--lf-check);
  -webkit-mask: var(--lf-check-svg) center / 15px 15px no-repeat;
          mask: var(--lf-check-svg) center / 15px 15px no-repeat;
}

/* === entry #18: merged Plus card (Monthly<->Annual) + Plus Pro lock ====== */
/* feature rows fade their colour as the included-state flips on toggle */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li { transition: color .3s ease; }
/* annual-only rows: included (check) on Annual; greyed with an "Annual only" tag on Monthly */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li.lf-feat-annual {
  display: flex; align-items: baseline; gap: 8px;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li.lf-feat-annual .lf-feat-txt { flex: 1 1 auto; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li.lf-feat-annual .lf-feat-tag { display: none; }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li.lf-feat-annual.is-off { color: var(--lf-text-soft); }
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li.lf-feat-annual.is-off::before {
  content: "-"; color: var(--lf-text-soft); top: 6px; width: auto; height: auto;
  background: none; -webkit-mask: none; mask: none;
}
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-feat li.lf-feat-annual.is-off .lf-feat-tag {
  display: inline-block; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--lf-blue-strong); background: var(--lf-blue-soft);
  padding: 2px 7px; border-radius: 999px;
}

/* Plus Pro lock state (Annual only). The card stays in place; its inner content greys out
   (except the "switch to Annual" note) and the top-right badge stays crisp. */
.ListingFunnel.lf-funnel-f5 .lf-pcard-pro-plain { position: relative; }
.ListingFunnel.lf-funnel-f5 .lf-pcard.is-locked { cursor: not-allowed; }
.ListingFunnel.lf-funnel-f5 .lf-pcard.is-locked .lf-pcard-main > *:not(.lf-pcard-locknote) {
  opacity: .5; filter: grayscale(.9); transition: opacity .35s ease, filter .35s ease;
}
.ListingFunnel.lf-funnel-f5 .lf-pcard.is-locked .lf-pcard-cta { pointer-events: none; }
.ListingFunnel.lf-funnel-f5 .lf-pcard-lockbadge {
  display: none; position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--lf-text-soft); background: #f3f4f6; border: 1px solid var(--lf-border);
  padding: 3px 9px; border-radius: 999px;
}
.ListingFunnel.lf-funnel-f5 .lf-pcard.is-locked .lf-pcard-lockbadge { display: inline-block; }
.ListingFunnel.lf-funnel-f5 .lf-pcard-locknote {
  margin: 10px 0 0; font-size: 12.5px; color: var(--lf-text-soft); text-align: center; line-height: 1.4;
}
.ListingFunnel.lf-funnel-f5 .lf-locknote-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--lf-blue-strong); cursor: pointer; text-decoration: underline;
}

/* Value line: Plus tiers = calm blue-soft pill; Basic/Monthly descriptor = muted text.
   (Replaces the green/gold value boxes + the "fake-button" descriptor boxes.) */
.ListingFunnel.lf-funnel-f5 .lf-pcard-value {
  margin: auto 0 16px;          /* margin-top:auto pins this + the button/note to the card bottom */
  align-self: flex-start;       /* keep the pill content-width + left-aligned (no stretch) */
  padding: 0; border-radius: 0; background: none;
  text-align: left; font-size: 14px; font-weight: 600; line-height: 1.4;
}
/* F5 fix: ALL four pre-button lines share the SAME calm value-pill style (only the text
   differs - Basic "Pay once - Listed forever" / Plus tiers "$X in value"). The pill is one
   line, bottom-pinned directly above the button (the feature list flex-grows), so the lines
   sit on the same baseline across the cards. */
.ListingFunnel.lf-funnel-f5 .lf-pcard-value-grey,
.ListingFunnel.lf-funnel-f5 .lf-pcard-value-green,
.ListingFunnel.lf-funnel-f5 .lf-pcard-value-gold,
.ListingFunnel.lf-funnel-f5 .lf-pcard-value-blue {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--lf-blue-soft); color: var(--lf-blue-strong); font-weight: 600; font-size: 14px;
}

/* Buttons (spec §3): featured = solid blue; non-featured = clean white outlined */
.ListingFunnel.lf-funnel-f5 .lf-pcard-cta {
  height: auto; padding: 13px 18px; font-size: 15px; font-weight: 600; letter-spacing: 0;
  border-radius: var(--lf-radius-sm); box-shadow: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ListingFunnel.lf-funnel-f5 .lf-pcard:not(.lf-pcard-featured) .lf-pcard-cta {
  background: #fff; border: 1.5px solid var(--lf-border-2); color: var(--lf-text);
}
.ListingFunnel.lf-funnel-f5 .lf-pcard:not(.lf-pcard-featured) .lf-pcard-cta:hover {
  background: var(--lf-blue-soft); border-color: var(--lf-blue); color: var(--lf-blue-strong);
  box-shadow: none; transform: translateY(-1px);
}
.ListingFunnel.lf-funnel-f5 .lf-pcard-featured .lf-pcard-cta {
  background: var(--lf-blue); border: 0; color: #fff;
}
.ListingFunnel.lf-funnel-f5 .lf-pcard-featured .lf-pcard-cta:hover {
  background: var(--lf-blue-strong); color: #fff; transform: translateY(-1px); box-shadow: var(--lf-shadow-sm);
}

/* Under-button note: single muted caption line */
.ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-note {
  margin: 8px 0 0; font-size: 13px; color: var(--lf-text-soft); line-height: 1.4; text-align: center;
}

/* =====================================================================
   F5-3: billing toggle (spec §4) - clean segmented control, calm "Save 40%"
   ===================================================================== */
.ListingFunnel.lf-funnel-f5 .lf-toggle {
  background: var(--lf-bg-soft); border: 1px solid var(--lf-border); border-radius: 999px;
}
.ListingFunnel.lf-funnel-f5 .lf-toggle-btn { color: var(--lf-text-muted); font-weight: 600; border-radius: 999px; }
.ListingFunnel.lf-funnel-f5 .lf-toggle-btn:hover { color: var(--lf-text); }
.ListingFunnel.lf-funnel-f5 .lf-toggle-btn.is-active {
  background: #fff; color: var(--lf-text);
  box-shadow: 0 1px 2px rgba(10,14,22,.10), 0 2px 6px rgba(10,14,22,.06);
}
.ListingFunnel.lf-funnel-f5 .lf-toggle-btn:focus-visible { outline: 3px solid rgba(37,99,235,.4); outline-offset: 2px; }
.ListingFunnel.lf-funnel-f5 .lf-toggle-save {
  color: var(--lf-blue-strong); background: var(--lf-blue-soft); font-weight: 700; font-size: 12px;
}

/* Monthly nudge banner: calm blue-soft (was gold-tinted) - text/logic unchanged */
.ListingFunnel.lf-funnel-f5 .lf-monthly-nudge {
  background: var(--lf-blue-soft); border: 1px solid #DCE6FB; color: var(--lf-text-muted); border-radius: var(--lf-radius);
}
.ListingFunnel.lf-funnel-f5 .lf-nudge-link { color: var(--lf-blue-strong); }
.ListingFunnel.lf-funnel-f5 .lf-nudge-link:hover { color: var(--lf-blue-dark); }

/* Hero action link: single accent (F5 fix #3 removed the Contact Support link, so only
   "Compare all features" remains here; the chatbot trigger will mount in its place). */
.ListingFunnel.lf-funnel-f5 .lf-pricing-hero .lf-compare-link,
.ListingFunnel.lf-funnel-f5 .lf-plus-hero .lf-compare-link,
.ListingFunnel.lf-funnel-f5 .lf-cards-actions .lf-compare-link { color: var(--lf-blue-strong); border-color: var(--lf-border); }
.ListingFunnel.lf-funnel-f5 .lf-pricing-hero .lf-compare-link:hover,
.ListingFunnel.lf-funnel-f5 .lf-plus-hero .lf-compare-link:hover,
.ListingFunnel.lf-funnel-f5 .lf-cards-actions .lf-compare-link:hover { background: var(--lf-blue-soft); border-color: var(--lf-blue); }

/* =====================================================================
   F5-4: order summary (spec §5) - card language, solid-blue checkout CTA,
   calm "Free"/save, blue (not green) discount.
   ===================================================================== */
.ListingFunnel.lf-funnel-f5 .lf-pricing-layout-stacked .lf-order-inner {
  padding: 0;   /* entry #25: no container padding - the individual boxes carry the padding */
}
.ListingFunnel.lf-funnel-f5 .lf-order-total-amt,
.ListingFunnel.lf-funnel-f5 .lf-order-pkg-price { font-variant-numeric: tabular-nums; }

/* Continue-to-checkout: real solid --blue (was a washed gradient) */
.ListingFunnel.lf-funnel-f5 .lf-order-cta {
  background: var(--lf-blue); border: 0; border-radius: var(--lf-radius-sm);
  box-shadow: 0 1px 2px rgba(37,99,235,.20); padding: 15px 24px; font-size: 16px; font-weight: 600;
}
.ListingFunnel.lf-funnel-f5 .lf-order-cta:hover:not([disabled]) {
  background: var(--lf-blue-strong); transform: translateY(-1px); box-shadow: var(--lf-shadow-blue);
}
.ListingFunnel.lf-funnel-f5 .lf-order-cta[disabled] { opacity: .4; box-shadow: none; }

/* Upsell rows + the conditional "Free" (logic unchanged; just calm colors) */
.ListingFunnel.lf-funnel-f5 .lf-os-upsell:hover { background: var(--lf-bg-soft); }
.ListingFunnel.lf-funnel-f5 .lf-os-upsell.is-on { background: var(--lf-blue-soft); }
.ListingFunnel.lf-funnel-f5 .lf-os-upnow  { color: var(--lf-text); font-weight: 700; }
.ListingFunnel.lf-funnel-f5 .lf-os-upwas  { color: var(--lf-text-soft); }
.ListingFunnel.lf-funnel-f5 .lf-os-upsave { color: var(--lf-text-soft); font-style: normal; font-weight: 600; }
.ListingFunnel.lf-funnel-f5 .lf-os-upfree { color: var(--lf-blue-strong); font-weight: 700; }
.ListingFunnel.lf-funnel-f5 .lf-os-upsell.is-incl {
  background: var(--lf-blue-soft); border: 1px solid #DCE6FB; border-radius: var(--lf-radius-sm);
}
.ListingFunnel.lf-funnel-f5 .lf-os-upsell.is-incl::after { background: var(--lf-blue); color: #fff; box-shadow: none; }
.ListingFunnel.lf-funnel-f5 .lf-order-discount { color: var(--lf-blue-strong); }
.ListingFunnel.lf-funnel-f5 .lf-os-coupon-msg.is-ok { color: var(--lf-blue-strong); }

/* =====================================================================
   F5-5: comparison table (spec §6) - Vercel-style clarity, calm checks,
   subtle category subheaders + price row. Badge cells stay blue/gold.
   ===================================================================== */
/* entry #21: clean like the package cards - NO shadow, flush full-bleed table,
   proper sticky header, tidy rounded border. */
.ListingFunnel.lf-funnel-f5 .lf-compare {
  border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg);
  box-shadow: none;            /* shadow removed */
  padding: 0; overflow: visible; /* table goes edge-to-edge; visible keeps tooltips + sticky head working */
}
/* Heading stays inset from the rounded top corners; the table itself is full-bleed. */
.ListingFunnel.lf-funnel-f5 .lf-compare h2  { padding: 22px 22px 0; }
.ListingFunnel.lf-funnel-f5 .lf-compare-sub { padding: 0 22px; }
/* separate+spacing:0 keeps the single 1px row lines BUT lets the bottom row round its
   outer corners (border-collapse would ignore cell radius) + keeps the sticky header's
   border from scrolling away. */
.ListingFunnel.lf-funnel-f5 .lf-compare-table { border-collapse: separate; border-spacing: 0; }
.ListingFunnel.lf-funnel-f5 .lf-compare-table thead th {
  padding: 12px 14px; color: var(--lf-text); border-bottom: 1px solid var(--lf-border-2);
  z-index: 3;                  /* sticky header stays above the coloured group/price rows */
}
/* Outer columns align with the heading inset + keep a clean margin from the box border. */
.ListingFunnel.lf-funnel-f5 .lf-compare-table thead th:first-child,
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td:first-child { padding-left: 22px; }
.ListingFunnel.lf-funnel-f5 .lf-compare-table thead th:last-child,
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td:last-child { padding-right: 22px; }
/* Last (price) row fills the rounded bottom corners + drops its divider (box border closes it). */
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-price td { border-bottom: 0; }
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-price td:first-child { border-bottom-left-radius: var(--lf-radius-lg); }
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-price td:last-child  { border-bottom-right-radius: var(--lf-radius-lg); }
@media (max-width: 760px) {
  /* box is flush now: drop the old negative margin so the scroller stays inside the border. */
  .ListingFunnel.lf-funnel-f5 .lf-compare-scroll { margin: 0; padding: 0 0 2px; }
  .ListingFunnel.lf-funnel-f5 .lf-compare h2  { padding: 18px 16px 0; }
  .ListingFunnel.lf-funnel-f5 .lf-compare-sub { padding: 0 16px; }
  .ListingFunnel.lf-funnel-f5 .lf-compare-scrollhint { padding: 0 16px; }
}
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--lf-border); }
/* entry #22: same custom check icon in the comparison table's "yes" cells -
   hide the unicode glyph, render the masked Tabler icon centered instead. */
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td.lf-cell-yes { color: transparent; font-size: 0; }
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td.lf-cell-yes::before {
  content: ""; display: inline-block; width: 17px; height: 17px; vertical-align: middle;
  background-color: var(--lf-check);
  -webkit-mask: var(--lf-check-svg) center / 17px 17px no-repeat;
          mask: var(--lf-check-svg) center / 17px 17px no-repeat;
}
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td.lf-cell-inc { color: var(--lf-text); font-weight: 600; }
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody td.lf-cell-no  { color: var(--lf-text-soft); }
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-group td {
  background: var(--lf-bg-soft); color: var(--lf-text);
  font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 10px 14px;
}
.ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-price td {
  background: var(--lf-bg-soft); color: var(--lf-text); font-weight: 700;
}

/* =====================================================================
   F5-6: trust row + FAQ (spec §7) - monochrome trust icons, calm FAQ.
   ===================================================================== */
.ListingFunnel.lf-funnel-f5 .lf-trust-ico { background: var(--lf-bg-soft); color: var(--lf-text-muted); }
.ListingFunnel.lf-funnel-f5 .lf-faq-item { border: 1px solid var(--lf-border); border-left: 2px solid transparent; border-radius: var(--lf-radius); }
.ListingFunnel.lf-funnel-f5 .lf-faq-item:hover { box-shadow: var(--lf-shadow-sm); transform: none; }
.ListingFunnel.lf-funnel-f5 .lf-faq-item.is-open { border-left-color: var(--lf-blue); box-shadow: var(--lf-shadow-sm); }

/* ---- F5-9: responsive - no lift when cards stack; smaller price on mobile ---- */
@media (max-width: 1024px) {
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured { transform: none; }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured:hover { transform: none; }
}
@media (max-width: 640px) {
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard { padding: 24px; }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-featured { padding: 32px 24px 24px; }
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle .lf-pcard-price .lf-price { font-size: 44px; }
  .ListingFunnel.lf-funnel-f5 .lf-compare,
  .ListingFunnel.lf-funnel-f5 .lf-trust-row,
  .ListingFunnel.lf-funnel-f5 .lf-faq { margin-top: 56px; }
}

/* ---- F5-8: reduced-motion - kill the new transitions/lift transitions ---- */
@media (prefers-reduced-motion: reduce) {
  .ListingFunnel.lf-funnel-f5 .lf-pcard,
  .ListingFunnel.lf-funnel-f5 .lf-pcard-cta,
  .ListingFunnel.lf-funnel-f5 .lf-order-cta,
  .ListingFunnel.lf-funnel-f5 .lf-plus-apply { transition: none; }
}

/* =====================================================================
   Phase F5b - /plus upgrade page brought onto the F5 card concept.
   The toggle + .lf-pcard cards + compare table inherit the shared F5
   rules above (the page root carries `lf-funnel-f5`). These rules cover
   the /plus-only pieces: the action card ("Your listings") and the
   per-game apply button / state chip, in the single blue accent.
   ===================================================================== */
/* Action card: constrain + center it under the now-wide container */
.ListingFunnel.lf-funnel-f5 .lf-plus-action { max-width: 720px; margin-left: auto; margin-right: auto; }
.ListingFunnel.lf-funnel-f5 .lf-plus-foot { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Game rows: subtle surface so each listing reads as a row */
.ListingFunnel.lf-funnel-f5 .lf-plus-game { background: var(--lf-bg-soft); border-color: var(--lf-border); border-radius: var(--lf-radius-sm); }

/* Per-game apply button: solid blue (matches the featured card / checkout CTA) */
.ListingFunnel.lf-funnel-f5 .lf-plus-apply {
  flex: 0 0 auto; height: auto; padding: 10px 18px; border: 0; border-radius: var(--lf-radius-sm);
  background: var(--lf-blue); color: #fff; font-weight: 600; font-size: 14px; box-shadow: none;
  transition: background .15s ease, transform .15s ease;
}
.ListingFunnel.lf-funnel-f5 .lf-plus-apply:hover { background: var(--lf-blue-strong); color: #fff; transform: translateY(-1px); }
.ListingFunnel.lf-funnel-f5 .lf-plus-apply.is-loading { opacity: .6; pointer-events: none; }

/* "Plus active" / "Approved - Current plan" chip: calm, single accent */
.ListingFunnel.lf-funnel-f5 .lf-plus-game-state {
  flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--lf-text-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.ListingFunnel.lf-funnel-f5 .lf-plus-game-state.lf-plus-game-owned { color: var(--lf-blue-strong); }

/* =====================================================================
   Console layout for /list-your-game/submit?step=N
   - Global top header is hidden via the controller's disable_header flag.
   - A left sidebar (brand + Game/Media/Details + copyright) replaces the
     horizontal step bar on desktop; on mobile it collapses to a top bar.
   ===================================================================== */

/* The sidebar carries the copyright, so hide the global site footer here.
   (.FooterLayout is rendered as a sibling right after the funnel root.) */
.lf-console-page ~ .FooterLayout { display: none; }

.ListingFunnel.lf-console-page {
  background: #fff;
}

.ListingFunnel .lf-console {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.ListingFunnel .lf-sidebar {
  flex: 0 0 264px;
  width: 264px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  background: transparent;
  border-right: 1px solid var(--lf-border);
}
.ListingFunnel .lf-sidebar-top { padding: 26px 20px; }
.ListingFunnel .lf-brand {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 30px;
  text-decoration: none; color: var(--lf-text);
}
.ListingFunnel .lf-brand-ico { display: block; border-radius: 10px; }
.ListingFunnel .lf-brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

.ListingFunnel .lf-nav-title {
  margin: 0 0 6px; padding: 0 13px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.2px;
  color: var(--lf-text);
}
.ListingFunnel .lf-nav-sub {
  margin: 0 0 16px; padding: 0 13px;
  font-size: 14.5px; line-height: 1.55; color: var(--lf-text-soft);
}

.ListingFunnel .lf-progress { margin-top: 22px; padding: 0 13px; }
.ListingFunnel .lf-progress-bar { height: 7px; border-radius: 999px; background: var(--lf-border); overflow: hidden; }
.ListingFunnel .lf-progress-fill {
  display: block; height: 100%; width: 33%; border-radius: 999px;
  background: linear-gradient(90deg, var(--lf-blue), var(--lf-blue-strong));
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.ListingFunnel .lf-progress-label { margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--lf-text-soft); }
.ListingFunnel .lf-nav { display: flex; flex-direction: column; gap: 6px; }
.ListingFunnel .lf-navitem {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 11px 13px;
  border: 1px solid transparent; border-radius: var(--lf-radius-sm);
  background: transparent; color: var(--lf-text-muted);
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ListingFunnel .lf-navitem:hover { background: var(--lf-bg-soft); color: var(--lf-text); border-radius: 100px; }
.ListingFunnel .lf-navitem-n {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: #fff; border: 2px solid var(--lf-border-2); color: var(--lf-text-soft);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ListingFunnel .lf-navitem.is-current {
  background: var(--lf-blue-soft); color: var(--lf-blue-strong); border-color: transparent;
  border-radius: 100px;
}
.ListingFunnel .lf-navitem.is-current .lf-navitem-n {
  background: var(--lf-blue); border-color: var(--lf-blue); color: #fff;
}
.ListingFunnel .lf-navitem.is-done { color: var(--lf-text); }
.ListingFunnel .lf-navitem.is-done .lf-navitem-n {
  background: var(--lf-green); border-color: var(--lf-green); color: #fff;
}

.ListingFunnel .lf-sidebar-foot {
  padding: 16px 20px; border-top: 1px solid var(--lf-border);
  font-size: 12px; color: var(--lf-text-soft);
}

/* ---- Main column ---- */
.ListingFunnel .lf-console-main { flex: 1 1 auto; min-width: 0; }

/* ---- Contract rows: each row = a chain <select> + its contract-address input ----
   Grid (not flex) so the row is a full-width block with a guaranteed 1fr column for the
   address input - it can never collapse the way a flex child with width:100% can. */
.ListingFunnel .lf-chains { display: block; }
.ListingFunnel .lf-chain-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr 40px;
  gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.ListingFunnel .lf-chain-row:last-child { margin-bottom: 0; }
.ListingFunnel .lf-chain-select { min-width: 0; }
.ListingFunnel .lf-chain-row .lf-chain-ca { width: auto; min-width: 0; margin: 0; }
.ListingFunnel .lf-chain-row-del {
  flex: 0 0 auto; width: 36px; height: 40px; border: 1px solid var(--lf-border-2); border-radius: var(--lf-radius-sm);
  background: #fff; color: var(--lf-text-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ListingFunnel .lf-chain-row-del svg { width: 16px; height: 16px; display: block; }
.ListingFunnel .lf-thumb-del svg { width: 13px; height: 13px; display: block; }
.ListingFunnel .lf-chain-row-del:hover { background: rgba(243,63,96,.10); color: var(--lf-red); border-color: rgba(243,63,96,.4); }
.ListingFunnel .lf-chain-add {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1px dashed var(--lf-border-2); border-radius: var(--lf-radius-sm);
  background: #fff; color: var(--lf-blue-strong);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ListingFunnel .lf-chain-add:hover { border-color: var(--lf-blue); background: var(--lf-blue-soft); }
@media (max-width: 480px) {
  .ListingFunnel .lf-chain-row { flex-wrap: wrap; }
  .ListingFunnel .lf-chain-select { flex: 1 1 100%; }
}

/* The sidebar IS the step indicator on desktop -> hide the horizontal row. */
.ListingFunnel.lf-console-page .lf-steps { display: none; }

/* Ultra-clean: content area is pure white and the card is flattened
   (no box border / shadow) so it blends seamlessly with the sidebar. */
.ListingFunnel.lf-console-page .lf-form-section { background: transparent; padding: 0; }
.ListingFunnel.lf-console-page .lf-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* ---- Google-Play-Console style: sticky step header + two-column fields ---- */
/* Full-bleed: the container/card/panel stretch edge-to-edge in the content column. */
.ListingFunnel.lf-console-page .lf-container,
.ListingFunnel.lf-console-page .lf-container.lf-narrow {
  width: 100%; max-width: none; margin-inline: 0; padding-inline: 0;
}
.ListingFunnel.lf-console-page .lf-panel { max-width: none; }

.ListingFunnel.lf-console-page .lf-panel-head {
  position: sticky; top: 0; z-index: 5;
  margin: 0; padding: 22px 32px 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--lf-border);
}
.ListingFunnel.lf-console-page .lf-panel-head .lf-panel-sub { margin-top: 4px; }

/* Each field becomes a row: label on the left, the control(s) on the right. */
.ListingFunnel.lf-console-page .lf-field {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 300px;
  column-gap: 32px; row-gap: 6px;
  align-items: start;
  margin: 0; padding: 22px 32px;
  border-bottom: 1px solid var(--lf-border);
}
.ListingFunnel.lf-console-page .lf-field > .lf-label { grid-column: 1; grid-row: 1; margin: 0; padding-top: 10px; }
.ListingFunnel.lf-console-page .lf-field > .lf-info {
  grid-column: 3; grid-row: 1; min-width: 0; padding-top: 10px;
  font-size: 12.5px; line-height: 1.55; color: var(--lf-text-soft);
}
.ListingFunnel.lf-console-page .lf-field > :not(.lf-label):not(.lf-info) { grid-column: 2; min-width: 0; }
/* Non-field section elements get the same 32px inset as the fields so everything lines up. */
.ListingFunnel.lf-console-page .lf-subhead,
.ListingFunnel.lf-console-page .lf-storehint,
.ListingFunnel.lf-console-page .lf-showmore { padding-left: 32px; padding-right: 32px; padding-bottom: 26px; }
.ListingFunnel.lf-console-page .lf-subhead { margin-bottom: 0; }

.ListingFunnel.lf-console-page .lf-actions {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0; padding: 16px 32px;
  background: #fff;
  border-top: 1px solid var(--lf-border);
}
.ListingFunnel .lf-next { font-weight: 600 !important; }

.ListingFunnel .lf-store-req { margin-top: 8px; font-size: 12.5px; color: var(--lf-text-soft); }
.ListingFunnel .lf-store-req b { color: var(--lf-text); font-weight: 700; }
.ListingFunnel .lf-store-remove {
  margin-left: 4px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--lf-blue-strong); cursor: pointer; text-decoration: underline;
}
.ListingFunnel .lf-store-remove:hover { color: var(--lf-blue); }

/* Fields without a left label (e.g. the agreement checkbox) span the full width. */
.ListingFunnel.lf-console-page .lf-field[data-field="agreement"] { grid-template-columns: 1fr; }
.ListingFunnel.lf-console-page .lf-field[data-field="agreement"] > :not(.lf-label):not(.lf-info) { grid-column: 1; }

/* Narrow screens: stack label above control again. */
@media (max-width: 1080px) {
  .ListingFunnel.lf-console-page .lf-field { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); }
  .ListingFunnel.lf-console-page .lf-field > .lf-info { grid-column: 2; grid-row: auto; padding-top: 2px; }
}
@media (max-width: 720px) {
  .ListingFunnel.lf-console-page .lf-field { grid-template-columns: 1fr; row-gap: 8px; padding: 18px 20px; }
  .ListingFunnel.lf-console-page .lf-field > * { grid-column: 1; }
  .ListingFunnel.lf-console-page .lf-field > .lf-label { padding-top: 0; }
}

/* ---- Mobile: sidebar becomes a compact top bar ---- */
@media (max-width: 860px) {
  .ListingFunnel .lf-console { flex-direction: column; }
  .ListingFunnel .lf-sidebar {
    flex: 0 0 auto; width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    border-right: 0; border-bottom: 1px solid var(--lf-border);
  }
  .ListingFunnel .lf-sidebar-top { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 0; }
  .ListingFunnel .lf-brand { margin-bottom: 0; }
  .ListingFunnel .lf-nav { flex-direction: row; gap: 4px; }
  .ListingFunnel .lf-navitem { padding: 8px 10px; font-size: 13px; }
  .ListingFunnel .lf-navitem-label { display: none; }
  .ListingFunnel .lf-sidebar-foot,
  .ListingFunnel .lf-nav-sub,
  .ListingFunnel .lf-progress { display: none; }
}

/* =====================================================================
   Pricing "cart": the order box is fixed full-height on the RIGHT edge
   (the cards keep their full-width stacked layout on the left). Header is
   hidden via the controller. Scoped to .lf-cart-page; below 900px it
   drops back into the normal flow (centered card).
   ===================================================================== */
.lf-cart-page ~ .FooterLayout { display: none; }
.ListingFunnel.lf-cart-page .lf-faq { display: none; }

.ListingFunnel.lf-cart-page.lf-funnel-f5 .lf-form-section { padding-top: 0; padding-right: 372px; background: #fff; }

/* entry #29: clean brand header bar (icon + PlayToEarn), left content area only. */
.ListingFunnel.lf-cart-page .lf-topbar {
  display: flex; align-items: center;
  padding: 16px 24px; margin-bottom: 24px;
  border-bottom: 1px solid var(--lf-border);
}
.ListingFunnel.lf-cart-page .lf-topbar .lf-brand { margin-bottom: 0; }
.ListingFunnel.lf-cart-page .lf-topbar .lf-brand-name { font-size: 20px; }

/* entry #31: from 1200px down (e.g. iPad Air landscape) the fixed 372px cart squeezes the
   content. Drop the .lf-container gutters + max-width centering so the content (header, hero,
   cards, compare table) sits FLUSH against the content layout instead of floating with a 24px
   gap on each side. Only in the fixed-cart range (>900px); below that the cart unstacks. */
@media screen and (min-width: 901px) and (max-width: 1200px) {
  .ListingFunnel.lf-cart-page .lf-container { max-width: none; padding-left: 0; padding-right: 0; }
  .ListingFunnel.lf-cart-page .lf-topbar    { padding-left: 1rem; padding-right: 1rem; }
  .ListingFunnel.lf-cart-page .lf-form-section { padding-bottom: 0; }

  /* flush to the edges now -> no rounded corners on the selection cards... */
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard,
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:first-child,
  .ListingFunnel.lf-funnel-f5 .lf-pricing-cards-toggle > .lf-pcard:last-child { border-radius: 0; }
  /* ...nor on the Full feature comparison box. */
  .ListingFunnel.lf-funnel-f5 .lf-compare { border-radius: 0; }
  .ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-price td:first-child,
  .ListingFunnel.lf-funnel-f5 .lf-compare-table tbody tr.lf-compare-price td:last-child { border-radius: 0; }
}

/* Cards span the freed width; the stacked order block no longer centers. */
.ListingFunnel.lf-cart-page .lf-pricing-layout-stacked { max-width: none; }
.ListingFunnel.lf-cart-page .lf-pricing-layout-stacked > .lf-order { max-width: none; margin: 0; }

/* The fixed cart box: full (dynamic) viewport height, flat, flex column. */
.ListingFunnel.lf-cart-page .lf-order {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 372px; height: 100dvh; margin: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--lf-border);
}
.ListingFunnel.lf-cart-page .lf-order-inner {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0;
}

/* entry #24/#25: cart content split into full-bleed boxes - NO container padding; each box
   carries its own padding and is divided from the next by a top rule (clean cart look). */
.ListingFunnel.lf-cart-page .lf-os-box {
  background: #fff; border: 0; border-top: 1px solid var(--lf-border); border-radius: 0;
  padding: 18px 20px; margin-top: 0;
}
.ListingFunnel.lf-cart-page .lf-os-box:first-child { border-top: 0; }
/* entry #26: only the "Boost your launch" box scrolls; it flex-grows to fill the free
   space so Your Game + Order summary stay at the top and Coupon + Total + Checkout stay
   pinned at the bottom (the inner itself no longer scrolls). */
.ListingFunnel.lf-cart-page .lf-os-upsells {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;   /* 1rem between title + upsell rows */
  border-top: 0;   /* entry #40: no divider on the Boost-your-launch box */
}
.ListingFunnel.lf-cart-page .lf-os-upsells .lf-os-box-title { margin-bottom: 0; }   /* gap handles the spacing */
/* entry #40: included upsells show a "demo" CHECKED checkbox (purely visual) instead of being
   hidden - the base rule hides .is-incl checkboxes, so re-show it here. */
.ListingFunnel.lf-cart-page .lf-os-upsell.is-incl .lf-upsell-cb { visibility: visible; }

/* entry #46: keep the global .White checkbox EXACTLY as-is - it already works. The only change
   is the checked colour: the global uses `:checked { background-color: currentcolor }`, driven by
   `color`, so recolouring `color` to our brand blue is all that's needed. */
.ListingFunnel.lf-cart-page .lf-upsell-cb { color: var(--lf-blue); }

/* entry #48/#49: the upsell description lives in an (i) tooltip. The upsells box is
   overflow-y:auto, which clips an absolutely-positioned bubble. The JS pins the bubble with
   position:fixed on hover so it escapes the box (overflow stays for scrolling). max-width keeps
   it inside the narrow sidebar; the arrow is dropped since a fixed+clamped bubble can't point
   reliably at the icon. */
.ListingFunnel.lf-cart-page .lf-os-upsell .lf-tip-bubble {
  bottom: auto; top: calc(100% + 9px); max-width: 220px; z-index: 1000;   /* above other cart rows */
}
.ListingFunnel.lf-cart-page .lf-os-upsell .lf-tip-bubble::after { display: none; }
/* included rows are pointer-events:none (so they can't be toggled) - but the (i) must stay
   hoverable, otherwise its tooltip never fires when the tier includes the upsell. */
.ListingFunnel.lf-cart-page .lf-os-upsell.is-incl .lf-tip { pointer-events: auto; }
.ListingFunnel.lf-cart-page .lf-os-box-title {
  font-size: 13px; font-weight: 700; color: var(--lf-text); margin: 0 0 10px;
}
/* entry #37: payment-terms microcopy under the secure-payment line */
.ListingFunnel.lf-cart-page .lf-order-terms {
  margin: 6px 0 0; text-align: center; font-size: 11.5px; line-height: 1.4; color: var(--lf-text-soft);
}
.ListingFunnel.lf-cart-page .lf-order-terms a { color: var(--lf-text); font-size: inherit; text-decoration: underline; }

@media (max-width: 900px) {
  .ListingFunnel.lf-cart-page.lf-funnel-f5 .lf-form-section { padding-right: 0; }
  .ListingFunnel.lf-cart-page .lf-order {
    position: static; width: auto; height: auto; display: block;
    border-left: 0; max-width: 720px; margin: 0 auto;
  }
  .ListingFunnel.lf-cart-page .lf-order-inner { display: block; overflow: visible; padding: 24px; }
  .ListingFunnel.lf-cart-page .lf-os-coupon { margin-top: 0; }
  .lf-cart-page ~ .FooterLayout { display: block; }
}