/* Counterbell. Values match Counterbell_Landing_v3.dc.html. */
:root {
  --ink: #171a21;
  --muted: #4a5160;
  --muted-2: #5d6472;
  --muted-3: #6b7280;
  --text-2: #3d4350;
  --line: #e6e8ec;
  --line-2: #e1e4e9;
  --line-3: #d9dce2;
  --line-soft: #f0f1f4;
  --chip: #eef0f3;
  --blue: oklch(0.5 0.16 262);
  --blue-hover: oklch(0.44 0.16 262);
  --navy: oklch(0.24 0.045 262);
  --cream: oklch(0.965 0.03 85);
  --cream-line: oklch(0.89 0.045 82);
  --urgent: oklch(0.5 0.18 35);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: #fff; color: var(--ink); font-family: Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
a { color: var(--blue); text-decoration: none }
a:hover { color: oklch(0.42 0.16 262) }
textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px }
[hidden] { display: none !important }
.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 }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 20; background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500 }
.skip-link:focus { top: 8px }

.dinny { display: block; flex: none }
.dinny svg { display: block; overflow: visible; width: 100%; height: 100% }

.btn { display: inline-flex; align-items: center; white-space: nowrap; flex: none; font-weight: 500; border-radius: 10px }
.btn, .analyse-btn, .copy-btn { transition: background-color 0.15s ease, transform 0.1s ease }
.btn:active, .analyse-btn:not(:disabled):active, .copy-btn:not(:disabled):active { transform: translateY(1px) }
.nav-links a, .footer-links a { transition: color 0.15s ease }
/* Anchored sections clear the sticky header, which wraps to three rows on phones. */
.try, .how, .pricing, .access { scroll-margin-top: max(56px, var(--header-h, 56px)) }
.btn-primary { background: var(--blue); color: #fff }
.btn-primary:hover { background: var(--blue-hover); color: #fff }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line-3) }
.btn-secondary:hover { background: #f4f5f7; color: var(--ink) }
.btn-lg { font-size: 15px; padding: 11px 18px }

h2.section-title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; letter-spacing: -0.02em }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.nav { max-width: 1160px; margin: 0 auto; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; margin-right: auto }
.brand:hover { color: var(--ink) }
.brand .dinny { width: 36px; height: 28px }
.nav-links { display: flex; align-items: center; gap: 8px 20px; font-size: 14px; order: 3; flex-wrap: wrap }
.nav-links a { display: inline-flex; align-items: center; white-space: nowrap; flex: none; color: var(--muted) }
.nav-links a:hover { color: var(--ink) }
.nav-cta { order: 4; font-size: 14px; padding: 8px 14px }

/* Hero */
.hero { max-width: 1160px; margin: 0 auto; padding: 56px 20px 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px }
.hero-copy { flex: 1 1 420px; min-width: 0 }
.hero h1 { margin: 0; font-size: clamp(32px, 4.8vw, 50px); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance }
.lede { margin: 20px 0 0; font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--muted); max-width: 560px; text-wrap: pretty }
.local { margin: 18px 0 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: oklch(0.45 0.1 65) }
.local::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.8 0.13 78); flex: none }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px }
.hero-visual { flex: 1 1 440px; min-width: 0; background: var(--navy); border-radius: 14px; padding: 88px clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px); overflow: hidden; perspective: 1400px; position: relative }
.hero-bell { position: absolute; top: 16px; right: clamp(28px, 9%, 72px); width: 120px; height: 92px; z-index: 0 }

