/* /go additions: mobile fix for the video testimonial carousel (.tcar) and the
   SERP mockup + client spotlights section (serp_mockup). Kept out of go.css so
   parallel edits to other sections merge cleanly. Uses go.css tokens.
   Shape language matches the radar: square corners (0 to 4px), 1px rules,
   plain underline tabs. No pills or capsules. */

/* ================= VIDEO TESTIMONIAL CAROUSEL: touch + narrow screens =================
   The desktop marquee animates one ~4,100px wide track with a CSS transform for 80s
   inside a mask-image. Mobile WebKit composites that as one huge tiled layer and drops
   or misplaces tiles as Wistia players hydrate inside it, so the row goes blank for
   long stretches and then repaints with overlapping cards. On phones and tablets we
   swap the transform marquee for a native scroll-snap row (no giant animated layer). */
.tcar-dots{display:none;justify-content:center;gap:0;margin-top:10px}
.tcar-dots button{position:relative;width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer}
.tcar-dots button::before{content:"";position:absolute;left:10px;right:10px;top:19px;height:2px;background:hsl(250 25% 78% / .3);transition:background .25s ease}
.tcar-dots button[aria-current="true"]::before{background:var(--gold)}
@media (max-width:760px), (hover:none) and (pointer:coarse){
  .tcar{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .tcar::-webkit-scrollbar{display:none}
  .tcar-track{animation:none!important;transform:none!important;gap:14px;padding-inline:7vw}
  .tcar .tc{flex:0 0 86vw;max-width:430px;scroll-snap-align:center;scroll-snap-stop:always}
  /* the second half of the track only exists for the seamless desktop loop */
  .tcar .tc[data-dup],.tcar .tc:has(> .body[aria-hidden="true"]){display:none}
  .tcar-dots{display:flex}
}

/* ================= SERP MOCKUP + CLIENT SPOTLIGHTS ================= */
.serp-sec{padding-top:clamp(8px,3vw,40px)}
.serp-sec .lead{margin:0 auto;text-align:center}
.serp-panel{
  max-width:880px;margin:32px auto 0;
  background:var(--card);border:1px solid var(--line-soft);border-radius:4px;
  box-shadow:0 24px 56px -28px rgb(0 0 0 / .85);overflow:hidden;
}
.serp-tab:focus-visible,.serp-pill:focus-visible,.spot-nav:focus-visible,.spot-dots button:focus-visible,
.spot-img:focus-visible,.tcar-dots button:focus-visible,.spot-close:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* plain underline tabs, like the radar's before/after */
.serp-tabbar{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-soft)}
.serp-lights{display:none}
.serp-tab{
  appearance:none;position:relative;border:0;background:transparent;border-radius:0;
  min-height:48px;padding:12px 8px 13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font:500 .94rem/1.2 'Inter',system-ui,sans-serif;color:var(--ink);opacity:.5;
  transition:opacity .25s ease;white-space:nowrap
}
.serp-tab svg{width:16px;height:16px;flex:none}
.serp-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .35s cubic-bezier(.65,0,.35,1)}
.serp-tab:hover{opacity:.8}
.serp-tab[aria-selected="true"]{opacity:1}
.serp-tab[aria-selected="true"]::after{transform:scaleX(1)}
.serp-count{font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}

