/* ==========================================================================
   Listly — site.css
   Dark by default, light on toggle. Everything "3D" is done with layered
   shadows + small transforms so it stays crisp and cheap on the GPU.
   ========================================================================== */

/* ---------- Font (self-hosted, no third-party request) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* dark (default) */
  --bg: #0B1017;
  --bg-2: #0E1520;
  --surface: #131C2B;
  --surface-2: #1A2537;
  --surface-3: #22304A;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #E8EEF7;
  --text-2: #B3BDCE;
  --muted: #7F8DA5;

  --accent: #0089FF;
  --accent-hi: #3DA3FF;
  --accent-lo: #1A53EB;
  --accent-edge: #1240B8;
  --accent-ink: #FFFFFF;
  --cyan: #91E7FF;

  --good: #34D399;
  --same: #FBBF24;
  --worse: #F87171;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 0 rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --glow: rgba(0, 137, 255, 0.26);
  --grid-ink: rgba(255, 255, 255, 0.05);
  --grid-major: rgba(0, 137, 255, 0.18);

  --header-h: 69px;
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1140px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #F3F6FB;
  --bg-2: #EAF0F8;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-3: #EEF3FA;
  --line: rgba(15, 23, 42, 0.08);
  --line-2: rgba(15, 23, 42, 0.14);
  --text: #0F172A;
  --text-2: #3B4A61;
  --muted: #57657C;

  --accent: #0069CC;
  --accent-hi: #2A93FF;
  --accent-lo: #1A53EB;
  --accent-edge: #1240B8;
  --accent-ink: #FFFFFF;
  --cyan: #0EA5E9;

  --good: #059669;
  --same: #D97706;
  --worse: #DC2626;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px -14px rgba(15, 23, 42, 0.25);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 0 rgba(15, 23, 42, 0.06), 0 22px 44px -20px rgba(15, 23, 42, 0.3);
  --glow: rgba(0, 137, 255, 0.16);
  --grid-ink: rgba(15, 23, 42, 0.06);
  --grid-major: rgba(0, 137, 255, 0.16);
  color-scheme: light;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(0, 137, 255, 0.35); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--accent-lo); color: #fff; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typography ---------- */
h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; overflow-wrap: break-word; }
/* narrow-phone headline floor */
@media (max-width: 400px) { h1 { font-size: clamp(1.9rem, 9.5vw, 2.35rem); } }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.028em; font-weight: 760; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text-2); line-height: 1.55; max-width: 60ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.grad { background: linear-gradient(92deg, var(--accent-hi), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 3D buttons ---------- */
.btn {
  --edge: var(--accent-edge);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 14px;
  font-weight: 650; font-size: 1rem; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, var(--accent-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 6px 0 var(--edge),
    0 16px 30px -10px rgba(0, 137, 255, 0.55);
  transform: translateY(0);
  transition: transform 140ms cubic-bezier(.2,.7,.2,1), box-shadow 140ms cubic-bezier(.2,.7,.2,1), filter 200ms;
  will-change: transform;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.18), 0 8px 0 var(--edge), 0 22px 36px -10px rgba(0,137,255,.6); }
.btn:active, .btn.is-pressed { transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 0 var(--edge), 0 6px 12px -6px rgba(0,137,255,.5); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; border-radius: 16px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18), 0 4px 0 var(--edge), 0 12px 22px -10px rgba(0,137,255,.5); }
.btn-sm:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.18), 0 6px 0 var(--edge), 0 16px 26px -10px rgba(0,137,255,.55); }
.btn-sm:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 0 var(--edge), 0 4px 8px -4px rgba(0,137,255,.5); transform: translateY(3px); }

.btn-ghost {
  --edge: rgba(0, 0, 0, 0.55);
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 0 var(--edge), 0 16px 30px -14px rgba(0, 0, 0, 0.7);
}
.btn-ghost:hover { filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 7px 0 var(--edge), 0 20px 34px -14px rgba(0,0,0,.7); }
.btn-ghost:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 var(--edge), 0 6px 12px -8px rgba(0,0,0,.6); }
:root[data-theme="light"] .btn-ghost { --edge: rgba(15, 23, 42, 0.18); box-shadow: inset 0 1px 0 #fff, 0 5px 0 var(--edge), 0 16px 30px -14px rgba(15,23,42,.25); }
:root[data-theme="light"] .btn-ghost:hover { box-shadow: inset 0 1px 0 #fff, 0 7px 0 var(--edge), 0 20px 34px -14px rgba(15,23,42,.28); }
:root[data-theme="light"] .btn-ghost:active { box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--edge), 0 6px 12px -8px rgba(15,23,42,.2); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; pointer-events: none; }

/* Icon buttons (theme toggle, menu) */
.icon-btn {
  --edge: rgba(0, 0, 0, 0.5);
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--text); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 var(--edge), 0 10px 18px -10px rgba(0,0,0,.7);
  transition: transform 140ms, box-shadow 140ms;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 var(--edge), 0 4px 8px -6px rgba(0,0,0,.6); }
.icon-btn svg { width: 20px; height: 20px; }
:root[data-theme="light"] .icon-btn { --edge: rgba(15,23,42,.16); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--edge), 0 10px 18px -10px rgba(15,23,42,.25); }
:root[data-theme="light"] .icon-btn:active { box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--edge), 0 4px 8px -6px rgba(15,23,42,.2); }
.icon-btn .sun { display: none; }
:root[data-theme="light"] .icon-btn .sun { display: block; }
:root[data-theme="light"] .icon-btn .moon { display: none; }

/* ---------- Cards (3D, tilt-able) ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms;
}
.card.tilt { will-change: transform; }
.card .glare {
  pointer-events: none; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.10), transparent 60%);
  transition: opacity 260ms;
}
.card.is-tilting .glare { opacity: 1; }
.card-pad { padding: clamp(20px, 3vw, 28px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 18px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.32rem; letter-spacing: -0.03em; }
.brand-mark { width: 38px; height: 30px; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 137, 255, 0.4)); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nav a {
  position: relative; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; color: var(--text-2);
  transition: color 160ms, background-color 160ms;
}
.nav a:hover { color: var(--text); background: var(--line); }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform 220ms;
}
.nav a.is-active { color: var(--text); }
.nav a.is-active::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-account { font-weight: 600; font-size: 0.95rem; color: var(--text-2); padding: 8px 10px; border-radius: 10px; }
.nav-account:hover { color: var(--text); background: var(--line); }
.text-link { color: var(--accent); font-weight: 600; }
.center { text-align: center; }
.mt-22 { margin-top: 22px; }
.mt-12 { margin-top: 12px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); }
.menu-btn { display: none; }
.mobile-nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.7);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: 8px var(--gutter) 16px; display: grid; gap: 2px; }
.mobile-nav a:not(.btn) { display: block; padding: 12px 10px; border-radius: 10px; font-weight: 600; color: var(--text-2); }
.mobile-nav a:not(.btn):hover, .mobile-nav a.is-active:not(.btn) { color: var(--text); background: var(--line); }
.mobile-nav .mobile-cta { margin-top: 8px; }
.mobile-nav .mobile-cta .btn { width: 100%; }

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .nav-account { display: none; }
  .header-cta { min-height: 40px; padding: 0 14px; font-size: 0.875rem; }
}
@media (max-width: 340px) { .header-cta { display: none; } }

/* ---------- Backdrop grid (streets): full page, strongest at the top, fading to nothing at the bottom ---------- */
body { position: relative; }
body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid-major) 2px, transparent 2px);
  background-size: 48px 48px, 48px 48px, 240px 240px, 240px 240px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 640px, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.18) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 640px, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.18) 80%, transparent 100%);
}
main, .site-footer { position: relative; z-index: 1; }
.backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop::after {
  content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; right: -15vw; top: -20vw;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  filter: blur(20px);
}

/* ---------- Sections ---------- */
section { position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-alt { background: color-mix(in srgb, var(--bg-2) 72%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 72px); overflow: clip; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy h1 { max-width: 12ch; }
.hero-copy h1 .grad { white-space: nowrap; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.hero-proof li { white-space: nowrap; }
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--good); }

/* Hero mockup */
.stage { position: relative; perspective: 1400px; min-height: 520px; display: grid; justify-items: end; align-items: center; padding: 24px 0 8px; }
.panel {
  --w: 372px;
  position: relative; width: var(--w); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #151F30, #0F1826);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 60px -20px rgba(0, 137, 255, 0.35);
  transform: rotateY(-14deg) rotateX(7deg) rotateZ(1deg);
  transform-style: preserve-3d;
  color: #E8EEF7;
  font-size: 13px;
  line-height: 1.35;
}
:root[data-theme="light"] .panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 80px -30px rgba(15,23,42,.6), 0 0 0 1px rgba(15,23,42,.2), 0 30px 60px -20px rgba(0,137,255,.35); }
.panel-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.panel-top .brand { font-size: 1rem; gap: 7px; }
.panel-top .brand-mark { width: 24px; height: 19px; filter: none; }
.panel-top .status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #B3BDCE; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); animation: pulse 2.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

