/* ============================================================
   Zodiem — Shared design tokens & components
   Extracted from the provided page designs into one shared file.
   ============================================================ */
/* ============================================================
   Zodiem — Shared design tokens & components
   ============================================================ */
:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --muted:#6b6b6b;
  --line:#ececec;
  --line-2:#f4f4f4;
  --accent:#ff6467;
  --accent-hover:#ff4a4d;
  --accent-soft:#ffd6cf;
  /* BUILD-EVERYTHING pass, Phase 7: real contrast fix for white text
     ON the accent color — --accent itself measures 2.88:1 with white
     text (WCAG AA needs 4.5:1 for this size range; verified against
     every real instance of white-on-accent TEXT sitewide, not just
     the one page LIGHTHOUSE_REPORT.md originally flagged — see
     DECISIONS.md for the full list and why a sitewide --accent
     recolor was deliberately avoided). --accent/--accent-hover stay
     exactly as-is for every non-text use (underlines, dots, borders,
     icon backgrounds) — zero visual change there. These two variants
     are used ONLY where white text actually sits on the accent color. */
  --accent-cta:#d4393d;
  --accent-cta-hover:#b22c30;
  --peach:#ffd2a8;
  --warm-1:#fff4e6;
  --warm-2:#ffe2c2;
  --warm-3:#ffeaea;
  --success:#10b981;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 30px 60px -20px rgba(15,15,15,0.18);
  --shadow-sm:0 8px 24px -10px rgba(0,0,0,0.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 28px}