/* Hero preview card */
.mock { background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); position: relative; z-index: 1; transform: rotateY(-7deg) rotateX(4deg) rotateZ(-1deg); transform-origin: center; overflow: hidden }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #eceef1 }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #dfe2e7 }
.mock-name { margin-left: 6px; font-size: 12px; font-weight: 600 }
.mock-badge { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--muted); background: var(--chip); border-radius: 4px; padding: 2px 6px }
.mock-body { padding: 14px; display: flex; flex-direction: column; gap: 10px }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.mock-stat { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px }
.mock-stat-l { font-size: 10px; color: var(--muted-3) }
.mock-stat-v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy) }
.mock-stat.is-urgent { border: 0; background: oklch(0.96 0.035 38) }
.mock-stat.is-urgent .mock-stat-l { color: oklch(0.45 0.15 35) }
.mock-stat.is-urgent .mock-stat-v { color: var(--urgent) }
.mock-stat.is-gaps { border: 0; background: var(--navy) }
.mock-stat.is-gaps .mock-stat-l { color: oklch(0.82 0.03 262) }
.mock-stat.is-gaps .mock-stat-v { color: #fff }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.mock-types { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 5px }
.mock-h { font-size: 10px; font-weight: 600 }
.mock-types .mock-h { margin-bottom: 2px }
.mock-type { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 6px; font-size: 9px; color: var(--muted) }
.mock-type b { height: 6px; border-radius: 2px }
.mock-gaps { background: var(--navy); border-radius: 10px; padding: 10px; color: #fff; display: flex; flex-direction: column; gap: 7px }
.mock-gap { font-size: 10px; line-height: 1.35 }
.mock-gap span { color: oklch(0.8 0.03 262) }
.mock-row { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; font-size: 10px }
.mock-row-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.62 0.19 38); flex: none }
.mock-row-name { font-weight: 600 }
.mock-row-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.mock-row-tag { margin-left: auto; flex: none; background: oklch(0.95 0.04 38); color: oklch(0.45 0.16 35); font-weight: 500; border-radius: 3px; padding: 1px 5px }

/* Try it */
.try { background: var(--cream); border-top: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line) }
.try-inner { max-width: 1160px; margin: 0 auto; padding: 56px 20px 64px }
.try-sub { margin: 8px 0 24px; font-size: 15px; line-height: 1.55; color: var(--muted) }
.demo { border: 1px solid oklch(0.88 0.04 82); border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(70, 45, 10, 0.04), 0 18px 44px rgba(70, 45, 10, 0.07); overflow: hidden }
.demo-inputs { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px }
.field { display: flex; flex-direction: column; gap: 6px }
.field-label { font-size: 13px; font-weight: 600 }
.field-hint { font-size: 12px; color: var(--muted-2) }
.field textarea { font: 13px/1.5 Geist, system-ui, sans-serif; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line-3); border-radius: 10px; background: #fafbfc; resize: vertical; width: 100% }
.demo-actions { padding: 0 16px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.analyse-btn { font: 500 14px Geist, system-ui, sans-serif; background: var(--blue); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; white-space: nowrap }
.analyse-btn:hover { background: var(--blue-hover) }
.analyse-btn:disabled { cursor: progress; background: var(--blue-hover) }
.demo-note { font-size: 12px; color: var(--muted-2) }
.demo-error { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--urgent) }

/* Listening / empty state */
.listening { border-top: 1px solid var(--line); background: oklch(0.975 0.02 85); padding: 44px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center }
.listening-bell { width: 112px; height: 86px; position: relative }
.listening-bell .dinny { position: absolute; inset: 0 }
.listening-title { font-size: 16px; font-weight: 600; margin-top: 4px }
.listening-sub { font-size: 13px; color: var(--muted-2) }

