/* ============================================================
   SellSEO design system. Section 6 of BUILD.md.
   Premium SearchEye-style: mist green page, white cards,
   dark forest panels with neon orbs, mint pills.
   ============================================================ */

:root {
  --page:        #E9F0EB;
  --surface:     #FFFFFF;
  --surface-2:   #F5F8F6;
  --ink:         #0E1F17;
  --ink-2:       #5A6A61;
  --ink-3:       #8B988F;
  --line:        #E3EAE4;
  --brand:       #1FA85C;
  --brand-deep:  #127A42;
  --neon:        #35E27A;
  --mint:        #DCF3E6;
  --mint-ink:    #157F4F;
  --dark:        #07231A;
  --dark-2:      #0C3A2A;
  --amber:       #B45309;
  --amber-bg:    #FDEED3;
  --pink:        #BE185D;
  --pink-bg:     #FCE7F3;
  --red:         #B3261E;
  --red-bg:      #FBE9E7;
  --radius-card: 16px;
  --radius-btn:  12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(14,31,23,.05), 0 8px 24px rgba(14,31,23,.06);
  --shadow-pop:  0 4px 12px rgba(14,31,23,.10), 0 24px 64px rgba(14,31,23,.18);
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* Any class that sets display (.btn, .flex, .grid) beats the browser's own
   [hidden] rule, so hidden elements kept showing. Author rule, so it wins. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/*
 * Hero artwork, the orb and the globe are meant to bleed past the fold, and
 * without this they widen the document and hand every page a horizontal
 * scrollbar. This has to sit on html: overflow set on body propagates up to
 * the viewport instead of clipping, so the body rule alone does nothing.
 * Clip rather than hidden so position:sticky still works inside.
 */
html { overflow-x: clip; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.02em; }
h3 { font-weight: 700; }
h1 { font-size: clamp(30px, 4.5vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 19px; }
h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
p { margin: 0 0 14px; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
img { max-width: 100%; }
.accent { color: var(--brand); }
.muted { color: var(--ink-2); }
.meta { color: var(--ink-3); font-size: 13px; }
.num, .tnum, td.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font-body);
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(18,122,66,.35); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: var(--dark-2); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn-neon { background: var(--neon); color: var(--dark); }
.btn-neon:hover { background: #2bd06d; color: var(--dark); }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-danger:hover { background: #f6d8d4; color: var(--red); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn-block { width: 100%; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pills and badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px/1 var(--font-body);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill-mint { background: var(--mint); color: var(--mint-ink); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-pink { background: var(--pink-bg); color: var(--pink); }
.pill-red { background: var(--red-bg); color: var(--red); }
.pill-neutral { background: var(--surface-2); color: var(--ink-2); }
.pill-dark { background: var(--dark); color: var(--neon); }
.pill-outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Signal chips (opportunities) */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px/1 var(--font-body);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip.hot { background: var(--pink-bg); color: var(--pink); border-color: transparent; }
.chip.good { background: var(--mint); color: var(--mint-ink); border-color: transparent; }
.chip.warn { background: var(--amber-bg); color: var(--amber); border-color: transparent; }

/* A contact that has been found but not paid for. The dots are real text, so
   there is nothing behind the styling to read out of the page source. */
.is-locked { color: var(--ink-2); letter-spacing: .01em; cursor: help; }

/* The WhatsApp control under a contact's role. Its own line so the button
   never widens the column it sits in. */
.wa-cell { display: inline-flex; align-items: center; margin-top: 4px; }
.wa-cell .btn { white-space: nowrap; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.card-well { background: var(--surface-2); border-radius: 12px; padding: 16px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title h3 { margin: 0; }

/* Stat tiles */
.stat { padding: 20px 22px; }
.stat .stat-label { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.stat .stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .stat-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

/* ---------- Selectable option rows ---------- */
.option-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s ease, background .18s ease, color .18s ease;
  font: inherit; text-align: left;
}
.option-row + .option-row { margin-top: 10px; }
.option-row:hover { border-color: var(--ink-3); }
.option-row .radio {
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 2px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .15s ease;
}
.option-row .radio::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--neon); transform: scale(0); transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.option-row .opt-body { flex: 1; min-width: 0; }
.option-row .opt-title { font-weight: 600; }
.option-row .opt-sub { font-size: 13px; color: var(--ink-2); }
.option-row .opt-meta { font-weight: 700; font-variant-numeric: tabular-nums; }
.option-row.selected {
  border-color: var(--neon);
  background: var(--dark);
  color: #fff;
}
.option-row.selected .opt-sub { color: rgba(255,255,255,.65); }
.option-row.selected .radio { border-color: var(--neon); }
.option-row.selected .radio::after { transform: scale(1); }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.label .req { color: var(--pink); }
.input, .select, .textarea {
  width: 100%;
  font: 500 15px/1.4 var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(53,226,122,.18);
}
.input.error { border-color: var(--red); }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A61' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.input-group { display: flex; }
.input-group .prefix {
  display: flex; align-items: center; padding: 0 14px;
  background: var(--surface-2); border: 1.5px solid var(--line); border-right: 0;
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
  color: var(--ink-3); font-size: 14px; font-weight: 500;
}
.input-group .input { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--brand); margin-top: 1px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface-2);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s ease; }
.table.hoverable tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Score ring ---------- */
.score-ring { display: inline-block; position: relative; width: 44px; height: 44px; flex: 0 0 44px; vertical-align: middle; }
.score-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .ring-bg { stroke: var(--line); }
.score-ring .ring-val { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.16,1,.3,1); }
.score-ring.hot .ring-val { stroke: var(--neon); }
.score-ring .ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
}

/* ---------- Progress ---------- */
.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress .bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--neon));
  transition: width .5s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 0 12px rgba(53,226,122,.55);
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,35,26,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .15s ease;
  display: grid; place-items: center; padding: 20px;
  overflow-y: auto;
}
.modal-backdrop.open { opacity: 1; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 520px;
  padding: 28px;
  transform: scale(.96) translateY(8px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .22s cubic-bezier(.16,1,.3,1);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-backdrop.open .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal-backdrop.closing { opacity: 0; }
.modal-backdrop.closing .modal { transform: scale(.96) translateY(8px); opacity: 0; transition-duration: .15s; }
.modal .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.modal .modal-head h3 { margin: 0; }
.modal .modal-x {
  background: var(--surface-2); border: 0; width: 32px; height: 32px; border-radius: 10px;
  cursor: pointer; color: var(--ink-2); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.modal .modal-x:hover { background: var(--line); }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 920px; }

/* ---------- Toasts ---------- */
.toast-zone { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--surface);
  border-radius: 12px;
  border-left: 4px solid var(--mint-ink);
  box-shadow: var(--shadow-pop);
  padding: 13px 18px 13px 14px;
  min-width: 240px; max-width: 380px;
  font-size: 14px; font-weight: 500;
  transform: translateX(120%); opacity: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.err { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--amber); }
.toast .t-title { font-weight: 700; }
.toast .t-sub { font-size: 12.5px; color: var(--ink-2); }

/* ---------- Skeleton ---------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--surface-2); border-radius: 8px; color: transparent !important;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-row { height: 14px; margin: 8px 0; }

/* ---------- Dark panel + orbs ---------- */
.dark-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  color: #fff;
  border-radius: var(--radius-card);
}
.dark-panel .muted, .dark-panel .meta { color: rgba(255,255,255,.6); }
.orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, rgba(53,226,122,.55), rgba(53,226,122,.12) 55%, transparent 70%);
  filter: blur(26px);
  animation: orbfloat 9s ease-in-out infinite;
}
.orb.o2 { animation-duration: 12s; animation-delay: -4s; background: radial-gradient(circle at 40% 40%, rgba(31,168,92,.5), rgba(31,168,92,.1) 55%, transparent 70%); }
.orb.o3 { animation-duration: 15s; animation-delay: -8s; opacity: .7; }
@keyframes orbfloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -18px) scale(1.06); }
}
.ghost-mark {
  position: absolute; opacity: .08; pointer-events: none;
}

/* ---------- Split screen (auth, onboarding, upgrade) ---------- */
.split { display: flex; min-height: 100vh; background: var(--page); }
.split-left {
  flex: 1 1 55%;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.split-left .split-card { width: 100%; max-width: 460px; }
.split-right {
  flex: 1 1 45%;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}
.split-right .split-inner { position: relative; z-index: 2; max-width: 420px; }
@media (max-width: 900px) {
  .split { flex-direction: column; }
  .split-right { display: none; }
}

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex: 0 0 240px;
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 50;
}
.sidebar .side-logo { display: flex; align-items: center; gap: 10px; padding: 22px 20px 18px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; }
.sidebar .side-logo img { width: 30px; height: auto; }
.sidebar nav { flex: 1; padding: 6px 12px; overflow-y: auto; }
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin: 2px 0;
  border-radius: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 500; font-size: 14px;
  position: relative;
  transition: background .14s ease, color .14s ease;
}
.side-link svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.side-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-link.active { background: rgba(53,226,122,.13); color: #fff; }
.side-link.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--neon);
  box-shadow: 0 0 10px rgba(53,226,122,.8);
}
.side-section { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.38); padding: 16px 12px 4px; font-weight: 600; }
.sidebar .side-bottom { padding: 14px 12px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  /* A hidden tooltip bubble still has layout width, and one sitting in the
     rightmost column was quietly widening the whole page. Clip here so no
     absolutely positioned helper can drag the app into a horizontal scroll. */
  overflow-x: clip; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  background: transparent;
}
.topbar .tb-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.topbar .tb-right { display: flex; align-items: center; gap: 12px; }
.credits-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mint); color: var(--mint-ink);
  font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; border: 0;
  transition: transform .12s ease;
}
.credits-pill:hover { transform: scale(1.04); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--neon); display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.content { padding: 12px 28px 40px; flex: 1; }
.content-narrow { max-width: 980px; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .25s cubic-bezier(.16,1,.3,1); height: 100dvh; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-pop); }
  .main { width: 100%; }
  .topbar { padding: 12px 16px; }
  .content { padding: 8px 16px 32px; }
  .burger { display: grid !important; }
}
.burger {
  display: none; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); cursor: pointer;
}

/* ---------- Illustration slots ---------- */
.illu {
  position: relative; overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  display: grid; place-items: center;
  min-height: 180px;
}
.illu img { position: relative; z-index: 2; }
.illu .illu-fallback { position: relative; z-index: 2; opacity: .9; }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 48px 24px; }
.empty .empty-art { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 32px; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--ink-2); max-width: 380px; margin: 0 auto 18px; }