.serif{font-family:'Newsreader',serif;font-weight:500}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;gap:24px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Newsreader',serif;font-weight:600;font-size:22px;
  letter-spacing:-0.01em;
}
.logo-mark{
  width:28px;height:28px;border-radius:8px;
  object-fit:contain;flex-shrink:0;
  box-shadow:0 8px 20px -8px rgba(255,100,103,0.55);
}
.nav-links{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:500;color:#1a1a1a}
.nav-links a{position:relative;padding:6px 0;transition:color .2s ease}
.nav-links a:hover,.nav-links a.active{color:var(--accent-cta)}
.nav-links a.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-cta{
  background:var(--ink);color:#fff;padding:11px 22px;border-radius:10px;
  font-weight:600;font-size:14px;letter-spacing:-0.01em;
  transition:transform .2s ease, background .2s ease;
}
.nav-cta:hover{background:#222;transform:translateY(-1px)}
.hamburger{display:none;background:none;border:0;cursor:pointer;width:32px;height:32px}
.hamburger span{display:block;width:22px;height:2px;background:#000;margin:5px auto;border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== Nav: Comparisons dropdown + right-side action group ===== */
.nav-dropdown{position:relative}
.nav-dropdown-menu{
  display:none;position:absolute;top:28px;left:0;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  min-width:180px;padding:6px;box-shadow:var(--shadow-sm);
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:8px 10px;border-radius:6px;color:var(--ink);font-size:13px}
.nav-dropdown-menu a:hover{background:#fafafa;color:var(--ink)}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-actions .btn-outline{padding:9px 16px;font-size:13px}

/* ===== Buttons ===== */
.btn-primary{
  background:var(--ink);color:#fff;padding:14px 26px;border-radius:12px;
  font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.35);
  border:0;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(0,0,0,0.45)}
.btn-primary:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-primary svg{transition:transform .2s ease}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-coral{
  background:var(--accent-cta);color:#fff;padding:14px 26px;border-radius:12px;
  font-weight:600;font-size:15px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .2s ease, transform .2s ease;
  box-shadow:0 14px 30px -10px rgba(255,100,103,0.5);
}
.btn-coral:hover{background:var(--accent-cta-hover);transform:translateY(-2px)}
.btn-coral:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-outline{
  background:transparent;color:var(--ink);padding:14px 26px;border-radius:12px;
  border:1px solid var(--ink);font-weight:600;font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  transition:all .2s ease;
}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline:active{transform:scale(.97);transition-duration:.1s}

/* ===== Hero ===== */
.hero{
  position:relative;padding:80px 0 60px;text-align:center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, #ffd2a8 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 30%, #ffe2c2 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 20% 30%, #ffeaea 0%, transparent 55%),
    linear-gradient(180deg,#fff 0%, #fff5ec 100%);
  overflow:hidden;
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #f0d9c9;
  padding:7px 14px;border-radius:999px;
  font-size:13px;color:#b94a2f;font-weight:500;
  box-shadow:0 4px 14px -4px rgba(255,140,80,0.25);margin-bottom:28px;
}
.badge .dot{width:16px;height:16px;background:#ff6467;border-radius:3px;display:inline-block}
h1.hero-headline{
  font-family:'Newsreader',serif;font-weight:500;
  font-size:clamp(44px, 6.4vw, 92px);line-height:1.02;
  letter-spacing:-0.025em;color:#0a0a0a;
  max-width:1000px;margin:0 auto 24px;
}
.hero-sub{font-size:18px;color:#2a2a2a;max-width:580px;margin:0 auto 36px}
.cta-row{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap}
.hint-5min{font-size:13px;color:#666;display:inline-flex;align-items:center;gap:6px;margin-top:14px}
.hint-5min svg{opacity:.7}

/* ===== Hero dashboard mockup (pure UI, no real product data) =====
   Motion/layout inspired by a competitor screen recording (per request);
   the recording's video-call tile showed a real-looking human face with
   an invented name+title — not recreated here, same honesty rule as
   DECISIONS.md's other "no fabricated person" calls. Swapped for an
   abstract "live voice" tile (call-control icons + waveform, no face)
   and our own real logo mark instead. */
.hero-visual{max-width:840px;margin:56px auto 0;position:relative}
.mockup-window{background:#fff;border-radius:16px;box-shadow:0 40px 80px -30px rgba(20,10,5,0.28);overflow:hidden;border:1px solid rgba(0,0,0,0.06)}
.mockup-chrome{display:flex;gap:7px;padding:12px 14px;background:#f3f1ee;border-bottom:1px solid rgba(0,0,0,0.06)}
.mockup-chrome span{width:10px;height:10px;border-radius:50%;background:#e0ddd8}
.mockup-chrome span:nth-child(1){background:#ff6467}
.mockup-chrome span:nth-child(2){background:#ffb454}
.mockup-chrome span:nth-child(3){background:#3ec97a}
.screenshot-panel.hero-shot{aspect-ratio:840/472;width:100%;border-radius:0}
.screenshot-panel.hero-shot img{width:100%;height:100%;display:block;object-fit:cover}

/* ===== Generic page hero (smaller) ===== */
.page-hero{
  padding:90px 0 50px;text-align:center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, #ffd2a8 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 20%, #ffe2c2 0%, transparent 60%),
    linear-gradient(180deg,#fff 0%, #fff5ec 100%);
}
.page-hero h1{
  font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,4.4vw,64px);
  line-height:1.05;letter-spacing:-0.02em;max-width:880px;margin:0 auto 18px;
}
.page-hero p{font-size:18px;color:#3a3a3a;max-width:620px;margin:0 auto}

/* ===== Trust strip ===== */
.trust{padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafafa}
.trust-label{text-align:center;color:#888;font-size:12px;letter-spacing:0.18em;font-weight:600;margin-bottom:28px}
.trust-row{display:grid;grid-template-columns:repeat(6,1fr);gap:30px;align-items:center;opacity:.85}
.trust-row div{font-family:'Newsreader',serif;font-weight:600;font-size:22px;color:#444;text-align:center}
.compliance{display:flex;justify-content:center;gap:30px;margin-top:30px;font-size:13px;color:#666;flex-wrap:wrap}
.compliance span{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.compliance span::before{content:'';width:6px;height:6px;background:var(--success);border-radius:50%}

/* ===== Proof strip — real capabilities only, no fake logos/activity (SHIP-READY PASS) ===== */
.proof-strip{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;max-width:900px;margin:0 auto}
.proof-item{font-size:13px;color:#555;max-width:220px;text-align:center;line-height:1.5}
.proof-item strong{display:block;color:#222;font-weight:600;margin-bottom:2px}
@media (max-width:820px){.proof-strip{gap:20px}}

/* ===== Stat cards (honest claims only — see DECISIONS.md) ===== */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto 36px}
.stat-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.stat-art{width:100%;aspect-ratio:400/220;object-fit:cover;display:block}
.stat-copy{padding:18px 20px 22px}
.stat-copy h3{font-size:15.5px;font-weight:600;letter-spacing:-0.005em}
.stat-copy p{font-size:13px;color:#666;margin-top:6px;line-height:1.5}
.stat-copy a{color:var(--accent-cta);text-decoration:underline}
@media (max-width:820px){.stat-grid{grid-template-columns:1fr}}

/* ===== Live activity ticker — sample/illustrative data, not real ===== */
.ticker-section{padding:50px 0 60px;background:#fff;border-bottom:1px solid var(--line)}
.ticker-head{text-align:center;margin-bottom:22px}
.ticker-head .trust-label{margin-bottom:6px}
.ticker-disclaimer{display:block;font-size:12px;color:#999;font-style:italic;letter-spacing:0;text-transform:none;font-weight:400}
.ticker-track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:16px;width:max-content;animation:tickerScroll 34s linear infinite}
.ticker-track:hover{animation-play-state:paused}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-card{
  display:flex;align-items:flex-start;gap:10px;background:#fafafa;border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;min-width:270px;flex-shrink:0;
}
.ticker-pin{flex-shrink:0;color:var(--accent-cta);margin-top:2px}
.ticker-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:#b94a2f;background:#fff4e6;border:1px solid #ffd2a8;border-radius:5px;padding:2px 7px;margin-bottom:5px}
.ticker-title{font-size:13.5px;font-weight:600}
.ticker-meta{font-size:12px;color:#777;margin-top:2px}
.ticker-time{font-size:11px;color:#aaa;margin-top:4px}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;overflow-x:auto}}

/* ===== Pitch ===== */
.pitch{padding:120px 0;text-align:center;background:radial-gradient(ellipse 60% 80% at 50% 30%, #fff4e6 0%, transparent 60%)}
.pitch h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,4.4vw,64px);line-height:1.1;letter-spacing:-0.02em;max-width:880px;margin:0 auto}

/* ===== Features ===== */
.features{padding:120px 0;background:#fff}
.feat-label{text-align:center;color:#707070;font-size:12px;letter-spacing:0.18em;font-weight:600;margin-bottom:16px}
.features h2,.section-title{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,4.6vw,68px);text-align:center;line-height:1.08;letter-spacing:-0.02em;margin-bottom:80px}
.feat-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;margin-bottom:120px}
.feat-grid.reverse{grid-template-columns:.8fr 1.2fr}
.feat-grid.reverse .feat-text{order:2}
.feat-grid.reverse .feat-visual{order:1}
.feat-text h3{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(28px,3vw,46px);line-height:1.15;letter-spacing:-0.015em;margin-bottom:20px}
.feat-text p{font-size:16px;color:#3a3a3a;max-width:440px;margin-bottom:24px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:#2a2a2a}
.feat-list li::before{
  content:'';width:18px;height:18px;border-radius:6px;flex-shrink:0;margin-top:2px;
  background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6467' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/svg%3E");
  background-size:14px;background-repeat:no-repeat;background-position:center;
}
.feat-visual{
  background:linear-gradient(135deg,#fff4e6 0%, #ffe2c2 100%);
  border-radius:var(--radius-lg);padding:40px;
  aspect-ratio:1;display:grid;place-items:center;
  box-shadow:0 30px 60px -30px rgba(255,140,80,0.4);position:relative;
}
.visual-card{background:#fff;border-radius:14px;padding:20px;width:90%;max-width:380px;box-shadow:0 18px 40px -10px rgba(0,0,0,0.1)}
.persona-card{display:flex;gap:14px;align-items:center}
.persona-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#ffd6cf,#ffb27a);
  display:grid;place-items:center;color:#fff;font-weight:700;
}
.persona-info .name{font-weight:600;font-size:16px}
.persona-info .role{font-size:13px;color:#666}
.persona-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stat-pill{background:#f5f5f5;border-radius:8px;padding:10px;text-align:center}
.stat-pill .n{font-weight:700;font-size:16px;color:var(--accent-cta)}
.stat-pill .l{font-size:11px;color:#666;margin-top:2px}
.visual-mini-card{background:#fff;border-radius:14px;padding:20px;width:84%;box-shadow:0 18px 40px -10px rgba(0,0,0,0.12)}
.lang-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.lang-pill{background:#f5f5f5;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600}
.lang-pill.now{background:var(--accent-cta);color:#fff}
.msg-bubble{background:#0a0a0a;color:#fff;border-radius:12px 12px 12px 4px;padding:12px 14px;font-size:13px;margin:6px 0}
.msg-bubble.in{background:#fff5ec;color:#222;border:1px solid #ffe2c2;border-radius:12px 12px 4px 12px}

/* ===== Multilingual session rows — initials avatar, no invented faces ===== */
.lang-sessions{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.lang-session-row{display:flex;align-items:center;gap:10px}
.init-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#7a3b1e;flex-shrink:0}
.lang-session-info{font-size:12.5px}
.lang-session-info .lang-name{font-weight:600;color:#1a1a1a}
.lang-session-info .lang-meta{color:#888;margin-top:1px}

/* ===== Hyper-personalization — abstract session tiles, no faces ===== */
.hyperp{padding:100px 0;background:#fafafa;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hyperp h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,4.4vw,64px);text-align:center;line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px}
.hyperp .sub{text-align:center;color:#666;font-size:16px;max-width:560px;margin:0 auto 50px}
.hyperp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto}
.hyperp-tile{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.hyperp-tile .tile-chrome{display:flex;gap:5px;padding:9px 10px;background:#f3f1ee;border-bottom:1px solid rgba(0,0,0,0.06)}
.hyperp-tile .tile-chrome span{width:7px;height:7px;border-radius:50%;background:#e0ddd8}
.hyperp-tile .tile-body{padding:16px 14px;display:flex;flex-direction:column;gap:7px}
.hyperp-tile .tile-bar{height:7px;border-radius:4px;background:var(--line-2)}
.hyperp-tile .tile-bar.accent{background:var(--accent-soft);width:60%}
.hyperp-tile .tile-foot{display:flex;align-items:center;gap:6px;padding:0 14px 14px;font-size:11px;color:#888}
.hyperp-tile .live-dot{width:7px;height:7px;background:#3ec97a;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}
.hyperp-note{text-align:center;color:#999;font-size:12px;font-style:italic;margin-top:26px}
/* IMAGE + VISUAL REWORK PASS: replaced 6 fake bar-chart tiles with 3
   cards built from real seeded-session data (real visitor questions,
   real AI-generated lead-insight interest level and next step — see
   captureWave2Screenshots.mjs's own workspace for how this data is
   produced). Not a screenshot (the real UI is tabular, not card-
   shaped) but every word in each card is real, not invented. */
.session-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto}
.session-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;box-shadow:var(--shadow-sm)}
.session-chip{display:inline-block;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600}
.session-chip.high{background:#e4f4ec;color:#1f6b47}
.session-chip.medium{background:#fdeede;color:#8a4a12}
.session-quote{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:#2b2724}
.session-next{margin:12px 0 0;font-size:12.5px;color:#888;border-top:1px solid var(--line);padding-top:12px}
@media (max-width:820px){.session-grid{grid-template-columns:1fr}}
@media (max-width:820px){.hyperp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hyperp-grid{grid-template-columns:1fr}}

/* ===== CRM ===== */
.crm-section{padding:120px 0;background:#0a0a0a;color:#fff;border-radius:30px 30px 0 0}
.crm-section .container{text-align:center}
.crm-section h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,4.4vw,64px);line-height:1.1;letter-spacing:-0.02em;margin-bottom:24px}
.crm-diagram-wrap{max-width:560px;margin:0 auto 20px;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(255,120,70,0.35)}
.crm-diagram-wrap img{width:100%;display:block}
.crm-diagram-caption{color:#777;font-size:12px;font-style:italic;margin-bottom:50px}
.crm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.crm-card{
  background:#161616;border:1px solid #222;border-radius:18px;
  padding:28px 24px;text-align:left;transition:transform .25s ease, border-color .25s ease;
}
.crm-card:hover{transform:translateY(-6px);border-color:#333}
.crm-card .logo-icon{
  width:48px;height:48px;border-radius:12px;background:#222;display:grid;place-items:center;
  margin-bottom:18px;font-weight:700;font-family:'Newsreader',serif;color:var(--accent);font-size:20px;
}
.crm-card h3{font-size:18px;margin-bottom:8px;font-weight:600}
.crm-card p{font-size:13px;color:#aaa;line-height:1.5}

/* IMAGE + VISUAL REWORK PASS: real integration status tiles, replacing
   the old mixed crm-grid (which blended real delivery channels with
   unrelated features). Every status below is read from the real code
   (hubspotAdapter.js's isRealCrmConfigured(), webhookDelivery.js, and
   the simple absence of a salesforceAdapter.js/pipedriveAdapter.js),
   not asserted from copy alone. */
.integ-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.integ-tile{
  background:#161616;border:1px solid #222;border-radius:18px;
  padding:22px 18px;text-align:left;transition:transform var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.integ-tile:hover{transform:translateY(-2px);border-color:#fff}
.integ-tile-disabled{opacity:.6}
.integ-tile-disabled:hover{transform:none;border-color:#222}
.integ-mark{
  width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;background:#fff;
}
.integ-mark-disabled{filter:grayscale(1);opacity:.55}
.integ-name{font-size:15px;font-weight:600;margin-bottom:10px}
.integ-status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4}
.integ-status.ok{background:rgba(46,158,106,0.18);color:#5fd49a}
.integ-status.testing{background:rgba(242,176,78,0.18);color:#f2b04e}
.integ-status.none{background:rgba(255,255,255,0.08);color:#9c938a}
@media (prefers-reduced-motion:reduce){.integ-tile{transition:none}.integ-tile:hover{transform:none}}
@media (max-width:820px){.integ-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.integ-grid{grid-template-columns:1fr}}

/* ===== Pricing ===== */
.pricing{padding:120px 0;background:#faf7f2}
.pricing h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,4.4vw,60px);text-align:center;line-height:1.1;letter-spacing:-0.02em;margin-bottom:18px}
.pricing .sub{text-align:center;color:#666;font-size:17px;margin-bottom:60px}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1280px;margin:0 auto}
.price-card{
  border:1px solid #00000014;border-radius:14px;padding:36px 30px;
  background:#fff;transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
}
.price-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(12,10,9,0.18)}
.price-card.featured{background:#0c0a09;color:#fff;border-color:#0c0a09;position:relative}
.price-card.featured:hover{box-shadow:0 20px 40px -20px rgba(212,57,61,0.35)}
.price-limit{display:inline-block;font-size:13px;font-weight:600;color:#555;background:#f5f2eb;border-radius:7px;padding:7px 12px;margin-bottom:22px}
.price-card.featured .price-limit{background:rgba(255,255,255,0.08);color:#ddd}
.price-safety-note{font-size:12px;color:#707070;margin-top:12px;text-align:center;line-height:1.5}
.price-card.featured .price-safety-note{color:#999}
.price-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent-cta);color:#fff;font-size:11px;font-weight:700;letter-spacing:0.1em;padding:6px 14px;border-radius:999px}
.plan-name{font-size:14px;font-weight:600;color:#707070;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:14px}
.price-card.featured .plan-name{color:#999}
.price-num{font-family:'Newsreader',serif;font-size:48px;font-weight:600;letter-spacing:-0.02em;margin-bottom:6px}
.price-num small{font-size:16px;color:#666;font-family:'Inter',sans-serif}
.price-card.featured .price-num small{color:#999}
.price-annual-note{font-size:12.5px;color:#767676;margin-top:-6px;margin-bottom:10px}
.price-card.featured .price-annual-note{color:#999}
.price-desc{font-size:14px;color:#666;margin-bottom:24px;min-height:42px}
.price-card.featured .price-desc{color:#aaa}
.price-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:30px;flex:1}
.price-features li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.price-features li::before{
  content:'';width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;
}
.price-btn{display:block;text-align:center;padding:14px;border-radius:10px;font-weight:600;font-size:14px;transition:all .2s ease}
.price-btn.outline{border:1px solid var(--ink);color:var(--ink)}
.price-btn.outline:hover{background:var(--ink);color:#fff}
.price-btn.solid{background:var(--accent-cta);color:#fff}
.price-btn.solid:hover{background:var(--accent-cta-hover)}

/* ===== ROI calculator (pricing.html, section D) ===== */
.roi{padding:100px 0;background:#fff}
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;max-width:1000px;margin:0 auto;align-items:start}
.roi-field{margin-bottom:26px}
.roi-field:last-child{margin-bottom:0}
.roi-label{display:block;font-size:13px;font-weight:600;color:#3a3a3a;margin-bottom:10px}
.roi-field-row{display:flex;align-items:center;gap:14px}
.roi-field-row input[type="range"]{flex:1;accent-color:var(--accent-cta);height:4px}
.roi-field-row input[type="number"]{width:96px;flex-shrink:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:#fff}
.roi-field-row input:focus-visible{outline:2px solid var(--accent-cta);outline-offset:2px;border-radius:4px}
.roi-output{background:#faf7f2;border:1px solid #00000014;border-radius:14px;padding:30px}
.roi-result-label{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b655f;margin-bottom:22px}
.roi-bars{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.roi-bar-row{display:grid;grid-template-columns:140px 1fr 90px;align-items:center;gap:12px}
.roi-bar-label{font-size:13px;color:#555}
.roi-bar-track{height:10px;background:#ebe6db;border-radius:6px;overflow:hidden}
.roi-bar-fill{height:100%;border-radius:6px;transition:width .3s cubic-bezier(.22,1,.36,1);width:0}
.roi-bar-fill.team{background:#8a8478}
.roi-bar-fill.zodiem{background:var(--accent-cta)}
.roi-bar-value{font-weight:700;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.roi-coverage{border-top:1px solid var(--line);padding-top:18px;margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.roi-coverage-row{display:flex;justify-content:space-between;font-size:13px;color:#555}
.roi-coverage-row strong{color:#111}
.roi-plan-note{font-size:12px;color:#707070;margin-bottom:16px;line-height:1.5}
.roi-formula{font-size:13px;color:#555;border-top:1px solid var(--line);padding-top:14px}
.roi-formula summary{cursor:pointer;font-weight:600;color:#333}
.roi-formula summary:focus-visible{outline:2px solid var(--accent-cta);outline-offset:2px}
.roi-formula p{margin:10px 0 0;line-height:1.6}
@media (max-width:860px){.roi-grid{grid-template-columns:1fr;gap:36px}.roi-bar-row{grid-template-columns:110px 1fr 70px}}

/* ===== Motion: "A live demo, in four beats" (index.html) =====
   Structure ported from docs/design-reference/Motion.dc.html (layout/
   timing only — rebuilt here with the real site's CSS tokens, real
   .feat-label/h2 patterns, a neutral (non-logo) lead-notification
   card, and "Illustrative" labeling throughout). Default (and
   prefers-reduced-motion: reduce) state is a single static frame —
   beat 4 — per the brief; all crossfade/pulse/bar/cursor animation
   lives under prefers-reduced-motion: no-preference only. */
.motion-section{padding:100px 0;background:#faf7f2;border-top:1px solid var(--line)}
.motion-walkthrough{max-width:980px;margin:0 auto}
.motion-stage{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid #00000014;
  background:
    radial-gradient(800px 560px at 85% 0%,#fde3d0 0%,rgba(253,227,208,0) 70%),
    radial-gradient(640px 480px at 0% 100%,#fbe9dc 0%,rgba(251,233,220,0) 70%),
    #fdf6ee;
}
.motion-beat{position:absolute;inset:0;display:none;align-items:center;gap:5%;padding:6% 6%}
.motion-beat.mb4{display:flex}
.motion-copy{flex:1;min-width:0}
.motion-art{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.mb2 .motion-art{flex-direction:column;align-items:flex-end;justify-content:center;gap:14px}
.motion-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:0.16em;color:#6b655f;margin-bottom:10px}
.motion-heading{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(19px,2.6vw,30px);line-height:1.15;letter-spacing:-0.01em;color:#1a1612}
.motion-sub{margin-top:10px;font-size:14px;color:#4d4843;line-height:1.5}
@media (max-width:700px){
  .motion-stage{aspect-ratio:auto;min-height:560px}
  .motion-beat{flex-direction:column;justify-content:flex-start;text-align:center;gap:14px;padding:28px 6%;overflow-y:auto}
  .motion-art{flex:0 0 auto}
  .mb2 .motion-art{align-items:center}
}

.motion-cta-pill{position:relative;padding:14px 24px;border-radius:999px;background:var(--accent-cta);color:#fff;font-weight:700;font-size:15px;box-shadow:0 20px 40px -18px rgba(180,40,40,0.7);white-space:nowrap}
.motion-ping{position:absolute;inset:0;border-radius:999px;border:3px solid var(--accent-cta)}

.motion-agent-card{position:relative;width:150px;height:128px;border-radius:18px;background:linear-gradient(150deg,#2a2018,#4a2c22);box-shadow:0 26px 44px -26px rgba(90,30,20,0.7);flex-shrink:0}
.motion-orb{position:absolute;left:50%;top:36%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbb59b,#ef6a63 60%,#c9453e)}
.motion-wv{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:3px}
.motion-wv i{display:block;width:3px;height:16px;border-radius:2px;background:#ef6a63;transform-origin:bottom}
.motion-agent-tag{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,0.55);color:#fff;font-size:10px;font-weight:600}
.motion-bubble{max-width:200px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 14px 28px -16px rgba(120,50,30,0.5),0 0 0 1px rgba(17,17,17,0.06);font-size:12.5px;line-height:1.4;color:#1a1612}

.motion-window{width:100%;max-width:340px;border-radius:14px;background:#fff;box-shadow:0 20px 40px -24px rgba(120,50,30,0.5),0 0 0 1px rgba(17,17,17,0.07);overflow:hidden;position:relative}
.motion-chrome{display:flex;gap:5px;padding:8px 10px;background:#eee7df}
.motion-chrome i{width:7px;height:7px;border-radius:50%;background:#d9cfc4;display:block}
.motion-window-body{padding:16px 18px}
.motion-window-title{font-family:'Newsreader',serif;font-size:15px;color:#1a1612;margin-bottom:12px}
.motion-bars{display:flex;align-items:flex-end;gap:7px;height:72px}
.motion-bars i{flex:1;border-radius:4px 4px 0 0;background:#f3c7b6;transform-origin:bottom;display:block}
.motion-bars i.hi{background:var(--accent)}
.motion-cursor{position:absolute;left:28%;top:42%;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.motion-cursor span{padding:3px 8px;border-radius:999px;background:#0c0a09;color:#fff;font-size:9.5px;font-weight:700}

.motion-lead-card{width:100%;max-width:280px;padding:18px 20px;border-radius:14px;background:#fff;box-shadow:0 20px 40px -24px rgba(120,50,30,0.5),0 0 0 1px rgba(17,17,17,0.07)}
.motion-lead-row{display:flex;align-items:center;gap:9px}
.motion-lead-icon{width:26px;height:26px;border-radius:8px;background:#f1ece3;color:var(--accent-cta);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.motion-lead-title{font-size:13px;font-weight:700;color:#1a1612}
.motion-lead-chip{margin-left:auto;padding:3px 9px;border-radius:999px;background:#e4f4ec;color:#1f6b47;font-size:10px;font-weight:700;white-space:nowrap}
.motion-lead-text{margin-top:10px;font-size:12.5px;line-height:1.5;color:#2b2724}
.motion-lead-note{margin-top:8px;font-size:11px;color:#6b655f}

.motion-dots{display:none;justify-content:center;align-items:center;gap:8px;margin-top:18px}
.md{width:8px;height:8px;border-radius:4px;background:#d9cfc4;display:block}
.motion-caption{text-align:center;font-size:12px;color:#666;margin-top:16px}
.hero-shot-caption{text-align:center;font-size:12px;color:#8a8a8a;margin-top:14px}

@media (prefers-reduced-motion: no-preference){
  .motion-beat{display:flex;opacity:0;animation-duration:16s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
  .mb1{animation-name:motionShow1}
  .mb2{animation-name:motionShow2}
  .mb3{animation-name:motionShow3}
  .mb4{animation-name:motionShow4}
  @keyframes motionShow1{0%{opacity:0;transform:translateY(8px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0}}
  @keyframes motionShow2{0%,25%{opacity:0;transform:translateY(8px)}28%,47%{opacity:1;transform:none}50%,100%{opacity:0}}
  @keyframes motionShow3{0%,50%{opacity:0;transform:translateY(8px)}53%,72%{opacity:1;transform:none}75%,100%{opacity:0}}
  @keyframes motionShow4{0%,75%{opacity:0;transform:translateY(8px)}78%,97%{opacity:1;transform:none}100%{opacity:0}}

  .motion-dots{display:flex}
  .md{animation-duration:16s;animation-iteration-count:infinite;transition:none}
  .md1{animation-name:motionDot1}.md2{animation-name:motionDot2}.md3{animation-name:motionDot3}.md4{animation-name:motionDot4}
  @keyframes motionDot1{0%,24%{background:#0c0a09;width:24px}25%,100%{background:#d9cfc4;width:8px}}
  @keyframes motionDot2{0%,24%{background:#d9cfc4;width:8px}25%,49%{background:#0c0a09;width:24px}50%,100%{background:#d9cfc4;width:8px}}
  @keyframes motionDot3{0%,49%{background:#d9cfc4;width:8px}50%,74%{background:#0c0a09;width:24px}75%,100%{background:#d9cfc4;width:8px}}
  @keyframes motionDot4{0%,74%{background:#d9cfc4;width:8px}75%,99%{background:#0c0a09;width:24px}100%{background:#d9cfc4;width:8px}}

  /* MOTION VOCABULARY: arrow-click (ping), agent-pulse, eq-bar, data-flow-ish grow, card-appear */
  .motion-ping{animation:motionPing 1.4s ease-out infinite}
  @keyframes motionPing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}
  .motion-orb{animation:motionPulseOrb 2s ease-in-out infinite}
  @keyframes motionPulseOrb{0%,100%{box-shadow:0 0 0 8px rgba(239,106,99,0.18),0 0 0 18px rgba(239,106,99,0.08)}50%{box-shadow:0 0 0 13px rgba(239,106,99,0.22),0 0 0 24px rgba(239,106,99,0.06)}}
  .motion-wv i{animation:motionEqBar 0.9s ease-in-out infinite}
  .motion-wv i:nth-child(2){animation-delay:.15s}
  .motion-wv i:nth-child(3){animation-delay:.3s}
  .motion-wv i:nth-child(4){animation-delay:.45s}
  .motion-wv i:nth-child(5){animation-delay:.6s}
  @keyframes motionEqBar{0%,100%{transform:scaleY(0.35)}50%{transform:scaleY(1)}}
  .motion-bars i{animation:motionGrow 4s ease-out infinite}
  @keyframes motionGrow{0%,10%{transform:scaleY(0.05)}60%,100%{transform:scaleY(1)}}
  .motion-cursor{animation:motionCursorMove 4s ease-in-out infinite}
  @keyframes motionCursorMove{0%{transform:translate(0,0)}50%,100%{transform:translate(50px,22px)}}
  .motion-lead-card{animation:motionCardAppear 4s ease-out infinite}
  @keyframes motionCardAppear{0%,20%{transform:translateX(20px);opacity:0}45%,100%{transform:none;opacity:1}}
}

/* ===== FAQ ===== */
.faq{padding:100px 0;background:#fafafa;border-top:1px solid var(--line)}
.faq h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(30px,3.6vw,52px);text-align:center;line-height:1.1;letter-spacing:-0.02em;margin-bottom:60px}
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-q{padding:22px 26px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px;user-select:none}
.faq-q .plus{
  width:24px;height:24px;border-radius:50%;background:#f0f0f0;display:grid;place-items:center;
  font-weight:300;font-size:18px;color:#666;transition:transform .3s ease, background .3s ease;
}
.faq-item.open .plus{background:var(--accent-cta);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;padding:0 26px;color:#555;line-height:1.6;font-size:14.5px;transition:max-height .35s ease, padding .35s ease}
.faq-item.open .faq-a{max-height:420px;padding:0 26px 22px}
/* /faq.html — sticky category sidebar + card list */
.faq-page{display:grid;grid-template-columns:220px 1fr;gap:50px;align-items:start;margin-top:10px}
.faq-sidebar{position:sticky;top:96px}
.faq-sidebar nav{display:flex;flex-direction:column;gap:2px}
.prose-page .faq-sidebar-link{display:block;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;color:#555;text-decoration:none;border-left:2px solid transparent;transition:background .15s ease,color .15s ease}
.prose-page .faq-sidebar-link:hover{background:#f5f2eb;color:#111}
.prose-page .faq-sidebar-link.active{color:var(--accent-cta-hover);border-left-color:var(--accent-cta);background:#fdf4ef}
.faq-main h2.faq-cat-label{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#6b655f;margin:52px 0 16px}
.faq-main section:first-child .faq-cat-label{margin-top:0}
.faq-main .faq-list{max-width:none;margin:0}
@media (max-width:860px){
  .faq-page{grid-template-columns:1fr}
  .faq-sidebar{position:static}
  .faq-sidebar nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .faq-sidebar-link{white-space:nowrap}
}

/* /sdk.html — reuses .faq-page/.faq-sidebar for its TOC + sticky nav */
.sdk-main{max-width:720px}
.sdk-main p,.sdk-main ul{font-size:15.5px;line-height:1.75;color:#2a2a2a;margin-bottom:16px}
.sdk-main ul{padding-left:22px}
.sdk-main li{margin-bottom:6px}
.sdk-main code{background:#f1ece3;color:#1a1a1a;border-radius:4px;padding:1px 6px;font-size:13.5px;font-family:ui-monospace,'SF Mono',Consolas,'Liberation Mono',Menlo,monospace}
.sdk-code{
  background:#0c0a09;color:#f1ece3;border-radius:10px;padding:18px 20px;overflow-x:auto;
  font-family:ui-monospace,'SF Mono',Consolas,'Liberation Mono',Menlo,monospace;font-size:13px;line-height:1.65;
  margin:4px 0 20px;white-space:pre;
}
.sdk-table{width:100%;border-collapse:collapse;margin:4px 0 24px;font-size:13.5px}
.sdk-table th,.sdk-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.sdk-table th{font-weight:700;color:#555;font-size:12px;letter-spacing:0.04em;text-transform:uppercase}
.sdk-table code{background:#f1ece3;color:#1a1a1a;border-radius:4px;padding:1px 6px;font-size:12.5px;font-family:ui-monospace,'SF Mono',Consolas,'Liberation Mono',Menlo,monospace}
@media (max-width:600px){.sdk-table{display:block;overflow-x:auto}}

/* "Ask AI about Zodiem" row — injected by main.js before every real
   page's <footer> (see initAskAiRow()) */
.ask-ai-row{padding:56px 0;background:#faf7f2;border-top:1px solid var(--line);text-align:center}
.ask-ai-heading{font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#6b655f;margin-bottom:22px}
.ask-ai-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.ask-ai-btn{
  width:48px;height:48px;border-radius:50%;border:1px solid #00000014;background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.ask-ai-btn img{width:20px;height:20px;display:block}
.ask-ai-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(12,10,9,0.3);border-color:#0c0a09}
.ask-ai-btn:active{transform:translateY(-1px) scale(.98)}
.ask-ai-btn:focus-visible{outline:2px solid var(--accent-cta);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ask-ai-btn{transition:none}.ask-ai-btn:hover{transform:none}}
.ask-ai-note{margin-top:18px;font-size:11px;color:#666}
.ask-ai-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);
  background:#0c0a09;color:#fff;padding:11px 20px;border-radius:999px;font-size:13px;font-weight:600;
  z-index:2000;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  max-width:calc(100vw - 40px);text-align:center;
}
.ask-ai-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Final CTA ===== */
.final-cta{
  padding:120px 0;text-align:center;color:#fff;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, #ff6467 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 30% 30%, #ffb27a 0%, transparent 60%),
    linear-gradient(135deg,#1a1a1a 0%, #2a1a1a 100%);
}
.final-cta h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(36px,5vw,72px);line-height:1.05;letter-spacing:-0.02em;margin-bottom:24px}
.final-cta p{font-size:18px;color:#ddd;max-width:560px;margin:0 auto 40px}

/* ===== Footer ===== */
footer{padding:60px 0 30px;background:#0a0a0a;color:#999;font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand .logo{color:#fff;margin-bottom:16px}
.foot-brand p{color:#888;max-width:340px;line-height:1.6}
.foot-col h3{color:#fff;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid #222;padding-top:24px;display:flex;justify-content:space-between;font-size:13px;color:#999;flex-wrap:wrap;gap:10px}

/* ===== Dashboard ===== */
.dash-shell{
  display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:#fafafa;
}
.dash-side{
  background:#0a0a0a;color:#cfcfcf;padding:24px 18px;
  display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.dash-side .logo{color:#fff;margin-bottom:24px;padding:0 8px}
.dash-side .nav-section{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#666;margin:14px 8px 6px;font-weight:600}
.dash-nav{display:flex;flex-direction:column;gap:2px;position:relative}
.dash-nav a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;
  font-size:14px;color:#c2c2c2;transition:background .15s ease,color .15s ease;
}
.dash-nav a:hover{background:#161616;color:#fff}
.dash-nav a.active{background:#1a1a1a;color:#fff}
.dash-nav a.active::before{
  content:'';width:3px;height:18px;background:var(--accent);border-radius:2px;margin-right:-12px;margin-left:-16px;
}
.dash-nav svg{width:18px;height:18px;flex-shrink:0}
.dash-user{
  margin-top:auto;padding:14px;border-top:1px solid #1a1a1a;display:flex;align-items:center;gap:10px;
}
.dash-user .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ff6467,#ffb27a);display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}
.dash-user .info strong{display:block;color:#fff;font-size:13px}
.dash-user .info small{display:block;font-size:11px;color:#888}

/* FINAL DASHBOARD POLISH PASS, item D13 (Shell): shared popover style
   for the new workspace menu and user menu. */
.dropdown-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:#161616;border:1px solid #262626;border-radius:8px;padding:6px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5);
}
.dropdown-menu.open{display:flex;flex-direction:column;gap:1px}
.dropdown-menu a{display:block;padding:8px 10px;border-radius:6px;font-size:13px;color:#e8e8e8;text-decoration:none}
.dropdown-menu a:hover{background:#242424}
/* COPY + LAYOUT FIX PASS, item 5: Agents row "..." menu — a single
   danger-styled Delete entry, light-themed (the dark .dropdown-menu
   above is for the sidebar's dark header area, not a white card). */
.row-menu-danger-item{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:6px;font-size:12px;font-weight:600;color:#b42318;background:none;border:none;cursor:pointer}
.row-menu-danger-item:hover{background:#fdeeec}
.dash-main{padding:24px 32px 60px;overflow-x:hidden}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.dash-header h1{font-family:'Newsreader',serif;font-weight:500;font-size:30px;letter-spacing:-0.01em}
.dash-header h1 small{display:block;font-size:13px;color:#707070;font-family:'Inter',sans-serif;font-weight:400;margin-top:2px;letter-spacing:0}
.dash-actions{display:flex;gap:10px;align-items:center}
.dash-actions .search{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;font-size:13px;width:240px;font-family:inherit;
}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.kpi .label{font-size:12px;color:#707070;font-weight:500;letter-spacing:0.04em;margin-bottom:8px}
.kpi .val{font-family:'Newsreader',serif;font-weight:600;font-size:30px;letter-spacing:-0.01em}
/* CROSS-TENANT SWEEP follow-up, item (a): a real, measured CLS source —
   the period-over-period delta text used to sit inline next to the KPI
   number and only wrap onto its own line once real data arrived,
   growing the card's height after first paint (confirmed via a real
   Lighthouse run: CLS 0.484, traced to this exact section). Reserving
   a fixed-height line for it up front — present and empty before data
   loads, filled after — means its arrival changes NO element's height. */
.kpi-delta-line{min-height:15px;font-size:12px;margin-top:2px}
.kpi .delta{font-size:12px;margin-top:6px;font-weight:600;color:var(--success)}
.kpi .delta.down{color:#ef4444}
.kpi .spark{height:36px;margin-top:10px}
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.card h3{font-size:16px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}
.card h3 .small{font-size:12px;color:#707070;font-weight:500}
.card .sub-text{font-size:12px;color:#707070;margin-bottom:14px}
/* Chart */
.chart-svg{width:100%;height:240px;display:block}
.chart-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:#666;flex-wrap:wrap}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend .sw{width:10px;height:10px;border-radius:2px;background:var(--accent)}
.chart-legend .sw.sec{background:#ffb27a}
/* Activity */
.activity{display:flex;flex-direction:column;gap:14px;max-height:300px;overflow-y:auto;padding-right:6px}
.activity::-webkit-scrollbar{width:6px}
.activity::-webkit-scrollbar-thumb{background:#e5e5e5;border-radius:3px}
.act-row{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;transition:background .15s ease}
.act-row:hover{background:#fafafa}
.act-dot{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffd6cf,#ffb27a);display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px;flex-shrink:0}
.act-body{flex:1;font-size:13px;line-height:1.5}
.act-body strong{display:block;color:#111}
.act-body small{color:#707070;font-size:11px}
.act-tag{padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;background:#ffeaea;color:#b94a2f}
.act-tag.hot{background:#fff4e6;color:#b94a2f}
.act-tag.won{background:#d4f4e2;color:#0a7e44}
/* Sessions table */
.tbl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.tbl-filter{display:flex;gap:8px}
.tbl-filter button{
  background:transparent;border:1px solid var(--line);padding:6px 12px;border-radius:8px;
  font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;color:#666;
}
.tbl-filter button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:11px;text-align:left;color:#707070;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#fafafa}
.tbl .pill{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:0.04em}
.tbl .pill.live{background:#ffeaea;color:#b94a2f}
.tbl .pill.done{background:#e0f5ec;color:#0a7e44}
.tbl .pill.queued{background:#f5f5f5;color:#666}
.cell-person{display:flex;align-items:center;gap:8px}
.cell-person .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ffd6cf,#ffb27a);display:grid;place-items:center;color:#fff;font-weight:600;font-size:11px}
/* Video panel */
.video-panel{position:relative;border-radius:12px;overflow:hidden;background:#000}
.video-panel video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.video-overlay{
  position:absolute;top:14px;left:14px;display:flex;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:0.04em;
}
.video-overlay .rec{
  background:var(--accent-cta);color:#fff;padding:4px 10px;border-radius:6px;
  display:inline-flex;align-items:center;gap:6px;
}
.video-overlay .rec .live-dot{
  width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.video-overlay .ts{background:rgba(0,0,0,0.6);color:#fff;padding:4px 10px;border-radius:6px;font-variant-numeric:tabular-nums}
.video-controls{
  display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;
  border-top:1px solid var(--line);
}
.video-controls button{
  background:transparent;border:0;cursor:pointer;padding:6px;display:grid;place-items:center;border-radius:6px;
}
.video-controls button:hover{background:#f5f5f5}
.video-progress{
  flex:1;height:4px;background:#ececec;border-radius:2px;position:relative;cursor:pointer;
}
.video-progress .fill{position:absolute;left:0;top:0;bottom:0;width:35%;background:var(--accent);border-radius:2px;transition:width .15s ease}
.video-progress .dot{
  position:absolute;left:35%;top:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,100,103,0.2);
}
.video-time{font-size:12px;color:#888;font-variant-numeric:tabular-nums;font-weight:500}
.transcript{
  background:#fff;padding:16px;border-radius:12px;border:1px solid var(--line);margin-top:14px;
}
.transcript h4{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:#707070;margin-bottom:10px;font-weight:600}
.transcript-list{display:flex;flex-direction:column;gap:8px;max-height:160px;overflow-y:auto;font-size:13px}
.transcript-row{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:baseline}
.transcript-row .who{font-size:11px;font-weight:600;color:var(--accent-cta);text-align:right}
.transcript-row .who.bot{color:#666}
.transcript-row .msg{color:#222;line-height:1.5}
.transcript-row .msg em{font-style:normal;background:#ffeaea;padding:0 4px;border-radius:3px;color:#b94a2f}
/* About / Blog */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:80px 0}
/* Real product screenshots, not an abstract gradient watermark —
   two real dashboard views (Analytics, Sessions) collaged with a
   faint low-opacity mesh gradient behind them, per the "real over
   illustrative" rule. */
.about-collage{position:relative;aspect-ratio:4/3}
.about-collage::before{
  content:'';position:absolute;inset:-12%;z-index:0;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,178,122,0.35),transparent 60%),
    radial-gradient(circle at 76% 82%,rgba(255,100,103,0.22),transparent 55%);
}
.collage-card{
  position:absolute;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid rgba(0,0,0,0.08);box-shadow:0 30px 60px -30px rgba(20,10,5,0.3);
}
.collage-card img{display:block;width:100%;height:100%;object-fit:cover}
.collage-back{top:0;left:4%;width:80%;height:64%;z-index:1}
.collage-front{bottom:0;right:0;width:56%;height:46%;z-index:2}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:40px 0 80px}
.value-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:18px}
.value-card .num{font-family:'Newsreader',serif;font-weight:600;font-size:48px;color:var(--accent-cta);letter-spacing:-0.02em}
.value-card h3{margin:8px 0;font-size:18px;font-weight:600}
.value-card p{color:#666;font-size:14px;line-height:1.6}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,0.15)}
/* Consistent abstract header mark (icon + category label) instead of a
   gradient blob with a number — see thumbMark() in main.js. */
.blog-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;background:#f5f2eb;
  background-image:linear-gradient(90deg,rgba(12,10,9,0.05) 1px,transparent 1px),linear-gradient(180deg,rgba(12,10,9,0.05) 1px,transparent 1px);
  background-size:22px 22px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.blog-thumb.b{background-color:#f1ece3}
.blog-thumb.c{background-color:#faf7f2}
.blog-thumb .thumb-icon{position:absolute;top:16px;right:16px;width:30px;height:30px;color:var(--accent-cta);opacity:0.85}
.blog-thumb .thumb-icon svg{width:100%;height:100%}
.blog-thumb .thumb-cat{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#6b655f}
.blog-thumb.post-thumb{aspect-ratio:3/1;border-radius:12px;border:1px solid var(--line);margin-bottom:28px}
.blog-thumb.post-thumb .thumb-icon{width:40px;height:40px;top:20px;right:20px}
.blog-thumb.post-thumb .thumb-cat{font-size:12px}
/* DESIGN QUALITY PASS, item 6: the real-title cover content that fills
   what used to be an empty paper card — see thumbMark() in main.js. */
.thumb-cover-title{font-family:'Newsreader',serif;font-weight:600;font-size:19px;line-height:1.28;color:#1a1714;margin-bottom:8px;letter-spacing:-0.01em;max-width:92%}
.blog-thumb.post-thumb .thumb-cover-title{font-size:36px;margin-bottom:14px;max-width:80%}
.thumb-vs{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.thumb-lane{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:600;color:#2a2622;box-shadow:0 2px 6px -3px rgba(12,10,9,0.15)}
.thumb-vs-x{font-family:'Newsreader',serif;font-style:italic;font-size:12.5px;color:#b9382c;flex-shrink:0}
.blog-thumb.post-thumb .thumb-lane{font-size:17px;padding:11px 18px;border-radius:12px}
.blog-thumb.post-thumb .thumb-vs-x{font-size:17px}
@media (max-width:480px){
  /* A real long title at 36px routinely overflowed the fixed 3:1 banner
     and got clipped off the TOP (bottom-anchored content + overflow:
     hidden) — shrink the text and let the banner grow taller instead
     of clipping. */
  .blog-thumb.post-thumb{aspect-ratio:auto;min-height:150px;padding:14px}
  .blog-thumb.post-thumb .thumb-cover-title{font-size:22px;max-width:100%}
  .blog-thumb.post-thumb .thumb-lane{font-size:13px;padding:7px 11px}
  .blog-thumb.post-thumb .thumb-vs-x{font-size:13px}
  .blog-thumb.post-thumb .thumb-icon{width:26px;height:26px;top:12px;right:12px}
}
.blog-body{padding:22px 24px}
.blog-body .cat{font-size:11px;color:var(--accent-cta);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.blog-body h2{margin:8px 0 10px;font-size:20px;font-weight:600;line-height:1.3}
.blog-body p{color:#666;font-size:14px;line-height:1.6;margin-bottom:12px}
.blog-body .meta{font-size:12px;color:#666}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-card.skeleton{cursor:default}
.blog-card.skeleton:hover{transform:none;box-shadow:none}
.blog-card.skeleton .blog-thumb{background-image:none}
.sk-bar{height:12px;border-radius:4px;background:#ece7de;animation:skPulse 1.4s ease-in-out infinite}
@keyframes skPulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Login */
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-side{
  background:linear-gradient(135deg,#ffb27a 0%, #ff6467 60%, #b94a2f 100%);
  color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.auth-side::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 80%, rgba(255,255,255,0.2) 0%, transparent 50%)}
.auth-side .logo-mark{box-shadow:0 8px 30px -8px rgba(0,0,0,0.4)}
.auth-side h2{font-family:'Newsreader',serif;font-weight:500;font-size:48px;line-height:1.1;letter-spacing:-0.02em;position:relative;z-index:1}
.auth-side p{font-size:16px;color:rgba(255,255,255,0.9);max-width:380px;margin-top:18px;position:relative;z-index:1}
.auth-side .quote{margin-top:auto;position:relative;z-index:1;font-size:15px}
.auth-side .quote strong{display:block;font-family:'Newsreader',serif;font-size:20px;margin-bottom:4px;font-weight:600}
.auth-form-side{padding:60px;display:flex;flex-direction:column;justify-content:center}
.auth-form{max-width:380px;width:100%;margin:0 auto}
.auth-form h1{font-family:'Newsreader',serif;font-weight:500;font-size:36px;letter-spacing:-0.02em;margin-bottom:8px}
.auth-form .lead{color:#666;margin-bottom:30px;font-size:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:#333}
.field input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;font-family:inherit;background:#fafafa;transition:border-color .2s ease, background .2s ease;
}
.field input:focus{outline:0;border-color:var(--accent);background:#fff}
.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:13px;font-family:'Inter',monospace;background:#fafafa;transition:border-color .2s ease, background .2s ease;
  resize:vertical;line-height:1.6;
}
.field textarea:focus{outline:0;border-color:var(--accent);background:#fff}
.field .hint{font-size:12px;color:#888;margin-top:4px}
.auth-foot{font-size:13px;color:#666;text-align:center;margin-top:24px}
.auth-foot a{color:var(--accent-cta);font-weight:600}

/* ===== Dashboard tab views ===== */
.dash-view{display:none}
.dash-view.active{display:block}
.dash-nav a{cursor:pointer}
.save-bar{display:flex;gap:10px;align-items:center;margin-top:18px}
/* FINAL DASHBOARD POLISH PASS, item C7: keeps Save draft reachable
   while scrolling the Prompt tab's many fields, instead of needing to
   scroll all the way back down. */
.save-bar-sticky{position:sticky;bottom:0;background:#fff;padding:12px 0;border-top:1px solid var(--line);margin-top:18px;z-index:5}
.save-status{font-size:13px;color:#0a7e44}
.integration-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-2)}
.integration-row:last-child{border-bottom:none}
.integration-row .name{font-weight:600;font-size:15px;display:flex;align-items:center;gap:10px}
.status-pill{font-size:11px;font-weight:700;letter-spacing:0.04em;padding:3px 10px;border-radius:999px;background:#f5f5f5;color:#888}
.divider{display:flex;align-items:center;gap:14px;color:#999;font-size:12px;margin:24px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
  .crm-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;
    flex-direction:column;padding:20px;gap:18px;border-bottom:1px solid var(--line);align-items:flex-start;
  }
  .nav-links.open{display:flex}
  .hamburger{display:block}
  .dash-shell{grid-template-columns:1fr}
  .dash-side{position:fixed;left:-280px;width:260px;height:100vh;z-index:60;transition:left .3s ease}
  .dash-side.open{left:0;box-shadow:30px 0 60px -10px rgba(0,0,0,0.4)}
  .dash-side-close{display:block;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;padding:4px 10px}
  .feat-grid,.feat-grid.reverse{grid-template-columns:1fr;gap:40px}
  .feat-grid.reverse .feat-text{order:1}
  .feat-grid.reverse .feat-visual{order:2}
  .price-grid{grid-template-columns:1fr 1fr;gap:18px}
  .trust-row{grid-template-columns:repeat(3,1fr);gap:20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr;gap:30px}
  .values-grid,.blog-grid{grid-template-columns:1fr 1fr}
  .auth-shell{grid-template-columns:1fr}
  .auth-side{display:none}
}
@media (max-width:560px){
  .container,.dash-main{padding-left:20px;padding-right:20px}
  .dash-main{padding-top:18px}
  .dash-header h1{font-size:24px}
  .kpi-row{grid-template-columns:1fr 1fr;gap:10px}
  .hero,.pitch,.features,.pricing,.faq,.final-cta{padding:60px 0}
  .crm-grid{grid-template-columns:1fr}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .values-grid,.blog-grid{grid-template-columns:1fr}
  .sidemenu-btn{
    display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
    padding:8px 12px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;margin-bottom:14px;
  }
}
.sidemenu-btn{display:none}

/* ===== Features page extras ===== */
  .feat-lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:120px}
  .feat-lg-grid.flip>div:first-child{order:2}
  .feat-lg-image{
    aspect-ratio:5/4;border-radius:var(--radius-lg);overflow:hidden;
    background:linear-gradient(135deg,#fff4e6,#ffb27a);position:relative;
    display:grid;place-items:center;
  }
  .feat-lg-image.inner{
    background:#fff;border:1px solid var(--line);
    box-shadow:var(--shadow-sm);padding:30px;
  }
  .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
  .spec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
  .spec .label{font-size:11px;letter-spacing:0.06em;color:#707070;text-transform:uppercase;margin-bottom:6px;font-weight:600}
  .spec .big{font-family:'Newsreader',serif;font-weight:600;font-size:30px;letter-spacing:-0.01em}
  .callout{padding:80px 0;background:
    radial-gradient(ellipse 60% 80% at 50% 100%, #ffd2a8 0%, transparent 60%),
    linear-gradient(180deg,#fff 0%, #fff5ec 100%);text-align:center;border-radius:30px;
  }
  .checks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px;text-align:left}
  .check{display:flex;gap:10px;font-size:14px}
  .check::before{content:'✓';color:var(--accent-cta);font-weight:700;flex-shrink:0}
  @media (max-width:980px){
    .feat-lg-grid{grid-template-columns:1fr;gap:40px}
    .feat-lg-grid.flip>div:first-child{order:0}
    .specs{grid-template-columns:1fr 1fr}
    .checks{grid-template-columns:1fr}
  }

/* ===== Pricing page extras ===== */
  .toggle{display:inline-flex;background:#f0f0f0;border-radius:999px;padding:4px;margin-bottom:30px;gap:4px}
  .toggle button{background:transparent;border:0;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:#666}
  .toggle button.active{background:#fff;color:#222;box-shadow:0 2px 6px rgba(0,0,0,.08)}
  .compare{background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:80px;overflow:hidden}
  .compare .table-scroll-x{overflow-x:auto}
  .compare table{width:100%;min-width:700px;border-collapse:collapse;font-size:14px}
  .compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line-2)}
  .compare th{background:#fafafa;font-weight:600;font-size:13px}
  .compare th:not(:first-child){text-align:center}
  .compare td:not(:first-child){text-align:center;color:#666}
  .compare tr:last-child td{border-bottom:0}
  .compare tr.section td{background:#fafafa;font-weight:600;color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:0.06em}
  /* Dedicated classes (not the shared .check used by features.html's
     security list) — that collision used to inject a second, red
     ::before checkmark behind the real green one here. See
     DECISIONS.md, DESIGN QUALITY PASS item 1. */
  .compare .cmp-cell{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .compare .cmp-check{display:inline-flex;flex-shrink:0;width:16px;height:16px;color:var(--success)}
  .compare .cmp-check svg{width:100%;height:100%;display:block}
  .compare .cmp-dash{color:#767676;font-size:14px}
  .compare .cmp-testing-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:#fff4e6;color:#8a4a12;font-size:12px;font-weight:600}
  .compare .cmp-footnote{padding:14px 18px;font-size:12px;color:#707070;line-height:1.5;border-top:1px solid var(--line)}
  .faq2{padding:80px 0}

/* ===== Compare / blog-post prose pages (new, not from template) ===== */
.prose-page{padding:80px 0 100px}
.prose-page h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(32px,4vw,48px);letter-spacing:-0.02em;margin-bottom:8px}
.prose-page .subtitle{color:#666;font-size:16px;margin-bottom:36px}
.prose-page p{font-size:16px;line-height:1.75;color:#2a2a2a;margin-bottom:18px}
.prose-page h2{font-family:'Newsreader',serif;font-weight:500;font-size:26px;margin:40px 0 14px;letter-spacing:-0.01em}
.prose-page ul,.prose-page ol{font-size:16px;line-height:1.75;color:#2a2a2a;margin-bottom:18px}
.prose-page a{color:var(--accent-cta);font-weight:600}
.byline{color:#666;font-size:13px;margin-bottom:8px}
.roadmap-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:#b94a2f;background:#fff4e6;border:1px solid #ffd2a8;border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:middle}
.source-note{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:#666;font-size:12px;line-height:1.8}
.source-note a{color:#666}
.screenshot-panel{border-radius:12px;overflow:hidden;background:#000;position:relative;aspect-ratio:16/9;width:100%}
.screenshot-panel img{width:100%;height:100%;display:block;object-fit:cover}
.screenshot-panel .tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:0.04em;background:rgba(0,0,0,0.55);color:#fff;padding:4px 10px;border-radius:6px}
.screenshot-panel .tag.live{background:var(--accent-cta)}
/* FINAL DASHBOARD POLISH PASS, item A1: the empty state used to render
   inside .screenshot-panel's always-black video background, giving a
   plain grey-on-black box that read as broken rather than "nothing to
   show yet." A real empty state gets its own light background. */
.screenshot-panel.is-empty{background:#f4f4f5}
.screenshot-panel .empty{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8a8a93;font-size:13px;text-align:center;padding:0 24px}
.screenshot-panel .empty .empty-icon{font-size:22px;opacity:0.6}

/* ===== Testimonials (used on homepage + customers page) ===== */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.testimonial-card{background:#fafafa;border:1px dashed var(--line);border-radius:14px;padding:24px;color:#999;font-size:14px;font-style:italic}
.testimonial-card .attribution{margin-top:14px;font-style:normal;font-size:12px;color:#999}

/* ===== Agent workspace / product-management dashboard views ===== */
.agent-badge{font-size:11px;font-weight:700;letter-spacing:0.04em;padding:3px 10px;border-radius:999px;text-transform:uppercase}
.agent-badge.published{background:#d4f4e2;color:#0a7e44}
.agent-badge.draft{background:#fff4e6;color:#b94a2f}
.agent-badge.never{background:#f5f5f5;color:#707070}
.workspace-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.workspace-tabs button{background:none;border:none;padding:10px 16px;font-size:14px;font-weight:600;color:#707070;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
.workspace-tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.workspace-subview{display:none}
.workspace-subview.active{display:block}
.flow-step{display:flex;gap:8px;align-items:flex-start;background:#fafafa;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px}
.flow-step .step-fields{flex:1;display:flex;flex-direction:column;gap:6px}
.flow-step input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit}
.flow-step .step-actions{display:flex;flex-direction:column;gap:4px}
.flow-step .step-actions button{background:#fff;border:1px solid var(--line);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:12px}
.matrix-table{width:100%;border-collapse:collapse;font-size:13px}
.matrix-table th,.matrix-table td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:center}
.matrix-table th:first-child,.matrix-table td:first-child{text-align:left}
.matrix-cell{display:inline-block;width:36px;height:24px;line-height:24px;border-radius:6px;font-weight:700;font-size:12px;transition:transform .1s ease,filter .1s ease}
.matrix-cell[onclick]:hover{transform:scale(1.08);filter:brightness(.95)}
.matrix-cell.score-1{background:#d4f4e2;color:#0a7e44}
.matrix-cell.score-mid{background:#fff4e6;color:#b94a2f}
.matrix-cell.score-0{background:#ffeaea;color:#b94a2f}
.upload-zone{border:2px dashed var(--line);border-radius:14px;padding:32px;text-align:center;color:#707070;font-size:14px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:#fff4e6}
.agent-list-row{display:flex;justify-content:space-between;align-items:center;padding:16px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s ease}
.agent-list-row:hover{border-color:var(--accent)}
.select-input{padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff}
.variant-card{background:#fafafa;border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:10px}
.conv-bar{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-top:6px}
.conv-bar .fill{height:100%;background:var(--accent)}

/* User Flow diagram — real rows computed from Audiences/Routing/Agents/AB tests */
.flow-row{display:grid;grid-template-columns:1fr 40px 1.4fr;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.flow-row.flow-header{color:#888;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--line);padding-bottom:8px}
.flow-entry{font-size:13px}
.flow-arrow{text-align:center;color:var(--accent-cta);font-size:18px}
.flow-destinations{display:flex;flex-wrap:wrap;gap:10px}
.flow-dest{background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:8px 12px}

/* Persistent site-wide "ask the agent" bar — see web/js/ask-bar.js and
   DECISIONS.md #28. Our own coral/Newsreader look, not a copy of any
   competitor's visual design — only the "always visible, not just a
   CTA" idea is borrowed. */
/* DESIGN QUALITY PASS, bug 3: shrunk to a genuinely compact pill
   (was effectively a 56px-tall bar) and now collapses out of the way
   on scroll-down (see ask-bar.js's real scroll-direction listener),
   reappearing on scroll-up or once the user stops near the top — so
   it can no longer sit permanently over table rows, headings, or
   cards further down a page (confirmed by design-qa screenshots on
   pricing.html, where the old always-visible bar covered 2 of 4 plan
   cards' own CTA buttons). Shares the real --dur-slow/--ease-standard
   tokens already defined below for the dashboard's own motion. */
.ask-bar{position:fixed;left:0;right:0;bottom:16px;z-index:500;display:flex;justify-content:center;padding:0 20px;pointer-events:none;transition:transform 250ms cubic-bezier(.4,0,.2,1),opacity 200ms cubic-bezier(.4,0,.2,1)}
.ask-bar.ask-bar-hidden{transform:translateY(calc(100% + 28px));opacity:0}
.ask-bar-inner{pointer-events:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,0.2);padding:6px 6px 6px 12px;max-width:480px;width:100%}
.ask-bar-avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-family:'Newsreader',serif;font-weight:600;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.ask-bar-inner input{flex:1;min-width:0;border:none;outline:0;font-size:13.5px;font-family:inherit;background:transparent}
.ask-bar-send{width:28px;height:28px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background 150ms cubic-bezier(.4,0,.2,1),transform 150ms cubic-bezier(.4,0,.2,1)}
.ask-bar-send:hover{background:var(--accent-hover)}
.ask-bar-send:active{transform:scale(.96)}
.ask-bar-cta{border:none;background:var(--ink);color:#fff;font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background 150ms cubic-bezier(.4,0,.2,1),transform 150ms cubic-bezier(.4,0,.2,1)}
.ask-bar-cta:hover{background:#000}
.ask-bar-cta:active{transform:scale(.98)}
@media (max-width:640px){
  .price-grid{grid-template-columns:1fr}
  .ask-bar-cta{display:none} /* keep the bar usable on small screens — the send button + Enter key still start a demo */
  /* SHIP-READY PASS, Phase 7: a real Lighthouse-confirmed overlap — the
     ask bar is full-width at the same bottom:20px as the floating
     "Book a demo" button (js/booking-widget.js), so on a narrow
     viewport the ask bar's own tap area extended under the button and
     partially covered it. Reserving extra right padding here keeps the
     ask bar's real content clear of the button's tap target instead of
     overlapping it. */
  .ask-bar{padding:0 90px 0 20px}
}

/* ============================================================
   POLISH PHASE — motion/transitions only. No color, layout, font, or
   theme values changed anywhere in this block or by it. See
   DECISIONS.md. Durations kept short (150-250ms) per the brief; the KPI
   count-up (in main.js) is the one deliberately-longer exception
   (~500ms), matching the phase's own explicit spec for that pattern.
   ============================================================ */
:root{
  --dur-fast:150ms;
  --dur-med:200ms;
  --dur-slow:250ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
}

/* Respect prefers-reduced-motion — a blanket override is the simplest,
   most robust way to honor it: every transition/animation collapses to
   effectively-instant, and smooth scrolling is disabled. Nothing else
   needs its own reduced-motion branch. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* DESIGN QUALITY PASS, item 10: one interaction spec, applied as a
   catch-all so it reaches every control that didn't already define its
   own (more specific — still wins the cascade) focus-visible rule.
   Real gap this closed: .field input/textarea set outline:0 with
   nothing visible in its place, and neither .btn-primary nor
   .btn-outline — used on every CTA and form submit sitewide — had any
   focus state at all. */
:focus-visible{outline:2px solid var(--accent-cta);outline-offset:2px}
.btn-primary:focus-visible,.btn-outline:focus-visible{outline:2px solid var(--accent-cta);outline-offset:3px}
.field input:focus-visible,.field textarea:focus-visible,.select-input:focus-visible{
  outline:2px solid var(--accent-cta);outline-offset:1px;border-color:var(--accent)
}
/* Links inside real article/body copy (blog posts, compare pages) had
   color + bold weight only, with zero hover feedback — an animated
   underline, not just a static one. */
.prose-page a{text-decoration-line:underline;text-decoration-color:transparent;transition:text-decoration-color var(--dur-fast) var(--ease-standard)}
.prose-page a:hover{text-decoration-color:currentColor}

/* ---- Dashboard: sliding sidebar active-indicator (see web/js/dashboard.js updateNavIndicator) ---- */
.nav-indicator{
  position:absolute;left:0;width:3px;border-radius:2px;background:var(--accent);
  opacity:0;transform:translateY(0);height:0;
  transition:transform var(--dur-med) var(--ease-standard), height var(--dur-med) var(--ease-standard), opacity var(--dur-fast) linear;
  pointer-events:none;
}
.nav-indicator.visible{opacity:1}
/* The old per-item static bar is replaced by the single sliding indicator above. */
.dash-nav a.active::before{display:none}

/* ---- Dashboard: section content fade+slide on switch ---- */
.dash-view{display:none}
.dash-view.active{display:block}
.dash-view.transitioning-out{display:block;animation:viewFadeOut var(--dur-fast) var(--ease-standard) forwards}
.dash-view.transitioning-in{display:block;animation:viewFadeIn var(--dur-slow) var(--ease-standard) both}
@keyframes viewFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---- Dashboard: modal fade+scale (View text, etc.) ---- */
.modal-overlay{
  opacity:0;visibility:hidden;transition:opacity var(--dur-med) var(--ease-standard), visibility 0s linear var(--dur-med);
}
.modal-overlay.modal-open{
  opacity:1;visibility:visible;transition:opacity var(--dur-med) var(--ease-standard);
}
.modal-overlay .modal-card{
  transform:scale(.96) translateY(6px);transition:transform var(--dur-med) var(--ease-standard);
}
.modal-overlay.modal-open .modal-card{transform:scale(1) translateY(0)}

/* ---- Dashboard: skeleton loading placeholders ---- */
.skeleton-row{display:flex;flex-direction:column;gap:8px;padding:12px 0}
.skeleton-block{
  height:14px;border-radius:6px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%;animation:skeletonShimmer 1.3s ease infinite;
}
@keyframes skeletonShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skeleton-pulse{animation:skeletonPulse 1.1s ease infinite}
@keyframes skeletonPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---- Dashboard: stagger-fade-in for list items ---- */
.stagger-item{animation:staggerIn var(--dur-slow) var(--ease-standard) both}
@keyframes staggerIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ---- Dashboard: toast/save-status slide+fade ---- */
.save-status{
  display:inline-flex!important;opacity:0;transform:translateX(-4px);
  transition:opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard);
  pointer-events:none;
}
.save-status.toast-visible{opacity:1;transform:translateX(0)}

/* ---- Dashboard: inline button-loading spinner ---- */
.btn-spinner{
  display:inline-block;width:13px;height:13px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:btnSpin .6s linear infinite;margin-right:6px;vertical-align:-2px;
}
.btn-outline .btn-spinner,.price-btn.outline .btn-spinner{border:2px solid rgba(0,0,0,.25);border-top-color:var(--ink)}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ---- Marketing site: scroll-reveal (see web/js/main.js) ---- */
.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard)}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0)}

/* ---- Marketing site: nav shadow on scroll ---- */
/* .scrolled itself already existed (main.js already toggled it for the
   border-color change below) — this just adds a transition and a real
   shadow, it doesn't introduce a new class. */
.nav{transition:box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard)}
.nav.scrolled{box-shadow:0 4px 20px -8px rgba(0,0,0,0.12)}

/* ---- Site-wide floating "Book a demo" launcher (js/booking-widget.js) ----
   Stacked directly above js/embed.js's own launcher (bottom:20px;right:20px;
   58x58) so the two real, distinct widgets never overlap. */
.booking-widget-launcher{
  position:fixed;bottom:90px;right:20px;z-index:499;width:52px;height:52px;border-radius:50%;
  background:var(--accent);border:none;color:#fff;cursor:pointer;
  box-shadow:0 12px 28px -6px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.booking-widget-launcher:hover{background:var(--accent-hover);transform:translateY(-2px)}
.booking-widget-launcher:active{transform:scale(.94)}