/* Results */
.results { border-top: 1px solid var(--line); background: #f7f8fa; padding: 16px; display: flex; flex-direction: column; gap: 14px }
.results-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.results-title { font-size: 15px; font-weight: 600 }
.results-badge { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--line); border-radius: 4px; padding: 2px 6px }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px }
.stat { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px }
.stat-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted) }
.stat-icon { width: 28px; height: 28px; border-radius: 10px; background: oklch(0.94 0.015 262); display: grid; place-items: center }
.stat-value { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums }
.stat.is-urgent { background: oklch(0.965 0.03 38); border-color: oklch(0.88 0.07 38) }
.stat.is-urgent .stat-label { color: oklch(0.42 0.14 35) }
.stat.is-urgent .stat-icon { background: oklch(0.62 0.19 38) }
.stat.is-urgent .stat-value { color: var(--urgent) }
.stat.is-gaps { background: var(--navy); border: 0 }
.stat.is-gaps .stat-label { color: oklch(0.85 0.03 262) }
.stat.is-gaps .stat-icon { background: oklch(0.34 0.05 262) }
.stat.is-gaps .stat-value { color: #fff }

.panels { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch }
.gaps-panel { flex: 2 1 420px; min-width: 0; background: var(--navy); border-radius: 14px; padding: 18px 20px; color: #fff; display: flex; flex-direction: column }
.gaps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.gaps-title { font-size: 16px; font-weight: 600 }
.gaps-sub { font-size: 12px; color: oklch(0.82 0.03 262) }
.gaps-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px }
.gap { background: oklch(0.3 0.05 262); border: 1px solid oklch(0.38 0.055 262); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px }
.gap-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600 }
.gap-count { font-weight: 500; color: oklch(0.85 0.03 262); flex: none }
.gap-fix { font-size: 13px; line-height: 1.45; color: oklch(0.88 0.02 262) }
.gap-fix b { color: oklch(0.86 0.12 85); font-weight: 600 }
.gaps-none { font-size: 13px; color: oklch(0.88 0.02 262) }

.panel { flex: 1 1 280px; min-width: 0; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px }
.panel-title { font-size: 14px; font-weight: 600; margin-bottom: 14px }
.panel-title.is-tight { margin-bottom: 8px }
.types { display: flex; flex-direction: column; gap: 10px }
.type-row { display: grid; grid-template-columns: 78px 1fr 20px; align-items: center; gap: 10px; font-size: 13px }
.type-label { color: var(--text-2) }
.track { height: 12px; background: var(--line-soft); border-radius: 3px; overflow: hidden }
.fill { display: block; height: 100%; border-radius: 3px }
.type-count, .q-count { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums }
.questions { display: flex; flex-direction: column }
.q { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.4 }
.q-dot { width: 8px; height: 8px; border-radius: 50%; flex: none }
.q-text { flex: 1 }
.q-count { flex: none }

.inbox { background: #fff; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden }
.inbox-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; margin: 0 }
.row { border-bottom: 1px solid var(--line-soft); background: #fff }
.row.is-open { background: #fafbfc }
.row-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 10px 1fr auto; gap: 4px 12px; padding: 12px 16px }
.row-btn:hover { background: #f8f9fb }
.row-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px }
.row-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px }
.row-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; flex-wrap: wrap }
.row-name { font-weight: 600 }
.row-channel { color: var(--muted-3); font-size: 12px }
.row-urgent { font-size: 11px; font-weight: 600; color: var(--urgent) }
.tag { font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 7px; align-self: center; white-space: nowrap }
.row-text { grid-column: 2 / -1; font-size: 13px; color: var(--text-2); line-height: 1.45 }
.draft-wrap { padding: 0 16px 14px 38px }
.draft { border: 1px solid var(--line-3); border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(70, 45, 10, 0.06) }
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--chip) }
.draft-label { font-size: 12px; font-weight: 600; color: var(--text-2) }
.copy-btn { font: 500 12px Geist, system-ui, sans-serif; background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer }
.copy-btn:hover { background: var(--blue-hover) }
.copy-btn:disabled { cursor: default; opacity: 0.5; background: var(--blue) }
.draft-body { padding: 12px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; display: grid }
.draft-body > * { grid-area: 1 / 1 }
.draft-ghost { visibility: hidden }
.draft-body.is-pending, .draft-body.is-error { color: var(--muted-2) }
.draft-body.is-error { color: var(--urgent) }
.draft-note { padding: 8px 12px; border-top: 1px solid var(--chip); font-size: 12px; color: var(--muted-2) }