/* ---------- Scan log stream ---------- */
.scanlog { font: 500 13.5px/1.7 var(--font-body); }
.scanlog .line {
  display: flex; gap: 10px; align-items: baseline;
  opacity: 0; transform: translateY(6px);
  animation: lineIn .4s cubic-bezier(.16,1,.3,1) forwards;
  padding: 3px 0;
}
.scanlog .line .tick { color: var(--neon); }
@keyframes lineIn { to { opacity: 1; transform: translateY(0); } }

/* ---------- Landing specifics ---------- */
/* Sticky glass shell around the public nav. The drawer lives outside it:
   backdrop-filter would become the containing block for position:fixed. */
.nav-shell {
  position: sticky; top: 0; z-index: 70;
  background: rgba(233, 240, 235, .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid rgba(227, 234, 228, .7);
}
.nav-public {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(20px, 5vw, 56px);
  max-width: 1240px; margin: 0 auto;
}
.nav-public .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink); letter-spacing: -.02em; }
.nav-public .nav-logo img { width: 30px; }
.nav-public .nav-links { display: flex; gap: 4px; align-items: center; }
.nav-public .nav-links a {
  color: var(--ink-2); font-weight: 500; font-size: 14.5px;
  padding: 9px 13px; border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-public .nav-links a:hover { color: var(--ink); background: rgba(14, 31, 23, .06); }
.nav-public .nav-cta { border-radius: 999px; padding: 10px 18px; box-shadow: 0 4px 14px rgba(18, 122, 66, .3); }
.section { max-width: 1240px; margin: 0 auto; padding: clamp(36px, 6vw, 84px) clamp(20px, 5vw, 56px); }
.badge-line { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.badge-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px rgba(53,226,122,.9); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/*
 * A grid item defaults to min-width:auto, which means it refuses to shrink
 * below the intrinsic width of its content. One non-wrapping element inside,
 * a long command in a .snippet or a wide table, and the whole column grows
 * past the viewport and drags the page into a horizontal scroll. Allowing the
 * item to shrink lets the scrollable child scroll inside itself, which is what
 * .snippet and .table-wrap are already set up to do.
 */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Footer */
.footer { background: var(--dark); color: rgba(255,255,255,.7); margin-top: 40px; position: relative; overflow: hidden; }
.footer .section { position: relative; z-index: 2; }
.footer a { color: rgba(255,255,255,.7); }
.footer a:hover { color: var(--neon); }
.footer .foot-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; margin-bottom: 8px; }
.footer .foot-logo img { width: 26px; }

/* ---------- Utilities ---------- */
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.wrap { flex-wrap: wrap; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 10px; } .mt-4 { margin-top: 18px; } .mt-6 { margin-top: 28px; } .mt-8 { margin-top: 40px; }
.mb-3 { margin-bottom: 14px; }
.mt-3 { margin-top: 14px; }
.gap-1 { gap: 4px; }
.mb-2 { margin-bottom: 10px; } .mb-4 { margin-bottom: 18px; } .mb-6 { margin-bottom: 28px; }
.center { text-align: center; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--line); margin: 20px 0; border: 0; }
.hide-mobile { }
@media (max-width: 640px) { .hide-mobile { display: none !important; } }

/* ---------- Opportunity header ---------- */
.opp-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.opp-id { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.opp-name { min-width: 0; }
.opp-name h2 { margin: 0 0 2px; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.15; }
.opp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opp-meta a { color: var(--ink-3); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.opp-meta a:hover { color: var(--brand); }
.opp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opp-actions form { margin: 0; }
.opp-actions .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .opp-actions { width: 100%; }
  .opp-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Premium loading overlay ---------- */
.ss-loader {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(7, 35, 26, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.ss-loader.show { opacity: 1; pointer-events: all; }
.ss-loader-card {
  background: linear-gradient(180deg, var(--dark-2), var(--dark));
  border-radius: 20px; padding: 34px 40px;
  text-align: center; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 24px 64px rgba(7, 35, 26, .5);
  max-width: 340px; transform: scale(.94);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.ss-loader.show .ss-loader-card { transform: scale(1); }
.ss-loader-orb {
  width: 68px; height: 68px; margin: 0 auto 18px; position: relative;
}
.ss-loader-orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(53,226,122,.9), rgba(53,226,122,.15) 60%, transparent 72%);
  filter: blur(2px); animation: ssPulse 1.4s ease-in-out infinite;
}
.ss-loader-orb::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 3px solid rgba(53, 226, 122, .25);
  border-top-color: var(--neon);
  animation: ssSpin .9s linear infinite;
}
@keyframes ssPulse { 0%, 100% { transform: scale(.9); opacity: .8; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-loader-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.ss-loader-sub { font-size: 13.5px; color: rgba(255, 255, 255, .65); line-height: 1.5; min-height: 20px; }
.ss-loader-card .orb { width: 180px; height: 180px; top: -60px; right: -50px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Print (evidence/proposal pages define their own too) ---------- */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid var(--line); }
}

/* ---------- Navigation rework ---------- */
.side-link .side-label { flex: 1; min-width: 0; }
.side-count {
  flex: none; min-width: 20px; text-align: center;
  background: rgba(255,255,255,.14); color: #fff;
  font: 700 11px/1 var(--font-body); font-variant-numeric: tabular-nums;
  padding: 4px 7px; border-radius: 999px;
}
.side-link.active .side-count { background: var(--neon); color: var(--dark); }

.avatar-wrap { position: relative; }
button.avatar { border: 0; cursor: pointer; padding: 0; }
button.avatar:hover { box-shadow: 0 0 0 3px var(--mint); }
.avatar-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-pop, 0 18px 40px rgba(16,24,32,.16));
  display: none;
}
.avatar-wrap.open .avatar-menu { display: block; }
.avatar-menu .avatar-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13.5px; }
.avatar-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.avatar-menu a:hover { background: var(--surface-2); }
.avatar-menu a svg { opacity: .6; }

.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand); }
.crumb .crumb-sep { opacity: .45; }

/* Segmented view switch and settings tabs */
.viewbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: 12px;
}
.segmented a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background .14s ease, color .14s ease;
}
.segmented a svg { width: 15px; height: 15px; opacity: .7; }
.segmented a:hover { color: var(--ink); }
.segmented a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.segmented a.on svg { opacity: 1; color: var(--brand); }

.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabbar a {
  padding: 11px 16px; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent;
}
.tabbar a:hover { color: var(--ink); }
.tabbar a.on { color: var(--ink); border-bottom-color: var(--brand); }
/* Preformatted brief / transcript blocks (call center) */
.mono-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; line-height: 1.55; overflow-x: auto; }

/* Button tabs (JS-driven panels, e.g. the call center source picker) */
.tabbar button.tab {
  padding: 11px 16px; margin-bottom: -1px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent;
}
.tabbar button.tab:hover { color: var(--ink); }
.tabbar button.tab.on { color: var(--ink); border-bottom-color: var(--brand); }

/* Board */
.board { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.board-col { background: var(--surface-2); border-radius: 14px; padding: 10px; min-height: 320px; transition: outline-color .12s ease; outline: 2px solid transparent; }
.board-col.drop { outline-color: var(--neon); }
.board-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.board-head b { font-size: 13px; }
.board-head .pill { font-size: 11px; padding: 3px 9px; }
.board-card { background: var(--surface); border-radius: 12px; padding: 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow-card); }
.board-card:active { cursor: grabbing; }
.board-blank { text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 18px 8px; }
/* Cards live in their own wrapper so Show more has somewhere to append to
   that is not the column itself, which also holds the heading and the button. */
.board-cards { display: block; }
.board-more { margin-top: 2px; font-size: 12.5px; }
/*
 * A column with hundreds of cards would otherwise make the page itself
 * hundreds of screens tall. Each column scrolls on its own, which is also
 * what makes Show more usable: the button stays reachable.
 */
.board-col { display: flex; flex-direction: column; max-height: 72vh; }
.board-col .board-cards { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* Dashboard next actions */
.next-list { display: flex; flex-direction: column; gap: 8px; }
.next-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.next-item:hover { border-color: var(--brand); transform: translateX(2px); box-shadow: var(--shadow-card); }
.next-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.next-item.tone-hot .next-icon { background: var(--pink-bg); color: var(--pink); }
.next-item.tone-warn .next-icon { background: var(--amber-bg); color: var(--amber); }
.next-item.tone-good .next-icon { background: var(--mint); color: var(--mint-ink); }
.next-body { flex: 1; min-width: 0; display: block; }
.next-body b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.next-body .meta { display: block; font-size: 13px; }
.next-cta { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--brand); }