/* layer filter: square segmented buttons, 2x2 on phones */
.serp-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 16px 0}
.serp-tools-label{grid-column:1/-1;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.serp-pill{
  appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 10px;cursor:pointer;
  font:600 .9rem/1.2 'Inter',system-ui,sans-serif;color:var(--mut);
  background:transparent;border:1px solid hsl(255 30% 34%);border-radius:3px;
  transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease
}
.serp-pill svg{width:15px;height:15px;flex:none}
.serp-pill:hover{color:var(--ink);border-color:hsl(255 30% 46%)}
.serp-pill[data-layer="paid"]{--lc:#facc15}
.serp-pill[data-layer="ai"]{--lc:#a78bfa}
.serp-pill[data-layer="reddit"]{--lc:#fb923c}
.serp-pill[data-layer="organic"]{--lc:#34d399}
.serp-pill[aria-pressed="true"]{color:var(--ink);border-color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,transparent);box-shadow:inset 0 -2px 0 var(--lc)}
.serp-pill[aria-pressed="true"] svg{color:var(--lc)}

.serp-note{min-height:6.3em;margin:14px 16px 0;font-size:.94rem;line-height:1.55;color:var(--mut)}
.serp-note b{color:var(--ink);font-weight:600}

/* the results page: sized like Google on a phone */
.serp-g{margin:12px 12px 16px;background:#fff;color:#202124;border-radius:4px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;box-shadow:0 1px 2px rgb(0 0 0 / .35)}
.serp-g-top{background:#fff;border-bottom:1px solid #ebebeb;padding:14px 14px 0}
.serp-g-logo{display:flex;align-items:center;gap:8px;font:500 18px/1 Arial,sans-serif;color:#3c4043;margin-bottom:12px}
.serp-g-logo svg{width:20px;height:20px}
.serp-g-q{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:#fff;border:1px solid #dcdce3;border-radius:4px;font-size:16px;color:#202124;box-shadow:0 1px 4px rgb(32 33 36 / .12);max-width:520px}
.serp-g-q span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-g-q svg{width:18px;height:18px;color:#70757a;flex:none}
.serp-g-tabs{display:flex;gap:20px;margin-top:12px;font-size:14px;color:#5f6368;overflow:hidden;white-space:nowrap}
.serp-g-tabs span{padding:4px 0 10px}
.serp-g-tabs span:first-child{color:#202124;font-weight:700;box-shadow:inset 0 -3px 0 #202124}
.serp-g-res{padding:2px 14px 6px}

.serp-r{position:relative;padding:16px 0;border-bottom:1px solid #ebebeb;border-radius:3px;transition:opacity .3s ease,background-color .3s ease,box-shadow .3s ease}
.serp-r:last-child{border-bottom:0}
.serp-g[data-active] .serp-r{opacity:.18}
.serp-g[data-active="paid"] .serp-r[data-layer="paid"],
.serp-g[data-active="ai"] .serp-r[data-layer="ai"],
.serp-g[data-active="reddit"] .serp-r[data-layer="reddit"],
.serp-g[data-active="organic"] .serp-r[data-layer="organic"]{opacity:1;background:var(--lbg);box-shadow:inset 3px 0 0 var(--lring),0 0 0 1px var(--lring);padding-inline:14px 12px;margin-inline:-10px}
.serp-r[data-layer="paid"]{--lbg:#fefce8;--lring:#eab308;--ltx:#854d0e}
.serp-r[data-layer="ai"]{--lbg:#f5f3ff;--lring:#8b5cf6;--ltx:#5b21b6}
.serp-r[data-layer="reddit"]{--lbg:#fff7ed;--lring:#f97316;--ltx:#9a3412}
.serp-r[data-layer="organic"]{--lbg:#ecfdf5;--lring:#10b981;--ltx:#065f46}
.serp-badge{position:absolute;top:-10px;right:8px;font:700 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:#fff;background:var(--lring);border-radius:2px;padding:5px 7px;opacity:0;transition:opacity .25s ease;pointer-events:none}
.serp-g[data-active="paid"] .serp-r[data-layer="paid"] .serp-badge,
.serp-g[data-active="ai"] .serp-r[data-layer="ai"] .serp-badge,
.serp-g[data-active="reddit"] .serp-r[data-layer="reddit"] .serp-badge,
.serp-g[data-active="organic"] .serp-r[data-layer="organic"] .serp-badge{opacity:1}
.serp-r[data-layer="paid"] .serp-badge{color:#422006}

.serp-sp{font-size:14px;font-weight:700;color:#202124;margin-bottom:8px}
.serp-site{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-width:0}
.serp-site>div{min-width:0}
.serp-fav{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 12px/1 Arial,sans-serif;color:#fff;background:#2563eb;box-shadow:0 0 0 1px #ececec}
.serp-fav.g2{background:#ef4444}
.serp-fav svg{width:26px;height:26px}
.serp-site b{display:block;font-size:14px;font-weight:400;line-height:1.3;color:#202124}
.serp-site div span{display:block;font-size:13px;line-height:1.3;color:#4d5156;overflow-wrap:anywhere}
.serp-t{font-size:19px;line-height:1.3;color:#1a0dab;margin-bottom:5px}
.serp-d{font-size:14px;line-height:1.55;color:#4d5156}
.serp-d b{color:#202124}
.serp-ai-h{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:#202124;margin-bottom:8px}
.serp-ai-h svg{width:18px;height:18px;color:#7c3aed}
.serp-ai ul{margin:8px 0 8px 20px;font-size:14px;line-height:1.6;color:#4d5156}
.serp-ai li+li{margin-top:2px}
.serp-ai li b{color:#202124;text-decoration:underline;text-decoration-color:#a78bfa;text-underline-offset:3px}
.serp-ai .serp-d{max-width:640px}

/* client spotlights */
.spot-stage{position:relative}
.spot-img{display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:0;background:#fff;cursor:zoom-in;overflow:hidden}
.spot-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.spot-slide{margin:0;animation:spotin .3s ease both}
.spot-slide[hidden]{display:none}
@keyframes spotin{from{opacity:0}to{opacity:1}}
.spot-navs{display:none}
.spot-copy{padding:18px 16px 4px;min-height:10.6em}
.spot-brand{display:block;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.spot-snip{font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.3;color:var(--ink);margin-bottom:8px}
.spot-ben{font-size:.94rem;line-height:1.55;color:var(--mut)}
.spot-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 14px}
.spot-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;min-width:0}
.spot-dots{display:none;flex-wrap:wrap;justify-content:center}
.spot-dots button{position:relative;width:24px;height:40px;padding:0;border:0;background:transparent;cursor:pointer}
.spot-dots button::before{content:"";position:absolute;left:5px;right:5px;top:19px;height:2px;background:hsl(250 25% 78% / .3);transition:background .25s ease}
.spot-dots button[aria-current="true"]::before{background:var(--gold)}
.spot-ct{font-size:.94rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mut);white-space:nowrap}
.spot-nav{width:44px;height:44px;flex:none;border-radius:3px;border:1px solid hsl(255 30% 34%);display:grid;place-items:center;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.spot-nav:hover{border-color:hsl(255 30% 50%);background:hsl(255 30% 22% / .5)}
.spot-nav svg{width:20px;height:20px}
.spot-hint{display:block;text-align:center;font-size:.8rem;color:var(--dim);padding:0 16px 14px;margin-top:-6px}

/* lightbox */
.spot-dlg{border:0;padding:0;background:transparent;color:var(--ink);width:min(1200px,100vw - 24px);max-width:none;max-height:calc(100dvh - 24px);margin:auto;overflow:visible}
.spot-dlg::backdrop{background:rgb(8 6 20 / .9)}
.spot-dlg-in{position:relative;display:flex;flex-direction:column;align-items:center;max-height:calc(100dvh - 24px)}
.spot-dlg img{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100dvh - 140px);object-fit:contain;background:#fff;border-radius:3px}
.spot-dlg p{margin-top:10px;font-size:.94rem;line-height:1.5;color:var(--mut);text-align:center;max-width:640px;padding:0 8px}
.spot-dlg p b{display:block;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:1.06rem;margin-bottom:2px}
.spot-close{position:fixed;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:3px;border:1px solid hsl(255 30% 40%);background:hsl(255 47% 11% / .92);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
html.spot-lock{overflow:hidden}

@media (min-width:700px){
  .serp-tab{min-height:52px;font-size:1rem}
  .serp-tools{grid-template-columns:auto repeat(4,auto);justify-content:start;align-items:center;gap:8px;padding:18px 22px 0}
  .serp-tools-label{grid-column:auto;margin-right:6px}
  .serp-pill{min-height:40px;padding:0 14px}
  .serp-note{min-height:3.2em;margin:14px 22px 0}
  .serp-g{margin:12px 22px 22px}
  .serp-g-top{padding:16px 22px 0}
  .serp-g-res{padding:2px 22px 8px}
  .serp-t{font-size:20px}
  .serp-d,.serp-ai ul{font-size:14px}
  .spot-copy{padding:20px 24px 4px;min-height:7.6em}
  .spot-snip{font-size:1.34rem}
  .spot-foot{padding:8px 22px 18px}
  .spot-dots{display:flex}
  .spot-hint{display:none}
}
/* phones held sideways: keep the spotlight image on screen with its caption */
@media (max-height:500px) and (orientation:landscape){
  .spot-slide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .spot-slide[hidden]{display:none}
  .spot-copy{min-height:0;padding:16px 18px 4px}
  .spot-dots{display:none}
}

@media (prefers-reduced-motion:reduce){
  .serp-r,.serp-badge,.serp-pill,.serp-tab,.serp-tab::after,.spot-dots button::before,.tcar-dots button::before{transition:none}
  .spot-slide{animation:none}
}
/* narrow phones: the decorative Google tab row keeps four tabs so none is clipped */
@media (max-width:419px){ .serp-g-tabs span:nth-child(5){display:none} }
/* The ROI card in go.css is meant to be desktop-only, but a phone held sideways is
   ~812px wide and the card then covers a third of a 375px-tall screen. */
@media (max-height:500px){ .qfloat{display:none!important} }