/* ── marketing-only layout, all on theme tokens ── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

nav.site { position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--shell-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-stroke); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 28px; height: 62px; display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.nav-links a:not(.btn) { font: 500 14px var(--font-sans); color: var(--ink-500); }
.nav-links a:not(.btn):hover { color: var(--ink-900); }

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 92px 0 76px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--font-mono);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-ink); margin-bottom: 20px; }
.hero-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentcolor; }
.hero h1 { font: 400 clamp(40px, 5.2vw, 60px)/1.04 var(--font-display); letter-spacing: -.02em; color: var(--ink-900); margin-bottom: 20px; }
.hero h1 .accent { font-style: italic; color: var(--brand-ink); }
.hero-sub { font: 400 17px/1.7 var(--font-sans); color: var(--ink-500); margin-bottom: 32px; max-width: 480px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 12px; color: var(--ink-400); }

.mockup { background: var(--glass-3); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-glass-lg); }
.mockup-bar { background: var(--glass-1); border-bottom: 1px solid var(--glass-stroke); padding: 11px 14px;
  display: flex; align-items: center; gap: 6px; }
.dot-win { width: 10px; height: 10px; border-radius: 50%; }
.mockup-url { flex: 1; background: var(--paper); border: 1px solid var(--glass-stroke); border-radius: var(--r-xs);
  padding: 4px 10px; font: 400 11px var(--font-mono); color: var(--ink-400); margin: 0 8px; }
.mockup-body { padding: 16px; }
.m-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.m-kpi { background: var(--glass-1); border: 1px solid var(--glass-stroke); border-radius: var(--r-sm); padding: 10px; }
.m-kpi-l { font: 500 9px var(--font-mono); color: var(--ink-400); text-transform: uppercase; letter-spacing: .06em; }
.m-kpi-v { font: 600 20px var(--font-sans); margin-top: 3px; letter-spacing: -.02em; color: var(--ink-900); }
.m-kpi-d { font: 500 10px var(--font-sans); margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.m-kpi-d .icon { width: 11px; height: 11px; }
.up { color: var(--ok); } .dn { color: var(--stop); } .flat { color: var(--ink-400); }
.m-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-chart { background: var(--glass-1); border: 1px solid var(--glass-stroke); border-radius: var(--r-sm); padding: 12px; }
.m-chart-t { font: 500 9px var(--font-mono); color: var(--ink-400); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.m-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.m-bar-l { font: 400 10px var(--font-sans); width: 60px; flex-shrink: 0; color: var(--ink-500); }
.m-bar-t { flex: 1; height: 5px; background: var(--glass-stroke-strong); border-radius: var(--r-pill); }
.m-bar-f { height: 5px; border-radius: var(--r-pill); }
.m-bar-p { font: 500 10px var(--font-mono); color: var(--ink-400); width: 26px; text-align: right; }
.m-intents { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-stroke); }

.providers { border-top: 1px solid var(--glass-stroke); border-bottom: 1px solid var(--glass-stroke);
  padding: 26px 0; text-align: center; background: var(--glass-1); }
.providers-label { font: 500 11px var(--font-mono); color: var(--ink-400); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.provider-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.chip-p { display: flex; align-items: center; gap: 8px; background: var(--glass-2); border: 1px solid var(--glass-stroke);
  padding: 8px 16px; border-radius: var(--r-pill); font: 500 13px var(--font-sans); color: var(--ink-700); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; }

.section-m { padding: 84px 0; }
.section-label-m { font: 500 11px var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-ink); margin-bottom: 12px; }
.section-heading { font: 400 clamp(28px, 3.6vw, 40px)/1.12 var(--font-display); letter-spacing: -.01em; color: var(--ink-900); max-width: 680px; }
.section-heading em { font-style: italic; color: var(--brand-ink); }
.section-sub { font: 400 16px/1.7 var(--font-sans); color: var(--ink-500); margin-top: 12px; max-width: 560px; }

.features-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--glass-stroke); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg); overflow: hidden; }
.feature { background: var(--glass-2); padding: 28px; transition: background var(--t-fast); }
.feature:hover { background: var(--glass-3); }
.feature-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--brand-ink); }
.feature-icon .icon { width: 19px; height: 19px; }
.feature h3 { font: 600 15px var(--font-sans); margin-bottom: 7px; color: var(--ink-900); }
.feature p { font: 400 13px/1.65 var(--font-sans); color: var(--ink-500); }

.how-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.how-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--r-md);
  border: 1px solid transparent; transition: border-color var(--t-fast), background var(--t-fast); }
.step:hover { border-color: var(--glass-stroke); background: var(--glass-2); }
.step-num { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--brand-mid); color: #fff;
  font: 600 14px var(--font-sans); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step h4 { font: 600 15px var(--font-sans); margin-bottom: 4px; color: var(--ink-900); }
.step p { font: 400 13px/1.6 var(--font-sans); color: var(--ink-500); }
.stat-stack { display: flex; flex-direction: column; gap: 10px; }
.stat-card { background: var(--glass-2); border: 1px solid var(--glass-stroke); border-radius: var(--r-md);
  padding: 16px 20px; box-shadow: var(--shadow-glass-sm); display: flex; align-items: center; gap: 14px; }
.stat-icon { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; background: var(--brand-soft); color: var(--brand-ink); }
.stat-label { font: 400 11px var(--font-sans); color: var(--ink-400); }
.stat-value { font: 600 17px var(--font-sans); letter-spacing: -.02em; color: var(--ink-900); }
.stat-delta { font: 500 11px var(--font-sans); margin-top: 1px; display: flex; align-items: center; gap: 4px; }
.stat-delta .icon { width: 12px; height: 12px; }

.pricing-wrap { margin-top: 48px; max-width: 420px; }
.plan { background: var(--glass-2); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg);
  padding: 32px; position: relative; box-shadow: var(--shadow-glass-sm);
  display: flex; flex-direction: column; }
.plan-items { flex: 1; }
.plan-featured { border-color: var(--brand-soft-strong); box-shadow: 0 0 0 3px var(--brand-glow), var(--shadow-glass); }
.plan-badge { position: absolute; top: -11px; left: 24px; background: var(--brand-mid); color: #fff;
  font: 600 10px var(--font-mono); padding: 4px 11px; border-radius: var(--r-pill); letter-spacing: .08em; text-transform: uppercase; }
.plan-tier { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); margin-bottom: 10px; }
.plan-price { font: 600 40px var(--font-sans); letter-spacing: -.03em; line-height: 1; color: var(--ink-900); }
.plan-price-period { font: 400 14px var(--font-sans); color: var(--ink-400); }
.plan-desc { font: 400 13px var(--font-sans); color: var(--ink-500); margin: 8px 0 22px; }
.plan-items { list-style: none; margin-bottom: 26px; }
.plan-item { display: flex; gap: 9px; align-items: center; font: 400 13px var(--font-sans); color: var(--ink-700);
  padding: 6px 0; border-bottom: 1px solid var(--glass-stroke); }
.plan-item:last-child { border-bottom: none; }
.plan-item .icon { width: 15px; height: 15px; color: var(--brand-ink); flex-shrink: 0; }

.cta-band { background: var(--paper-rise); border-top: 1px solid var(--glass-stroke); border-bottom: 1px solid var(--glass-stroke);
  padding: 88px 28px; text-align: center; background-image: var(--atmos); }
.cta-band h2 { font: 400 clamp(28px, 4vw, 42px)/1.12 var(--font-display); color: var(--ink-900); max-width: 600px; margin: 0 auto 14px; }
.cta-band h2 em { font-style: italic; color: var(--brand-ink); }
.cta-band p { color: var(--ink-500); font-size: 16px; margin-bottom: 30px; }

footer.site { padding: 28px; display: flex; align-items: center; justify-content: space-between;
  max-width: 1100px; margin: 0 auto; font-size: 12px; color: var(--ink-400); flex-wrap: wrap; gap: 12px; }
footer.site .f-brand { display: flex; align-items: center; gap: 8px; }
footer.site .f-brand .wordmark { font-size: 16px; }
footer.site a { color: var(--ink-400); } footer.site a:hover { color: var(--ink-900); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 56px 0 44px; gap: 36px; }
  .features-grid { grid-template-columns: 1fr; }
  .how-wrap { grid-template-columns: 1fr; gap: 36px; }
  .pricing-wrap { grid-template-columns: 1fr; max-width: 440px; }
  .nav-links a:not(.btn) { display: none; }
}
@media (max-width: 480px) { .m-kpis { grid-template-columns: 1fr 1fr; } .m-charts { grid-template-columns: 1fr; } }

/* ── MCP / Agent section ── */
.agent-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.agent-chat { display: flex; flex-direction: column; gap: 10px; background: var(--glass-3); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-glass-lg); }
.agent-msg { font: 400 13px/1.6 var(--font-sans); padding: 11px 14px; border-radius: var(--r-md); max-width: 90%; }
.agent-msg.user { background: var(--brand-mid); color: #fff; align-self: flex-end; border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md); }
.agent-msg.ai { background: var(--glass-1); border: 1px solid var(--glass-stroke); color: var(--ink-700); align-self: flex-start; border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); }
.ai-tag { display: block; font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink); margin-bottom: 5px; }
@media (max-width: 860px) { .agent-wrap { grid-template-columns: 1fr; gap: 36px; } }
/* MCP App frame mockup */
.mcp-frame { background: var(--paper); border: 1px solid var(--glass-stroke); border-radius: var(--r-md); overflow: hidden; }
.mcp-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--glass-2); border-bottom: 1px solid var(--glass-stroke); }
.mcp-tool-name { font: 500 11px var(--font-mono); color: var(--ink-500); display: flex; align-items: center; gap: 5px; }
.mcp-tool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-mid); flex-shrink: 0; }
.mcp-chips { display: flex; gap: 3px; }
.mcp-chip { padding: 1px 7px; border-radius: var(--r-pill); font: 500 9px var(--font-sans); background: var(--glass-1); color: var(--ink-400); border: 1px solid var(--glass-stroke); }
.mcp-chip.on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-mid); }
.mcp-app-body { background: #0f172a; padding: 12px; }
.mcp-kpis-s { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 8px; }
.mcp-kpi-s { background: #1e293b; border-radius: 5px; padding: 7px 9px; }
.mcp-kpi-sl { font: 600 8px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: 2px; }
.mcp-kpi-sv { font: 700 15px var(--font-sans); letter-spacing: -.02em; color: #f1f5f9; }
.mcp-kpi-sv.g { color: #34d399; }
.mcp-kpi-sv.b { color: #60a5fa; }
.mcp-rows { display: flex; flex-direction: column; gap: 5px; }
.mcp-row { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.mcp-row-lbl { color: #94a3b8; width: 52px; flex-shrink: 0; }
.mcp-row-bar { flex: 1; height: 4px; background: #1e293b; border-radius: 2px; overflow: hidden; }
.mcp-row-fill { height: 100%; border-radius: 2px; background: #c46522; }
.mcp-row-pct { color: #cbd5e1; width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Live scan teaser ── */
.teaser-section { padding: 72px 0; border-bottom: 1px solid var(--glass-stroke); }
.teaser-inner { max-width: 900px; }
.teaser-widget { margin-top: 32px; background: var(--glass-2); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-glass); }
.teaser-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.teaser-inputs input { font: 400 14px var(--font-sans); color: var(--ink-900); background: var(--paper); border: 1px solid var(--glass-stroke-strong); border-radius: var(--r-pill); padding: 10px 16px; outline: none; transition: border-color var(--t-fast); width: 100%; box-sizing: border-box; }
.teaser-inputs input::placeholder { color: var(--ink-300); }
.teaser-inputs input:focus { border-color: var(--brand-mid); }
.t-q-show { font: 400 12px/1.6 var(--font-mono); color: var(--ink-500); background: var(--glass-1); border: 1px solid var(--glass-stroke); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 14px; }
.teaser-btn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.teaser-foot-note { font-size: 11px; color: var(--ink-300); }
.t-loading { display: none; margin-top: 20px; border-top: 1px solid var(--glass-stroke); padding-top: 18px; align-items: center; gap: 10px; font: 400 13px var(--font-sans); color: var(--ink-400); }
.t-loading.on { display: flex; }
.t-spin { width: 14px; height: 14px; border: 2px solid var(--glass-stroke-strong); border-top-color: var(--brand-ink); border-radius: 50%; animation: tspin .65s linear infinite; flex-shrink: 0; }
@keyframes tspin { to { transform: rotate(360deg); } }
.t-error { display: none; margin-top: 16px; font: 400 13px var(--font-sans); color: var(--stop); }
.t-error.on { display: block; }
.t-result { display: none; margin-top: 20px; border-top: 1px solid var(--glass-stroke); padding-top: 20px; }
.t-result.on { display: block; }
.t-answer-lbl { font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); margin-bottom: 10px; }
.t-answer { font: 400 14px/1.75 var(--font-sans); color: var(--ink-700); }
.t-answer mark { background: var(--brand-glow, rgba(14,165,164,.15)); color: var(--brand-ink); padding: 1px 4px; border-radius: 4px; font-weight: 600; font-style: normal; }
.t-verdict { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.t-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-sans); padding: 5px 13px; border-radius: var(--r-pill); }
.t-chip.yes { background: rgba(34,197,94,.12); color: var(--ok); }
.t-chip.no  { background: rgba(239,68,68,.10); color: var(--stop); }
.t-upsell { margin-top: 12px; font: 400 12px var(--font-sans); color: var(--ink-400); }
.t-upsell a { color: var(--brand-ink); font-weight: 600; }
@media (max-width: 700px) { .teaser-inputs { grid-template-columns: 1fr; } }

/* ── extracted inline styles (CSP: no style attributes) ── */
/* mockup traffic-light dots */
.dot-win--red   { background: #ff5f57; }
.dot-win--amber { background: #ffbd2e; }
.dot-win--green { background: #28c840; }

/* mockup bar fills: rank palette + width utilities (shared with .mcp-row-fill) */
.m-bar-f--c1 { background: #ea6e1b; }
.m-bar-f--c2 { background: #4f46e5; }
.m-bar-f--c3 { background: #0ea5a4; }
.m-bar-f--c4 { background: #64748b; }
.w-6  { width: 6%; }
.w-14 { width: 14%; }
.w-22 { width: 22%; }
.w-28 { width: 28%; }
.w-38 { width: 38%; }
.w-41 { width: 41%; }
.w-44 { width: 44%; }
.w-62 { width: 62%; }
.w-65 { width: 65%; }
.w-88 { width: 88%; }

/* provider chip dots */
.chip-dot--claude     { background: #d97706; }
.chip-dot--chatgpt    { background: #10a37f; }
.chip-dot--gemini     { background: #4285f4; }
.chip-dot--perplexity { background: #22c55e; }

/* teaser scan button idle state (toggled from index.js) */
.btn-idle { opacity: .5; cursor: default; }

/* tinted section bands */
.band-tint { background: var(--glass-1); border-bottom: 1px solid var(--glass-stroke); }
.band-tint--top { border-top: 1px solid var(--glass-stroke); }

/* MCP section label row + badge */
.label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.label-row .section-label-m { margin-bottom: 0; }
.mcp-badge { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-mid); }

/* misc one-offs */
.plan-spacer { margin-bottom: 18px; }
.orb--footer { --orb-size: 22px; }
.f-links { display: flex; gap: 20px; }
.link-brand { color: var(--brand-ink); font-weight: 600; }