.snippet { background: var(--dark); color: #9fe8c0; border-radius: 8px; padding: 10px 12px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; overflow-x: auto; white-space: nowrap; cursor: pointer; max-width: 100%; }
.dot-ok { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-left: 5px; vertical-align: middle; }
.nowrap { white-space: nowrap; }

@media (max-width: 760px) {
  .next-item { flex-wrap: wrap; }
  /* flex-basis, not width: width:100% here resolved against the border box
     rather than the content box, so the link sat 78px past the card edge.
     A basis of 100% forces its own line and leaves the width to flex. */
  /* Scoped to the next-actions list. The same class is used for the "Open"
     link on the hottest prospect card, which sits in a row that does not
     wrap, and a 100% basis there pushed it straight off the card. */
  .next-item > .next-cta { flex: 1 0 100%; width: auto; padding-left: 52px; }
  .viewbar { align-items: stretch; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; justify-content: center; }
}

/* ---------- Sequences ---------- */
.client-card { padding: 0; overflow: hidden; margin-bottom: 14px; }
.client-card:last-of-type { margin-bottom: 0; }

.client-head {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px; flex-wrap: wrap;
}
.client-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.client-id > a { color: var(--ink); font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.client-id > a:hover { color: var(--brand); }
.client-id .meta { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-id .chip { font-size: 10px; padding: 1px 6px; }

/* Status and actions hug the right edge instead of stretching across the gap */
.client-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.client-state { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.client-state .pill { flex: none; }
.client-state .meta { font-size: 12px; }
.client-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Compact progress: one filled bar per email already written */
.steps { display: inline-flex; gap: 3px; align-items: center; cursor: help; }
.steps i { width: 14px; height: 4px; border-radius: 2px; background: var(--line); }
.steps i.on { background: var(--brand); }

/* Email rows: one line each, so a card scans at a glance */
.mail-list { border-top: 1px solid var(--line); background: var(--surface-2); }
.mail-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
}
.mail-row:last-child { border-bottom: 0; }
.step-dot {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  font: 700 11.5px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.step-dot.loose { color: var(--ink-3); }
.mail-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-text .meta { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-stat { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; min-width: 130px; }
.mail-stat .meta { font-size: 11.5px; }
.mail-metric {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-width: 44px;
  color: var(--ink-3); font: 500 12.5px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.mail-metric svg { opacity: .65; }
.mail-do { flex: 0 0 auto; display: flex; gap: 6px; }
.mail-empty { padding: 0 18px 16px; font-size: 12.5px; }

/* Radio cards for angle, length and tone */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pick-grid.pick-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pick {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color .14s ease, background .14s ease;
}
.pick:hover { border-color: var(--ink-3); }
.pick.on { border-color: var(--brand); background: var(--mint); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick b { font-size: 13.5px; }
.pick .meta { font-size: 12px; line-height: 1.5; }

/* Step editor */
.step-row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.step-row:first-child { border-top: 0; }
.step-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 22px;
  background: var(--dark); color: var(--neon); font: 700 13px/1 var(--font-body);
}
.step-main { flex: 1; min-width: 0; }
.step-brief { font-size: 12.5px; margin: 8px 0 10px; line-height: 1.6; }

/* Bulk selection bar on the websites list */
/* [hidden] must win over the display rule below, or the bar shows at 0 selected */
.bulkbar[hidden] { display: none; }
.bulkbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 12px;
  background: var(--dark); color: #fff; border-radius: 13px;
}
.bulkbar b { font-size: 14px; }
.bulkbar .meta { color: rgba(255,255,255,.7); }
.bulkbar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.25); }
.bulk-cb, #bulk-all { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }

@media (max-width: 760px) {
  .client-head { align-items: flex-start; }
  .client-state, .client-actions { width: 100%; }
  .step-row { flex-direction: column; gap: 8px; }
  .step-no { margin-top: 0; }
}

/* ---------- Plain-language tooltips ---------- */
.tip {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-left: 5px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-3);
  font: 700 10px/1 var(--font-body); cursor: help;
  vertical-align: middle; position: relative; user-select: none;
  transition: background .14s ease, color .14s ease;
}
.tip:hover, .tip:focus-visible { background: var(--brand); color: #fff; outline: none; }
.tip-bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 270px; z-index: 70;
  padding: 10px 13px; border-radius: 11px;
  background: var(--dark); color: rgba(255,255,255,.92);
  font: 400 12.5px/1.6 var(--font-body); text-align: left;
  /* Never inherit nowrap. A tooltip in a table header sat inside
     .table th, which is white-space:nowrap, so the whole sentence ran on one
     line past the edge of its own bubble and read as cut off. A bubble wraps,
     wherever it is hung. */
  white-space: normal; overflow-wrap: break-word;
  box-shadow: 0 14px 32px rgba(16,24,32,.26);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.tip-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--dark);
}
.tip:hover .tip-bubble, .tip:focus-visible .tip-bubble { opacity: 1; visibility: visible; }
/* In the rightmost grid column a centred bubble would hang past the page
   edge, so anchor it to the right of its icon instead */
.grid-4 > *:last-child .tip-bubble, .grid-5 > *:last-child .tip-bubble,
.dash-credits .tip-bubble { left: auto; right: -6px; transform: none; }
.grid-4 > *:last-child .tip-bubble::after, .grid-5 > *:last-child .tip-bubble::after,
.dash-credits .tip-bubble::after { left: auto; right: 10px; transform: none; }
/* Near the left edge the bubble would clip, so anchor it left instead */
.tip.tip-left .tip-bubble { left: 0; transform: none; }
.tip.tip-left .tip-bubble::after { left: 14px; transform: none; }
/* Lifted out of any scrolling ancestor. A tooltip inside .table-wrap, which
   is overflow-x:auto, was clipped at the container edge and read as a broken
   dark box; positioned fixed by app.js it floats over everything instead. The
   tail is dropped in that mode because a fixed bubble is no longer glued to
   its icon's box. */
.tip-bubble.tip-fixed { position: fixed; bottom: auto; transform: none; z-index: 300; }
.tip-bubble.tip-fixed::after { display: none; }
th .tip { margin-left: 4px; }
.stat-label .tip { vertical-align: baseline; }

@media (max-width: 900px) {
  .mail-row { flex-wrap: wrap; row-gap: 8px; }
  .mail-text { flex-basis: 100%; order: 2; }
  .step-dot { order: 1; }
  .mail-stat { order: 3; min-width: 0; }
  .mail-metric { order: 4; }
  .mail-do { order: 5; margin-left: auto; }
  .client-right { width: 100%; margin-left: 0; }
}

/* ---------- Live scan screen ---------- */
.scan-hero {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 26px 28px 22px; margin-bottom: 16px;
  background: linear-gradient(135deg, #0b2b1c 0%, #0f3d27 42%, #10261c 100%);
  color: #fff;
}
.scan-hero .orb { opacity: .55; }
.scan-hero-in { position: relative; z-index: 2; }
.scan-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scan-eyebrow {
  display: inline-block; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.scan-headline { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.15; color: #fff; }

.scan-pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
  font: 600 13px/1 var(--font-body);
}
.scan-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.scan-pill.live { background: rgba(53,226,122,.18); color: var(--neon); }
.scan-pill.live .dot { animation: pulse-dot 1.3s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.scan-bar {
  height: 7px; margin: 20px 0 18px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.13);
}
.scan-bar-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--neon), #7df0ac);
  box-shadow: 0 0 14px rgba(53,226,122,.55);
  transition: width .7s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden;
}
.scan-hero.is-live .scan-bar-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: sheen 1.5s linear infinite;
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.scan-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ctr {
  padding: 12px 14px; border-radius: 13px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
}
.ctr b {
  display: block; font-family: var(--font-display); font-size: 27px; line-height: 1.1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.ctr span { font-size: 12px; color: rgba(255,255,255,.6); }
.ctr .tip { background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.ctr .tip:hover, .ctr .tip:focus-visible { background: var(--neon); color: var(--dark); }

/* Two columns that stay full: pipeline left, finds and log right */
.scan-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; align-items: start; }
.scan-right { display: flex; flex-direction: column; gap: 16px; }

.pipe { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pipe-step {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 11px 0 11px 2px; position: relative;
}
/* The connecting rail between stage markers */
.pipe-step::before {
  content: ""; position: absolute; left: 13px; top: 34px; bottom: -6px;
  width: 2px; background: var(--line);
}
.pipe-step:last-child::before { display: none; }
.pipe-step.done::before { background: var(--brand); }
.pipe-mark {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--surface-2); color: var(--ink-3); border: 2px solid var(--line);
  font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pipe-step.done .pipe-mark {
  background: var(--brand); border-color: var(--brand); color: #fff; font-size: 0;
}
.pipe-step.done .pipe-mark::after { content: "\2713"; font-size: 13px; font-weight: 700; }
.pipe-step.live .pipe-mark {
  background: var(--dark); border-color: var(--neon); color: var(--neon);
  box-shadow: 0 0 0 5px rgba(53,226,122,.16);
  animation: mark-pulse 1.6s ease-in-out infinite;
}
@keyframes mark-pulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(53,226,122,.16); }
  50% { box-shadow: 0 0 0 10px rgba(53,226,122,.05); }
}
.pipe-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
.pipe-text b { font-size: 14px; }
.pipe-text .meta { font-size: 12.5px; line-height: 1.5; }
.pipe-step.todo .pipe-text b, .pipe-step.todo .pipe-text .meta { opacity: .45; }
.pipe-step.live .pipe-text b { color: var(--brand); }

/* Finds stream in as they are scored */
.finds { display: flex; flex-direction: column; }
.find {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.find:last-child { border-bottom: 0; }
.find:hover .find-text b { color: var(--brand); }
.find-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.find-text b { font-size: 14px; }
.find-text .meta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find.fresh { animation: find-in .5s cubic-bezier(.16,1,.3,1); }
@keyframes find-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* Placeholders so the panel is never an empty white box */
.ghost-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; animation: ghost 1.5s ease-in-out infinite; }
.ghost-ring { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); }
.ghost-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ghost-lines span { height: 9px; border-radius: 5px; background: var(--surface-2); display: block; }
.ghost-lines .g1 { width: 42%; }
.ghost-lines .g2 { width: 72%; }
@keyframes ghost { 0%,100% { opacity: .75; } 50% { opacity: .35; } }

.scan-log-card .scanlog {
  max-height: 260px; overflow-y: auto;
  font: 12.5px/1.85 ui-monospace, Menlo, monospace; color: var(--ink-2);
}
.scan-log-card .scanlog .line { display: flex; gap: 8px; }
.scan-log-card .scanlog .tick { color: var(--brand); flex: none; }

@media (max-width: 1000px) {
  .scan-grid { grid-template-columns: 1fr; }
  .scan-counters { grid-template-columns: repeat(2, 1fr); }
  .scan-headline { font-size: 22px; }
}

/* Long page titles must not push the credits pill off the topbar */
.topbar .tb-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) {
  .topbar { gap: 10px; }
  .topbar .tb-title { font-size: 17px; }
}

/* ---------- Connect a sending mailbox ---------- */
.btn-google {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px; border-radius: 11px;
  background: #fff; color: #3c4043;
  border: 1px solid #dadce0; font: 600 14.5px/1 var(--font-body);
  transition: box-shadow .14s ease, background .14s ease;
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60,64,67,.24); }
.btn-google .g-mark {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  color: #fff; font: 800 12px/1 var(--font-body);
  -webkit-text-stroke: 0; text-shadow: 0 0 2px rgba(0,0,0,.35);
}

.mailbox-row { display: flex; align-items: center; gap: 13px; }
.mb-id { flex: 1; min-width: 0; }
.mb-mark {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-3); font: 800 14px/1 var(--font-body);
}
.mb-mark.g { background: #fff; color: #4285f4; border-color: #dadce0; }

/* "Use another provider" stays out of the way until wanted */
.adv > summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2);
  padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 7px;
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::before {
  content: "\203A"; display: inline-block; font-size: 17px; color: var(--ink-3);
  transition: transform .16s ease;
}
.adv[open] > summary::before { transform: rotate(90deg); }
.adv > summary:hover { color: var(--ink); }

/* ---------- Homepage ---------- */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px;
}
.hero-find {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 16px; margin-top: 18px;
}

/* Capability strip: facts about the engine, not customer claims */
.capstrip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  padding: 20px 24px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}
.cap { text-align: center; }
.cap b {
  display: block; font-family: var(--font-display); font-size: 26px; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.cap span { font-size: 12.5px; color: var(--ink-3); }

/* Problem vs solution */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.vs-col {
  position: relative; padding: 30px 30px 32px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--surface);
}
.vs-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.vs-head b { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.3; }
.vs-head span { font-size: 12.5px; color: var(--ink-3); }
.vs-mark {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
}
.vs-mark.bad { background: var(--surface-2); color: var(--ink-3); }
.vs-mark.good { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(31,168,92,.32); }

