/* ============================================================
   TownVue - /Get-Listed landing, "Immersive" build.
   Twin of the Claim landing: loads state-immersive.css +
   claim-immersive.css (shared cl-* components + full-bleed
   home-shell reset) and adds ONLY the get-listed-specific
   pieces (gl-*): the hero search-results mock, the trust bar,
   the "frustration" cards, the founder avatar chips, and the
   15-day refund badge. Scoped under .state-immersive.
   ============================================================ */

/* ── Hero action row (two buttons + micro) ── */
.state-immersive .gl-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.state-immersive .gl-hero-actions .tv-btn{ flex:none; }

/* ── Hero search-results mock ("Your business here") ── */
.state-immersive .gl-serp{ background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:14px; max-width:440px; }
.state-immersive .gl-serp-bar{ display:flex; align-items:center; gap:9px; background:var(--beige-2); border-radius:var(--r-pill); padding:10px 15px; font-size:13px; color:var(--muted); font-weight:600; }
.state-immersive .gl-serp-bar .mag{ color:var(--navy); }
.state-immersive .gl-serp-list{ display:grid; gap:8px; margin-top:10px; }
.state-immersive .gl-serp-item{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.state-immersive .gl-serp-item.you{ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 2px rgba(244,180,0,.35); }
.state-immersive .gl-serp-item .rk{ flex:none; width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--navy-600); color:#fff; }
.state-immersive .gl-serp-item.you .rk{ background:var(--gold); color:var(--navy); }
.state-immersive .gl-serp-item .mono{ flex:none; width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; }
.state-immersive .gl-serp-item .m{ flex:1; min-width:0; }
.state-immersive .gl-serp-item .nm{ font-size:13.5px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state-immersive .gl-serp-item .meta{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.state-immersive .gl-serp-item .you-tag{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--clay-700); margin-top:2px; }
.state-immersive .gl-serp-item .listed{ flex:none; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.state-immersive .gl-serp-item .pill{ flex:none; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); background:var(--gold); padding:3px 8px; border-radius:var(--r-pill); }
.state-immersive .gl-serp-caption{ font-size:13.5px; color:var(--muted-navy); line-height:1.5; margin-top:14px; }
.state-immersive .gl-serp-caption b{ color:#fff; }

/* ── Trust bar ── */
.state-immersive .gl-trust{ background:var(--beige); border-bottom:1px solid var(--line); }
.state-immersive .gl-trust-in{ display:flex; align-items:center; justify-content:center; gap:12px 30px; flex-wrap:wrap; padding:16px 0; font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.state-immersive .gl-trust .it{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.state-immersive .gl-trust .stars{ color:var(--gold); letter-spacing:1px; }
.state-immersive .gl-trust .bbb{ font-weight:800; font-size:11px; letter-spacing:.03em; background:var(--navy); color:#fff; padding:3px 7px; border-radius:4px; }
.state-immersive .gl-trust .ck{ color:var(--sage-700); font-weight:900; }

/* ── "We get it" frustration cards ── */
.state-immersive .gl-frustrations{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
.state-immersive .gl-frust{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 26px; box-shadow:var(--shadow-sm); }
.state-immersive .gl-frust .tag{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-700); }
.state-immersive .gl-frust h3{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--navy); line-height:1.18; margin-top:9px; }
.state-immersive .gl-frust p{ font-size:14px; line-height:1.5; color:var(--ink-soft); margin-top:8px; }
.state-immersive .gl-frust .fix{ font-size:13.5px; font-weight:600; color:var(--sage-700); line-height:1.45; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:flex; gap:8px; }
.state-immersive .gl-frust .fix::before{ content:"✓"; font-weight:900; flex:none; }

/* ── Mission founder avatar chips (replaces the claim's text signature) ── */
.state-immersive .gl-founders{ display:flex; justify-content:center; gap:30px; flex-wrap:wrap; margin-top:26px; }
.state-immersive .gl-founder{ display:flex; align-items:center; gap:11px; }
.state-immersive .gl-founder .av{ flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; }
.state-immersive .gl-founder .who{ text-align:left; }
.state-immersive .gl-founder .nm{ font-weight:800; color:var(--navy); font-size:14px; line-height:1.1; }
.state-immersive .gl-founder .role{ font-size:12px; color:var(--muted); margin-top:2px; }

/* ── 15-day refund badge ── */
.state-immersive .gl-refund{ display:flex; align-items:center; gap:24px; max-width:760px; margin:24px auto 0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 28px; box-shadow:var(--shadow-sm); }
.state-immersive .gl-refund .seal{ flex:none; width:86px; height:86px; border-radius:50%; border:3px solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--navy); text-align:center; }
.state-immersive .gl-refund .seal .n{ font-family:var(--serif); font-size:30px; font-weight:700; line-height:.95; }
.state-immersive .gl-refund .seal .u{ font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
.state-immersive .gl-refund h4{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--navy); }
.state-immersive .gl-refund p{ font-size:14px; color:var(--ink-soft); margin-top:8px; line-height:1.55; }

/* ── Urgency note before the final CTA ── */
.state-immersive .gl-urgency{ max-width:760px; margin:0 auto; background:var(--gold-soft); border:1px solid rgba(219,160,0,.45); border-radius:var(--r-md); padding:16px 20px; display:flex; gap:12px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:#5a4a12; }
.state-immersive .gl-urgency .dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--clay); margin-top:6px; }
.state-immersive .gl-urgency b{ color:var(--navy); }

/* ── Final CTA card (on the clay band) ── */
.state-immersive .gl-final-card{ background:var(--beige); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px; }
.state-immersive .gl-final-card .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.state-immersive .gl-final-card .tv-btn{ width:100%; margin-top:14px; }
.state-immersive .gl-final-card .foot{ font-size:13px; color:var(--muted); margin-top:14px; }
.state-immersive .gl-final-card .trust{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.state-immersive .gl-final-card .trust a{ color:var(--clay-700); font-weight:700; text-decoration:underline; }

/* ── AI search showcase placed on a navy band (recolor cl-ai for dark bg) ── */
.state-immersive .bg-navy .cl-ai-tag{ background:rgba(244,180,0,.16); color:var(--gold); }
.state-immersive .bg-navy .cl-ai h3{ color:#fff; }
.state-immersive .bg-navy .cl-ai-copy > p{ color:var(--muted-navy); }
.state-immersive .bg-navy .cl-ai-list .it{ color:var(--muted-navy); }
.state-immersive .bg-navy .cl-ai-list .it b{ color:#fff; }
.state-immersive .bg-navy .cl-chat{ background:var(--navy-600); border:1px solid var(--navy-line); }
.state-immersive .bg-navy .cl-chat-q{ background:var(--navy-700); }

@media (max-width:860px){
  .state-immersive .gl-frustrations{ grid-template-columns:1fr; }
  .state-immersive .gl-refund{ flex-direction:column; text-align:center; }
}