.panel-search { padding: 12px 14px 4px; }
.field {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px;
  background: #0B1017; border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
  color: #B3BDCE; font-size: 12.5px;
}
.field svg { width: 15px; height: 15px; color: #7F8DA5; }
.field .caret { width: 1px; height: 14px; background: var(--accent); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.price-bar {
  position: relative; margin: 10px 14px 6px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #1B2A44, #142238); border: 1px solid rgba(0,137,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px -12px rgba(0,137,255,.6);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px;
}
.price-bar .label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8FA3C7; font-weight: 700; }
.price-bar .value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: #fff; }
.price-bar .meta { font-size: 11px; color: #9AB0D4; text-align: right; }
.price-bar .tick { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: rgba(52,211,153,.14); color: var(--good); font-weight: 700; font-size: 11px; }

.comps { padding: 4px 14px 12px; display: grid; gap: 8px; }
.comp {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center;
  padding: 10px 11px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  opacity: 0; transform: translateY(8px);
  animation: rise 520ms cubic-bezier(.2,.7,.2,1) forwards;
}
.comp:nth-child(1) { animation-delay: .35s; } .comp:nth-child(2) { animation-delay: .55s; } .comp:nth-child(3) { animation-delay: .75s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.comp .t { font-weight: 700; font-size: 12.5px; color: #E8EEF7; }
.comp .s { font-size: 11px; color: #8FA3C7; }
.comp .p { font-weight: 800; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 9px; background: #0B1017; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.seg span { text-align: center; font-size: 11px; font-weight: 700; padding: 5px 0; border-radius: 7px; color: #7F8DA5; }
.seg .on { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 rgba(0,0,0,.5); transform: translateY(-1px); }
.seg .on.same { background: linear-gradient(180deg, #F5C451, #D89A12); color: #1a1200; }
.seg .on.better { background: linear-gradient(180deg, #4ADE9F, #1FA86F); color: #04160d; }
.seg .on.worse { background: linear-gradient(180deg, #FB8B8B, #D64545); }

.mini-map { margin: 0 14px 14px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #0B1017; }
.mini-map svg { width: 100%; height: auto; }
.mini-map .cap { display: flex; justify-content: space-between; padding: 7px 10px; font-size: 11px; color: #8FA3C7; border-top: 1px solid rgba(255,255,255,.06); }

.chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 5px 0 rgba(0,0,0,.45), 0 24px 40px -18px rgba(0,0,0,.8);
  font-weight: 700; font-size: 0.875rem; color: var(--text);
  animation: float 6s ease-in-out infinite;
}
:root[data-theme="light"] .chip { box-shadow: inset 0 1px 0 #fff, 0 5px 0 rgba(15,23,42,.16), 0 24px 40px -18px rgba(15,23,42,.35); }
.chip svg { width: 18px; height: 18px; color: var(--accent); }
.chip b { font-size: 1.05rem; letter-spacing: -0.02em; }
.chip-1 { left: 0; top: 14%; animation-delay: -1s; }
.chip-2 { right: -10px; top: -34px; animation-delay: -3s; }
.chip-3 { left: 0; bottom: 20%; animation-delay: -5s; }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.stage-caption { justify-self: end; margin-top: 22px; width: min(var(--w, 372px), 100%); text-align: center; font-size: 0.75rem; color: var(--muted); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stage { min-height: 0; padding: 36px 0 0; justify-items: center; }
  .stage-caption { justify-self: center; }
  .panel { transform: rotateY(-8deg) rotateX(5deg); }
  .chip-1 { left: 0; top: 4%; } .chip-2 { right: 0; top: 30%; } .chip-3 { left: 0; bottom: 12%; }
}
@media (max-width: 640px) {
  .chip { display: none; }
}
@media (max-width: 430px) {
  .panel { --w: min(372px, 100%); transform: none; }
  .stage { padding: 8px 0 0; }
  .hero-cta .btn { width: 100%; }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step h3, .step p { overflow-wrap: anywhere; min-width: 0; }
.step { padding: 24px; display: grid; gap: 12px; align-content: start; }
.step .num {
  font-size: 3.2rem; line-height: 1; font-weight: 900; letter-spacing: -0.04em; color: var(--accent);
  text-shadow: 0 1px 0 var(--accent-lo), 0 2px 0 var(--accent-lo), 0 3px 0 var(--accent-edge), 0 4px 0 var(--accent-edge), 0 5px 0 #0F3596, 0 12px 20px rgba(0,0,0,.45);
}
.step p { color: var(--text-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-4 .step { padding: 20px; }
.steps-4 .step .num { font-size: 2.2rem; }
@media (max-width: 1080px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps-4 { grid-template-columns: 1fr; } }

/* ---------- Feature grid ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* icon / title / kicker / body / link - five children, five rows. The 1fr belongs on
   the BODY so spare height collects under the text and above the link. It used to sit
   on the kicker, which opened a gap above the body on whichever card had least to say. */
.feature { padding: 24px; display: grid; gap: 12px; grid-template-rows: auto auto auto 1fr auto; }
.feature > .text-link { align-self: end; }
.feature .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 var(--accent-edge), 0 12px 20px -10px rgba(0,137,255,.7);
}
.feature .ico svg { width: 22px; height: 22px; }
.feature p { color: var(--text-2); }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

/* ---------- Rules ---------- */
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.rules-panel { padding: 8px; }
.rules-panel ul { display: grid; gap: 6px; }
.rule {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.rule .k { font-weight: 650; }
.rule .d { font-size: 0.8rem; color: var(--muted); }
.rule .v {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.875rem; padding: 6px 10px; border-radius: 9px;
  background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 rgba(0,0,0,.35);
}
:root[data-theme="light"] .rule .v { box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(15,23,42,.12); }
.toggle { width: 42px; height: 24px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 21px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.toggle.off { background: var(--surface-3); }
.toggle.off::after { left: 3px; }
.rules-note { margin-top: 12px; font-size: 0.8rem; color: var(--muted); text-align: center; }
.check-list { display: grid; gap: 14px; }
.check-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--text-2); }
.check-list li b { color: var(--text); }
.check-list svg { width: 22px; height: 22px; color: var(--good); margin-top: 2px; }
@media (max-width: 900px) { .rules-grid { grid-template-columns: 1fr; } }

/* ---------- Comparison ---------- */
.compare { display: grid; gap: 10px; overflow-anchor: none; }
.compare-head { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; padding: 0 18px; font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.compare-head span:nth-child(3) { color: var(--accent); }
.crow { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; align-items: stretch; padding: 12px; }
.crow .what { display: grid; gap: 4px; padding: 10px 6px; align-content: center; }
.crow .what b { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.crow .what button { justify-self: start; color: var(--accent); font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px 4px 0; }
.crow .what button svg { width: 14px; height: 14px; transition: transform 200ms; }
.crow .what button[aria-expanded="true"] svg { transform: rotate(45deg); }
.cell { display: flex; gap: 10px; padding: 14px 14px; border-radius: 12px; border: 1px solid var(--line); align-items: flex-start; color: var(--text-2); }
.cell svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.cell.old { background: color-mix(in srgb, var(--worse) 8%, var(--surface)); border-color: color-mix(in srgb, var(--worse) 25%, var(--line)); }
.cell.old svg { color: var(--worse); }
.cell.new { background: color-mix(in srgb, var(--good) 9%, var(--surface)); border-color: color-mix(in srgb, var(--good) 28%, var(--line)); color: var(--text); font-weight: 600; }
.cell.new svg { color: var(--good); }
.why { grid-column: 1 / -1; overflow: hidden; }
.why[hidden] { display: none; }
.why p { padding: 4px 8px 8px; color: var(--muted); font-size: 0.875rem; max-width: 80ch; }
@media (max-width: 760px) {
  .compare-head { display: none; }
  .crow { grid-template-columns: 1fr; }
  .cell::before { content: attr(data-label); display: block; font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 2px; min-width: 62px; margin-top: 3px; }
}

/* ---------- Privacy block ---------- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trust .card { padding: 24px; display: grid; gap: 12px; align-content: start; }
.trust ul { display: grid; gap: 8px; color: var(--text-2); }
.trust li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.trust li svg { width: 18px; height: 18px; margin-top: 3px; }
.trust .yes svg { color: var(--good); }
.trust .no svg { color: var(--worse); }
.trust .keep svg { color: var(--accent); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; }
.price-card { padding: clamp(24px, 4vw, 36px); display: grid; gap: 18px; overflow: hidden; }
.price-card .cta-wrap { display: flex; justify-content: center; }
.price-card .fine { text-align: center; }
.price-card::before { content: ""; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; }
.price-card > * { position: relative; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-row .amt { font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 850; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-row .amt-text { font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.03em; }
.price-row .per { color: var(--muted); font-weight: 600; }
.includes { display: grid; gap: 10px; color: var(--text-2); }
.includes li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.includes svg { width: 20px; height: 20px; color: var(--good); margin-top: 2px; }
.fine { font-size: 0.875rem; color: var(--muted); }
.manage-card { padding: clamp(22px, 3vw, 30px); display: grid; gap: 14px; }
.manage-card form { display: grid; gap: 12px; }
.input {
  width: 100%; min-height: 50px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 160ms, box-shadow 160ms;
}
:root[data-theme="light"] .input { box-shadow: inset 0 2px 6px rgba(15,23,42,.06); }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 4px rgba(0,137,255,.2); }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; overflow-anchor: none; }
.faq details { border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow-1); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 26px; align-items: center; gap: 14px;
  padding: 18px 20px; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform 220ms; }
:root[data-theme="light"] .faq summary .plus { box-shadow: 0 2px 0 rgba(15,23,42,.12); }
.faq summary .plus svg { width: 14px; height: 14px; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 20px 20px; color: var(--text-2); }
.faq .answer p + p { margin-top: 10px; }
.faq .answer a { color: var(--accent); font-weight: 600; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; display: grid; gap: 18px; justify-items: center; padding: clamp(36px, 5vw, 56px); overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: auto -20% -60%; height: 80%; background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; }
.cta-band > * { position: relative; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 calc(96px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 0.875rem; text-align: center; }
.footer-grid { display: grid; justify-items: center; gap: 18px; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.footer-links a { color: var(--text-2); display: inline-block; padding: 11px 0; }
.footer-links a:hover { color: var(--text); }
.legal { margin: 18px auto 0; font-size: 0.8rem; line-height: 1.6; max-width: 90ch; text-align: center; }

/* The floating pill is fixed over the content, so the last thing on a page could end
   up permanently behind it. Reserve its height at the end of every page. */
.site-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Floating buttons ---------- */
.fab {
  position: fixed; left: 22px; bottom: calc(34px + env(safe-area-inset-bottom)); z-index: 55;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--text); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 rgba(0,0,0,.5), 0 18px 30px -14px rgba(0,0,0,.8);
  font-weight: 650; font-size: 0.875rem;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 200ms, transform 200ms;
}
:root[data-theme="light"] .fab { box-shadow: inset 0 1px 0 #fff, 0 4px 0 rgba(15,23,42,.16), 0 18px 30px -14px rgba(15,23,42,.35); }
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.5), 0 8px 14px -8px rgba(0,0,0,.7); }
.fab svg { width: 18px; height: 18px; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 54; display: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (max-width: 720px) {
  .sticky-cta { display: block; }
  body.has-sticky-cta { padding-bottom: 84px; }
  .fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* Pages with no sticky CTA reserve no space, so the pill must sit in the footer band
     (same guard .chat already has) and shrink to an icon so it can't reach the text column. */
  body:not(.has-sticky-cta) .fab { bottom: calc(18px + env(safe-area-inset-bottom)); }
  body:not(.has-sticky-cta) .fab[data-mode="back"] { padding: 0; width: 44px; justify-content: center; }
  body:not(.has-sticky-cta) .fab[data-mode="back"] .fab-label { display: none; }
}

/* ---------- Legal pages ---------- */
.doc { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 112px); }
.doc-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 2px; font-size: 0.875rem; }
.toc a { padding: 7px 10px; border-radius: 8px; color: var(--text-2); }
.toc a:hover, .toc a.is-active { color: var(--text); background: var(--line); }
.prose { max-width: 74ch; }
.prose h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 8px; }
.prose .meta { color: var(--muted); margin-bottom: 28px; }
.prose h2 { font-size: 1.4rem; margin: 40px 0 12px; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h3 { margin: 22px 0 8px; }
.prose p { margin: 0 0 14px; color: var(--text-2); }
.prose ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; color: var(--text-2); }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); font-weight: 600; }
.prose strong { color: var(--text); }
.prose .callout { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); margin: 0 0 18px; }
.prose .callout p { margin: 0; }
@media (max-width: 860px) {
  .doc-grid { grid-template-columns: 1fr; }
  /* DOM order puts the TOC first. On one column that buried the <h1> under a wall of bare links. */
  .prose { order: 1; }
  .toc { order: 2; position: static; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px;
         padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .toc a { padding: 11px 12px; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.notfound .big { font-size: clamp(4rem, 14vw, 8rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--accent); text-shadow: 0 2px 0 var(--accent-lo), 0 4px 0 var(--accent-edge), 0 6px 0 #0F3596, 0 20px 30px rgba(0,0,0,.5); }

/* ---------- Reveal on scroll (only when JS is running, so content never hides) ---------- */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); }
html.js .reveal.is-in, html.no-reveal .reveal { opacity: 1; transform: none; }
@media print { html.js .reveal { opacity: 1; transform: none; } .chat, .fab, .sticky-cta { display: none !important; } }
.card.is-tilting { transition: box-shadow 260ms; }

/* ---------- Chat widget ---------- */
.chat { position: fixed; right: 22px; bottom: calc(34px + env(safe-area-inset-bottom)); z-index: 57; }
.chat-launcher {
  --edge: var(--accent-edge);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 5px 0 var(--edge), 0 18px 30px -12px rgba(0,137,255,.7);
  transition: transform 140ms, box-shadow 140ms;
}
.chat-launcher:hover { transform: translateY(-2px); }
.chat-launcher:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 var(--edge), 0 8px 14px -8px rgba(0,137,255,.6); }
.chat-launcher svg { width: 24px; height: 24px; }
.chat-launcher .ico-close { display: none; }
.chat.is-open .chat-launcher .ico-open { display: none; }
.chat.is-open .chat-launcher .ico-close { display: block; }
.chat-panel {
  position: fixed; right: 22px; bottom: calc(102px + env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 130px));
  display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden;
  border-radius: 20px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2), 0 40px 80px -30px rgba(0,0,0,.8);
}
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-head .brand-mark { width: 30px; height: 24px; }
.chat-head b { font-size: 0.95rem; }
.chat-head .small { color: var(--muted); }
.chat-close { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); }
.chat-close:hover { background: var(--line); color: var(--text); }
.chat-close svg { width: 16px; height: 16px; }
.chat-log { overflow: auto; padding: 14px; display: grid; gap: 8px; align-content: start; overscroll-behavior: contain; }
.chat-msg { max-width: 86%; padding: 10px 13px; border-radius: 15px; font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.user { justify-self: end; color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-bottom-right-radius: 5px; }
.chat-msg.bot { justify-self: start; background: var(--surface-3); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--text); }
.chat-msg.typing { color: var(--muted); letter-spacing: .2em; }
.chat-msg.staff { justify-self: start; background: color-mix(in srgb, var(--good) 12%, var(--surface-3)); border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); border-bottom-left-radius: 5px; color: var(--text); }
.chat-msg .who { display: block; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.chat-msg.staff .who { color: var(--good); }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.chat-suggest button { font-size: 0.8rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); }
.chat-suggest button:hover { color: var(--text); border-color: var(--accent); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form .input { min-height: 44px; border-radius: 12px; }
.chat-form .btn { min-height: 44px; padding: 0 16px; border-radius: 12px; }
@media (max-width: 720px) {
  .chat { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .chat-panel { bottom: calc(158px + env(safe-area-inset-bottom)); height: min(520px, calc(100vh - 200px)); }
  body:not(.has-sticky-cta) .chat { bottom: calc(18px + env(safe-area-inset-bottom)); }
  body:not(.has-sticky-cta) .chat-panel { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
.reveal:nth-child(2) { transition-delay: 70ms; } .reveal:nth-child(3) { transition-delay: 140ms; } .reveal:nth-child(4) { transition-delay: 210ms; } .reveal:nth-child(5) { transition-delay: 280ms; } .reveal:nth-child(6) { transition-delay: 350ms; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .comp { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .chip { animation: none; }
}

.cta-section { padding-top: 0; }

/* ---------- Account page ---------- */
.acct { max-width: 860px; }
.acct .section-head { margin-bottom: 26px; }
.acct-form { display: grid; gap: 12px; margin-bottom: 18px; }
.acct-form.is-done { opacity: .92; }
.acct-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.remember { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.875rem; cursor: pointer; }
.remember input { width: 18px; height: 18px; accent-color: var(--accent); }
.acct-error { color: var(--worse); font-weight: 600; }
.acct-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: start; }
.acct-kv { display: grid; gap: 10px; margin-bottom: 18px; }
.acct-kv > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.acct-kv .k { color: var(--muted); font-size: 0.875rem; }
.acct-kv .v { font-weight: 600; word-break: break-word; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--surface-3); border: 1px solid var(--line-2); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.good { color: var(--good); }
.badge.same { color: var(--same); }
.badge.worse { color: var(--worse); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.installs { display: grid; gap: 8px; margin-top: 12px; }
.installs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 760px) { .acct-grid { grid-template-columns: 1fr; } .acct-row { grid-template-columns: 1fr; } .acct-kv > div { grid-template-columns: 1fr; gap: 2px; } }


/* ---------- Sign-up flow ---------- */
.start { position: relative; overflow: clip; }
.start-wrap { position: relative; z-index: 1; max-width: 680px; }
.start .section-head { margin-bottom: 22px; }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; }
.stepper li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.stepper .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: 0 2px 0 rgba(0,0,0,.35); flex: none; }
.stepper .is-current { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.stepper .is-current .n { color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-color: transparent; box-shadow: 0 2px 0 var(--accent-edge); }
.stepper .is-done .n { color: var(--good); }
.stepper .is-done .n::before { content: "✓"; }
.stepper .is-done .n { font-size: 0; }
.stepper .is-done .n::before { font-size: 0.875rem; }
:root[data-theme="light"] .stepper .n { box-shadow: 0 2px 0 rgba(15,23,42,.12); }
.start-card { padding: clamp(22px, 4vw, 34px); overflow-anchor: none; }
.step-panel[hidden] { display: none; }
.step-title { font-size: clamp(1.45rem, 3vw, 1.9rem); letter-spacing: -0.025em; line-height: 1.15; }
.step-sub { margin: 10px 0 22px; }
.back-link { color: var(--muted); font-weight: 600; font-size: 0.875rem; margin-bottom: 10px; padding: 4px 0; }
.back-link:hover { color: var(--text); }
.choices { display: grid; gap: 12px; }
.choice {
  --edge: rgba(0, 0, 0, 0.5);
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 16px; color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 0 var(--edge), 0 16px 30px -14px rgba(0,0,0,.7);
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.choice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 7px 0 var(--edge), 0 20px 34px -14px rgba(0,0,0,.7); }
.choice:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 var(--edge), 0 6px 12px -8px rgba(0,0,0,.6); }
:root[data-theme="light"] .choice { --edge: rgba(15,23,42,.16); box-shadow: inset 0 1px 0 #fff, 0 5px 0 var(--edge), 0 16px 30px -14px rgba(15,23,42,.25); }
:root[data-theme="light"] .choice:hover { box-shadow: inset 0 1px 0 #fff, 0 7px 0 var(--edge), 0 20px 34px -14px rgba(15,23,42,.28); }
:root[data-theme="light"] .choice:active { box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--edge), 0 6px 12px -8px rgba(15,23,42,.2); }
.choice-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 var(--accent-edge); }
.choice-ico svg { width: 22px; height: 22px; }
.choice-text { display: grid; gap: 2px; }
.choice-text b { font-size: 1.05rem; letter-spacing: -0.01em; }
.choice-text span { color: var(--muted); font-size: 0.875rem; }
.choice-arrow { color: var(--accent); font-weight: 700; font-size: 1.2rem; }
.choice-quiet .choice-ico { background: var(--surface-3); color: var(--muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 rgba(0,0,0,.4); }
.fields { display: grid; gap: 14px; }
.field-l { display: grid; gap: 6px; font-weight: 600; font-size: 0.875rem; }
.field-l > span { color: var(--text-2); }
.field-l em { font-style: normal; font-weight: 500; }
.field-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea.input { min-height: 90px; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.check-l { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--text-2); font-size: 0.875rem; line-height: 1.5; cursor: pointer; }
.check-l input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.input.is-invalid { border-color: var(--worse); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 4px color-mix(in srgb, var(--worse) 22%, transparent); }
.check-l input.is-invalid { outline: 2px solid var(--worse); outline-offset: 2px; border-radius: 3px; }
.form-error { margin-top: 12px; color: var(--worse); font-weight: 600; font-size: 0.875rem; }
.step-actions { margin-top: 22px; display: grid; gap: 12px; justify-items: center; }
.step-actions .btn { width: 100%; max-width: 420px; }
.summary { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.summary-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: var(--muted); }
.summary-row b { font-weight: 600; }
.center-row { justify-content: center; margin-top: 26px; }
@media (max-width: 560px) {
  .stepper .l { display: none; }
  .stepper li { justify-content: center; }
  .field-row { grid-template-columns: 1fr; }
  .choice { grid-template-columns: 42px 1fr; }
  .choice-arrow { display: none; }
  .summary-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Admin ---------- */
.admin { padding-block: 28px 80px; }
.admin-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 18px; }
.admin-top h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.admin-top .spacer { flex: 1; }
.seg-ctl { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
:root[data-theme="light"] .seg-ctl { box-shadow: inset 0 2px 5px rgba(15,23,42,.06); }
.seg-ctl button { padding: 7px 12px; border-radius: 8px; font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.seg-ctl button.is-on { color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 var(--accent-edge); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; padding: 9px 14px; border-radius: 10px; font-weight: 650; font-size: 0.95rem; color: var(--text-2); white-space: nowrap; }
.tabs button:hover { color: var(--text); background: var(--line); }
.tabs button.is-on { color: var(--text); }
.tabs button.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -9px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.tab-panel[hidden] { display: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { grid-template-rows: minmax(2.6em, auto) auto 1fr; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-1); display: grid; gap: 4px; }
.tile .k { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.tile .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 0.8rem; color: var(--muted); }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel-grid .wide { grid-column: 1 / -1; }
.tab-panel[data-panel="settings"] .panel-grid { align-items: start; }
#sec-list.sec-collapsed .trow:nth-child(n+9) { display: none; }
#sec-list.sec-open { max-height: 440px; overflow: auto; padding-right: 4px; }
.sec-more { margin-top: 10px; }
.box { padding: 18px; border-radius: 14px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.box h3 { font-size: 0.95rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.box h3 .hint { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th, .tbl td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.is-click { cursor: pointer; }
.tbl tr.is-click:hover td { background: var(--line); }
.tbl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--text-2); }
.tbl-wrap { overflow-x: auto; }
.tbl .nowrap { white-space: nowrap; }
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis-text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .series-1 { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-2 { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 5 4; }
.chart .dot { fill: var(--surface); stroke-width: 2; }
.chart .dot-1 { stroke: var(--accent); }
.chart .dot-2 { stroke: var(--cyan); }
.chart .crosshair { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .label { fill: var(--text-2); font-size: 11px; font-weight: 600; font-family: var(--font); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: absolute; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); font-size: 0.8rem; color: var(--text); transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; display: none; z-index: 2; }
.chart-tip b { display: block; margin-bottom: 2px; }
.chart-tip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.8rem; color: var(--text-2); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--accent); }
.legend span.l2::before { background: var(--cyan); }
.funnel { display: grid; gap: 8px; }
.funnel-row { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 10px; font-size: 0.875rem; }
.funnel-row .bar { height: 14px; border-radius: 4px; background: var(--line); overflow: hidden; }
.funnel-row .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-lo), var(--accent)); }
.funnel-row .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.funnel-row .pct { color: var(--muted); font-size: 0.8rem; margin-left: 6px; font-weight: 500; }
.bars { display: grid; gap: 6px; }
.bars .row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 0.875rem; }
.bars .row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.bars .row .bar { height: 8px; border-radius: 4px; background: var(--line); margin-top: 4px; }
.bars .row .bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.bars .row .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.admin-gate { max-width: 520px; margin: 40px auto; display: grid; gap: 14px; }
.admin-gate .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.transcript { display: grid; gap: 8px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.transcript .chat-msg { max-width: 92%; }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.notice { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--text-2); font-size: 0.875rem; }
.pill-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--surface-3); border: 1px solid var(--line-2); }
.pill-status.good { color: var(--good); } .pill-status.same { color: var(--same); } .pill-status.worse { color: var(--worse); }
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 0.875rem; }
.export-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .panel-grid, .split { grid-template-columns: 1fr; } .funnel-row { grid-template-columns: 110px 1fr 54px; } }


/* ---------- Flip cards (front = the short version, back = the detail) ---------- */
.flip { perspective: 1400px; background: none; border: 0; box-shadow: none; }
.flip-inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform 640ms cubic-bezier(.2,.7,.2,1); border-radius: var(--radius); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.face-back { transform: rotateY(180deg); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.face-back p { color: var(--text-2); font-size: 0.95rem; }
.face-back h3 { color: var(--accent-hi); }
:root[data-theme="light"] .face-back h3 { color: var(--accent); }
/* The face is a flex column and the hint owns `margin-top: auto`, so ALL the spare
   height used to collect in one gap under the text. A second auto margin on the first
   element splits it: half above the text, half above the link. The text block is then
   centred in whatever room it has and "Flip back" stays on the bottom edge, level with
   the card next to it. Full cards are unaffected - both margins collapse to zero.
   Not the numbered steps: that badge belongs in the top corner. */
.face > :first-child:not(.num) { margin-top: auto; }
.flip-hint { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 650; font-size: 0.875rem; }
.flip-hint svg { width: 15px; height: 15px; transition: transform 300ms; }
.flip:hover .flip-hint svg { transform: rotate(180deg); }
.flip-btn { position: absolute; inset: 0; border-radius: var(--radius); cursor: pointer; }
.flip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.flip .face { transition: box-shadow 260ms; }
.flip:hover .face { box-shadow: var(--shadow-2), 0 24px 44px -20px rgba(0, 137, 255, 0.35); }
.flip-inner { min-height: 100%; }
.feature.flip, .step.flip, .trust .flip { padding: 0; display: block; }
.step.flip .num { margin-bottom: 2px; }
.trust .flip .face-front h3 { margin-bottom: 2px; }
.face-back ul, .face-front ul { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }

/* concise rules list */
.check-list.concise li { grid-template-columns: 26px 1fr; }
.check-list.concise li b { display: block; }
.check-list.concise li span span { color: var(--muted); font-size: 0.875rem; }

.acct-grid .acct-wide { grid-column: 1 / -1; }
.keybox { display: grid; gap: 10px; margin: 8px 0 10px; }
.keyval { display: block; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; letter-spacing: .04em; word-break: break-all; }
.setup-steps { counter-reset: st; display: grid; gap: 12px; margin-top: 8px; }
.setup-steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.setup-steps li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 2px 0 var(--accent-edge); margin-top: 1px; }
.setup-steps li b { display: block; }
.setup-steps li span { color: var(--text-2); font-size: 0.875rem; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-grid > div { display: grid; gap: 4px; }
.help-grid b { font-size: 0.95rem; }
.help-grid span { color: var(--text-2); font-size: 0.875rem; }
.acct h3 { margin-bottom: 10px; }
@media (max-width: 760px) { .help-grid { grid-template-columns: 1fr; } }

/* ---------- Admin: content-manager layout (mirrors the 316 admin) ---------- */
.admin-head { text-align: center; margin: 6px 0 18px; display: grid; gap: 4px; justify-items: center; }
.admin-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; }
.linkbtn { font-weight: 600; }
.center-block { display: block; margin: 12px auto 0; }
.tabs { justify-content: center; }
.tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--worse); color: #fff; font-size: 0.7rem; margin-left: 4px; vertical-align: 1px; }
.traffic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 6px 0 14px; text-align: center; }
.traffic-head h2 { font-size: 1.25rem; width: 100%; }
.box.wide { margin-bottom: 14px; }
.box.intro { margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.chips.center { justify-content: center; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-weight: 650; font-size: 0.875rem; }
.chip-btn.is-on { color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-color: transparent; box-shadow: 0 2px 0 var(--accent-edge); }
.chip-btn .chip-n { font-weight: 600; opacity: .8; }
.center-h { justify-content: center; }
.count-pill { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--good) 15%, var(--surface-3)); color: var(--good); font-size: 0.8rem; font-weight: 800; }
.list { display: grid; gap: 4px; }
.vrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 12px 10px; border-radius: 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.vrow:hover, .vrow.is-on { background: var(--line); }
.vrow-main b { display: block; font-size: 0.95rem; }
.vrow-meta { text-align: right; white-space: nowrap; }
.trow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.trow b { font-size: 0.95rem; font-weight: 650; }
.dot-k { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); margin-top: 2px; }
.dot-k::before { content: "+"; font-weight: 800; font-size: 0.875rem; color: var(--good); }
.dot-k.chat::before { content: "•"; color: var(--accent); } .dot-k.click::before { content: "→"; color: var(--muted); }
.lead-tag { color: var(--good); font-weight: 600; font-size: 0.8rem; margin-left: 6px; }
.funnel-row { grid-template-columns: 220px 1fr 70px; }
.funnel-row .n { font-size: 1.05rem; }
.funnel-row .pct { display: block; margin: 0; }
.lead-list { display: grid; gap: 12px; margin-bottom: 14px; }
.lead-card { padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-left: 3px solid var(--accent); box-shadow: var(--shadow-1); display: grid; gap: 12px; }
.lead-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.lead-top b { font-size: 1rem; }
.lead-right { text-align: right; display: grid; gap: 6px; justify-items: end; }
.lead-links { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-edit { display: grid; grid-template-columns: 180px 1fr auto; gap: 8px; align-items: start; }
.sel-sm { min-height: 44px; }
.note { min-height: 44px; height: 44px; padding: 10px 12px; resize: vertical; }
.reply { display: grid; gap: 8px; margin-top: 12px; }
.reply .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .vrow { grid-template-columns: 1fr auto; } .vrow-meta { grid-column: 1 / -1; text-align: left; display: flex; gap: 10px; }
  .funnel-row { grid-template-columns: 1fr 60px; } .funnel-row .bar { grid-column: 1 / -1; }
  .lead-edit { grid-template-columns: 1fr; }
}
.chart .bar-lead { fill: var(--good); opacity: .85; }
.chart .area-1 { fill: var(--accent); opacity: .12; }
.legend span.l3::before { background: var(--good); }

/* ---------- Hero mockup: days-on-market scale ---------- */
.dom { margin: 6px 14px 4px; padding: 10px 12px 9px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.dom-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.dom-top .label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8FA3C7; font-weight: 700; }
.dom-avg { font-size: 12px; color: #9AB0D4; }
.dom-avg b { color: #fff; font-size: 13px; font-weight: 800; }
.dom-scale { position: relative; height: 40px; margin: 0 10px; }
.dom-track { position: absolute; left: 0; right: 0; top: 27px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #34D399 0%, #F5C451 55%, #FB8B8B 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05); }
.dom-pin { position: absolute; top: 0; bottom: 0; width: 0; }
.dom-pin b { position: absolute; top: 1px; left: 0; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.dom-pin i { position: absolute; top: 30px; left: 0; transform: translate(-50%, -50%); width: 13px; height: 13px; border-radius: 50%; border: 2px solid #0B1017; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.55); }
.dom-pin.dom-fast { left: 4%; } .dom-fast i { background: #34D399; }
.dom-pin.dom-mid { left: 35%; } .dom-mid i { background: #fff; width: 15px; height: 15px; box-shadow: 0 0 0 3px rgba(0,137,255,.35), 0 2px 0 rgba(0,0,0,.55); }
.dom-mid b { font-size: 13px; top: 0; }
.dom-pin.dom-slow { left: 96%; } .dom-slow i { background: #FB8B8B; }
.dom-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: #8FA3C7; font-weight: 600; }
.dom-legend span:nth-child(2) { color: #B3BDCE; }
@media (max-width: 430px) { .dom { margin: 6px 10px 4px; } }

/* ---------- Get started: three-step path ---------- */
.path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 28px; padding: 0; list-style: none; }
.path-step { padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.path-n {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff; margin-bottom: 4px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 var(--accent-edge), 0 12px 20px -10px rgba(0,137,255,.7);
}
.path-step h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.path-step p { color: var(--text-2); }
@media (max-width: 860px) { .path { grid-template-columns: 1fr; } }

/* ---------- Sign-up: booking a call ---------- */
.book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.book > * { min-width: 0; }
.book h3 { font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.book-days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.day-btn {
  flex: none; min-width: 76px; padding: 10px 8px 9px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2);
  display: grid; justify-items: center; gap: 2px; color: var(--text-2); font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 rgba(0,0,0,.45); transition: transform 120ms, border-color 120ms;
}
.day-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.day-btn .dow { font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.day-btn .dnum { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.day-btn .dcount { font-size: 0.75rem; color: var(--muted); }
.day-btn.is-on { border-color: transparent; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--accent-edge); }
.day-btn.is-on .dow, .day-btn.is-on .dnum, .day-btn.is-on .dcount { color: #fff; }
.day-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.book-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.slot-btn {
  padding: 11px 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 650; font-size: 0.875rem; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 rgba(0,0,0,.45); transition: transform 120ms, border-color 120ms; font-variant-numeric: tabular-nums;
}
.slot-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.slot-btn.is-on { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--accent-edge); }
:root[data-theme="light"] .day-btn, :root[data-theme="light"] .slot-btn { box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(15,23,42,.14); }
:root[data-theme="light"] .day-btn.is-on, :root[data-theme="light"] .slot-btn.is-on { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 var(--accent-edge); }
.book-pick { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--surface); }
.book-pick b { font-weight: 700; }
.book-pick .local { color: var(--muted); font-size: 0.875rem; }
.book-note { font-size: 0.875rem; color: var(--muted); }
.book-alt { text-align: center; }
.booked { display: grid; gap: 14px; }
.booked-when { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); box-shadow: var(--shadow-2); }
.booked-when b { font-size: 1.25rem; letter-spacing: -0.01em; }
.booked-when span { color: var(--text-2); }
.booked .check-list { margin-top: 4px; }
.booked .check-list li { font-size: 0.95rem; }
.step-actions.row { grid-auto-flow: column; justify-content: center; }
@media (max-width: 520px) { .step-actions.row { grid-auto-flow: row; } .book-slots { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Admin: upcoming calls ---------- */
.calls { display: grid; gap: 8px; margin-bottom: 16px; }
.call-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.call-when { display: grid; justify-items: center; min-width: 70px; text-align: center; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.call-when b { font-size: 1rem; line-height: 1.1; }
.call-when span { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.call-row .who b { display: block; }
.call-row.is-soon { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.call-row.is-past { opacity: .55; }
.lead-call { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hi); font-weight: 700; font-size: 0.8rem; }
:root[data-theme="light"] .lead-call { color: var(--accent); }
.book-frame iframe { width: 100%; height: 700px; border: 0; border-radius: 14px; background: var(--surface); }

.trust .flip .flip-hint svg { color: currentColor; width: 15px; height: 15px; margin-top: 0; }

/* Hero: on wide screens keep the headline and button high; the tall panel runs alongside */
@media (min-width: 981px) {
  .hero-grid { align-items: start; }
  .hero-copy { padding-top: clamp(48px, 6vw, 96px); }
}

/* Hero mockup: sales left out of the ARV */
.left-out { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.14); color: #8FA3C7; font-size: 11px; }
.left-out svg { width: 13px; height: 13px; flex: none; color: #FB8B8B; }
.left-out b { color: #D5DEEC; font-weight: 700; }
.comp:nth-child(3) + .left-out { opacity: 0; animation: rise 520ms cubic-bezier(.2,.7,.2,1) .95s forwards; }

/* ---------- Why Listly: time is money ---------- */
.time-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.time-grid .section-head { margin-bottom: 0; }
.time-story { color: var(--text-2); font-size: 1.05rem; margin-top: 14px; max-width: 60ch; }
.time-calc { padding: clamp(22px, 3vw, 30px); display: grid; gap: 16px; }
.time-calc h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
.calc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
.calc-row label { color: var(--text-2); font-weight: 600; font-size: 0.95rem; }
.calc-row output { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.calc-row input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 28px; cursor: pointer; }
.time-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.time-out > div { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 14px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 rgba(0,0,0,.35); }
:root[data-theme="light"] .time-out > div { box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(15,23,42,.08); }
.time-out b { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.time-out span { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.time-out .hi { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); }
.time-out .hi b { color: var(--accent-hi); }
:root[data-theme="light"] .time-out .hi b { color: var(--accent); }
.calc-note { text-align: center; }
@media (max-width: 900px) { .time-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .time-out { gap: 6px; } .time-out > div { padding: 12px 4px; } .time-out span { font-size: 0.8rem; line-height: 1.25; } }

/* ---------- Section-by-section scrolling (home page) ---------- */
html { scroll-padding-top: var(--header-h); }
section { scroll-margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.snap { scroll-snap-type: y proximity; }
}
html.snap main > section { scroll-snap-align: start; }
html.snap .site-footer { scroll-snap-align: end; }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: clip; }
.contact-wrap { position: relative; z-index: 1; max-width: 760px; display: grid; gap: 22px; }
/* Same stack, but wide enough for a 3-up pricing grid and a 4-up step grid. */
.install-wrap { position: relative; z-index: 1; max-width: 1140px; display: grid; gap: 22px; }
.contact-card { padding: clamp(26px, 4vw, 40px); display: grid; justify-items: center; text-align: center; gap: 10px; }
.contact-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 var(--accent-edge), 0 14px 24px -12px rgba(0,137,255,.7); margin-bottom: 4px; }
.contact-ico svg { width: 26px; height: 26px; }
.dl-card { gap: 8px; max-width: 760px; margin: 0 auto; }
.dl-card .contact-ico { width: 64px; height: 64px; border-radius: 18px; }
.dl-card .contact-ico svg { width: 30px; height: 30px; }
.dl-sub { margin: 0 0 6px; max-width: 46ch; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.dl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; font-size: 1.08rem; }
.dl-btn svg { width: 20px; height: 20px; }
.dl-facts { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 0.86rem; color: var(--text-2); width: 100%; }
.dl-facts li { display: inline-flex; align-items: center; gap: 7px; }
.dl-facts svg { width: 16px; height: 16px; color: var(--good); flex: none; }
@media (max-width: 600px) { .dl-facts { flex-direction: column; align-items: center; gap: 8px; } .dl-btn { width: 100%; justify-content: center; } }
.contact-k { font-size: 0.8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.contact-v { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; word-break: break-all; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.contact-where { margin-top: 6px; }
.contact-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.contact-link { padding: 18px 20px; display: grid; gap: 4px; color: inherit; text-decoration: none; transition: transform 160ms, border-color 160ms; }
.contact-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.contact-link b { font-size: 1rem; }
.contact-link span { color: var(--muted); font-size: 0.875rem; }
@media (max-width: 760px) { .contact-more { grid-template-columns: 1fr; } }
.install-links { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
@media (max-width: 760px) { .install-links { grid-template-columns: 1fr; } }

/* =====================================================================
   Admin CRM (PIN gate · pipeline board · lead drawer · calendar · settings)
   ===================================================================== */
.admin-wide { max-width: 1480px; }

/* PIN gate */
.admin-gate { max-width: 400px; margin: clamp(20px, 6vh, 64px) auto; padding: 30px 26px 24px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.gate-mark { width: 56px; height: 44px; filter: drop-shadow(0 8px 18px rgba(0,137,255,.45)); }
.admin-gate h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.admin-gate form { display: grid; gap: 16px; justify-items: center; width: 100%; }
.pin-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pin-boxes { display: flex; gap: clamp(6px, 2vw, 12px); justify-content: center; min-height: 56px; cursor: text; }
.pin-boxes span { width: clamp(30px, 8.5vw, 46px); height: clamp(40px, 11vw, 56px); border-radius: 14px; background: var(--bg); border: 1px solid var(--line-2); box-shadow: inset 0 2px 6px rgba(0,0,0,.45); display: grid; place-items: center; transition: border-color 150ms, transform 150ms; }
:root[data-theme="light"] .pin-boxes span { box-shadow: inset 0 2px 6px rgba(15,23,42,.08); }
.pin-boxes span.is-filled::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 0 12px rgba(0,137,255,.6); }
.pin-boxes span.is-filled { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2)); transform: translateY(-1px); }
.pin-input:focus-visible + .pin-boxes span:not(.is-filled):first-of-type, .pin-boxes:focus-within span { border-color: var(--accent); }
.pin-boxes.is-busy span { animation: pinpulse 900ms ease-in-out infinite; }
@keyframes pinpulse { 50% { opacity: .5; } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; }
.pin-pad button {
  height: 58px; border-radius: 16px; font-size: 1.35rem; font-weight: 750; color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 0 rgba(0,0,0,.5), 0 10px 18px -10px rgba(0,0,0,.7);
  transition: transform 80ms, box-shadow 80ms; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] .pin-pad button { box-shadow: inset 0 1px 0 #fff, 0 4px 0 rgba(15,23,42,.14), 0 10px 18px -12px rgba(15,23,42,.3); }
.pin-pad button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.5); }
.pin-pad .pad-soft { font-size: 0.875rem; font-weight: 650; color: var(--muted); }
.pin-pad .pad-soft svg { width: 22px; height: 22px; }
.pin-go { min-width: 160px; }
.gate-token { width: 100%; text-align: left; margin-top: 4px; }
.gate-token summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; text-align: center; list-style: none; }
.gate-token summary::-webkit-details-marker { display: none; }
.gate-token[open] { display: grid; gap: 8px; }
.admin-gate .form-error { margin: 0; }

/* Leads: KPI strip + tools */
.crm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.crm-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.kpi { display: grid; gap: 0; padding: 7px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 92px; }
.kpi b { font-size: 1.2rem; font-weight: 850; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 0.75rem; color: var(--muted); font-weight: 650; }
.kpi.hot { border-color: color-mix(in srgb, var(--same) 55%, var(--line)); }
.kpi.hot b { color: var(--same); }
.crm-tools { display: flex; gap: 8px; align-items: center; flex: 1 1 320px; justify-content: flex-end; }
.crm-tools .input { max-width: 340px; }
.input-sm { min-height: 40px; padding: 8px 12px; font-size: 0.875rem; }
.crm-foot { margin-top: 10px; }

/* Board */
/* The board reserved a FIXED 290px for everything above it. That guess is wrong in
   both directions: the header is really ~417px for the owner and shorter for a rep,
   so the columns either came up short or ran off the bottom of the screen. admin.js
   measures the real gap and sets --board-h; the calc below is only the fallback for
   the first paint before that runs. */
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px;
  height: var(--board-h, calc(100dvh - 290px)); min-height: 340px; }
.col { display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); transition: border-color 120ms, background 120ms, box-shadow 120ms; }
.col.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.col-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--line); position: relative; }
.col-head::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--stage, var(--accent)); }
.col-new { --stage: #3DA3FF; } .col-contact { --stage: #91E7FF; } .col-follow { --stage: var(--same); } .col-sold { --stage: var(--good); } .col-lost { --stage: #7F8DA5; }
.col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-title b { font-size: 0.95rem; }
.col-n { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); font-size: 0.8rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.col-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.col-empty { margin: 6px 0; padding: 18px 10px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 0.8rem; text-align: center; }
.col-lost .lead-tile { opacity: .78; }

.lead-tile {
  overflow: hidden;
  position: relative; display: grid; gap: 6px; padding: 9px 11px 8px 14px; border-radius: 13px; cursor: grab; user-select: none;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 0 rgba(0,0,0,.4), 0 10px 18px -12px rgba(0,0,0,.7);
  transition: transform 120ms, box-shadow 120ms, border-color 120ms;
}
:root[data-theme="light"] .lead-tile { box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(15,23,42,.1), 0 10px 18px -14px rgba(15,23,42,.35); }
.lead-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.lead-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead-tile.is-dragging { opacity: .45; transform: rotate(-2deg); cursor: grabbing; }
.lead-tile.is-ent { border-left: 3px solid var(--cyan); }

/* ---------- card density: collapsed / open / (click) drawer ---------- */
/* The rep's colour runs down the left edge, so you can tell whose a lead is from
   across the room even when the card is collapsed to a single line. */
.lead-tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc, var(--line-2)); }
.lead-tile.tc-none::after { background: repeating-linear-gradient(180deg, var(--line-2) 0 4px, transparent 4px 8px); }
.lead-tile.is-shut { gap: 0; padding-top: 7px; padding-bottom: 7px; }
.lead-tile.is-shut .lt-body { display: none; }
/* Collapsed means the NAME. The verified tick and the Team/Added tags come back the
   moment the card opens; the view-only lock stays, because a rep needs that at a glance. */
.lead-tile.is-shut .lt-ok, .lead-tile.is-shut .lt-tag:not(.lt-lock) { display: none; }
.lead-tile.is-shut .lt-top b { flex: 1 1 auto; min-width: 0; }
.lt-caret { flex: 0 0 auto; width: 20px; height: 20px; margin-left: -3px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.lt-caret::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, 1px); transition: transform 120ms; }
.lead-tile.is-open .lt-caret::before { transform: rotate(45deg) translate(-1px, -1px); }
.lt-caret:hover { background: var(--surface); color: var(--text); }
.lt-caret:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lt-body { display: grid; gap: 6px; }
.lt-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lt-top b { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--cyan) 20%, transparent); color: var(--cyan); }
:root[data-theme="light"] .lt-tag { color: #0369A1; }
.lt-tag.soft { background: var(--line); color: var(--muted); }
.lt-sub { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-chip { justify-self: start; font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hi); }
:root[data-theme="light"] .lt-chip { color: var(--accent); }
.lt-chip.hot { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.lt-chip.due, .lt-chip.warn { background: color-mix(in srgb, var(--same) 20%, transparent); color: var(--same); }
.lt-chip.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.lt-chip.soft { background: var(--line); color: var(--muted); }
.lt-actions { display: flex; align-items: center; gap: 4px; }
.lt-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); }
.lt-ico:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.lt-ico svg { width: 14px; height: 14px; }
.lt-age { margin-left: auto; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) {
  .board { grid-template-columns: repeat(5, 262px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .col { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .board { grid-template-columns: repeat(5, 84vw); height: calc(100dvh - 250px); }
  .crm-tools { flex-basis: 100%; }
  .crm-tools .input { max-width: none; }
}

/* Drawer */
.drawer-scrim { position: fixed; inset: 0; z-index: 180; background: rgba(3,6,12,.55); backdrop-filter: blur(2px); }
.drawer {
  position: fixed; z-index: 181; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line-2); box-shadow: -30px 0 60px -20px rgba(0,0,0,.6);
  animation: drawerin 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes drawerin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer[hidden], .drawer-scrim[hidden] { display: none !important; }
body.drawer-open { overflow: hidden; }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.125rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; display: grid; gap: 14px; align-content: start; overscroll-behavior: contain; }
.dr-stage { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.dr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-actions:empty { display: none; }
.dr-facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 0.875rem; }
.dr-facts dt { color: var(--muted); }
.dr-facts dd { margin: 0; word-break: break-word; }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.dr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dr-h { font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.dr-notes { display: grid; gap: 8px; }
.dr-note { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 3px; font-size: 0.875rem; }
.dr-note.sys { background: transparent; border-style: dashed; color: var(--text-2); }
.dr-hist { max-height: 260px; overflow-y: auto; }
.dr-arch { justify-self: start; margin-top: 8px; }
.stack { display: grid; gap: 10px; }
@media (max-width: 480px) { .dr-grid, .dr-grid2 { grid-template-columns: 1fr; } .dr-facts { grid-template-columns: 1fr; gap: 0 0; } .dr-facts dd { margin-bottom: 6px; } }

/* Calendar */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.cal-head h2 { font-size: 1.35rem; letter-spacing: -0.02em; min-width: 180px; text-align: center; }
.cal-head .spacer { flex: 1; }
.cal-legend { display: inline-flex; align-items: center; gap: 6px 12px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.k-call { background: var(--accent); } .k-block { background: #7F8DA5; } .k-follow { background: var(--same); }
.cal-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: 0.75rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-cell {
  min-height: 88px; padding: 7px 7px 6px; border-radius: 12px; text-align: left; display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 0 rgba(0,0,0,.3); transition: border-color 120ms, transform 120ms;
}
.cal-cell:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
.cal-cell.is-blank { background: none; border: 0; box-shadow: none; }
.cal-cell.is-closed { opacity: .55; }
.cal-cell.is-past { opacity: .6; }
.cal-cell.is-blocked { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, color-mix(in srgb, #7F8DA5 18%, var(--surface)) 6px, color-mix(in srgb, #7F8DA5 18%, var(--surface)) 12px); }
.cal-cell.is-today .cal-num { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); color: #fff; }
.cal-cell.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); opacity: 1; }
.cal-num { align-self: flex-start; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cal-marks { display: grid; gap: 3px; }
.cal-marks span { font-size: 0.7rem; font-weight: 750; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-call { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-hi); }
:root[data-theme="light"] .m-call { color: var(--accent); }
.m-follow { background: color-mix(in srgb, var(--same) 22%, transparent); color: var(--same); }
.m-block { background: color-mix(in srgb, #7F8DA5 22%, transparent); color: var(--muted); }
.cal-day { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
.cal-day h3 { font-size: 1.05rem; }
.day-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.day-sub { font-size: 0.75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; }
.slots-list { display: grid; gap: 6px; }
.slot-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); }
.slot-t { font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.slot-what { display: grid; min-width: 0; font-size: 0.875rem; }
.slot-what b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-acts { display: inline-flex; align-items: center; gap: 8px; }
.slot-row.is-call { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.slot-row.is-follow, .slot-row.is-asap { border-color: color-mix(in srgb, var(--same) 45%, var(--line)); background: color-mix(in srgb, var(--same) 8%, var(--surface)); }
.slot-row.is-blocked { color: var(--muted); background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, color-mix(in srgb, #7F8DA5 14%, var(--surface)) 6px, color-mix(in srgb, #7F8DA5 14%, var(--surface)) 12px); }
.slot-row.is-free { border-style: dashed; color: var(--muted); }
.slot-row.is-free .slot-t { color: var(--text-2); }
.slot-row.is-pastrow { opacity: .7; }
.cal-asap { margin-bottom: 14px; display: grid; gap: 8px; }
.cal-asap h3 { margin-bottom: 4px; }
.cal-feed .feed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.cal-feed .feed-row .input { flex: 1 1 320px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
@media (max-width: 980px) { .cal-wrap { grid-template-columns: 1fr; } .cal-day { position: static; max-height: none; } }
@media (max-width: 560px) { .cal-cell { min-height: 58px; padding: 5px; } .cal-marks span { font-size: 0; padding: 0; height: 6px; border-radius: 3px; } .cal-grid { gap: 4px; } .slot-row { grid-template-columns: 64px 1fr; } .slot-acts { grid-column: 1 / -1; justify-content: flex-end; } }

/* Settings */
.checklist { display: grid; gap: 10px; }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.check-dot { width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; border: 2px solid var(--line-2); display: grid; place-items: center; }
.check-row.ok .check-dot { background: var(--good); border-color: var(--good); }
.check-row.ok .check-dot::after { content: "✓"; color: #04160d; font-size: 11px; font-weight: 900; }
.check-row.todo .check-dot { border-color: var(--same); }
.check-row.todo .check-dot::after { content: "!"; color: var(--same); font-size: 11px; font-weight: 900; }
.check-row.opt .check-dot { border-style: dashed; }
.form-error.is-ok { color: var(--good); }
.dot-k.bad::before { content: "!"; color: var(--worse); }
.dot-k.okk::before { content: "✓"; color: var(--good); }
.tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #FB8B8B, #D64545); }
.tab-badge[hidden] { display: none !important; }
/* Admin: compact head so the board fits one screen */
.admin-wide .admin-head { margin: 0 0 10px; gap: 2px; }
.admin-wide .admin-head h1 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.admin-wide .tabs { margin-bottom: 14px; }
@media (max-width: 640px) {
  .admin-wide .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 11px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admin-wide .tabs::-webkit-scrollbar { display: none; }
  .crm-kpis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .crm-kpis::-webkit-scrollbar { display: none; }
  .kpi { flex: none; }
  body:has(.admin-wide) .fab { display: none; }
  .admin-wide .admin-head p { display: none; }
}
@media (max-width: 640px) { .admin-wide .tabs { justify-content: flex-start; } }

/* Sign-up: 6-digit email code */
.code-input { display: block; width: 100%; max-width: 330px; margin: 4px auto 0; text-align: center; font-size: clamp(1.8rem, 6vw, 2.3rem); font-weight: 800; letter-spacing: .45em; padding: 12px 0 12px .45em; font-variant-numeric: tabular-nums; }
.code-input::placeholder { color: var(--line-2); letter-spacing: .45em; }
#verify-form .form-error { text-align: center; }
#verify-form .form-error.is-ok { color: var(--good); }
#verify-resend[disabled] { opacity: .55; cursor: default; text-decoration: none; }
.lt-ok { flex: none; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 900; color: #04160d; background: var(--good); }
.crm-new { position: fixed; z-index: 190; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 999px; font-weight: 750; font-size: 0.875rem; color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 4px 0 var(--accent-edge), 0 18px 30px -12px rgba(0,137,255,.6); transition: opacity 200ms, transform 200ms; }
.crm-new.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Quiet admin link at the very bottom (same idea as the 316 site) */
.admin-foot { margin: 14px 0 0; text-align: center; line-height: 1; }
.admin-foot a { font-size: 0.75rem; letter-spacing: .08em; color: var(--muted); opacity: .45; text-decoration: none; padding: 4px 8px; }
.admin-foot a:hover, .admin-foot a:focus-visible { opacity: .9; color: var(--text-2); }

/* =====================================================================
   Admin v5: lead scores, call outcomes, texting, prospects, settings forms
   ===================================================================== */
.admin .btn-row, .drawer .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack > .form-error { margin-top: 0; }
.danger { color: var(--worse) !important; }
.lt-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lt-temp { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.lt-temp.t-hot { background: #FF7A45; box-shadow: 0 0 8px rgba(255,122,69,.6); }
.lt-temp.t-warm { background: var(--same); }
.lt-temp.t-cold { background: #7F8DA5; }
.dr-outcome { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--same) 45%, var(--line)); background: color-mix(in srgb, var(--same) 8%, var(--surface)); }
.dr-outcome .trow { padding: 8px 0; border-bottom: 0; align-items: center; }
.sms-box { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.sms-box[hidden] { display: none; }
.sms-box .form-error { margin-top: 0; }
.dr-note.is-text { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.dr-foot { display: grid; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.drawer.is-wide { width: min(760px, 100vw); }
.set-row { align-items: end; }
.set-row .check-l { padding-bottom: 10px; }

/* Prospects */
.pro-chips { margin: 0; }
.pro-box { padding: 6px 14px 14px; }
.pro-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pro-bulk[hidden] { display: none; }
.pro-bulk .input { width: auto; min-width: 170px; }
.pro-tbl td, .pro-tbl th { vertical-align: middle; }
.pro-tbl .pro-cb { width: 36px; padding-right: 0; }
.pro-tbl input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); vertical-align: middle; }
.pro-tbl b { font-weight: 650; }
.pro-contact { display: grid; gap: 2px; min-width: 0; }
.pro-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; word-break: break-all; }
.pro-tbl tr.is-already td { opacity: .55; }
.pro-show-sm { display: none; }
.pro-stack span { display: block; overflow-wrap: anywhere; }
.pill-status { white-space: nowrap; }
.pro-st.pro-new { color: var(--accent-hi); }
:root[data-theme="light"] .pro-st.pro-new { color: var(--accent); }
.pro-st.pro-contacted, .pro-st.pro-replied { color: var(--same); }
.pro-st.pro-converted { color: var(--good); }
.pro-st.pro-not_interested { color: var(--muted); }
.pro-st.pro-dnc { color: var(--worse); }
.pro-empty { padding: 28px 12px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.pro-empty[hidden] { display: none; }
.pro-empty p { max-width: 560px; }
.pro-foot { margin-top: 10px; }
.pro-rules { margin-top: 12px; max-width: 980px; }
.pro-rules em { font-style: normal; font-weight: 650; color: var(--text-2); }
.map-grid { display: grid; gap: 8px; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.map-sample { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder-log { display: grid; gap: 6px; }
.finder-log:empty { display: none; }
.finder-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 0.875rem; }
.finder-line.is-ok { grid-template-columns: minmax(0, 1fr) auto; }
.finder-line.is-bad { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.finder-line.is-ok { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.finder-line.is-bad { border-color: color-mix(in srgb, var(--worse) 40%, var(--line)); }
.finder-line.is-bad .small { color: var(--worse); white-space: normal; }
.finder-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.finder-results { display: grid; gap: 16px; }
.finder-box { display: grid; gap: 8px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .crm-tools { flex-wrap: wrap; justify-content: stretch; }
  .crm-tools .input { flex: 1 1 100%; }
  .crm-tools .btn { flex: 1 1 auto; }
  .pro-hide-sm { display: none; }
  .pro-show-sm { display: block; }
  .map-row { grid-template-columns: 1fr; }
  .pro-bulk .input { min-width: 0; flex: 1; }
}

/* ---------- Sourced stats (marketing pages) ---------- */
/* Every number on the page carries its source, so a rep can point at it on a call
   and a visitor can check it. .src is the attribution caption. */
.src { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.hero-stat { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--text-2); font-size: 0.9375rem; max-width: 46ch; }
.hero-stat b { color: var(--text); font-weight: 800; }
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 22px 20px; display: grid; gap: 6px; grid-template-rows: auto 1fr auto; }
.stat b { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1;
  color: var(--accent-hi); }
:root[data-theme="light"] .stat b { color: var(--accent); }
.stat span { color: var(--text-2); font-size: 0.9375rem; }
.stat i { font-style: normal; font-weight: 700; color: var(--text); }
.stat em { font-style: normal; margin-top: 4px; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.mkt-note { margin: 22px auto 0; max-width: 74ch; text-align: center; color: var(--text-2); font-size: 0.9375rem; }
@media (max-width: 980px) { .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .statgrid { grid-template-columns: 1fr; } .hero-stat { max-width: none; } }

/* ---------- Grouped tool cards + "remind me" capture ---------- */
.group-label { margin: 34px 0 12px; font-size: 0.75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.group-label:first-of-type { margin-top: 0; }
.features-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-soon { position: relative; }
.soon-tag { display: inline-block; align-self: start; justify-self: start; padding: 3px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--same); background: color-mix(in srgb, var(--same) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--same) 35%, transparent); }
.soon-detail { color: var(--muted); font-size: 0.9375rem; }
.remind { display: grid; gap: 8px; margin-top: 4px; }
.remind .input-sm { width: 100%; }
.remind-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8125rem; color: var(--text-2); cursor: pointer; }
.remind-ok input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.remind-msg { margin: 0; font-size: 0.8125rem; font-weight: 600; min-height: 1.2em; }
.remind-msg.ok { color: var(--good); }
.remind-msg.bad { color: var(--worse); }
@media (max-width: 860px) { .features-2 { grid-template-columns: 1fr; } }

/* ---------- Problems + the Tuesday timeline ---------- */
.problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.problem { padding: 24px 22px; display: grid; gap: 10px; align-content: start; position: relative; }
.p-n { font-size: 0.75rem; font-weight: 900; letter-spacing: .14em; color: var(--accent-hi); }
:root[data-theme="light"] .p-n { color: var(--accent); }
.problem h3 { font-size: 1.0625rem; }
.problem p { color: var(--text-2); font-size: 0.9375rem; margin: 0; }
.p-stat { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface-2); font-size: 0.875rem !important; }
.p-fix { color: var(--text) !important; }
.p-fix b { color: var(--good); }
.tue-head { margin-top: 56px; }
.tuesday { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tue-col { padding: 24px 22px; }
.tue-col h3 { margin: 0 0 14px; font-size: 1.0625rem; }
.tue-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tue-col li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 0.9375rem; }
.tue-col li b { color: var(--text); font-variant-numeric: tabular-nums; }
.tue-col li span { font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
.tue-old li span { color: var(--worse); }
.tue-new li span { color: var(--good); }
.tue-end { margin: 14px 0 0; font-weight: 700; font-size: 0.9375rem; }
.tue-old .tue-end { color: var(--worse); }
.tue-new .tue-end { color: var(--good); }
.tue-new { border-color: color-mix(in srgb, var(--good) 35%, transparent); }
@media (max-width: 980px) { .problems { grid-template-columns: 1fr; } .tuesday { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tue-col li { grid-template-columns: 46px 1fr; } .tue-col li span { grid-column: 2; } }

.faq-group { margin: 30px 0 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.faq-group:first-of-type { margin-top: 0; }

.mkt-stat { margin: 16px auto 0; text-align: center; max-width: 60ch; }

/* ---------- Activity: a chat row opens its transcript (drop #37) ---------- */
.trow.is-chat { cursor: pointer; }
.trow.is-chat:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.trow.is-chat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.act-chat { margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--line); display: grid; gap: 7px; }
.act-msg { display: grid; gap: 2px; font-size: 0.85rem; }
.act-msg b { font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.act-msg span { white-space: pre-wrap; overflow-wrap: anywhere; }
.act-msg.who-them span { color: var(--text); }
.act-msg.who-bot span, .act-msg.who-staff span { color: var(--text-2); }
.act-msg.who-staff b { color: var(--accent-hi); }

/* ---------- Search section (drop #38) ---------- */
/* Side by side left a tall column of chips against three lines of text and a hole
   under it. The chips read better as a row of cards beneath the lead. */
.srch { display: grid; gap: 18px; margin-top: 8px; }
.srch-lead { max-width: 62ch; }
.srch-lead p { margin: 0 0 10px; }
.srch-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .srch-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .srch-chips { grid-template-columns: 1fr; } }
.srch-chips li { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--surface) 70%, transparent); }
.srch-chips b { display: block; font-size: 0.95rem; }
.srch-chips span { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 1px; }
.srch-loop { margin: 22px 0 0; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---------- a lead you cannot edit has to LOOK like one (drop #39) ----------
   Only .btn had a disabled style, and only at .7 opacity. Everything else — the
   follow-up chips, the notes box, the date and value inputs and both red
   text-links — rendered at full brightness, so a rep would click "Delete
   everything about this person" on another rep's lead and watch nothing happen.
   That reads as broken software rather than as a rule. */
.drawer .chip-btn:disabled,
.drawer .input:disabled,
.drawer textarea:disabled,
.drawer input:disabled,
.drawer select:disabled,
.drawer .linkbtn:disabled,
.drawer .text-link:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.drawer .btn[disabled] { opacity: .45; }
.drawer .check-l:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* ---------- tool cards: the name a rep says, then the promise (drop #40) ---------- */
/* two lines reserved so all three bodies start on the same line, however the
   kicker wraps at a given width */
.feature .card-kicker { margin: -2px 0 8px; font-weight: 700; color: var(--text); line-height: 1.45;
  min-height: calc(2 * 1.45em); }   /* two of its own lines, not a guessed 2.9em */
@media (max-width: 620px) { .feature .card-kicker { min-height: 0; } }
.feature h3 { margin-bottom: 2px; }
/* three tiles rather than four, so they sit on one row on a wide screen */
.statgrid.mkt-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .statgrid.mkt-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .statgrid.mkt-3 { grid-template-columns: 1fr; } }

/* ---------- "Where this is going": now / next (drop #41) ---------- */
/* .hero-stat is left-aligned by default; the marketplace copy centres it via
   .mkt-stat. Centre it for any centred section head rather than duplicating that. */
.section-head.center .hero-stat { margin-left: auto; margin-right: auto; }
.road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
@media (max-width: 900px) { .road { grid-template-columns: 1fr; } }
.road-card { padding: 20px 20px 22px; display: grid; align-content: start; gap: 6px; }
.road-card h3 { margin: 2px 0 0; }
.road-card p { margin: 0; }
.road-tag { justify-self: start; font-size: 0.68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--line); color: var(--muted); }
.road-card.is-now { border-color: color-mix(in srgb, var(--good) 40%, var(--line-2)); }
.road-card.is-now .road-tag { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.road-tag.soon { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hi); }
:root[data-theme="light"] .road-tag.soon { color: var(--accent); }
.road-note { max-width: 74ch; margin: 18px auto 0; text-align: center; color: var(--muted); font-size: 0.92rem; }

/* ---------- /moreinfo/ as a sales letter (drop #42) ---------- */
.moreinfo-hero { text-align: left; }
.ml-h { margin: 34px 0 10px; font-size: 1.35rem; }
.ml-list, .ml-steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.ml-list li, .ml-steps li { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--surface) 65%, transparent); }
.ml-steps { counter-reset: ml; }
.ml-steps li { counter-increment: ml; position: relative; padding-left: 50px; }
.ml-steps li::before { content: counter(ml); position: absolute; left: 16px; top: 13px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-hi); }
:root[data-theme="light"] .ml-steps li::before { color: var(--accent); }
/* The three jobs carry an icon: a chip column, then the text. Same accent tint and the
   same light-mode override as the .ml-steps numbers, so it reads as one family. */
.ml-jobs li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; }
.ml-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-hi); }
:root[data-theme="light"] .ml-ico { color: var(--accent); }
.ml-ico svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .ml-jobs li { grid-template-columns: 32px minmax(0, 1fr); gap: 11px; }
  .ml-ico { width: 32px; height: 32px; border-radius: 9px; } .ml-ico svg { width: 17px; height: 17px; } }

.ml-not li { border-color: color-mix(in srgb, var(--worse) 26%, var(--line-2)); }
.ml-close { margin-top: 34px; padding: 20px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.ml-close p { margin: 0 0 14px; }