.vs-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vs-col li {
  position: relative; padding-left: 30px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-3);
}
.vs-col li b { color: var(--ink-2); font-weight: 600; }
.vs-col li::before {
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.vs-bad li::before { content: "\00d7"; background: var(--surface-2); color: var(--ink-3); }
.vs-bad .vs-head b { color: var(--ink-2); }

.vs-good {
  border-color: rgba(31,168,92,.42);
  background:
    radial-gradient(120% 80% at 82% 0%, rgba(53,226,122,.16) 0%, transparent 58%),
    linear-gradient(180deg, var(--mint) 0%, var(--surface) 46%);
  box-shadow: 0 20px 48px rgba(31,168,92,.13);
}
.vs-good li::before { content: "\2713"; background: var(--brand); color: #fff; }
.vs-good li b { color: var(--ink); }
.vs-badge {
  position: absolute; top: -12px; right: 24px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(31,168,92,.3);
}

/*
 * Alternating step rows on the marketing homepage. Named apart from the
 * .step-row the sequence editor uses, which is a flex row and was being
 * turned into a two column grid by these rules.
 */
.how-row {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: center;
  padding: 40px 0; border-top: 1px solid var(--line);
}
.how-row.alt .step-text { order: 2; }
.how-row.alt .step-vis { order: 1; }
.step-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--dark); color: var(--neon); font: 700 15px/1 var(--font-body); margin-bottom: 12px;
}
.step-text h3 { font-size: 24px; margin-bottom: 10px; }
.tick-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Ordered sibling of .tick-list, for setup steps that have to happen in order. */
.num-list { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.num-list li { font-size: 14px; color: var(--ink-2); padding-left: 4px; }
.tick-list li { position: relative; padding-left: 24px; font-size: 14px; color: var(--ink-2); }
.tick-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

/* Browser-chrome mockups */
.mock { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 44px rgba(16,24,32,.12); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.mock-bar i {
  margin-left: 10px; font-style: normal; font-size: 11.5px; color: var(--ink-3);
  background: var(--surface); border-radius: 6px; padding: 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-body { padding: 18px; }

/* SERP */
.serp-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; }
.serp-pos { flex: none; width: 24px; text-align: center; font: 700 12.5px/1 var(--font-body); color: var(--ink-3); }
.serp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.serp-txt b { font-size: 14px; color: #1a4fb4; }
.serp-txt i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.serp-row.hit { background: var(--pink-bg); }
.serp-row.hit .serp-pos { color: var(--pink); }
.serp-gap { text-align: center; font-size: 11.5px; color: var(--ink-3); padding: 8px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin: 6px 0; }
.serp-note { margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: var(--surface-2); font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.money { color: var(--brand); }

/* Audit page */
.audit-mock { padding: 0; }
.audit-head { display: flex; align-items: center; gap: 13px; padding: 18px; border-bottom: 1px solid var(--line); }
.audit-head b { display: block; font-size: 15px; }
.audit-head .meta { font-size: 12px; }
.audit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 18px; }
.audit-stats div { text-align: center; padding: 12px 6px; background: var(--surface-2); border-radius: 11px; }
.audit-stats b { display: block; font-family: var(--font-display); font-size: 20px; }
.audit-stats span { font-size: 11.5px; color: var(--ink-3); }
.audit-quote { margin: 0 18px 16px; padding: 14px 16px; border-radius: 11px; background: var(--dark); }
.audit-quote .meta { color: rgba(255,255,255,.5); font-size: 11.5px; }
.audit-quote p { color: rgba(255,255,255,.9); font-size: 13.5px; line-height: 1.6; margin: 7px 0 10px; }
.audit-cta { margin: 0 18px 18px; padding: 12px; text-align: center; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; }

/* Email */
.mail-head { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.mail-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--neon); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.mail-head b { display: block; font-size: 13.5px; }
.mail-head .meta { font-size: 12px; }
.mail-subject { font-family: var(--font-display); font-weight: 700; font-size: 17px; padding: 15px 0 6px; }
.mail-body p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
.mail-link { color: var(--brand); text-decoration: underline; }
.mail-foot { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }

/* Proposal */
.prop-mock { padding: 0; }
.prop-head { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.prop-head b { display: block; font-family: var(--font-display); font-size: 16px; }
.prop-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.prop-line b { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.prop-proj { padding: 16px 18px; }
.proj-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); margin-top: 26px; }
.proj-bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--line); }
.proj-bar i em, .proj-bar b em { position: absolute; top: -20px; left: 0; font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.proj-bar b { position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--mint); }
.proj-bar b em { left: auto; right: 0; color: var(--brand); font-weight: 700; }
.prop-accept { margin: 4px 18px 18px; padding: 12px; text-align: center; border-radius: 10px; background: var(--dark); color: #fff; font-weight: 700; font-size: 14px; }

/* Signal cards on the dark panel */
.sig-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 20px; }
.sig-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(53,226,122,.14); color: var(--neon); margin-bottom: 12px; }
.sig-card h4 { color: #fff; font-size: 15.5px; margin-bottom: 6px; }
.sig-card p { color: rgba(255,255,255,.6); font-size: 13.5px; line-height: 1.6; margin: 0; }

/* Coverage */
.cov { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.cov-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.cov-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.cov-row span { color: var(--ink-3); }
.cov-cost { padding: 14px 18px; background: var(--mint); color: var(--mint-ink); font-size: 14px; font-weight: 600; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 8px; top: 15px;
  font-size: 22px; color: var(--ink-3); font-weight: 400; transition: transform .18s ease;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 0 0 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.75; max-width: 680px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .capstrip { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .vs, .cov { grid-template-columns: 1fr; }
  .how-row { grid-template-columns: 1fr; gap: 26px; padding: 30px 0; }
  .how-row.alt .step-text { order: 1; }
  .how-row.alt .step-vis { order: 2; }
}

/* ---------- Long-form article content on tool and marketing pages ---------- */
.article h2 {
  font-size: clamp(24px, 2.6vw, 30px); margin: 44px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.article h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.article h3 { font-size: 19px; margin: 28px 0 8px; }
.article p { font-size: 16px; line-height: 1.8; color: var(--ink-2); margin: 0 0 16px; max-width: 74ch; }
.article p b, .article li b { color: var(--ink); }
.article i { font-style: italic; }
.article .tick-list { margin: 18px 0 22px; gap: 12px; }
.article .tick-list li { font-size: 15.5px; line-height: 1.75; padding-left: 28px; }
.article .table { font-size: 14.5px; }
.article .table td { vertical-align: top; }
.article .faq { margin: 0; }

/* ---------- Dark cosmic hero ---------- */
.hero-wrap { max-width: 1280px; }

/* Homepage variant: the dark shell bleeds edge to edge, the content inside
   stays on the same 1240px grid as every .section. */
.hero-bleed { width: 100%; }
.hero-bleed .hero-dark {
  border-radius: 0;
  padding-left: 0; padding-right: 0;
  padding-top: clamp(40px, 5vw, 74px);
}
.hero-bleed .hero-inner,
.hero-bleed .hero-sources {
  max-width: 1240px; margin-left: auto; margin-right: auto;
  padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px);
}
.hero-bleed .hero-inner { min-height: clamp(430px, 52vh, 540px); }
.hero-bleed .hero-sources { margin-top: clamp(24px, 3vw, 44px); }
.hero-bleed + .section { padding-top: clamp(28px, 4.4vw, 62px); }
.hero-dark {
  position: relative; overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 78% 34%, #0d3324 0%, transparent 62%),
    linear-gradient(160deg, #0a1a13 0%, #061009 55%, #040b07 100%);
  padding: clamp(30px, 4.2vw, 62px) clamp(24px, 4vw, 60px) 0;
  isolation: isolate;
}
/* The artwork sits behind the copy and bleeds off the right edge */
.hero-art {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: -6%; transform: translateY(-54%);
  width: min(64%, 820px); height: auto;
  opacity: .95;
  mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 100%);
  animation: hero-drift 16s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: translateY(-54%) scale(1); }
  to   { transform: translateY(-51%) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 30px; align-items: center; min-height: 430px; }
.hero-copy { max-width: 620px; }
.badge-line.dark {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13);
  color: rgba(255,255,255,.82);
}
.hero-copy h1 {
  color: #fff; margin: 18px 0 16px;
  font-size: clamp(29px, 3.5vw, 45px); line-height: 1.1; letter-spacing: -.02em;
}
.hero-copy h1 .accent { color: var(--neon); }
.hero-copy > p {
  color: rgba(255,255,255,.7); font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.65; max-width: 500px; margin: 0;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: var(--dark);
  padding: 8px 8px 8px 24px; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; border: 0;
  box-shadow: 0 0 0 5px rgba(255,255,255,.09);
  transition: box-shadow .16s ease, transform .16s ease;
}
.btn-hero:hover { transform: translateY(-1px); box-shadow: 0 0 0 7px rgba(53,226,122,.18); }
.btn-hero-arrow {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff;
}
.btn-hero-ghost {
  display: inline-flex; align-items: center;
  padding: 13px 24px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: #fff;
  border: 1px solid rgba(255,255,255,.16); font-weight: 600; font-size: 15.5px;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.11); }
.hero-copy > p.hero-note {
  color: rgba(255,255,255,.45); font-size: 13px; line-height: 1.6;
  margin: 40px 0 0; max-width: 420px;
}

/* Floating capability pills over the artwork */
.hero-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hpill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(12,28,20,.72); backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9); font-size: 13.5px; font-weight: 500;
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  animation: hpill-in .6s cubic-bezier(.16,1,.3,1) both;
}
.hpill svg { color: var(--neon); flex: none; }
.hpill:nth-child(2) { margin-right: 34px; animation-delay: .12s; }
.hpill:nth-child(3) { margin-right: 8px; animation-delay: .24s; }
@keyframes hpill-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Data sources strip, the honest stand-in for a borrowed logo wall */
.hero-sources {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.6vw, 38px);
  flex-wrap: wrap; text-align: center;
  margin-top: clamp(24px, 3vw, 44px);
  padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.09);
}
.hero-sources span { color: rgba(255,255,255,.5); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.hero-sources .src-label {
  color: rgba(255,255,255,.32); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { width: 116%; right: -22%; opacity: .5; mask-image: none; -webkit-mask-image: none; }
  .hero-pills { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; margin-top: 26px; }
  .hpill:nth-child(2), .hpill:nth-child(3) { margin-right: 0; }
  .hero-copy h1 { font-size: clamp(26px, 6.6vw, 34px); }
}

/* ---------- Shared dark section shell ---------- */
.dark-block {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 26px;
  padding: clamp(30px, 4.4vw, 60px);
  background:
    radial-gradient(110% 90% at 72% 40%, #0d3324 0%, transparent 60%),
    linear-gradient(160deg, #0a1a13 0%, #061009 55%, #040b07 100%);
}
.block-art { position: absolute; z-index: 0; pointer-events: none; opacity: .9; height: auto; }
.block-art.globe { right: -10%; top: 50%; transform: translateY(-50%); width: min(50%, 520px); }
.block-art.radar { left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(96%, 900px); opacity: .55; }
.block-inner { position: relative; z-index: 2; }
.block-inner.center-block { text-align: center; }

.eyebrow.neon { color: var(--neon); }
h2.on-dark { color: #fff; }
h2.on-dark .accent { color: var(--neon); }
.on-dark-p { color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.7; }

.chip-dark {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 500;
}
.chip-dark.on { background: rgba(53,226,122,.16); border-color: transparent; color: var(--neon); font-weight: 600; }

/* Coverage */
.block-inner.cov { display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
.cov-panel.dark {
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px; overflow: hidden;
  background: rgba(8,20,14,.72); backdrop-filter: blur(10px);
}
.cov-panel.dark .cov-row { border-bottom-color: rgba(255,255,255,.09); color: #fff; }
.cov-panel.dark .cov-row span { color: rgba(255,255,255,.5); }
.cov-panel.dark .cov-cost { background: rgba(53,226,122,.15); color: var(--neon); }

@media (max-width: 980px) {
  .block-inner.cov { grid-template-columns: 1fr; gap: 28px; }
  .block-art.globe { width: 90%; right: -30%; opacity: .35; }
}

/* ---------- Homepage polish: every section carries the hero's weight ---------- */

/* Headings share the hero's tighter tracking */
.section h2 { letter-spacing: -.02em; line-height: 1.12; }

/* Capability strip: glass, with a live feel */
.capstrip {
  position: relative;
  padding: 24px 28px; border-radius: 20px;
  background:
    radial-gradient(90% 140% at 50% -20%, rgba(53,226,122,.1) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(16,24,32,.07);
}
.cap { position: relative; padding: 4px 6px; }
.cap + .cap::before {
  content: ""; position: absolute; left: -5px; top: 14%; bottom: 14%;
  width: 1px; background: var(--line);
}
.cap b {
  background: linear-gradient(180deg, var(--ink) 30%, var(--brand) 190%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Step rows: number gets weight, mockups get a glow bed */
.step-num {
  width: 40px; height: 40px; font-size: 16px;
  background: linear-gradient(150deg, #0d3324, #061009);
  box-shadow: 0 8px 20px rgba(6,16,9,.28), inset 0 0 0 1px rgba(53,226,122,.24);
}
.step-text h3 { font-size: 25px; letter-spacing: -.015em; }
.step-vis { position: relative; }
.step-vis::before {
  content: ""; position: absolute; z-index: 0; inset: 8% 0 -10%;
  background: radial-gradient(58% 58% at 50% 55%, rgba(53,226,122,.2) 0%, transparent 70%);
  filter: blur(46px); pointer-events: none;
}
.step-vis .mock { position: relative; z-index: 1; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.step-vis .mock:hover { transform: translateY(-5px); box-shadow: 0 28px 62px rgba(16,24,32,.17); }

/*
 * Step artwork.
 *
 * The illustration carries the look and a single floating card carries the
 * proof, because a generic drawing on its own says nothing a competitor could
 * not also claim. The card overlaps the art rather than sitting under it so
 * the pair reads as one object.
 */
/* The figure is capped to the artwork so the card can align to the picture
   rather than to the whole grid column, which left it wider than the drawing
   and pushed the page into a horizontal scroll. */
.step-art { position: relative; z-index: 1; margin: 0 auto; padding: 0 0 34px; max-width: 430px; }
.step-art img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  filter: drop-shadow(0 22px 40px rgba(16,40,26,.13));
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.step-art:hover img { transform: translateY(-6px) scale(1.015); }

.step-card {
  position: absolute; left: -34px; right: 16%; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 7px;
  padding: 15px 17px; border-radius: 15px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 18px 42px rgba(16,40,26,.14);
}
.how-row.alt .step-card { left: 16%; right: -34px; }

.sc-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3, #7b8a81); }
.sc-row { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sc-row b { color: var(--ink); font-weight: 700; }
.sc-money { display: flex; align-items: baseline; gap: 8px; font: 700 26px/1 var(--font-display, var(--font-body)); color: var(--brand); letter-spacing: -.02em; }
.sc-money i { font: 400 12.5px/1.35 var(--font-body); color: var(--ink-3, #7b8a81); }
.sc-quote { font-size: 13px; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.sc-quote b { font-style: normal; color: var(--ink); }
.sc-subject { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.sc-tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--hot, #ff5c7a) 12%, transparent);
  color: color-mix(in srgb, var(--hot, #ff5c7a) 80%, #000);
}
.sc-tag.good {
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  color: color-mix(in srgb, var(--brand) 82%, #000);
}

@media (max-width: 900px) {
  .step-art { padding-bottom: 0; }
  .step-art img { max-width: 320px; }
  .step-card, .how-row.alt .step-card { position: static; margin-top: -14px; left: auto; right: auto; }
}
.how-row { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }

/*
 * Pricing cards.
 *
 * The four cards have to read as one row, so the feature list is pushed to a
 * common baseline and the button sits at the bottom of every card regardless of
 * how much copy sits above it. Without that the row looks ragged and the eye
 * cannot compare the plans.
 */
.pricing-grid { align-items: stretch; }
/* Every card carries the same 2px border box, transparent unless highlighted,
   so the popular one does not sit two pixels out of line with its neighbours */
.price-card { display: flex; flex-direction: column; position: relative; border: 2px solid transparent; }
.price-card.is-popular { border-color: var(--brand); box-shadow: 0 18px 44px rgba(31,168,92,.14); }
.price-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.price-amount { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.price-amount span { font-size: 14px; color: var(--ink-3); font-weight: 500; }

.price-list {
  list-style: none; margin: 4px 0 18px; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px; flex: 1;
}
.price-list li {
  position: relative; padding-left: 21px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.price-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700; font-size: 12.5px;
}
.price-list b { color: var(--ink); font-weight: 700; }
.price-list i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.price-card .btn-block { margin-top: auto; }

@media (max-width: 980px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/*
 * Dashboard.
 *
 * The hero pairs the day's most important number with the two actions that
 * move it, and the illustration gives the page a face without costing any
 * data. Widgets on the right stay small: one prospect, one nudge, never a
 * second copy of a list that lives on its own page.
 */
.dash-top { display: grid; grid-template-columns: 1fr 240px; gap: 14px; align-items: stretch; }
.dash-hero { display: flex; align-items: center; gap: 18px; overflow: hidden; position: relative; }
.dash-hero-copy { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dash-hero-art {
  width: 210px; height: 210px; flex: 0 0 auto; margin: -10px -6px -14px 0;
  filter: drop-shadow(0 14px 26px rgba(16,40,26,.12));
}
.dash-credits { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.credits-ring { position: relative; width: 112px; height: 112px; margin: 8px 0 6px; }
.credits-num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.05;
}
.credits-num b { font-family: var(--font-display); letter-spacing: -.02em; max-width: 78px; white-space: nowrap; }
.credits-num span { font-size: 11.5px; color: var(--ink-3); }

/* Tiny pipeline funnel inside a stat card */
.funnel { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.funnel-row { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 8px; }
.funnel-row span { font-size: 11.5px; color: var(--ink-3); }
.funnel-row i {
  display: block; height: 9px; border-radius: 999px; min-width: 9px;
  background: color-mix(in srgb, var(--brand) 75%, #fff);
}
.funnel-row:first-child i { background: color-mix(in srgb, var(--brand) 30%, #fff); }
.funnel-row:last-child i { background: var(--brand); }
.funnel-row b { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.dash-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 14px; }
/* Grid and flex children default to min-width:auto, so a card holding an 84px
   image beside text refused to shrink below its min-content and pushed past
   the screen on a 320px phone. Same guard the .grid-2/3/4 rows already carry. */
.dash-top > *, .dash-main > *, .dash-side > * { min-width: 0; }

.dash-prospect {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  padding: 4px 0;
}
.dash-prospect-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-prospect-body b { font-size: 14.5px; }
.dash-prospect-money { font-weight: 700; color: var(--brand); font-size: 15px; margin-top: 2px; }
.dash-prospect-money i { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--ink-3); }

.dash-cta-card { display: flex; align-items: center; gap: 12px; }
.dash-cta-card img { width: 84px; height: 84px; flex: 0 0 auto; }

.dash-first { display: flex; align-items: center; gap: 26px; }
.dash-first-art { width: 220px; height: 220px; flex: 0 0 auto; }
.dash-done { padding: 10px 0 14px; }

@media (max-width: 980px) {
  .dash-top { grid-template-columns: 1fr; }
  .dash-hero-art { width: 150px; height: 150px; }
  .dash-main { grid-template-columns: 1fr; }
  .dash-first { flex-direction: column; text-align: center; }
}

/*
 * The dashboard on a phone.
 *
 * Above this width the hero is copy beside artwork. At 390px that left the
 * headline about 180px wide and broke "Your pipeline is sitting on $3,452,682
 * a month" over four lines, with the paragraph in a column barely wider. The
 * artwork is decorative, alt="" and nothing else, so on a phone it goes and
 * the copy takes the card.
 */
@media (max-width: 640px) {
  .dash-hero { display: block; }
  .dash-hero-art { display: none; }
  .dash-hero-copy p { max-width: none; }

  /* Two CTAs cannot sit side by side here once either label is more than one
     word, and a row that wraps halfway reads as a bug rather than a layout.
     Stacked and full width is a deliberate shape. */
  .dash-hero-copy .flex { flex-direction: column; align-items: stretch; }
  .dash-hero-copy .flex > .btn { width: 100%; }

  /* The credits card stacked label, ring, plan line and button vertically,
     which spent most of a phone screen on a single number. The ring sits
     beside the plan line instead, and only the button keeps its own row. */
  .dash-credits {
    flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-start;
    gap: 10px 14px;
  }
  .dash-credits > .stat-label { flex: 0 0 100%; }
  .dash-credits .credits-ring { margin: 0; flex: 0 0 auto; }
  .dash-credits .meta.center { flex: 1; min-width: 0; text-align: left; }
  .dash-credits > .btn { flex: 0 0 100%; margin-top: 2px; }

  /* Four stat cards one per row is a long scroll for four numbers. Two up
     reads fine, but the pipeline funnel needs its label, bar and count on a
     single line and does not fit in half a phone, so it keeps a full row. */
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-stats > :last-child { grid-column: 1 / -1; }
  /* With four cards and the last one spanning, the third is left alone beside
     an empty cell. Stretch it too. Scoped to "third of four" so adding a fifth
     card does not silently inherit this. */
  .dash-stats > :nth-child(3):nth-last-child(2) { grid-column: 1 / -1; }
  /* Two up means the right hand card is now against the page edge, where a
     centred tip bubble hangs off screen. Same flip as the rightmost column. */
  .dash-stats > :nth-child(even) .tip-bubble { left: auto; right: -6px; transform: none; }
  .dash-stats > :nth-child(even) .tip-bubble::after { left: auto; right: 10px; transform: none; }
  .tip-bubble { max-width: calc(100vw - 56px); }
}

/*
 * The chat launcher is fixed 20px from the bottom and is 56px tall, so the
 * last card on a page sat underneath it. Only an issue where the launcher
 * overlaps content, which is every phone width.
 */
@media (max-width: 900px) {
  .content { padding-bottom: 96px; }
}

/*
 * Sequences: list rows and the per-client conversation page.
 *
 * The list is a table because the question it answers is "who am I chasing
 * and where does each one stand", which is a scanning task. The conversation
 * page is cards because its question is "what exactly did we say", which is a
 * reading task. Mixing the two on one page was what made it confusing.
 */
.rowlink { cursor: pointer; }
.rowlink:hover { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.rowlink .btn { pointer-events: none; }

.seqc-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start; }
.seqc-thread { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.seqc-side { display: flex; flex-direction: column; gap: 14px; }

.seqc-mail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.seqc-mail-meta { flex: 1; min-width: 0; }
.seqc-mail-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.seqc-mail-body {
  font-size: 14.5px; line-height: 1.75; color: var(--ink-2);
  white-space: pre-line; word-break: break-word;
  padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink-3) 5%, transparent);
  border: 1px solid var(--line);
}
.seqc-why {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; color: color-mix(in srgb, var(--brand) 75%, #000);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-left: 3px solid var(--brand);
}
.seqc-why svg { flex: 0 0 auto; margin-top: 2px; }
.seqc-mail-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .seqc-grid { grid-template-columns: 1fr; }
}

/* Signal cards lift on the dark panel */
.sig-card { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.sig-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.08);
  border-color: rgba(53,226,122,.34);
}

/* Pricing cards */
#pricing .card {
  border-radius: 20px; padding: 26px 24px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#pricing .card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(16,24,32,.11); }
#pricing .card[style*="--neon"] {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(53,226,122,.15) 0%, transparent 62%),
    var(--surface);
  box-shadow: 0 22px 52px rgba(31,168,92,.18);
}

/* FAQ */
.faq-item { border-radius: 14px; padding: 0 18px; transition: background .18s ease; }
.faq-item[open] { background: var(--surface); box-shadow: 0 10px 30px rgba(16,24,32,.06); border-bottom-color: transparent; }
.faq-item summary:hover { color: var(--brand); }

/* The final dark CTA reads as the close, so it gets a ring of light */
.cta-block { text-align: center; }
.cta-block::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 120px rgba(53,226,122,.09);
  border-radius: inherit;
}

@media (max-width: 900px) {
  .cap + .cap::before { display: none; }
  .step-vis::before { display: none; }
}

/* ---------- Homepage rhythm and composition fixes ---------- */
/* The globe should read through the settings panel, not hide behind it */
.block-art.globe {
  right: -8%; width: min(58%, 640px); opacity: 1;
}
.cov-block { overflow: hidden; }
.cov-panel.dark { background: rgba(6,16,11,.62); }

/* The hero already carries a lot of weight, so the strip below sits close */
.hero-wrap + .section { padding-top: clamp(20px, 2.4vw, 34px); }
/* Section pairs that belong together breathe less between them */
.section + .section { padding-top: clamp(28px, 4.4vw, 62px); }

/* ---------- App name prominence (Google OAuth branding requirement) ---------- */
.hero-copy h1 .brand-name { color: #fff; white-space: nowrap; }

/* Volume we had to estimate is labelled, never passed off as measured */
.est {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  border-radius: 5px; background: var(--surface-2); color: var(--ink-3);
  font-size: 10px; font-weight: 700; letter-spacing: .03em; cursor: help;
  vertical-align: middle;
}

/* ---------- Live discovery cards on the scan screen ---------- */
.found-list { display: flex; flex-direction: column; gap: 8px; }
.found-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid transparent;
}
.found-row.is-new { animation: found-in .45s cubic-bezier(.16,1,.3,1) both; }
.found-row:hover { border-color: var(--line); }
@keyframes found-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.found-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px rgba(31,168,92,.14);
  animation: found-pulse 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .found-row.is-new { animation: none; }
  .found-dot { animation: none; }
}
@keyframes found-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31,168,92,.14); }
  50% { box-shadow: 0 0 0 6px rgba(31,168,92,.05); }
}
.found-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.found-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.found-meta { font-size: 12.5px; color: var(--ink-3); }
.found-tags { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.found-tag {
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.found-tag.strong { background: var(--mint); border-color: transparent; color: var(--mint-ink); }
.found-tag.ads { background: var(--pink-bg); border-color: transparent; color: var(--pink); }

@media (max-width: 620px) {
  .found-row { flex-wrap: wrap; }
  .found-tags { width: 100%; justify-content: flex-start; padding-left: 21px; }
}

/* ============================================================
   Feature bento. Five cards, each one a real piece of the app
   drawn from the same tokens the product uses. The mockups
   bleed past the card edge and fade out, so a card reads as a
   window onto the software rather than a boxed screenshot.
   ============================================================ */
.bento-wrap { position: relative; overflow-x: clip; }
.bento-wrap::before {
  content: ""; position: absolute; z-index: 0; inset: -6% 0 10%;
  background: radial-gradient(46% 46% at 50% 40%, rgba(53,226,122,.16) 0%, transparent 72%);
  filter: blur(60px); pointer-events: none;
}
.bento {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
}
.bento-card {
  position: relative; overflow: hidden; isolation: isolate;
  grid-column: span 2; min-height: 362px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(14,31,23,.12); }
.bento-card.b-wide { grid-column: span 4; }
.b-head { position: relative; z-index: 3; padding: 26px 28px 0; }
.b-head h3 { font-size: 20px; letter-spacing: -.015em; margin-bottom: 7px; }
.b-head p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.b-vis {
  position: relative; z-index: 1; flex: 1; min-height: 150px; margin-top: 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

/* Placeholder copy behind the focal element, exactly as blurred
   as it needs to be to stay unreadable and out of the way. */
.b-ghost { position: absolute; display: flex; flex-direction: column; gap: 9px; filter: blur(1.6px); opacity: .55; }
.b-ghost span { display: block; height: 9px; border-radius: 999px; background: var(--line); }
.b-ghost .w30 { width: 30%; } .b-ghost .w45 { width: 45%; } .b-ghost .w60 { width: 60%; }
.b-ghost .w75 { width: 75%; } .b-ghost .w90 { width: 90%; }

/* ---- Card 1: the finding, in a window that runs off the edge ---- */
.b-serp .b-ghost { top: 6px; left: 28px; width: 26%; }
.b-win {
  position: absolute; top: 0; left: 28%; right: -8px; bottom: -24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(14,31,23,.12);
}
.b-win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.b-win-bar b { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.b-win-bar i { margin-left: 8px; color: var(--ink-3); font-size: 11.5px; font-style: normal; }
.b-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.b-row.on { background: rgba(53,226,122,.07); box-shadow: inset 2px 0 0 var(--brand); }
.b-score {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--surface-2); color: var(--ink-2);
  font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.b-row.on .b-score { background: var(--mint); color: var(--mint-ink); }
.b-biz { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.b-biz b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-biz i { color: var(--ink-3); font-size: 11.5px; font-style: normal; white-space: nowrap; }
.b-money { flex: none; font-weight: 700; font-size: 13px; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.b-money em { display: block; font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--ink-3); }

/* ---- Card 2: search and filters, the box carrying the focus ring ---- */
.b-filter { padding: 0 0 0 28px; }
.b-search {
  display: flex; align-items: center; gap: 10px;
  margin-right: -34px; padding: 13px 16px;
  background: var(--surface); border: 1.5px solid var(--brand); border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(53,226,122,.16);
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.b-search svg { color: var(--ink-3); flex: none; }
.b-search em { font-style: normal; color: var(--ink-3); }
.b-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px -34px 0 0; }
.b-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 2px 6px rgba(14,31,23,.04);
}
.b-chip svg { color: var(--brand); flex: none; }

/* ---- Cards 3 and 4: a tag, an action menu, and the row of buttons ---- */
.b-stack { padding: 0 28px; }
.b-stack .b-ghost { position: static; margin-bottom: 20px; }
.b-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
}
.b-tag.amber { background: var(--amber-bg); color: var(--amber); }
.b-tag.mint { background: var(--mint); color: var(--mint-ink); }
.b-tag svg { flex: none; }
.b-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.b-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
}
.b-btn svg { color: var(--ink-3); flex: none; }
.b-btn.on { border-color: var(--brand); color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(53,226,122,.14); }
.b-btn.on svg { color: var(--brand); }
.b-menu {
  position: absolute; right: -16px; top: 46px; width: 190px;
  padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--brand);
  box-shadow: 0 18px 38px rgba(14,31,23,.16);
}
.b-mi {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
}
.b-mi:first-child { background: rgba(53,226,122,.1); }
.b-mi svg { flex: none; }
.b-mi.ok svg { color: var(--brand); }
.b-mi.no svg { color: var(--red); }
.b-mi.warn svg { color: var(--amber); }

/* ---- Card 5: the generated shield, sized to sit under the copy ---- */
.b-art .b-vis { -webkit-mask-image: none; mask-image: none; }
.b-shield {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100%, 300px); height: auto;
  mix-blend-mode: multiply;
  /* The render carries a faint tint to its corners, so its own box is faded out */
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
}

@media (max-width: 1080px) {
  .b-head h3 { font-size: 18.5px; }
  .b-win { left: 24%; }
}
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card, .bento-card.b-wide { grid-column: span 1; }
  /* Half width leaves no room for the blurred rail, so the window takes the card */
  .b-serp .b-ghost { display: none; }
  .b-win { left: 24px; }
  /* The last card would sit alone in a half row, so it closes the grid */
  .bento-card.b-art { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card.b-wide, .bento-card.b-art { grid-column: span 1; }
  .bento-card { min-height: 320px; }
  .bento-wrap::before { display: none; }
}

/* ============================================================
   Features: header mega menu, mobile drawer, footer columns and
   the /features/{slug} template. Everything below is driven by
   data/features.php, so the nav and the pages cannot drift.
   ============================================================ */

/* ---------- Header: Features mega menu ---------- */
.nav-public { position: relative; z-index: 60; }
.nav-mega { position: static; }
.nav-mega-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 9px 13px; border-radius: 999px; cursor: pointer;
  font: 500 14.5px/1 var(--font-body); color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.nav-mega-btn:hover, .nav-mega.open .nav-mega-btn, .nav-mega.is-active .nav-mega-btn { color: var(--ink); background: rgba(14, 31, 23, .06); }
.nav-chev {
  width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.nav-mega.open .nav-chev { transform: rotate(-135deg) translate(-2px, -2px); }

.mega {
  position: absolute; left: clamp(20px, 5vw, 56px); right: clamp(20px, 5vw, 56px); top: calc(100% - 4px);
  z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-mega.open .mega, .nav-mega:hover .mega, .nav-mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: none;
}
.mega-inner {
  max-width: 880px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
  padding: 14px;
}
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mega-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  color: var(--ink); transition: background .14s ease;
}
.mega-card:hover { background: var(--surface-2); color: var(--ink); }
.mega-ic {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--mint); color: var(--mint-ink);
}
.mega-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-txt b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.mega-txt i { font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 12px 4px; border-top: 1px solid var(--line);
}
.mega-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--brand); }
.mega-note { font-size: 12.5px; color: var(--ink-3); }

/* ---------- Header: mobile drawer ---------- */
.nav-right { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-burger {
  display: none; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.nav-scrim {
  /* Above the chat launcher (400), which otherwise floats over the drawer */
  position: fixed; inset: 0; z-index: 900;
  background: rgba(7,35,26,.42); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: min(400px, 92vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.16,1,.3,1);
  visibility: hidden;
}
body.nav-open .nav-drawer { transform: none; visibility: visible; }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
/* The logo sizing lives under .nav-public, so the drawer copy needs its own
   or the mark renders at its natural 512px and swallows the panel. */
.nav-drawer .nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--ink);
}
.nav-drawer .nav-logo img { width: 30px; height: auto; flex: none; }
.nav-drawer-x {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.nav-drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 18px; -webkit-overflow-scrolling: touch; }
.nav-drawer-group > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 13px 34px 13px 12px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.nav-drawer-group > summary::-webkit-details-marker { display: none; }
.nav-drawer-group > summary::after {
  content: ""; position: absolute; right: 16px; top: 18px;
  width: 8px; height: 8px;
  border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s ease;
}
.nav-drawer-group[open] > summary::after { transform: rotate(-135deg); }
/* An author `display` on a direct child of <details> overrides the UA rule
   that hides closed content, so the accordion never actually collapsed.
   The display value is only set while it is open. */
.nav-drawer-grid { flex-direction: column; gap: 2px; padding: 4px 0 10px; }
.nav-drawer-group[open] > .nav-drawer-grid { display: flex; animation: nav-acc .2s ease both; }
@keyframes nav-acc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-group[open] > .nav-drawer-grid { animation: none; }
  .nav-drawer { transition: none; }
  .nav-scrim { transition: none; }
}
.nav-drawer-grid .mega-all { padding: 10px 12px; }
.nav-drawer-link {
  display: block; padding: 13px 12px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.nav-drawer-link:hover, .nav-drawer-link.is-active { background: var(--surface-2); color: var(--ink); }
.nav-drawer-foot { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 20px; border-top: 1px solid var(--line); }
.nav-links a.is-active { color: var(--ink); font-weight: 600; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- The one mobile-nav breakpoint ----------
   768px and below: links collapse into the burger. Above it nothing in
   this block applies, so the desktop bar is untouched. */
@media (max-width: 768px) {
  .nav-public .nav-links { display: none; }
  .nav-burger { display: grid; }
  /* Log in lives in the drawer footer on mobile; the primary CTA stays out
     here because it still fits at 360px and it is the reason for the page. */
  .nav-login { display: none; }
  .nav-public { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .nav-public .nav-logo { font-size: 19px; }
}
@media (max-width: 400px) {
  .nav-cta { padding: 8px 12px; font-size: 13px; }
  .nav-public .nav-logo { font-size: 18px; }
  .nav-public .nav-logo img { width: 26px; }
}

/* ---------- Footer columns ---------- */
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.foot-h { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #fff; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { font-size: 13.5px; line-height: 1.95; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Feature page hero ---------- */
.feat-hero { padding-bottom: clamp(30px, 4.2vw, 62px); }
.feat-hero-inner { grid-template-columns: 1.04fr .96fr; min-height: 400px; align-items: center; }
.feat-hero-inner .hero-copy > p { max-width: 520px; }

.feat-figure { margin: 0; position: relative; justify-self: end; width: min(100%, 430px); }
/* The renders carry their own dark ground, so the tile is full bleed rather
   than an image floating inside a padded frame with two competing edges. */
.feat-art {
  position: relative; overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  display: grid; place-items: center;
  min-height: 260px;
}
.feat-art:has(.feat-art-fallback) { padding: 40px; }
.feat-art img { display: block; width: 100%; height: auto; }
.feat-art-fallback { color: var(--neon); opacity: .8; }
.feat-cap {
  position: relative; z-index: 3;
  margin: -26px 0 0 -18px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 17px; border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  max-width: 330px;
}
.fc-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.fc-line { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); }
.fc-tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px; padding: 4px 10px; border-radius: 999px;
  /* mint-ink on mint is 4.31:1, just under AA at this size */
  background: var(--mint); color: var(--brand-deep); font-size: 11.5px; font-weight: 700;
}

@media (max-width: 900px) {
  .feat-hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .feat-figure { justify-self: center; margin-top: 26px; width: min(100%, 400px); }
  .feat-cap { margin-left: 0; align-self: center; }
}

/* ---------- Widgets: customize panel ---------- */
.wgt-cust summary {
  cursor: pointer; font: 600 13.5px/1 var(--font-body); color: var(--brand-deep);
  padding: 4px 0; user-select: none;
}
.wgt-cust[open] summary { margin-bottom: 4px; }
.wgt-cust-grid { display: grid; grid-template-columns: 1fr 380px; gap: 26px; align-items: start; }
.wgt-cust-form .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.wgt-cust-form .field > span { font: 600 12.5px/1 var(--font-body); color: var(--ink-2); }
.wgt-cust-row { display: flex; gap: 14px; flex-wrap: wrap; }
.wgt-cust-row .field { flex: 1; min-width: 130px; }
.wgt-cust-form input[type="color"] {
  width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); cursor: pointer;
}
.wgt-preview { padding: 18px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); }
@media (max-width: 900px) { .wgt-cust-grid { grid-template-columns: 1fr; } }

/* ---------- Feature page: explainer video ---------- */
.feat-video { max-width: 960px; margin: 0 auto; }
.feat-video video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card); border: 1px solid var(--line);
  background: var(--dark);
  box-shadow: 0 24px 60px rgba(14, 31, 23, .16);
}

/* ---------- Feature page: benefits, steps, cross links ---------- */
.feat-benefit { display: flex; flex-direction: column; }
.feat-benefit h3 { font-size: 17.5px; margin-bottom: 8px; }
.feat-benefit p { font-size: 14.5px; line-height: 1.65; margin: 0; }
.feat-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--mint); color: var(--mint-ink); margin-bottom: 14px;
}

.feat-how { overflow: hidden; }
.feat-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.feat-step {
  padding: 24px 22px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.feat-step .step-num { background: var(--neon); color: var(--dark); }
.feat-step h3 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.feat-step p { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.65; margin: 0; }
@media (max-width: 900px) { .feat-steps { grid-template-columns: 1fr; gap: 14px; } }

.feat-cross-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.feat-cross-head h2 { margin: 0; }
.feat-cross { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feat-cross-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px 46px;
  border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat-cross-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgba(31,168,92,.4); color: var(--ink); }
.feat-cross-card b { font-family: var(--font-display); font-size: 16px; }
.feat-cross-card > span:not(.feat-ic) { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.feat-cross-card i { position: absolute; left: 20px; bottom: 18px; color: var(--brand); }
@media (max-width: 980px) { .feat-cross { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-cross { grid-template-columns: 1fr; } }

/* ---------- /features index ---------- */
.feat-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat-index-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat-index-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(31,168,92,.4); color: var(--ink); }
/* Absolute rather than a grid child: a percentage height inside an
   aspect-ratio box has nothing definite to resolve against, so the image
   fell back to its own square and overflowed the tile. */
.fi-art {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 100%);
}
.fi-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fi-art .feat-art-fallback { color: var(--neon); }
.fi-body { padding: 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fi-body h3 { margin: 0; font-size: 18px; }
.fi-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.fi-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; font-size: 13.5px; color: var(--brand); }
@media (max-width: 980px) { .feat-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feat-index { grid-template-columns: 1fr; } }

/* ---------- Public SEO client directory (/seo-clients) ---------- */
.dir-cat { margin-bottom: 34px; }
.dir-cat-h {
  display: flex; align-items: baseline; gap: 12px; font-size: 19px; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.dir-cat-h span { font: 600 12.5px/1 var(--font-body); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dir-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dir-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14,31,23,.10); color: var(--ink); }
.dir-card > b { font-family: var(--font-display); font-size: 16.5px; line-height: 1.3; }
.dir-card-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.dir-card-stats i { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dir-card-stats em { font-style: normal; font-weight: 600; color: var(--brand-deep); background: var(--mint, #DCEFE3); padding: 3px 9px; border-radius: 999px; font-size: 12px; }
.dir-card-go { display: flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-body); color: var(--brand); margin-top: 2px; }

.dir-stats .card { text-align: center; padding: 20px 16px; }
.dir-stats .card b { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dir-stats .card span { font-size: 13px; color: var(--ink-2); }

.dir-table-card { padding: 22px; }
.dir-table-wrap { overflow-x: auto; }
.dir-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dir-table th {
  text-align: left; font: 700 11.5px/1 var(--font-body); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.dir-table td { padding: 12px; border-bottom: 1px solid var(--surface-2); vertical-align: middle; }
.dir-table tbody tr:last-child td { border-bottom: 0; }
.dir-table tbody tr:hover { background: var(--surface-2); }
.dir-table td.n, .dir-table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dir-biz a { display: block; color: var(--ink); }
.dir-biz a:hover b { color: var(--brand); }
.dir-biz b { display: block; font-family: var(--font-display); font-size: 15.5px; }
.dir-biz .meta { display: block; font-size: 12.5px; }
.dir-score { width: 56px; }
.dir-sig {
  display: inline-block; font: 600 11.5px/1 var(--font-body); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); padding: 5px 10px; border-radius: 999px; margin: 2px 4px 2px 0;
}
.dir-sig.ads { color: #8A4B00; background: #FBEED7; border-color: #F2DDB4; }
.dir-sig.win { color: var(--brand-deep); background: #DCEFE3; border-color: #BFE3CD; }
.dir-mail {
  font: 600 13px/1 ui-monospace, Menlo, monospace; color: var(--ink-2);
  background: var(--surface-2); border: 1px dashed var(--line); padding: 6px 11px; border-radius: 8px;
  letter-spacing: .02em; user-select: none;
}
.dir-pos { font-weight: 700; }
.dir-pos.ok { color: var(--brand-deep); }
.dir-pos.mid { color: #8A4B00; }
.dir-pos.bad { color: #B4234B; }

.dir-hero-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.dir-hero-score .score-ring { color: #fff; }
.dir-hero-label { font: 600 12.5px/1 var(--font-body); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }
.dir-hero-domain { font: 600 14px/1 var(--font-body); color: var(--neon); word-break: break-all; text-align: center; }

.dir-contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; padding: 30px; }
.dir-contact-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dir-mini { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dir-mini b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.dir-mini span { font-size: 12px; color: var(--ink-2); }
.dir-mail-big {
  font: 700 20px/1 ui-monospace, Menlo, monospace; color: var(--ink);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 16px; user-select: none; word-break: break-all;
}

.dir-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dir-plan {
  position: relative; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-card); padding: 22px 20px; display: flex; flex-direction: column; gap: 4px;
}
.dir-plan.hl { border-color: var(--brand); box-shadow: 0 14px 36px rgba(31,168,92,.16); }
.dir-plan-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font: 700 11.5px/1 var(--font-body);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.dir-plan > b { font-family: var(--font-display); font-size: 15px; }
.dir-plan-price { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.dir-plan-price i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.dir-plan-credits { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.dir-plan-leads { font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 760px) {
  .dir-contact { grid-template-columns: 1fr; }
  .dir-table td, .dir-table th { padding: 10px 8px; }
}

/* Directory hero: illustration behind the capability pills */
.dir-hero-side { position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 320px; }
/* The illustration bleeds off the right edge and fades on its left, so the
   capability pills read over it instead of fighting it. */
.dir-art {
  position: absolute; top: 50%; right: -10%; margin: 0; pointer-events: none;
  transform: translateY(-50%); width: min(84%, 520px);
}
.dir-art img {
  width: 100%; height: auto; opacity: .92;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.5));
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
  animation: dir-art-float 14s ease-in-out infinite alternate;
}
@keyframes dir-art-float { from { transform: translateY(-6px) scale(1); } to { transform: translateY(6px) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .dir-art img { animation: none; } }
.dir-hero-side .hero-pills { position: relative; z-index: 2; }
@media (max-width: 980px) {
  .dir-hero-side { min-height: 0; flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .dir-art { position: relative; top: auto; right: auto; transform: none; width: min(62%, 280px); }
  .dir-art img { mask-image: none; -webkit-mask-image: none; animation: none; }
}

/* Pattern (not yet verified) address chips */
.dir-mail.guess { color: var(--ink-3); border-style: dotted; opacity: .85; }
.dir-mail-big.guess { color: var(--ink-2); }
.dir-mail-big.guess span {
  display: block; margin-top: 8px; font: 600 11.5px/1 var(--font-body); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---------- Row actions menu (the three dots on document rows) ---------- */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 6px 12px; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50;
  min-width: 190px; background: var(--surface); border-radius: 12px;
  box-shadow: var(--shadow-pop); border: 1px solid var(--line);
  padding: 6px; display: flex; flex-direction: column;
}
.row-menu-list a {
  padding: 9px 12px; border-radius: 8px; color: var(--ink);
  font-size: 13.5px; font-weight: 500;
}
.row-menu-list a:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- List pagination ---------- */
.list-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 16px 0 4px; }
.list-pager .btn-sm { min-width: 36px; justify-content: center; }
.list-pager span[aria-current] { pointer-events: none; }

/* Quick proposal wizard steps: the browser's fieldset chrome, replaced. */
.qp-step { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 6px; margin: 0 0 4px; }
.qp-step h4 { color: var(--ink-2); margin-bottom: 12px; }

/* ---------- Call view ---------- */
.cc-head-id { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px; }
.cc-head-ic {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  background: var(--mint); color: var(--mint-ink); display: grid; place-items: center;
}
.cc-head-id > div { flex: 1; min-width: 0; }
.cc-head-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.cc-head-meta span { font-size: 13px; }
.cc-head-meta i { font-style: normal; color: var(--ink-3); margin-right: 5px; }
.cc-head-meta b { font-weight: 600; color: var(--ink-2); }
.cc-dial-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cc-pulse { margin-top: 14px; position: relative; padding-left: 34px; }
.cc-pulse::before {
  content: ""; position: absolute; left: 14px; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
  animation: ccpulse 1.4s ease infinite;
}
@keyframes ccpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.cc-brief-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--surface-2); font-size: 14px; }
.cc-brief-row span { flex: none; width: 90px; color: var(--ink-3); }
.cc-brief-row b { font-weight: 600; }
.cc-brief-p { font-size: 14px; color: var(--ink-2); margin: 8px 0 4px; font-weight: 600; }
.cc-brief-list { margin: 6px 0 10px; padding-left: 20px; }
.cc-brief-list li { font-size: 14px; color: var(--ink-2); margin-bottom: 5px; }
.cc-thread { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 2px; }
.cc-turn { max-width: 88%; }
.cc-turn i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin: 0 4px 2px; }
.cc-turn span { display: inline-block; padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.cc-turn.agent { align-self: flex-end; text-align: right; }
.cc-turn.agent span { background: var(--mint); color: var(--ink); border-bottom-right-radius: 4px; text-align: left; }
.cc-turn.cust { align-self: flex-start; }
.cc-turn.cust span { background: var(--surface-2); border-bottom-left-radius: 4px; }

/* ---------- Free audit landing ---------- */
.tfa-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; }
.tfa-form { padding: 24px 26px; }
.tfa-recent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.tfa-recent-item {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px;
}
.tfa-recent-item b { font-weight: 600; }
.tfa-recent-item i {
  font-style: normal; font-weight: 700; color: var(--mint-ink);
  background: var(--mint); border-radius: 999px; padding: 1px 7px; font-size: 11.5px;
}
.tfa-recent-item em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.tfa-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.tfa-paid { background: var(--dark); color: rgba(255,255,255,.85); }
.tfa-paid h3 { color: #fff; }
.tfa-list { list-style: none; margin: 0; padding: 0; }
.tfa-list li { position: relative; padding: 7px 0 7px 26px; font-size: 14.5px; line-height: 1.5; }
.tfa-list li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--mint);
}
.tfa-list li::after {
  content: ""; position: absolute; left: 4px; top: 16px; width: 7px; height: 4px;
  border-left: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink);
  transform: rotate(-45deg);
}
.tfa-paid .tfa-list li::before { background: rgba(53,226,122,.18); }
.tfa-paid .tfa-list li::after { border-color: var(--neon); }
@media (max-width: 900px) {
  .tfa-hero, .tfa-compare { grid-template-columns: 1fr; }
  .tfa-hero { gap: 22px; }
}

/* Markdown inside chat bubbles */
.cc-thread p, .pc-docchat-thread p, #dc-thread p { margin: 0 0 8px; }
.pc-docchat-thread p:last-child, #dc-thread p:last-child { margin-bottom: 0; }
.pc-docchat-thread ul, #dc-thread ul { margin: 4px 0 8px; padding-left: 18px; }
.pc-docchat-thread code, #dc-thread code { background: rgba(14,31,23,.07); border-radius: 5px; padding: 1px 5px; font-size: .92em; }
.pc-docchat-thread .md-h, #dc-thread .md-h { display: block; margin: 4px 0 2px; }

/* ---------- Free audit landing v2: long format ---------- */
/* One vertical rhythm, not stacked defaults: the section wrapper already
   pads the top, so the hero only spaces its own children. */
.tfa2-hero { text-align: center; padding: clamp(8px, 2vw, 28px) 0 clamp(28px, 4vw, 54px); }
.tfa2-hero .badge-line { margin-bottom: 18px; }
.tfa2-hero h1 { max-width: 21ch; margin: 0 auto 14px; }
.tfa2-sub { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; max-width: 54ch; margin: 0 auto 30px; }
.tfa2-hero .tfa-recent { margin-top: 26px; }
.tfa2-hero .meta { margin-top: 12px; }
.tfa-inline { display: flex; gap: 10px; max-width: 640px; margin: 0 auto; }
.tfa-inline .input { flex: 1; min-width: 0; padding: 13px 16px; }
.tfa-inline .btn { flex: none; white-space: nowrap; }
.tfa-meta-dark { color: rgba(255,255,255,.55); }
.tfa-inline-dark .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.tfa-inline-dark .input::placeholder { color: rgba(255,255,255,.45); }
.tfa2-section { padding: clamp(28px, 5vw, 60px) 0; }
/* The twelve checks borrow the homepage step rows. The drawings ship at
   360px, so the figure never scales past the source. */
.tfa2-how .step-art { max-width: 360px; }
.tfa2-how .tick-list li b { color: var(--ink); }
.tfa2-sample { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: center; }
.tfa2-sample iframe { width: 100%; height: 460px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.tfa2-band { background: var(--dark); border-radius: 20px; position: relative; overflow: hidden; margin: 20px 0 10px; }
.tfa2-band-in { position: relative; z-index: 2; text-align: center; padding: clamp(36px, 6vw, 64px) 24px; }
.tfa2-band h2 { color: #fff; }
.tfa2-band p { color: rgba(255,255,255,.72); max-width: 46ch; margin: 0 auto 22px; }
@media (max-width: 1000px) { .tfa2-sample { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tfa-inline { flex-direction: column; }
  .tfa2-br { display: none; }
}

/* ---------- Free audit report charts ---------- */
.tfa-report-head { display: flex; gap: 22px; align-items: stretch; margin-bottom: 22px; }
.tfa-gauge-card { flex: none; display: grid; place-items: center; position: relative; padding: 26px 34px; }
.tfa-gauge-num { position: absolute; text-align: center; line-height: 1; }
.tfa-gauge-num b { display: block; font: 800 34px var(--font-display); letter-spacing: -.02em; }
.tfa-gauge-num span { font-size: 12px; color: var(--ink-3); }
.tfa-gauge-num i { display: block; font-style: normal; margin-top: 5px; font-weight: 800; font-size: 13px; color: var(--mint-ink); background: var(--mint); border-radius: 999px; padding: 2px 9px; }
.tfa-scorebar { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.tfa-scorebar span { flex: none; width: 240px; font-size: 13.5px; color: var(--ink-2); }
.tfa-scorebar-track { flex: 1; height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tfa-scorebar-track i { display: block; height: 100%; border-radius: 999px; }
.tfa-scorebar b { flex: none; width: 30px; text-align: right; font-size: 13.5px; }
@media (max-width: 760px) {
  .tfa-report-head { flex-direction: column; }
  .tfa-scorebar span { width: 130px; }
}