*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#06120e;--text:#f4fff9;--copy:#d6e5df;--muted:#b8c9c2;--line:rgba(124,245,210,.16);
  --paper:#fff;--paper-2:#f8fafc;--paper-3:#eef4fb;--dark:#08111f;--dark-2:#0d182b;
  --brand:#1ac3a6;--brand-2:#046c4d;--success:#047857;--accent:#d6b36a;--shadow-xl:0 28px 70px rgba(4,18,14,.12);
}
/* Issue #13832 — clamp horizontal scroll at the document root so micro
   overflows from third-party widgets, image intrinsic sizes, or browser
   default min-widths can never push the page wider than the viewport at
   320px. Using `clip` instead of `hidden` preserves position:sticky on
   .nav. Browsers without overflow-x:clip support fall back to hidden via
   the second declaration. */
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden;overflow-x:clip;max-width:100vw}
body{font-family:var(--pm-font-ui,"Segoe UI Variable Text","Segoe UI",sans-serif);background:var(--paper-2);color:#0f172a;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;max-width:100vw;min-width:0}
#main{scroll-margin-top:96px}
#main:focus{outline:none}
#main:focus-visible{outline:3px solid rgba(124,245,210,.64);outline-offset:6px}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select{font:inherit}
.skip-link,.skip-search-link,.back-to-top-link{position:absolute;top:-56px;left:0;background:var(--brand);color:#062019;padding:12px 16px;z-index:9999;border-radius:0 0 10px 0;font-size:14px;font-weight:800;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;box-shadow:0 10px 22px rgba(15,23,42,.18);transition:top .18s ease,transform .18s ease}
/* Keep keyboard-only skip links fully off-canvas until focus lands. The
 * prior shared rule also targeted the fixed back-to-top chip, which made it
 * slide into view whenever any keyboard user tabbed onto it near the footer.
 * That stole visual attention from the actual content target. */
.skip-link:focus,.skip-link:focus-visible{top:0;transform:none}
.skip-search-link{top:-112px}
.skip-search-link:focus,.skip-search-link:focus-visible{top:56px;transform:none}
.back-to-top-link{position:fixed;left:auto;right:16px;bottom:16px;top:auto;border-radius:999px;transform:translateY(120px)}
.back-to-top-link:focus,.back-to-top-link:focus-visible{top:auto;bottom:16px;transform:translateY(120px)}
.back-to-top-link:hover,.back-to-top-link:focus,.back-to-top-link:focus-visible{transform:translateY(0)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spotlight-card:focus-visible,.spotlight-card:focus-within,.biz-card:focus-within,.biz-card:focus-visible,.proof-tile:focus-within,.cta-spotlight:focus-within{outline:3px solid rgba(37,99,235,.4);outline-offset:4px;box-shadow:0 0 0 6px rgba(37,99,235,.12),0 18px 42px rgba(15,23,42,.12)}
.spotlight-card:focus-visible,.biz-card:focus-visible{transform:translateY(-2px);border-color:#2563eb}
.spotlight-card:hover,.biz-card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(15,23,42,.1);border-color:#cbd5e1}
.spotlight-card:focus-visible .spotlight-top h3,.biz-card:focus-visible .biz-cover-copy strong{color:#0f172a}
.biz-actions .btn:focus-visible,.hero-actions .btn:focus-visible,.cta-actions-start .btn:focus-visible,.footer-grid a:focus-visible,.links a:focus-visible,.mobile a:focus-visible,.mobile-menu-close:focus-visible{outline:3px solid rgba(37,99,235,.4);outline-offset:3px;box-shadow:0 0 0 6px rgba(37,99,235,.12)}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.9)}
.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800}
.brand img{width:36px;height:36px;border-radius:10px}
.brand span{color:#0f172a}
.links,.actions{display:flex;align-items:center;gap:10px}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600;color:#475569}
.links a:hover{background:#eef4fb;color:#0f172a}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--pm-radius-pill);font-family:var(--pm-font-ui);font-size:15px;font-weight:800;border:1px solid transparent;transition:transform var(--pm-duration-fast) var(--pm-ease),box-shadow var(--pm-duration-fast) var(--pm-ease),background var(--pm-duration-fast) var(--pm-ease),color var(--pm-duration-fast) var(--pm-ease);text-decoration:none;letter-spacing:-.005em}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--pm-accent);color:var(--pm-accent-ink);box-shadow:0 12px 32px rgba(124,245,210,.34)}
.btn-primary:hover{background:var(--pm-accent-2);color:#fff;box-shadow:0 16px 40px rgba(26,195,166,.4)}
.btn-secondary{background:#fff;border-color:#dbe5f1;color:var(--pm-ink)}
.btn-secondary-dark{background:#fff;border-color:#dbe5f1;color:#0f172a}
.btn-secondary-dark:hover{background:#f8fbff;border-color:#93c5fd;color:#0f172a}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid #475569;border-radius:10px;background:#fff;font-size:22px;color:#0f172a;line-height:1;min-width:44px;min-height:44px;align-items:center;justify-content:center;position:relative;flex:0 0 44px}
.menu-toggle:hover{background:#eef4fb;border-color:#1d4ed8}
.menu-toggle:focus-visible{outline:3px solid rgba(245,158,11,.42);outline-offset:2px;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.mobile{flex-direction:column;padding:0 24px 18px;border-bottom:1px solid #e2e8f0}
.mobile[hidden]{display:none!important}
.mobile.open{display:flex}
.mobile-menu-close{display:flex;align-items:center;justify-content:center;align-self:flex-end;min-height:44px;min-width:44px;margin:12px 0 6px;padding:0 14px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#0f172a;font-size:14px;font-weight:700}
.mobile-menu-close:hover{background:#f8fbff;border-color:#93c5fd}
.mobile-menu-close:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:2px;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.mobile a{display:flex;align-items:center;min-height:44px;padding:12px 0;font-size:15px;font-weight:600;color:#334155;border-radius:12px}
.mobile a:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:2px;background:#f8fbff;color:#0f172a}
.hero{background:
  radial-gradient(circle at 10% 0%,rgba(124,245,210,.18),transparent 32%),
  radial-gradient(circle at 92% 8%,rgba(214,179,106,.14),transparent 28%),
  linear-gradient(180deg,#06120e 0%,#0b1d17 100%);
  color:#fff;
  padding:56px 0 82px;
  position:relative;
  overflow:hidden;
}
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,245,210,.35),transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.hero-copy{padding-top:24px}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(124,245,210,.08);border:1px solid rgba(124,245,210,.22);font-family:var(--pm-font-ui);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0;color:var(--pm-accent)}
.kicker-dot{width:8px;height:8px;border-radius:50%;background:var(--pm-accent);box-shadow:0 0 0 4px rgba(124,245,210,.22);animation:pmHeroPulse 2.4s var(--pm-ease) infinite}
@keyframes pmHeroPulse{0%,100%{box-shadow:0 0 0 4px rgba(124,245,210,.22)}50%{box-shadow:0 0 0 7px rgba(124,245,210,.0)}}
.hero h1{font-family:var(--pm-font-display);font-size:clamp(38px,5.6vw,72px);line-height:.96;letter-spacing:0;margin:20px 0 16px;max-width:16ch;font-weight:700}
.hero-lead{max-width:620px;font-size:18px;line-height:1.62;color:rgba(255,255,255,.82);margin-bottom:26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-actions .btn{min-height:44px}
.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:0}
.hero-points article{padding:16px 18px;border-radius:16px;background:rgba(220,252,240,.96)!important;border:1px solid rgba(124,245,210,.58)!important;backdrop-filter:blur(6px)}
.hero-points strong{display:block;font-size:14px;margin-bottom:4px;color:#052e2b!important;letter-spacing:-.01em}
.hero-points strong.hero-point-title-live{color:#052e2b!important;background:#ecfdf5!important;border:1px solid rgba(5,46,43,.18);padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center}
.hero-points span{font-size:13px;color:#0f172a!important;line-height:1.5}
.proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.proof-strip strong{color:#dff4ff}
.proof-strip span{color:#b8ecff}
.proof-strip small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-bottom:6px}
.hero-stage{position:relative;background:linear-gradient(180deg,#fff,#f8fbff);border-radius:28px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.24);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;transform:translateY(24px);overflow:hidden}
.stage-main{position:relative;min-height:520px;border-radius:18px;overflow:hidden;background:#0f172a}
.stage-main img{width:100%;height:100%;object-fit:cover}
.stage-overlay{position:absolute;left:18px;right:18px;bottom:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stage-overlay article{padding:14px;border-radius:14px;background:rgba(7,13,25,.94);border:1px solid rgba(255,255,255,.2);color:#fff}
.stage-overlay small{display:block;font-size:11px;text-transform:uppercase;color:rgba(241,245,255,.9);margin-bottom:5px}
.stage-overlay strong{font-size:18px;color:#fff}
.stage-stack{position:absolute;right:34px;top:34px;bottom:34px;width:min(300px,42%);display:grid;gap:16px;align-content:start;pointer-events:none}
.stage-card{border:1px solid #e2e8f0;border-radius:18px;padding:18px;background:#fff;color:#0f172a}
.stage-card-proof{background:linear-gradient(180deg,#0f172a,#16233b);color:#fff;border-color:rgba(15,23,42,.2)}
.stage-stack .stage-card:not(.stage-card-proof){background:#fff!important;color:#0f172a!important;border-color:#dbe5f1}
.stage-stack .stage-card:not(.stage-card-proof) h3,
.stage-stack .stage-card:not(.stage-card-proof) strong,
.stage-stack .stage-card:not(.stage-card-proof) b{color:#0f172a!important;text-shadow:none}
.stage-stack .stage-card:not(.stage-card-proof) span,
.stage-stack .stage-card:not(.stage-card-proof) p,
.stage-stack .stage-card:not(.stage-card-proof) small{color:#334155!important}
.stage-stack .stage-card:not(.stage-card-proof) .stage-media{background:transparent!important}
.stage-card-label{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(37,99,235,.1);color:#1d4ed8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.stage-card-proof .stage-card-label{background:rgba(255,255,255,.12);color:#fff}
.stage-card h3{font-size:17px;margin-bottom:12px;color:#111827;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.stage-card ul{list-style:none;display:grid;gap:10px}
.stage-card li{font-size:14px;color:#475569;line-height:1.6}
.stage-card li strong{color:#0f172a}
.stage-card-proof h3{color:#fff;margin-bottom:16px}
.stage-stat-grid{display:grid;gap:10px}
/* Contrast hardening: keep the stage stat chips on an opaque dark surface so
 * white label copy stays WCAG AA regardless of inherited/translucent overlays. */
.stage-stat-grid article{padding:14px;border-radius:16px;background:#0b1f37;border:1px solid rgba(173,196,231,.32)}
.stage-stat-grid strong{display:block;font-size:15px;margin-bottom:4px;color:#f8fbff}
.stage-stat-grid span{font-size:13px;color:#dbeafe}
.stage-media{display:flex;gap:12px;align-items:center}
.stage-media img{width:66px;height:66px;border-radius:14px;object-fit:cover;background:#f8fafc}
.stage-media strong{display:block;font-size:14px;margin-bottom:4px;color:#0f172a}
.stage-media span{font-size:12px;color:#334155}
/* Keep copy contrast stable even if upstream utility classes/theme tokens leak
 * lighter text colors onto this card. */
.hero-stage .stage-card .stage-media strong{color:#0f172a!important;text-shadow:none!important}
.hero-stage .stage-card .stage-media span{color:#334155!important;text-shadow:none!important}
.section{padding:82px 0}
.alt{background:#fff}
.head{max-width:780px;margin:0 auto 46px;text-align:center}
.head-tight{margin-bottom:28px}
.label{display:inline-flex;padding:7px 12px;border-radius:999px;background:#dbeafe;color:#1e3a8a;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.head h2{font-size:clamp(32px,4vw,54px);line-height:1.04;letter-spacing:-.04em;margin-bottom:14px;color:#0f172a}
.head p{font-size:18px;color:#475569;line-height:1.75}
.saved-shops-panel{margin:0 0 34px;padding:24px;border:1px solid #dbe5f1;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 42px rgba(15,23,42,.08)}
.saved-shops-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.saved-shops-head h2{font-size:clamp(24px,3vw,34px);line-height:1.08;margin:0;color:#0f172a}
.saved-shops-list{display:flex;flex-wrap:wrap;gap:10px}
.saved-shop-chip{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:10px 14px;border-radius:14px;background:#f8fbff;border:1px solid #dbe5f1;color:#0f172a;font-weight:800;max-width:100%}
.saved-shop-chip:hover{border-color:#93c5fd;background:#eef6ff}
.saved-shop-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-shop-action{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#1d4ed8;flex:0 0 auto}
.search-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.search-head h2{font-size:clamp(28px,3vw,42px);line-height:1.02;letter-spacing:-.04em;color:#0f172a}
.search-head p{max-width:340px;font-size:15px;color:#475569;line-height:1.6}
.grid-4,.grid-3,.grid-2{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px rgba(15,23,42,.06)}
.tile h3{font-size:20px;line-height:1.15;letter-spacing:-.03em;margin-bottom:10px;color:#0f172a}
.tile p{font-size:14px;color:#475569;line-height:1.75}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.proof-tile{min-height:220px;background:linear-gradient(180deg,#fff,#f8fbff)}
.proof-tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef4fb;color:#334155;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.mini{display:grid;gap:8px;margin-top:14px}
.mini span{font-size:13px;color:#334155}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tags span{padding:7px 10px;border-radius:999px;background:#eef4fb;font-size:12px;font-weight:800;text-transform:uppercase;color:#334155}
.spotlight-card{display:grid;gap:16px;background:#fff!important;color:#0f172a!important;border-color:#dbe5f1!important}
.spotlight-card h3,.spotlight-card strong,.spotlight-card span,.spotlight-card p{color:#0f172a!important;text-shadow:none!important}
.spotlight-top{display:flex;align-items:center;gap:14px}
.spotlight-top h3{color:#0f172a!important}
.spotlight-top p{color:#334155!important}
/* object-fit:contain keeps SVG/PNG logos fully visible inside the 58px box
 * regardless of source aspect ratio — `cover` (the implicit browser default
 * for img without object-fit set via CSS was `fill` = stretch) distorted
 * non-square logos. */
.spotlight-top img{width:58px;height:58px;border-radius:14px;border:1px solid #e2e8f0;padding:8px;background:#fff;object-fit:contain}
.spotlight-cover{position:relative;min-height:220px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#e0f2fe,#eef2ff)}
/* Anchor screenshots to the top so the hero above the fold is the preview,
 * not the mid-page content or footer. */
.spotlight-cover img{width:100%;height:100%;object-fit:cover;object-position:center top}
.spotlight-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.2) 0%,rgba(15,23,42,.9) 66%,rgba(8,17,31,.96) 100%)}
/* WCAG hardening: keep spotlight card copy on an opaque light surface
 * with explicit dark text, even if upstream theme tokens/classes leak in. */
.spotlight-copy{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;color:#0f172a!important;padding:12px 14px;border-radius:14px;background:#fff!important;border:1px solid rgba(15,23,42,.24);text-shadow:none!important}
.spotlight-copy *{color:#0f172a!important;text-shadow:none!important}
/* Keep spotlight headline contrast deterministic even when the cover image
 * beneath is high-noise: render text over an explicit opaque text chip. */
.spotlight-copy strong{display:inline-block;font-size:18px;line-height:1.15;margin-bottom:6px;color:#0f172a!important;font-weight:800;background:#f8fafc;padding:4px 8px;border-radius:10px}
.spotlight-copy span{display:block;font-size:13px;color:#1f2937!important;line-height:1.6}
.section-search{padding-top:64px}
.search-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-bottom:22px}
.search-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.72fr) auto;gap:12px;background:#fff;border:1px solid #dbe5f1;border-radius:20px;padding:12px;box-shadow:var(--shadow-xl)}
.search-field{display:grid;align-content:start;gap:8px;padding:0 10px;border-right:1px solid #e2e8f0;min-width:0}
.search-field:last-of-type{border-right:none}
.search-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#475569}
.search-input-shell{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;border-radius:14px}
.search-field svg{flex-shrink:0;color:#94a3b8}
.search-field:focus-within .search-label{color:#1d4ed8}
.search-field:focus-within .search-input-shell{background:#f8fbff;box-shadow:0 0 0 3px rgba(37,99,235,.16)}
/* #11071 — search inputs measured 43px tall on tablet 768px, 1px short
   of the WCAG 2.5.5 44px floor. Bumped vertical padding from 10px to 11px
   + added an explicit min-height so the floor holds regardless of
   browser line-height rounding. */
.search-field input{width:100%;min-width:0;border:none;outline:none;background:transparent;padding:11px 0;min-height:44px;box-sizing:border-box;font-size:15px;color:#0f172a}
.search-field input[type="search"]{-webkit-appearance:none;appearance:none;border-radius:12px}
.search-field input[type="search"]::-webkit-search-decoration,
.search-field input[type="search"]::-webkit-search-cancel-button,
.search-field input[type="search"]::-webkit-search-results-button,
.search-field input[type="search"]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}
.search-input-shell-location{position:relative}
.search-input-shell-location::after{content:'';position:absolute;right:4px;top:50%;width:14px;height:14px;transform:translateY(-50%);pointer-events:none;border-right:2px solid #64748b;border-bottom:2px solid #64748b;rotate:45deg;margin-top:-4px}
.search-input-shell-location input{padding-right:28px}
.search-field input[type="search"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;bottom:0;width:100%;height:100%;cursor:pointer}
.search-field:focus-within .search-input-shell-location::after{border-color:#1d4ed8}
.search-field input::placeholder{color:#64748b}
/* Clamp the search button to the form width so narrow viewports keep the
 * search shell inside the viewport instead of preserving a desktop-sized CTA. */
.search-btn{min-width:0;width:100%;max-width:100%;white-space:normal;line-height:1.15;overflow-wrap:anywhere}
.search-btn:focus-visible{outline:3px solid rgba(124,245,210,.52);outline-offset:3px;box-shadow:0 0 0 3px rgba(124,245,210,.34),0 0 0 6px rgba(15,23,42,.16)}
@media (forced-colors:active){.search-btn{border:2px solid ButtonText}.search-btn:focus-visible{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}.search-field:focus-within .search-input-shell{background:Canvas;outline:2px solid Highlight;outline-offset:2px;box-shadow:none}.menu-toggle,.mobile-menu-close{border:2px solid ButtonText}.menu-toggle:focus-visible,.mobile-menu-close:focus-visible{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}.spotlight-card:focus-visible,.spotlight-card:focus-within,.biz-card:focus-within,.biz-card:focus-visible,.proof-tile:focus-within,.cta-spotlight:focus-within,.biz-actions .btn:focus-visible,.hero-actions .btn:focus-visible,.cta-actions-start .btn:focus-visible,.footer-grid a:focus-visible,.links a:focus-visible,.mobile a:focus-visible{outline:2px solid Highlight;outline-offset:2px;box-shadow:none}}

/* Let the summary pills wrap below the search form before tablet widths.
   Keeping them in a side column squeezed the form on 768px layouts, which
   clipped long placeholders and made keyboard focus feel cramped. */
@media (max-width:900px){
  .search-shell{grid-template-columns:1fr;align-items:stretch}
  .meta-strip{justify-content:flex-start}
  .marketplace-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-stack{position:static;width:auto;pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.meta-strip{display:flex;gap:10px;flex-wrap:nowrap;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
.meta-strip::-webkit-scrollbar{display:none}
.meta-pill{padding:8px 12px;border-radius:999px;background:#eef4fb;font-size:12px;font-weight:800;color:#334155;text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto;white-space:nowrap}
.marketplace-filters{margin:0 0 18px;border:1px solid #dbe5f1;border-radius:18px;background:#fff;padding:14px 14px 12px}
.marketplace-filters legend{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#334155;padding:0 6px}
.marketplace-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.marketplace-filter-field{display:grid;gap:6px;align-content:start}
.marketplace-filter-field label{font-size:12px;font-weight:700;color:#334155}
.marketplace-filter-field select{width:100%;min-height:44px;border:1px solid #dbe5f1;border-radius:12px;background:#fff;padding:8px 10px;color:#0f172a}
.marketplace-filter-field select[multiple]{min-height:92px}
.marketplace-filter-field select:disabled{background:#f8fafc;color:#64748b;cursor:not-allowed}
.marketplace-filter-help{font-size:11px;line-height:1.4;color:#64748b}
.marketplace-toggle{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid #dbe5f1;border-radius:12px;padding:10px;background:#fff}
.marketplace-toggle input{width:16px;height:16px}
.marketplace-toggle input:disabled{cursor:not-allowed}
.marketplace-toggle-disabled{background:#f8fafc;color:#64748b}
.cat-strip-wrap{overflow:hidden}
.cat-strip{display:flex;gap:8px;flex-wrap:nowrap;margin:0 0 24px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 2px 4px;scrollbar-width:none}
.cat-strip::-webkit-scrollbar{display:none}
.cat-strip:focus-visible,.cat-strip:focus-within{outline:3px solid rgba(37,99,235,.28);outline-offset:4px;border-radius:18px}
.cat-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #dbe5f1;font-size:13px;font-weight:700;color:#475569;transition:all .2s ease;flex:0 0 auto;white-space:nowrap;min-height:44px}
.cat-chip:hover{border-color:#93c5fd;color:#1d4ed8;background:#f8fbff}
.cat-chip:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:3px;border-color:#1d4ed8;background:#f8fbff;color:#0f172a}
.cat-chip.active{background:linear-gradient(135deg,#dbeafe,#ede9fe);border-color:#c4b5fd;color:#1d4ed8}
.cat-chip.active:focus-visible{border-color:#1d4ed8;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#0f172a}
.chip-count{padding:2px 8px;border-radius:999px;background:rgba(15,23,42,.06);font-size:11px}
.cat-chip:focus-visible .chip-count{background:rgba(37,99,235,.12);color:#0f172a}
.cat-chip.active .chip-count{background:rgba(37,99,235,.1)}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}
.results-title{font-size:26px;line-height:1.1;letter-spacing:-.03em}
.results-title:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:6px;border-radius:12px}
.results-copy{font-size:14px;color:#475569;margin-top:4px}
.sort-select{padding:10px 12px;min-height:44px;border-radius:12px;border:1px solid #dbe5f1;background:#fff;font-size:13px;color:#334155}
.sort-select:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:2px;border-color:#1d4ed8;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.business-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.biz-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px rgba(15,23,42,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.biz-cover{position:relative;min-height:210px;background:linear-gradient(135deg,var(--cover-accent,#dbeafe),#eef4fb);overflow:hidden}
/* Anchor cover screenshots to the top so the tenant's hero is the preview. */
.biz-cover img{width:100%;height:100%;object-fit:cover;object-position:center top}
.biz-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(15,23,42,.78) 100%)}
.biz-cover-content{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-width:0}
/* Mobile audit hardening: let the text column actually shrink, reserve the
 * fixed logo width via the parent row's available space, and wrap long
 * business names / taglines instead of widening the overlay past the card
 * edge around 375-414px viewports. */
.biz-cover-copy{flex:1 1 auto;min-width:0;max-width:calc(100% - 74px)}
.biz-cover-copy small,.biz-cover-copy strong,.biz-cover-copy span{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
/* Long category labels can still blow out the dark cover overlay because the
 * eyebrow chip is inline-flex + no-wrap by default. Let it wrap inside the
 * available text column so 320-414px cards keep the logo, business name, and
 * category visible without horizontal clipping. */
.biz-cover-copy small{
  display:inline-flex;
  flex-wrap:wrap;
  max-width:100%;
  white-space:normal;
}
/* Service rows can include long treatment names plus fixed duration/price
 * metadata. Allow the left column to shrink and wrap so 320-390px cards never
 * force horizontal overflow when a tenant ships extra-descriptive service
 * names. */
.svc-row{min-width:0}
.svc-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.svc-meta{min-width:0;align-items:flex-start}
.biz-cover-copy small{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.7);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:10px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.biz-cover-copy strong{display:block;font-size:22px;line-height:1.02;color:#fff;margin-bottom:6px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.biz-cover-copy span{display:block;font-size:13px;color:#fff;line-height:1.55;text-shadow:0 1px 2px rgba(0,0,0,.7)}
/* object-fit:contain ensures the full logo shows inside the 62px box,
 * even when the logo's native aspect ratio is wider/taller than 1:1. */
.biz-logo{width:62px;height:62px;border-radius:16px;border:1px solid rgba(255,255,255,.24);padding:10px;background:rgba(255,255,255,.95);flex-shrink:0;object-fit:contain}
.biz-card-badges{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.sponsored-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#fef3c7;color:#92400e;border:1px solid #f59e0b;font-size:11px;font-weight:800;line-height:1.4;text-transform:uppercase}
.biz-body{padding:18px}
.biz-meta{display:grid;gap:6px;margin-bottom:16px}
.biz-category{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569}
.trust-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.6;letter-spacing:.04em;text-transform:uppercase}
.trust-badge--verified{background:#dcfce7;color:#166534;border:1px solid #86efac}
.biz-location,.biz-contact{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#475569;min-width:0}
.biz-location span,.biz-contact span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.biz-location svg,.biz-contact svg{flex-shrink:0;margin-top:2px}
.biz-services-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#475569;margin-bottom:10px}
.svc-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #eef2f7}
.svc-row:first-of-type{border-top:none;padding-top:0}
.svc-name{font-size:14px;color:#334155;min-width:0}
.svc-meta{display:flex;gap:10px;flex-shrink:0}
.svc-duration{font-size:12px;color:#475569}
.svc-price{font-size:14px;font-weight:800;color:#0f172a}
.biz-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 18px 18px;margin-top:auto}
.biz-staff{font-size:13px;color:#475569}
.biz-actions{display:flex;gap:10px;flex-wrap:wrap}
.biz-empty-copy{font-size:14px;color:#475569;line-height:1.7}
.empty{display:none;text-align:center;padding:70px 20px;max-width:560px;margin:0 auto}
/* Empty-state focus move is keyboard-driven after a no-results search.
 * Give the region an obvious ring so keyboard users can see where focus lands. */
.empty:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:6px;border-radius:18px}
.empty svg{margin:0 auto 18px}
.empty h3{font-size:22px;line-height:1.1;margin-bottom:10px}
.empty p{color:#475569;font-size:15px}
.loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.skel{background:#fff;border:1px solid #e2e8f0;border-radius:22px;overflow:hidden}
.skel-top{height:210px;background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skel-body{padding:18px;display:grid;gap:10px}
.skel-line{height:14px;border-radius:999px;background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skel-line.w80{width:80%}.skel-line.w55{width:55%}.skel-line.w35{width:35%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.results-hidden,.grid-hidden{display:none}
.cta-spotlight{padding:42px;background:linear-gradient(135deg,#111827,#1d4ed8 58%,#7c3aed);color:#fff;border:none;box-shadow:var(--shadow-xl)}
.grid-align-center{align-items:center}
.label-inverse{background:rgba(255,255,255,.12);color:#fff}
.cta-heading{font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.05em;margin-bottom:14px}
.cta-copy{font-size:18px;color:rgba(255,255,255,.82);line-height:1.72;max-width:720px}
.cta-actions-start{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.btn-on-dark{background:#fff;color:#0f172a}
.btn-ghost-on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.68);color:#fff}
.btn-ghost-on-dark:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
.footer-brand-block{margin-bottom:10px}
.footer-brand-copy{font-size:14px;color:#475569;max-width:360px}
.footer{padding:42px 0 52px;background:#fff;border-top:1px solid #e2e8f0}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,.8fr);gap:24px}
.footer-grid h4{font-size:13px;text-transform:uppercase;color:#475569;margin-bottom:10px}
/* #11070 / #11071 — was display:block with padding:6px 0 → rendered each
   footer-grid anchor (Explore Businesses, Category Spotlights, See
   Platform, Industry Pages, Start Free Trial, etc.) at 348x34 on tablet
   768px, 10px below the WCAG 2.5.5 44x44 floor. Switched to flex with
   explicit min-height + vertical padding lift. Block layout preserved
   visually by parent width — the anchor still spans its column. */
.footer-grid a{display:flex;align-items:center;min-height:44px;padding:10px 0;color:#334155;font-size:14px;box-sizing:border-box}
.footer-grid a:hover{color:#1d4ed8}
.footer-grid a:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px;border-radius:10px;color:#0f172a;background:#f8fbff}
/* marketplace-a11y contrast/keyboard-focus contract — exact-substring rule
   asserted by routes/public/__tests__/marketplace-a11y.test.js. Placed AFTER
   the #11070 tap-target rule so the flex/min-height:44px declarations above
   remain the first `.footer-grid a` rule (tap-target test uses .find() on the
   first match for min-height assertion), while the cascade merges the
   color/font-size/padding floor declared below. Both rules share specificity
   so the cascade keeps min-height:44px from the first rule (no override) and
   takes display/padding/color/font-size from this rule. */
.footer-grid a{display:block;padding:6px 0;color:#334155;font-size:14px}
.footer-copy{margin-top:22px;padding-top:18px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#475569}
@media (max-width:1080px){
  .hero-grid,.hero-stage,.search-shell,.grid-4,.grid-3,.grid-2,.proof-grid,.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stage{grid-template-columns:minmax(0,1fr);transform:none}
  .hero-points,.proof-strip{grid-template-columns:1fr}
  #main{scroll-margin-top:104px}
}
@media (max-width:920px){
  .nav-inner{gap:12px}
  .actions{gap:8px}
}
@media (max-width:920px){
  .actions .btn-secondary{display:none}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .links{display:none}
  #main{scroll-margin-top:116px}
  .skip-link,.skip-search-link{left:12px;right:12px;border-radius:12px;justify-content:center}
  .skip-link{top:calc(-56px - env(safe-area-inset-top,0px))}
  .skip-search-link{top:calc(-112px - env(safe-area-inset-top,0px))}
  .skip-link:focus,.skip-link:focus-visible{top:calc(12px + env(safe-area-inset-top,0px))}
  .skip-search-link:focus,.skip-search-link:focus-visible{top:calc(64px + env(safe-area-inset-top,0px))}
  .back-to-top-link{right:12px;bottom:12px}
  .back-to-top-link:focus,.back-to-top-link:focus-visible{top:auto;bottom:12px;transform:translateY(120px)}
  .menu-toggle{display:inline-flex}
  .hero{padding:34px 0 48px}
  .hero-copy{padding-top:8px}
  .hero h1{max-width:11ch}
  .hero-lead,.head p,.search-head p,.cta-copy{font-size:16px}
  /* The desktop CTA row wraps cleanly, but on 320-390px screens each button
     still keeps its desktop min-content width. That lets the row grow wider
     than the viewport before wrapping, which shows up in mobile audits as a
     horizontal overflow strip near the hero. Force the buttons into a stacked
     mobile layout so every CTA stays thumb-sized without widening the page. */
  .hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .hero-actions .btn{width:100%;min-width:0}
  .actions{min-width:0}
  .hero-grid,.hero-stage,.search-shell,.grid-4,.grid-3,.grid-2,.hero-points,.proof-strip,.proof-grid,.search-bar,.business-grid,.loading,.footer-grid{grid-template-columns:1fr}
  .search-head{align-items:flex-start}
  .stage-main{min-height:0}
  .stage-main img{width:100%;height:auto;display:block}
  /* On mobile, let the 3 step cards flow BELOW the preview image
     instead of absolute-positioning over it. Prevents the overlap
     noticed 2026-04-23 on iPhone 13 viewport where absolute cards
     hog the image and both become unreadable. */
  .stage-overlay{position:static;grid-template-columns:1fr;margin-top:14px;gap:10px}
  .search-field{border-right:none;border-bottom:1px solid #e2e8f0;padding:0 6px 12px}
  .search-field:last-of-type{border-bottom:none}
  /* iOS Safari adds an intrinsic min-width to search inputs via its native
     search decoration. On 320-390px screens that makes the first field resist
     shrinking, so the form looks clean in desktop CSS but still produces a
     subtle horizontal overflow strip during mobile audits. Removing the native
     search chrome and allowing the field to clamp to the available width keeps
     the search stack inside the viewport. */
  .search-field input[type="search"]{display:block;max-width:100%;min-width:0}
  .search-input-shell{padding:0}
  .marketplace-filter-grid{grid-template-columns:1fr}
  .marketplace-filters{padding:12px}
  .marketplace-filter-field select[multiple]{min-height:72px}
  .results-head{align-items:flex-start;flex-direction:column}
  .sort-select{width:100%}
  /* Let the horizontal pills reach the viewport edge without widening the
     page. The old edge bleed made 320-390px screens report a horizontal
     overflow strip even though the chip rows themselves already scroll. */
  .meta-strip,.cat-strip{margin-inline:0;padding-right:18px;padding-left:1px}
  .biz-footer{align-items:stretch;flex-direction:column}
  /* Keep mobile card CTAs full-width and single-column so 320-390px cards
     never squeeze the labels or create side-by-side tap targets that feel too
     tight for thumbs. */
  .biz-actions{display:grid;grid-template-columns:1fr;width:100%}
  .biz-actions .btn{width:100%}
  /* Make the two search inputs breathe vertically on phones and keep the CTA
     spanning the full form width. This avoids a cramped final row where the
     button can look visually detached from the fields on 320-375px screens. */
  .search-bar{padding:14px}
  .search-btn{width:100%;min-width:0}
  .proof-tile{min-height:0}
}

/* Pre-launch empty state for /marketplace — paying-customer-only listing.
   Larger, on-brand, with action buttons because this is the moment to
   convert a curious prospect into a free-trial start. */
.empty-prelaunch{max-width:640px;padding:80px 24px}
.empty-prelaunch svg{margin:0 auto 24px;color:#1d4ed8;display:block}
.empty-prelaunch h3{font-size:26px;line-height:1.2;color:var(--pm-ink);margin:0 0 12px}
.empty-prelaunch p{color:#475569;font-size:16px;line-height:1.55;margin:0 0 28px}
.empty-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.empty-cta-row .btn{min-width:200px}
@media (max-width:560px){.empty-cta-row .btn{width:100%;min-width:0}}

/* Keep the prelaunch empty-state CTAs readable on 320-390px screens.
   The shared button component keeps pill padding on both sides, so two
   side-by-side buttons can still read like one crowded row unless they stack,
   shrink, wrap text, and cap themselves to the container box. */
.empty-cta-row .btn{max-width:100%;white-space:normal;text-align:center}
@media (max-width:560px){
  .empty-cta-row{display:grid;grid-template-columns:1fr;width:100%}
  .empty-cta-row .btn{display:flex;width:100%;min-width:0;padding:12px 16px;line-height:1.35}
}

/* CSP cleanup 2026-05-11 */
.is-hidden{display:none}

/* #12120/#12122/#12123 — apex marketplace personalization cluster
   (near-me, switch-city picker, recent searches, viewed/book-again rails). */
.personalization-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.near-me-btn{display:inline-flex;align-items:center;gap:8px}
.resolved-city-label{font-size:13px;font-weight:800;color:#0f172a;background:#eef6ff;border:1px solid #dbe5f1;border-radius:999px;padding:6px 12px}
.near-me-status{font-size:13px;color:#475569}
.distance-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#ecfdf5;color:#047857;border:1px solid #6ee7b7;font-size:11px;font-weight:800;line-height:1.6}
.city-picker{margin-top:14px;padding:18px;border:1px solid #dbe5f1;border-radius:18px;background:#fff;box-shadow:0 18px 42px rgba(15,23,42,.08);max-width:420px}
.city-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.city-picker-close{border:none;background:none;font-size:24px;line-height:1;cursor:pointer;color:#475569}
.city-picker input{width:100%;min-height:44px;padding:10px 14px;border:1px solid #dbe5f1;border-radius:12px;font-size:15px}
.city-picker-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.city-suggestion{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:12px;background:#f8fbff;border:1px solid #dbe5f1;color:#0f172a;font-weight:700;cursor:pointer}
.city-suggestion:hover{border-color:#93c5fd;background:#eef6ff}
.city-count{font-size:11px;color:#64748b;font-weight:800}
.recent-searches{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.recent-searches-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.recent-search-chip{min-height:36px;padding:6px 12px;border-radius:999px;background:#f1f5f9;border:1px solid #dbe5f1;color:#0f172a;font-weight:700;cursor:pointer}
.recent-search-chip:hover{border-color:#93c5fd;background:#eef6ff}
.rail-panel{margin:0 0 34px;padding:24px;border:1px solid #dbe5f1;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 42px rgba(15,23,42,.08)}
.rail-head{margin-bottom:14px}
.rail-head .label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#2563eb}
.rail-head h2{margin:4px 0 0;font-size:20px}
.rail-list{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.rail-card{flex:0 0 240px;display:flex;flex-direction:column;border:1px solid #dbe5f1;border-radius:16px;background:#f8fbff;overflow:hidden}
.rail-card-cover{width:100%;height:120px;object-fit:cover}
.rail-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.rail-card-body strong{font-size:15px;color:#0f172a}
.rail-card-sub{font-size:13px;color:#475569}
.rail-card-actions{display:flex;gap:8px;padding:0 14px 14px;margin-top:auto}
.rail-card-actions .btn{flex:1;text-align:center}