/* Public homepage + pricing page styles (moved out of includes/landing.php
 * 2026-09-30 so pricing.php can share them). */
@font-face{ font-family:'Montserrat'; src:url('fonts/Montserrat.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
:root{ --navy:#002868; --red:#BF0A30; --gold:#C9A84C; --ink:#1b2233; --muted:#5a6070; --line:#e2e5ee; --wash:#f4f6fb; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:78px; }
body{ margin:0; font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--ink); background:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }
/* the ~gold~ marker from editable copy (includes/site_content.php) */
.sc-g{ color:var(--gold); }
.btn{ display:inline-block; border:0; border-radius:12px; padding:14px 26px; font-weight:800; font-size:1rem; cursor:pointer; font-family:inherit; text-align:center; }
.btn.navy{ background:var(--navy); color:#fff; }
.btn.gold{ background:var(--gold); color:#26210c; }
.btn.ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.pill{ display:inline-block; font-size:.72rem; letter-spacing:.14em; font-weight:800; color:var(--gold); border:1.5px solid rgba(201,168,76,.6); border-radius:999px; padding:6px 14px; }
.pill.dark{ color:var(--navy); border-color:rgba(0,40,104,.3); }
header.nav{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.2rem; color:var(--navy); }
.nav-links{ display:flex; align-items:center; gap:26px; font-weight:700; }
.nav-links a.muted{ color:var(--muted); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-login{ padding:10px 22px; }
.mnav-cb{ display:none; }
.mnav-btn{ display:none; font-size:1.45rem; line-height:1; color:var(--navy); cursor:pointer;
           padding:8px 12px; border:2px solid var(--line); border-radius:10px; user-select:none; }
.hero{ background:radial-gradient(1200px 500px at 80% -10%, rgba(201,168,76,.18), transparent 60%), linear-gradient(160deg,#00214f,#002868 60%,#001a44); color:#fff; padding:60px 0 72px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero h1{ font-size:2.6rem; line-height:1.1; margin:16px 0 14px; font-weight:900; letter-spacing:-.5px; }
.hero .sub{ font-size:1.2rem; color:#cdd6ea; max-width:34rem; line-height:1.5; }
.payoff{ margin:24px 0 0; display:grid; gap:4px; }
.payoff span{ display:block; color:#fff; font-weight:800; font-size:1.3rem; line-height:1.3; letter-spacing:-.2px; }
.payoff .closer{ color:var(--gold); margin-top:6px; }
.which{ margin:26px 0 10px; font-size:.72rem; letter-spacing:.14em; font-weight:800; color:var(--gold); text-transform:uppercase; }
.paths-hero{ list-style:none; padding:0; margin:0 0 30px; display:grid; gap:10px; justify-items:start; }
.paths-hero a{ display:inline-flex; align-items:center; gap:10px; color:var(--navy); background:#fff; font-weight:800; font-size:1rem;
               padding:12px 20px; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.25); }
.paths-hero a:hover{ background:var(--gold); color:#26210c; }
.paths-hero .arr{ color:var(--gold); font-weight:900; }
.paths-hero a:hover .arr{ color:#26210c; }
/* A real screenshot of the app, phone/tablet only — on desktop the white
   login card next to the pitch already breaks up the navy hero; on a
   narrow screen that card falls below the fold, so the whole visible
   area was solid navy text (Joe, 2026-08-08: "kind of plain on the
   phone"). Reuses the same screenshot + tap-to-enlarge lightbox as the
   "live look inside" section further down the page. */
.hero-shot{ display:none; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
/* Shrunk + relabeled (was the same visual weight as the pitch itself,
   reading as the main call to action instead of a returning-customer
   shortcut). */
.login{ background:#fff; color:var(--ink); border-radius:16px; padding:20px 22px 20px; box-shadow:0 16px 40px rgba(0,0,0,.22); }
.login .tag{ display:block; font-size:.66rem; letter-spacing:.1em; font-weight:800; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.login h3{ margin:0 0 4px; color:var(--navy); font-size:1.08rem; }
.login p.small{ margin:0 0 10px; color:var(--muted); font-size:.88rem; }
.login label{ display:block; font-weight:700; font-size:.86rem; margin:12px 0 5px; }
.login input{ width:100%; padding:12px 13px; border:1.5px solid #c4c9d6; border-radius:10px; font-size:1rem; font-family:inherit; }
.login .btn{ width:100%; margin-top:18px; }
.login .forgot{ display:block; text-align:center; margin-top:12px; color:var(--navy); font-weight:700; font-size:.9rem; }
.login .noacct{ text-align:center; color:var(--muted); font-size:.85rem; margin:14px 0 0; }
section.band{ padding:64px 0; }
section.band.wash{ background:var(--wash); }
.sec-head{ text-align:center; max-width:44rem; margin:0 auto 40px; }
.sec-head h2{ font-size:2.1rem; color:var(--navy); margin:12px 0 10px; font-weight:900; letter-spacing:-.3px; }
.sec-head p{ font-size:1.1rem; color:var(--muted); margin:0; line-height:1.5; }
.wedge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.tvframe{ position:relative; }
.tv{ background:#0b1730; border:12px solid #10192e; border-radius:16px; aspect-ratio:16/9; box-shadow:0 26px 60px rgba(0,0,0,.22); overflow:hidden; }
.tv img{ width:100%; height:100%; object-fit:cover; }
.tvstat{ width:max-content; max-width:100%; margin:18px auto 0; justify-content:center; background:#fff; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.2); padding:14px 18px; display:flex; gap:14px; align-items:center; }
.tvstat .big{ font-size:1.4rem; font-weight:900; color:var(--navy); }
.tvstat .lbl{ font-size:.76rem; color:var(--muted); font-weight:700; }
.tvstat .div{ border-left:1px solid var(--line); padding-left:14px; }
.wedge-copy h2{ font-size:2rem; color:var(--navy); margin:8px 0 12px; font-weight:900; }
.wedge-copy p{ font-size:1.08rem; color:var(--muted); line-height:1.55; }
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.paths.three{ grid-template-columns:repeat(3,1fr); gap:22px; }
.path{ border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(10,20,50,.05); overflow:hidden; display:flex; flex-direction:column; }
.path .thumb{ aspect-ratio:16/9; overflow:hidden; }
.path .thumb img{ width:100%; height:100%; object-fit:cover; }
.path .body{ padding:24px 28px 28px; display:flex; flex-direction:column; flex:1; }
.path h3{ font-size:1.35rem; color:var(--navy); margin:0 0 8px; }
.path p{ color:var(--muted); font-size:1rem; line-height:1.5; margin:0 0 14px; }
/* Story buttons pin to the card bottom so all three line up regardless of
   text length — they were floating mid-card and crowding the card edge. */
.path .body .btn{ margin-top:auto; align-self:flex-start; white-space:nowrap; }
/* The three-up "story" cards are narrower than the two-up ones — a nowrap
   button can be wider than the card and get silently clipped by .path's
   overflow:hidden. Let it wrap there instead of running off the edge. */
.paths.three .path .body .btn{ white-space:normal; text-align:left; line-height:1.3; }
.path .link{ color:var(--red); font-weight:800; }
.dash-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.dash-copy h2{ font-size:2rem; color:var(--navy); margin:8px 0 12px; font-weight:900; }
.dash-copy p{ font-size:1.06rem; color:var(--muted); line-height:1.55; }
.dash-copy ul{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.dash-copy li{ display:flex; gap:10px; color:var(--ink); font-size:1rem; }
.dash-copy li .ck{ color:var(--gold); font-weight:900; }
.dash-shot{ border-radius:14px; overflow:hidden; box-shadow:0 26px 60px rgba(10,20,50,.18); border:1px solid var(--line); }
.dash-shot .bar{ background:#e9ecf3; padding:9px 14px; display:flex; gap:6px; }
.dash-shot .dot{ width:11px; height:11px; border-radius:50%; background:#c9cedb; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step{ text-align:center; }
.step .num{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:900; }
.step h3{ color:var(--navy); font-size:1.22rem; margin:0 0 8px; }
.step p{ color:var(--muted); margin:0; line-height:1.5; }
.story{ background:linear-gradient(160deg,#00224f,#002868); color:#fff; border-radius:22px; overflow:hidden;
        display:grid; grid-template-columns:440px 1fr; align-items:stretch; box-shadow:0 20px 50px rgba(0,20,60,.25); }
.story .art{ position:relative; min-height:340px; }
.story .art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story .art::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,26,68,0) 72%, rgba(0,30,72,.85)); }
.story .txt{ padding:44px 46px; }
.story h2{ margin:14px 0 12px; font-size:1.75rem; font-weight:900; }
.story h2 .l2{ color:var(--gold); }
.story p{ margin:0; color:#cfd8ec; font-size:1.05rem; line-height:1.6; }
.prices{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.price{ border:1px solid var(--line); border-radius:18px; padding:26px 22px; background:#fff; display:flex; flex-direction:column; }
.price.featured{ border:2px solid var(--gold); box-shadow:0 16px 40px rgba(201,168,76,.18); }
.price .seg{ font-weight:800; color:var(--red); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.price .from{ font-size:.7rem; color:var(--muted); font-weight:800; text-transform:uppercase;
              letter-spacing:.08em; margin-top:10px; }
.price .amt{ font-size:1.9rem; font-weight:900; color:var(--navy); margin:2px 0 2px; }
.price .amt small{ font-size:.8rem; color:var(--muted); font-weight:700; }
.price .who{ color:var(--muted); font-size:.85rem; }
.price ul{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:9px; }
.price li{ font-size:.92rem; display:flex; gap:8px; }
.price li .ck{ color:var(--gold); font-weight:900; }
.price .note{ margin-top:auto; padding-top:16px; color:var(--muted); font-size:.78rem; }
.concierge{ display:flex; align-items:center; gap:16px; background:var(--wash);
            border:1px solid var(--line); border-radius:16px; padding:18px 22px;
            max-width:860px; margin:16px auto 0; }
.concierge .c-emoji{ font-size:1.9rem; }
.concierge .c-copy{ flex:1; color:var(--ink); font-size:.95rem; line-height:1.5; }
.concierge .c-copy b{ display:block; color:var(--navy); margin-bottom:2px; }
@media (max-width:640px){ .concierge{ flex-direction:column; text-align:center; } }
/* Tap-to-enlarge: any showcase image opens full-size in a lightbox. */
.zoom{ position:relative; cursor:zoom-in; }
/* The enlarge hint lives UNDER the pictures now (captions/section notes) —
   an overlay pill kept covering slide text, especially on touch screens. */
.zoom .zhint{ display:none; }
.shotcap{ text-align:center; font-size:.9rem; color:var(--muted); margin-top:10px; font-weight:600; }
.tapnote{ font-size:.85rem; color:var(--muted); text-align:center; margin-top:8px; }
.lightbox{ position:fixed; inset:0; z-index:100; background:rgba(4,10,26,.9);
  display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1100px,94vw); max-height:88vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox .lb-close{ position:absolute; top:18px; right:22px; width:46px; height:46px;
  border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:1.5rem;
  line-height:1; cursor:pointer; }
footer{ background:#00152f; color:#aeb9d4; padding:40px 0; }
.foot-in{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-brand{ color:#fff; font-weight:900; font-size:1.15rem; display:flex; gap:10px; align-items:center; }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; font-weight:600; }
@media(max-width:1100px){ .nav-links{ gap:14px; } .nav-links a{ font-size:.9rem; } }
@media(max-width:940px){
  .hero-grid,.wedge-grid,.dash-grid{ grid-template-columns:1fr; }
  .paths,.paths.three,.steps,.prices{ grid-template-columns:1fr; }
  .hero h1{ font-size:1.95rem; }
  .payoff span{ font-size:1.15rem; }
  .paths-hero{ justify-items:stretch; }
  .paths-hero a{ width:100%; justify-content:space-between; font-size:.94rem; padding:12px 16px; }
  .hero-shot{ display:block; margin:22px 0 4px; }
  .hero-shot .thumb{ border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.22); }
  .hero-shot .thumb img{ width:100%; display:block; }
  .hero-shot p{ margin:10px 2px 0; color:#cdd6ea; font-size:.85rem; font-weight:700; text-align:center; }
  .story{ grid-template-columns:1fr; }
  .story .art{ min-height:230px; }
  .story .art::after{ background:linear-gradient(180deg, rgba(0,26,68,0) 62%, rgba(0,34,79,.9)); }
  .story .txt{ padding:28px 26px 34px; }
  /* Phone/tablet: section links live in a ☰ dropdown; Log in stays in the
     bar where it's easy to find (deliberate — senior-friendly). */
  .nav-links{ position:absolute; top:66px; left:0; right:0; display:none;
              flex-direction:column; align-items:stretch; gap:0; padding:4px 0 8px;
              background:#fff; border-bottom:1px solid var(--line);
              box-shadow:0 18px 34px rgba(10,20,50,.14); }
  .nav-links a.muted{ display:block; padding:15px 26px; font-size:1.08rem; border-top:1px solid var(--wash); }
  .mnav-cb:checked ~ .nav-links{ display:flex; }
  .mnav-btn{ display:block; }
}

/* ---- 2026-09-29 refresh ---- */
.hero{ padding:56px 0 70px; }
.hero-grid{ grid-template-columns:1fr 1fr; gap:52px; }
.hero-tv{ position:relative; }
.hero-tv .tv{ border-width:14px; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.rot{ position:relative; width:100%; height:100%; }
.rot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:rotfade 20s infinite; }
.rot img:nth-child(1){ animation-delay:0s; } .rot img:nth-child(2){ animation-delay:5s; }
.rot img:nth-child(3){ animation-delay:10s; } .rot img:nth-child(4){ animation-delay:15s; }
@keyframes rotfade{ 0%{opacity:0} 3%{opacity:1} 25%{opacity:1} 28%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .rot img{ animation:none; } .rot img:first-child{ opacity:1; } }
.tv-stand{ width:26%; height:16px; margin:0 auto; background:linear-gradient(#1a2338,#0b1222); border-radius:0 0 10px 10px; }
/* Sits under the TV, never on it — a floating chip covered the slide's own text. */
.tv-chip{ width:max-content; max-width:100%; margin:16px auto 0; background:#fff; color:var(--navy); border-radius:12px; padding:10px 14px;
          font-weight:800; font-size:.86rem; box-shadow:0 14px 34px rgba(0,0,0,.3); display:flex; gap:8px; align-items:center; }
.tv-cap{ text-align:center; color:#cdd6ea; font-size:.88rem; margin-top:14px; font-weight:600; }
.hero-login{ margin-top:16px; font-size:.95rem; color:#c9d4ea; }
.hero-login a{ color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.riskline{ margin-top:10px; font-size:.86rem; color:#9fb0cf; }

.tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.tabs button{ font:inherit; font-weight:800; font-size:.94rem; padding:11px 16px; border-radius:999px; cursor:pointer;
              background:#fff; color:var(--navy); border:2px solid var(--line); display:flex; gap:8px; align-items:center; }
.tabs button[aria-selected="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
.tabpanel{ display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center; background:#fff; border:1px solid var(--line);
           border-radius:22px; padding:34px; box-shadow:0 14px 40px rgba(10,20,50,.07); margin-bottom:18px; }
.js-tabs .tabpanel[hidden]{ display:none; }
.tabpanel h3{ font-size:1.7rem; color:var(--navy); margin:6px 0 10px; font-weight:900; }
.tabpanel .who{ font-size:.78rem; letter-spacing:.12em; font-weight:800; color:var(--red); text-transform:uppercase; }
.ticks{ list-style:none; padding:0; margin:14px 0 20px; display:grid; gap:10px; }
.ticks li{ display:flex; gap:10px; line-height:1.45; }
.ticks li::before{ content:'✓'; color:var(--gold); font-weight:900; flex:none; }
.tabpanel .pic{ border-radius:14px; overflow:hidden; box-shadow:0 18px 44px rgba(10,20,50,.18); }

.spot{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; margin:0 0 70px; }
.spot:last-child{ margin-bottom:0; }
.spot.flip .spot-media{ order:2; }
.spot h3{ font-size:1.85rem; color:var(--navy); margin:8px 0 10px; font-weight:900; line-height:1.15; }
.spot p{ color:var(--muted); font-size:1.05rem; line-height:1.55; margin:0; }
/* Picture + phone side by side (the phone used to overlap the picture's corner and hide its text). */
.spot-media{ position:relative; display:flex; gap:16px; align-items:flex-end; }
.spot-media > .tv, .spot-media > .frame{ flex:1 1 auto; min-width:0; }
.spot-media .frame{ border-radius:14px; overflow:hidden; box-shadow:0 24px 56px rgba(10,20,50,.2); border:1px solid var(--line); background:#fff; }
.spot-media .tv{ border-width:10px; }
.spot-media .phone{ flex:0 0 27%; border:8px solid #10192e; border-radius:26px;
                    overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.35); background:#fff; }
.spot-media .phone img{ width:100%; display:block; }

.shots6{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.shots6 .thumb{ border-radius:14px; overflow:hidden; box-shadow:0 12px 34px rgba(10,25,50,.14); border:1px solid var(--line); aspect-ratio:16/11; background:#f4f6fb; }
.shots6 .thumb img{ width:100%; height:100%; object-fit:cover; object-position:left top; }
.gal6{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gal6 .thumb{ border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(10,25,50,.14); }

.faq{ max-width:860px; margin:0 auto; display:grid; gap:12px; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 22px; }
.faq summary{ cursor:pointer; font-weight:800; color:var(--navy); font-size:1.08rem; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::after{ content:'+'; color:var(--gold); font-size:1.4rem; line-height:1; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ margin:0 0 18px; color:var(--muted); line-height:1.6; }
.finalcta{ background:linear-gradient(160deg,#00224f,#002868); color:#fff; border-radius:24px; padding:52px 40px; text-align:center; }
.finalcta h2{ font-size:2.2rem; margin:0 0 10px; font-weight:900; }
.finalcta p{ color:#cfd8ec; font-size:1.1rem; margin:0 auto 26px; max-width:40rem; line-height:1.5; }
.finalcta .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@media(max-width:940px){
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .tabpanel{ grid-template-columns:1fr; padding:22px; gap:22px; }
  .tabpanel .pic{ order:-1; }
  .spot{ grid-template-columns:1fr; gap:26px; margin-bottom:56px; }
  .spot.flip .spot-media{ order:0; }
  .shots6, .gal6{ grid-template-columns:1fr 1fr; }
  .finalcta{ padding:36px 22px; }
  .finalcta h2{ font-size:1.7rem; }
}
@media(max-width:560px){ .shots6, .gal6{ grid-template-columns:1fr; } .tabs button{ font-size:.9rem; padding:10px 14px; } }
/* Phones: the phone mockup would sit on top of the TV picture — stack it. */
@media(max-width:640px){ .spot-media{ flex-direction:column; align-items:stretch; } .spot-media .phone{ flex:none; width:52%; margin:0 auto; } }
.billing{ display:flex; justify-content:center; gap:0; margin:0 auto 26px; width:max-content; max-width:100%; background:var(--wash); border:1px solid var(--line); border-radius:999px; padding:4px; }
.billing button{ font:inherit; font-weight:800; font-size:.92rem; border:0; background:transparent; color:var(--navy); padding:10px 18px; border-radius:999px; cursor:pointer; }
.billing button[aria-pressed="true"]{ background:var(--navy); color:#fff; }
.prices.three{ grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price{ position:relative; }
.price .badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#26210c; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.price .who{ margin:4px 0 10px; }
.price .per{ font-size:.8rem; color:var(--muted); font-weight:700; min-height:1.2em; }
.prices[data-billing="yearly"] .m, .prices[data-billing="monthly"] .y{ display:none; }
.price .facts{ margin-top:12px; padding:10px 12px; background:var(--wash); border-radius:10px; font-size:.86rem; font-weight:700; color:var(--navy); line-height:1.4; }
.price .pbtn{ margin-top:auto; }
.price ul{ margin-bottom:20px; }
.addons{ margin-top:30px; }
.addons h3{ text-align:center; color:var(--navy); font-size:1.15rem; margin:0 0 14px; }
.addon-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.addon{ background:var(--wash); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.addon b{ display:block; color:var(--navy); font-size:.92rem; }
.addon b span{ color:var(--muted); font-weight:700; }
.addon small{ display:block; color:var(--muted); font-size:.82rem; margin-top:3px; line-height:1.4; }
.finep{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:18px; line-height:1.6; }
.finep a{ color:var(--navy); font-weight:800; }
@media(max-width:940px){ .prices.three{ grid-template-columns:1fr; max-width:520px; margin:0 auto; gap:30px; } }
/* How you make a slide — under "The difference" */
.makes{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.makes li{ display:flex; gap:12px; align-items:flex-start; line-height:1.45; color:var(--ink); }
.makes .mi{ font-size:1.3rem; line-height:1.2; flex:none; }
.makes b{ color:var(--navy); }

/* ---- 2026-09-30 reorganization: the six answers, place tiles, pricing ---- */
[hidden]{ display:none !important; }
.markets{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 auto 26px; max-width:980px; }
.markets button{ font:inherit; font-weight:800; font-size:.94rem; padding:11px 16px; border-radius:999px; cursor:pointer;
                 background:#fff; color:var(--navy); border:2px solid var(--line); display:flex; gap:8px; align-items:center; }
.markets button:hover{ border-color:var(--navy); }
.markets button[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
.answers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ans{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 24px 20px; box-shadow:0 10px 30px rgba(10,20,50,.06);
      display:flex; flex-direction:column; }
.ans-q{ display:flex; gap:12px; align-items:flex-start; }
.ans-ic{ font-size:1.5rem; line-height:1.1; flex:none; }
.ans-q h3{ margin:0; color:var(--navy); font-size:1.18rem; line-height:1.3; font-weight:900; }
.ans-a{ margin-top:12px; }
.ans-a p{ margin:0 0 8px; color:var(--muted); line-height:1.55; font-size:.98rem; }
.ans-a .ans-head{ color:var(--ink); font-weight:800; font-size:1.05rem; margin-bottom:6px; }
.ans-more{ margin-top:auto; padding-top:8px; color:var(--red); font-weight:800; font-size:.95rem; align-self:flex-start; }
.protag{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#26210c;
         background:var(--gold); border-radius:6px; padding:1px 6px; vertical-align:2px; }
.ans-story{ text-align:center; margin-top:28px; }
.places{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.place{ display:flex; gap:16px; align-items:flex-start; padding:20px 20px 18px; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
        box-shadow:0 10px 30px rgba(10,20,50,.06); transition:transform .15s, box-shadow .15s; }
.place:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(10,20,50,.12); }
.place-ic{ font-size:1.7rem; line-height:1; width:54px; height:54px; flex:none; display:flex; align-items:center; justify-content:center;
           background:var(--wash); border-radius:14px; }
.place-body{ display:flex; flex-direction:column; gap:4px; flex:1; align-self:stretch; }
.place-body b{ color:var(--navy); font-size:1.12rem; }
.place-body small{ color:var(--muted); font-size:.95rem; line-height:1.45; }
.place-go{ margin-top:auto; padding-top:10px; color:var(--red); font-weight:800; font-size:.92rem; }
.ptease{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:900px; margin:0 auto; }
.pt{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; background:#fff;
     border:1px solid var(--line); border-radius:18px; padding:26px 18px 22px; }
.pt.featured{ border:2px solid var(--gold); box-shadow:0 16px 40px rgba(201,168,76,.18); }
.pt .badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#26210c; font-weight:800;
            font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.pt .seg{ font-weight:800; color:var(--red); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.pt .amt{ font-size:2rem; font-weight:900; color:var(--navy); }
.pt .amt small{ font-size:.8rem; color:var(--muted); font-weight:700; }
.pt .who{ color:var(--muted); font-size:.9rem; }
@media(max-width:940px){
  .answers, .places{ grid-template-columns:1fr 1fr; }
  .ptease{ grid-template-columns:1fr; max-width:420px; }
}
@media(max-width:640px){
  .answers, .places{ grid-template-columns:1fr; }
  .markets{ display:grid; grid-template-columns:1fr 1fr; }
  .markets button{ font-size:.86rem; padding:10px 10px; justify-content:center; text-align:left; border-radius:14px; }
}

/* ---- pricing.php ---- */
.phero{ background:var(--wash); padding:52px 0 18px; text-align:center; }
.phero h1{ font-size:2.4rem; color:var(--navy); margin:14px auto 12px; font-weight:900; letter-spacing:-.4px; max-width:46rem; line-height:1.15; }
.phero p{ font-size:1.12rem; color:var(--muted); margin:0 auto; max-width:42rem; line-height:1.55; }
.incl{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.incl div{ background:var(--wash); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.incl b{ display:block; color:var(--navy); margin-bottom:4px; }
.incl span{ color:var(--muted); font-size:.95rem; line-height:1.5; }
@media(max-width:940px){ .incl{ grid-template-columns:1fr; } .phero h1{ font-size:1.85rem; } }

/* What the chosen kind of place's screens look like (above the six answers). */
.showcase{ margin:0 auto 30px; max-width:980px; }
.sc-media{ display:flex; gap:22px; align-items:flex-end; justify-content:center; }
.sc-tv{ flex:1 1 auto; min-width:0; max-width:720px; }
.showcase.solo .sc-tv{ max-width:760px; }
.sc-tv .tv{ border-width:12px; }
.srot{ position:relative; width:100%; height:100%; }
.srot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s; }
.srot img.on{ opacity:1; }
.sc-phone{ flex:0 0 21%; border:8px solid #10192e; border-radius:26px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.3); background:#fff; }
.sc-frame{ flex:0 0 36%; border-radius:12px; overflow:hidden; box-shadow:0 22px 50px rgba(10,20,50,.2); border:1px solid var(--line); background:#fff; align-self:center; }
.sc-phone img, .sc-frame img{ width:100%; display:block; }
.showcase figcaption{ text-align:center; color:var(--ink); font-weight:700; font-size:1.02rem; margin-top:16px; }
.showcase figcaption .tapnote{ display:block; font-weight:500; margin-top:4px; }
@media(max-width:640px){
  .sc-media{ flex-direction:column; align-items:stretch; }
  .sc-phone{ flex:none; width:52%; margin:0 auto; }
  .sc-frame{ flex:none; }
}

/* pricing.php — "The whole thing, in one list" (same items and tags as What's included) */
.plist{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px 30px; background:#fff; border:1px solid var(--line);
        border-radius:20px; padding:30px 32px; box-shadow:0 12px 34px rgba(10,20,50,.06); }
.plist-group h3{ color:var(--navy); font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px;
                 padding-bottom:8px; border-bottom:2px solid var(--gold); }
.plist-group ul{ list-style:none; padding:0; margin:0; }
.plist-group li{ padding-left:23px; position:relative; margin-bottom:9px; color:var(--ink); font-size:.94rem; line-height:1.45; }
.plist-group li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800; }
.tier{ display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px;
       border-radius:999px; margin-left:4px; vertical-align:1px; white-space:nowrap; }
.tier-pro{ background:var(--gold); color:#26210c; }
.tier-premium{ background:var(--navy); color:#fff; }
.tier-add-on{ background:#eef1f7; color:var(--navy); border:1px solid #d5dae6; }
@media(max-width:940px){ .plist{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .plist{ grid-template-columns:1fr; padding:22px 20px; } }

/* about.php — Our story */
.about-badge{ margin-top:22px; color:var(--gold); font-weight:800; font-size:.95rem; letter-spacing:.02em; }
.about-art img{ width:100%; border-radius:18px; box-shadow:0 26px 60px rgba(0,0,0,.4); }
.about-art.soft img{ box-shadow:0 20px 50px rgba(10,20,50,.2); }
.about-rows{ max-width:860px; display:grid; gap:44px; }
.about-row{ display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start; }
.about-num{ width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center;
            justify-content:center; font-size:1.4rem; font-weight:900; }
.about-row h2, .about-split h2{ font-size:1.9rem; color:var(--navy); margin:10px 0 10px; font-weight:900; line-height:1.15; }
.about-row p, .about-split p{ font-size:1.1rem; color:var(--muted); line-height:1.65; margin:0 0 12px; }
.about-split{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.about-promise{ max-width:980px; margin:0 auto; }
@media(max-width:940px){ .about-split{ grid-template-columns:1fr; gap:26px; } }
@media(max-width:560px){ .about-row{ grid-template-columns:1fr; gap:10px; } .about-row h2, .about-split h2{ font-size:1.55rem; } }