/* How it works */
.how { background: var(--navy); color: #fff }
.how-inner { max-width: 1160px; margin: 0 auto; padding: 72px 20px }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-top: 32px }
.step { background: oklch(0.29 0.05 262); border: 1px solid oklch(0.36 0.05 262); border-radius: 14px; padding: 22px }
.step-art { background: oklch(0.955 0.035 85); border-radius: 12px; height: 132px; display: grid; place-items: center }
.step-art .dinny { width: 140px; height: 108px }
.step-num { margin-top: 18px; font-size: 13px; font-weight: 600; color: oklch(0.86 0.12 85) }
.step h3 { margin: 6px 0; font-size: 18px; font-weight: 600 }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: oklch(0.88 0.02 262) }

/* Pricing */
.pricing { background: #fff }
.pricing-inner { max-width: 1160px; margin: 0 auto; padding: 72px 20px }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 28px; max-width: 760px }
.plan { border: 1px solid var(--line-2); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px }
.plan.is-pro { border-color: var(--blue); box-shadow: 0 0 0 3px oklch(0.95 0.03 262) }
.plan-head { display: flex; justify-content: space-between; align-items: center }
.plan-name { font-size: 15px; font-weight: 600 }
.plan-badge { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--chip); border-radius: 4px; padding: 3px 7px }
.plan.is-pro .plan-badge { color: oklch(0.42 0.16 262); background: oklch(0.95 0.03 262) }
.plan-price { display: flex; align-items: baseline; gap: 4px }
.plan-price strong { font-size: 36px; font-weight: 700; letter-spacing: -0.02em }
.plan-price span { font-size: 14px; color: var(--muted-2) }
.plan p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted) }

/* Early access */
.access { background: var(--cream); border-top: 1px solid var(--cream-line) }
.access-inner { max-width: 1160px; margin: 0 auto; padding: 64px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px }
.access-copy { display: flex; align-items: center; gap: 18px; max-width: 660px }
.access-copy .dinny { width: 100px; height: 78px }
.access-copy p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted) }
.access-cta { font-size: 15px; padding: 12px 18px }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #fff }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 24px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted-2) }
.footer-links { display: flex; gap: 18px }
.footer-links a { display: inline-flex; align-items: center; white-space: nowrap; flex: none; color: var(--muted) }
.footer-links a:hover { color: var(--ink) }

/* Privacy and terms */
.doc { max-width: 720px; margin: 0 auto; padding: 56px 20px 72px }
.doc h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em }
.doc-updated { margin: 12px 0 0; font-size: 13px; color: var(--muted-2) }
.doc-lede { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted) }
.doc h2 { margin: 36px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em }
.doc p, .doc li { font-size: 15px; line-height: 1.65; color: var(--text-2) }
.doc p { margin: 10px 0 0 }
.doc ul { margin: 10px 0 0; padding-left: 20px }
.doc li + li { margin-top: 6px }
.doc a { text-decoration: underline; text-underline-offset: 2px }
.doc-note { margin-top: 28px; background: var(--cream); border: 1px solid var(--cream-line); border-radius: 12px; padding: 14px 16px }
.doc-note p { margin: 0 }

/* Motion. Everything above is the final state; motion only runs when allowed. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s var(--ease-out) }
  .js .reveal.is-in { opacity: 1; transform: none }

  .results.is-waiting .fill { width: 0 !important }
  .results.is-waiting .row .tag { opacity: 0 }
  .results.is-playing .fill { animation: grow 0.45s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms) }
  .results.is-playing .row .tag { animation: pop 0.28s var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 40ms) }

  .ring { animation: ring 0.45s ease-in-out; transform-origin: 50% 30% }
}
@keyframes grow { from { width: 0 } }
@keyframes pop { from { opacity: 0; transform: scale(0.6) } 70% { opacity: 1; transform: scale(1.06) } to { opacity: 1; transform: none } }
@keyframes ring { 0% { transform: rotate(0) } 20% { transform: rotate(-10deg) } 45% { transform: rotate(8deg) } 70% { transform: rotate(-4deg) } 100% { transform: rotate(0) } }