/* Small supplemental styles beyond Tailwind CDN utilities.
   Layout/animation classes (ws-*) mirror whalescale.io's landing styles. */

html, body {
  overflow-x: hidden;
  width: 100%;
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

* {
  -webkit-tap-highlight-color: transparent;
}

table {
  border-spacing: 0;
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Soft shadow for the hero pills (eyebrow + Maps-style search pill). */
.elev { box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); }

.ws-header-bar { height: 6rem; }
.ws-header-logo { height: 1.85rem; }
.ws-logo-font { font-family: 'Onest', 'Inter', sans-serif; }

/* Hand-drawn circle around the hero's highlighted phrase. */
.ws-circle-visual {
  transform-origin: center;
}

/* Soft drifting color blobs behind the hero / closing CTA sections. */
@keyframes ws-shimmer {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, -6%) scale(1.08); }
}

.ws-shimmer {
  animation: ws-shimmer 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ws-shimmer { animation: none; }
}

/* Mobile (<640px): compact header, smaller headline so the hero fits the
   first screen. !important because Tailwind's CDN styles are injected after
   this sheet. */
@media (max-width: 639px) {
  .ws-header-bar { height: 3.75rem !important; }
  .ws-header-logo { height: 1.45rem !important; }
  #ws-header-row a[href="https://app.maplist.io"]:last-child {
    white-space: nowrap;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.9rem !important;
  }
  section[data-section="hero"] h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  section[data-section="hero"] > div.relative > p.text-lg {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
}

/* Hero eyebrow pill: flips through audience words one at a time
   (same keyframes as whalescale.io's eyebrow). */
