/* ============================================================
   TownVue — State landing "Direction 3 · Immersive"
   Ported from the approved design bundle (brand.css + d3.css).
   EVERYTHING is scoped under .state-immersive so the page can
   render inside the standard site chrome (_SiteHeader/_Footer +
   Bootstrap) without leaking tokens or generic class names
   (.row/.badge/.body/.reveal/.bg-*) into the rest of the site.
   Design tokens already match the TownVue brand palette.
   ============================================================ */

/* Fonts: Lora (serif display) + Hanken Grotesk (sans UI). Loaded only
   on this page via @section Head; preconnect lives there too. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* This stylesheet loads ONLY on the immersive state landing, so zeroing the
   site shell's vertical padding here affects only this page. The immersive
   layout is edge-to-edge: the announce bar sits flush under the header and the
   navy content meets the navy footer. We do this with real padding removal
   instead of negative margins on .state-immersive — negative margins on the
   scrolled element broke scroll positioning (a cream gap appeared above the hero
   after scrolling to the signup form, until a refresh). */
.page__main,
.content--inner {
  padding-block: 0;
}

/* ── Tokens (scoped, not :root, so they never override site vars) ── */
.state-immersive{
  --navy:        #0B2D39;
  --navy-700:    #0F3845;
  --navy-600:    #16424F;
  --navy-line:   rgba(245,242,231,.14);
  --gold:        #F4B400;
  --gold-700:    #DBA000;
  --gold-soft:   #FBE8A6;
  --beige:       #F5F2E7;
  --beige-2:     #EFEADB;
  --paper:       #FFFFFF;
  --paper-warm:  #FBF9F1;
  --clay:        #C96E4A;
  --clay-700:    #B25C3B;
  --clay-soft:   #EBD3C6;
  --sage:        #8FAE91;
  --sage-700:    #6E8E72;
  --sage-soft:   #DDE6DC;
  --ink:         #1B2B30;
  --ink-soft:    #46555A;
  --muted:       #6E7A7C;
  --muted-navy:  rgba(245,242,231,.66);
  --line:        rgba(11,45,57,.12);
  --line-soft:   rgba(11,45,57,.07);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11,45,57,.06), 0 2px 6px rgba(11,45,57,.05);
  --shadow-md: 0 4px 14px rgba(11,45,57,.08), 0 12px 30px rgba(11,45,57,.07);
  --shadow-lg: 0 18px 50px rgba(11,45,57,.16);
  --maxw: 1180px;

  /* Full-bleed comes for free: the site content shell has no horizontal
     max-width, and we zero its vertical padding above (no negative margins). */
  font-family: var(--sans);
  background: var(--navy);
  color: var(--beige);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scoped element-level defaults (mirror brand.css reset, but only inside
   the landing so the site is untouched). */
.state-immersive *, .state-immersive *::before, .state-immersive *::after{ box-sizing:border-box; }
.state-immersive img, .state-immersive svg{ display:block; max-width:100%; }
.state-immersive a{ color:inherit; text-decoration:none; }
.state-immersive button{ font-family:inherit; cursor:pointer; }
.state-immersive h1, .state-immersive h2, .state-immersive h3, .state-immersive h4, .state-immersive p{ margin:0; }
.state-immersive :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Layout helpers */
.state-immersive .tv-container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
.state-immersive .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Buttons */
.state-immersive .tv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:700; font-size:16px;
  border-radius:var(--r-pill); border:1.5px solid transparent;
  padding:15px 28px; line-height:1; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.state-immersive .tv-btn:active{ transform:translateY(1px); }
