/* Fonts, self-hosted (2026-10-28 speed pass; scripts/self-host-fonts.mjs): same files Google served, latin + latin-ext,
   from our own domain so the first paint no longer waits on fonts.googleapis.com. Bricolage and Geist latin are
   preloaded in the page head. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-stretch: 100%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 900; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; src: url(/fonts/geist-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 900; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; src: url(/fonts/geist-latin.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500 700; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format('woff2'); }

/* Mobile Mechanic Near Me 2.0 — design system.
   Headings: Bricolage Grotesque. Body: Geist. Labels: Geist Mono.
   Blue (#203A72) is the public call-to-action color; purple (#203A72) is used inside sign-in and the account. */

:root {
  --bg: #F8FAFC;
  --fg: #0F172A;
  --muted: #64748B;
  --muted-light: #647388;      /* small captions on light backgrounds: 4.5:1 on white (was #94A3B8, too faint) */
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --primary: #203A72;
  --primary-hover: #182E5C;
  --accent: #203A72;
  --accent-hover: #182E5C;
  --highlight: #F59E0B;
  --success: #16A34A;
  --surface: #FFFFFF;
  --dark: #081028;
  --dark-2: #0B1633;
  --dark-soft: #101C3A;
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius-card: 22px;
  --shadow-card: 0 20px 40px -24px rgba(15, 23, 42, .18);
  --header-h: 78px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* An open menu (site or admin) or the account panel holds the page still. html is the scroller here (its overflow-x:
   clip stops body's overflow from reaching the viewport), so the lock goes on html, never on body: a body with
   overflow hidden becomes its own scroll box and the sticky header scrolls away with it. The menus keep their own scroll. */
html.nav-lock, html:has(.udlg--drawer[open]) { overflow: hidden; overscroll-behavior: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-optical-sizing: none; }
p, ul, ol { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--fg); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.container { max-width: 1280px; margin: 0 auto; }
.section { padding: 80px 20px; }
.section--white { background: #fff; }
.section--soft { background: var(--bg); }
.section--line-t { border-top: 1px solid var(--border); }
.section--line-y { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--line-b { border-bottom: 1px solid var(--border); }
.section--dark { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: #fff; }
@media (min-width: 768px) { .section { padding-top: 112px; padding-bottom: 112px; } }
@media (min-width: 1024px) { .section { padding-left: 32px; padding-right: 32px; } }

/* ---------- Type helpers ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--primary); }
.kicker::before { content: ""; height: 1px; width: 24px; background: currentColor; }
.kicker--plain::before { display: none; }
.kicker--light { color: #CBD5E1; }
.h2 { margin-top: 16px; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.lead { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 640px; }
.section--dark .lead { color: #94A3B8; }
.section-head { display: flex; flex-direction: column; gap: 24px; }
.section-head__action { flex: none; }
@media (min-width: 768px) {
  .h2 { font-size: 48px; }
  .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.mono { font-family: var(--font-mono); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 14px 24px; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: #fff !important; box-shadow: 0 10px 15px -3px rgba(32, 58, 114, .25), 0 4px 6px -4px rgba(32, 58, 114, .25); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 20px 25px -5px rgba(32, 58, 114, .25), 0 8px 10px -6px rgba(32, 58, 114, .25); }
/* On the dark navy sections a navy button sinks into the background, so there the primary button is the brand sky with
   deep navy text (6.2:1), the logo's own pairing. */
:is(.hero, .section--dark, .footer, .cta, .page-hero--dark, .mobile-nav, .net-card, .callout--dark, .free-card) .btn-primary { background: #14A0DE; color: #081028 !important; box-shadow: 0 12px 24px -12px rgba(20, 160, 222, .6); }
:is(.hero, .section--dark, .footer, .cta, .page-hero--dark, .mobile-nav, .net-card, .callout--dark, .free-card) .btn-primary:hover { background: #3FB6E8; box-shadow: 0 16px 30px -12px rgba(20, 160, 222, .7); }
.btn-white { background: #fff; color: var(--fg) !important; }
.btn-white:hover { box-shadow: 0 10px 40px -10px rgba(255, 255, 255, .5); }
.btn-outline { background: #fff; color: var(--fg); border: 1px solid var(--border); }
.btn-outline:hover { border-color: #CBD5E1; box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .25); }
.btn-ghost-dark { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .1); }
.btn-accent { background: var(--accent); color: #fff !important; border-radius: 12px; padding: 15px 24px; font-size: 15px; font-weight: 800; box-shadow: 0 10px 20px -10px rgba(32, 58, 114, .5); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-danger-outline { background: #fff; color: #DC2626; border: 1px solid #FECACA; border-radius: 12px; padding: 13px 24px; font-weight: 700; }
.btn-danger-outline:hover { background: #FEF2F2; transform: none; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-xs { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); }
.header__bar { height: var(--header-h); background: var(--dark-2); display: flex; align-items: center; transition: background-color .3s ease, padding .3s ease; }
.header__inner { width: 100%; height: var(--header-h); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: max-width .35s ease, height .35s ease, background-color .35s ease, border-radius .35s ease, box-shadow .35s ease, padding .35s ease; }
/* The full menu needs 1180px since "Ask a Pro" joined it (2026-10-29); below that the burger carries it, so the
   logo is never squeezed. */
@media (min-width: 1180px) { .header__inner { padding: 0 32px; display: grid; grid-template-columns: 1fr auto 1fr; } }
.header.is-scrolled .header__bar { background: transparent; padding-top: 6px; }
.header.is-scrolled .header__inner { max-width: 1160px; height: 62px; background: rgba(16, 28, 58, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .75); padding: 0 12px 0 15px; }
.header.is-scrolled .brand__tag { max-height: 0; opacity: 0; margin-top: 0; }
.header.is-scrolled .brand__mark { width: 36px; height: 36px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(20, 160, 222, .18); transition: transform .3s ease, width .3s ease, height .3s ease; }
.brand:hover .brand__mark { transform: scale(1.05) rotate(-4deg); }
.brand__mark img { width: auto; height: 29px; transition: height .3s ease; }
.header.is-scrolled .brand__mark img { height: 26px; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; }
.brand__tag { display: none; white-space: nowrap; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: #94A3B8; margin-top: 4px; max-height: 16px; overflow: hidden; transition: max-height .3s ease, opacity .3s ease, margin .3s ease; }
@media (min-width: 640px) { .brand__name { font-size: 17px; } .brand__tag { display: block; } }

.nav { display: none; justify-content: center; gap: 2px; }
@media (min-width: 1180px) { .nav { display: flex; } }
.nav a { --pad: 16px; padding: 8px var(--pad); border-radius: 999px; font-size: 13px; font-weight: 600; color: #94A3B8; white-space: nowrap; transition: color .2s ease, background-color .2s ease, padding .35s ease; }
/* Narrower screens and the scrolled pill (capped at 1160px) space the links a little closer. */
@media (max-width: 1299px) { .nav a { --pad: 11px; } .header__signin { padding: 8px 12px; } }
.header.is-scrolled .nav a { --pad: 11px; }
.header.is-scrolled .header__signin { padding: 8px 12px; }
.nav a:hover, .nav a.is-active { color: #fff; }
/* Under each link a short glowing line, half the word's width and centered, grows out from the middle on hover and
   stays open on the page you are on (the owner, 2026-10-29; it replaced the dot). */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; bottom: 2px; left: calc(var(--pad) + (100% - 2 * var(--pad)) / 4); width: calc((100% - 2 * var(--pad)) / 2); height: 2px; border-radius: 2px; background: #14A0DE; box-shadow: 0 0 8px rgba(20, 160, 222, .8); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a.is-active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav a::after { transition: none; } }

.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.header__signin { display: none; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #CBD5E1; white-space: nowrap; transition: color .2s ease; }
.header__signin:hover { color: #fff; }
@media (min-width: 640px) { .header__signin { display: inline-flex; } }
/* Signed in: a round account button in place of the words (the owner, 2026-10-29), the burger's shape and glass. */
.header__account { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #CBD5E1; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.header__account:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.header__account:focus-visible { outline: 2px solid #3FB6E8; outline-offset: 2px; }
.header__account.is-active { color: #fff; border-color: rgba(63, 182, 232, .55); box-shadow: 0 0 0 3px rgba(32, 58, 114, .28), 0 0 14px rgba(20, 160, 222, .35); }
.header__cta { padding: 10px 20px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.header__burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #fff; }
.header__burger:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 1180px) { .header__burger { display: none; } }

/* The phone menu: the hero's navy and dot grid, the six pages as a numbered list in the display face, the
   secondary links as pills, and the two actions pinned to the bottom. Items fade up in order when it opens. */
.mobile-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; color: #fff; background-color: var(--dark);
  background-image: radial-gradient(60% 40% at 50% 0%, rgba(20, 160, 222, 0.28), transparent 70%), radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1.5px);
  background-size: 100% 100%, 28px 28px; }
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner { min-height: 100%; display: flex; flex-direction: column; padding: 22px 20px 28px; }
.mobile-nav__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #94A3B8; animation: navIn .4s ease both; }
.mobile-nav__main { display: grid; margin-top: 16px; }
.mobile-nav__main a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #E2E8F0; animation: navIn .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(60ms + var(--i, 0) * 45ms); }
.mobile-nav__num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #475569; }
.mobile-nav__main svg { color: #475569; transition: transform .2s ease, color .2s ease; }
.mobile-nav__main a.is-active { color: #fff; }
.mobile-nav__main a.is-active .mobile-nav__num, .mobile-nav__main a.is-active svg { color: #3FB6E8; }
.mobile-nav__main a:active svg { transform: translateX(4px); color: #fff; }
.mobile-nav__extra { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; animation: navIn .5s ease both; animation-delay: 360ms; }
.mobile-nav__extra a { font-size: 13px; font-weight: 700; color: #CBD5E1; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, .04); }
.mobile-nav__actions { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; animation: navIn .5s ease both; animation-delay: 420ms; }
.mobile-nav__actions .btn { justify-content: center; padding: 15px 20px; font-size: 15px; }
.mobile-nav__fine { margin: 4px 0 0; text-align: center; font-size: 12px; color: #64748B; }
@keyframes navIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mobile-nav__kicker, .mobile-nav__main a, .mobile-nav__extra, .mobile-nav__actions { animation: none; } }
@media (min-width: 1180px) { .mobile-nav { display: none !important; } }
/* On a wide tablet the menu reads as a centered column, not a line across the whole screen. */
@media (min-width: 900px) { .mobile-nav__inner { max-width: 720px; margin: 0 auto; } }

/* ---------- Hero (home) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: #fff; padding: 88px 20px 72px; text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 45% at 50% 0%, rgba(20, 160, 222, 0.304), transparent 70%),
  radial-gradient(35% 35% at 85% 25%, rgba(20, 160, 222, 0.144), transparent 70%),
  radial-gradient(30% 30% at 10% 60%, rgba(20, 160, 222, 0.096), transparent 70%); }
@media (min-width: 768px) { .hero { padding: 104px 32px 88px; } }
@media (max-width: 767px) { .hero { padding-top: 28px; padding-bottom: 56px; } .hero__title { margin-top: 16px; } .hero__lead { margin-top: 16px; } .search { margin-top: 28px; } }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #CBD5E1; background: rgba(255, 255, 255, .03); }
.hero__dot { position: relative; width: 8px; height: 8px; }
.hero__dot::before, .hero__dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #22C55E; }
.hero__dot::before { opacity: .6; animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.hero__title { margin: 24px auto 0; max-width: 1024px; font-size: clamp(2.9rem, 7vw, 6.6rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.hero__title .grad { background: linear-gradient(90deg, #14A0DE, #0E88BF, #14A0DE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title-line { display: block; }
.hero__title-line--grad .fold-text-piece { background: linear-gradient(90deg, #14A0DE, #0E88BF, #14A0DE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin: 24px auto 0; max-width: 620px; color: #94A3B8; font-size: 17px; line-height: 1.65; }
@media (min-width: 768px) { .hero__lead { font-size: 18px; } }

.search { margin: 40px auto 0; max-width: 1024px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .1); background: #fff; padding: 10px; box-shadow: 0 30px 100px rgba(32, 58, 114, .35); display: flex; flex-direction: column; gap: 6px; color: var(--fg); text-align: left; }
.search__field { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 18px; min-height: 60px; }
.search__field + .search__field { border-top: 1px solid var(--border); }
.search__icon { color: var(--primary); flex: none; }
.search__meta { flex: 1; min-width: 0; }
.search__label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.search__input { margin-top: 2px; width: 100%; background: transparent; border: 0; outline: 0; font-size: 14px; font-weight: 600; color: var(--fg); padding: 0; }
.search__input::placeholder { color: #94A3B8; font-weight: 500; }
.search__btn { min-height: 60px; border-radius: 19px; background: var(--primary); padding: 0 32px; font-size: 14px; font-weight: 900; color: #fff; transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
.search__btn:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(14, 136, 191, .3); }
@media (min-width: 768px) {
  .search { flex-direction: row; align-items: stretch; gap: 0; }
  .search__field { min-height: 66px; }
  .search__field + .search__field { border-top: 0; border-left: 1px solid var(--border); }
  .search__btn { min-height: 66px; min-width: 155px; margin-left: 10px; }
}

.popular { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.popular__label { margin-right: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: #94A3B8; }
.chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); padding: 8px 16px; font-size: 14px; font-weight: 600; color: #CBD5E1; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.chip:hover { border-color: rgba(20, 160, 222, .5); color: #fff; }
.chip--sm { padding: 6px 14px; font-size: 13px; }

.stats { margin: 56px auto 0; max-width: 1024px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.stat { border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(255, 255, 255, .03); padding: 22px 16px; }
.stat__value { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat__label { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #94A3B8; }

/* ---------- Category marquee ---------- */
.marquee { position: relative; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); background: var(--dark); padding: 20px 0; overflow: hidden; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 8%, 120px); z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(to right, var(--dark), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--dark), transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee var(--marquee-time, 120s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track .chip svg { color: #14A0DE; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Trust strip ---------- */
/* Trust strip (the reference): four cells divided by hairlines, a round pale-blue check, bold title, muted line. */
.trust { border-bottom: 1px solid var(--border); background: #fff; }
.trust__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; }
.trust__item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-top: 1px solid var(--border); }
.trust__item:first-child { border-top: 0; }
.trust__icon { flex: none; width: 36px; height: 36px; border-radius: 999px; background: #EFF8FD; color: var(--primary); display: grid; place-items: center; }
.trust__icon svg { stroke-width: 2.5; }
.trust__title { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.trust__text { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 3px; max-width: 200px; }
@media (min-width: 640px) {
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(2) { border-top: 0; }
  .trust__item:nth-child(even) { border-left: 1px solid var(--border); }
}
@media (min-width: 1024px) {
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .trust__item { padding: 28px 30px; border-top: 0; }
  .trust__item + .trust__item { border-left: 1px solid var(--border); }
}

/* ---------- Cards ---------- */
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
a.card:hover, .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: #CBD5E1; }
.card__arrow { position: absolute; top: 20px; right: 20px; color: #CBD5E1; transition: color .2s ease, transform .2s ease; }
a.card:hover .card__arrow { color: var(--primary); transform: translate(2px, -2px); }
.icon-sq { width: 44px; height: 44px; border-radius: 14px; background: #F1F5F9; color: var(--primary); display: grid; place-items: center; flex: none; }
.icon-sq--dark { background: var(--dark); color: #fff; }
.icon-sq--violet { background: #E2E8F0; color: var(--accent); }
.icon-sq--lime { background: #ECFCCB; color: #4D7C0F; }
.icon-sq--lg { width: 48px; height: 48px; border-radius: 16px; }

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.cat-card .cat-card__name { margin-top: 20px; font-weight: 700; font-size: 15px; line-height: 1.3; padding-right: 20px; }
.cat-card .cat-card__count { font-size: 13px; color: var(--muted); margin-top: 4px; }
.cat-hero { grid-column: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; color: #fff; background: linear-gradient(135deg, #0B1633 0%, #112046 55%, #1A3263 100%); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-card); padding: 28px; transition: transform .3s ease, box-shadow .3s ease; }
.cat-hero::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; bottom: -160px; border-radius: 999px; background: radial-gradient(circle, rgba(20, 160, 222, 0.36), transparent 65%); pointer-events: none; }
.cat-hero:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(32, 58, 114, .5); }
@media (min-width: 1024px) { .cat-hero { grid-row: span 2; min-height: 100%; } }
.cat-hero__pill { align-self: flex-start; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 5px 11px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #CBD5E1; }
.cat-hero__count { margin-top: 40px; font-family: var(--font-display); font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cat-hero__name { margin-top: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cat-hero__go { flex: none; width: 40px; height: 40px; border-radius: 999px; background: #fff; color: var(--dark); display: grid; place-items: center; transition: transform .2s ease; }
.cat-hero:hover .cat-hero__go { transform: translateX(4px); }
.cat-more { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--primary); color: #fff; border-radius: var(--radius-card); padding: 24px; transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
.cat-more:hover { background: var(--primary-hover); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(32, 58, 114, .7); }
.cat-more__small { font-size: 13px; font-weight: 600; color: #CBD5E1; }
.cat-more__big { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Why section */
.why { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .why { grid-template-columns: 1.15fr 1fr; gap: 72px; } }
.why__text { margin-top: 20px; color: #94A3B8; font-size: 16px; line-height: 1.75; }
.why__text + .why__text { margin-top: 14px; }
.checks { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; list-style: none; padding: 0; }
.checks li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; color: #E2E8F0; }
.checks svg { color: #4ADE80; flex: none; }
.free-card { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 32px; background: rgba(255, 255, 255, .04); padding: 40px; }
.free-card::before { content: ""; position: absolute; width: 320px; height: 320px; right: -100px; top: -120px; border-radius: 999px; background: radial-gradient(circle, rgba(20, 160, 222, 0.32), transparent 65%); pointer-events: none; }
.free-card__big { margin-top: 16px; font-family: var(--font-display); font-size: 88px; font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(90deg, #14A0DE, #0E88BF, #14A0DE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.free-card__text { margin-top: 16px; color: #94A3B8; font-size: 15px; line-height: 1.65; }

/* Business cards */
.grid-3 { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* The reference's business card: wide logo box, name, place, two lines of text, a rule, tag and arrow. */
.biz { padding: 24px; border-radius: 24px; border-color: rgba(24, 24, 27, .1); box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 18px 40px -20px rgba(24, 24, 27, .16); }
a.biz:hover { transform: none; border-color: rgba(24, 24, 27, .1); box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 18px 40px -20px rgba(24, 24, 27, .16); }
.biz__logo { flex: none; width: 128px; height: 64px; border-radius: 16px; border: 1px solid var(--border); background: #fff; overflow: hidden; display: grid; place-items: center; }
.biz__logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.biz__logo--letter { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.biz__name { margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.biz__loc { margin-top: 6px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.biz__desc { margin-top: 16px; font-size: 14px; line-height: 24px; color: #475569; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz__spacer { flex: 1; min-height: 24px; }
.biz__foot { padding-top: 20px; border-top: 1px solid #F1F5F9; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tag { display: inline-flex; align-items: center; border-radius: 999px; background: #F1F5F9; color: #475569; padding: 4px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag--blue { background: #F1F5F9; color: var(--primary); }

/* Steps */
.steps { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .steps { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.steps__list { position: relative; display: grid; gap: 18px; }
.steps__list::before { content: ""; position: absolute; left: 23px; top: 28px; bottom: 28px; width: 2px; background: var(--border); }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; }
.step__icon { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg); }
.step__card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px; box-shadow: var(--shadow-card); }
.step__label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.step__title { margin-top: 6px; font-size: 18px; font-weight: 800; }
.step__text { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.65; padding-right: 48px; }
.step__num { position: absolute; right: 22px; top: 16px; font-family: var(--font-display); font-size: 36px; font-weight: 800; color: #E2E8F0; letter-spacing: -.04em; line-height: 1; }

/* Industries */
.industries { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .industries { grid-template-columns: 1fr 1fr; gap: 72px; } }
.ind-list { display: grid; gap: 12px; }
.ind { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px 20px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ind:hover { transform: translateX(4px); border-color: #CBD5E1; box-shadow: var(--shadow-card); }
.ind__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.ind__blurb { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ind__name, .ind__blurb { display: block; }   /* name over its line, not run together ("BeautySalons…") */

/* ---------- An open spot: an empty category or state page as a sign-up moment (openSpot in components.js). The words
   and the free-listing button on the left; on the right, a dashed "your listing goes here" card on the banner gradient. ---------- */
.open-spot { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 30px 60px -44px rgba(15, 23, 42, .35); }
@media (min-width: 900px) { .open-spot { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.open-spot__main { padding: 40px 42px 38px; }
.open-spot__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.open-spot__badge i { width: 8px; height: 8px; border-radius: 999px; background: #22C55E; animation: open-spot-ping 2.2s ease-out infinite; }
@keyframes open-spot-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 75%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.open-spot__title { margin-top: 18px; max-width: 580px; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -.035em; }
.open-spot__lead { margin-top: 14px; max-width: 540px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.open-spot__lead b { color: var(--fg); font-weight: 700; }
.open-spot__points { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 10px; }
.open-spot__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: #475569; }
.open-spot__points b { color: var(--fg); font-weight: 700; }
.open-spot__points svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 999px; background: #EFF8FD; color: var(--primary); stroke-width: 3; }
.open-spot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.open-spot__how { font-size: 14px; font-weight: 700; color: var(--primary); }
.open-spot__how:hover { text-decoration: underline; text-underline-offset: 3px; }
.open-spot__stage { position: relative; display: grid; place-items: center; align-content: center; gap: 16px; padding: 44px 28px; border-top: 1px solid var(--border-light);
  background: radial-gradient(rgba(20, 160, 222, 0.096) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(160deg, #EFF8FD 0%, #F2F5FA 55%, #EAF6FC 100%); }
@media (min-width: 900px) { .open-spot__stage { border-top: 0; border-left: 1px solid var(--border-light); } }
.open-spot__card { width: min(100%, 280px); display: flex; flex-direction: column; padding: 20px; background: rgba(255, 255, 255, .94); border: 1.5px dashed rgba(32, 58, 114, .45); border-radius: 20px; box-shadow: 0 26px 44px -30px rgba(32, 58, 114, .5); transform: rotate(-2.5deg); transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .3s ease; }
.open-spot:hover .open-spot__card { transform: rotate(0) translateY(-4px); border-color: rgba(32, 58, 114, .7); }
.open-spot__logo { width: 64px; height: 44px; border-radius: 12px; border: 1px dashed #CBD5E1; background: #F8FAFC; display: grid; place-items: center; color: #94A3B8; }
.open-spot__name { margin-top: 14px; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); }
.open-spot__loc { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.open-spot__line { display: block; height: 8px; margin-top: 12px; border-radius: 999px; background: #EEF2F7; }
.open-spot__line--short { width: 64%; margin-top: 7px; }
.open-spot__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #F1F5F9; }
.open-spot__tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: #EFF8FD; color: var(--primary); font-size: 11.5px; font-weight: 700; }
.open-spot__go { flex: none; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); }
.open-spot__here { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.open-spot__here svg { transform: rotate(-45deg); }
.open-spot__onward { margin-top: 28px; }
.open-spot__ask { font-size: 14px; font-weight: 700; color: var(--fg); }
.open-spot__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.open-spot__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: #334155; transition: border-color .15s ease, color .15s ease; }
.open-spot__chip span { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); }
.open-spot__chip:hover { border-color: rgba(32, 58, 114, .45); color: var(--primary); }
.open-spot__chip--search { border-style: dashed; color: var(--primary); }
.open-spot + .page-context, .open-spot__onward + .page-context { margin-top: 36px; }
#how-it-works { scroll-margin-top: 90px; }
@media (max-width: 639px) {
  .open-spot { border-radius: 22px; }
  .open-spot__main { padding: 24px 20px 26px; }
  .open-spot__title { margin-top: 14px; font-size: 25px; }
  .open-spot__lead { font-size: 15px; }
  .open-spot__actions { margin-top: 22px; }
  .open-spot__cta { flex: 1 1 100%; justify-content: center; }
  .open-spot__stage { padding: 28px 20px; }
  .open-spot__onward { margin-top: 20px; }
}
.ind__arrow { margin-left: auto; color: #CBD5E1; flex: none; transition: color .2s ease; }
.ind:hover .ind__arrow { color: var(--primary); }

/* Blog cards */
.blog-grid { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } .blog-grid > .post-hero { grid-column: span 2; grid-row: span 2; } }
.post-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; background: var(--dark); color: #fff; border-radius: 28px; padding: 32px; transition: transform .3s ease, box-shadow .3s ease; }
.post-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 90% 0%, rgba(20, 160, 222, 0.36), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(20, 160, 222, 0.32), transparent 70%); }
.post-hero--img::before { background: linear-gradient(to top, rgba(8, 16, 40, .95) 30%, rgba(8, 16, 40, .35)); }
.post-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.post-hero:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(32, 58, 114, .5); }
.post-hero > * { position: relative; }
.post-hero__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CBD5E1; }
.post-hero__meta .pill-sm { border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 10px; color: #fff; }
.post-hero__title { margin-top: 14px; font-size: 28px; line-height: 1.1; letter-spacing: -.03em; max-width: 560px; }
@media (min-width: 768px) { .post-hero__title { font-size: 34px; } }
.post-hero__excerpt { margin-top: 12px; color: #94A3B8; font-size: 15px; line-height: 1.65; max-width: 540px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-hero__more { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #CBD5E1; }
/* Home "Latest from the Blog" cards (2026-10-28, rebuilt for real photos): picture on top at full width, filling the card
   when the row is tall (beside the large card), 16:10 otherwise; date and title below. */
.post { padding: 12px; flex-direction: column; gap: 0; align-items: stretch; }
.post__thumb { flex: 1 1 auto; display: block; width: 100%; min-height: 160px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, #0B1633, #1A3263 55%, #203A72); }
.post__thumb.post-ph { display: grid; place-items: center; }
.post__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.post__thumb.post-ph img { width: 48px; height: 48px; opacity: .8; }
a.post:hover .post__thumb img { transform: scale(1.04); }
a.post:hover .post__thumb.post-ph img { transform: none; }
.post__body { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 14px 6px 4px; }
.post__date { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post__title { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__excerpt { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* FAQ */
.faq { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .faq { grid-template-columns: 1fr 1.25fr; gap: 72px; } }
/* Desktop: the intro stays in view beside the questions until the end of the list scrolls past (as on the reference). */
@media (min-width: 1024px) { .faq__intro { position: sticky; top: calc(var(--header-h) + 36px); } }
.faq__list { display: grid; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--border); border-radius: 18px; transition: border-color .2s ease, box-shadow .2s ease; }
.faq__item.is-open { border-color: #CBD5E1; box-shadow: var(--shadow-card); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-weight: 700; font-size: 15px; text-align: left; line-height: 1.35; }
.faq__icon { flex: none; width: 28px; height: 28px; border-radius: 999px; background: #F1F5F9; display: grid; place-items: center; color: var(--muted); transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.is-open .faq__icon { transform: rotate(45deg); background: var(--primary); color: #fff; }
.faq__a { display: none; padding: 0 22px 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.faq__a p + p, .faq__a ul { margin-top: 10px; }
.faq__a ul { padding-left: 20px; }
.faq__a a { color: var(--primary); font-weight: 600; }
.is-open .faq__a { display: block; }
.faq__more { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); font-size: 14px; }

/* Closing banner */
.cta-wrap { padding: 80px 24px; }
.cta { position: relative; overflow: hidden; max-width: 1280px; margin: 0 auto; background: var(--dark); color: #fff; border-radius: 32px; padding: 48px 32px; display: flex; flex-direction: column; gap: 28px; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 80% at 85% 50%, rgba(20, 160, 222, 0.32), transparent 70%), radial-gradient(30% 60% at 10% 0%, rgba(20, 160, 222, 0.2), transparent 70%); pointer-events: none; }
.cta > * { position: relative; }
@media (min-width: 768px) { .cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 56px 64px; } }
.cta__title { margin-top: 12px; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; }
@media (min-width: 768px) { .cta__title { font-size: 40px; } }
.cta__text { margin-top: 12px; color: #94A3B8; max-width: 520px; line-height: 1.65; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* ---------- Footer ---------- */
.footer { background: var(--dark-2); color: #fff; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__inner { max-width: 1280px; margin: 0 auto; padding: 64px 20px 32px; }
@media (min-width: 1024px) { .footer__inner { padding-left: 32px; padding-right: 32px; } }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 48px; } }
.footer__blurb { margin-top: 20px; color: #94A3B8; font-size: 14px; line-height: 1.75; max-width: 380px; }
/* The button row under the footer blurb: List Your Business and a chat-bubble link to Ask a Local Pro (the owner,
   2026-10-29: neater than a fourth link in Explore). The bubble keeps one sharp corner, like a speech bubble. */
.footer__btn { margin-top: 24px; } /* the outage snapshots in public/_static still use it */
.footer__acts { display: flex; align-items: stretch; gap: 10px; margin-top: 24px; }
.footer__ask { position: relative; flex: none; display: grid; place-items: center; width: 44px; border-radius: 16px 16px 16px 5px; border: 1px solid rgba(63, 182, 232, .45); background: rgba(32, 58, 114, .14); color: #7CCDEF; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.footer__ask:hover, .footer__ask:focus-visible { border-color: var(--primary); background: var(--primary); color: #fff; transform: translateY(-1px); }
.footer__ask:focus-visible { outline: 2px solid #3FB6E8; outline-offset: 2px; }
.footer__ask::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; padding: 6px 10px; border-radius: 8px; background: #fff; color: var(--fg); font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transform: translate(-4px, -50%); transition: opacity .18s ease, transform .18s ease; }
.footer__ask:hover::after, .footer__ask:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.footer__h { font-size: 15px; font-weight: 800; margin-bottom: 18px; }
.footer__links { list-style: none; padding: 0; display: grid; gap: 12px; }
.footer__links a { color: #94A3B8; font-size: 14px; transition: color .2s ease; }
.footer__links a:hover { color: #fff; }
.footer__bottom { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 8px; justify-content: space-between; font-size: 12px; color: #94A3B8; }
.footer__bottom a { color: #CBD5E1; }
.footer__bottom a.footer__quiet { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(100, 116, 139, .4); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.footer__bottom a.footer__quiet:hover, .footer__bottom a.footer__quiet:focus-visible { color: #fff; text-decoration-color: currentColor; }
@media (min-width: 768px) { .footer__bottom { flex-direction: row; align-items: center; } }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.215, .61, .355, 1), transform .8s cubic-bezier(.215, .61, .355, 1); }
.js [data-reveal].in-view { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .1s; }
.js [data-reveal][data-delay="2"] { transition-delay: .2s; }
.js [data-reveal][data-delay="3"] { transition-delay: .3s; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding: 56px 20px 40px; border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .page-hero { padding: 72px 32px 48px; } }
.page-hero__inner { max-width: 1280px; margin: 0 auto; }
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__lead { margin-left: auto; margin-right: auto; }
.page-hero__count { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.page-hero__title { margin-top: 14px; font-size: 36px; line-height: 1.02; letter-spacing: -.035em; }
@media (min-width: 768px) { .page-hero__title { font-size: 56px; } }
.page-hero__lead { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 640px; }
.page-hero--dark { background: var(--dark); color: #fff; border-bottom: 0; position: relative; isolation: isolate; overflow: hidden; }
.page-hero--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 0%, rgba(20, 160, 222, 0.28), transparent 70%); }
.page-hero--dark .page-hero__lead { color: #94A3B8; }
.page-hero--dark .page-hero__count { color: #CBD5E1; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
.back:hover { text-decoration: underline; }
.page-hero .back { display: flex; width: fit-content; margin-bottom: 18px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs svg { color: #CBD5E1; }
.crumbs span { color: var(--fg); }

/* Searchable hero input (categories / locations / faqs) */
.hero-search { margin: 28px auto 0; max-width: 640px; position: relative; }
.hero-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted-light); }
.hero-search input { width: 100%; border: 1px solid var(--border); border-radius: 999px; background: #fff; padding: 16px 20px 16px 50px; font-size: 15px; font-weight: 500; outline: 0; box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .2); transition: border-color .2s ease, box-shadow .2s ease; }
.hero-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }

.page-hero--glow { position: relative; isolation: isolate; overflow: hidden; }
.page-hero--glow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 50% 0%, rgba(20, 160, 222, 0.112), transparent 70%); }
.grad-text--ink { background-image: linear-gradient(90deg, #203A72, #0E88BF, #203A72); }

/* Tiles (categories, locations) */
.tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .tile-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.tile-grid--top { margin-top: 40px; text-align: left; }
.tile { align-items: center; text-align: center; padding: 24px 18px 20px; }
.tile__badge { width: 44px; height: 44px; border-radius: 12px; background: #F1F5F9; color: var(--primary); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.tile__badge--grad { background: linear-gradient(135deg, #203A72, #203A72); color: #fff; box-shadow: 0 10px 20px -10px rgba(24, 46, 92, .7); }
.tile__rank { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tile__label { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.tile__name { margin-top: 12px; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; line-height: 1.3; }
.tile__rank + .tile__name, .tile__label + .tile__name { margin-top: 6px; }
.tile__count { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tile__bar { display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--border-light); margin-top: 14px; overflow: hidden; }
.tile__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #203A72, #203A72); }
.tile__bar + .tile__count { margin-top: 10px; }
.tile .card__arrow { top: 16px; right: 16px; }

/* Ranked top cards */
.top-grid { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .top-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.top-grid--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .top-grid--5 { grid-template-columns: repeat(5, 1fr); } }
.top-card { text-align: left; }
.top-card__rank { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.top-card__badge { width: 48px; height: 48px; border-radius: 14px; background: var(--dark); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.top-card__name { margin-top: 18px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.top-card__count { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* Sort toggle + list cards */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.seg { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.seg button { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); transition: background-color .2s ease, color .2s ease; }
.seg button.is-active { background: var(--primary); color: #fff; }
.seg--dark button.is-active { background: var(--dark); }
.list-grid { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .list-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.row-card { padding: 18px 20px; flex-direction: row; align-items: center; gap: 16px; }
.row-card__body { min-width: 0; flex: 1; }
.row-card__label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.row-card__name { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.row-card__count { font-size: 13px; color: var(--muted); margin-top: 2px; }
.row-card__badge { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--fg); }
.row-card .card__arrow { position: static; }
.letter-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.letter-bar a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 12px; font-weight: 800; color: var(--primary); }
.letter-bar a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.tile[id^="letter-"] { scroll-margin-top: 100px; }
.letter-head { grid-column: 1 / -1; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--muted-light); scroll-margin-top: 100px; }
.letter-head:first-child { margin-top: 0; }
.empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--border); border-radius: 18px; }

/* ---------- Alerts / pills ---------- */
.alert { border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; }
.alert--error { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.alert--success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.alert--info { background: #F1F5F9; color: #182E5C; border-color: #CBD5E1; font-weight: 500; }
.alert--info strong { display: block; font-weight: 800; color: var(--fg); margin-bottom: 4px; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid; }
.pill--pending { background: #FEFCE8; color: #A16207; border-color: #FEF08A; }
.pill--approved { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.pill--unverified { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.pill--rejected { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.pill--new { background: #F1F5F9; color: var(--primary); border-color: #CBD5E1; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; text-align: left; grid-template-columns: minmax(0, 1fr); }
.field label, .field__label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.field label .req { color: #DC2626; margin-left: 2px; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; }
.field__row a { font-size: 13px; font-weight: 700; color: var(--accent); }
.input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; font-size: 15px; background: #fff; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.input::placeholder { color: #94A3B8; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }
/* No box takes the cursor by itself (site.js nudge): one that needs fixing gets a red ring that pulses twice and stays until
   they type. The keyboard only comes up when they tap in. */
.is-nudge, .input.is-nudge { border-color: #F87171; box-shadow: 0 0 0 4px #FEE2E2; animation: mm-nudge .6s ease-out 2; }
@keyframes mm-nudge { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 60% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 4px #FEE2E2; } }
@media (prefers-reduced-motion: reduce) { .is-nudge, .input.is-nudge { animation: none; } }
dialog:focus, dialog:focus-visible { outline: none; }   /* a sheet holds the focus on open; no ring around the whole sheet */
.input[disabled], .input[readonly] { background: #F8FAFC; color: var(--muted); }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea.input { min-height: 140px; resize: vertical; line-height: 1.6; }
.input--code { font-family: var(--font-mono); font-size: 28px; letter-spacing: .4em; text-align: center; padding: 16px; }
.hint { font-size: 12px; color: var(--muted-light); margin-top: 6px; line-height: 1.5; }
.hint a { color: var(--accent); font-weight: 600; }
/* Phone boxes that take U.S. numbers only: a fixed "US +1" sits inside the left edge; a number that is not one turns the hint red. */
.input-us { position: relative; }
.input-us__tag { position: absolute; left: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 12px 0 15px; border-right: 1px solid var(--border); border-radius: 11px 0 0 11px; background: var(--bg); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); pointer-events: none; }
.input-us .input { padding-left: 82px; }
.hint.hint--bad { color: #B91C1C; font-weight: 600; }
/* Add Your Business: where the verification link goes, said at the email box itself. */
.hint--verify { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); }
.hint--verify[hidden] { display: none; }
.hint--verify > svg { flex: none; margin-top: 2px; color: var(--accent); }
.hint--verify strong { color: var(--fg); font-weight: 700; }
.email-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 13px; font-weight: 500; line-height: 1.5; animation: email-note-in .18s ease-out; }
.email-note[hidden] { display: none; }
.email-note > svg { flex: none; margin-top: 1px; color: #D97706; }
.email-note b { color: #78350F; font-weight: 700; overflow-wrap: anywhere; }
.email-note--ok { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.email-note--ok > svg { color: var(--success); }
.email-note--ok b { color: #14532D; overflow-wrap: normal; }
@keyframes email-note-in { from { transform: translateY(-3px); } }
.alert--success > strong:first-child { display: block; font-weight: 800; color: #14532D; margin-bottom: 4px; }
.alert__email { color: var(--fg); font-weight: 700; overflow-wrap: anywhere; }
.form-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .form-grid .span-2 { grid-column: 1 / -1; } }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.form-divider { border: 0; border-top: 1px solid var(--border-light); margin: 6px 0; }
.form-section__title { font-weight: 800; font-size: 15px; }
.form-section__sub { font-size: 13px; color: var(--muted-light); margin-top: 2px; }
.upload { display: flex; gap: 16px; align-items: center; border: 1px dashed #CBD5E1; border-radius: 14px; padding: 18px 20px; background: #FAFBFC; }
.upload__preview { flex: none; width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; overflow: hidden; color: var(--muted-light); }
.upload__preview img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.upload__text { font-size: 13px; color: var(--muted); }
.upload input { margin-top: 8px; font-size: 13px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #334155; line-height: 1.5; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Auth ---------- */
.auth { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 60px 20px; }
.auth__card { width: 100%; max-width: 448px; background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 36px 32px; box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .35); text-align: center; }
.auth__mark { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgba(32, 58, 114, .55), inset 0 0 0 1px rgba(20, 160, 222, .22); }
.auth__mark img { width: auto; height: 40px; }
.auth__title { margin-top: 20px; font-size: 28px; letter-spacing: -.03em; }
.auth__sub { margin-top: 6px; color: var(--muted); font-size: 15px; }
.auth .form { margin-top: 28px; }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--muted-light); font-size: 12px; font-weight: 600; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth__alt { font-size: 14px; color: var(--muted); }
.auth__alt a { color: var(--accent); font-weight: 700; }
/* Google sign-in (2026-10-30): Google's light button (white, grey edge, the four-colour G unchanged) in the site's type,
   first on Sign in and Create account, with the email link under "or use your email". */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; padding: 0 22px; border: 1px solid #747775; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1; color: #1F1F1F; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .15s ease; }
.gbtn:hover { border-color: #3C4043; background: #F6FBFE; box-shadow: 0 8px 18px -12px rgba(15, 23, 42, .5); color: #1F1F1F; }
.gbtn:active { transform: translateY(1px); }
.gbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.gbtn__g { flex: none; }
.gbtn--lg { height: 54px; font-size: 16px; }
.auth__card > .gbtn { margin-top: 24px; }
.auth__split { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #94A3B8; }
.auth__split::before, .auth__split::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth__card > .alert + .gbtn { margin-top: 16px; }
/* The email route folded under the Google button (the review form's "Use my email instead", 2026-10-30). */
.auth__email { margin-top: 18px; }
.auth__email > summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--accent); }
.auth__email > summary::-webkit-details-marker { display: none; }
.auth__email > summary svg { transition: transform .2s ease; }
.auth__email[open] > summary { color: var(--muted); }
.auth__email[open] > summary svg { transform: rotate(180deg); }
.auth__email > .form { margin-top: 14px; padding-top: 18px; border-top: 1px dashed var(--border); }
.auth__fine { margin-top: 22px; font-size: 12px; color: var(--muted-light); line-height: 1.6; }
.auth__fine a { color: var(--muted); text-decoration: underline; }

/* ---------- Account ---------- */
.account { max-width: 1120px; margin: 0 auto; padding: 48px 20px 96px; }
@media (min-width: 768px) { .account { padding: 56px 32px 112px; } }
.account--narrow { max-width: 640px; }
.account__kicker { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.account__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.account__title { margin-top: 8px; font-size: 32px; letter-spacing: -.03em; }
.account__sub { margin-top: 8px; color: var(--muted); font-size: 15px; }
.account .back { color: var(--accent); }
.tiles { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border-radius: 20px; }
.tile__title { margin-top: 20px; font-size: 18px; }
.tile__text { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.account__row { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 768px) { .account__row { grid-template-columns: 2.4fr 1fr; } }
.panel { border-radius: 20px; }
.panel__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }
.panel__value { margin-top: 8px; font-weight: 800; font-size: 16px; word-break: break-all; }
.panel .btn-danger-outline { margin-top: 12px; width: 100%; }
.biz-rows { display: grid; gap: 16px; margin-top: 28px; }
.biz-row { flex-direction: row; align-items: center; gap: 20px; padding: 20px; border-radius: 20px; }
.biz-row__logo { flex: none; width: 80px; height: 80px; border-radius: 14px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; overflow: hidden; }
.biz-row__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.biz-row__body { flex: 1; min-width: 0; }
.biz-row__name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.biz-row__meta { color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.5; }
.biz-row .pill { margin-top: 10px; }
.biz-row { flex-wrap: wrap; }
.biz-row > .trk { flex: 1 0 100%; padding-top: 20px; border-top: 1px solid var(--border-light); }
.biz-row__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 639px) { .biz-row { flex-wrap: wrap; } .biz-row__actions { width: 100%; } .biz-row__actions .btn { flex: 1; } }
/* My Businesses, two ways (2026-10-30): Expanded cards or a Compact sheet (sheet.css). The page's data-bizv says which
   one shows; the switch under "+ Add Business" flips it (site.js) and a cookie keeps the pick for next time. */
.bizv-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.bizv-switch { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.bizv-switch::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(8, 16, 40, .08), 0 6px 14px -8px rgba(8, 16, 40, .35); transition: transform .34s cubic-bezier(.2, .8, .2, 1); }
.bizv[data-bizv="compact"] .bizv-switch::before { transform: translateX(100%); }
.bizv-switch__opt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s ease; }
.bizv-switch__opt:hover { color: var(--fg); }
.bizv-switch__opt[aria-pressed="true"] { color: var(--primary); }
.bizv-switch__opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.bizv[data-bizv="compact"] .bizv-cards, .bizv[data-bizv="expanded"] .bizv-sheet { display: none; }
.bizv-cards, .bizv-sheet { animation: bizv-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes bizv-in { from { opacity: .45; transform: translateY(6px); } }
.bizv-sheet { margin-top: 28px; }
.bizv-sheet .sheet-wrap { border-radius: 20px; }
.bizs__logo { position: relative; top: -1px; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 1px solid var(--border-light); border-radius: 6px; background: #fff; color: var(--muted-light); vertical-align: middle; overflow: hidden; }
.bizs__logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.bizs__none { font-size: 12.5px; color: var(--muted-light); }
/* The listing drawer on My Businesses (the owner, 2026-10-30: "10x this … way more visually appealing and functional").
   A navy header in the site header's colours with the category's icon as a faint watermark, then white cards on the
   page grey: actions, the last 30 days, listing strength, contact details, history. Built by bizDetail() in
   src/views/account.js. Nothing waits on an animation to be seen: entrances start at .4 opacity. */
.bzd { --c-live: #4ADE80; --c-review: #7CCDEF; --c-wait: #FCD34D; --c-failed: #FCA5A5; --c-idle: #CBD5E1; min-height: 100%; background: var(--bg); }
.bzd__hero { position: relative; isolation: isolate; overflow: hidden; padding: 16px 20px 60px; color: #fff; background: radial-gradient(110% 120% at 100% 0%, rgba(20, 160, 222, .5), transparent 56%), radial-gradient(90% 100% at 0% 115%, rgba(20, 160, 222, 0.336), transparent 60%), linear-gradient(165deg, var(--dark-soft), var(--dark) 70%); }
.bzd__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px); -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%); mask-image: linear-gradient(180deg, #000 10%, transparent 92%); }
.bzd__mark { position: absolute; z-index: -1; right: -38px; bottom: -40px; color: rgba(124, 205, 239, .1); transform: rotate(-8deg); }
.bzd__mark svg { display: block; stroke-width: 1.1; }
.bzd__bar { display: flex; align-items: center; justify-content: space-between; }
.bzd__kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7CCDEF; }
.bzd__close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .15s ease, transform .2s ease; }
.bzd__close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }
.bzd__close:focus-visible { outline: 2px solid #7CCDEF; outline-offset: 2px; }
.bzd__id { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.bzd__logo { position: relative; flex: none; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 20px; background: #fff; color: var(--muted-light); overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 16px 30px -14px rgba(0, 0, 0, .7); }
.bzd__logo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 8px; }
.bzd__who { min-width: 0; }
.bzd__name { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: #fff; overflow-wrap: anywhere; }
.bzd__meta { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.bzd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bzd-chip { --c: var(--c-idle); display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.bzd-chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--c); }
.bzd-chip--live { --c: var(--c-live); } .bzd-chip--review { --c: var(--c-review); } .bzd-chip--wait { --c: var(--c-wait); } .bzd-chip--failed { --c: var(--c-failed); }
.bzd-chip--live:first-child::before { animation: bzd-pulse 2.4s ease-out infinite; }
a.bzd-chip { color: #fff; transition: background .15s ease; }
a.bzd-chip:hover { background: rgba(255, 255, 255, .16); }
a.bzd-chip svg { margin: 0 -4px 0 -3px; opacity: .65; }
@keyframes bzd-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 75%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }

.bzd__body { position: relative; display: grid; gap: 12px; margin-top: -40px; padding: 0 14px 28px; }
.bzd__body > * { animation: bzd-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.bzd__body > :nth-child(2) { animation-delay: .06s; } .bzd__body > :nth-child(3) { animation-delay: .12s; } .bzd__body > :nth-child(4) { animation-delay: .18s; } .bzd__body > :nth-child(n+5) { animation-delay: .24s; }
@keyframes bzd-in { from { opacity: .4; transform: translateY(10px); } }
.bzd__card { min-width: 0; padding: 16px 16px 18px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.bzd__h { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.bzd__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bzd__more { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.bzd__more svg { transition: transform .2s ease; }
.bzd__more:hover svg { transform: translateX(2px); }
.bzd__hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bzd__hint svg { flex: none; margin-top: 2px; color: var(--muted-light); }
.bzd__foot { padding-top: 4px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }

/* Everything an owner does with a live listing, as one tap each. */
.bzd-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px; border-color: transparent; box-shadow: 0 24px 44px -26px rgba(8, 16, 40, .55); }
.bzd-act { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 11px; border: 0; border-radius: 14px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--fg); text-align: center; cursor: pointer; transition: background .15s ease; }
.bzd-act:hover { background: var(--bg); }
.bzd-act:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.bzd-act__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #EFF8FD; color: var(--primary); transition: transform .2s ease; }
.bzd-act:hover .bzd-act__ic { transform: translateY(-2px); }
.bzd-act--main .bzd-act__ic { background: var(--primary); color: #fff; box-shadow: 0 10px 18px -10px rgba(32, 58, 114, .9); }
/* A listing still on its way gets one big Edit, then its steps. */
.bzd-edit { display: flex; align-items: center; gap: 14px; border-color: transparent; color: var(--fg); box-shadow: 0 24px 44px -26px rgba(8, 16, 40, .55); transition: transform .2s ease; }
.bzd-edit .bzd-act__ic { flex: none; background: var(--primary); color: #fff; }
.bzd-edit__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bzd-edit__txt b { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.bzd-edit__txt small { font-size: 12.5px; color: var(--muted); }
.bzd-edit > svg { flex: none; color: var(--primary); transition: transform .2s ease; }
.bzd-edit:hover > svg { transform: translateX(3px); }
.bzd-track .trk { margin-top: 14px; }

/* The last 30 days. */
.bzd-nums { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.bzd-num { min-width: 0; padding: 12px 12px 10px; border-radius: 14px; background: var(--bg); overflow: hidden; }
.bzd-num__label { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bzd-num__n { display: block; margin-top: 5px; font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.bzd-num--views { background: linear-gradient(180deg, #E6F4FB, #F4FAFD); }
.bzd-num--views .bzd-num__n { color: var(--primary); }
.bzd-num__line { display: block; width: 100%; height: 26px; margin-top: 8px; }
.bzd-num__line path { fill: rgba(32, 58, 114, .12); }
.bzd-num__line polyline { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* Listing strength: a ring, a word for it, and each missing piece with an Add that opens its box on the edit page. */
.bzd-str__top { display: flex; align-items: center; gap: 14px; }
.bzd-ring { position: relative; flex: none; display: grid; place-items: center; width: 68px; height: 68px; }
.bzd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bzd-ring circle { fill: none; stroke-width: 7; }
.bzd-ring__bg { stroke: #E8EEF8; }
.bzd-ring__fg { stroke: var(--primary); stroke-linecap: round; }
.bzd-ring.is-full .bzd-ring__fg { stroke: #16A34A; }
.bzd-ring b { position: relative; font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--fg); }
.bzd-ring b small { margin-left: 1px; font-size: 11px; color: var(--muted); }
.bzd-str__grade { margin-top: 4px; font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--fg); }
.bzd-str__sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.bzd-checks { list-style: none; margin: 14px 0 0; padding: 2px 0 0; border-top: 1px solid var(--border-light); }
.bzd-checks li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.bzd-checks li + li { border-top: 1px dashed var(--border); }
.bzd-checks__dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px dashed #CBD5E1; border-radius: 999px; color: var(--muted); }
.bzd-checks li.is-ok .bzd-checks__dot { border: 0; background: #DCFCE7; color: #15803D; }
.bzd-checks__dot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bzd-checks__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.bzd-checks__txt b { font-size: 14px; font-weight: 700; color: var(--fg); }
.bzd-checks__txt small { font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.bzd-checks li.is-ok .bzd-checks__txt b { font-weight: 600; color: #475569; }
.bzd-checks__add { flex: none; padding: 7px 15px; border-radius: 999px; background: #EFF8FD; font-size: 12.5px; font-weight: 800; color: var(--primary); transition: background .15s ease, color .15s ease; }
.bzd-checks__add:hover { background: var(--primary); color: #fff; }

/* Contact details, each with Copy (phone, email) or Open (website, map). */
.bzd-contact { list-style: none; margin: 8px 0 0; padding: 0; }
.bzd-contact li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.bzd-contact li + li { border-top: 1px solid var(--border-light); }
.bzd-contact__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bg); color: var(--primary); }
.bzd-contact__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.bzd-contact__txt small { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.bzd-contact__txt span { font-size: 14.5px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.bzd-contact__act { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.bzd-contact__act:hover { border-color: var(--primary); color: var(--primary); }
.bzd-contact__act.is-copied { border-color: #86EFAC; background: #DCFCE7; color: #15803D; }

/* A live listing's Submitted → Live steps, folded away. */
.bzd-hist summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.bzd-hist summary::-webkit-details-marker { display: none; }
.bzd-hist__when { flex: 1; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bzd-hist summary > svg { flex: none; color: var(--muted-light); transition: transform .2s ease; }
.bzd-hist[open] summary > svg { transform: rotate(180deg); }
.bzd-hist .trk { margin-top: 16px; }

@media (min-width: 640px) {
  .bzd__hero { padding: 22px 28px 64px; }
  .bzd__body { padding: 0 22px 32px; gap: 14px; }
  .bzd__card { padding: 18px 20px 20px; }
  .bzd__logo { width: 88px; height: 88px; border-radius: 22px; }
  .bzd__name { font-size: 30px; }
  .bzd-acts { padding: 10px; }
}
.bizv-add__short { display: none; }
@media (max-width: 639px) {   /* phones: Compact only, no switch, whatever was picked on a computer; a small "+ Add" sits
                                 top right on the "My Account" row (the owner, 2026-10-30) */
  .bizv { position: relative; }
  .bizv-acts { display: contents; }
  .bizv-switch, .bizv[data-bizv] .bizv-cards { display: none; }
  .bizv[data-bizv] .bizv-sheet { display: block; margin-top: 18px; }
  .account__head > .bizv-acts > .bizv-add { position: absolute; top: 10.5px; right: 16px; width: auto; height: 36px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
  .bizv-add__full { display: none; }
  .bizv-add__short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .bizv-switch::before { transition: none; } .bizv-cards, .bizv-sheet, .bzd__body > *, .bzd-chip::before { animation: none !important; } }
.form-card { border-radius: 24px; padding: 28px; margin-top: 28px; }
@media (min-width: 768px) { .form-card { padding: 36px; } }
.form-card .form { gap: 22px; }
.status-line { margin-top: 10px; font-size: 14px; color: var(--muted); }
.status-line strong { color: var(--accent); letter-spacing: .04em; }

/* ---------- Listing status tracker (My Businesses, the listing editor) ----------
   Four steps on one rail. On load each dot pops in turn, the rail fills into it and its check draws, so the eye travels
   to where the listing is now; the current step keeps a slow halo. Under 480px of width it turns into a vertical list. */
.trk { --on: var(--accent); --amber: #D97706; --red: #DC2626; --dot: 26px; --gap: 230ms; --t0: calc(var(--row, 0) * 90ms + 120ms); container-type: inline-size; }
.trk__steps { --dir: 90deg; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trk__step { --at: calc(var(--t0) + var(--s) * var(--gap)); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.trk__dot { position: relative; z-index: 1; flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--border); color: var(--muted-light); font: 600 11px/1 var(--font-mono); transition: transform .25s ease; animation: trk-pop .44s cubic-bezier(.34, 1.56, .64, 1) var(--at) backwards; }
.trk__dot i { font-style: normal; }
.trk__dot svg { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; animation: trk-draw .36s ease-out calc(var(--at) + 170ms) backwards; }
.trk__label { margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.trk__time { margin-top: 3px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .01em; color: var(--muted); white-space: nowrap; }
.trk__time--hint { white-space: normal; color: var(--muted-light); }
.trk__time[title] { cursor: help; }
.trk__seg { position: absolute; top: calc(var(--dot) / 2 - 1px); left: calc(-50% + var(--dot) / 2 + 5px); width: calc(100% - var(--dot) - 10px); height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.trk__seg::after { content: ''; position: absolute; inset: 0; background: var(--seg, var(--on)); transform: scaleX(0); transform-origin: left; }
.trk__step:not(.is-todo) .trk__seg::after { transform: none; animation: trk-fill .3s cubic-bezier(.65, 0, .35, 1) calc(var(--at) - 200ms) backwards; }

.trk__step.is-done .trk__dot { background: var(--on); border-color: var(--on); color: #fff; }
.trk__step.is-live .trk__dot { background: var(--success); border-color: var(--success); color: #fff; box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }
.trk__step.is-live .trk__seg { --seg: linear-gradient(var(--dir), var(--on), var(--success)); }
.trk__step.is-live .trk__label { color: #15803D; }
.trk__step.is-current .trk__dot, .trk__step.is-wait .trk__dot { --c: var(--on); --halo: rgba(32, 58, 114, .3); border: 2px solid var(--c); }
.trk__step.is-wait .trk__dot { --c: var(--amber); --halo: rgba(217, 119, 6, .32); }
.trk__step.is-current .trk__dot i, .trk__step.is-wait .trk__dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); font-size: 0; }
.trk__step.is-current .trk__dot::after, .trk__step.is-wait .trk__dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; animation: trk-halo 2.4s ease-out calc(var(--at) + .5s) infinite; }
.trk__step.is-current .trk__time--hint { color: var(--on); }
.trk__step.is-current .trk__seg { --seg: linear-gradient(var(--dir), var(--on), rgba(32, 58, 114, .45)); }
.trk__step.is-wait .trk__label, .trk__step.is-wait .trk__time--hint { color: #B45309; }
.trk__step.is-wait .trk__seg { --seg: linear-gradient(var(--dir), var(--on), var(--amber)); }
.trk__step.is-failed .trk__dot { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.trk__step.is-failed .trk__label { color: #B91C1C; }
.trk__step.is-failed .trk__seg { --seg: linear-gradient(var(--dir), var(--on), var(--red)); }
.trk__step.is-skip .trk__dot { border-style: dashed; }
.trk__step.is-skip .trk__label, .trk__step.is-todo .trk__label { color: var(--muted-light); font-weight: 500; }
.trk--failed .trk__step.is-todo { opacity: .55; }
.trk__step:is(.is-done, .is-live, .is-failed):hover .trk__dot { transform: scale(1.08); }

.trk__note { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 12px 10px 14px; border: 1px solid; border-radius: 12px; font-size: 13.5px; line-height: 1.5; animation: trk-note .5s ease-out calc(var(--t0) + .75s) backwards; }
.trk__note + .trk__note { margin-top: 8px; }
.trk__note > svg { flex: none; }
.trk__note > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.trk__note b { font-weight: 700; }
.trk__note--wait { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.trk__note--failed { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.trk__note--edits { background: var(--bg); border-color: var(--border); color: var(--muted); }
.trk__note--edits b { color: var(--fg); }
.trk__resend { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 14px; border: 1px solid #FCD34D; border-radius: 999px; background: #fff; color: #92400E; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background .2s ease, border-color .2s ease; }
.trk__resend svg { transition: transform .2s ease; }
.trk__resend:hover { background: #FEF3C7; border-color: #F59E0B; }
.trk__resend:hover svg { transform: translateX(2px); }
.trk__note > .trk__pulse { position: relative; flex: none; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: var(--highlight); }
.trk__pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--highlight); animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; }

@container (max-width: 480px) {
  .trk__steps { --dir: 180deg; grid-template-columns: minmax(0, 1fr); }
  .trk__step { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding-bottom: 22px; text-align: left; }
  .trk__step:last-child { padding-bottom: 0; }
  .trk__label, .trk__time { margin: 0; }
  .trk__time { text-align: right; }
  .trk__seg { top: -18px; left: calc(var(--dot) / 2 - 1px); width: 2px; height: 14px; }
  .trk__seg::after { transform: scaleY(0); transform-origin: top; }
  .trk__step:not(.is-todo) .trk__seg::after { animation-name: trk-fill-y; }
  .trk__note { flex-wrap: wrap; }
  .trk__note form { flex-basis: 100%; padding-left: 25px; }
}

@keyframes trk-pop { from { transform: scale(.4); } }
@keyframes trk-draw { from { stroke-dashoffset: 24; } }
@keyframes trk-fill { from { transform: scaleX(0); } }
@keyframes trk-fill-y { from { transform: scaleY(0); } }
@keyframes trk-halo { 0% { box-shadow: 0 0 0 0 var(--halo); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes trk-note { from { opacity: .35; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .trk *, .trk *::after { animation: none !important; } }

.trk-card { margin-top: 20px; padding: 22px 24px 24px; border-radius: 20px; }
.trk-card__kicker { margin-bottom: 18px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }

/* ---------- Simple page (legal, notices) ---------- */
.notice { max-width: 560px; margin: 0 auto; padding: 80px 20px 120px; text-align: center; }
.notice__icon { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto; display: grid; place-items: center; background: #ECFCCB; color: #4D7C0F; }
.notice__icon--info { background: #F1F5F9; color: var(--primary); }
.notice__icon--warn { background: #FEF2F2; color: #DC2626; }
.notice__title { margin-top: 24px; font-size: 30px; letter-spacing: -.03em; }
.notice__text { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.notice__actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Utilities ---------- */
.mt-4 { margin-top: 16px !important; } .mt-6 { margin-top: 24px !important; } .mt-8 { margin-top: 32px !important; }
.result-count { font-size: 14px; color: var(--muted); }
.result-count a { color: var(--primary); font-weight: 600; }
.grad-text { background: linear-gradient(90deg, #14A0DE, #0E88BF, #14A0DE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagination { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.pagination a, .pagination .is-current, .pagination__gap { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 700; }
.pagination a { background: #fff; border: 1px solid var(--border); color: var(--fg); }
.pagination a:hover { border-color: #CBD5E1; }
.pagination .is-current { background: var(--dark); color: #fff; }
.pagination__gap { color: var(--muted-light); }
.pagination__step { gap: 6px; }

/* ---------- Businesses page ---------- */
.hero-counters { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13px; font-weight: 600; color: #94A3B8; }
.hero-counters strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.biz-search-wrap { background: var(--bg); padding: 0 20px; }
@media (min-width: 1024px) { .biz-search-wrap { padding: 0 32px; } }
.biz-search { margin-top: -34px; position: relative; z-index: 2; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 10px; display: grid; gap: 8px; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .3); }
@media (min-width: 900px) { .biz-search { grid-template-columns: 1.2fr 1fr 1fr auto; align-items: center; } }
.biz-search__field { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 52px; border-radius: 14px; background: var(--bg); color: var(--muted-light); }
.biz-search__field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.biz-search__field input::placeholder { color: #94A3B8; font-weight: 500; }
.biz-search__select { min-height: 52px; border-radius: 14px; border: 0; background: var(--bg); padding: 0 40px 0 14px; font-size: 14px; font-weight: 600; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; outline: 0; }
.biz-search .btn { min-height: 52px; border-radius: 14px; }
.cat-blocks { display: grid; gap: 56px; }
.cat-block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cat-block__title { margin-top: 6px; font-size: 26px; letter-spacing: -.03em; }
.cat-block__count { margin-top: 4px; font-size: 14px; color: var(--muted); }

/* ---------- Listing page ---------- */
.listing-head { position: relative; isolation: isolate; background: var(--dark); color: #fff; padding: 28px 20px 150px; }
.listing-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 0%, rgba(20, 160, 222, 0.24), transparent 70%); }
@media (min-width: 1024px) { .listing-head { padding: 32px 32px 150px; } }
.crumbs--light, .crumbs--light a { color: #94A3B8; }
.crumbs--light a:hover { color: #fff; }
.crumbs--light span { color: #fff; }
.crumbs--light svg { color: #475569; }
.listing-body { padding: 0 20px 56px; }
@media (min-width: 1024px) { .listing-body { padding: 0 32px 64px; } }
.listing-top { position: relative; z-index: 1; margin-top: -122px; padding: 28px; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .35); }
@media (min-width: 768px) { .listing-top { padding: 32px 36px; } }
/* The listing card's head (rebuilt 2026-10-29, the owner: at some widths the buttons covered the business name and "No
   reviews yet" stacked oddly). The buttons never sit beside the name any more: they get their own row, under the name
   on wide cards and across the card below that. Every step is a container query on the card's own width, so the layout
   follows the space the card really has (a phone, a tablet, a laptop with the side column, a big monitor), not a guess
   from the window. Without container queries a browser gets the phone layout, which works at any width.
     under 480px   logo, then the name, then the buttons in a two-column grid
     480–759px     logo beside the name; the buttons across the card underneath
     760px and up  a big logo down the left; the name, the line under it and the buttons beside it */
.listing-top { container: listing-top / inline-size; }
.listing-top__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "body" "acts"; gap: 18px; }
.listing-top__logo { grid-area: logo; flex: none; width: 88px; height: 88px; border-radius: 20px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .3); }
.listing-top__logo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.listing-top__logo--letter { background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 38px; }
.listing-top__body { grid-area: body; min-width: 0; }
.listing-top__tag { max-width: 100%; }
.listing-top__tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-top__title { margin-top: 12px; font-size: clamp(26px, calc(8px + 5.2cqi), 44px); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; overflow-wrap: anywhere; }
.listing-top__title--l { font-size: clamp(23px, calc(7px + 3.9cqi), 36px); line-height: 1.1; letter-spacing: -.03em; }
.listing-top__title--xl { font-size: clamp(21px, calc(7px + 3cqi), 30px); line-height: 1.14; letter-spacing: -.025em; }
.listing-top__meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.listing-top__place, .listing-top__rating { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; color: var(--muted); transition: color .15s ease; }
.listing-top__place svg { flex: none; color: var(--primary); }
a.listing-top__place:hover, .listing-top__rating:hover { color: var(--fg); }
.listing-top__rating .stars { flex: none; }
.listing-top__rating strong { color: var(--fg); }
.listing-top__actions { grid-area: acts; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.listing-top__actions > .btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
.listing-top__actions > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }   /* an odd count: the first (the website) spans the row */
@container listing-top (min-width: 480px) {
  .listing-top__main { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo body" "acts acts"; column-gap: 22px; row-gap: 22px; align-items: center; }
  .listing-top__logo { width: 104px; height: 104px; border-radius: 22px; }
  .listing-top__logo--letter { font-size: 42px; }
  .listing-top__tag { max-width: calc(100% - 84px); }   /* clear of the Share and Report buttons in the corner */
}
@container listing-top (min-width: 640px) and (max-width: 759px) {
  .listing-top__actions { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .listing-top__actions > :first-child:nth-last-child(odd) { grid-column: auto; }
}
@container listing-top (min-width: 760px) {
  .listing-top__main { grid-template-areas: "logo body" "logo acts"; grid-template-rows: auto 1fr; column-gap: 30px; row-gap: 20px; align-items: start; }
  .listing-top__logo { width: 140px; height: 140px; border-radius: 28px; }
  .listing-top__logo img { padding: 14px; }
  .listing-top__logo--letter { font-size: 52px; }
  .listing-top__body { padding-top: 2px; }
  .listing-top__actions { display: flex; flex-wrap: wrap; align-content: flex-start; }
  .listing-top__actions > .btn { padding-left: 18px; padding-right: 18px; }
}
/* The four facts: one per row on a narrow card, two across, then four across where a long website still fits. */
.facts { margin-top: 24px; padding-top: 6px; border-top: 1px solid var(--border-light); display: grid; grid-template-columns: 1fr; gap: 0; }
.fact { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 0; border-top: 1px solid var(--border-light); }
.fact:first-child { border-top: 0; }
@container listing-top (min-width: 520px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 14px 0; padding-top: 22px; }
  .fact { padding: 4px 16px; border-top: 0; border-left: 1px solid var(--border-light); }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@container listing-top (min-width: 1040px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 4px 14px; gap: 10px; }
  .fact:nth-child(3) { border-left: 1px solid var(--border-light); padding-left: 14px; }
}
.fact__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #F1F5F9; color: var(--primary); display: grid; place-items: center; }
.fact__text { min-width: 0; }
.fact__label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.fact__value { display: block; font-weight: 700; font-size: 14px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; margin-top: 2px; }
a.fact:hover .fact__value { color: var(--primary); }
.fact__value--muted { color: var(--muted-light); font-weight: 500; }
.btn-dark { background: var(--dark); color: #fff !important; }
.btn-dark:hover { background: #1E293B; }
.review-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.review-score { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 16px; padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--muted); }
.review-score strong { font-family: var(--font-display); font-size: 22px; color: var(--fg); line-height: 1; }
.reviews-empty { margin-top: 22px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); text-align: left; }
.icon-sq--amber { background: #FEF3C7; color: #D97706; }
.review-form { margin-top: 28px; background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 24px; }
@media (min-width: 768px) { .review-form { padding: 28px 32px; } }
.review-form .kicker--plain { font-size: 11px; letter-spacing: .16em; }
/* Posting a review (2026-10-30): with Google in one press (the name typed here becomes their account name), the email
   route folded under it, or "Posting as" for someone signed in. */
.rv-go { display: grid; justify-items: start; gap: 10px; padding-top: 4px; }
.rv-go .gbtn { width: auto; min-width: 280px; box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .55); }
.rv-go__note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.rv-go__note svg { flex: none; color: #16A34A; }
.rv-email { padding-top: 14px; border-top: 1px dashed var(--border); }
.rv-email > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--primary); }
.rv-email > summary::-webkit-details-marker { display: none; }
.rv-email > summary svg { transition: transform .2s ease; }
.rv-email[open] > summary svg { transform: rotate(180deg); }
.rv-email[open] > summary { color: var(--muted); }
.rv-email > .form-actions, .rv-email > .turnstile { margin-top: 16px; }
.rv-post { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.rv-post__who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: var(--muted); }
.rv-post__who b { color: var(--fg); }
.rv-post__av { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 800; overflow: hidden; }
.rv-post__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) { .rv-go { justify-items: stretch; } .rv-go .gbtn { width: 100%; min-width: 0; } .rv-post .btn { width: 100%; } }
.review-form .listing-card__title { font-size: 22px; margin-top: 8px; }
.review-form .input { background: #fff; }
.counter { display: block; text-align: right; font-size: 12px; color: var(--muted-light); margin-top: 6px; }
.listing-card--ask { position: relative; overflow: hidden; background: linear-gradient(145deg, #0B1633, #112046 60%, #1A3263); color: #fff; border-color: rgba(255, 255, 255, .1); }
.listing-card--ask::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -120px; border-radius: 999px; background: radial-gradient(circle, rgba(20, 160, 222, 0.36), transparent 65%); }
.listing-card--ask > * { position: relative; }
.listing-card--ask .lead { color: #94A3B8; }
.biz__go { flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); display: grid; place-items: center; color: #94A3B8; transition: color .3s ease, border-color .3s ease, background-color .3s ease; }
a.card:hover .biz__go { color: #fff; border-color: var(--primary); background: var(--primary); }
.listing-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .listing-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; } }
.listing-main { display: grid; gap: 24px; min-width: 0; }
.listing-aside { display: grid; gap: 20px; }
@media (min-width: 1024px) { .listing-aside { position: sticky; top: 96px; } }
.listing-card { padding: 28px; border-radius: 24px; }
@media (min-width: 768px) { .listing-card { padding: 32px; } }
.listing-card__title { margin-top: 12px; font-size: 24px; letter-spacing: -.03em; }
.socials { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-light { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--fg); background: #fff; }
.chip-light:hover { border-color: #CBD5E1; }
.stars { display: inline-flex; gap: 2px; color: #CBD5E1; }
.stars .star.is-on { color: var(--highlight); fill: var(--highlight); }
.review-summary { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.review-summary strong { font-size: 18px; color: var(--fg); }
.reviews { margin-top: 20px; display: grid; gap: 16px; }
.review { border-top: 1px solid var(--border-light); padding-top: 20px; }
.review__head { display: flex; align-items: center; gap: 12px; }
.review__head .stars { margin-left: auto; }
.review__avatar { width: 40px; height: 40px; border-radius: 12px; background: #F1F5F9; color: var(--primary); display: grid; place-items: center; font-weight: 800; }
.review__name { font-weight: 700; font-size: 14px; }
.review__date { font-size: 12px; color: var(--muted-light); }
.review__title { margin-top: 12px; font-size: 16px; }
.review__body { margin-top: 8px; font-size: 14px; line-height: 1.7; color: #334155; white-space: pre-line; }
.reviews-empty { margin-top: 18px; padding: 28px; border: 1px dashed var(--border); border-radius: 16px; text-align: center; }
.reviews-empty h3 { font-size: 17px; }
.reviews-empty p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.star-pick { display: inline-flex; gap: 4px; }
.star-pick button { color: #CBD5E1; padding: 2px; transition: transform .15s ease, color .15s ease; }
.star-pick button.is-on { color: var(--highlight); }
.star-pick button.is-on svg { fill: var(--highlight); }
.star-pick button:hover { transform: scale(1.15); }
.contact-list { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 6px; }
.contact-list a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.45; word-break: break-word; transition: background-color .2s ease; }
.contact-list a:hover { background: var(--bg); }
.contact-list__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #F1F5F9; color: var(--primary); display: grid; place-items: center; }
.contact-list__label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 2px; }

/* ---------- Prose ---------- */
.prose { margin-top: 18px; font-size: 16px; line-height: 1.8; color: #334155; }
.prose p + p { margin-top: 16px; }
.prose a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose h2, .prose h3, .prose h4 { color: var(--fg); margin-top: 36px; margin-bottom: 12px; }
.prose h2 { font-size: 26px; letter-spacing: -.03em; }
.prose h3 { font-size: 20px; }
.prose h4 { font-size: 17px; }
.prose ul, .prose ol { margin: 14px 0 14px 22px; padding: 0; }
.prose li + li { margin-top: 6px; }
.prose blockquote { margin: 20px 0; padding: 14px 20px; border-left: 3px solid var(--primary); background: var(--bg); border-radius: 0 12px 12px 0; font-style: italic; }
.prose img { border-radius: 16px; margin: 20px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg); font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: 13px; background: var(--bg); padding: 2px 6px; border-radius: 6px; }
.prose pre { background: var(--dark); color: #E2E8F0; padding: 18px 20px; border-radius: 14px; overflow: auto; font-size: 13px; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.prose strong { color: var(--fg); }
.prose--post { font-size: 17px; }
.prose--post > :first-child { margin-top: 0; }

/* ---------- Blog post ---------- */
.post-head { background: var(--bg); padding: 48px 20px 36px; }
@media (min-width: 1024px) { .post-head { padding: 56px 32px 44px; } }
.post-head__inner { max-width: 860px; margin: 0 auto; }
.post-head__title { font-size: 34px; letter-spacing: -.035em; line-height: 1.05; }
@media (min-width: 768px) { .post-head__title { font-size: 50px; } }
.post-head__lead { margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.post-head__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; font-weight: 600; color: var(--muted); }
.post-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-cover { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1024px) { .post-cover { padding: 0 32px; } }
.post-cover > img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 28px; }
.post-cover--grad { padding-top: 0; }
.post-cover--grad .post-cover__mark { display: grid; place-items: center; height: 260px; border-radius: 28px; background: linear-gradient(120deg, #0B1633, #1A3263 50%, #203A72); }
.post-cover__mark img { opacity: .85; }
.post-layout { display: grid; gap: 40px; padding: 40px 20px 96px; align-items: start; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding: 48px 32px 120px; } }
.post-body { min-width: 0; max-width: 760px; }
.post-aside { display: grid; gap: 20px; }
@media (min-width: 1024px) { .post-aside { position: sticky; top: 96px; } }
.toc ol { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #334155; display: grid; gap: 8px; }
.post-aside__cta h3 { margin-top: 10px; font-size: 18px; }
.post-aside__cta p + p, .post-aside__cta p:not(.row-card__label) { margin-top: 8px; font-size: 14px; color: var(--muted); }
.post-aside__cta .btn { margin-top: 16px; }
.post-aside__more ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 14px; }
.post-aside__more a { display: grid; gap: 4px; }
.post-aside__title { font-weight: 700; font-size: 14px; line-height: 1.4; }
.post-aside__more a:hover .post-aside__title { color: var(--primary); }
.post-cta { position: relative; overflow: hidden; margin-top: 48px; background: var(--dark); color: #fff; border-radius: 28px; padding: 36px; }
.post-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 90% 50%, rgba(20, 160, 222, 0.32), transparent 70%); pointer-events: none; }
.post-cta > * { position: relative; }
.post-cta h2 { margin-top: 12px; font-size: 28px; letter-spacing: -.03em; }
.post-cta p { margin-top: 12px; color: #94A3B8; line-height: 1.65; max-width: 520px; }
/* The button sits on the right, level with the middle of the words; on phones it goes under them with some air. */
.post-cta { display: grid; gap: 24px; align-items: center; }
.post-cta__btn { justify-self: start; white-space: nowrap; }
@media (min-width: 768px) { .post-cta { grid-template-columns: minmax(0, 1fr) auto; gap: 36px; padding: 40px 44px; } .post-cta__btn { justify-self: end; } }

/* ---------- About / content pages ---------- */
/* About page, laid out like the reference: mission with stat tiles, a leadership card, lifting cards, a gradient quote. */
.kicker--violet { color: var(--accent); }
.about-h2 { margin-top: 12px; font-size: 32px; line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
@media (min-width: 768px) { .about-h2 { font-size: 46px; } }
.about-lead { margin-top: 20px; font-size: 17px; line-height: 1.65; color: #475569; }
.about-head { max-width: 768px; margin: 0 auto 56px; text-align: center; }
.about-copy { margin-top: 28px; font-size: 16px; line-height: 2; color: #475569; }
.about-copy p + p { margin-top: 20px; }
.about-copy--offset { margin-top: 0; }
.about-mission { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 1024px) { .about-mission { grid-template-columns: 1.15fr 1fr; } }
.about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 399px) { .about-stats { gap: 12px; } .about-stat { padding: 24px 12px; } }   /* "1,709+" fits a 320px phone */
.about-stat { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 28px; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.about-stat__n { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; background: linear-gradient(90deg, #203A72, #203A72); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 768px) { .about-stat__n { font-size: 36px; } }
.about-stat__l { display: block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.about-narrow { max-width: 1152px; }
.about-grid-3 { display: grid; gap: 24px; }
@media (min-width: 640px) { .about-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.about-grid-2 { display: grid; gap: 24px; }
@media (min-width: 768px) { .about-grid-2 { grid-template-columns: 1fr 1fr; } }
.about-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 28px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.about-card:hover { transform: translateY(-4px); border-color: #CBD5E1; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.about-card--row { display: flex; gap: 20px; align-items: flex-start; }
.about-card--row:hover { border-color: #CBD5E1; }
.about-card__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #F1F5F9; color: var(--primary); box-shadow: inset 0 0 0 1px #E2E8F0; }
.about-card__title { margin-top: 24px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; transition: color .3s ease; }
.about-card--row .about-card__title { margin-top: 0; }
.about-card:hover .about-card__title { color: var(--primary); }
.about-card--row:hover .about-card__title { color: var(--accent); }
.about-card__text { margin-top: 12px; font-size: 15px; line-height: 28px; color: #475569; }
.about-card--row .about-card__text { margin-top: 8px; }
.about-story { display: grid; gap: 48px; }
@media (min-width: 1024px) { .about-story { grid-template-columns: 1fr 1.1fr; } .about-copy--offset { padding-top: 40px; } }
.about-quote { margin-top: 32px; border-radius: 28px; background: linear-gradient(135deg, #203A72, #203A72); padding: 32px; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.5; color: #fff; box-shadow: 0 20px 25px -5px rgba(14, 136, 191, .2), 0 8px 10px -6px rgba(14, 136, 191, .2); }
.js [data-reveal][data-delay="4"] { transition-delay: .4s; }
.js [data-reveal][data-delay="5"] { transition-delay: .5s; }
.about-split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .about-split { grid-template-columns: 1fr 1.3fr; gap: 72px; } }
.about-text { font-size: 16px; line-height: 1.8; color: #334155; }
.about-text p + p { margin-top: 16px; }
.feature { padding: 28px; }
.feature__title { margin-top: 20px; font-size: 18px; }
.feature__text { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.leader { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 32px; box-shadow: 0 20px 25px -5px rgba(226, 232, 240, .5), 0 8px 10px -6px rgba(226, 232, 240, .5); display: grid; }
@media (min-width: 1024px) { .leader { grid-template-columns: 300px 1fr; } }
.leader__side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; text-align: center; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #F1F5F9, #fff 50%, #F1F5F9); }
@media (min-width: 1024px) { .leader__side { border-bottom: 0; border-right: 1px solid var(--border); } }
.leader__avatar { width: 112px; height: 112px; border-radius: 28px; background: linear-gradient(135deg, #203A72, #203A72); display: grid; place-items: center; box-shadow: 0 10px 15px -3px rgba(14, 136, 191, .2), 0 4px 6px -4px rgba(14, 136, 191, .2); }
.leader__name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.leader__role { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--primary); }
.leader__body { padding: 28px; }
@media (min-width: 768px) { .leader__body { padding: 40px; } }
.leader__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.leader__badges span { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800; color: #334155; background: #F1F5F9; }
.leader__bio { margin-top: 24px; font-size: 16px; line-height: 2; color: #475569; }
.leader__links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.leader__btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; background: var(--primary); color: #fff !important; padding: 14px 24px; font-size: 14px; font-weight: 800; box-shadow: 0 10px 15px -3px rgba(14, 136, 191, .2), 0 4px 6px -4px rgba(14, 136, 191, .2); transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.leader__btn:hover { transform: translateY(-2px); background: var(--primary-hover); }
.leader__btn--ghost { background: #fff; color: var(--fg) !important; border: 1px solid var(--border); box-shadow: none; }
.leader__btn--ghost:hover { background: #F1F5F9; border-color: #CBD5E1; color: var(--accent) !important; transform: none; }

/* About: the team, three portrait cards under the team card (2026-10-30). Name and role sit on the photo like a pass;
   the facts and social marks below. The middle card steps down on wide screens. */
.crew { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
.crew::before { content: ''; position: absolute; inset: 6% 8% 14%; background: radial-gradient(closest-side, rgba(20, 160, 222, 0.088), transparent); filter: blur(28px); pointer-events: none; }
.crew__slot { position: relative; display: flex; flex-direction: column; }
.crew-card { flex: 1; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-card); transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.crew-card:hover { translate: 0 -6px; border-color: #B4E2F6; box-shadow: 0 32px 50px -30px rgba(32, 58, 114, .45); }
.crew-card__photo { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--dark); }
.crew-card__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.crew-card:hover .crew-card__photo > img { scale: 1.05; }
.crew-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 40, .3) 0%, rgba(8, 16, 40, 0) 20%, rgba(8, 16, 40, 0) 48%, rgba(8, 16, 40, .88) 100%); pointer-events: none; }
.crew-card__num { position: absolute; z-index: 1; top: 16px; left: 16px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.2; }
.crew-card__mark { position: absolute; z-index: 1; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; background: var(--primary); display: grid; place-items: center; box-shadow: 0 8px 18px -6px rgba(32, 58, 114, .7); }
.crew-card__id { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.crew-card__role { display: inline-block; max-width: 100%; padding: 5px 10px; border-radius: 8px; background: var(--primary); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.45; text-transform: uppercase; }
.crew-card__name { margin-top: 10px; font-size: 30px; line-height: 1; letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 18px rgba(8, 16, 40, .45); }
.crew-card__body { display: flex; flex-direction: column; padding: 24px 24px 22px; }
.crew-card__label { margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.crew-card__facts { list-style: none; margin: 14px 0 22px; padding: 0; display: grid; gap: 12px; }
.crew-card__facts li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: #334155; }
.crew-card__facts li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); rotate: 45deg; box-shadow: 0 0 0 4px #DDF1FB; }
.crew-card__social { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--border); display: flex; gap: 10px; }
.crew-social { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: var(--fg); color: #fff; transition: background-color .2s ease, translate .2s ease; }
a.crew-social:hover { background: var(--primary); translate: 0 -2px; }
@media (min-width: 600px) and (max-width: 959px) {
  .crew-card { grid-template-rows: none; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
  .crew-card__photo { aspect-ratio: auto; min-height: 320px; }
  .crew-card__body { padding: 28px; }
}
@media (min-width: 960px) {
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }
  .crew-card__photo { aspect-ratio: 4 / 5; }
  .crew__slot:nth-child(2) { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { .crew-card, .crew-card__photo > img, .crew-social { transition: none; } .crew-card:hover { translate: none; } .crew-card:hover .crew-card__photo > img { scale: none; } }
.section-head--center { text-align: center; justify-content: center; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }
.section-head--center .kicker { justify-content: center; }

/* Contact */
.contact-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }
.contact-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; border-radius: 28px; padding: 32px; background: linear-gradient(120deg, #0B1633, #1A3263 55%, #203A72); color: #fff; }
.contact-art::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 40px 40px; }
.contact-art__mark { width: 72px; height: 72px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); display: grid; place-items: center; }
.contact-art__line { margin-top: 20px; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.contact-art__sub { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #CBD5E1; }
.contact-card { padding: 32px; border-radius: 28px; }
@media (min-width: 768px) { .contact-card { padding: 40px; } }
.contact-card__logo { width: auto; height: 64px; align-self: flex-start; }
.contact-rows { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 10px; }
.contact-rows > li > * { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border-light); font-size: 15px; font-weight: 700; line-height: 1.4; word-break: break-word; }
.contact-rows a:hover { border-color: #CBD5E1; }
.contact-rows__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--border); color: var(--primary); display: grid; place-items: center; }
.contact-aside { display: grid; gap: 20px; }
.contact-aside .card { padding: 26px; border-radius: 22px; }
.contact-aside__promo { position: relative; overflow: hidden; background: linear-gradient(135deg, #182E5C, #203A72 55%, #203A72 140%); color: #fff; border: 0; box-shadow: 0 30px 60px -30px rgba(24, 46, 92, .7); }
.contact-aside__promo h4 { font-size: 20px; color: #fff; }
.contact-aside__promo p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: #DDF1FB; }
.contact-aside__promo .btn { margin-top: 20px; }
.contact-list__static { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.contact-aside__box h4 { font-size: 16px; }
.contact-aside__box p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.contact-aside__box .faq__more, .contact-aside__box .tag { margin-top: 14px; }

/* Services */
.hero--page { padding-bottom: 80px; }
/* The Services hero: a shade darker, and on a desktop it fills the screen below the header with its content centred. */
.hero--page { background: #060C1E; }
.hero--page::before { opacity: .82; }
@media (min-width: 1024px) {
  .hero--page { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-top: 64px; padding-bottom: 72px; }
  .hero--page > .hero__badge { align-self: center; }
}
.hero__title--sm { font-size: clamp(2.4rem, 5.5vw, 4.6rem); }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.svc-grid { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }
/* The reference's service card: flat white, icon tile, title, text, a rule, green checks. */
.svc { padding: 24px; border-radius: 24px; border-color: rgba(24, 24, 27, .1); box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 18px 40px -20px rgba(24, 24, 27, .16); }
.svc__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #F1F5F9; color: var(--primary); box-shadow: inset 0 0 0 1px #E2E8F0; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.svc:hover .svc__icon { background: var(--primary); color: #fff; box-shadow: inset 0 0 0 1px var(--primary); }
.svc__title { margin-top: 20px; font-size: 18px; font-weight: 700; line-height: 1.375; }
.svc__text { margin-top: 12px; font-size: 14px; line-height: 24px; color: #475569; }
.svc__spacer { flex: 1; min-height: 20px; }
.svc__list { list-style: none; padding: 20px 0 0; border-top: 1px solid #F1F5F9; display: grid; gap: 10px; font-size: 14px; line-height: 20px; color: #334155; }
.svc__list li { display: flex; gap: 10px; align-items: flex-start; }
.svc__list svg { flex: none; margin-top: 2px; color: #16A34A; stroke-width: 2.5; }
.process { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 768px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.process__step { padding: 28px; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: transform .3s ease, border-color .3s ease; }
.process__step:hover { transform: translateY(-4px); border-color: rgba(20, 160, 222, .5); }
.process__num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--primary); color: #fff; font-family: var(--font-display); font-size: 15px; font-weight: 800; box-shadow: 0 10px 20px -8px rgba(32, 58, 114, .8); }
.process__title { margin-top: 20px; font-size: 18px; color: #fff; }
.process__text { margin-top: 8px; font-size: 14px; line-height: 1.65; color: #94A3B8; }
.pricing { margin-top: 36px; }
.seg--center { display: flex; justify-content: center; width: max-content; margin: 0 auto; max-width: 100%; }
.seg--wrap { flex-wrap: wrap; justify-content: center; }
.seg button { display: inline-flex; align-items: center; gap: 6px; }
.plans { display: grid; gap: 20px; margin-top: 32px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plans[hidden] { display: none; }
.plan { padding: 32px; border-radius: 26px; }
.plan--featured { background: var(--dark); color: #fff; border-color: rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px rgba(32, 58, 114, .6); }
.plan__badge { position: absolute; top: -13px; left: 24px; border-radius: 999px; padding: 6px 12px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--primary); color: #fff; box-shadow: 0 8px 16px -8px rgba(32, 58, 114, .8); }
.plan--featured { overflow: visible; }
.plan__name { font-size: 20px; }
.plan__price { margin-top: 14px; font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan__price span { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.plan--featured .plan__price span { color: #94A3B8; }
.plan__blurb { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); min-height: 44px; }
.plan--featured .plan__blurb { color: #94A3B8; }
.plan__list { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; font-size: 14px; font-weight: 600; flex: 1; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list svg { flex: none; margin-top: 1px; color: var(--success); }
.plan--featured .plan__list svg { color: #4ADE80; }
.plan--featured .btn-primary { box-shadow: none; }
.pricing__custom { margin-top: 24px; text-align: center; font-size: 14px; color: var(--muted); }
.pricing__custom a { color: var(--primary); font-weight: 700; }
.faq-single { max-width: 860px; }

/* FAQs page */
.faq-page .seg { margin-bottom: 36px; }
.faq-group__title { font-size: 28px; letter-spacing: -.03em; }
.faq-group__sub { margin-top: 6px; color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.faq-page.is-searching .faq-group[hidden] { display: block; margin-top: 40px; }
.faq-page .faq__list { max-width: 900px; }

/* Legal */
.legal { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .legal { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; } .legal__toc { position: sticky; top: 96px; } }
.legal__toc .card { padding: 22px; }
.legal__toc ol { margin: 12px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.5; display: grid; gap: 8px; }
.legal__toc a { color: #334155; font-weight: 600; }
.legal__toc a:hover { color: var(--primary); }
.legal__body { padding: 32px; border-radius: 24px; margin-top: 0; }
@media (min-width: 768px) { .legal__body { padding: 44px; } }
.legal__section { scroll-margin-top: 100px; }
.legal__section:first-child h2 { margin-top: 0; }
.legal__body h2 { font-size: 22px; }
.legal__body h3 { font-size: 16px; margin-top: 20px; }
.legal__body p, .legal__body li { font-size: 15px; }
/* The original site's legal furniture, in the site's blue: intro panel, item grids, info/warning callouts, numbered steps. */
.legal-intro { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); margin-bottom: 30px; }
.legal-intro > svg { flex: none; color: var(--primary); margin-top: 3px; }
.legal-intro p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--fg); }
.legal-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 20px; }
@media (min-width: 640px) { .legal-grid { grid-template-columns: 1fr 1fr; } }
.legal-grid__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: #334155; }
.legal-grid__item > svg { flex: none; color: var(--primary); }
.legal-callout { display: flex; gap: 14px; padding: 18px 22px; border-radius: 14px; margin: 20px 0; background: #EFF8FD; border: 1px solid #DDF1FB; }
.legal-callout > svg { flex: none; color: var(--primary); margin-top: 3px; }
.legal-callout > div { min-width: 0; }
.legal-callout p, .legal-callout li { font-size: 15px; }
.legal-callout ul { margin-bottom: 0; }
.legal-callout--warning { background: #FFFBEB; border-color: #FDE68A; }
.legal-callout--warning > svg { color: #D97706; }
.legal-steps { display: grid; gap: 12px; margin: 18px 0 22px; }
.legal-step { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.legal-step__num { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.legal-step h3 { margin: 2px 0 0; font-size: 16px; }
.legal-step p { margin-top: 4px; }

/* ---------- Admin ---------- */
.admin { max-width: 1280px; margin: 0 auto; padding: 40px 20px 96px; display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .admin { grid-template-columns: 220px minmax(0, 1fr); padding: 48px 32px 112px; gap: 32px; } .admin__nav { position: sticky; top: 96px; } }
.admin__nav { display: flex; flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 12px; }
.admin__nav .row-card__label { width: 100%; padding: 6px 10px 8px; }
.admin__nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #334155; }
.admin__nav a:hover { background: var(--bg); }
.admin__nav a.is-active { background: var(--dark); color: #fff; }
@media (min-width: 1024px) { .admin__nav { display: grid; } .admin__nav a { display: flex; } }
.admin__badge { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.admin__title { font-size: 28px; letter-spacing: -.03em; margin-bottom: 20px; }
.admin__tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .admin__tiles { grid-template-columns: repeat(4, 1fr); } }
.admin__tile { padding: 20px; border-radius: 18px; }
.admin__tile-n { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.admin__tile-l { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.admin__list { display: grid; gap: 12px; }
.admin__row { flex-direction: row; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 18px; }
.admin__row--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.admin__row-body { flex: 1; min-width: 0; }
.admin__row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.admin__row-meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.admin__row-meta a { color: var(--primary); font-weight: 600; }
.admin__row-desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #334155; }
.admin__article { margin-top: 10px; max-width: 760px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); font-size: 15px; }
.admin__article > :first-child { margin-top: 0; }
.admin__row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: none; }
.admin__reject summary { list-style: none; cursor: pointer; }
.admin__reject summary::-webkit-details-marker { display: none; }
.admin__reject form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.admin__reject .input { padding: 8px 12px; font-size: 13px; width: 260px; max-width: 100%; }
.admin__diff { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.admin__diff th, .admin__diff td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid var(--border-light); }
.admin__diff th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); border-top: 0; }
.admin__diff td:nth-child(2) { color: var(--muted); }
.admin__diff td:nth-child(3) { font-weight: 600; }
.admin__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin__table th, .admin__table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.admin__table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); background: var(--bg); }
.seg a { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg a.is-active { background: var(--dark); color: #fff; }

/* ---------- Pills for orders, ads, roles ---------- */
.pill--paid { background: #F1F5F9; color: var(--primary); border-color: #CBD5E1; }
.pill--fulfilled, .pill--active { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.pill--canceled, .pill--paused, .pill--expired { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.pill--refunded { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.pill--draft { background: #FEFCE8; color: #A16207; border-color: #FEF08A; }
.pill--admin { background: var(--dark); color: #fff; border-color: var(--dark); }
.pill--user { background: #fff; color: var(--muted); border-color: var(--border); }

/* ---------- Checkout ---------- */
.checkout__row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.checkout__row--sub { font-size: 13px; color: var(--muted); margin-top: -8px; }
.checkout__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--border-light); font-size: 15px; font-weight: 700; }
.checkout__total strong { font-family: var(--font-display); font-size: 28px; letter-spacing: -.03em; }

/* ---------- Markdown toolbar (guest post form) ---------- */
/* Writers: "writing as" strip on the submission form, the article rows in the account, the author page. */
.writer-as { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.writer-as__avatar { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.writer-as__avatar img { width: 100%; height: 100%; object-fit: cover; }
.writer-as > div { flex: 1; min-width: 0; }
.writer-as__label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.writer-as__name { margin-top: 2px; font-weight: 800; font-size: 15px; }
.writer-as__email { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 6px; }
.art-rows { display: grid; gap: 16px; margin-top: 28px; }
.art-row { flex-direction: row; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 20px; }
.art-row__mark { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #F1F5F9; color: var(--primary); }
.art-row--approved .art-row__mark { background: #F0FDF4; color: #15803D; }
.art-row--pending .art-row__mark { background: #FEFCE8; color: #A16207; }
.art-row--rejected .art-row__mark { background: #FEF2F2; color: #B91C1C; }
.art-row--unverified .art-row__mark { background: #F1F5F9; color: #475569; }
.art-row__body { flex: 1; min-width: 0; }
.art-row__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.art-row__title a { color: inherit; }
.art-row__title a:hover { color: var(--primary); }
.art-row__meta { color: var(--muted); font-size: 14px; margin-top: 4px; }
.art-row__pills { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.art-row__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 639px) { .art-row { flex-wrap: wrap; } .art-row__actions { width: 100%; } .art-row__actions .btn { flex: 1; } }
.art-row__mark--img { overflow: hidden; background: #fff; border: 1px solid var(--border); }
.art-row__mark--img img { width: 100%; height: 100%; object-fit: cover; }
.upload__preview--cover { width: 128px; height: 72px; border-radius: 10px; }
.upload__preview--cover img { padding: 0; object-fit: cover; }
.upload__preview--round { border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 26px; border: 0; }
.upload__preview--round img { padding: 0; object-fit: cover; }

.author { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding: 40px 20px 48px; border-bottom: 1px solid var(--border); }
.author::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 0% 0%, rgba(20, 160, 222, 0.08), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(20, 160, 222, 0.064), transparent 70%); }
.author__inner { max-width: 1120px; margin: 0 auto; }
.author__card { margin-top: 20px; display: flex; gap: 28px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 32px; box-shadow: var(--shadow-card); }
.author__avatar { flex: none; width: 112px; height: 112px; border-radius: 32px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 44px; box-shadow: 0 20px 30px -18px rgba(24, 46, 92, .7); }
.author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author__body { flex: 1; min-width: 0; }
.author__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.author__name { margin-top: 8px; font-size: 36px; letter-spacing: -.035em; line-height: 1.05; }
.author__bio { margin-top: 14px; color: #334155; font-size: 16px; line-height: 1.7; max-width: 640px; }
.author__bio p + p { margin-top: 10px; }
.author__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.author__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.author__sub { font-size: 24px; letter-spacing: -.02em; }
.author__count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
@media (max-width: 639px) { .author__card { flex-direction: column; padding: 24px; gap: 18px; } .author__avatar { width: 88px; height: 88px; border-radius: 26px; font-size: 36px; } .author__name { font-size: 30px; } }
@media (min-width: 1024px) { .author { padding: 48px 32px 56px; } }

/* Reviewer page header (/reviewer/<slug>, 2026-10-30): a compact dark pass instead of the big white author card.
   Avatar and name side by side, the review count and join date as two chips, a faint star behind. */
.author--reviewer { padding: 22px 16px 26px; }
.author--reviewer .crumbs { margin-bottom: 14px; }
.author--reviewer .author__inner { max-width: 1280px; }   /* lines up with "Reviews by" below */
.rvh { position: relative; isolation: isolate; overflow: hidden; max-width: 760px; padding: 20px; border-radius: 24px; color: #E2E8F0; background: linear-gradient(125deg, #0B1633 0%, #1A3263 58%, #203A72 100%); box-shadow: 0 24px 40px -26px rgba(32, 58, 114, .75); }
.rvh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 100% 0%, rgba(63, 182, 232, .28), transparent 60%); }
.rvh__decor { position: absolute; z-index: -1; right: -46px; bottom: -64px; color: rgba(255, 255, 255, .06); rotate: -14deg; pointer-events: none; }
.rvh__decor svg { fill: currentColor; stroke: none; }
.rvh__top { display: flex; align-items: center; gap: 14px; }
.rvh__avatar { flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #14A0DE, var(--primary)); color: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 800; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 12px 22px -12px rgba(0, 0, 0, .6); }
.rvh__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rvh__id { min-width: 0; }
.rvh__kicker { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7CCDEF; }
.rvh__name { margin-top: 4px; font-size: 28px; line-height: 1.05; letter-spacing: -.035em; color: #fff; overflow-wrap: anywhere; }
.rvh__facts { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rvh__facts li { display: grid; gap: 3px; min-width: 0; }
.rvh__facts li + li { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .12); }
.rvh__val { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; white-space: nowrap; }
.rvh__lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7CCDEF; }
.rvh__star { flex: none; color: var(--highlight); fill: var(--highlight); }
.rvh__bio { margin-top: 14px; font-size: 15px; line-height: 1.65; color: #CBD5E1; max-width: 620px; }
.rvh__bio p + p { margin-top: 8px; }
.rvh__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--fg); font-size: 13px; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.rvh__link:hover { background: #DDF1FB; color: var(--primary); }
@media (min-width: 640px) {   /* the two figures sit beside the name; bio and link run full width below */
  .author--reviewer { padding: 32px 24px 36px; }
  .rvh { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; padding: 24px 28px; border-radius: 28px; }
  .rvh__avatar { width: 72px; height: 72px; border-radius: 22px; font-size: 30px; }
  .rvh__name { font-size: 34px; }
  .rvh__facts { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12); grid-template-columns: auto auto; column-gap: 24px; }
  .rvh__facts li + li { padding-left: 24px; }
  .rvh__bio, .rvh__link { grid-column: 1 / -1; justify-self: start; }
}
@media (min-width: 1024px) { .author--reviewer { padding: 36px 32px 40px; } }

/* Reviewer pages (2026-10-29): the author hero above, then each review on its own card under a soft quote mark */
.rvp-list { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 900px) { .rvp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.rvp { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 24px 22px; background: #fff; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-card); overflow: hidden; animation: rvp-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.rvp:nth-child(2) { animation-delay: .06s; } .rvp:nth-child(3) { animation-delay: .12s; } .rvp:nth-child(n + 4) { animation-delay: .18s; }
@keyframes rvp-in { from { opacity: 0; transform: translateY(10px); } }
.rvp::before { content: "\201C"; position: absolute; z-index: -1; top: -26px; right: 14px; font-family: var(--font-display); font-size: 150px; line-height: 1; font-weight: 800; color: rgba(32, 58, 114, .07); pointer-events: none; }
.rvp__biz { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The letter shows until a logo loads over it, and again if the logo fails (public/js/site.js data-initial). */
.rvp__logo { flex: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.rvp__logo:has(img) { background: #fff; }
.rvp__logo img { width: 100%; height: 100%; object-fit: contain; }
.rvp__who { min-width: 0; }
.rvp__name { display: block; font-family: var(--font-display); font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.rvp__name:hover { color: var(--primary); }
.rvp__where { margin-top: 2px; font-size: 13px; color: var(--muted); }
.rvp__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.rvp__date { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.rvp__title { font-size: 17px; letter-spacing: -.015em; line-height: 1.3; }
.rvp__body { color: #334155; font-size: 15px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .rvp { animation: none; } }

/* A reviewer's name and photo on a listing's reviews */
.review__avatar { overflow: hidden; }
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__name a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .2s ease, color .2s ease; }
.review__name a:hover { color: var(--primary); background-size: 100% 1px; }

/* Account → My Reviews */
.myrv { display: grid; gap: 12px; margin-top: 24px; }
.myrv__row { flex-direction: row; gap: 16px; align-items: flex-start; padding: 18px 20px; }   /* .card is a column */
.myrv__logo { flex: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.myrv__logo:has(img) { background: #fff; }
.myrv__logo img { width: 100%; height: 100%; object-fit: contain; }
.myrv__main { flex: 1; min-width: 0; }
.myrv__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.myrv__biz { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.myrv__biz:hover { color: var(--primary); }
.myrv__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }
.myrv__title { margin-top: 10px; font-weight: 700; color: var(--fg); }
.myrv__body { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.myrv__hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: #A16207; }
.myrv__empty { flex-direction: row; gap: 16px; align-items: flex-start; margin-top: 24px; padding: 22px 24px; }
.myrv__empty-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--fg); }
.myrv__empty-text { margin: 4px 0 14px; max-width: 520px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.myrv__note { margin-top: 18px; font-size: 13px; color: var(--muted); }
.myrv__note a { color: var(--primary); font-weight: 700; }
@media (max-width: 520px) { .myrv__row { padding: 16px; gap: 12px; } }

/* Account → Website badge (2026-10-29): three numbered steps (pick, copy, paste), then how it is doing */
.bdg-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; margin-top: 32px; }
.bdg-step__n { align-self: start; padding-top: 8px; border-top: 2px solid var(--primary); font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--primary); }
.bdg-step__body { min-width: 0; }
.bdg-step__title { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
.bdg-step__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bdg-step__text { margin-top: 8px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.bdg-step__text b { color: var(--fg); }
.bdg-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.bdg-style { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid var(--border); border-radius: 20px; background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.bdg-style:hover { border-color: #BFCBE0; transform: translateY(-1px); }
.bdg-style input { position: absolute; opacity: 0; pointer-events: none; }
.bdg-style:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }
.bdg-style:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.bdg-style__stage { display: grid; place-items: center; min-height: 120px; padding: 20px 14px; background: #F4F6FA radial-gradient(#DCE3EE 1px, transparent 1px) 0 0 / 14px 14px; }
.bdg-style--dark .bdg-style__stage { background: #101C3A radial-gradient(#1E3157 1px, transparent 1px) 0 0 / 14px 14px; }
.bdg-style__stage img { display: block; max-width: 100%; height: auto; }
.bdg-style__label { display: grid; gap: 2px; padding: 12px 16px 14px; border-top: 1px solid var(--border-light); }
.bdg-style__label b { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--fg); }
.bdg-style:has(input:checked) .bdg-style__label b::after { content: ""; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.bdg-style__label small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.bdg-code { margin-top: 14px; overflow: hidden; border: 1px solid #1E293B; border-radius: 18px; background: #0B1633; }
.bdg-code__pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: 500 13px/1.7 var(--font-mono); color: #CBD5E1; white-space: pre; }
.bdg-code__pre[hidden] { display: none; }
.bdg-where { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.bdg-where li { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bdg-stats { margin-top: 36px; padding: 24px; }
.bdg-stats__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bdg-stats__range { font: 700 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.bdg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.bdg-num { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 16px; background: var(--bg); }
.bdg-num__v { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.bdg-num__k { font: 700 10px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.bdg-sites__label { margin-top: 22px; font: 700 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.bdg-sites { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-light); }
.bdg-site { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.bdg-site__host { font-weight: 700; color: var(--fg); overflow-wrap: anywhere; }
.bdg-site__host em { font-style: normal; font-weight: 600; color: var(--muted); }
.bdg-site__n { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.bdg-note { margin-top: 10px; font-size: 12.5px; color: var(--muted-light); }
.bdg-empty { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.bdg-empty__title { font-family: var(--font-display); font-weight: 800; color: var(--fg); }
.bdg-empty__text { margin-top: 4px; max-width: 560px; font-size: 14px; line-height: 1.6; color: var(--muted); }
@media (max-width: 640px) { .bdg-step { grid-template-columns: minmax(0, 1fr); } .bdg-step__n { width: 40px; margin-bottom: 10px; } .bdg-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-author__body { flex: 1; min-width: 0; }
.post-author__name a { color: inherit; }
.post-author__name a:hover { color: var(--primary); }
.post-author__bio { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.post-author__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.post-author { align-items: flex-start; }

/* Turnstile: the visible human check sits on its own row above the submit button. */
.turnstile { margin: 4px 0 2px; min-height: 65px; overflow: clip; }   /* a box scaled down by fitHuman keeps its 300px layout width; clip it so the form never scrolls sideways */
.turnstile .cf-turnstile { width: 100%; }
.turnstile iframe { border-radius: 12px; }

/* 404 / 500: the dark hero with the dot grid, a ghost code behind the words, the directory search as the way back. */
.oops { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: #fff; padding: 88px 20px 104px; min-height: 70vh; display: flex; align-items: center; }
.oops::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(148, 163, 184, .16) 1.5px, transparent 1.6px); background-size: 28px 28px; mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); }
.oops::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 55% at 85% 10%, rgba(20, 160, 222, 0.36), transparent 70%), radial-gradient(35% 45% at 5% 100%, rgba(20, 160, 222, 0.24), transparent 70%); }
.oops__ghost { position: absolute; right: -1vw; top: 50%; transform: translateY(-50%); z-index: -1; font-family: var(--font-display); font-weight: 800; font-size: clamp(180px, 34vw, 420px); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(148, 163, 184, .18); user-select: none; pointer-events: none; }
.oops__inner { position: relative; width: 100%; max-width: 860px; margin: 0 auto; }
.oops__code { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #CBD5E1; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 7px 14px 7px 12px; }
.oops__dot { width: 8px; height: 8px; border-radius: 999px; background: #F59E0B; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); }
.oops__title { margin-top: 22px; font-size: 44px; line-height: 1.02; letter-spacing: -.035em; max-width: 640px; }
.oops__lead { margin-top: 16px; font-size: 17px; line-height: 1.65; color: #94A3B8; max-width: 560px; }
.oops__search { margin: 32px 0 0; max-width: 760px; }
.oops__links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.oops__links a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 700; color: #CBD5E1; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.oops__links a:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .06); }
@media (min-width: 768px) { .oops__title { font-size: 60px; } .oops { padding: 112px 32px 128px; } }
@media (max-width: 639px) { .oops { padding: 56px 20px 72px; min-height: 0; } .oops__ghost { font-size: 150px; right: -8vw; top: 24%; } .oops__title { font-size: 36px; } }

/* Restricted account / blocked address: the same dark hero, with the facts and the one appeal form. */
.is-bare .footer { display: none; }
/* The context line under the description: where the business sits in the directory, with the category and state pages linked. */
.listing__context { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-light); font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.listing__context a { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: #CBD5E1; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .15s ease, color .15s ease; }
.listing__context a:hover { color: var(--primary); text-decoration-color: var(--primary); }
.listing__context + .socials { margin-top: 18px; }
/* The same line at the foot of category and location pages. */
.page-context { max-width: 820px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--border); text-align: center; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.page-context a { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: #CBD5E1; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color .15s ease, color .15s ease; }
.page-context a:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* Report: a small flag in the top right corner of the listing card, with its own tooltip. */
.listing__report { position: absolute; top: 18px; right: 18px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--muted-light); display: grid; place-items: center; transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease; }
.listing__report:hover, .listing__report:focus-visible { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; transform: translateY(-1px); }
.listing__report::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 8px; background: var(--dark-2); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.listing__report:hover::after, .listing__report:focus-visible::after { opacity: 1; transform: none; }
@media (min-width: 768px) { .listing__report { top: 22px; right: 22px; } }
/* Share (2026-10-29): a round icon in the card's corner beside Report, so the business name keeps its room. */
.listing__share { position: absolute; top: 18px; right: 62px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease; }
.listing__share:hover, .listing__share:focus-visible { color: var(--primary); border-color: #7CCDEF; background: #EFF8FD; transform: translateY(-1px); }
.listing__share::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; padding: 6px 10px; border-radius: 8px; background: var(--dark-2); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.listing__share:hover::after, .listing__share:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 768px) { .listing__share { top: 22px; right: 66px; } }
.oops--restricted { align-items: flex-start; min-height: 0; }
.oops--restricted .oops__dot { background: #EF4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .22); }
.restricted__facts { margin-top: 26px; display: grid; gap: 1px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; max-width: 640px; }
.restricted__facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 18px; background: rgba(8, 16, 40, .6); }
.restricted__k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; padding-top: 3px; }
.restricted__v { font-size: 15px; line-height: 1.55; color: #E2E8F0; }
.restricted__form { margin-top: 26px; max-width: 640px; color: var(--fg); }
.restricted__form .form-section__sub { margin-bottom: 14px; }
.restricted__appealed { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .3); color: #BBF7D0; font-size: 14px; }
.oops__linkbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 700; color: #CBD5E1; background: transparent; cursor: pointer; }
.oops__linkbtn:hover { border-color: #fff; color: #fff; }
@media (max-width: 639px) { .restricted__facts > div { grid-template-columns: 1fr; gap: 4px; } }

.md-editor { display: grid; gap: 8px; }
.md-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.md-toolbar button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 700; color: #334155; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.md-toolbar button:hover { border-color: var(--primary); color: var(--primary); background: #F1F5F9; }
.md-toolbar button[disabled] { opacity: .45; pointer-events: none; }
.md-toolbar button b { font-weight: 900; }
.md-toolbar button i { font-style: italic; font-family: Georgia, serif; }
.md-toolbar button small { font-size: 10px; font-weight: 800; margin-left: 1px; }
.md-toolbar__hint { margin-left: auto; font-size: 12px; color: var(--muted-light); }
.md-link { display: grid; gap: 10px; grid-template-columns: 1fr auto auto; align-items: end; padding: 14px; border: 1px solid #CBD5E1; border-radius: 14px; background: var(--bg); }
.md-link[hidden] { display: none; }
.md-link label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.md-link .input { padding: 10px 12px; font-size: 14px; }
.md-link .btn { height: 42px; }
.md-link .btn[disabled] { opacity: .5; pointer-events: none; }
.md-link__preview { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); word-break: break-all; }
.md-link__preview.is-bad { color: #B91C1C; }
.md-hint { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.md-count { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light); white-space: nowrap; transition: color .15s ease; }
.md-count.is-ok { color: #15803D; }
.md-count.is-over { color: #B91C1C; }
@media (max-width: 639px) { .md-hint { flex-direction: column; gap: 6px; } }
.md-toolbar button.md-toolbar__preview { border-color: #CBD5E1; background: var(--bg); color: var(--primary); }
.md-toolbar button.md-toolbar__preview:hover { border-color: var(--primary); background: #E2E8F0; }
.md-toolbar button.md-toolbar__preview.is-loading { opacity: .6; pointer-events: none; }
@media (max-width: 639px) { .md-link { grid-template-columns: 1fr 1fr; } .md-link label { grid-column: 1 / -1; } .md-toolbar__hint { display: none; } .md-toolbar button.md-toolbar__preview { margin-left: auto; } }

/* Article preview: the guest post rendered the way the blog will show it. */
.pv { display: none; flex-direction: column; width: min(920px, calc(100vw - 32px)); max-width: none; max-height: min(90vh, 1000px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--fg); box-shadow: 0 40px 80px -30px rgba(8, 16, 40, .55); overflow: hidden; }
.pv[open] { display: flex; animation: pv-in .28s cubic-bezier(.2, .8, .2, 1); }
.pv::backdrop { background: rgba(8, 16, 40, .62); backdrop-filter: blur(6px); }
@keyframes pv-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
body:has(.pv[open]) { overflow: hidden; }
.pv__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.pv__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.pv__note { font-size: 13px; color: var(--muted); }
.pv__close { margin-left: auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.pv__close:hover { border-color: var(--primary); color: var(--primary); background: #F1F5F9; }
.pv__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pv__head { background: var(--bg); padding: 36px 40px 28px; border-bottom: 1px solid var(--border); }
.pv__title { margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-size: 32px; letter-spacing: -.035em; line-height: 1.08; overflow-wrap: anywhere; }   /* a <p>, styled as the h1 it used to be: one h1 per page */
.pv__meta { margin-top: 14px; }
.pv__body { margin-top: 0; padding: 28px 40px 40px; overflow-wrap: anywhere; }
.pv__body:empty { display: none; }
.pv__empty { padding: 48px 40px; text-align: center; color: var(--muted-light); font-size: 15px; }
.pv__foot { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); background: #fff; }
@media (max-width: 639px) {
  .pv { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .pv__bar { padding-left: 16px; }
  .pv__note { display: none; }
  .pv__head { padding: 24px 20px 20px; }
  .pv__title { font-size: 26px; }
  .pv__body { padding: 20px 20px 32px; }
  .pv__empty { padding: 40px 20px; }
}

/* ---------- Guest post byline ---------- */
.post-author { margin-top: 36px; display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 20px 24px; }
.post-author__avatar { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.post-author__name { margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.post-author__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--primary); }

/* ---------- Scrollbars: the page keeps one slim bar in the site's grey; panels, sheets and drawers scroll without showing one ---------- */
html { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.no-bar, .pv__scroll, .mobile-nav, .udlg, .usub__body, .ljc, .toasts { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar, .pv__scroll::-webkit-scrollbar, .mobile-nav::-webkit-scrollbar, .udlg::-webkit-scrollbar, .usub__body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- On-site notices: toasts (bottom right) and the confirm sheet. Never a browser pop-up. ---------- */
.toasts { position: fixed; inset: auto 20px 20px auto; margin: 0; border: 0; padding: 0; background: transparent; overflow: visible; z-index: 120; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); height: auto; pointer-events: none; color: inherit; }
.toasts:popover-open { display: grid; }
.toasts::backdrop { display: none; }
.toast { pointer-events: auto; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 12px 16px 16px; border-radius: 18px; background: var(--dark-2); color: #fff; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -24px rgba(8, 16, 40, .65), 0 0 0 1px rgba(8, 16, 40, .25); animation: toast-in .32s cubic-bezier(.2, .8, .2, 1); }
.toast::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 100% 0%, rgba(20, 160, 222, 0.24), transparent 70%); }
.toast.is-leaving { animation: toast-out .24s ease forwards; }
.toast__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(32, 58, 114, .22); color: #7CCDEF; }
.toast--warn .toast__icon { background: rgba(245, 158, 11, .18); color: #FCD34D; }
.toast--error .toast__icon { background: rgba(220, 38, 38, .2); color: #FCA5A5; }
.toast--info .toast__icon { background: rgba(148, 163, 184, .16); color: #CBD5E1; }
.toast__body { min-width: 0; padding-top: 3px; font-size: 14px; line-height: 1.5; color: #CBD5E1; overflow-wrap: anywhere; }
.toast__title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: #fff; margin-bottom: 2px; }
.toast__close { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: #94A3B8; transition: background-color .15s ease, color .15s ease; }
.toast__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--primary), #3FB6E8); transform-origin: left; animation: toast-bar var(--toast-ms, 5s) linear forwards; }
.toast--warn .toast__bar { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
.toast--error .toast__bar { background: linear-gradient(90deg, #DC2626, #FCA5A5); }
.toast.is-held .toast__bar { animation-play-state: paused; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 639px) { .toasts { inset: auto 16px 16px 16px; width: auto; } }

.ljc { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--fg); box-shadow: 0 40px 80px -30px rgba(8, 16, 40, .5); }
.ljc[open] { animation: pv-in .26s cubic-bezier(.2, .8, .2, 1); }
.ljc::backdrop { background: rgba(8, 16, 40, .62); backdrop-filter: blur(6px); }
.ljc__card { margin: 0; padding: 28px 28px 24px; display: grid; gap: 8px; }
.ljc__kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.ljc--danger .ljc__kicker { color: #B91C1C; }
.ljc__title { font-size: 22px; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; }
.ljc__text { font-size: 14.5px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.ljc__text[hidden] { display: none; }
.ljc__actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
.ljc__danger { background: #DC2626; color: #fff !important; box-shadow: 0 10px 20px -10px rgba(220, 38, 38, .6); }
.ljc__danger:hover { background: #B91C1C; }

/* ---------- Businesses page, laid out like the reference: light hero with chips, a search band, every category as a group of banner cards ---------- */
.dir-hero { position: relative; isolation: isolate; overflow: hidden; background: #fff; padding: 72px 20px 52px; border-bottom: 1px solid var(--border); }
.dir-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(148, 163, 184, .3) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .25)); }
.dir-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 70% at 82% 0%, rgba(20, 160, 222, .16), transparent 70%); }
.dir-hero__inner { max-width: 1280px; margin: 0 auto; }
.dir-hero__pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 14px; border-radius: 999px; background: #EFF8FD; border: 1px solid #DDF1FB; color: var(--primary); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.dir-hero__pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--primary); }
.dir-hero__title { margin-top: 24px; font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -.04em; }
.dir-hero__title span { display: block; background: linear-gradient(90deg, #0E88BF, #203A72 60%, #182E5C); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.dir-hero__lead { margin-top: 22px; max-width: 620px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.dir-hero__chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.dir-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 14px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .3); }
.dir-chip b { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--fg); }
.dir-chip span { font-size: 14px; font-weight: 500; color: var(--muted); }
@media (max-width: 767px) { .dir-hero { padding: 52px 20px 40px; } }

.dir-search-wrap { background: #fff; border-bottom: 1px solid var(--border); padding: 16px 20px; }
.dir-search { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dir-search { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto auto; } }
.dir-search__input { min-width: 0; width: 100%; }   /* a long category name in the select no longer pushes Clear off the edge (~1024px) */
.dir-search__input { min-height: 52px; border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--fg); background: #fff; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.dir-search__input::placeholder { color: #94A3B8; font-weight: 500; }
.dir-search__input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(32, 58, 114, .1); }
.dir-search__select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.dir-search__btn { min-height: 52px; border-radius: 12px; padding: 0 26px; }
/* The phone bar's parts (below) stay out of the way everywhere else: each box is its own grid cell as before. */
.dir-search__f { display: contents; }
.dir-search__chip, .dir-search__go > svg { display: none; }
.dir-found__clear { display: none; }
/* "Use my location" in the place box (2026-10-30): a round arrow at the right edge. It spins while the phone works out
   where it is and flashes green once the ZIP code is in. Only with JavaScript, which it needs. */
.dir-search__box { position: relative; min-width: 0; }
.js .dir-search__box > .dir-search__input { padding-right: 54px; }
.dir-search__locate { display: none; position: absolute; top: 50%; right: 8px; width: 36px; height: 36px; margin-top: -18px; border: 1px solid #DDF1FB; border-radius: 11px; background: #EFF8FD; color: var(--primary); place-items: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.js .dir-search__locate { display: grid; }
.dir-search__locate:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.dir-search__locate:active { transform: scale(.93); }
.dir-search__locate:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dir-search__locate.is-busy { cursor: progress; background: #EFF8FD; color: var(--primary); }
.dir-search__locate.is-busy::after { content: ""; position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: var(--primary); border-right-color: var(--primary); border-radius: 14px; animation: ds-spin .7s linear infinite; }
.dir-search__locate.is-found { background: #DCFCE7; border-color: #BBF7D0; color: #16A34A; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
/* Phones (2026-10-30): one 44px bar instead of five stacked boxes, so the listings get the screen. The pill shows what
   is being searched; the pin and the list icon wear a blue dot once a place or a category is set. A chip drops its box
   just under the bar (no cursor until they tap in it); the category is the phone's own picker, so no keyboard at all. */
@media (max-width: 639px) {
  .js .dir-search-wrap { padding: 10px 16px; }
  .js .dir-search { grid-template-columns: minmax(0, 1fr) 44px 44px 48px; gap: 6px; align-items: center; }
  .js .dir-search__chip { position: relative; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; min-width: 0; padding: 0 14px; border: 1px solid var(--border); border-radius: 13px; background: #F8FAFC; color: #475569; font-family: var(--font-sans); font-size: 14px; font-weight: 600; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
  .js .dir-search__chip > svg { flex: none; }
  .js .dir-search__chip--q { grid-column: 1; justify-content: flex-start; color: var(--fg); }
  .js .dir-search__chip--q > svg { color: var(--primary); }
  .js .dir-search__chip--q > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .js .dir-search__chip--q > span.is-empty { color: #94A3B8; font-weight: 500; }
  .js .dir-search__chip--icon { padding: 0; }
  .js .dir-search__f:nth-child(2) > .dir-search__chip { grid-column: 2; }
  .js .dir-search__chip--cat { grid-column: 3; pointer-events: none; }
  .js .dir-search__chip[aria-expanded="true"] { border-color: var(--primary); background: #EFF8FD; color: var(--primary); }
  .js .dir-search__chip--icon::after { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 2px #F8FAFC; transform: scale(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
  .js .has-value > .dir-search__chip--icon { color: var(--primary); border-color: #B4E2F6; }
  .js .has-value > .dir-search__chip--icon::after { transform: scale(1); }
  /* The boxes: hidden until their chip opens one, then a full-width row under the bar. */
  .js .dir-search__f > input.dir-search__input, .js .dir-search__f > .dir-search__box { display: none; grid-row: 2; grid-column: 1 / -1; }
  .js .dir-search__f.is-open > input.dir-search__input, .js .dir-search__f.is-open > .dir-search__box { display: block; animation: ds-drop .24s cubic-bezier(.2, .8, .2, 1); }
  .js .dir-search__f > input.dir-search__input, .js .dir-search__box > .dir-search__input { min-height: 46px; font-size: 16px; }
  /* The category picker sits invisibly on its icon, so a tap opens the phone's own list. */
  .js .dir-search__select { grid-row: 1; grid-column: 3; z-index: 1; height: 44px; min-height: 0; padding: 0; border-color: transparent; background: none; color: transparent; cursor: pointer; }
  .js .dir-search__select:focus { box-shadow: none; }
  .js .dir-search__select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .js .dir-search__select option { color: var(--fg); }
  .js .dir-search__go { grid-row: 1; grid-column: 4; min-height: 44px; height: 44px; padding: 0; border-radius: 13px; }
  .js .dir-search__go > svg { display: block; }
  .js .dir-search__go > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .js .dir-search.is-dirty .dir-search__go { animation: ds-ready 1.6s ease-out 2; }
  .js .dir-search__clear { display: none; }
  .js .dir-found__clear { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--muted); vertical-align: 1px; }
}
@keyframes ds-drop { from { transform: translateY(-6px); } }   /* movement only: the box is there even if this never runs */
@keyframes ds-ready { 0% { box-shadow: 0 0 0 0 rgba(32, 58, 114, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(32, 58, 114, 0); } }

.dir-body { padding-top: 40px; }
.dir-found { font-size: 15px; font-weight: 700; color: #334155; }
.dir-found__note { font-weight: 500; color: var(--muted); }
.dir-groups { display: grid; gap: 60px; margin-top: 28px; }
.dir-found + .dir-groups { margin-top: 32px; }
.dir-group__head { display: flex; align-items: center; gap: 18px; }
.dir-group__icon { flex: none; width: 58px; height: 58px; border-radius: 18px; background: #EFF8FD; color: var(--primary); display: grid; place-items: center; }
.dir-group__text { flex: 1; min-width: 0; }
.dir-group__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.dir-group__title { margin-top: 4px; font-size: 28px; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.dir-group__count { margin-top: 4px; font-size: 14px; color: var(--muted); }
.dir-group__all { flex: none; }
/* Phones: the category head is one tight row (the View all button stays beside it) and the gaps shrink, so the first
   listing shows sooner (2026-10-30). */
@media (max-width: 639px) {
  .dir-body { padding-top: 20px; }
  .dir-found + .dir-groups { margin-top: 20px; }
  .dir-groups { gap: 40px; }
  .dir-group__head { gap: 12px; }
  .dir-group__icon { width: 44px; height: 44px; border-radius: 14px; }
  .dir-group__icon > svg { width: 20px; height: 20px; }
  .dir-group__kicker { font-size: 10px; }
  .dir-group__title { margin-top: 2px; font-size: 20px; }
  .dir-group__count { margin-top: 2px; font-size: 13px; }
  .dir-group__all { padding: 0 12px; min-height: 36px; font-size: 13px; }
  .dir-grid { margin-top: 16px; gap: 16px; }
}
.dir-grid { margin-top: 24px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dir-grid { grid-template-columns: repeat(4, 1fr); } }

.biz--banner { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; }
.biz__banner { display: grid; place-items: center; height: 164px; background: linear-gradient(180deg, #EFF8FD 0%, #F2F5FA 55%, #EAF6FC 100%); border-bottom: 1px solid var(--border-light); }
.biz__banner img { max-width: 150px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.biz__banner-letter { width: 72px; height: 72px; border-radius: 20px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--primary); }
.biz__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 20px 22px 18px; }
.biz--banner .biz__name { margin-top: 0; font-size: 17px; overflow-wrap: anywhere; }
.biz--banner .biz__loc { margin-top: 8px; }
.biz__pin { color: #203A72; display: inline-flex; }
.biz--banner .biz__desc { margin-top: 14px; }
.biz--banner .biz__foot { padding-top: 16px; margin-top: 6px; }
.biz__cat { font-size: 12px; font-weight: 700; color: #64748B; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz__view { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--primary); transition: gap .2s ease; }
.biz--banner:hover .biz__view { gap: 8px; }
/* Speed (2026-10-28): the directory is ~1,700 cards on one page, so sections off screen are not laid out or painted until
   they come near (content-visibility). The padding / negative margin pair keeps the layout identical while leaving room
   for the hover lift and glow, which paint containment would otherwise clip. The size estimate is rows × card height,
   per breakpoint; once a section has been on screen the browser remembers its real size (the auto keyword). */
.dir-group { content-visibility: auto; padding: 48px 20px; margin: -48px -20px; --cols: 1; --row: 406px; --head: 96px; min-width: 0; contain-intrinsic-block-size: auto 2400px; }
@media (min-width: 640px) { .dir-group { --cols: 2; --row: 409px; --head: 80px; } }
@media (min-width: 1024px) { .dir-group { --cols: 4; --row: 431px; --head: 80px; } }
@supports (height: round(up, 1px, 1px)) { .dir-group { contain-intrinsic-block-size: auto calc(var(--head) + round(up, var(--n, 1) / var(--cols), 1) * var(--row)); } }
/* Phones (2026-10-30, the owner: the page was hard to load and scroll): 1,700 cards stacked one under another made a
   page 700,000px tall. Each category is now one row that swipes sideways, the next card peeking in at the edge, so every
   listing is still here and the page is a twelfth of the length. Every section is then the same height, so nothing
   jumps while it scrolls (the size estimate is one head and one row). */
@media (max-width: 639px) {
  .dir-grid { display: flex; gap: 12px; margin: 14px -20px 0; padding: 2px 20px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dir-grid::-webkit-scrollbar { display: none; }
  .dir-group { padding-bottom: 32px; margin-bottom: -32px; contain-intrinsic-block-size: auto 331px; }
  .dir-groups { gap: 26px; }
  /* Compact tiles, every one the same size (2026-10-30, the owner): a short logo strip, the name (room for two lines,
     always), the town and View. The row's own heading already names the category, and the full words are one tap away. */
  .dir-grid > * { flex: 0 0 214px; height: 222px; scroll-snap-align: start; border-radius: 18px; }
  .dir-grid .biz__banner { height: 92px; }
  .dir-grid .biz__banner img { max-width: 124px; max-height: 60px; }
  .dir-grid .biz__banner-letter { width: 54px; height: 54px; border-radius: 16px; font-size: 22px; }
  .dir-grid .biz__body { padding: 13px 15px 12px; }
  .dir-grid .biz--banner .biz__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.3; min-height: 2.6em; }
  .dir-grid .biz--banner .biz__loc { margin-top: 5px; font-size: 13px; min-width: 0; }
  .dir-grid .biz--banner .biz__loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .dir-grid .biz__pin { vertical-align: -2px; margin-right: 4px; }
  .dir-grid .biz__desc, .dir-grid .biz__cat { display: none; }
  .dir-grid .biz__spacer { min-height: 0; }
  .dir-grid .biz--banner .biz__foot { justify-content: flex-end; margin-top: 0; padding-top: 9px; }
  .dir-grid .biz__view { font-size: 13px; }
}
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Cards spring up with a soft blue glow; arrows and icons answer the hover ---------- */
a.card, .card--hover { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .3s ease; }
a.card:hover, .card--hover:hover, a.biz:hover { transform: translateY(-8px); border-color: #B4E2F6; box-shadow: 0 30px 60px -28px rgba(32, 58, 114, .5), 0 0 48px -14px rgba(20, 160, 222, .35), 0 0 0 1px rgba(32, 58, 114, .1); }
.biz__view svg, .biz__go, .card__arrow { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .2s ease, background-color .2s ease, border-color .2s ease; }
a.card:hover .biz__view svg { transform: translateX(5px); }
a.tile:hover .card__arrow { color: var(--primary); transform: translateX(5px); }
a.tile .icon-sq { transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
a.tile:hover .icon-sq { background: var(--primary); color: #fff; box-shadow: 0 12px 24px -12px rgba(32, 58, 114, .75); transform: translateY(-2px); }
.tile__name { transition: color .2s ease; }
a.tile:hover .tile__name { color: var(--primary); }
.dir-group__all, .btn-outline { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, border-color .3s ease, background-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) { a.card:hover, .card--hover:hover, a.biz:hover, a.tile:hover .icon-sq { transform: none; } }

/* ---------- Businesses page: centred hero (the live dot grid draws the dots), search band that stays under the header ---------- */
.dir-hero { text-align: center; }
.dir-hero::before { display: none; }
.dir-hero::after { background: radial-gradient(50% 70% at 50% 0%, rgba(20, 160, 222, .14), transparent 70%); }
.dir-hero__lead { margin-left: auto; margin-right: auto; }
.dir-hero__chips { justify-content: center; }
.dir-search-wrap { position: sticky; top: var(--header-h); z-index: 40; box-shadow: 0 12px 30px -26px rgba(15, 23, 42, .35); }

/* ---------- Services: "How we work", laid out like the reference ---------- */
.process-head > div { max-width: 600px; }
.process-head::before { content: ""; position: absolute; left: -12%; bottom: -35%; width: 55%; height: 90%; z-index: -1; background: radial-gradient(circle at 30% 70%, rgba(20, 160, 222, 0.256), transparent 62%); pointer-events: none; }
.process { gap: 20px; margin-top: 48px; }
.process__step { padding: 26px 26px 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s ease, box-shadow .35s ease; }
.process__step:hover { transform: translateY(-6px); border-color: rgba(20, 160, 222, .5); box-shadow: 0 30px 60px -30px rgba(32, 58, 114, .5); }
.process__top { display: flex; align-items: center; gap: 14px; }
.process__top::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04)); }
.process__num { margin: 0; }
.process__title { margin-top: 26px; font-size: 18px; letter-spacing: -.01em; }
.process__text { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: #8FA3C0; }

/* ---------- Custom quote sheet (services page) ---------- */
.qdlg { width: min(760px, calc(100vw - 32px)); max-height: min(92vh, 1000px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--fg); box-shadow: 0 40px 80px -30px rgba(8, 16, 40, .5); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.qdlg::-webkit-scrollbar { display: none; }
.qdlg[open] { animation: pv-in .28s cubic-bezier(.2, .8, .2, 1); }
.qdlg::backdrop { background: rgba(8, 16, 40, .62); backdrop-filter: blur(6px); }
body:has(.qdlg[open]) { overflow: hidden; }
.qdlg__form { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }   /* never sized to the 300px human check */
.qdlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 28px 0; }
.qdlg__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.qdlg__title { margin-top: 8px; font-size: 26px; letter-spacing: -.03em; }
.qdlg__sub { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 520px; }
.qdlg__close { flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: border-color .15s ease, color .15s ease; }
.qdlg__close:hover { border-color: var(--primary); color: var(--primary); }
.qdlg__body { padding: 22px 28px 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.qdlg__body textarea.input { min-height: 120px; }
.qdlg__body .alert[hidden] { display: none; }
.qdlg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px 24px; margin-top: 10px; border-top: 1px solid var(--border-light); }
.qdlg__fine { font-size: 12.5px; color: var(--muted); }
.qdlg__actions { display: flex; gap: 8px; margin-left: auto; }
.qdlg__done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 52px 28px 44px; }
.qdlg__done[hidden] { display: none; }
.qdlg__done h3 { font-size: 24px; letter-spacing: -.03em; }
.qdlg__done p { max-width: 440px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.qdlg__check { width: 64px; height: 64px; border-radius: 999px; background: #F0FDF4; color: #15803D; display: grid; place-items: center; margin-bottom: 6px; }
.qdlg__form.is-done .qdlg__head, .qdlg__form.is-done .qdlg__body, .qdlg__form.is-done .qdlg__foot { display: none; }
@media (max-width: 639px) { .qdlg { width: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; } .qdlg__head, .qdlg__body, .qdlg__foot { padding-left: 18px; padding-right: 18px; } .qdlg__actions { width: 100%; } .qdlg__actions .btn { flex: 1; } }

/* ---------- Editing one listing paused (3 checks an hour per listing, the owner, 2026-11-02) ----------
   A dial that drains over the hour: in the bar on the edit page, and large in the sheet that opens on arrival. Blue while
   it waits, amber when a save was just turned away, green once it opens again. */
.hold-ring__track { fill: none; stroke: #DDF1FB; stroke-width: 3.4; }
.hold-ring__fill { fill: none; stroke: var(--primary); stroke-width: 3.4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.hold-bar { margin-top: 20px; display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 16px; border: 1px solid #B4E2F6; background: linear-gradient(100deg, #EFF8FD, #F8FAFC 72%); color: #182E5C; font-size: 14px; line-height: 1.55; }
.hold-bar__dial { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.hold-bar__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hold-bar__icon { color: var(--primary); }
.hold-bar__text { padding-top: 1px; }
.hold-bar__text strong { display: block; margin-bottom: 2px; font-weight: 800; color: var(--fg); }
.hold-bar__text b { color: var(--fg); }
.hold-bar--held { border-color: #FDE68A; background: linear-gradient(100deg, #FFFBEB, #F8FAFC 72%); color: #78350F; }
.hold-bar--held .hold-ring__track { stroke: #FEF3C7; }
.hold-bar--held .hold-ring__fill { stroke: #D97706; }
.hold-bar--held .hold-bar__icon { color: #D97706; }
.hold-bar.is-open { border-color: #BBF7D0; background: #F0FDF4; color: #15803D; }
.hold-bar.is-open .hold-ring__track { stroke: #BBF7D0; }
.hold-bar.is-open .hold-bar__icon { color: #15803D; }
.btn.hold-save[disabled] { opacity: 1; background: #E2E8F0; color: #475569 !important; box-shadow: none; font-variant-numeric: tabular-nums; }

.qdlg.hold-dlg { width: min(460px, calc(100vw - 32px)); }
.hold-dlg__in { position: relative; display: grid; justify-items: center; text-align: center; padding: 38px 32px 28px; }
.hold-dlg__x { position: absolute; top: 16px; right: 16px; }
.hold-dial { position: relative; width: 136px; height: 136px; display: grid; place-items: center; margin-bottom: 20px; }
.hold-dial::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(20, 160, 222, .11), transparent); }
/* Twelve hour-marks inside the ring, like a kitchen timer. */
.hold-dial::after { content: ''; position: absolute; inset: 20px; border-radius: 50%; background: repeating-conic-gradient(from -1.2deg, #CBD5E1 0 2.4deg, transparent 2.4deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(circle closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
.hold-dial__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hold-dial__num { position: relative; display: grid; justify-items: center; line-height: 1; }
.hold-dial__num b { font-family: var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: -.045em; color: var(--fg); font-variant-numeric: tabular-nums; }
.hold-dial__num small { margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@keyframes hold-drain { from { stroke-dashoffset: 0; } }
.hold-dlg[open] .hold-dial__ring .hold-ring__fill { animation: hold-drain 1.2s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
.hold-dlg__title { margin-top: 8px; font-size: 24px; letter-spacing: -.03em; }
.hold-dlg__text { margin-top: 10px; max-width: 360px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.hold-dlg__text b { color: var(--fg); }
.hold-dlg__when { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 13.5px; color: var(--fg); }
.hold-dlg__when svg { flex: none; color: var(--primary); }
.hold-dlg__kept { margin-top: 12px; max-width: 380px; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid #FDE68A; background: #FFFBEB; text-align: left; font-size: 13px; line-height: 1.5; color: #78350F; }
.hold-dlg__kept svg { flex: none; margin-top: 2px; color: #D97706; }
.hold-dlg__acts { margin-top: 26px; width: 100%; display: flex; justify-content: center; gap: 8px; }
@media (max-width: 639px) {
  .qdlg.hold-dlg { width: 100%; height: fit-content; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }   /* fit-content: a modal with height auto stretches top to bottom */
  .hold-dlg__in { padding: 32px 18px calc(22px + env(safe-area-inset-bottom)); }
  .hold-dlg__acts { flex-direction: column-reverse; }
  .hold-dlg__acts .btn { width: 100%; }
  .hold-bar { gap: 12px; padding: 12px 14px 12px 12px; font-size: 13.5px; }
}


/* ---------- Blog page, laid out like the reference: a wide featured card, then tiles with picture, date, title, excerpt, Read more ---------- */
.post-ph { display: grid; place-items: center; background: linear-gradient(120deg, #0B1633, #1A3263 55%, #203A72); }
.post-ph img { opacity: .8; }
.post-feature { padding: 0; overflow: hidden; border-radius: 28px; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .post-feature { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); } }
.post-feature__media { display: block; min-height: 260px; background: var(--bg); }
@media (min-width: 900px) { .post-feature__media { min-height: 440px; } }
.post-feature__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-feature__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 36px 28px; }
@media (min-width: 900px) { .post-feature__body { padding: 56px 52px; } }
.post-feature__kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.post-feature__title { margin-top: 18px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.035em; color: var(--primary); overflow-wrap: anywhere; }
.post-feature__excerpt { margin-top: 20px; font-size: 17px; line-height: 1.65; color: #475569; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-feature__btn { margin-top: 30px; border-radius: 12px; padding: 14px 24px; }
.post-feature:hover .post-feature__btn svg { transform: translateX(4px); }
.post-feature__btn svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }

/* Under an article: the one before and the one after, as two cards (the reference's layout). */
.post-nav { max-width: 1280px; margin: -40px auto 0; padding: 0 20px 80px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__card { padding: 26px 28px; border-radius: 22px; gap: 10px; justify-content: center; }
.post-nav__card--next { text-align: right; align-items: flex-end; }
.post-nav__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.post-nav__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; color: var(--fg); transition: color .2s ease; }
.post-nav__card:hover .post-nav__title { color: var(--primary); }
.post-nav__card svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.post-nav__card:hover svg { transform: translateX(-4px); }
.post-nav__card--next:hover svg { transform: translateX(4px); }

.post-tiles { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-tiles { grid-template-columns: repeat(3, 1fr); } }
.post-tiles--after-feature { margin-top: 32px; }
.ptile { padding: 20px; border-radius: 24px; flex-direction: column; }
.ptile__media { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--bg); }
.ptile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptile__body { display: flex; flex-direction: column; flex: 1; padding: 20px 4px 6px; }
.ptile__date { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.ptile__title { margin-top: 12px; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.3; letter-spacing: -.02em; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ptile__excerpt { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #475569; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ptile__more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--primary); }
.ptile__more svg { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.ptile:hover .ptile__more svg { transform: translateX(5px); }

/* ---------- Articles, dressed like the reference: a white card for the words, step cards, callouts, stat strips, compare cards ---------- */
.post-layout { padding-top: 28px; padding-bottom: 56px; }
.post-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 32px 22px; box-shadow: 0 20px 40px -32px rgba(15, 23, 42, .25); }
@media (min-width: 768px) { .post-card { padding: 48px 56px; } }
.prose--post { margin-top: 0; font-size: 17px; line-height: 1.8; color: #334155; }
.prose--post .post-lead { font-size: 18.5px; line-height: 1.75; color: #1E293B; }
.prose--post h2 { font-size: 30px; letter-spacing: -.035em; line-height: 1.15; margin-top: 44px; scroll-margin-top: 110px; }
.prose--post h3 { font-size: 19px; color: var(--primary); margin-top: 32px; }
.prose--post h4 { font-size: 16px; color: var(--primary); }
.prose--post a { color: var(--primary); font-weight: 700; text-decoration: none; }
.prose--post a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose--post strong { color: #0F172A; }
.prose--post ul { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.prose--post ul > li { position: relative; padding-left: 26px; }
.prose--post ul > li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 10px; height: 10px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 4px #DDF1FB; }
.prose--post ul ul { margin: 8px 0 0; }
.prose--post ul ul > li::before { width: 8px; height: 8px; left: 2px; background: #7CCDEF; box-shadow: none; }
.prose--post img { border-radius: 20px; margin: 28px 0; }
.prose--post hr { margin: 40px 0; }
.prose .steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0; }
.prose .step { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: #EFF8FD; border: 1px solid #DDF1FB; }
.step__n { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--dark-soft); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; margin-top: 2px; }
.step__body { min-width: 0; font-size: 15.5px; line-height: 1.7; color: #334155; }
.step__body p + p { margin-top: 6px; }
.step__title { font-weight: 800; color: #0F172A; font-size: 16px; }
.callout { margin: 26px 0; padding: 18px 22px; border-radius: 14px; background: #EFF8FD; border: 1px solid #DDF1FB; border-left: 4px solid var(--primary); }
.callout__kicker { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.callout__body { font-size: 16.5px; line-height: 1.7; color: var(--primary); font-weight: 500; }
.callout__body p + p { margin-top: 10px; }
.callout__body a { color: #182E5C; font-weight: 800; }
.callout--warn { background: #FFF5F3; border-color: #FFE4E0; border-left-color: #DC2626; }
.callout--warn .callout__kicker { color: #DC2626; }
.callout--warn .callout__body { color: #7F1D1D; }
.callout--dark { background: linear-gradient(135deg, #0B1633, #182E5C 60%, #0E88BF); border: 0; color: #fff; }
.callout--dark .callout__kicker { color: #B4E2F6; }
.callout--dark .callout__body { color: #E2E8F0; }
.callout--dark .callout__body strong { color: #fff; }
.callout--dark .callout__body a { color: #7CCDEF; }
.callout--quote { background: var(--bg); border-color: var(--border); border-left-color: var(--primary); font-style: italic; }
.callout--quote .callout__body { color: #334155; font-weight: 500; }
.stats-strip { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 26px 0; }
@media (min-width: 640px) { .stats-strip { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.stat-box { text-align: center; padding: 22px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); }
.stat-box__n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: var(--primary); line-height: 1; }
.stat-box__l { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.compare { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 26px 0; }
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__card { padding: 18px 20px; border-radius: 14px; font-size: 16px; line-height: 1.7; }
.compare__card--a { background: #FFF7F5; border: 1px solid #FFE1DA; border-top: 3px solid #DC2626; }
.compare__card--b { background: #EFF8FD; border: 1px solid #DDF1FB; border-top: 3px solid var(--primary); }
.compare__title { font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.compare__card--a .compare__title { color: #B91C1C; }
.compare__card--b .compare__title { color: var(--primary); }
.table-wrap { overflow: auto; margin: 20px 0; border-radius: 14px; border: 1px solid var(--border); }
.table-wrap table { margin: 0; }
.table-wrap th, .table-wrap td { border: 0; border-bottom: 1px solid var(--border-light); }

/* Ticked checklists, numbered paths and logo cards (src/lib/juice.js; 2026-10-29). Columns follow the article's own
   width (a container query), not the window's, so the side column never squeezes them. */
.prose--post { container-type: inline-size; }
.prose--post ul.checklist { margin: 22px 0; padding: 14px; display: grid; gap: 8px; grid-template-columns: 1fr; border-radius: 18px; background: linear-gradient(180deg, #F6FBFE, #EFF8FD); border: 1px solid #DDF1FB; }
@container (min-width: 620px) { .prose--post ul.checklist { grid-template-columns: 1fr 1fr; } }
.prose--post ul.checklist > li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; font-size: 15.5px; line-height: 1.55; color: #1E293B; }
.prose--post ul.checklist > li::before { content: none; }
.checklist__tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px -4px rgba(14, 136, 191, .65); }
.checklist__tick--empty { background: #fff; border: 2px solid #7CCDEF; box-shadow: none; }
.checklist__tick--empty svg { display: none; }
.prose--post ol.flow { list-style: none; margin: 26px 0; padding: 20px; display: grid; gap: 16px; border-radius: 18px; background: #F8FAFC; border: 1px solid var(--border); }
.prose--post ol.flow > li { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; }
.prose--post ol.flow > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: -16px; width: 2px; background: linear-gradient(180deg, #B4E2F6, #7CCDEF); }
.flow__n { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: #fff; border: 2px solid #B4E2F6; color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.prose--post ol.flow > li:last-child .flow__n { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 5px #DDF1FB; }
.flow__t { font-size: 15px; font-weight: 700; line-height: 1.4; color: #0F172A; }
@container (min-width: 620px) {
  .prose--post ol.flow { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding: 22px; }
  .prose--post ol.flow > li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .prose--post ol.flow > li:not(:last-child)::after { top: 15px; bottom: auto; left: 36px; right: -10px; width: auto; height: 2px; background: linear-gradient(90deg, #B4E2F6, #7CCDEF); }
  .flow__t { font-size: 14.5px; }
}
.logo-cards { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 22px 0 30px; }
@container (min-width: 620px) { .logo-cards { grid-template-columns: 1fr 1fr; } }
.logo-card { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px 14px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--border); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.logo-card:hover { border-color: #B4E2F6; box-shadow: 0 16px 32px -24px rgba(24, 46, 92, .5); transform: translateY(-2px); }
.logo-card__logo { display: flex; width: 92px; height: 64px; padding: 8px; border-radius: 12px; background: #F8FAFC; border: 1px solid #EEF2F7; overflow: hidden; }
.prose--post .logo-card__logo img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; margin: 0; border-radius: 4px; }
.prose .logo-card__body p + p { margin-top: 3px; }
.logo-card__name { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.prose--post .logo-card__name a { color: #0F172A; }
.prose--post .logo-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.prose--post .logo-card:hover .logo-card__name a { color: var(--primary); text-decoration: none; }
.logo-card__meta { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.logo-card__text { font-size: 14.5px; line-height: 1.55; color: #475569; }
/* Two-up cards and phone-width cards are too narrow for logo-beside-text, so the logo sits on top. */
@container (min-width: 620px) { .logo-card { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 12px; padding: 16px 18px 18px; } .logo-card__logo { width: 124px; height: 64px; } }
@container (max-width: 439px) { .logo-card { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } .logo-card__logo { width: 124px; height: 60px; } }
/* A cover with words or a chart in it is shown whole, on a blurred copy of itself (coverImg, "fit": "whole") */
.cover-whole { position: relative; display: block; overflow: hidden; background: #0B1633; isolation: isolate; }
.cover-whole::before { content: ""; position: absolute; inset: -40px; z-index: -1; background-image: var(--cover); background-size: cover; background-position: center; filter: blur(30px) saturate(1.2) brightness(.92); transform: scale(1.08); }
.cover-whole > img.cover-whole__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.post-cover > .cover-whole { width: 100%; height: clamp(220px, 46vw, 560px); border-radius: 28px; }
.post__thumb > .cover-whole { width: 100%; height: 100%; }

/* The author box, the side cards and the closing call to action */
.post-author { margin-top: 40px; display: flex; gap: 18px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; }
.post-author__avatar { width: 54px; height: 54px; border-radius: 999px; font-size: 17px; }
.post-author__name { margin-top: 2px; font-size: 17px; }
.post-author__role { margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.post-author__bio { margin-top: 8px; font-size: 15px; line-height: 1.7; color: #475569; }
.post-author__links { margin-top: 8px; }
.toc { border-radius: 20px; }
.toc .row-card__label { color: var(--primary); font-size: 11px; letter-spacing: .16em; }
.toc ol { list-style: none; padding: 0; margin-top: 14px; gap: 12px; }
.toc a { display: block; font-size: 14px; font-weight: 600; color: #334155; line-height: 1.45; transition: color .15s ease; }
.toc a:hover { color: var(--primary); }
.post-aside__cta { background: linear-gradient(135deg, #203A72, #182E5C); color: #fff; border: 0; border-radius: 20px; }
.post-aside__cta .row-card__label { color: #B4E2F6; font-size: 11px; letter-spacing: .16em; }
.post-aside__cta h3 { color: #fff; font-size: 22px; letter-spacing: -.025em; line-height: 1.25; }
.post-aside__cta p:not(.row-card__label) { color: #DDF1FB; }
.post-aside__cta .btn { background: #fff; color: var(--primary) !important; box-shadow: none; }
.related { max-width: 1280px; margin: 0 auto; padding: 8px 20px 80px; }
.post-nav { padding-bottom: 48px; }
.related__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.related__title { margin-top: 8px; font-size: 30px; letter-spacing: -.03em; }
.related .post-tiles { margin-top: 24px; }
.ptile--compact .ptile__excerpt { -webkit-line-clamp: 2; }
.ptile--compact:hover .ptile__title { color: var(--primary); }
.ptile__title { transition: color .2s ease; }
.post-nav { margin-top: 0; }
.md-tips { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; }

/* Hero badge: the "U.S. owned" tail is hidden on phones so the pill stays one line. */
.hero__badge-x { white-space: pre; }
@media (max-width: 639px) { .hero__badge-x { display: none; } }

/* Admin preview strip above a listing: a waiting listing, or a live one with its pending edits applied. */
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background: #FFFBEB; border-bottom: 1px solid #FDE68A; color: #92400E; font-size: 14px; font-weight: 600; text-align: center; }
.preview-bar > svg { flex: none; }
.preview-bar a { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; }
.preview-bar a:hover { text-decoration: underline; }

/* Phone widths: nothing may force a width past the screen. Long select options, file inputs, diff tables and
   long unbroken strings (emails, URLs) were doing it. */
.field, .form-grid > * { min-width: 0; }
select.input { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.upload { flex-wrap: wrap; }
.upload > div { flex: 1 1 180px; min-width: 0; }
.upload input[type=file] { max-width: 100%; }
.admin__diff { table-layout: fixed; }
.admin__diff td, .admin__diff th { overflow-wrap: anywhere; }
.admin__row-meta, .admin__row-desc, .admin__row-title, .admin__row-body { overflow-wrap: anywhere; }
.admin__row--stack { min-width: 0; }
.writer-as { flex-wrap: wrap; }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.card { min-width: 0; }

/* Small phones: the pricing tabs wrap instead of overflowing, and the review form keeps room for the 300px human check. */
@media (max-width: 639px) { .seg--center { width: auto; flex-wrap: wrap; } }

/* Nothing may scroll the page sideways: the header button's light halo reaches 48px past the button, which at exactly
   1024px wide pushed the page 20px past the screen. */
html { overflow-x: clip; }
.header__bar { overflow-x: clip; }

/* Listing page on phones (2026-10-30, the owner: "a box inside of a box inside of a box" squeezed the review form to
   293px of a 375px screen). One surface per section: the head card rises out of the dark hero like a sheet, every
   section below is a white band running edge to edge with a 10px seam of the soft page between, and nothing inside a
   band gets its own border or tint. The review form now has 343px. */
@media (max-width: 639px) {
  .listing-body { padding-left: 0; padding-right: 0; }
  .listing-body .container { padding-left: 0; padding-right: 0; }
  .listing-top { padding: 24px 16px 22px; border: 0; border-bottom: 1px solid var(--border); border-radius: 26px 26px 0 0; box-shadow: 0 -18px 40px -24px rgba(8, 16, 40, .5); }
  .listing-body .listing-grid { margin-top: 10px !important; gap: 10px; }
  .listing-main, .listing-aside { gap: 10px; }
  .listing-body .listing-card { padding: 28px 16px; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  .review-form { margin-top: 26px; padding: 26px 0 0; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
  .reviews-empty { margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
  .review-head { flex-wrap: nowrap; }
  .review-score { flex: none; padding: 10px 14px; }
}
/* The same rule everywhere else on phones: the page's main card (the blog article, the big forms, the policies, the
   contact cards) runs edge to edge as a white band, whatever the gutter around it, so what is inside it gets the full
   width. Boxes inside it (callouts, steps, notes, uploads) keep their own look: one level, never three. */
@media (max-width: 639px) {
  .post-card, .form-card, .legal__body, .contact-card, .contact-aside > .card {
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 16px; padding-right: 16px;
    border-left: 0; border-right: 0; border-radius: 0; box-shadow: none;
  }
}
/* The human check is fitted to its form by site.js (fitHuman): scaled down only when the form is under 300px wide. */

/* Category marquee: one loop takes five seconds per category (set inline as --marquee-time), so the pace stays the same however many categories there are; slower still on phones, where the same pixels per second read faster; off for people who asked for less motion. */
@media (max-width: 640px) { .marquee__track { animation-duration: calc(var(--marquee-time, 120s) * 1.6); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Listing page facts on phones (2026-10-28): one fact per row, nothing cut short ("Constructi…", "Saint Pe…" at 375px
   before). Since 2026-10-29 the columns follow the card's own width (container queries beside .facts above); this
   only keeps the larger tap targets of the one-per-row layout. */
@container listing-top (max-width: 519px) {
  .fact__icon { width: 44px; height: 44px; border-radius: 13px; }
  .fact__value { line-height: 1.35; font-size: 15px; }
  .fact__label { font-size: 10.5px; }
}

/* ---------- Powered by AI (/powered-by-ai, rebuilt 2026-10-29) ----------
   A dark hero with an example review console (a white "document" in a glass frame, a scan line, a green stamp), the
   five-step pipeline on a rail with a travelling pulse, the kinds grid, the never / always panel and the comparison.
   Motion is decoration only (scan, pulse, live dot): every word is fully visible without it. */
.pai-hero { position: relative; isolation: isolate; overflow: hidden; padding: 64px 20px 48px; background: var(--dark); color: #fff; }
.pai-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(55% 60% at 80% 32%, rgba(20, 160, 222, 0.32), transparent 70%),
  radial-gradient(40% 45% at 6% 0%, rgba(20, 160, 222, .18), transparent 70%),
  radial-gradient(rgba(148, 163, 184, .15) 1px, transparent 1.5px) 0 0 / 26px 26px; }
.pai-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; background: linear-gradient(180deg, transparent, var(--dark)); }
.pai-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }   /* minmax: on a 320px phone the one column may not grow past the screen (2026-10-29 sweep) */
@media (min-width: 1000px) { .pai-hero { padding: 96px 32px 64px; } .pai-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; } }
.pai-title { margin: 22px 0 0; text-wrap: balance; font-family: var(--font-display); font-size: clamp(38px, 5.4vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.pai-title__line { display: block; text-wrap: balance; padding-bottom: .06em; background: linear-gradient(90deg, #3FB6E8, #14A0DE 45%, #0E88BF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pai-lead { margin: 22px 0 0; max-width: 36em; font-size: 17.5px; line-height: 1.7; color: #94A3B8; }
.pai-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.pai-console { position: relative; margin: 0; padding: 10px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8), 0 0 90px -20px rgba(14, 136, 191, .45); }
@media (min-width: 1000px) { .pai-console { transform: rotate(1.5deg); } }
.pai-console__bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.pai-console__dots { display: inline-flex; gap: 6px; }
.pai-console__dots i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
@media (max-width: 420px) { .pai-console__dots { display: none; } .pai-console__label { white-space: nowrap; } }
.pai-console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(74, 222, 128, .3); background: rgba(34, 197, 94, .12); color: #86EFAC; }
.pai-console__live i { width: 7px; height: 7px; border-radius: 999px; background: #22C55E; animation: pai-ping 1.6s ease-out infinite; }
.pai-console__doc { position: relative; overflow: hidden; padding: 20px 20px 14px; border-radius: 16px; background: #fff; color: var(--fg); }
.pai-console__biz { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.pai-console__logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #203A72, #3FB6E8); color: #fff; font: 800 15px var(--font-display); }
.pai-console__who { display: grid; min-width: 0; }
.pai-console__who b { font: 800 17px/1.2 var(--font-display); letter-spacing: -.02em; }
.pai-console__who small { margin-top: 3px; font-size: 13px; color: var(--muted); }
.pai-console__tag { margin-left: auto; align-self: flex-start; padding: 3px 8px; border-radius: 999px; background: #F1F5F9; font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pai-checks { list-style: none; margin: 10px 0 0; padding: 0; }
.pai-checks li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-light); font-size: 14.5px; color: #334155; }
.pai-checks li:last-child { border-bottom: 0; }
.pai-checks svg { flex: none; color: #16A34A; }
.pai-checks b { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: #F0FDF4; font: 700 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #15803D; }
.pai-console__scan { position: absolute; left: 0; right: 0; top: -70px; height: 64px; pointer-events: none; border-bottom: 2px solid rgba(20, 160, 222, .55); background: linear-gradient(180deg, transparent, rgba(20, 160, 222, .1) 70%, rgba(20, 160, 222, .3)); animation: pai-scan 3.8s cubic-bezier(.45, 0, .25, 1) infinite; }
.pai-console__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 10px 6px; }
.pai-stamp { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 2px solid #4ADE80; border-radius: 10px; color: #86EFAC; font: 800 13px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-3deg); box-shadow: 0 0 24px rgba(34, 197, 94, .25), inset 0 0 12px rgba(34, 197, 94, .12); }
.pai-console__time { margin-left: auto; font: 600 12px var(--font-mono); letter-spacing: .06em; color: #94A3B8; }

.pai-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 48px 0 0; }
@media (min-width: 800px) { .pai-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 64px; } }
.pai-stats div { display: flex; flex-direction: column-reverse; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.pai-stats dt { font: 700 10.5px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #94A3B8; }
.pai-stats dd { margin: 0 0 8px; font: 800 clamp(28px, 3.4vw, 38px)/1 var(--font-display); letter-spacing: -.04em; color: #fff; }

.pai-head { max-width: 760px; margin-bottom: 44px; }
.pai-head .h2 { margin-top: 12px; text-wrap: balance; }
.pai-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* The pipeline: a dashed rail between the node centers (down the left on phones, across on wide screens) with a
   glowing pulse running along it. The run element is the rail's own size, so translate 100% = the whole rail. */
.pai-track { position: relative; }
.pai-steps { position: relative; display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.pai-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; align-content: start; }
.pai-step__node { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; border: 1px solid #B4E2F6; background: #fff; color: var(--primary); box-shadow: 0 12px 24px -14px rgba(32, 58, 114, .5), 0 0 0 6px #fff; }
.pai-step:last-child .pai-step__node { border-color: var(--primary); background: var(--primary); color: #fff; }
.pai-step__n { position: absolute; top: -8px; right: -10px; padding: 2px 6px; border-radius: 999px; background: var(--dark); color: #fff; font: 700 10px var(--font-mono); letter-spacing: .08em; }
.pai-step__title { margin: 4px 0 0; font: 800 21px/1.2 var(--font-display); letter-spacing: -.03em; color: var(--fg); }
.pai-step__text { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.pai-track__rail { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: repeating-linear-gradient(180deg, #B4E2F6 0 6px, transparent 6px 12px); }
.pai-track__run { position: absolute; inset: 0; animation: pai-run-y 5s ease-in-out infinite; }
.pai-track__run i { position: absolute; left: -5px; top: -6px; width: 12px; height: 12px; border-radius: 999px; background: #14A0DE; box-shadow: 0 0 0 4px rgba(20, 160, 222, .18), 0 0 18px rgba(20, 160, 222, .8); }
@media (min-width: 900px) {
  .pai-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
  .pai-step { grid-template-columns: 1fr; gap: 20px; }
  .pai-track__rail { top: 27px; bottom: auto; left: 28px; right: calc((100% - 88px) / 5 - 28px); width: auto; height: 2px; background: repeating-linear-gradient(90deg, #B4E2F6 0 6px, transparent 6px 12px); }
  .pai-track__run { animation-name: pai-run-x; }
  .pai-track__run i { left: -6px; top: -5px; }
}

.pai-kinds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (min-width: 1100px) { .pai-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pai-kind { position: relative; padding: 22px 22px 20px; border-radius: 20px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-card); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pai-kind:hover { transform: translateY(-3px); border-color: #B4E2F6; box-shadow: 0 26px 40px -26px rgba(32, 58, 114, .35); }
.pai-kind__n { position: absolute; top: 18px; right: 20px; font: 700 11px var(--font-mono); letter-spacing: .12em; color: #7CCDEF; }
.pai-kind__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #EFF8FD; color: var(--primary); }
.pai-kind__title { margin: 16px 0 0; font: 800 18px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--fg); }
.pai-kind__text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pai-kind--web { border-color: transparent; background: linear-gradient(150deg, #0B1633, #172B58); }
.pai-kind--web .pai-kind__icon { background: rgba(63, 182, 232, .16); color: #7CCDEF; }
.pai-kind--web .pai-kind__title { color: #fff; }
.pai-kind--web .pai-kind__text { color: #94A3B8; }

.pai-rules .h2 { color: #fff; }
.pai-rules .lead { color: #94A3B8; }
.pai-rules__grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .pai-rules__grid { grid-template-columns: 1.15fr .85fr; gap: 20px; } }
.pai-rulecard { padding: 26px 26px 18px; border-radius: 22px; border: 1px solid; }
.pai-rulecard--never { border-color: rgba(248, 113, 113, .25); background: linear-gradient(160deg, rgba(239, 68, 68, .1), rgba(239, 68, 68, .02)); }
.pai-rulecard--always { border-color: rgba(74, 222, 128, .25); background: linear-gradient(160deg, rgba(34, 197, 94, .1), rgba(34, 197, 94, .02)); }
.pai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.pai-rulecard--never .pai-chip { background: rgba(239, 68, 68, .15); color: #FCA5A5; }
.pai-rulecard--always .pai-chip { background: rgba(34, 197, 94, .15); color: #86EFAC; }
.pai-rulecard ul { display: grid; margin: 14px 0 0; padding: 0; list-style: none; }
.pai-rulecard li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 16px; line-height: 1.45; color: #E2E8F0; }
.pai-rulecard li:first-child { border-top: 0; }
.pai-rulecard li svg { flex: none; margin-top: 2px; }
.pai-rulecard--never li svg { color: #F87171; }
.pai-rulecard--always li svg { color: #4ADE80; }
@media (min-width: 560px) { .pai-rulecard--never ul { grid-template-columns: 1fr 1fr; column-gap: 26px; } .pai-rulecard--never li:nth-child(2) { border-top: 0; } }

.pai-compare { max-width: 940px; margin: 0 auto; overflow: hidden; border-radius: 24px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-card); }
.pai-compare__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid var(--border-light); }
.pai-compare__row:first-child { border-top: 0; }
.pai-compare__row > span { padding: 18px 22px; font-size: 15px; line-height: 1.45; }
.pai-compare__k { font-weight: 700; color: var(--fg); }
.pai-compare__them { color: var(--muted); }
.pai-compare__us { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, #203A72, #182E5C); color: #fff; font-weight: 700; }
.pai-compare__row--head > span { padding-top: 16px; padding-bottom: 16px; font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pai-compare__row--head .pai-compare__us { color: #B4E2F6; }
.pai-compare__row:last-child .pai-compare__us { font: 800 32px/1 var(--font-display); letter-spacing: -.04em; }
@media (max-width: 640px) {
  .pai-compare__row { grid-template-columns: 1fr 1fr; }
  .pai-compare__row--head { display: none; }
  .pai-compare__row > span { padding: 12px 16px; font-size: 14px; }
  .pai-compare__k { grid-column: 1 / -1; padding-bottom: 4px !important; }
  .pai-compare__them::before, .pai-compare__us::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 700 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
  .pai-compare__row:last-child .pai-compare__us { font-size: 26px; }
}

@keyframes pai-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
@keyframes pai-scan { 0% { top: -70px; } 70%, 100% { top: calc(100% + 6px); } }
@keyframes pai-run-y { 0% { transform: translateY(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes pai-run-x { 0% { transform: translateX(0); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pai-console__scan, .pai-track__run { display: none; animation: none; } .pai-console__live i { animation: none; } .pai-kind { transition: none; } }

/* ---------- On-site sheets instead of email links (2026-10-28) ---------- */
/* Book a Free Strategy Call (rebuilt 2026-10-29). A fixed-size sheet: a dark rail (what the call is, a live ticket of the
   booking, the plan) and a light working side in two steps, time first, then details. The working side scrolls on its
   own between a fixed step bar and a fixed footer, so the button is always in reach. Days and times are buttons drawn
   by site.js from /strategy-call/slots. Nothing waits on an animation to appear (panes only slide, never fade in). */
.bk { width: min(1120px, calc(100vw - 32px)); height: min(800px, calc(100dvh - 40px)); max-height: none; overflow: hidden; border-radius: 28px; }
.bk__form { margin: 0; height: 100%; display: grid; grid-template-columns: 340px minmax(0, 1fr); }

/* The rail */
.bk__rail { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 26px; padding: 32px 28px 28px; color: #CBD5E1; overflow: auto; scrollbar-width: none;
  background: radial-gradient(140% 60% at 0% 0%, rgba(14, 136, 191, .38), transparent 60%), radial-gradient(90% 50% at 100% 100%, rgba(20, 160, 222, 0.176), transparent 70%), linear-gradient(170deg, #0F1D40 0%, #081028 72%); }
.bk__rail::-webkit-scrollbar { display: none; }
.bk__rail::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(148, 163, 184, .18) 1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask: linear-gradient(180deg, #000, transparent 55%); mask: linear-gradient(180deg, #000, transparent 55%); }
.bk__kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #7CCDEF; }
.bk__kicker i { width: 7px; height: 7px; border-radius: 999px; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.bk__title { margin-top: 12px; font-family: var(--font-display); font-size: 30px; line-height: 1.08; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.bk__facts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bk__facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 600; color: #E2E8F0; }
.bk__facts svg { color: #3FB6E8; }

/* The ticket: a date tile and the booking as it is made */
.bk__ticket { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 40px -28px rgba(0, 0, 0, .8); transition: box-shadow .25s ease; }
.bk__ticket::before, .bk__ticket::after { content: ""; position: absolute; left: 94px; width: 14px; height: 14px; border-radius: 999px; background: #0C1838; }
.bk__ticket::before { top: -7px; } .bk__ticket::after { bottom: -7px; }
.bk__tile { display: grid; justify-items: center; align-content: center; gap: 2px; height: 80px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #64748B; transition: background-color .25s ease, color .25s ease; }
.bk__tile span { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bk__tile b { font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.bk__ticket-body { min-width: 0; padding-left: 16px; border-left: 1px dashed rgba(255, 255, 255, .18); }
.bk__ticket-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #64748B; }
.bk__ticket-time { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.35; color: #94A3B8; }
.bk__ticket-time span { display: block; }
.bk__ticket-time span + span { margin-top: 1px; font-size: 13.5px; font-weight: 600; color: #B4E2F6; }
.bk__ticket-local { margin-top: 3px; font-size: 12px; color: #7CCDEF; }
.bk__ticket-who { margin-top: 6px; font-size: 12.5px; color: #CBD5E1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk__ticket-local[hidden], .bk__ticket-who[hidden] { display: none; }
.bk__ticket.is-set { box-shadow: inset 0 0 0 1px rgba(63, 182, 232, .45), 0 24px 44px -26px rgba(14, 136, 191, .8); }
.bk__ticket.is-set .bk__tile { background: #fff; color: #0F172A; box-shadow: none; }
.bk__ticket.is-set .bk__tile span:first-child { color: var(--primary); }
.bk__ticket.is-set .bk__tile span:last-child { color: #64748B; }
.bk__ticket.is-set .bk__ticket-label { color: #3FB6E8; }
.bk__ticket.is-set .bk__ticket-time { color: #fff; }
.bk__ticket.is-held .bk__ticket-label { color: #34D399; }

/* The plan: before, on the call, always */
.bk__plan { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 14px; counter-reset: plan; }
.bk__plan li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.55; color: #94A3B8; }
.bk__plan li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 999px; background: #203A72; box-shadow: 0 0 0 3px rgba(20, 160, 222, .22); }
.bk__plan li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: -12px; width: 1px; background: rgba(148, 163, 184, .22); }
.bk__plan span { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E2E8F0; }

/* The working side */
.bk__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.bk__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 18px; border-bottom: 1px solid var(--border-light); }
.bk__steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
.bk__step { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; font: 700 14px/1 var(--font-sans); color: var(--muted-light); cursor: pointer; }
.bk__step:disabled { cursor: default; }
.bk__step > span { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 12.5px; background: #F1F5F9; color: var(--muted); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.bk__step.is-on { color: var(--fg); }
.bk__step.is-on > span { background: var(--primary); color: #fff; box-shadow: 0 0 0 5px #DDF1FB; }
.bk__step.is-done { color: var(--fg); }
.bk__step.is-done > span { background: #DCFCE7; color: #15803D; }
.bk__step:not(:disabled):not(.is-on):hover { color: var(--primary); }
.bk__step-line { width: 40px; height: 2px; border-radius: 2px; background: var(--border); }
.bk__body { flex: 1; min-height: 0; overflow: auto; padding: 22px 28px 26px; scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.bk__body > .alert { margin-bottom: 16px; }
.bk__body > .alert[hidden] { display: none; }
.bk__pane[hidden] { display: none; }
.bk__pane { animation: bk-slide .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes bk-slide { from { transform: translateX(14px); } }
.bk__pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.bk__pane-title { font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; }
.bk__soonest, .bk__change { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid #DDF1FB; background: #EFF8FD; color: var(--primary); font: 600 13px/1.2 var(--font-sans); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.bk__soonest b { font-weight: 800; }
.bk__soonest:hover, .bk__change:hover { border-color: #7CCDEF; background: #DDF1FB; transform: translateY(-1px); }
.bk__soonest[hidden] { display: none; }

/* Step 1: the month and the day's times side by side */
.bk__picker { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; align-items: start; }
.cal { padding: 18px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, #fff, #F7FBFE); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal__month { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--fg); }
.cal__nav { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: #475569; display: grid; place-items: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.cal__nav:hover:not(:disabled) { border-color: #7CCDEF; color: var(--primary); background: #EFF8FD; }
.cal__nav:disabled { opacity: .35; cursor: default; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__dow { margin-top: 16px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); text-align: center; }
.cal__dow span:nth-child(n+6) { color: #CBD5E1; }
.cal__grid { margin-top: 8px; }
.cal__day { position: relative; aspect-ratio: 1; max-height: 56px; width: 100%; border: 0; border-radius: 14px; background: transparent; color: #CBD5E1; font: 600 14.5px/1 var(--font-sans); cursor: default; }
.cal__day.is-open { color: var(--fg); font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(15, 23, 42, .04); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease; }
.cal__day.is-open::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: #14A0DE; }
.cal__day.is-open:not(.is-picked):hover { background: #EFF8FD; color: var(--primary); box-shadow: inset 0 0 0 1.5px #7CCDEF; transform: translateY(-1px); }
.cal__day.is-today:not(.is-picked) { box-shadow: inset 0 0 0 1px var(--border), inset 0 -3px 0 #FBBF24; }
.cal__day.is-picked { color: #fff; background: linear-gradient(160deg, #14A0DE, #203A72); box-shadow: 0 12px 24px -12px rgba(32, 58, 114, .9); transform: translateY(-1px); }
.cal__day.is-picked::after { background: #fff; }
.cal__day:focus-visible, .bk__slot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bk__times { min-width: 0; }
.bk__times-day { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); }
.bk__times-day small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.bk__times-list { margin-top: 12px; max-height: 392px; overflow: auto; padding: 2px 6px 14px 2px; scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent;
  -webkit-mask: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.bk__times-label { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.bk__times-label:not(:first-child) { margin-top: 16px; }
.bk__times-grid { display: grid; gap: 8px; }
.bk__slot { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 14px; border: 1px solid var(--border); background: #fff; color: var(--fg); font: 700 14.5px/1 var(--font-sans); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.bk__slot svg { display: none; }
.bk__slot:not(.is-picked):not(:disabled):hover { border-color: var(--primary); color: var(--primary); background: #F4FAFD; transform: translateX(2px); }
.bk__slot.is-picked { border-color: transparent; background: linear-gradient(160deg, #14A0DE, #203A72); color: #fff; box-shadow: 0 12px 24px -14px rgba(32, 58, 114, .9); }
.bk__slot.is-picked svg { display: block; }
.bk__slot:disabled { color: #CBD5E1; border-style: dashed; background: #FAFBFC; text-decoration: line-through; cursor: not-allowed; }
.bk__times-empty { margin-top: 12px; padding: 22px 16px; border-radius: 16px; border: 1px dashed var(--border); text-align: center; font-size: 13.5px; color: var(--muted); }
.bk__tz { display: flex; align-items: flex-start; gap: 7px; margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bk__tz > svg { flex: none; margin-top: 2px; color: var(--primary); }
.bk__tz [data-bk-yourtz]:not(:empty) { color: var(--fg); font-weight: 600; }

/* Step 2: the details */
.bk__fields { gap: 14px; }
.bk__fields .input.is-bad { border-color: #F87171; box-shadow: 0 0 0 4px #FEE2E2; }
.bk__label { margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--fg); }
.bk__label em { margin-left: 4px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted-light); }
.bk__topics { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-radius: 16px; transition: box-shadow .2s ease; }
.bk__topics.is-bad { box-shadow: 0 0 0 4px #FEE2E2; }
.bk__topic { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 32px 11px 11px; border-radius: 14px; border: 1px solid var(--border); background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.bk__topic:hover { border-color: #7CCDEF; transform: translateY(-1px); }
.bk__topic input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk__topic-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #F1F5F9; color: #475569; transition: background-color .15s ease, color .15s ease; }
.bk__topic-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: #334155; }
.bk__topic-tick { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: var(--primary); color: #fff; transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.5, .5, 1); }
.bk__topic:has(input:checked) { border-color: var(--primary); background: #F4FAFD; box-shadow: 0 10px 22px -16px rgba(32, 58, 114, .8); }
.bk__topic:has(input:checked) .bk__topic-ic { background: var(--primary); color: #fff; }
.bk__topic:has(input:checked) .bk__topic-name { color: var(--fg); }
.bk__topic:has(input:checked) .bk__topic-tick { transform: scale(1); }
.bk__topic:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.bk__notes { margin-top: 20px; }
.bk__notes textarea.input { min-height: 96px; }
.bk__human { margin-top: 18px; }
.bk__human:empty { display: none; }

/* The footer: what is picked, and the one button that moves things on */
.bk__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 28px; border-top: 1px solid var(--border-light); background: rgba(255, 255, 255, .96); }
.bk__picked { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.bk__picked svg { flex: none; color: var(--muted-light); }
.bk__picked.is-set { color: var(--fg); font-weight: 700; }
.bk__picked.is-set svg { color: var(--primary); }
.bk__actions { flex: none; display: flex; gap: 8px; }
.bk__actions [hidden] { display: none; }
.bk__cta { min-width: 190px; justify-content: center; }
.bk__cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Done: the ticket on the left turns green, the right side says what happens next */
.bk__done { flex: 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 40px 32px; text-align: center; overflow: auto; }
.bk__done[hidden] { display: none; }
.bk__form.is-done .bk__body, .bk__form.is-done .bk__foot { display: none; }
.bk__form.is-done .bk__steps { visibility: hidden; }
.bk__form.is-done .bk__head { border-bottom-color: transparent; }
.bk__done-mark { width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #34D399, #059669); box-shadow: 0 0 0 10px #ECFDF5, 0 22px 40px -18px rgba(5, 150, 105, .8); margin-bottom: 10px; }
.bk__done h3 { font-family: var(--font-display); font-size: 30px; letter-spacing: -.035em; }
.bk__done > p { max-width: 460px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.bk__next { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 12px; max-width: 440px; text-align: left; }
.bk__next li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bk__next li > span { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: #EFF8FD; color: var(--primary); font-weight: 800; font-size: 13px; }
.bk__next b { display: block; font-size: 14.5px; color: var(--fg); }

@media (max-width: 1023px) {
  .bk__form { grid-template-columns: 290px minmax(0, 1fr); }
  .bk__picker { grid-template-columns: minmax(0, 1fr); }
  .bk__times-list { max-height: none; -webkit-mask: none; mask: none; }
  .bk__times-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .bk__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bk { width: 100%; height: 100dvh; max-width: none; margin: 0; border-radius: 0; }
  .bk__form { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .bk__rail { gap: 12px; padding: 16px 18px 16px; overflow: visible; }
  .bk__title { margin-top: 6px; padding-right: 48px; font-size: 21px; }
  .bk__facts { margin-top: 10px; flex-wrap: nowrap; }
  .bk__facts li { padding: 4px 9px; font-size: 11.5px; }
  .bk__plan { display: none; }
  .bk__ticket { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px; }
  .bk__ticket::before, .bk__ticket::after { left: 72px; }
  .bk__tile { height: 62px; border-radius: 12px; }
  .bk__tile b { font-size: 23px; }
  .bk__ticket-body { padding-left: 12px; }
  .bk__ticket-time { font-size: 14px; }
  .bk__head { position: absolute; top: 14px; right: 14px; padding: 0; border: 0; }
  .bk__steps { display: none; }
  .bk__head .qdlg__close { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #E2E8F0; }
  .bk__body { padding: 18px 18px 22px; }
  .bk__pane-title { font-size: 21px; }
  .cal { padding: 14px 12px; border-radius: 18px; }
  .cal__dow, .cal__grid { gap: 4px; }
  .cal__day { border-radius: 11px; font-size: 13.5px; }
  .bk__times-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk__slot { height: 44px; font-size: 13.5px; }
  .bk__topics { grid-template-columns: minmax(0, 1fr); }
  .bk__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 10px; }
  .bk__picked { width: 100%; font-size: 13px; }
  .bk__actions { width: 100%; }
  .bk__actions .btn { flex: 1; }
  .bk__cta { min-width: 0; }
  .bk__done { padding: 32px 20px; }
}
/* Need help? (src/views/help.js): the small support sheet, and the quiet "Let us know" line wherever someone might get stuck. */
.hdlg { width: min(560px, calc(100vw - 32px)); }
.hdlg [data-help-plain][hidden], .hdlg__to[hidden] { display: none; }
/* Addressed to a teammate (About page mail icons, 2026-10-30): their photo, name, role and inbox replace the header. */
.hdlg__to { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 26px 24px 22px; border-bottom: 1px solid var(--border-light); background: linear-gradient(135deg, #EFF8FD, #fff 62%); }
.hdlg__photo { position: relative; width: 72px; height: 72px; }
.hdlg__photo img { display: block; width: 100%; height: 100%; border-radius: 22px; object-fit: cover; object-position: 50% 22%; background: var(--border-light); box-shadow: 0 14px 24px -14px rgba(8, 16, 40, .55); }
.hdlg__badge { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 10px; border: 3px solid #fff; background: var(--primary); color: #fff; display: grid; place-items: center; }
.hdlg__who { min-width: 0; }
.hdlg__name { margin-top: 5px; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.hdlg__role { margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--primary); }
.hdlg__email { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: #475569; overflow-wrap: anywhere; }
.hdlg__email svg { flex: none; color: var(--muted-light); }
.hdlg__to + .qdlg__body { padding-top: 20px; }
@media (max-width: 479px) {   /* phones: photo and close on top, the name, role and address get the full width below */
  .hdlg__to { row-gap: 14px; padding: 22px 18px 18px; }
  .hdlg__to .qdlg__close { grid-row: 1; grid-column: 3; }
  .hdlg__who { grid-row: 2; grid-column: 1 / -1; }
}
.help-line { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.help-line a { color: var(--primary); font-weight: 700; text-underline-offset: 3px; }
.help-line a:hover { text-decoration: underline; }
.auth__card .help-line { text-align: center; }
.panel .help-line { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-light); }
/* The footer's last strip. Wide screens: copyright and "Need help?" on the left, the Nebraska line on the right.
   Phones (the owner, 2026-10-29): one centered stack, the help link as a pill you can tap anywhere on, then the
   copyright, then the Nebraska line. */
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 21px; }
.footer__help { white-space: nowrap; }
.footer__help a { color: #CBD5E1; font-weight: 600; }
.footer__help a:hover { color: #fff; }
@media (max-width: 767px) {
  .footer__bottom { align-items: center; gap: 12px; padding-top: 26px; text-align: center; }
  .footer__legal { flex-direction: column-reverse; gap: 14px; }
  .footer__help { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 13px; color: #94A3B8; transition: border-color .2s ease, background-color .2s ease; }
  .footer__help a { color: #fff; }
  .footer__help a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .footer__help:hover { border-color: rgba(63, 182, 232, .45); background: rgba(32, 58, 114, .14); }
  .footer__place { line-height: 1.6; }
  .footer__place a { white-space: nowrap; }
}

@media (max-width: 639px) {
  .qdlg, .bk, .hdlg { width: 100%; max-width: none; }   /* the browser caps a modal at 100% - 38px otherwise; the quote sheet had it too. 100%, not 100vw: with a desktop scrollbar 100vw slid the sheet under it */
}

.hint-inline { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--muted-light); }

/* Blog cover photos (2026-10-28): the article cover keeps a 16:9 frame while it loads (no jump), and the photo credit sits
   under it, quiet and right-aligned. Card and tile crops come from object-position, set per photo (its focal point). */
.post-cover > img { display: block; height: auto; aspect-ratio: 16 / 9; background: #E2E8F0; }
.post-credit { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 6px; font-size: 12px; line-height: 1.5; color: var(--muted-light); text-align: right; }
.post-credit__label { margin-right: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.post-credit a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(100, 116, 139, .35); text-underline-offset: 2px; transition: color .2s ease, text-decoration-color .2s ease; }
.post-credit a:hover { color: var(--primary); text-decoration-color: currentColor; }
@media (max-width: 639px) { .post-credit { justify-content: flex-start; text-align: left; } }

/* Activity toasts, bottom-left (public/js/activity.js, ported from the original site 2026-10-28). The search one: a white
   card with a soft blue wash, a blue icon tile, a "● Live search · 3 min ago" line and one plain sentence. The Editor's
   Note is the navy variant and links to Add Your Business. Both run a thin bar along the bottom for the time left,
   which stops while the toast is hovered (the owner, 2026-10-28: the plain one needed the polish and the bar). */
.atoasts { position: fixed; left: 20px; bottom: 20px; z-index: 110; display: grid; gap: 10px; width: min(320px, calc(100vw - 40px)); pointer-events: none; }
.atoast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 13px 38px 15px 13px; border-radius: 18px; background: radial-gradient(110% 130% at 0% 0%, rgba(20, 160, 222, .08), transparent 58%), #fff; color: var(--fg); border: 1px solid var(--border); box-shadow: 0 22px 44px -20px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .06); font-family: var(--font-sans); text-decoration: none; opacity: 0; transform: translateX(-24px) scale(.98); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.atoast.is-in { opacity: 1; transform: none; }
.atoast__tile { position: relative; flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #14A0DE, #203A72); box-shadow: 0 10px 20px -10px rgba(32, 58, 114, .85), inset 0 1px 0 rgba(255, 255, 255, .25); }
.atoast__meta { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.atoast__dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 999px; background: #22C55E; }
.atoast__dot::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #22C55E; animation: atoast-pulse 1.8s ease-out infinite; }
.atoast__line { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #475569; }
.atoast__line strong { font-weight: 700; color: var(--fg); }
.atoast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(32, 58, 114, .08); }
.atoast__bar i { display: block; height: 100%; background: linear-gradient(90deg, #3FB6E8, #203A72); transform-origin: left center; }
.atoast.is-in .atoast__bar i { animation: atoast-life var(--life, 6s) linear forwards; }
.atoast.is-held .atoast__bar i { animation-play-state: paused; }
@keyframes atoast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.atoast--note .atoast__bar { background: rgba(255, 255, 255, .08); }
.atoast--note .atoast__bar i { background: linear-gradient(90deg, #7CCDEF, #14A0DE); }
.atoast__live { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 999px; background: #22C55E; border: 2px solid #fff; }
.atoast__live::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #22C55E; animation: atoast-pulse 1.8s ease-out infinite; }
@keyframes atoast-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2.2); opacity: 0; } }
.atoast__body { display: grid; gap: 2px; min-width: 0; }
.atoast__line2 { font-size: 14px; line-height: 1.4; color: var(--fg); }
.atoast__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7CCDEF; }
.atoast__cta { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: #7CCDEF; }
.atoast__close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted-light); display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.atoast__close:hover { background: var(--bg); color: var(--fg); }
.atoast__close:focus-visible, a.atoast:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.atoast--note { color: #E2E8F0; border-color: rgba(255, 255, 255, .08); background: radial-gradient(120% 90% at 100% 0%, rgba(14, 136, 191, .35), transparent 62%), linear-gradient(165deg, #0F1D40, #081028); box-shadow: 0 22px 44px -20px rgba(8, 16, 40, .8); }
.atoast--note .atoast__line2 { color: #E2E8F0; font-weight: 600; }
.atoast--note .atoast__tile { color: #7CCDEF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.atoast--note .atoast__live { border-color: #0B1633; }
.atoast--note .atoast__close { color: #64748B; }
.atoast--note .atoast__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.atoast--note:hover .atoast__cta { text-decoration: underline; text-underline-offset: 3px; }
.nav-open .atoasts { display: none; }
@media (max-width: 639px) { .atoasts { left: 10px; bottom: 10px; width: min(296px, calc(100vw - 20px)); } .atoast { gap: 10px; padding: 11px 34px 13px 11px; border-radius: 16px; } .atoast__tile { width: 36px; height: 36px; border-radius: 11px; } .atoast__line, .atoast__line2 { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .atoast { transform: none; transition: opacity .2s ease; } .atoast__live::after, .atoast__dot::after { animation: none; } .atoast__bar { display: none; } }
@media print { .atoasts { display: none; } }
/* On a listing the Message button sits bottom right. On phones it is a 56px chat bubble (2026-10-30), so the activity card
   keeps its own spot bottom left and simply stops short of the bubble; only a very narrow screen lifts it above. */
@media (max-width: 639px) { body:has(.msg-fab) .atoasts { width: min(296px, calc(100vw - 96px)); } }
@media (max-width: 359px) { body:has(.msg-fab) .atoasts { bottom: 80px; width: calc(100vw - 20px); } }

/* ---------- Phone pass (2026-10-28, the owner: the heroes were "ridiculously huge" on phones and rows of pills should be a
   dropdown). Under 640px every hero is compact: tighter padding, smaller titles, intros cut to a few lines, stats as one
   slim row, the "top" tiles left for the list below. Rows of pills become one dropdown (pillsToSelect in site.js). ---------- */
.pill-select { display: none; }
@media (max-width: 639px) {
  .has-pill-select { display: none !important; }
  .pill-select {
    display: block; width: 100%; min-height: 46px; padding: 0 42px 0 16px; border-radius: 14px; border: 1px solid var(--border);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
    -webkit-appearance: none; appearance: none; font: 600 15px/1.2 var(--font-sans); color: var(--fg); box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .3);
  }
  .pill-select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }
  .pill-select option { color: #0F172A; background: #fff; }
  .hero .pill-select, .oops .pill-select, .page-hero--dark .pill-select {
    background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23CBD5E1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
  .popular { margin-top: 14px; display: block; }
  /* The dropdown that replaces the popular pills is inserted before them (site.js), so it needs its own gap */
  .search + .pill-select { margin-top: 16px; }
  .pricing .pill-select, .faq-page .pill-select { margin: 0 auto 20px; max-width: 420px; }

  /* Home and Services heroes */
  .hero { padding: 30px 16px 26px; }
  .hero--page { padding-bottom: 28px; }
  .hero__badge { padding: 5px 12px 5px 9px; font-size: 9.5px; letter-spacing: .12em; }
  .hero__title { margin-top: 14px; font-size: 34px; line-height: 1; }
  .hero__title + .search, .hero__title + .hero__actions { margin-top: 18px; }
  .hero__title--sm { font-size: 30px; line-height: 1.05; }
  .hero__lead { display: none; }   /* the headline and the search say it; cut short it read as a broken sentence */
  .search { margin-top: 20px; border-radius: 20px; padding: 8px; }
  .hero__actions { margin-top: 18px; gap: 8px; }
  .hero__actions > * { flex: 1 1 100%; justify-content: center; }
  .stats { margin-top: 18px; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat { padding: 10px 4px; border-radius: 12px; text-align: center; }
  .stat__value { font-size: 17px; }
  .stat__label { margin-top: 4px; font-size: 8px; letter-spacing: .08em; line-height: 1.25; }

  /* Light page heroes (categories, locations, blog, about, contact, legal …) */
  .page-hero { padding: 24px 16px 20px; }
  .page-hero__title { margin-top: 8px; font-size: 27px; line-height: 1.08; }
  .page-hero__lead { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }
  .page-hero__count { font-size: 10.5px; }
  .page-hero .back { margin-bottom: 10px; }
  .page-hero .kicker { font-size: 10.5px; }
  .hero-search { margin-top: 16px; }
  .hero-search input { padding: 13px 16px 13px 44px; font-size: 15px; }
  .page-hero .tile-grid--top { display: none; }   /* the full list sits right below */

  /* Businesses directory */
  .dir-hero { padding: 26px 16px 20px; }
  .dir-hero__pill { padding: 5px 12px 5px 10px; font-size: 9.5px; }
  .dir-hero__title { margin-top: 12px; font-size: 30px; }
  .dir-hero__lead { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
  .dir-hero__chips { margin-top: 14px; gap: 8px; }
  .dir-hero__chips > * { padding: 7px 12px; font-size: 12.5px; }

  /* Listing and article heads */
  .listing-head { padding-top: 18px; }
  .post-head { padding: 22px 16px 18px; }
  .post-head__title { font-size: 26px; line-height: 1.1; }
  .post-head__lead { margin-top: 10px; font-size: 15.5px; }
  .post-head__meta { margin-top: 12px; gap: 6px 14px; font-size: 12px; }

  /* Not-found and restricted pages */
  .oops { min-height: 0; padding: 32px 16px 36px; }
  .oops__title { margin-top: 14px; font-size: 28px; }
  .oops__lead { margin-top: 10px; font-size: 15px; }
  .oops__search { margin-top: 18px; }
  .oops__links { margin-top: 16px; }
  .oops__inner > .pill-select { margin-top: 16px; }

  /* Sign in, create account, verify */
  .auth { min-height: 0; place-items: start center; padding: 18px 12px 32px; }
  .auth__card { padding: 24px 18px; border-radius: 20px; }
  .auth .form { margin-top: 18px; }

  /* The account area */
  .account { padding: 18px 16px 64px; }
  .account__kicker { font-size: 11px; }
  .account__title { margin-top: 4px; font-size: 24px; line-height: 1.15; }
  .account__sub { margin-top: 4px; font-size: 14px; }
  .account__head { gap: 12px; }
  .account__head > .btn, .account__head > a.btn { width: 100%; justify-content: center; }
  .account__row { gap: 14px; margin-top: 14px; }
  .account .panel { padding: 18px 16px; }
  .tiles { gap: 10px; margin-top: 18px; }
  .tiles > .tile { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px; }
  .tiles > .tile > .icon-sq { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; }
  .tiles > .tile > .tile__title { margin-top: 0; font-size: 16px; align-self: end; }
  .tiles > .tile > .tile__text { margin-top: 2px; font-size: 13px; line-height: 1.45; align-self: start; }
}

/* ---------- Logo boxes: the picture is always exactly the box's size and contained inside it, whatever its shape.
   In a grid box, height: 100% did not resolve, so the picture took its height from its own proportions: a square or
   tall logo grew past the box and was cut off (the owner, 2026-10-28). Placed absolutely, it cannot. ---------- */
.biz__logo, .upload__preview, .biz-row__logo, .listing-top__logo, .an-row__logo { position: relative; }
.biz__logo img, .upload__preview img, .biz-row__logo img, .listing-top__logo img, .an-row__logo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.biz__logo img { padding: 9px 14px; }
/* Smart logo spots (site.js): a logo on its own solid tile fills its spot in that colour; on the directory banner the
   cropped tile gets rounded corners and a soft lift, like an app icon. */
.is-tiled { border-color: rgba(15, 23, 42, .1); }
.biz__banner img.is-tile { border-radius: 14px; box-shadow: 0 12px 26px -16px rgba(15, 23, 42, .45); }

/* ---------- Info tips: a small (i) that opens a note on click (site.js). Shown at once, no fade, so it never
   depends on an animation to appear. --itip-shift keeps it on screen near either edge. ---------- */
.itip { position: relative; display: inline-flex; vertical-align: middle; }
.itip__btn { width: 24px; height: 24px; margin: -4px 0; border-radius: 999px; display: grid; place-items: center; color: var(--muted-light); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.itip__btn:hover, .itip.is-open .itip__btn { color: var(--primary); background: #EFF8FD; }
.itip__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.itip__pop { display: none; position: absolute; z-index: 40; top: calc(100% + 10px); left: 50%; width: max-content; max-width: min(300px, calc(100vw - 24px)); transform: translateX(calc(-50% + var(--itip-shift, 0px))); padding: 12px 14px; border-radius: 14px; background: #0B1633; border: 1px solid rgba(255, 255, 255, .08); color: #E2E8F0; box-shadow: 0 22px 44px -18px rgba(8, 16, 40, .6); font: 500 13px/1.55 var(--font-sans); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; }
.itip__pop::before { content: ""; position: absolute; top: -6px; left: calc(50% - var(--itip-shift, 0px)); width: 11px; height: 11px; background: inherit; border-left: inherit; border-top: inherit; border-radius: 3px 0 0 0; transform: translateX(-50%) rotate(45deg); }
.itip.is-open .itip__pop { display: block; }

/* ---------- Account → Analytics (the owner, 2026-10-28). A dark "pulse" panel holds the funnel (seen → opened →
   contacted) and its chart; tapping a step switches the chart. Light cards below break it down. ---------- */
.an ul, .an ol { list-style: none; padding: 0; }
.an .account__head { align-items: flex-end; }
.an .account__sub a { color: var(--accent); font-weight: 700; }
.an-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.an-range { background: #fff; }
.an-pick__select { width: 250px; min-height: 42px; padding: 0 38px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 15px; text-overflow: ellipsis; }

.an-pulse { position: relative; isolation: isolate; margin-top: 28px; padding: 24px 26px 20px; border-radius: 26px; background: var(--dark); color: #E2E8F0; box-shadow: 0 34px 60px -38px rgba(8, 16, 40, .75); }
.an-pulse::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(60% 70% at 50% -12%, rgba(20, 160, 222, 0.336), transparent 72%), radial-gradient(rgba(148, 163, 184, .13) 1px, transparent 1.4px); background-size: auto, 22px 22px; }
.an-pulse__range { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #64748B; }
.an-pulse__range span { margin-right: 10px; color: #7CCDEF; }
.an-pulse .itip__btn { color: #64748B; }
.an-pulse .itip__btn:hover, .an-pulse .itip.is-open .itip__btn { color: #fff; background: rgba(255, 255, 255, .1); }
.an-pulse .itip__pop { background: #fff; border-color: var(--border); color: var(--fg); }

.an-funnel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.an-step { position: relative; padding: 16px 18px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.an-step:hover { border-color: rgba(255, 255, 255, .18); }
.an-step.is-on { border-color: rgba(63, 182, 232, .55); background: linear-gradient(180deg, rgba(32, 58, 114, .26), rgba(32, 58, 114, .06)); box-shadow: 0 0 0 4px rgba(32, 58, 114, .14), inset 0 1px 0 rgba(255, 255, 255, .07); }
.an-step__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.an-step__hit:focus-visible { outline: 2px solid #3FB6E8; outline-offset: 2px; }
.an-step > p { position: relative; z-index: 2; pointer-events: none; }
.an-step > .an-step__label { z-index: 3; }
.an-step > .an-step__label:has(.itip.is-open) { z-index: 6; }
.an-step .itip { pointer-events: auto; }
.an-step__label { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.an-step.is-on .an-step__label { color: #B4E2F6; }
.an-step__value { margin-top: 10px; font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.an-step__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 12.5px; }
.an-step__note { color: #94A3B8; }
.an-delta { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.an-delta--up { color: #86EFAC; background: rgba(34, 197, 94, .13); }
.an-delta--down { color: #FCA5A5; background: rgba(239, 68, 68, .14); }
.an-delta--flat { color: #CBD5E1; background: rgba(255, 255, 255, .07); }
.an-rate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 78px; font-size: 11.5px; line-height: 1.2; color: #94A3B8; text-align: center; }
.an-rate b { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.an-rate__arrow { color: #3FB6E8; display: grid; }

.an-chart { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
.an-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.an-chart__peak { font-size: 13px; color: #94A3B8; }
.an-chart__peak b { color: #fff; font-weight: 700; }
.an-chart__sep { margin: 0 6px; color: #475569; }
.an-chart__plot { position: relative; height: 168px; margin-top: 12px; }
.an-bars { display: block; width: 100%; height: 100%; overflow: visible; }
.an-bars[hidden] { display: none; }
.an-bars__slot { fill: rgba(255, 255, 255, .035); transition: fill .15s ease; }
.an-bars__bar { fill: #14A0DE; transition: fill .15s ease; }
.an-bars--imp .an-bars__bar { fill: #3FB6E8; }
.an-bars--clicks .an-bars__bar { fill: #203A72; }
.an-bars g:hover .an-bars__slot { fill: rgba(255, 255, 255, .09); }
.an-bars g:hover .an-bars__bar { fill: #fff; }
.an-bars__avg { stroke: rgba(255, 255, 255, .38); stroke-width: 1; stroke-dasharray: 4 5; }
.an-chart__axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: #64748B; }

.an-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.an-card { grid-column: span 5; padding: 22px 24px; }
.an-card--wide { grid-column: span 7; }
.an-card--full { grid-column: 1 / -1; }
.an-card__head { display: flex; align-items: center; gap: 10px; }
.an-card__ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #EFF8FD; color: var(--primary); }
.an-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.an-card__lead { margin-top: 12px; font-size: 14px; color: var(--muted); }
.an-card__lead b { color: var(--fg); font-family: var(--font-display); font-size: 16px; }
.an-card__foot { margin-top: auto; padding-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.an-card__foot b { color: var(--fg); }
.an-none { margin-top: 16px; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; font-size: 13.5px; color: var(--muted); text-align: center; }
.an-sub { margin-top: 18px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }

.an-meter { display: block; height: 6px; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.an-meter i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.an-acts { display: grid; gap: 14px; margin-top: 18px; }
.an-act { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 42px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 7px; align-items: center; }
.an-act__ic { grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #F8FAFC; border: 1px solid var(--border); color: var(--fg); }
.an-act__label { font-size: 14px; font-weight: 600; }
.an-act__n { font-family: var(--font-display); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-act__pct { grid-column: 4; grid-row: 1; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-light); text-align: right; }
.an-act .an-meter { grid-column: 2 / -1; grid-row: 2; }

.an-split { display: flex; gap: 3px; height: 12px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: #F1F5F9; }
.an-split i { display: block; height: 100%; min-width: 4px; }
.an-split__mobile, .an-legend__dot--mobile { background: #203A72; }
.an-split__desktop, .an-legend__dot--desktop { background: #0F172A; }
.an-split__tablet, .an-legend__dot--tablet { background: #7CCDEF; }
.an-g--search { background: #203A72; }
.an-g--lj { background: #16A34A; }
.an-g--ai { background: #F59E0B; }
.an-g--social { background: #14A0DE; }
.an-g--web { background: #94A3B8; }
.an-g--direct { background: #0F172A; }
.an-dot, .an-legend__dot { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.an-legend { display: grid; gap: 10px; margin-top: 16px; }
.an-legend li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #334155; }
.an-legend li svg { color: var(--muted-light); }
.an-legend b { margin-left: auto; font-family: var(--font-display); font-weight: 800; color: var(--fg); }
.an-legend--row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.an-legend--row li { gap: 6px; font-size: 12.5px; color: var(--muted); }
.an-legend--row b { margin-left: 0; font-size: 12.5px; }
.an-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 18px; }
.an-mini > div { padding: 12px 14px; border-radius: 14px; background: #F8FAFC; border: 1px solid var(--border-light); }
.an-mini__label { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.an-mini b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.an-bars-list { display: grid; gap: 11px; margin-top: 18px; }
.an-bars-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.an-bars-list__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.an-bars-list .an-meter { flex: none; width: 34%; }
.an-bars-list b { flex: none; min-width: 42px; text-align: right; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.an-hosts { display: grid; gap: 6px; margin-top: 10px; }
.an-hosts li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.an-hosts b { color: var(--fg); }

.an-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin-top: 12px; }
.an-words li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.an-words__i { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted-light); }
.an-words a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--fg); }
.an-words a:hover { color: var(--primary); }
.an-words b { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }

.an-list { isolation: isolate; margin-top: 18px; padding: 22px 24px 12px; }
.an-list__hint { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.an-list__cols, .an-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) repeat(4, 76px) 120px 30px; column-gap: 14px; align-items: center; }
.an-list__cols { margin-top: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.an-list__cols span:first-child { grid-column: span 2; }
.an-row { position: relative; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.an-rows > .an-row:last-child { border-bottom: 0; }
.an-row.is-picked::before { content: ""; position: absolute; inset: 4px -12px; z-index: -1; border-radius: 14px; background: #EFF8FD; }
.an-row__logo { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; overflow: hidden; color: var(--muted-light); }
.an-row__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.an-row__id { min-width: 0; }
.an-row__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); }
.an-row__name:hover, .an-row.is-picked .an-row__name { color: var(--primary); }
.an-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.an-row__meta .pill { padding: 2px 8px; font-size: 9.5px; }
.an-row__stars { display: inline-flex; align-items: center; gap: 3px; color: var(--fg); font-weight: 700; }
.an-row__stars svg { color: var(--highlight); fill: var(--highlight); }
.an-row__stars span { color: var(--muted-light); font-weight: 500; }
.an-row__nums { display: contents; }
.an-row__nums dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.an-row__nums dd { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-spark { display: block; width: 120px; height: 32px; overflow: visible; }
.an-spark__area { fill: rgba(32, 58, 114, .1); }
.an-spark__line { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.an-row__open { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--muted-light); transition: color .15s ease, background-color .15s ease; }
.an-row__open:hover { color: var(--primary); background: #EFF8FD; }
.an-more > summary { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 14px; font-weight: 700; color: var(--primary); cursor: pointer; list-style: none; }
.an-more > summary::-webkit-details-marker { display: none; }
.an-more[open] > summary { display: none; }
.an-more .an-rows { border-top: 1px solid var(--border-light); }
.an-empty { margin-top: 28px; align-items: center; text-align: center; padding: 40px 24px; }
.an-empty__title { margin-top: 16px; font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.an-empty__text { max-width: 520px; margin: 8px auto 20px; color: var(--muted); line-height: 1.6; }

@media (max-width: 1023px) {
  .an-funnel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
  .an-step__value { font-size: 32px; }
  .an-rate { min-width: 56px; }
  .an-list__cols, .an-row { grid-template-columns: 44px minmax(0, 1fr) repeat(4, 64px) 30px; }
  .an-list__cols span:nth-child(6), .an-row__spark { display: none; }
  .an-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .an-card, .an-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .an .account__head { align-items: stretch; }
  .an-controls { width: 100%; }
  .an-controls > *, .an-pick, .an-pick__select { width: 100%; }
  .an-pulse { margin-top: 18px; padding: 16px 14px 14px; border-radius: 20px; }
  .an-pulse__range { font-size: 9.5px; letter-spacing: .12em; }
  .an-funnel { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .an-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 14px; }
  .an-step__label { grid-column: 1; font-size: 9.5px; letter-spacing: .12em; }
  .an-step__value { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 30px; }
  .an-step__foot { grid-column: 1; margin-top: 6px; font-size: 12px; }
  .an-rate { flex-direction: row; justify-content: flex-start; gap: 6px; min-width: 0; padding: 6px 0 6px 18px; font-size: 11.5px; }
  .an-rate b { font-size: 14px; }
  .an-rate__arrow { transform: rotate(90deg); }
  .an-chart { margin-top: 12px; padding-top: 12px; }
  .an-chart__peak { font-size: 12px; }
  .an-chart__plot { height: 120px; margin-top: 10px; }
  .an-grid { gap: 12px; margin-top: 12px; }
  .an-card { padding: 18px 16px; border-radius: 18px; }
  .an-words { grid-template-columns: 1fr; }
  .an-list { margin-top: 12px; padding: 18px 16px 8px; border-radius: 18px; }
  .an-list__hint, .an-list__cols { display: none; }
  .an-row { grid-template-columns: 40px minmax(0, 1fr) 30px; row-gap: 10px; padding: 14px 0; }
  .an-row__logo { width: 40px; height: 40px; }
  .an-row__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; grid-column: 1 / -1; grid-row: 2; }
  .an-row__nums > div { padding: 8px 10px; border-radius: 12px; background: #F8FAFC; }
  .an-row__nums dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }
  .an-row__nums dd { margin-top: 2px; font-size: 15px; }
  .an-row.is-picked::before { inset: 2px -8px; }
}

/* ---------- Home: "Latest from the Blog" and the three steps, matched to the owner's reference (2026-10-28). ---------- */
/* The feature card: the photo fills the whole card under a dark fade, the words sit at the bottom. (The photo had
   been caught by `.post-hero > *` and laid out as a block, which made the card tall and the photo look framed.) */
.post-hero { isolation: isolate; }
.post-hero > .post-hero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.blog-grid { gap: 20px; margin-top: 48px; }
.blog-grid > .post-hero { min-height: 340px; padding: 38px 40px; border-radius: 24px; }
.blog-grid > .post-hero--img::before { background: linear-gradient(180deg, rgba(8, 16, 40, 0) 22%, rgba(8, 16, 40, .5) 52%, rgba(8, 16, 40, .94) 100%); }
.blog-grid .post-hero__meta { gap: 12px; font-size: 11.5px; letter-spacing: .16em; color: #CBD5E1; }
.blog-grid .post-hero__meta .pill-sm { padding: 5px 12px; border: 0; background: var(--primary); color: #fff; letter-spacing: .14em; }
.blog-grid .post-hero__title { margin-top: 16px; max-width: 700px; font-size: 26px; line-height: 1.15; letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 18px rgba(8, 16, 40, .35); }
.blog-grid .post-hero__excerpt { margin-top: 14px; max-width: 660px; font-size: 15.5px; line-height: 1.6; color: #E2E8F0; -webkit-line-clamp: 2; }
.blog-grid .post-hero__more { margin-top: 22px; color: #fff; }
/* The other articles: picture on the left, date and title beside it. */
.blog-grid > .post { flex-direction: row; align-items: stretch; padding: 12px; border-radius: 22px; }
.blog-grid .post__thumb { flex: none; width: 128px; min-height: 104px; aspect-ratio: auto; border-radius: 14px; }
.blog-grid .post__body { justify-content: center; padding: 6px 12px 6px 18px; }
.blog-grid .post__date { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted-light); }
.blog-grid .post__title { margin-top: 8px; font-size: 16px; line-height: 1.38; letter-spacing: -.01em; }
@media (min-width: 768px) { .blog-grid .post-hero__title { font-size: 32px; } }
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 198px 198px; grid-auto-rows: 138px; }
  .blog-grid > .post-hero { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .blog-grid .post-hero__title { font-size: 36px; }
  .blog-grid .post__thumb { width: 160px; min-height: 0; }
}

/* The steps: intro at the top left, a timeline of dark icons on a thin blue line, one roomy card per step. */
.steps--home { align-items: start; }
@media (min-width: 1024px) { .steps--home { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 64px; } }
.steps__intro { padding-top: 14px; }
.steps--home .h2 { max-width: 440px; }
@media (min-width: 1024px) { .steps--home .h2 { font-size: 52px; line-height: 1.04; letter-spacing: -.035em; } }
.steps--home .lead { margin-top: 28px; max-width: 520px; font-size: 17px; line-height: 1.85; }
.steps__intro > .btn { margin-top: 36px; }
.steps--home .steps__list { gap: 22px; }
.steps--home .steps__list::before { left: 27px; top: 56px; bottom: -48px; width: 1.5px; background: linear-gradient(180deg, #14A0DE 0%, rgba(20, 160, 222, .6) 62%, rgba(20, 160, 222, 0) 100%); }
.steps--home .step { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; }
.steps--home .step__icon { width: 56px; height: 56px; border-radius: 14px; background: #0B1633; box-shadow: 0 12px 24px -14px rgba(8, 16, 40, .7); }
.steps--home .step__card { padding: 44px 34px 38px 28px; border-radius: 22px; border-color: #E6EAF0; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -30px rgba(15, 23, 42, .28); }
.steps--home .step__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; }
.steps--home .step__title { margin-top: 12px; font-family: var(--font-sans); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--fg); }
.steps--home .step__text { margin-top: 14px; padding-right: 0; font-size: 16px; line-height: 1.75; color: #475569; }
.steps--home .step__num { top: 28px; right: 30px; font-size: 36px; color: #EEF1F6; }
@media (max-width: 639px) {
  .blog-grid { margin-top: 28px; gap: 14px; }
  .blog-grid > .post-hero { min-height: 300px; padding: 24px 22px; border-radius: 20px; }
  .blog-grid .post-hero__title { font-size: 23px; }
  .blog-grid .post-hero__excerpt { font-size: 14px; }
  .blog-grid .post__thumb { width: 108px; min-height: 92px; }
  .blog-grid .post__title { font-size: 15px; }
  .steps__intro { padding-top: 0; }
  .steps--home .steps__list { gap: 14px; }
  .steps--home .steps__list::before { left: 21px; top: 44px; }
  .steps--home .step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .steps--home .step__icon { width: 44px; height: 44px; border-radius: 12px; }
  .steps--home .step__card { padding: 24px 20px 22px; border-radius: 18px; }
  .steps--home .step__title { margin-top: 8px; font-size: 19px; }
  .steps--home .step__text { margin-top: 8px; font-size: 14.5px; line-height: 1.65; }
  .steps--home .step__num { top: 18px; right: 18px; font-size: 26px; }
}

/* A tile with no businesses yet (the owner, 2026-10-28, as on the reference): greyed back, still a link, and it still
   lifts and lights up on hover, in a paler blue than a tile with businesses. */
.tile--empty { background: #FBFCFE; border-color: #EEF1F6; }
.tile--empty .icon-sq, .tile--empty .tile__badge { background: #EEF2F8; color: #5F7091; }
.tile--empty .tile__name { color: #64748B; }
.tile--empty .tile__count { color: var(--muted-light); }
.tile--empty .card__arrow { color: #CBD5E1; }
a.tile--empty:hover { background: #F7FBFE; border-color: #CFE9F7; box-shadow: 0 26px 50px -30px rgba(32, 58, 114, .32), 0 0 0 1px rgba(32, 58, 114, .05); }
a.tile--empty:hover .icon-sq, a.tile--empty:hover .tile__badge { background: #0E88BF; color: #fff; box-shadow: 0 12px 24px -14px rgba(32, 58, 114, .55); }
a.tile--empty:hover .tile__name { color: #0B78A9; }
a.tile--empty:hover .card__arrow { color: #3FB6E8; }

/* FAQ page category tabs (the owner, 2026-10-28: better than the reference's emoji pills). A roomy white bar; each tab
   is an icon tile, the name and how many questions it holds; the open one is blue with a soft glow. Phones get the
   dropdown (pillsToSelect). */
.faq-page .faq-tabs { gap: 6px; padding: 7px; margin-bottom: 40px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 40px -28px rgba(15, 23, 42, .35), 0 1px 2px rgba(15, 23, 42, .04); }
.faq-tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; font-size: 14px; font-weight: 700; letter-spacing: -.005em; color: #475569; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease; }
.faq-tabs__ic { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: #EFF8FD; color: var(--primary); transition: background-color .2s ease, color .2s ease; }
.faq-tabs__n { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: #F1F5F9; color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: center; transition: background-color .2s ease, color .2s ease; }
.faq-tabs button:hover { background: #F8FAFC; color: var(--fg); }
.faq-tabs button.is-active { background: linear-gradient(135deg, #0E88BF, #203A72); color: #fff; box-shadow: 0 14px 28px -14px rgba(32, 58, 114, .85), inset 0 1px 0 rgba(255, 255, 255, .18); }
.faq-tabs button.is-active .faq-tabs__ic { background: rgba(255, 255, 255, .16); color: #fff; }
.faq-tabs button.is-active .faq-tabs__n { background: rgba(255, 255, 255, .2); color: #fff; }
.faq-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Google search presence (2026-10-29): the badge on My Businesses and the listing's "on Google" page ---------- */
.g-badge { --c: #475569; --bgc: #F1F5F9; --bd: #E2E8F0; --dot: #94A3B8; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 4px 8px 4px 4px; border: 1px solid var(--bd); border-radius: 999px; background: var(--bgc); font-size: 12.5px; font-weight: 700; color: var(--c); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.g-badge--good { --c: #15803D; --bgc: #F0FDF4; --bd: #BBF7D0; --dot: #16A34A; }
.g-badge--wait { --c: #B45309; --bgc: #FFFBEB; --bd: #FDE68A; --dot: #F59E0B; }
.g-badge--bad { --c: #B91C1C; --bgc: #FEF2F2; --bd: #FECACA; --dot: #DC2626; }
.g-badge__ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--dot); color: #fff; }
.g-badge > svg:last-child { opacity: .55; transition: transform .2s ease, opacity .2s ease; }
.g-badge:hover { border-color: var(--dot); box-shadow: 0 6px 14px -10px var(--dot); transform: translateY(-1px); }
.g-badge:hover > svg:last-child { opacity: 1; transform: translateX(2px); }

.gx { max-width: 960px; }
.gx > .card { animation: gx-in .55s cubic-bezier(.2, .7, .3, 1) backwards; }
.gx > .card:nth-of-type(2) { animation-delay: .08s; }
.gx > .card:nth-of-type(3) { animation-delay: .16s; }
@keyframes gx-in { from { opacity: .35; transform: translateY(10px); } }
.gx__on { color: var(--primary); }

.gx-hero { --tone: #64748B; --tint: rgba(100, 116, 139, .1); position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 28px; margin-top: 24px; padding: 30px 32px; overflow: hidden; border-radius: 24px; background: radial-gradient(90% 140% at 0% 0%, var(--tint), transparent 60%), #fff; }
.gx-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tone), transparent 85%); }
.gx-hero--good { --tone: #16A34A; --tint: rgba(22, 163, 74, .11); }
.gx-hero--wait { --tone: #F59E0B; --tint: rgba(245, 158, 11, .12); }
.gx-hero--bad { --tone: #DC2626; --tint: rgba(220, 38, 38, .1); }
.gx-hero__mark { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.gx-hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gx-hero__ring circle { fill: var(--tint); stroke: var(--tone); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 252; animation: gx-ring 1s cubic-bezier(.65, 0, .35, 1) .15s backwards; }
.gx-hero--wait .gx-hero__ring circle { stroke-dasharray: 6 10; animation: gx-spin 14s linear infinite; transform-origin: 44px 44px; }
.gx-hero--idle .gx-hero__ring circle { stroke-dasharray: 2 8; }
.gx-hero__glyph { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--tone); box-shadow: 0 12px 26px -14px var(--tone); animation: gx-pop .5s cubic-bezier(.34, 1.56, .64, 1) .5s backwards; }
.gx-hero--good .gx-hero__glyph { background: var(--tone); color: #fff; }
.gx-hero--good .gx-hero__glyph path { stroke-dasharray: 26; animation: gx-draw .45s ease-out .85s backwards; }
@keyframes gx-ring { from { stroke-dashoffset: 252; } }
@keyframes gx-spin { to { transform: rotate(360deg); } }
@keyframes gx-pop { from { transform: scale(.6); } }
@keyframes gx-draw { from { stroke-dashoffset: 26; } }
.gx-hero__body { min-width: 0; }
.gx-hero__kicker { font: 700 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tone); }
.gx-hero__title { margin-top: 8px; font-size: 28px; letter-spacing: -.02em; }
.gx-hero__text { margin-top: 8px; max-width: 620px; font-size: 15px; line-height: 1.6; color: #475569; }
.gx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border-light); }
.gx-facts dt { font: 700 10px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.gx-facts dd { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; color: var(--fg); }
.gx-hero__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.gx-card { margin-top: 18px; padding: 24px 26px; border-radius: 22px; }
.gx-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.gx-card__head > div { flex: 1; min-width: 0; }
.gx-card__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #EFF8FD; color: var(--primary); }
.gx-card__title { font-size: 18px; letter-spacing: -.01em; }
.gx-card__sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.gx-card__act { flex: none; }
.gx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gx-stat { display: flex; flex-direction: column; padding: 16px 16px 14px; border: 1px solid var(--border-light); border-radius: 16px; background: var(--bg); }
.gx-stat__n { font: 800 30px/1 var(--font-display); letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.gx-stat__l { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--fg); }
.gx-stat__h { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.gx-queries { margin-top: 20px; }
.gx-queries__head, .gx-query { display: grid; grid-template-columns: minmax(0, 1fr) 72px 60px 72px; gap: 12px; align-items: center; }
.gx-queries__head { padding: 0 2px 8px; border-bottom: 1px solid var(--border); font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.gx-queries__head span:not(:first-child), .gx-query span:not(:first-child) { text-align: right; }
.gx-query { padding: 11px 2px; border-bottom: 1px solid var(--border-light); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); animation: gx-in .45s ease calc(.25s + var(--i) * 40ms) backwards; }
.gx-query__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--fg); }
.gx-query i { display: none; font-style: normal; color: var(--muted-light); }
.gx-empty { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px dashed var(--border); border-radius: 16px; background: var(--bg); font-size: 14px; line-height: 1.55; color: var(--muted); }
.gx-empty > svg { flex: none; margin-top: 2px; color: var(--muted-light); }
.gx-empty b { color: var(--fg); }
.gx-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted-light); }
.gx-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gx-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.gx-list li:last-child { border-bottom: 0; }
.gx-list__tick { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px dashed #CBD5E1; border-radius: 50%; color: #fff; }
.gx-list li.is-done .gx-list__tick { border: 0; background: var(--success); }
.gx-list b { display: block; font-size: 14px; color: var(--fg); }
.gx-list span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gx-list li.is-done b { color: var(--muted); }
@media (max-width: 720px) {
  .gx-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .gx-hero__mark { width: 84px; height: 84px; }
  .gx-hero__glyph { width: 50px; height: 50px; }
  .gx-hero__title { font-size: 24px; }
  .gx-card { padding: 20px 18px; }
  .gx-card__head { flex-wrap: wrap; }
  .gx-card__act { width: 100%; }
  .gx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-stat__n { font-size: 26px; }
  /* Phones: each search on its own line, its numbers underneath with their names. */
  .gx-queries__head { display: none; }
  .gx-query { grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 14px; font-size: 12.5px; }
  .gx-query__q { grid-column: 1 / -1; white-space: normal; font-size: 14px; }
  .gx-query span:not(:first-child) { text-align: left; }
  .gx-query i { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .gx > .card, .gx-query, .gx-hero__ring circle, .gx-hero__glyph, .gx-hero__glyph path { animation: none; } }

/* ==========================================================================================================
   Ask a Local Pro (2026-10-29): a conversation. The hub's hero floats sample questions over the navy dot grid,
   question cards are speech bubbles with the lead answer tucked under them, and on a question page the answers
   hang off a thread, each pro's logo sitting on the line. src/views/ask.js.
   ========================================================================================================== */
/* Rise only, never fade from nothing: a paused or hidden tab must still show every card. */
@keyframes ask-up { from { transform: translateY(12px); } }
@keyframes ask-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); } 50% { transform: translate3d(0, -12px, 0) rotate(var(--r, 0deg)); } }
@keyframes ask-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-6px); opacity: 1; } }
@keyframes ask-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ask-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 211, 77, .0), var(--shadow-card); } 50% { box-shadow: 0 0 0 6px rgba(252, 211, 77, .28), var(--shadow-card); } }

/* ---- the hub's hero ---- */
.ask-hero { padding-bottom: 64px; }
.ask-hero__title { margin-top: 20px; }
.ask-hero__lead { margin: 18px auto 0; max-width: 600px; color: #94A3B8; font-size: 17px; line-height: 1.6; }
.ask-hero__float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ask-float { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px 16px 16px 5px; background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #CBD5E1; font-size: 13px; font-weight: 600; white-space: nowrap; animation: ask-drift 9s ease-in-out infinite; opacity: .9; }
.ask-float svg { color: #3FB6E8; }
.ask-float--1 { top: 16%; left: 4%; --r: -3deg; }
.ask-float--2 { top: 30%; right: 3%; --r: 3deg; animation-delay: -3s; animation-duration: 11s; border-radius: 16px 16px 5px 16px; }
.ask-float--3 { bottom: 26%; left: 2%; --r: 2deg; animation-delay: -6s; animation-duration: 10s; }
.ask-float--4 { bottom: 14%; right: 5%; --r: -2deg; animation-delay: -2s; animation-duration: 12s; border-radius: 16px 16px 5px 16px; }
@media (max-width: 1180px) { .ask-float { display: none; } }

.ask-flash { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 22px auto 0; padding: 14px 18px; border-radius: 16px; text-align: left; font-size: 14.5px; line-height: 1.55; animation: ask-up .45s cubic-bezier(.2, .8, .2, 1) both; }
.ask-flash svg { flex: none; margin-top: 2px; }
.ask-flash b { margin-right: 4px; }
.ask-flash--ok { background: rgba(34, 197, 94, .12); border: 1px solid rgba(74, 222, 128, .35); color: #DCFCE7; }
.ask-flash--info { background: rgba(20, 160, 222, .14); border: 1px solid rgba(63, 182, 232, .35); color: #DDF1FB; }
.ask-flash--error { background: rgba(239, 68, 68, .14); border: 1px solid rgba(248, 113, 113, .4); color: #FEE2E2; }
.ask-flash--light.ask-flash--ok { background: #F0FDF4; border-color: #BBF7D0; color: #14532D; }
.ask-flash--light.ask-flash--info { background: #EFF8FD; border-color: #B4E2F6; color: #182E5C; }
.ask-flash--light { margin: 0 0 18px; max-width: none; }

/* ---- the composer ---- */
.ask-compose { position: relative; max-width: 780px; margin: 26px auto 0; padding: 16px 18px 18px; border-radius: 28px; background: #fff; color: var(--fg); text-align: left;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 8px rgba(255, 255, 255, .04); animation: ask-up .6s cubic-bezier(.2, .8, .2, 1) .1s both; }
.ask-compose--compact { margin-top: 0; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.ask-to { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 7px 10px 7px 7px; border: 1px solid #B4E2F6; border-radius: 14px; background: #EFF8FD; font-size: 14px; color: #182E5C; }
.ask-to small { margin-left: 4px; color: #64748B; }
.ask-to__logo { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 1px solid #DDF1FB; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.ask-to__logo:has(img) { background: #fff; }
.ask-to__logo img { width: 100%; height: 100%; object-fit: contain; }
.ask-to__x { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #64748B; }
.ask-to__x:hover { background: #DDF1FB; color: var(--primary); }
.ask-compose__q { position: relative; display: block; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.ask-compose__q textarea { display: block; width: 100%; min-height: 86px; padding: 10px 12px 18px; border: 0; outline: 0; resize: none; background: transparent; color: var(--fg);
  font: 700 clamp(19px, 2.3vw, 23px)/1.35 var(--font-display); letter-spacing: -.015em; }
.ask-compose__q textarea::placeholder { color: #A3AFC2; transition: opacity .22s ease; }
.ask-compose__q textarea.is-swapping::placeholder { opacity: 0; }
.ask-compose__count { position: absolute; right: 12px; bottom: 8px; font: 600 11px/1 var(--font-mono); color: var(--muted-light); }
.ask-compose__more { margin-top: 4px; }
.ask-compose__more summary { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--primary); }
.ask-compose__more summary::-webkit-details-marker { display: none; }
.ask-compose__more summary:hover { background: #EFF8FD; }
.ask-compose__more small { font-weight: 600; color: var(--muted-light); }
.ask-compose__more[open] summary svg { transform: rotate(45deg); }
.ask-compose__more summary svg { transition: transform .2s ease; }
.ask-compose__more textarea { display: block; width: 100%; min-height: 90px; margin: 4px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #F8FAFC; font: 15px/1.55 var(--font-sans); color: var(--fg); resize: vertical; }
.ask-compose__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr); gap: 10px; margin-top: 12px; }
.ask-compose__row--you { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ask-field { display: grid; gap: 5px; min-width: 0; }
.ask-field > span { font: 700 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.ask-field select, .ask-field input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 13px; background: #F8FAFC; font: 600 15px var(--font-sans); color: var(--fg); }
.ask-field select { padding-right: 32px; -webkit-appearance: none; appearance: none;
  background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px; }
.ask-field select:focus, .ask-field input:focus, .ask-compose__more textarea:focus { outline: 0; border-color: var(--primary); background-color: #fff; box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }
.ask-compose .cf-turnstile, .ask-compose [data-turnstile] { margin-top: 12px; }
.ask-compose__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ask-compose__fine { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.ask-compose__fine svg { flex: none; color: #16A34A; }
.ask-compose__go { height: 50px; padding: 0 26px; border-radius: 999px; font-size: 16px; gap: 8px; box-shadow: 0 16px 30px -14px rgba(32, 58, 114, .75); }
.ask-compose__go:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .ask-compose { padding: 12px 12px 14px; border-radius: 24px; }
  .ask-compose__row, .ask-compose__row--you { grid-template-columns: minmax(0, 1fr); }
  .ask-compose__foot { flex-direction: column-reverse; align-items: stretch; }
  .ask-compose__go { width: 100%; justify-content: center; }
}

.ask-how { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px auto 0; padding: 0; list-style: none; font-size: 14px; color: #CBD5E1; }
.ask-how li { display: inline-flex; align-items: center; gap: 10px; }
.ask-how b { color: #fff; }
.ask-how__n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(124, 205, 239, .35); border-radius: 50%; background: rgba(20, 160, 222, .18); font: 700 12px/1 var(--font-mono); color: #fff; }
.ask-stats { margin-top: 34px; }
@media (min-width: 768px) { .ask-stats { grid-template-columns: repeat(4, 1fr); } }

/* ---- the board ---- */
.ask-board__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .ask-board__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; } }
.ask-tabs { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 8px 20px -16px rgba(15, 23, 42, .3); }
.ask-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; transition: background .2s ease, color .2s ease; }
.ask-tab span { padding: 2px 8px; border-radius: 999px; background: #F1F5F9; font: 700 11px/1.4 var(--font-mono); color: var(--muted); }
.ask-tab:hover { color: var(--fg); }
.ask-tab.is-active { background: var(--dark); color: #fff; }
.ask-tab.is-active span { background: rgba(255, 255, 255, .16); color: #fff; }
.ask-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ask-filter select { height: 42px; min-width: 210px; padding: 0 34px 0 13px; border: 1px solid var(--border); border-radius: 12px; font: 600 14px var(--font-sans); color: var(--fg); -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px; }
.ask-filter select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }
.ask-filter__clear { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ask-filter__clear:hover { color: var(--primary); }
.ask-tab { white-space: nowrap; }
@media (max-width: 560px) { .ask-tabs { display: flex; } .ask-tab { flex: 1; justify-content: center; gap: 6px; padding: 9px 6px; font-size: 13px; } .ask-filter label { flex: 1 1 0; min-width: 0; } .ask-filter select { width: 100%; min-width: 0; padding: 0 28px 0 11px; font-size: 13px; text-overflow: ellipsis; background-position: right 9px center; } }   /* the two pickers share one row on phones (2026-10-30) */
@media (max-width: 400px) { .ask-tab svg { display: none; } }

.ask-list { display: grid; gap: 20px; margin-top: 22px; }
.ask-q { animation: ask-up .5s cubic-bezier(.2, .8, .2, 1) both; }
.ask-q:nth-child(2) { animation-delay: .05s; } .ask-q:nth-child(3) { animation-delay: .1s; } .ask-q:nth-child(4) { animation-delay: .15s; } .ask-q:nth-child(n + 5) { animation-delay: .2s; }
.ask-q__bubble { position: relative; padding: 18px 20px 16px; border: 1px solid var(--border); border-radius: 22px 22px 22px 8px; background: #fff; box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ask-q__bubble::after { content: ""; position: absolute; left: 22px; bottom: -8px; width: 15px; height: 15px; background: #fff; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.ask-q:hover .ask-q__bubble { transform: translateY(-2px); border-color: #C7D6EE; box-shadow: 0 26px 46px -28px rgba(15, 23, 42, .35); }
.ask-q__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ask-q__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ask-cat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid #DDF1FB; border-radius: 999px; background: #EFF8FD; font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none; }
a.ask-cat:hover { border-color: #7CCDEF; }
.ask-q__title { margin-top: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.ask-q__title a { color: var(--fg); text-decoration: none; }
.ask-q__title a:hover { color: var(--primary); }
.ask-q__body { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ask-q__lead { position: relative; display: flex; gap: 12px; margin: 16px 0 0 34px; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 8px 20px 20px 20px; background: #F8FAFC; color: inherit; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.ask-q__lead:hover { border-color: #B4E2F6; background: #F4FAFD; }
.ask-q__logo, .ask-leaders__logo, .ask-pros__logo, .ask-a__logo, .ask-reply__logo, .ask-asked__logo { flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(135deg, #F1F5F9, #E2E8F0); color: var(--primary); font-family: var(--font-display); font-weight: 800; }
.ask-q__logo:has(img), .ask-leaders__logo:has(img), .ask-pros__logo:has(img), .ask-a__logo:has(img), .ask-reply__logo:has(img), .ask-asked__logo:has(img) { background: #fff; }
.ask-q__logo img, .ask-leaders__logo img, .ask-pros__logo img, .ask-a__logo img, .ask-reply__logo img, .ask-asked__logo img { width: 100%; height: 100%; object-fit: contain; }
.ask-q__logo { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }
.ask-q__lead-main { min-width: 0; }
.ask-q__pro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--fg); }
.ask-q__lead-text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: #334155; }
.ask-q__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 4px 0 34px; font-size: 13px; font-weight: 700; }
.ask-q__bubble + .ask-q__foot { margin-left: 4px; margin-top: 16px; }
.ask-q__n { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.ask-q__bubble + .ask-q__foot .ask-q__n { color: #B45309; }
.ask-q__open { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); text-decoration: none; }
.ask-q__open svg { transition: transform .2s ease; }
.ask-q__open:hover svg { transform: translateX(3px); }
.ask-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.ask-rating b { font-size: 12.5px; color: var(--fg); }
.ask-best { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid #FCD34D; border-radius: 999px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); font-size: 11.5px; font-weight: 800; letter-spacing: .01em; color: #92400E; box-shadow: 0 8px 16px -10px rgba(217, 119, 6, .7); white-space: nowrap; }
.ask-best--sm { padding: 2px 8px; font-size: 10.5px; box-shadow: none; }
.ask-seal { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #A7F3D0; border-radius: 999px; background: #ECFDF5; font-size: 11.5px; font-weight: 700; color: #047857; white-space: nowrap; }

.ask-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 26px; }
.ask-pager > :last-child { justify-self: end; }
.ask-pager__n { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }

.ask-empty { margin-top: 22px; padding: 46px 22px 40px; border: 1.5px dashed var(--border); border-radius: 26px; background: #fff; text-align: center; }
.ask-empty h3 { margin-top: 18px; font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em; }
.ask-empty p { max-width: 420px; margin: 6px auto 18px; color: var(--muted); line-height: 1.6; }
.ask-empty__art { position: relative; width: 120px; height: 74px; margin: 0 auto; }
.ask-empty__art span { position: absolute; border-radius: 16px 16px 16px 5px; background: #EFF8FD; border: 1px solid #B4E2F6; animation: ask-drift 6s ease-in-out infinite; }
.ask-empty__art span:nth-child(1) { left: 0; top: 0; width: 70px; height: 34px; }
.ask-empty__art span:nth-child(2) { right: 0; top: 22px; width: 60px; height: 30px; background: var(--primary); border-color: var(--primary); border-radius: 16px 16px 5px 16px; animation-delay: -2s; }
.ask-empty__art span:nth-child(3) { left: 18px; bottom: 0; width: 46px; height: 22px; animation-delay: -4s; }

/* ---- the sidebar ---- */
.ask-side { display: grid; gap: 16px; }
@media (min-width: 1024px) { .ask-side { position: sticky; top: 96px; } }
.ask-card { padding: 20px; border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); }
.ask-card h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; }
.ask-card p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ask-card .btn { margin-top: 14px; }
.ask-card__h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px !important; }
.ask-card__h svg { color: var(--primary); }
.ask-card__alt { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--primary); }
.ask-card--pro { position: relative; overflow: hidden; border-color: #142650; background: var(--dark) radial-gradient(rgba(148, 163, 184, .14) 1px, transparent 1px) 0 0 / 16px 16px; color: #fff; }
.ask-card--pro::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(rgba(20, 160, 222, .4), transparent 70%); }
.ask-card--pro > * { position: relative; }
.ask-card--pro h3 { color: #fff; margin-top: 12px; }
.ask-card--pro p { color: #94A3B8; }
.ask-card--pro .ask-card__alt { display: block; color: #7CCDEF; }
.ask-card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(20, 160, 222, .2); color: #7CCDEF; }
.ask-card--cta { border-color: #DDF1FB; background: linear-gradient(160deg, #EFF8FD, #fff 70%); }
.ask-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-topic { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--fg); text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.ask-topic span { font: 700 11px/1 var(--font-mono); color: var(--muted-light); }
.ask-topic:hover { border-color: var(--primary); color: var(--primary); }
.ask-topic.is-on { border-color: var(--primary); background: var(--primary); color: #fff; }
.ask-topic.is-on span { color: rgba(255, 255, 255, .8); }
.ask-leaders { margin: 0; padding: 0; list-style: none; }
.ask-leaders li { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-light); }
.ask-leaders li:first-child { border-top: 0; padding-top: 0; }
.ask-leaders__n { font: 800 12px/1 var(--font-mono); color: var(--muted-light); }
.ask-leaders li:first-child .ask-leaders__n { color: #D97706; }
.ask-leaders__logo { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.ask-leaders a, .ask-pros a { min-width: 0; color: var(--fg); text-decoration: none; }
.ask-leaders b, .ask-pros b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ask-leaders small, .ask-pros small { display: block; font-size: 12px; color: var(--muted); }
.ask-leaders a:hover b, .ask-pros a:hover b { color: var(--primary); }

/* ---- a question page ---- */
.ask-qhead { position: relative; isolation: isolate; overflow: hidden; padding: 30px 20px 44px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ask-qhead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 0% 0%, rgba(20, 160, 222, 0.08), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(20, 160, 222, 0.064), transparent 70%); }
.ask-qhead__inner { max-width: 1120px; }
.ask-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid #FDE68A; border-radius: 14px; background: #FFFBEB; font-size: 14px; font-weight: 600; color: #92400E; }
.ask-qhead__bubble { position: relative; max-width: 860px; padding: 26px 30px 22px; border: 1px solid var(--border); border-radius: 30px 30px 30px 10px; background: #fff; box-shadow: 0 30px 60px -36px rgba(15, 23, 42, .35); animation: ask-up .5s cubic-bezier(.2, .8, .2, 1) both; }
.ask-qhead__bubble::after { content: ""; position: absolute; left: 30px; bottom: -10px; width: 19px; height: 19px; background: #fff; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.ask-qhead__title { margin-top: 12px; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--fg); }
.ask-qhead__body { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: #334155; }
.ask-qhead__body p + p { margin-top: 10px; }
.ask-qhead__by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); font-size: 14px; color: var(--muted); }
.ask-qhead__by b { color: var(--fg); }
.ask-qhead__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #14A0DE); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.ask-you { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #E4E9F4; font: 700 10.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.ask-asked { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 12px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; color: var(--muted); text-decoration: none; }
.ask-asked b { color: var(--fg); }
.ask-asked:hover { border-color: #B4E2F6; }
.ask-asked__logo { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
@media (max-width: 640px) { .ask-qhead__bubble { padding: 20px 18px 18px; border-radius: 24px 24px 24px 8px; } .ask-asked { margin-left: 0; } }

.ask-qbody { padding-top: 40px; }
.ask-answers__h { font-family: var(--font-display); font-size: 21px; letter-spacing: -.02em; }
.ask-thread { position: relative; display: grid; gap: 20px; margin-top: 18px; }
.ask-thread::before { content: ""; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(#B4E2F6, rgba(180, 226, 246, .15)); }
.ask-a { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; animation: ask-up .5s cubic-bezier(.2, .8, .2, 1) both; scroll-margin-top: 110px; }
.ask-a:nth-child(2) { animation-delay: .07s; } .ask-a:nth-child(3) { animation-delay: .14s; } .ask-a:nth-child(n + 4) { animation-delay: .2s; }
.ask-a__rail { position: relative; z-index: 1; }
.ask-a__logo { width: 46px; height: 46px; border-radius: 15px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border), 0 10px 20px -12px rgba(15, 23, 42, .4); font-size: 18px; }
.ask-a__card { position: relative; min-width: 0; padding: 18px 20px 14px; border: 1px solid var(--border); border-radius: 8px 22px 22px 22px; background: #fff; box-shadow: var(--shadow-card); }
.ask-a.is-best .ask-a__card { border-color: #FCD34D; background: linear-gradient(180deg, #FFFBEB, #fff 140px); animation: ask-glow 2.4s ease-in-out 1s 2; }
.ask-a.is-best .ask-a__logo { box-shadow: 0 0 0 2px #FCD34D, 0 10px 20px -12px rgba(217, 119, 6, .6); }
.ask-a__card > .ask-best { position: absolute; top: -13px; right: 18px; }
.ask-a__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.ask-a__name { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); text-decoration: none; }
.ask-a__name:hover { color: var(--primary); }
.ask-a__sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ask-a__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ask-a__body { margin-top: 12px; font-size: 15.5px; line-height: 1.72; color: #1E293B; overflow-wrap: anywhere; }
.ask-a__body p + p { margin-top: 10px; }
.ask-a__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.ask-a__when { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted-light); margin-right: 4px; }
.ask-a__foot form { display: inline; }
.ask-help, .ask-mark { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font: 700 13px var(--font-sans); color: var(--muted); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.ask-help b { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.ask-help:hover { border-color: var(--primary); color: var(--primary); }
.ask-help.is-on { border-color: #B4E2F6; background: #EFF8FD; color: var(--primary); cursor: default; }
.ask-help.is-pop svg { animation: ask-pop .45s ease; }
.ask-mark:hover { border-color: #FCD34D; background: #FFFBEB; color: #92400E; }
.ask-a__visit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--primary); }
@media (max-width: 560px) { .ask-thread::before { left: 17px; } .ask-a { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; } .ask-a__logo { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; } .ask-a__card { padding: 16px 15px 12px; } .ask-a__visit { margin-left: 0; } }

.ask-wait { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 20px 22px; border: 1.5px dashed #B4E2F6; border-radius: 22px; background: #fff; color: var(--muted); line-height: 1.6; }
.ask-wait b { color: var(--fg); }
.ask-wait__dots { flex: none; display: flex; gap: 5px; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: #EFF8FD; }
.ask-wait__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: ask-dot 1.3s ease-in-out infinite; }
.ask-wait__dots i:nth-child(2) { animation-delay: .15s; } .ask-wait__dots i:nth-child(3) { animation-delay: .3s; }

.ask-reply { margin-top: 28px; padding: 20px; border: 2px solid #DDF1FB; border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -36px rgba(32, 58, 114, .45); scroll-margin-top: 100px; }
.ask-reply__head { display: flex; align-items: center; gap: 12px; }
.ask-reply__logo { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
.ask-reply__head h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; }
.ask-reply__as select { margin-top: 4px; height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: 10px; font: 600 13.5px var(--font-sans); background: #F8FAFC; }
.ask-reply__as-one { font-size: 13.5px; color: var(--muted); }
.ask-reply__state { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.ask-reply__state--live { background: #F0FDF4; color: #166534; }
.ask-reply__state--pending { background: #EFF8FD; color: #182E5C; }
.ask-reply__state--hidden { background: #FEF2F2; color: #991B1B; }
.ask-reply__error { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 12px; border-radius: 12px; background: #FEF2F2; color: #991B1B; font-size: 13.5px; font-weight: 600; }
.ask-reply textarea { display: block; width: 100%; min-height: 160px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: #F8FAFC; font: 15.5px/1.65 var(--font-sans); color: var(--fg); resize: vertical; }
.ask-reply textarea:focus { outline: 0; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(32, 58, 114, .12); }
.ask-reply__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 12px; }
.ask-reply__tips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.ask-reply__tips li { display: inline-flex; align-items: center; gap: 5px; }
.ask-reply__tips svg { color: #16A34A; }
.ask-gate { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px; margin-top: 28px; padding: 22px; border-radius: 24px; background: linear-gradient(135deg, #0B1633, #1A3263); color: #fff; }
.ask-gate h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -.02em; color: #fff; }
.ask-gate p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: #94A3B8; }
.ask-gate__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: rgba(20, 160, 222, .2); color: #7CCDEF; }
.ask-gate__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-gate .btn-outline { border-color: rgba(255, 255, 255, .25); background: transparent; color: #fff; }
@media (min-width: 900px) { .ask-gate { grid-template-columns: auto minmax(0, 1fr) auto; } .ask-gate__acts { grid-column: auto; } }

.ask-pros, .ask-related { margin: 0; padding: 0; list-style: none; }
.ask-pros li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-light); }
.ask-pros li:first-child { border-top: 0; padding-top: 0; }
.ask-pros__logo { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }
.ask-related li { padding: 10px 0; border-top: 1px solid var(--border-light); }
.ask-related li:first-child { border-top: 0; padding-top: 0; }
.ask-related a { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--fg); text-decoration: none; }
.ask-related a:hover { color: var(--primary); }
.ask-related small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* ---- on listing and category pages ---- */
.ask-onlisting__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ask-onlisting__list { margin: 16px 0 0; padding: 0; list-style: none; }
.ask-onlisting__list li { border-top: 1px solid var(--border-light); }
.ask-onlisting__list a { display: block; padding: 14px 0; color: inherit; text-decoration: none; }
.ask-onlisting__q { display: flex; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); }
.ask-onlisting__q svg { flex: none; margin-top: 3px; color: var(--primary); }
.ask-onlisting__a { display: block; margin: 6px 0 0 23px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ask-onlisting__more { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0 23px; font-size: 12.5px; font-weight: 700; color: var(--primary); }
.ask-onlisting__list a:hover .ask-onlisting__q { color: var(--primary); }
.ask-onlisting__all { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--primary); }
.ask-onlisting__empty { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.ask-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; margin-top: 34px; padding: 18px 22px; border-radius: 22px; background: linear-gradient(120deg, #0B1633, #1A3263); color: #fff; box-shadow: 0 24px 50px -34px rgba(8, 16, 40, .8); }
.ask-strip__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px 16px 16px 5px; background: rgba(20, 160, 222, .22); color: #7CCDEF; }
.ask-strip__text { font-size: 15px; line-height: 1.5; color: #CBD5E1; }
.ask-strip__text b { color: #fff; }
.ask-strip__text span { color: #94A3B8; }
.ask-strip__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-strip .btn-outline { border-color: rgba(255, 255, 255, .25); background: transparent; color: #fff; }
@media (max-width: 760px) { .ask-strip { grid-template-columns: auto minmax(0, 1fr); } .ask-strip__acts { grid-column: 1 / -1; } }

/* ---- Account → Questions ---- */
.ask-acc__sec { margin-top: 32px; }
.ask-acc__head h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
.ask-acc__head p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.ask-acc__empty { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 16px; font-size: 14px; color: var(--muted); }
.ask-acc__empty svg { flex: none; color: #16A34A; }
.ask-acc__empty a { font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(32, 58, 114, .35); }
.ask-acc__empty a:hover { text-decoration-color: currentColor; }
.ask-minis { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.ask-mini a { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px 18px 18px 6px; background: #fff; color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.ask-mini a:hover { border-color: #B4E2F6; transform: translateY(-1px); }
.ask-mini__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ask-mini__title { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--fg); }
.ask-mini__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.ask-mini__go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary); }
.ask-myans { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-light); }
.ask-myans a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 2px; border-bottom: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.ask-myans__q { font-weight: 700; color: var(--fg); }
.ask-myans a:hover .ask-myans__q { color: var(--primary); }
.ask-myans__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ask-myans__meta > span:not(.pill):not(.ask-best) { display: inline-flex; align-items: center; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ask-float, .ask-q, .ask-a, .ask-compose, .ask-flash, .ask-qhead__bubble, .ask-empty__art span, .ask-wait__dots i, .ask-a.is-best .ask-a__card, .ask-help.is-pop svg { animation: none; }
  .ask-q__bubble, .ask-mini a { transition: none; }
}

/* ---------- Listing card head: small extras (2026-10-29) ---------- */
.listing-top__tag { gap: 5px; }
@container listing-top (max-width: 399px) { .listing-top__actions > .btn { font-size: 13.5px; gap: 7px; padding-left: 10px; padding-right: 10px; } }
@container listing-top (max-width: 289px) {   /* the smallest phones: one button per row rather than words spilling out */
  .listing-top__actions { grid-template-columns: minmax(0, 1fr); }
  .listing-top__actions > :first-child:nth-last-child(odd) { grid-column: auto; }
}
/* A long business name in the breadcrumb stays on one line and trails off, rather than wrapping into a paragraph. */
.listing-head .crumbs { flex-wrap: nowrap; min-width: 0; }
.listing-head .crumbs > a, .listing-head .crumbs > svg { flex: none; }
.listing-head .crumbs > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .listing-head .crumbs > a:nth-of-type(2), .listing-head .crumbs > a:nth-of-type(2) + svg { display: none; } }   /* phones: Home › Category › Name */
.contact-acts { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- Message this business (2026-10-29): the floating button, the pop-up and Account → Messages ----------
   The button sits bottom right on every listing, shaped like the site's speech bubbles with its tail at the corner it
   grows from. It arrives with a short rise (movement only: it is fully visible even if the animation never runs). */
.msg-fab { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 8px; border: 1px solid rgba(124, 205, 239, .35); border-radius: 22px 22px 6px 22px;
  background: linear-gradient(135deg, #203A72, #182E5C); color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 18px 40px -14px rgba(32, 58, 114, .75), 0 2px 6px rgba(8, 16, 40, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: msg-fab-in .6s cubic-bezier(.2, .8, .2, 1) .5s backwards; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.msg-fab:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -14px rgba(32, 58, 114, .85), 0 2px 6px rgba(8, 16, 40, .25), inset 0 1px 0 rgba(255, 255, 255, .22); }
.msg-fab:focus-visible { outline: 3px solid #7CCDEF; outline-offset: 3px; }
.msg-fab__ic { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 15px 15px 5px 15px; background: rgba(255, 255, 255, .14); }
.msg-fab__ic::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 999px; background: #3FB6E8; box-shadow: 0 0 0 2px #182E5C; animation: msg-fab-ping 2.4s ease-out 1.4s 3; }
.msg-fab--own { background: linear-gradient(135deg, #0F172A, #1E293B); border-color: rgba(255, 255, 255, .14); box-shadow: 0 18px 40px -16px rgba(8, 16, 40, .7); }
.msg-fab--own .msg-fab__ic::after { display: none; }
@keyframes msg-fab-in { from { transform: translateY(12px) scale(.94); } }   /* short: even a frozen frame is on screen */
@keyframes msg-fab-ping { 0% { box-shadow: 0 0 0 2px #182E5C, 0 0 0 2px rgba(63, 182, 232, .7); } 80%, 100% { box-shadow: 0 0 0 2px #182E5C, 0 0 0 11px rgba(63, 182, 232, 0); } }
body:has(dialog[open]) .msg-fab, .nav-open .msg-fab { opacity: 0; pointer-events: none; }
body:has(.msg-fab) .toasts { inset: auto 20px 88px auto; }                  /* toasts stack above the button */
body:has(.msg-fab) .footer__inner { padding-bottom: 96px; }                  /* the last footer line is never under it */
/* Phones: just the bubble (the owner, 2026-10-30). The words stay for screen readers; the tail stays at the corner it grows from. */
@media (max-width: 639px) {
  .msg-fab { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 28px 28px 8px 28px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .msg-fab__ic { width: 56px; height: 56px; border-radius: inherit; background: none; }
  .msg-fab__ic svg { width: 24px; height: 24px; }
  .msg-fab__ic::after { top: 9px; right: 9px; }
  .msg-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:has(.msg-fab) .footer__inner { padding-bottom: 84px; }
}
@media print { .msg-fab { display: none; } }

/* The pop-up: the business on top (its mark, name and town), what it is about as chips, then the message and who to
   answer. Built on the site's sheet (.qdlg). */
.mdlg { width: min(620px, calc(100vw - 32px)); }
.mdlg__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 24px 24px 18px; border-bottom: 1px solid var(--border-light);
  background: radial-gradient(80% 140% at 0% 0%, rgba(20, 160, 222, 0.064), transparent 60%); }
.mdlg__logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px 16px 5px 16px; border: 1px solid var(--border); background: #fff; overflow: hidden; color: var(--primary); font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.mdlg__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mdlg__id { min-width: 0; }
.mdlg__title { margin-top: 4px; font-size: 21px; line-height: 1.15; letter-spacing: -.025em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mdlg__where { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mdlg__where svg { color: var(--primary); flex: none; }
.mdlg .qdlg__body { padding-top: 20px; }
.mdlg__topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.mdlg__legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
.mdlg__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mdlg__chip { position: relative; cursor: pointer; }
.mdlg__chip input { position: absolute; opacity: 0; pointer-events: none; }
.mdlg__chip span { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 13.5px; font-weight: 600; color: #334155; transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.mdlg__chip:hover span { border-color: #7CCDEF; }
.mdlg__chip input:checked + span { border-color: var(--primary); background: #EFF8FD; color: var(--primary); box-shadow: 0 0 0 3px rgba(32, 58, 114, .12); }
.mdlg__chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.mdlg__opt { margin-left: 4px; font-weight: 500; font-size: 12.5px; color: var(--muted-light); }
.mdlg .counter { display: block; margin-top: 6px; text-align: right; font-size: 12px; color: var(--muted-light); }
.mdlg__fine { display: flex; align-items: flex-start; gap: 7px; max-width: 300px; line-height: 1.5; }
.mdlg__fine svg { flex: none; margin-top: 2px; color: #16A34A; }
.mdlg input[readonly] { background: var(--bg); color: var(--muted); }
@media (max-width: 639px) { .mdlg { width: 100%; max-width: none; } .mdlg__head { padding: 18px 18px 16px; } .mdlg__fine { max-width: none; } }

/* Account → Messages. */
.msgs__bar { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.msgs__tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.msgs__tabs a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.msgs__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; }
.msgs__tabs a.is-active .msgs__count { background: #fff; color: var(--dark); }
.msgs__n { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); }
.msgs__filter { display: flex; gap: 8px; }
.msgs__select { width: auto; min-width: 220px; max-width: 100%; padding-top: 10px; padding-bottom: 10px; }
.msgs__list { display: grid; gap: 14px; margin-top: 20px; }
.msg { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: opacity .3s ease, transform .3s ease; }
.msg--new { border-color: #B4E2F6; background: linear-gradient(180deg, #F6FBFE, #fff 70%); box-shadow: inset 3px 0 0 var(--primary), 0 10px 30px -22px rgba(32, 58, 114, .5); }
.msg.is-leaving { opacity: 0; transform: translateX(16px); }
.msg__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px 15px 5px 15px; background: linear-gradient(135deg, #203A72, #1A3263); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.msg__main { min-width: 0; }
.msg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.msg__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.msg__name { font-size: 17px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.msg__new { padding: 3px 9px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.msg__topic { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: #475569; }
.msg__time { font-family: var(--font-mono); font-size: 12px; color: var(--muted-light); white-space: nowrap; }
.msg__to { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.msg__to a { color: var(--fg); font-weight: 600; }
.msg__to a:hover { color: var(--primary); }
.msg__body { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #334155; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.msg__contact span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border-light); font-size: 13px; font-weight: 600; color: #334155; overflow-wrap: anywhere; min-width: 0; }
.msg__contact svg { flex: none; color: var(--primary); }
.msg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.msg__replies { display: flex; flex-wrap: wrap; gap: 8px; }
.msg__tools { display: flex; gap: 6px; }
.msg__tools form { margin: 0; }
.msg__tool { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--muted); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.msg__tool:hover, .msg__tool:focus-visible { color: var(--primary); border-color: #7CCDEF; background: #EFF8FD; }
.msg__tool--spam:hover, .msg__tool--spam:focus-visible { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; }
.msg__tool::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 8px; background: var(--dark-2); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.msg__tool:hover::after, .msg__tool:focus-visible::after { opacity: 1; transform: none; }
.msgs__empty { display: grid; justify-items: center; gap: 8px; margin-top: 20px; padding: 48px 24px; border: 1px dashed var(--border); border-radius: 22px; text-align: center; background: #fff; }
.msgs__empty-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px 18px 6px 18px; background: #EFF8FD; color: var(--primary); margin-bottom: 6px; }
.msgs__empty h2 { font-size: 20px; letter-spacing: -.02em; }
.msgs__empty p { max-width: 440px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.msgs__empty .btn { margin-top: 8px; }
.msgs__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.msgs__note svg { flex: none; margin-top: 1px; color: #16A34A; }
@media (max-width: 560px) {
  .msg { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .msg__avatar { position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; font-size: 15px; }
  .msg__head { padding-left: 48px; min-height: 36px; align-items: center; }
  .msg__replies { flex: 1 1 100%; }
  .msg__replies .btn { flex: 1; }
  .msg__tools { margin-left: auto; }
  .msgs__filter, .msgs__select { width: 100%; }
}
/* The unread signals: a dot on the header's account button, a count on the tile and in the phone menu. */
.header__account { position: relative; }
.header__dot { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 999px; background: #14A0DE; box-shadow: 0 0 0 2px var(--dark), 0 0 12px rgba(20, 160, 222, .9); animation: msg-dot 2.2s ease-out infinite; }
@keyframes msg-dot { 0% { box-shadow: 0 0 0 2px var(--dark), 0 0 0 2px rgba(20, 160, 222, .6); } 70%, 100% { box-shadow: 0 0 0 2px var(--dark), 0 0 0 9px rgba(20, 160, 222, 0); } }
.tile .icon-sq { position: relative; }
.tile__badge-n { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-family: var(--font-sans); font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.mobile-nav__new { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #14A0DE; color: #fff; font-size: 11px; font-weight: 800; }

/* ---------- City pages (2026-10-29): rows of links to the cities and trades next to this page ---------- */
.chip-nav { min-width: 0; }
.grid-3 + .chip-nav, .chip-nav + .chip-nav, .open-spot__onward + .chip-nav { margin-top: 36px; }
.chip-nav__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chip-nav__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-nav__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: #334155; transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.chip-nav__chip span { font-family: var(--font-mono); font-size: 11px; color: var(--muted-light); }
.chip-nav__chip:hover { border-color: rgba(32, 58, 114, .45); color: var(--primary); transform: translateY(-1px); }
.chip-nav__more { margin-top: 10px; }
.chip-nav__more summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--border); font-size: 13.5px; font-weight: 700; color: var(--primary); cursor: pointer; list-style: none; }
.chip-nav__more summary::-webkit-details-marker { display: none; }
.chip-nav__more summary svg { transition: transform .2s ease; }
.chip-nav__more[open] summary svg { transform: rotate(180deg); }
/* Phones: the row swipes sideways instead of wrapping into a wall of chips above the listings (Houston has 24 trades). */
@media (max-width: 640px) {
  .chip-nav > .chip-nav__list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .chip-nav > .chip-nav__list::-webkit-scrollbar { display: none; }
  .chip-nav > .chip-nav__list > .chip-nav__chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .msg-fab, .msg-fab__ic::after, .header__dot { animation: none; } .msg, .chip-nav__chip { transition: none; } }

/* ---------- Partner network panel (networkCard in src/views/components.js) ---------- */
.net-card { position: relative; overflow: hidden; display: grid; gap: 28px; margin-top: 40px; padding: 30px; border-radius: 28px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(20, 160, 222, .28), transparent 55%), linear-gradient(135deg, #0B1633 0%, #142650 100%);
  box-shadow: 0 30px 60px -36px rgba(8, 16, 40, .85); }
.net-card + .chip-nav { margin-top: 40px; }
.net-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .08); }
@media (min-width: 960px) { .net-card { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; padding: 40px 44px; align-items: center; } }
.net-card__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 160, 222, .18); color: #B4E2F6; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.net-card__title { margin: 16px 0 10px; font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 32px); line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.net-card__text { margin: 0; max-width: 56ch; color: #CBD5E1; font-size: 15px; line-height: 1.65; }
.net-card__text b { color: #fff; }
.net-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.net-card__acts .btn { white-space: normal; text-align: center; }
.net-card__fine { color: #94A3B8; font-size: 13px; }
.net-card__cities { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.net-card__label { display: block; margin-bottom: 12px; color: #94A3B8; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.net-card__cities ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.net-card__cities a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #E2E8F0; font-size: 13px; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.net-card__cities a:hover { background: rgba(20, 160, 222, .22); border-color: rgba(124, 205, 239, .5); color: #fff; }
.net-card__cities a svg { color: #7CCDEF; }
.net-card__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.net-card__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #94A3B8; font-size: 14px; line-height: 1.5; }
.net-card__steps span { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; background: var(--primary); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.net-card__steps b { color: #fff; font-size: 15px; }
@media (max-width: 520px) { .net-card { padding: 24px 20px; border-radius: 24px; } .net-card__acts .btn { width: 100%; } }

/* ---------- Categories page cards (the /categories route in src/routes/public.js) ---------- */
.catx-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.catx { position: relative; flex: 1 1 320px; max-width: 380px; display: flex; flex-direction: column; padding: 26px; border-radius: var(--radius-card); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.catx:hover { border-color: #CBD5E1; transform: translateY(-2px); box-shadow: 0 26px 50px -28px rgba(15, 23, 42, .28); }
.catx--new { background: linear-gradient(180deg, #fff, #F8FAFC); }
.catx__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catx__count { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--fg); text-align: right; }
.catx__count small { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.catx__badge { padding: 5px 11px; border-radius: 999px; background: #DDF1FB; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.catx__name { margin: 20px 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.catx__name a { color: var(--fg); }
.catx__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.catx__blurb { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.catx__label { margin: 18px 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.catx__states { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.catx__states a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: #F8FAFC; color: var(--fg); font-size: 13px; font-weight: 600; transition: border-color .2s ease, background-color .2s ease; }
.catx__states a:hover { border-color: var(--primary); background: #EFF8FD; }
.catx__states span { color: var(--muted); font-weight: 500; }
.catx__acts { position: relative; z-index: 1; margin-top: auto; padding-top: 22px; }
.catx-grid + .page-context { margin-top: 44px; }