.ws-flip-word {
  position: relative;
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
  perspective: 240px;
}
.ws-eyebrow-accent { color: #2563eb; }
.ws-flip-word-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: ws-flip-cycle 5.4s infinite;
}
@keyframes ws-flip-cycle {
  0% { opacity: 0; transform: translateY(55%) scale(0.5) rotateX(-45deg); }
  2.5% { opacity: 1; transform: translateY(-6%) scale(1.22) rotateX(0deg); }
  5% { transform: translateY(0) scale(0.92) rotateX(0deg); }
  8% { transform: translateY(0) scale(1.04) rotateX(0deg); }
  11%, 29% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }
  33.33% { opacity: 0; transform: translateY(-55%) scale(0.6) rotateX(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-flip-word-item { animation: none; opacity: 0; transform: none; }
  .ws-flip-word-item:first-child { position: static; opacity: 1; }
}
@media (max-width: 639px) {
  section[data-section="hero"] > div.relative > p.inline-flex {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
    margin-bottom: 1.5rem !important;
    white-space: nowrap;
    max-width: 100%;
  }
  .ws-flip-word { min-width: 110px !important; }
}

/* =====================================================================
   BillionVerify-style theme (2026-10-01). Chrome markup is generated by
   seo/build_site.py; everything here is scoped to body.ml-bv.
   ===================================================================== */
.ml-bv {
  --ml-ink: #0b1220;
  --ml-bg: #f3f7ff;
  --ml-band: #e9f1ff;
  --ml-line: #d6e3f8;
  --ml-brand: #2563eb;
  --ml-brand-ink: #1d4ed8;
  --ml-muted: #475569;
  background: var(--ml-bg) !important;
  background-image: radial-gradient(1100px 520px at 50% -120px, #dbe8ff 0%, rgba(219,232,255,0) 70%) !important;
  background-repeat: no-repeat !important;
}
.ml-bv main > section.bg-white,
.ml-bv main > section[class*="from-white"],
.ml-bv main > section[data-section="hero"],
.ml-bv main > section[data-section="hero"] > .absolute.inset-0 { background: transparent !important; }
.ml-bv main > section.bg-slate-50 { background: var(--ml-band) !important; }
.ml-bv main > section[data-section="hero"] .ws-shimmer { display: none; }

/* -- buttons / pills ------------------------------------------------- */
.ml-btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--ml-ink); color: #fff !important; font-weight: 700; border-radius: 999px;
  padding: .7rem 1.35rem; box-shadow: 0 10px 24px -10px rgba(11,18,32,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ml-btn-dark:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(11,18,32,.6); }
.ml-btn-dark svg { width: 1rem; height: 1rem; }
.ml-btn-sm { padding: .5rem 1rem; font-size: .9rem; }
.ml-btn-lg { padding: .55rem .6rem .55rem 1.9rem; font-size: 1.15rem; gap: 1.1rem;
  outline: 3px solid transparent; box-shadow: 0 0 0 4px #c7dbff, 0 0 0 7px #fde68a55, 0 18px 40px -14px rgba(11,18,32,.6); }
.ml-btn-dot { display: inline-flex; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: #fff; color: var(--ml-ink);
  align-items: center; justify-content: center; }
.ml-btn-dot svg { width: 1.1rem; height: 1.1rem; transform: rotate(-45deg); }
.ml-pill {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; background: #fff;
  border: 1px solid var(--ml-line); color: var(--ml-brand-ink); font-size: .8rem; font-weight: 700;
  padding: .3rem .85rem; letter-spacing: .01em;
}
.ml-pill svg { width: .95rem; height: .95rem; }
.ml-chip { display: inline-flex; border-radius: 999px; background: #eef4ff; border: 1px solid var(--ml-line);
  color: var(--ml-brand-ink); font-size: .72rem; font-weight: 600; padding: .15rem .6rem; }
.ml-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.ml-chip-link { display: inline-flex; border-radius: 999px; background: #fff; border: 1px solid var(--ml-line);
  font-size: .85rem; font-weight: 600; color: #0f172a; padding: .4rem .9rem; transition: border-color .15s, color .15s; }
.ml-chip-link:hover { border-color: var(--ml-brand); color: var(--ml-brand-ink); }

/* -- announcement bar + header -------------------------------------- */
.ml-announce { background: #0b1b33; color: #dbe6ff; font-size: .85rem; text-align: center; padding: .55rem 1rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: center; align-items: center; }
.ml-announce strong { color: #fff; }
.ml-announce a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: .3rem; }
.ml-announce a svg { width: .85rem; height: .85rem; }
.ml-header { position: sticky; top: 0; z-index: 40; background: rgba(243,247,255,.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(214,227,248,.7); }
.ml-header-row { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 1.25rem; height: 4.5rem !important; }
.ml-nav { display: none; align-items: center; gap: 2rem; font-weight: 500; color: #334155; }
.ml-nav > a:hover, .ml-dd-btn:hover { color: var(--ml-ink); }
.ml-nav a[aria-current] { color: var(--ml-ink); font-weight: 700; }
.ml-dd { position: relative; }
.ml-dd-btn { display: inline-flex; align-items: center; gap: .2rem; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: .5rem 0; }
.ml-dd-btn svg { width: 1rem; height: 1rem; opacity: .6; }
.ml-dd-panel { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); min-width: 19rem;
  background: #fff; border: 1px solid var(--ml-line); border-radius: 1rem; padding: .5rem;
  box-shadow: 0 24px 48px -20px rgba(15,23,42,.35); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; }
.ml-dd:hover .ml-dd-panel, .ml-dd:focus-within .ml-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ml-dd-panel a { display: block; border-radius: .65rem; padding: .55rem .75rem; color: #0f172a; font-size: .92rem; }
.ml-dd-panel a:hover { background: var(--ml-bg); }
.ml-dd-panel a strong { display: block; font-weight: 700; }
.ml-dd-panel a span { display: block; color: #64748b; font-size: .8rem; }
.ml-dd-panel--list { min-width: 16rem; }
.ml-dd-all { margin-top: .25rem; border-top: 1px solid var(--ml-line); border-radius: 0 0 .65rem .65rem !important;
  color: var(--ml-brand-ink) !important; font-weight: 700; }
.ml-header-cta { display: flex; align-items: center; gap: 1rem; }
.ml-login { display: none; color: #334155; font-weight: 500; }
.ml-login:hover { color: var(--ml-ink); }
.ml-burger { display: inline-flex; padding: .4rem; color: #334155; background: none; border: 0; }
.ml-burger svg { width: 1.5rem; height: 1.5rem; }
.ml-mobile { border-top: 1px solid var(--ml-line); background: #fff; padding: .75rem 1.25rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.ml-mobile[hidden] { display: none; }
.ml-mobile a { padding: .55rem 0; font-weight: 500; color: #1e293b; }
.ml-mobile .ml-btn-dark { margin-top: .5rem; padding: .7rem 1rem; }
@media (min-width: 768px) {
  .ml-nav { display: flex; }
  .ml-burger { display: none; }
  .ml-login { display: inline; }
  .ml-header-row { padding: 0 2rem; }
}
@media (max-width: 639px) {
  .ml-header-cta .ml-btn-sm { padding: .45rem .8rem; font-size: .8rem; }
  .ml-announce { font-size: .78rem; }
}

/* -- shared sections -------------------------------------------------- */
.ml-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.ml-hero { text-align: center; padding: 4rem 1.25rem 2.5rem; max-width: 56rem; margin: 0 auto; }
.ml-hero h1 { margin-top: 1.1rem; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.07; font-weight: 800; letter-spacing: -.025em; color: var(--ml-ink); }
.ml-hero p { margin: 1rem auto 0; max-width: 40rem; font-size: 1.1rem; color: var(--ml-muted); }
.ml-filters { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ml-filter { border-radius: .6rem; border: 1px solid var(--ml-line); background: #fff; font-size: .85rem; font-weight: 600;
  color: #334155; padding: .45rem .9rem; cursor: pointer; scroll-margin-top: 120px; }
.ml-filter:hover { border-color: var(--ml-brand); }
.ml-filter.is-on { background: var(--ml-brand); border-color: var(--ml-brand); color: #fff; }
.ml-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ml-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ml-line); border-radius: 1rem; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ml-card[hidden] { display: none; }
.ml-card:hover { transform: translateY(-3px); border-color: #b9cff2; box-shadow: 0 22px 44px -24px rgba(29,78,216,.45); }
.ml-card-body { padding: 1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; }
.ml-card-body .ml-chip { align-self: flex-start; }
.ml-card h3 { font-size: 1.08rem; line-height: 1.3; font-weight: 800; color: var(--ml-ink); letter-spacing: -.01em; }
.ml-card-date { font-size: .78rem; color: #64748b; }
.ml-card-desc { font-size: .87rem; color: var(--ml-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* generated "title card" thumbnail */
.ml-art { position: relative; aspect-ratio: 16/8.5; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--b) 0%, transparent 60%),
    linear-gradient(135deg, var(--a) 0%, color-mix(in srgb, var(--a) 70%, #000) 100%); }
.ml-art::before { content: ""; position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(160deg, transparent 20%, #000 90%); -webkit-mask-image: linear-gradient(160deg, transparent 20%, #000 90%); }
.ml-art::after { content: ""; position: absolute; right: 1.1rem; bottom: 1rem; width: 2.1rem; height: 2.1rem;
  background: url("/assets/favicon.svg") center/contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.ml-art-brand { position: relative; font-family: 'Onest', 'Inter', sans-serif; font-weight: 800; font-size: .8rem; letter-spacing: .02em; opacity: .9; }
.ml-art-title { position: relative; font-weight: 800; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.02em; max-width: 82%; text-wrap: balance; }
.ml-cta { text-align: center; padding: 5rem 1.25rem 5.5rem; max-width: 46rem; margin: 0 auto; }
.ml-cta h2 { margin-top: 1rem; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ml-ink); }
.ml-cta > p { margin: 1rem auto 2rem; color: var(--ml-muted); font-size: 1.05rem; }
.ml-stats { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 3rem; }
.ml-stats strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.45rem; color: var(--ml-ink); }
.ml-stats span { font-size: .78rem; color: #64748b; }

/* -- mega footer --------------------------------------------------- */
.ml-footer { border-top: 1px solid var(--ml-line); background: #f7faff; }
.ml-foot-grid { max-width: 72rem; margin: 0 auto; padding: 3.25rem 1.25rem 2rem; display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ml-foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ml-foot-h { font-size: .82rem; font-weight: 800; color: var(--ml-ink); margin-bottom: .6rem; }
.ml-foot-h:not(:first-child) { margin-top: 1.4rem; }
.ml-foot-h a:hover { color: var(--ml-brand-ink); }
.ml-foot-col ul { display: flex; flex-direction: column; gap: .42rem; }
.ml-foot-col li a { font-size: .84rem; color: #52627a; }
.ml-foot-col li a:hover { color: var(--ml-brand-ink); }
.ml-foot-bottom { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.25rem 2.5rem; border-top: 1px solid var(--ml-line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; }
.ml-foot-bottom p { margin-top: .6rem; font-size: .84rem; color: #52627a; }
.ml-foot-bottom .ml-foot-copy { margin: 0; }

/* -- blog posts ----------------------------------------------------- */
.ml-post article { padding-top: 0 !important; }
.ml-post article > div > nav[aria-label="Breadcrumb"] { padding-top: 3rem; text-align: center; }
.ml-post article > div > nav[aria-label="Breadcrumb"] + p.uppercase {
  display: table; margin: 0 auto; border-radius: 999px; background: #fff; border: 1px solid var(--ml-line);
  padding: .3rem .9rem; font-size: .72rem; letter-spacing: .08em; }
.ml-group-comparisons article > div > nav[aria-label="Breadcrumb"] + p.uppercase::after { content: " Guide \00B7  2026"; }
.ml-post article > div > h1 { text-align: center; color: var(--ml-ink); }
.ml-post article > div > h1 + p { justify-content: center; }
.ml-post article > div > h1 + p + p { margin-top: 2.5rem; }
.ml-post article .bg-brand-50\/60.rounded-2xl { background: #fff; border-color: var(--ml-line); box-shadow: 0 16px 36px -26px rgba(29,78,216,.5); }
.ml-post article .overflow-x-auto { background: #fff; border: 1px solid var(--ml-line); border-radius: 1rem; padding: .25rem 1rem;
  box-shadow: 0 16px 36px -26px rgba(29,78,216,.45); }
.ml-post article .bg-slate-50.rounded-2xl { background: var(--ml-ink); border: 0; }
.ml-post article .bg-slate-50.rounded-2xl h2 { color: #fff; }
.ml-post article .bg-slate-50.rounded-2xl p { color: #cbd5e1; }
.ml-post article .bg-slate-50.rounded-2xl a { background: #fff !important; color: var(--ml-ink) !important; border-radius: 999px; box-shadow: none; }
.ml-post-more { margin-top: 3rem; padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--ml-line); }
.ml-post-more-h { font-weight: 800; color: var(--ml-ink); margin-bottom: .85rem; }

/* Primary CTAs everywhere become black pills (BillionVerify look). */
.ml-bv main a.bg-brand-600 { background: var(--ml-ink) !important; border-radius: 999px !important; box-shadow: 0 10px 24px -10px rgba(11,18,32,.55) !important; }
.ml-bv main a.bg-brand-600:hover { background: #1e293b !important; }

/* -- homepage sections (BillionVerify-style) ---------------------- */
.ml-bv section[data-section="hero"] h1 { color: var(--ml-ink); }
.ml-bv section[data-section="hero"] h1 .text-\[\#1a73e8\] { color: var(--ml-brand); }
.ml-product-chips { position: relative; z-index: 11; padding-top: 4.5rem; }
.ml-chip-icon { gap: .45rem; align-items: center; padding: .5rem 1rem; box-shadow: 0 6px 16px -12px rgba(15,23,42,.4); }
.ml-chip-icon svg { width: 1rem; height: 1rem; color: var(--ml-brand-ink); }
.ml-section, .ml-band { padding: 5rem 0; }
.ml-band { background: var(--ml-band); }
.ml-section-head { max-width: 44rem; margin: 0 auto 3.25rem; text-align: center; }
.ml-section-head h2 { margin-top: .9rem; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--ml-ink); }
.ml-section-head p { margin-top: .9rem; color: var(--ml-muted); font-size: 1.05rem; }
.ml-feature { display: grid; gap: 2.5rem; align-items: center; margin-top: 4.5rem; }
.ml-feature:first-of-type { margin-top: 0; }
@media (min-width: 1024px) {
  .ml-feature { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .ml-feature--flip .ml-feature-text { order: 2; }
}
.ml-feature-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ml-feature-text h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: var(--ml-ink); line-height: 1.15; }
.ml-feature-text p { color: var(--ml-muted); line-height: 1.7; }
.ml-feature-text .ml-chip { background: #fff; font-size: .78rem; padding: .3rem .75rem; }
.ml-feature-text .ml-btn-dark { margin-top: .5rem; }
.ml-feature-media { position: relative; border-radius: 1.5rem; padding: 2.25rem; overflow: hidden;
  background:
    radial-gradient(60% 60% at 15% 15%, var(--g1) 0%, transparent 70%),
    radial-gradient(55% 55% at 90% 20%, var(--g2) 0%, transparent 70%),
    radial-gradient(70% 60% at 60% 100%, var(--g3) 0%, transparent 70%), #f8fbff; }
.ml-feature-media::before { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(148,163,184,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.25) 1px, transparent 1px);
  background-size: 22px 22px; }
.ml-window { position: relative; border-radius: .9rem; background: #fff; overflow: hidden; box-shadow: 0 28px 50px -24px rgba(15,23,42,.45); border: 1px solid rgba(15,23,42,.08); }
.ml-window-bar { display: flex; gap: .35rem; padding: .55rem .75rem; border-bottom: 1px solid #eef2f7; }
.ml-window-bar i { width: .55rem; height: .55rem; border-radius: 999px; background: #fca5a5; }
.ml-window-bar i:nth-child(2) { background: #fcd34d; }
.ml-window-bar i:nth-child(3) { background: #6ee7b7; }
.ml-window video { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 639px) { .ml-feature-media { padding: 1.1rem; } }
.ml-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.ml-tile { display: flex; flex-direction: column; gap: .55rem; background: #fff; border: 1px solid var(--ml-line); border-radius: 1rem; padding: 1.5rem;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ml-tile:hover { transform: translateY(-3px); border-color: #b9cff2; box-shadow: 0 22px 44px -24px rgba(29,78,216,.45); }
.ml-tile h3 { font-weight: 800; font-size: 1.08rem; color: var(--ml-ink); }
.ml-tile p { font-size: .9rem; color: var(--ml-muted); flex: 1; }
.ml-tile-icon { display: inline-flex; width: 2.6rem; height: 2.6rem; border-radius: .75rem; align-items: center; justify-content: center;
  background: #eef4ff; color: var(--ml-brand-ink); margin-bottom: .35rem; }
.ml-tile-icon svg { width: 1.35rem; height: 1.35rem; }
.ml-tile-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--ml-ink); }
.ml-tile-link svg { width: .9rem; height: .9rem; }