.state-immersive .tv-btn--gold{ background:var(--gold); color:var(--navy); box-shadow:0 6px 18px rgba(244,180,0,.30); }
.state-immersive .tv-btn--gold:hover{ background:var(--gold-700); transform:translateY(-2px); box-shadow:0 10px 26px rgba(244,180,0,.34); color:var(--navy); }
.state-immersive .tv-btn--navy{ background:var(--navy); color:#fff; }
.state-immersive .tv-btn--navy:hover{ background:var(--gold); color:var(--navy); }
.state-immersive .tv-btn--ghost{ background:transparent; color:var(--navy); border-color:rgba(11,45,57,.28); }
.state-immersive .tv-btn--ghost:hover{ border-color:var(--navy); background:rgba(11,45,57,.04); }
.state-immersive .tv-btn--cream{ background:var(--beige); color:var(--navy); }
.state-immersive .tv-btn--cream:hover{ background:#fff; transform:translateY(-2px); color:var(--navy); }
.state-immersive .tv-btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.state-immersive .tv-btn--ghost-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
/* Inline button spinner for the signup loading state. Inherits the button's text
   color via currentColor (navy on gold, white on navy). Sits inside .tv-btn's flex
   gap, so no extra margin needed. Reduced-motion halts the spin via the global rule. */
.state-immersive .tv-spinner{ display:inline-block; width:1em; height:1em; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:tvspin .7s linear infinite; }
@keyframes tvspin{ to{ transform:rotate(360deg); } }

/* Reveal (progressive enhancement: hidden only when JS marks ready) */
.state-immersive.js-reveal .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.state-immersive.js-reveal .reveal.in{ opacity:1; transform:none; }

/* Photo-placeholder gradients (stand in for listing photos) */
.state-immersive .ph-a{ background:linear-gradient(135deg,#16424F,#0B2D39); }
.state-immersive .ph-b{ background:linear-gradient(135deg,#C96E4A,#A24E2F); }
.state-immersive .ph-c{ background:linear-gradient(135deg,#8FAE91,#5F7E63); }
.state-immersive .ph-d{ background:linear-gradient(135deg,#E0A21F,#C98A0E); }
.state-immersive .ph-e{ background:linear-gradient(135deg,#2A5A66,#143A44); }
.state-immersive .ph-f{ background:linear-gradient(135deg,#B5895A,#8A6438); }

/* ── Sticky announce bar ── */
.state-immersive .d3-bar{ background:var(--gold); color:var(--navy); }
.state-immersive .d3-bar-in{ display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 0; font-size:13.5px; font-weight:700; flex-wrap:nowrap; white-space:nowrap; }
.state-immersive .d3-bar .live{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.state-immersive .d3-bar .dot{ width:8px; height:8px; border-radius:50%; background:var(--clay-700); animation:d3pulse 1.6s ease-in-out infinite; }
.state-immersive .d3-bar a{ text-decoration:underline; text-underline-offset:2px; }
@keyframes d3pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(178,92,59,.5);} 50%{ box-shadow:0 0 0 6px rgba(178,92,59,0);} }

/* Hero */
/* overflow:clip (not hidden) — clips the glow circles without making the hero a
   scroll container. With overflow:hidden, scrollIntoView on the signup form
   scrolled the hero's INTERNAL overflow instead of the window, which shoved the
   hero down and left a cream gap at the top until a refresh. */
.state-immersive .d3-hero{ position:relative; overflow:clip; padding:64px 0 72px; }
.state-immersive .d3-hero::before{ content:""; position:absolute; top:-200px; right:-200px; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle, rgba(244,180,0,.16), transparent 65%); pointer-events:none; }
.state-immersive .d3-hero::after{ content:""; position:absolute; bottom:-160px; left:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(143,174,145,.16), transparent 65%); pointer-events:none; }
.state-immersive .d3-hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:50px; align-items:center; position:relative; z-index:1; }
.state-immersive .d3-tag{ display:inline-flex; align-items:center; gap:10px; background:var(--navy-600); border:1px solid var(--navy-line); color:var(--beige); font-size:13px; font-weight:700; padding:8px 16px; border-radius:var(--r-pill); white-space:nowrap; }
.state-immersive .d3-tag .b{ color:var(--gold); }
.state-immersive .d3-h1{ font-family:var(--serif); font-weight:600; color:#fff; font-size:clamp(46px,6.6vw,86px); line-height:.98; letter-spacing:-.025em; margin:24px 0 0; text-wrap:balance; }
.state-immersive .d3-h1 .g{ color:var(--gold); }
.state-immersive .d3-h1 .u{ position:relative; white-space:nowrap; }
.state-immersive .d3-h1 .u::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em; background:var(--clay); border-radius:2px; }
.state-immersive .d3-sub{ font-size:20px; line-height:1.5; color:var(--muted-navy); margin-top:24px; max-width:30em; }
.state-immersive .d3-btn-xl{ font-size:18px; padding:18px 34px; }
.state-immersive .d3-micro{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-size:14px; color:var(--muted-navy); font-weight:600; }
.state-immersive .d3-micro span{ white-space:nowrap; }
.state-immersive .d3-micro .c{ color:var(--gold); }
.state-immersive .lead-emote{ color:#fff; font-weight:700; }

/* Section scaffold */
.state-immersive .d3-sec{ padding:90px 0; }
.state-immersive .d3-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.state-immersive .d3-h2{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,60px); line-height:1.02; letter-spacing:-.02em; margin-top:14px; text-wrap:balance; }
.state-immersive .d3-h2 .el-w{ color:#fff; white-space:nowrap; }
.state-immersive .d3-h2 .oneplace{ color:var(--gold); font-style:italic; }
.state-immersive .d3-sec-lead{ font-size:19px; line-height:1.55; margin-top:16px; max-width:46ch; }

/* color band variants */
.state-immersive .bg-navy{ background:var(--navy); color:var(--beige); }
.state-immersive .bg-navy2{ background:var(--navy-700); color:var(--beige); }
.state-immersive .bg-cream{ background:var(--beige); color:var(--ink); }
.state-immersive .bg-cream .d3-h2{ color:var(--navy); }
.state-immersive .bg-cream .d3-eyebrow{ color:var(--clay-700); }
.state-immersive .bg-sage{ background:var(--sage); color:var(--navy); }
.state-immersive .bg-sage .d3-h2{ color:var(--navy); }
.state-immersive .bg-sage .d3-eyebrow{ color:var(--navy); }
.state-immersive .bg-gold{ background:var(--gold); color:var(--navy); }
.state-immersive .bg-gold .d3-h2, .state-immersive .bg-gold .d3-eyebrow{ color:var(--navy); }
.state-immersive .bg-clay{ background:var(--clay); color:#fff; }
.state-immersive .bg-clay .d3-h2{ color:#fff; }
.state-immersive .d3-fomo-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 6px; }
.state-immersive .d3-fomo-chips span{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.32); color:#fff; border-radius:var(--r-pill); padding:10px 18px; font-weight:700; font-size:14px; }
.state-immersive .d3-final-kick{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,28px); color:var(--navy); opacity:.82; margin-bottom:8px; }

/* Stat strip — oversized */
.state-immersive .d3-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.state-immersive .d3-stat .n{ font-family:var(--serif); font-size:clamp(48px,7vw,84px); font-weight:600; line-height:.9; color:var(--navy); }
.state-immersive .d3-stat .l{ font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-top:12px; color:var(--navy); opacity:.7; }

/* Big feature blocks */
.state-immersive .d3-fblocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* DEV NOTE honored: blocks sized tightly to content (no equal-height stretch). */
.state-immersive .d3-fblock{ border-radius:var(--r-lg); padding:22px 24px; display:flex; flex-direction:column; justify-content:flex-start; align-self:start; transition:transform .25s ease; }
.state-immersive .d3-fblock:hover{ transform:translateY(-6px); }
.state-immersive .d3-fblock h3{ font-family:var(--serif); font-size:23px; font-weight:600; line-height:1.12; }
.state-immersive .d3-fblock p{ font-size:14.5px; line-height:1.5; margin-top:8px; opacity:.92; }
.state-immersive .fb-navy{ background:var(--navy); color:#fff; }
.state-immersive .fb-clay{ background:var(--clay); color:#fff; }
.state-immersive .fb-sage{ background:var(--sage); color:var(--navy); }
.state-immersive .fb-gold{ background:var(--gold); color:var(--navy); }
.state-immersive .fb-cream{ background:var(--beige); color:var(--navy); border:1px solid var(--line); }
.state-immersive .d3-fblock.span2{ grid-column:span 2; }

/* Big statement */
.state-immersive .d3-statement{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5.4vw,68px); line-height:1.05; letter-spacing:-.02em; max-width:18ch; }
.state-immersive .d3-statement .g{ color:var(--gold); }
.state-immersive .d3-state-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:54px; align-items:center; }
.state-immersive .d3-numlist{ display:grid; gap:22px; }
.state-immersive .d3-nl{ display:flex; gap:18px; align-items:flex-start; }
.state-immersive .d3-nl .no{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--gold); line-height:1; min-width:46px; }
.state-immersive .d3-nl h4{ font-family:var(--serif); font-size:22px; font-weight:600; color:#fff; line-height:1.1; }
.state-immersive .d3-nl p{ font-size:14.5px; color:var(--muted-navy); margin-top:6px; line-height:1.5; }

/* Listing grids (Happening Soon / Get out there) */
.state-immersive .d3-grid-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.state-immersive .d3-grid-head > div{ max-width:680px; }
.state-immersive .d3-grid-intro{ font-size:16.5px; line-height:1.55; margin-top:14px; }
.state-immersive .bg-cream .d3-grid-intro{ color:rgba(11,45,57,.75); }
.state-immersive .bg-navy2 .d3-grid-intro{ color:var(--muted-navy); }
.state-immersive .d3-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* Listing cards */
.state-immersive .d3-sc{ border-radius:var(--r-md); overflow:hidden; background:var(--navy-600); border:1px solid var(--navy-line); transition:transform .2s, box-shadow .2s; }
.state-immersive .bg-cream .d3-sc{ background:var(--paper); border-color:var(--line); box-shadow:var(--shadow-sm); }
.state-immersive .d3-sc:hover{ transform:translateY(-5px); }
.state-immersive .d3-sc .img{ height:170px; position:relative; display:flex; align-items:center; justify-content:center; }
.state-immersive .d3-sc .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.state-immersive .d3-sc .badge{ position:absolute; top:12px; left:12px; z-index:1; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); padding:4px 9px; border-radius:6px; }
.state-immersive .d3-sc .body{ padding:16px 18px 18px; }
.state-immersive .d3-sc .nm{ font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.12; }
.state-immersive .bg-cream .d3-sc .nm{ color:var(--navy); }
.state-immersive .d3-sc .meta{ font-size:13.5px; margin-top:6px; opacity:.75; }
.state-immersive .d3-sc .meta .price{ color:var(--sage); font-weight:800; opacity:1; }
.state-immersive .bg-cream .d3-sc .meta .price{ color:var(--sage-700); }
.state-immersive .d3-sc .meta .date{ color:var(--clay); font-weight:800; opacity:1; }

/* Includes chips */
.state-immersive .d3-inc{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.state-immersive .d3-inc .it{ background:var(--navy-600); border:1px solid var(--navy-line); border-radius:var(--r-md); padding:18px 20px; display:flex; gap:13px; align-items:flex-start; }
.state-immersive .d3-inc .ck{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; }
.state-immersive .d3-inc h4{ font-size:15.5px; font-weight:800; color:#fff; }
.state-immersive .d3-inc p{ font-size:13px; color:var(--muted-navy); margin-top:4px; line-height:1.45; }

/* Business split (gold) */
.state-immersive .d3-biz-photo{ margin:0 0 44px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.state-immersive .d3-biz-photo img{ display:block; width:100%; height:340px; object-fit:cover; object-position:center 48%; }
.state-immersive .d3-biz{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.state-immersive .d3-biz-feats{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
.state-immersive .d3-biz-feats .bf h4{ font-size:15.5px; font-weight:800; color:var(--navy); display:flex; gap:9px; align-items:center; }
.state-immersive .d3-biz-feats .bf h4 .e{ font-size:18px; }
.state-immersive .d3-biz-feats .bf p{ font-size:13.5px; color:rgba(11,45,57,.78); margin-top:5px; line-height:1.45; }

/* Towns */
.state-immersive .d3-towns{ display:flex; flex-wrap:wrap; gap:12px; }
.state-immersive .d3-town{ display:inline-flex; align-items:center; gap:10px; background:var(--navy-600); border:1px solid var(--navy-line); border-radius:var(--r-pill); padding:11px 18px; font-size:15px; font-weight:700; color:#fff; cursor:pointer; transition:all .15s; }
.state-immersive .d3-town:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.state-immersive .d3-town .ct{ font-size:12.5px; font-weight:700; color:var(--gold); }
.state-immersive .d3-town:hover .ct{ color:var(--navy); }
/* Native <details> disclosure for big states (mirrors existing top-N pattern). */
.state-immersive .d3-towns-disclosure{ margin-top:16px; }
.state-immersive .d3-towns-disclosure summary{ list-style:none; display:inline-flex; align-items:center; gap:8px; background:var(--navy-600); border:1px solid var(--navy-line); border-radius:var(--r-pill); padding:11px 18px; font-size:14px; font-weight:700; color:#fff; cursor:pointer; }
.state-immersive .d3-towns-disclosure summary::-webkit-details-marker{ display:none; }
.state-immersive .d3-towns-disclosure summary::after{ content:"+"; font-weight:900; color:var(--gold); }
.state-immersive .d3-towns-disclosure[open] summary::after{ content:"\2212"; }
.state-immersive .d3-towns-disclosure summary:hover{ border-color:var(--gold); }
.state-immersive .d3-towns-disclosure-body{ margin-top:14px; }

/* FAQ */
.state-immersive .d3-faq{ max-width:860px; }
.state-immersive .d3-q{ border:1px solid var(--navy-line); border-radius:var(--r-md); background:var(--navy-600); margin-bottom:12px; overflow:hidden; }
.state-immersive .d3-q summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:18px; font-weight:700; color:#fff; }
.state-immersive .d3-q summary::-webkit-details-marker{ display:none; }
.state-immersive .d3-q .ic{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; transition:transform .2s; }
.state-immersive .d3-q[open] .ic{ transform:rotate(45deg); }
.state-immersive .d3-q .ans{ padding:0 24px 22px; color:var(--muted-navy); font-size:15.5px; line-height:1.6; }
.state-immersive .d3-q .ans a{ color:var(--gold); text-decoration:underline; }

/* Final */
.state-immersive .d3-final{ text-align:center; padding:110px 0; position:relative; overflow:clip; }
.state-immersive .d3-final h2{ font-family:var(--serif); font-weight:600; font-size:clamp(40px,7vw,92px); color:var(--navy); line-height:.98; letter-spacing:-.025em; text-wrap:balance; }
.state-immersive .d3-final p{ font-size:20px; color:rgba(11,45,57,.8); margin:20px auto 0; max-width:30em; font-weight:500; }
.state-immersive .d3-final .d3-final-row{ display:flex; gap:16px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.state-immersive .btn-on-gold{ background:var(--navy); color:#fff; }
.state-immersive .btn-on-gold:hover{ background:#06222b; color:#fff; }

/* Listing photo placeholder — replaced by the listing's main photo when present. */
.state-immersive .photoph{ position:relative; }
.state-immersive .photoph::after{ content:""; position:absolute; inset:0; background:center / 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5L5 21'/%3E%3C/svg%3E"); opacity:.42; pointer-events:none; }
.state-immersive .d3-sc .img.photoph::after{ background-size:44px; }
.state-immersive .d3-fc .ic.photoph::after{ background-size:22px; }
/* When a real photo is present we add .has-photo to suppress the icon glyph. */
.state-immersive .photoph.has-photo::after{ display:none; }

/* ===== Inline signup form ===== */
.state-immersive .d3-social{ display:flex; gap:10px; flex-wrap:wrap; max-width:560px; margin-top:30px; }
.state-immersive .d3-social .sbtn{ flex:1; min-width:210px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:15px; padding:14px 18px; border-radius:var(--r-pill); border:1.5px solid var(--navy-line); background:var(--navy-600); color:#fff; cursor:pointer; transition:border-color .15s, background .2s, transform .15s; }
.state-immersive .d3-social .sbtn:hover{ border-color:var(--gold); transform:translateY(-1px); }
.state-immersive .d3-social .sbtn svg{ flex:none; }
.state-immersive .d3-or{ display:flex; align-items:center; gap:14px; max-width:560px; margin:24px 0 16px; color:var(--muted-navy); font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.state-immersive .d3-or::before, .state-immersive .d3-or::after{ content:""; flex:1; height:1px; background:var(--navy-line); }
.state-immersive .d3-social--light{ margin-inline:auto; justify-content:center; }
.state-immersive .d3-social--light .sbtn{ background:#fff; border-color:rgba(11,45,57,.18); color:var(--navy); }
.state-immersive .d3-social--light .sbtn:hover{ border-color:var(--navy); }
.state-immersive .d3-or--light{ margin-inline:auto; color:rgba(11,45,57,.6); }
.state-immersive .d3-or--light::before, .state-immersive .d3-or--light::after{ background:rgba(11,45,57,.18); }
.state-immersive .d3-signup{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; max-width:560px; }
.state-immersive .d3-signup .fld{ font-family:var(--sans); font-size:16px; font-weight:500; padding:16px 20px; border-radius:var(--r-pill); border:1px solid var(--navy-line); background:var(--navy-600); color:#fff; outline:none; transition:border-color .15s; }
.state-immersive .d3-signup .fld::placeholder{ color:var(--muted-navy); }
.state-immersive .d3-signup .fld:focus{ border-color:var(--gold); }
.state-immersive .d3-signup .fld--email{ flex:1; min-width:200px; }
.state-immersive .d3-signup .fld--zip{ width:104px; }
.state-immersive .d3-signup .fld--pass{ flex:1; min-width:160px; }
.state-immersive .d3-signup .tv-btn{ flex:none; }
.state-immersive .d3-signup-error{ display:none; max-width:560px; margin-top:12px; color:#ffd9cf; background:rgba(201,110,74,.16); border:1px solid rgba(201,110,74,.5); border-radius:var(--r-md); padding:12px 16px; font-size:14px; font-weight:600; }
.state-immersive .d3-signup-error.show{ display:block; }
.state-immersive .d3-signup-done{ display:none; margin-top:30px; max-width:560px; background:var(--navy-600); border:1px solid rgba(143,174,145,.5); border-radius:var(--r-md); padding:20px 24px; color:#fff; font-weight:600; align-items:flex-start; gap:13px; }
.state-immersive .d3-signup-done .ck{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; }
.state-immersive .d3-signup-done .msg{ display:flex; flex-direction:column; gap:7px; }
.state-immersive .d3-signup-done .msg strong{ font-size:16px; font-weight:800; }
.state-immersive .d3-done-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.state-immersive .d3-done-links a{ display:inline-block; background:var(--gold); color:var(--navy); font-weight:700; font-size:13px; padding:8px 15px; border-radius:var(--r-pill); text-decoration:none; transition:background .2s ease, transform .15s ease; }
.state-immersive .d3-done-links a:hover{ background:var(--gold-700); transform:translateY(-1px); }
.state-immersive .is-sent .d3-signup, .state-immersive .is-sent .d3-social, .state-immersive .is-sent .d3-or{ display:none; }
.state-immersive .is-sent .d3-signup-done{ display:flex; }
/* on-gold/light variant for final CTA */
.state-immersive .d3-signup--light{ margin-inline:auto; justify-content:center; }
.state-immersive .d3-signup--light .fld{ background:#fff; border-color:rgba(11,45,57,.18); color:var(--navy); }
.state-immersive .d3-signup--light .fld::placeholder{ color:var(--muted); }
.state-immersive .d3-signup--light .fld:focus{ border-color:var(--navy); }
.state-immersive .d3-signup--light .tv-btn{ background:var(--navy); color:#fff; }
.state-immersive .d3-signup--light .tv-btn:hover{ background:#06222b; }
.state-immersive .d3-herorate{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:22px; font-size:13.5px; font-weight:600; color:var(--muted-navy); }
.state-immersive .d3-herorate .stars{ color:var(--gold); letter-spacing:1px; }
.state-immersive .d3-herorate strong{ color:#fff; }

/* ===== Hero phone (scrolling feed inside a device) ===== */
.state-immersive .d3-hero-phone{ display:flex; justify-content:flex-end; }
.state-immersive .tv-phone{ width:300px; aspect-ratio:300/620; background:#081d24; border-radius:44px; padding:11px; position:relative; box-shadow:0 34px 80px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.06); justify-self:center; }
.state-immersive .tv-phone::before{ content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:116px; height:24px; background:#081d24; border-radius:0 0 16px 16px; z-index:4; }
.state-immersive .tv-phone-screen{ width:100%; height:100%; border-radius:34px; overflow:hidden; background:linear-gradient(180deg,var(--navy-700),var(--navy)); position:relative; display:flex; flex-direction:column; }
.state-immersive .tv-phone--hero{ width:340px; aspect-ratio:340/680; justify-self:end; }
.state-immersive .d3-phone-top{ padding:34px 14px 10px; display:flex; align-items:center; gap:10px; flex:none; }
.state-immersive .d3-phone-top .s{ flex:1; display:flex; align-items:center; gap:8px; background:var(--navy-600); border:1px solid var(--navy-line); border-radius:var(--r-pill); padding:10px 13px; font-size:12px; color:var(--muted-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state-immersive .d3-phone-top .saved{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--clay); white-space:nowrap; }
.state-immersive .d3-phone-feed{ flex:1; overflow:hidden; position:relative; }
.state-immersive .d3-phone-feed .d3-track{ padding:4px 12px 14px; }
.state-immersive .d3-track{ display:flex; flex-direction:column; gap:12px; animation:d3scroll 18s linear infinite; }
.state-immersive .d3-phone-feed:hover .d3-track{ animation-play-state:paused; }
@keyframes d3scroll{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-50%);} }
.state-immersive .d3-fc{ display:flex; gap:13px; align-items:center; background:var(--navy-600); border:1px solid var(--navy-line); border-radius:var(--r-md); padding:10px; }
.state-immersive .d3-fc .ic{ flex:none; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:19px; overflow:hidden; position:relative; }
.state-immersive .d3-fc .ic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.state-immersive .d3-fc .m{ flex:1; min-width:0; }
.state-immersive .d3-fc .tag{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.state-immersive .d3-fc .nm{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.15; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state-immersive .d3-fc .sub{ font-size:11px; color:var(--muted-navy); margin-top:2px; }
.state-immersive .d3-fc .end{ font-size:12px; font-weight:800; white-space:nowrap; }
.state-immersive .d3-fc .end.price{ color:var(--sage); }
.state-immersive .d3-fc .end.date{ color:var(--clay); }
.state-immersive .d3-fc .fav{ flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; border:1px solid var(--navy-line); color:var(--muted-navy); background:transparent; }
.state-immersive .d3-fc .fav.on{ background:rgba(201,110,74,.18); border-color:rgba(201,110,74,.5); color:var(--clay); }
.state-immersive .d3-feed-fade{ position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(transparent, var(--navy)); pointer-events:none; z-index:2; }

/* ===== App showcase phone ===== */
.state-immersive .d3-app{ display:grid; grid-template-columns:330px 1fr; gap:60px; align-items:center; }
.state-immersive .tv-ps-top{ padding:34px 16px 12px; display:flex; align-items:center; justify-content:space-between; }
.state-immersive .tv-ps-top .a{ font-family:var(--serif); font-size:17px; color:#fff; font-weight:600; }
.state-immersive .tv-ps-top .a em{ font-style:italic; color:var(--gold); }
.state-immersive .tv-ps-top .b{ font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--clay); text-transform:uppercase; }
.state-immersive .tv-ps-h{ font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--muted-navy); text-transform:uppercase; padding:6px 16px 8px; }
.state-immersive .tv-ps-list{ display:flex; flex-direction:column; gap:10px; padding:2px 14px; }
.state-immersive .tv-ps-card{ display:flex; gap:11px; align-items:center; background:var(--navy-600); border:1px solid var(--navy-line); border-radius:12px; padding:10px; }
.state-immersive .tv-ps-card .ic{ flex:none; width:42px; height:42px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.state-immersive .tv-ps-card .m{ flex:1; min-width:0; }
.state-immersive .tv-ps-card .t, .state-immersive .tv-ps-card .n{ display:block; }
.state-immersive .tv-ps-card .t{ font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.state-immersive .tv-ps-card .n{ font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state-immersive .tv-ps-card .fav{ flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; background:rgba(201,110,74,.2); color:var(--clay); }
.state-immersive .d3-app-caps{ display:grid; gap:22px; margin-top:8px; }
.state-immersive .d3-app-cap{ display:flex; gap:16px; align-items:flex-start; }
.state-immersive .d3-app-cap .e{ flex:none; width:46px; height:46px; border-radius:12px; background:rgba(11,45,57,.08); display:flex; align-items:center; justify-content:center; font-size:22px; }
.state-immersive .bg-sage .d3-app-cap .e{ background:rgba(11,45,57,.12); }
.state-immersive .d3-app-cap h4{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--navy); line-height:1.1; }
.state-immersive .d3-app-cap p{ font-size:15px; color:rgba(11,45,57,.75); margin-top:5px; line-height:1.5; }
.state-immersive .d3-appstore{ display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap; }
.state-immersive .d3-store-badge img{ height:54px; width:auto; display:block; }
/* Interim Apple-logo button used until the official "Download on the App Store"
   badge asset is dropped in (see view TODO). */
.state-immersive .d3-store-btn{ display:inline-flex; align-items:center; gap:11px; background:var(--navy); color:#fff; border-radius:12px; padding:11px 20px 11px 17px; transition:transform .15s, background .2s; }
.state-immersive .d3-store-btn:hover{ transform:translateY(-2px); background:#06222b; color:#fff; }
.state-immersive .d3-store-btn svg{ flex:none; }
.state-immersive .d3-store-btn .lbl{ display:flex; flex-direction:column; line-height:1.18; text-align:left; }
.state-immersive .d3-store-btn .sm{ font-size:11px; font-weight:600; opacity:.85; white-space:nowrap; }
.state-immersive .d3-store-btn .lg{ font-size:19px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.state-immersive .d3-rating{ display:flex; flex-direction:column; gap:2px; }
.state-immersive .d3-rating .stars{ color:var(--gold); font-size:17px; letter-spacing:2px; }
.state-immersive .d3-rating .rt{ font-size:13.5px; font-weight:700; color:rgba(11,45,57,.8); }
.state-immersive .d3-rating .rt strong{ color:var(--navy); }

/* Intro offer (business gold section) */
.state-immersive .d3-intro-offer{ display:inline-flex; align-items:center; gap:16px; background:var(--navy); color:#fff; border-radius:var(--r-md); padding:16px 22px; margin-top:24px; max-width:480px; }
.state-immersive .d3-intro-offer .price{ flex:none; font-family:var(--serif); font-size:34px; font-weight:600; color:var(--gold); line-height:1; white-space:nowrap; }
.state-immersive .d3-intro-offer .price .per{ font-size:14px; color:#fff; font-weight:600; }
.state-immersive .d3-intro-offer .txt{ font-size:13.5px; line-height:1.4; }
.state-immersive .d3-intro-offer .txt .tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--gold); padding:2px 9px; border-radius:var(--r-pill); margin-right:8px; }

/* ===== You're in control — search & radius mock ===== */
.state-immersive .d3-control{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.state-immersive .d3-ctrl-list{ display:grid; gap:16px; margin-top:24px; }
.state-immersive .d3-ctrl-list .d3-ctrl-row{ display:flex; gap:13px; align-items:flex-start; }
.state-immersive .d3-ctrl-list .ck{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; margin-top:2px; }
.state-immersive .d3-ctrl-list h4{ font-size:16px; font-weight:800; color:var(--navy); }
.state-immersive .d3-ctrl-list p{ font-size:14px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
.state-immersive .d3-search-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px; }
.state-immersive .sp-field{ margin-bottom:18px; }
.state-immersive .sp-field:last-child{ margin-bottom:0; }
.state-immersive .sp-label{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.state-immersive .sp-input{ display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid rgba(244,180,0,.6); border-radius:10px; padding:5px 5px 5px 15px; }
.state-immersive .sp-input .city{ flex:1; font-size:15px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state-immersive .sp-input .gps{ flex:none; width:38px; height:38px; border-radius:8px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:17px; }
.state-immersive .sp-radius-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.state-immersive .sp-radius-val{ font-size:13px; font-weight:800; color:#fff; background:var(--navy); border-radius:var(--r-pill); padding:4px 13px; }
.state-immersive .sp-slider{ position:relative; height:8px; background:var(--beige-2); border-radius:var(--r-pill); }
.state-immersive .sp-slider .fill{ position:absolute; left:0; top:0; bottom:0; width:13%; background:var(--gold); border-radius:var(--r-pill); }
.state-immersive .sp-slider .thumb{ position:absolute; left:13%; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:var(--navy); border:3px solid #fff; box-shadow:0 2px 6px rgba(11,45,57,.3); }
.state-immersive .sp-minmax{ display:flex; justify-content:space-between; margin-top:9px; font-size:12px; font-weight:700; color:var(--muted); }
.state-immersive .sp-search{ display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid rgba(244,180,0,.6); border-radius:10px; padding:13px 14px; font-size:14.5px; color:var(--muted); font-weight:500; white-space:nowrap; }
.state-immersive .sp-search .ph{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.state-immersive .sp-search .q{ color:var(--navy); font-weight:700; }
.state-immersive .sp-search .ic{ flex:none; width:30px; height:30px; border-radius:7px; background:var(--beige-2); display:flex; align-items:center; justify-content:center; color:var(--navy); font-size:14px; }
.state-immersive .sp-search .ic.go{ background:var(--navy); color:#fff; }
.state-immersive .sp-cats{ display:grid; gap:9px; }
.state-immersive .sp-cat{ display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600; color:var(--ink); }
.state-immersive .sp-cat .box{ flex:none; width:20px; height:20px; border-radius:5px; border:1.5px solid rgba(244,180,0,.7); background:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; }
.state-immersive .sp-cat .box.on{ background:var(--navy); border-color:var(--navy); color:var(--gold); font-weight:900; }
.state-immersive .sp-foot{ display:flex; align-items:center; gap:9px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.state-immersive .sp-loc{ font-size:13.5px; font-weight:800; color:var(--sage-700); display:flex; align-items:center; gap:7px; }

/* ===== Testimonials ===== */
.state-immersive .d3-testis{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.state-immersive .d3-testi{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.state-immersive .d3-testi .stars{ color:var(--gold); font-size:16px; letter-spacing:3px; }
.state-immersive .d3-testi .quote{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--navy); line-height:1.42; margin-top:14px; flex:1; }
.state-immersive .d3-testi .who{ display:flex; align-items:center; gap:13px; margin-top:22px; }
.state-immersive .d3-testi .av{ flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; }
.state-immersive .d3-testi .nm{ font-weight:800; color:var(--navy); font-size:14.5px; }
.state-immersive .d3-testi .loc{ font-size:13px; color:var(--muted); }

/* ===== Mission ===== */
.state-immersive .d3-mission{ display:grid; grid-template-columns:330px 1fr; gap:50px; align-items:center; }
/* Founders pair (replaces the old single portrait slot). Photos are pre-cropped
   to matching head-and-shoulders framing; show them at their natural portrait
   shape, same display height, side by side (bottoms aligned). */
.state-immersive .d3-founders{ display:flex; justify-content:center; align-items:flex-start; gap:16px; }
.state-immersive .d3-founder{ margin:0; text-align:center; }
.state-immersive .d3-founder img{ display:block; height:210px; width:auto; border-radius:var(--r-md); box-shadow:var(--shadow-md); }
.state-immersive .d3-founder figcaption{ margin-top:11px; }
.state-immersive .d3-founder .nm{ display:block; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--navy); line-height:1.15; }
.state-immersive .d3-founder .role{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-700); margin-top:3px; }
.state-immersive .d3-portrait{ width:300px; height:360px; border-radius:var(--r-lg); overflow:hidden; position:relative; background:linear-gradient(160deg,var(--navy-600),var(--navy)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); justify-self:center; }
.state-immersive .d3-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.state-immersive .d3-portrait .ph{ text-align:center; color:var(--muted-navy); font-size:13px; font-weight:700; }
.state-immersive .d3-portrait .ph .big{ font-size:34px; display:block; margin-bottom:8px; }
.state-immersive .d3-mission .q{ font-family:var(--serif); font-size:clamp(24px,3vw,33px); font-weight:500; color:var(--navy); line-height:1.32; letter-spacing:-.01em; }
.state-immersive .d3-mission .q .hl{ color:var(--clay); }
.state-immersive .d3-mission p{ font-size:16px; color:var(--ink-soft); line-height:1.65; margin-top:18px; }
.state-immersive .d3-mission .sig{ margin-top:24px; display:flex; align-items:center; gap:14px; }
.state-immersive .d3-mission .sig .name{ font-family:var(--serif); font-size:22px; color:var(--navy); font-weight:600; font-style:italic; }
.state-immersive .d3-mission .sig .role{ font-size:13.5px; color:var(--muted); font-weight:700; border-left:1px solid var(--line); padding-left:14px; }

/* ===== Sticky CTA ===== */
.state-immersive .d3-sticky{ position:fixed; right:20px; bottom:20px; z-index:70; box-shadow:var(--shadow-lg); }

/* ── Responsive ── */
@media (max-width:980px){
  .state-immersive .d3-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .state-immersive .d3-hero-phone{ justify-content:center; }
  .state-immersive .tv-phone--hero{ justify-self:center; width:320px; }
  .state-immersive .d3-links{ display:none; }
}
@media (max-width:880px){
  .state-immersive .d3-inc{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .state-immersive .d3-fblocks{ grid-template-columns:1fr 1fr; }
  .state-immersive .d3-fblock.span2{ grid-column:span 2; }
  .state-immersive .d3-state-grid{ grid-template-columns:1fr; gap:34px; }
  .state-immersive .d3-control{ grid-template-columns:1fr; gap:36px; }
  .state-immersive .d3-biz{ grid-template-columns:1fr; gap:32px; }
  .state-immersive .d3-biz-photo{ margin-bottom:32px; }
  .state-immersive .d3-biz-photo img{ height:220px; }
  .state-immersive .d3-app{ grid-template-columns:1fr; gap:40px; }
  .state-immersive .d3-mission{ grid-template-columns:1fr; gap:34px; }
  .state-immersive .d3-grid3{ grid-template-columns:repeat(2,1fr); }
  .state-immersive .d3-testis{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .state-immersive .d3-stats{ grid-template-columns:1fr 1fr; gap:36px 20px; }
}
@media (max-width:680px){
  .state-immersive .d3-bar-in .ev, .state-immersive .d3-bar-in .sep2{ display:none; }
  .state-immersive .d3-bar-in{ font-size:12.5px; }
}
@media (max-width:560px){
  .state-immersive .d3-fblocks{ grid-template-columns:1fr; }
  .state-immersive .d3-fblock.span2{ grid-column:span 1; }
  .state-immersive .d3-inc{ grid-template-columns:1fr; }
  .state-immersive .d3-sticky{ left:16px; right:16px; }
  .state-immersive .d3-sticky .tv-btn{ width:100%; }
}
@media (max-width:540px){
  .state-immersive .d3-grid3{ grid-template-columns:1fr; }
}

/* Respect reduced motion (mirrors brand.css; scoped). */
@media (prefers-reduced-motion:reduce){
  .state-immersive *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .state-immersive .d3-track{ animation:none !important; }
}