/* Newscout (working name). One theme at a time (light or dark), one accent (blue), one radius system:
   buttons and inputs 10px, cards 18px, pills 999px. */
:root {
  --ok-bg: #d8f3e4; --ok-ink: #0b5b34; --ok2-bg: #e9f7ef; --ok-line: #8fd1ad;
  --bg: #f2f8f7;
  --surface: #ffffff;
  --surface-2: #e4f1ef;
  --ink: #12384f;
  --muted: #4f6772;
  --line: #cfe1df;
  --accent: #1f6fae;        /* the one action colour */
  --accent-ink: #ffffff;
  --teal: #3fb8af;          /* decoration only, never text */
  --shadow: 0 1px 0 rgba(18, 56, 79, 0.05), 0 18px 40px -24px rgba(18, 56, 79, 0.35);
  --r-card: 18px;
  --r-ctl: 10px;
  --font-display: "Segoe UI Variable Display", "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}
:root[data-tw-theme="dark"] {
  --ok-bg: #1b5a3a; --ok-ink: #d6f5e3; --ok2-bg: #153f2b; --ok-line: #2f7a52;
  --bg: #0c1f2b;
  --surface: #12303f;
  --surface-2: #0f2733;
  --ink: #e6f1f2;
  --muted: #9db6bf;
  --line: #24465a;
  --accent: #5db0e8;
  --accent-ink: #06202f;
  --teal: #3fb8af;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 750; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 720; }
h3 { font-size: 1.35rem; font-weight: 680; letter-spacing: -0.015em; }
p { margin: 0; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }
.eyebrow { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 10px 14px; border-radius: var(--r-ctl); z-index: 100; }
.skip:focus { left: 12px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 650 1rem/1 var(--font-body); padding: 16px 24px; border-radius: var(--r-ctl);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 720 1.25rem/1 var(--font-display); letter-spacing: -0.02em; }
.brand svg { width: 38px; height: 38px; }
.nav ul { display: flex; gap: 6px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { display: block; padding: 10px 12px; border-radius: var(--r-ctl); text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.97rem; }
.nav ul a:hover { color: var(--ink); background: var(--surface-2); }
.nav .btn { padding: 12px 18px; font-size: 0.95rem; }
.theme { width: 42px; height: 42px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.theme:hover { border-color: var(--ink); }
.theme svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }
@media (max-width: 420px) { .nav .btn { padding: 11px 13px; font-size: 0.9rem; } .brand span { font-size: 1.1rem; } }

/* hero */
.hero { padding: 72px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; min-height: min(100dvh - 68px, 760px); }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: 24px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 920px) { .hero { padding-top: 48px; } .hero .wrap { grid-template-columns: 1fr; gap: 40px; min-height: 0; } }

/* sample feed (illustration) */
.feed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.feed-head { padding: 18px 20px 0; }
.feed-head p { font-weight: 650; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px; }
.tab { font: 600 0.9rem/1 var(--font-body); padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rows { list-style: none; margin: 0; padding: 0 0 6px; }
.rows li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 20px; border-top: 1px solid var(--line); animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rows li:nth-child(2) { animation-delay: 0.05s; } .rows li:nth-child(3) { animation-delay: 0.1s; } .rows li:nth-child(4) { animation-delay: 0.15s; }
.rows b { font-weight: 650; }
.rows small { color: var(--muted); font-size: 0.9rem; }
.num { font-family: var(--font-mono); font-size: 0.92rem; align-self: center; }
.num.none { color: var(--muted); }
.feed-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 0.88rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rows li { animation: none; } }

/* sections */
section { padding: 96px 0; }
.sec-head { max-width: 720px; margin-bottom: 48px; }
.sec-head h2 + p { margin-top: 16px; color: var(--muted); font-size: 1.15rem; max-width: 56ch; }

/* what we build: asymmetric bento, exact cell count (3) */
.bento { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto auto; gap: 18px; }
.cell { border-radius: var(--r-card); padding: 32px; border: 1px solid var(--line); background: var(--surface); position: relative; overflow: hidden; }
.cell p { margin-top: 12px; color: var(--muted); }
.cell.tall { grid-row: span 2; background: var(--surface-2); display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; }
.cell.tall h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cell.tall::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--teal) 55%, transparent), transparent 70%); pointer-events: none;
}
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; position: relative; z-index: 1; }
.flow span { font: 600 0.88rem/1 var(--font-mono); padding: 9px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.flow i { width: 22px; height: 2px; background: var(--teal); display: block; }
.cell.grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 100%); mask-image: linear-gradient(100deg, transparent 40%, #000 100%);
}
.cell.grid-bg > * { position: relative; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; } .cell.tall { grid-row: auto; min-height: 0; } .cell { padding: 26px; } }

/* product: two-column, price list on the right */
.product .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.product h2 { max-width: 14ch; }
.product .lead { margin-top: 20px; }
.facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.facts li { padding-left: 28px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 2px; background: var(--teal); }
.prices { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.price { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 24px 26px; }
.price + .price { border-top: 1px solid var(--line); }
.price h3 { font-size: 1.15rem; }
.price p { color: var(--muted); font-size: 0.97rem; grid-column: 1; }
.amount { font: 740 1.9rem/1 var(--font-display); letter-spacing: -0.03em; text-align: right; }
.amount small { display: block; font: 500 0.82rem/1.3 var(--font-body); color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.price.featured { background: var(--surface-2); padding: 32px 26px; border-left: 4px solid var(--accent); }
.prices .btn { margin: 22px 26px 26px; }
@media (max-width: 860px) { .product .wrap { grid-template-columns: 1fr; gap: 36px; } }

/* how we work: big verbs, vertical */
.verbs { display: grid; gap: 0; }
.verb { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px 48px; padding: 32px 0; border-top: 1px solid var(--line); align-items: baseline; }
.verb:last-child { border-bottom: 1px solid var(--line); }
.verb h3 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 740; letter-spacing: -0.035em; }
.verb p { color: var(--muted); max-width: 46ch; }
@media (max-width: 760px) { .verb { grid-template-columns: 1fr; gap: 10px; } }

/* sample form */
.sample .box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 48px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.sample h2 { max-width: 12ch; }
.sample .box > div > p { margin-top: 16px; color: var(--muted); }
form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
label { font-weight: 650; font-size: 0.97rem; }
input, select, textarea {
  font: 400 1rem/1.4 var(--font-body); color: var(--ink); background: var(--surface);
  border: 1.5px solid #7f99a3; border-radius: var(--r-ctl); padding: 14px 14px; width: 100%;
}
:root[data-tw-theme="dark"] input, :root[data-tw-theme="dark"] select, :root[data-tw-theme="dark"] textarea { border-color: #5d8294; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.hint { font-size: 0.88rem; color: var(--muted); }
.error { font-size: 0.9rem; color: #b3261e; min-height: 1.2em; }
:root[data-tw-theme="dark"] .error { color: #ff9b94; }
@media (max-width: 860px) { .sample .box { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }

/* faq */
.faq { max-width: 820px; }
details { border-top: 1px solid var(--line); padding: 4px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font: 650 1.15rem/1.3 var(--font-display); position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--font-body); color: var(--muted); }
details[open] summary::after { content: "-"; }
details p { padding: 0 0 22px; color: var(--muted); max-width: 64ch; }

/* about + contact */
.about .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.about p + p { margin-top: 16px; }
.about .prose { color: var(--muted); font-size: 1.12rem; }
.contact .box { border-top: 1px solid var(--line); padding-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; }
.contact h2 { max-width: 14ch; }
.contact .links { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; gap: 20px; } section { padding: 72px 0; } }

footer { border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--muted); font-size: 0.95rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }

/* scroll reveal: content is visible without JS; JS adds .js then .in */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* simple pages (privacy, terms, 404) */
.page { padding: 72px 0 96px; max-width: 760px; }
.page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 24px; }
.page h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.page p, .page li { color: var(--muted); }
.page ul { padding-left: 20px; }


/* ---- design pass: wave motif, depth, lift ---- */
.hero { position: relative; overflow: hidden; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -10px; width: 100%; height: 220px; color: var(--teal); opacity: 0.55; pointer-events: none; }
.hero-wave path { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
.hero .wrap { position: relative; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-wave path { animation: none; stroke-dashoffset: 0; } }
.hl { position: relative; white-space: nowrap; background-image: linear-gradient(transparent 70%, color-mix(in srgb, var(--teal) 45%, transparent) 70%); background-repeat: no-repeat; padding: 0 4px; margin: 0 -4px; }
.hero h1 { max-width: 13ch; }
.feed { transform: rotate(1.2deg); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.feed:hover { transform: rotate(0deg) translateY(-3px); }
@media (max-width: 920px) { .feed { transform: none; } .hero-wave { height: 140px; } }

.cell { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; }
.cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bubbles { position: absolute; right: 24px; bottom: 18px; display: grid; gap: 8px; justify-items: end; }
.bubbles span { font-size: 0.86rem; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.bubbles .b2 { border-radius: 14px 14px 14px 4px; background: var(--accent); color: var(--accent-ink); border-color: transparent; justify-self: start; }
.cell.grid-bg { min-height: 220px; padding-bottom: 96px; }
.mini { position: absolute; right: 24px; bottom: 20px; display: grid; grid-template-columns: repeat(3, 38px); gap: 6px; }
.mini i { height: 10px; border-radius: 4px; background: var(--line); }
.mini i:nth-child(1), .mini i:nth-child(4) { background: var(--teal); opacity: 0.7; }
.cell:not(.tall):not(.grid-bg) { padding-bottom: 72px; }

.pill { display: inline-block; vertical-align: middle; margin-left: 8px; font: 650 0.72rem/1 var(--font-body); padding: 6px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); letter-spacing: 0.02em; }
.price.featured .amount { font-size: 2.4rem; }
.price { transition: background-color 0.2s; }
.price:not(.featured):hover { background: var(--surface-2); }

.verb { transition: padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.verb:hover { padding-left: 14px; }
.verb:hover h3 { color: var(--accent); }
.verb h3 { transition: color 0.2s; }

.sample .box { position: relative; overflow: hidden; }
.box-wave { position: absolute; right: -20px; bottom: -10px; width: 520px; max-width: 70%; color: var(--teal); opacity: 0.4; pointer-events: none; }
.sample .box > * { position: relative; }
.sample .box > .box-wave { position: absolute; }

.bigmark { font: 800 clamp(5rem, 22vw, 17rem)/0.8 var(--font-display); letter-spacing: -0.06em; color: var(--surface-2); text-align: center; user-select: none; overflow: hidden; padding: 0 0 8px; }
footer { padding-top: 0; }
footer .wrap { padding-top: 28px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quick { display: flex; gap: 10px; margin-top: 32px; max-width: 520px; }
.quick input { flex: 1; min-width: 0; padding: 16px 16px; }
@media (max-width: 520px) { .quick { flex-direction: column; } }
.stats { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; }
.stat { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); padding: 36px; }
.stat:first-child { background: var(--surface-2); }
.stat .big { font: 760 clamp(2.6rem, 6vw, 4.6rem)/1 var(--font-display); letter-spacing: -0.04em; }
.stat p { margin-top: 16px; color: var(--muted); max-width: 44ch; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } .stat { padding: 26px; } }

.cell.grid-bg > .bubbles, .cell > .mini { position: absolute; }
.cell.grid-bg { min-height: 0; padding-bottom: 104px; }
.cell:not(.tall):not(.grid-bg) { padding-bottom: 68px; }
.cell.tall { min-height: 0; }
.cell.grid-bg { padding-bottom: 120px; }

.stat .big { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; }
.stat-note { margin-top: 20px; color: var(--muted); max-width: 70ch; font-size: 0.97rem; }

/* illustration rows: full contact details and green status tags */
.rows li { display: block; }
.r-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.r-top small { display: block; }
.r-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.86rem; color: var(--muted); }
.r-info .num { font-size: 0.86rem; color: var(--ink); }
.status { font: 650 0.8rem/1 var(--font-body); padding: 7px 10px; border-radius: 8px; white-space: nowrap; border: 1px solid var(--ok-line); color: var(--ok-ink); }
.status.booked { background: var(--ok-bg); }
.status.contacted { background: var(--ok2-bg); }

/* what you get: sticky heading left, grouped list right, stage strip below */
.inside-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.inside-grid > div:first-child { position: sticky; top: 100px; }
.inside h2 { max-width: 14ch; }
.inside .lead { margin-top: 20px; }
.fine { margin-top: 16px; font-size: 0.93rem; }
.fields { margin: 0; border-top: 1px solid var(--line); }
.fields > div { display: grid; grid-template-columns: 0.42fr 1fr; gap: 8px 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.fields dt { font: 700 1.15rem/1.25 var(--font-display); letter-spacing: -0.015em; }
.fields dd { margin: 0; color: var(--muted); }
.stages { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.stages span { font: 650 0.97rem/1 var(--font-body); padding: 14px 18px; border-radius: var(--r-ctl); background: var(--surface); border: 1px solid var(--line); }
.stages i { width: 28px; height: 2px; background: var(--teal); flex: none; }
.stages .won { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
@media (max-width: 860px) {
  .inside-grid { grid-template-columns: 1fr; gap: 28px; }
  .inside-grid > div:first-child { position: static; }
  .fields > div { grid-template-columns: 1fr; }
  .stages i { width: 14px; }
}


/* ---------------- motion ----------------
   Thesis: one focal sequence (the example list moving New, Contacted, Call booked) and supporting motion that explains something.
   Only opacity, transform and colour change. Every loop pauses off screen. Reduced motion keeps final states and colour feedback. */
.status.fresh { background: transparent; color: var(--muted); border-color: var(--line); }
.status { transition: background-color 0.35s, color 0.35s, border-color 0.35s; }
.stat .big { font-variant-numeric: tabular-nums; }
.js .reveal { transform: translateY(12px); transition-duration: 0.55s; }
.js .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .stages:not(.in) .won { background: var(--surface); color: var(--ink); border-color: var(--line); }
.js .stages span { transition: opacity 0.4s, background-color 0.45s, color 0.45s, border-color 0.45s; transition-delay: calc(var(--i) * 0.22s); }
.js .stages:not(.in) span { opacity: 0.35; }
.js .stages i { transform-origin: left; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 0.22s + 0.15s); }
.js .stages:not(.in) i { transform: scaleX(0); }
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: background-color 0.3s, color 0.3s, border-color 0.3s !important; }

@media (prefers-reduced-motion: no-preference) {
  .status.pop { animation: pop 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes pop { 0% { transform: scale(0.88); } 100% { transform: scale(1); } }

  /* service cards: a tiny story each, only while on screen */
  .cell:not(.live) .flow span, .cell:not(.live) .bubbles span, .cell:not(.live) .mini i { animation-play-state: paused; }
  .flow span { animation: chip 4.8s ease-in-out infinite; }
  .flow span:nth-of-type(2) { animation-delay: 0.7s; }
  .flow span:nth-of-type(3) { animation-delay: 1.4s; }
  @keyframes chip {
    0%, 40%, 100% { border-color: var(--line); box-shadow: 0 0 0 0 transparent; }
    10%, 24% { border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 28%, transparent); }
  }
  .bubbles span { animation: say 9s ease-in-out infinite; }
  .bubbles .b2 { animation-name: say2; }
  @keyframes say { 0%, 3% { opacity: 0; transform: translateY(8px); } 9%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-4px); } }
  @keyframes say2 { 0%, 26% { opacity: 0; transform: translateY(8px); } 33%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-4px); } }
  .mini i { transform-origin: left; animation: fill 4.2s ease-in-out infinite; }
  .mini i:nth-child(2) { animation-delay: 0.2s; } .mini i:nth-child(3) { animation-delay: 0.4s; }
  .mini i:nth-child(4) { animation-delay: 0.6s; } .mini i:nth-child(5) { animation-delay: 0.8s; } .mini i:nth-child(6) { animation-delay: 1s; }
  @keyframes fill { 0% { opacity: 0.2; transform: scaleX(0.4); } 18%, 85% { opacity: 1; transform: none; } 100% { opacity: 0.2; transform: scaleX(0.4); } }

  /* faq: open smoothly (progressive: browsers without support just snap) */
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.32s allow-discrete; }
  details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .stages span, .js .stages i { transition: none; }
  .status { transition: none; }
}


/* ---- intro, value calculator, objection, limiting belief ---- */
.intro .intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.intro h2 { max-width: 12ch; }
.intro .lead { margin-top: 20px; }
.gives { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.gives li { padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.gives b { color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; }
@media (max-width: 860px) { .intro .intro-grid { grid-template-columns: 1fr; gap: 28px; } }

.value { background: var(--surface-2); }
.calc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: stretch; }
.calc-in { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: grid; gap: 18px; align-content: start; }
.calc-out { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: grid; gap: 4px; align-content: start; }
.calc-out .row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.calc-out .row span { color: var(--muted); }
.calc-out .row b { font: 740 1.7rem/1.1 var(--font-display); letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.calc-out .row small { grid-column: 1 / -1; text-align: right; color: var(--muted); font-size: 0.9rem; }
.calc-out .row.total { border-bottom: 0; background: var(--ok-bg); color: var(--ok-ink); margin: 6px -14px 0; padding: 18px 14px; border-radius: 12px; }
.calc-out .row.total span, .calc-out .row.total small { color: var(--ok-ink); }
.pays { margin-top: 16px; color: var(--muted); font-size: 0.97rem; }
.calc-note { margin-top: 16px; max-width: 70ch; color: var(--muted); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

.objection .ask { margin: 0; max-width: 900px; }
.label { font: 650 0.8rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.objection h2 { font-size: clamp(1.9rem, 4.6vw, 3.3rem); font-weight: 700; line-height: 1.12; }
.objection figcaption { margin-top: 28px; display: grid; gap: 14px; max-width: 62ch; color: var(--muted); font-size: 1.12rem; padding-left: 22px; border-left: 4px solid var(--teal); }

.belief { background: var(--surface-2); }
.belief-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.belief h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.belief-body { display: grid; gap: 16px; color: var(--muted); font-size: 1.12rem; }
@media (max-width: 860px) { .belief-grid { grid-template-columns: 1fr; gap: 24px; } }

.promises { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.promises li { position: relative; padding-left: 30px; color: var(--ink); }
.promises li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 8px; border-left: 3px solid var(--teal); border-bottom: 3px solid var(--teal); transform: rotate(-45deg); }
.sample h2 { max-width: 10ch; }

/* touch targets: at least 44px tall */
@media (pointer: coarse), (max-width: 860px) {
  .nav .btn { min-height: 44px; }
  .tab { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .theme { width: 44px; height: 44px; }
  summary { min-height: 44px; }
}

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); border-radius: var(--r-card); padding: 28px; align-self: start; }
.sent h3 { margin-bottom: 8px; }
[hidden] { display: none !important; }
.sample .box > .sent { grid-column: 2; }
@media (max-width: 860px) { .sample .box > .sent { grid-column: 1; } }

/* ---- booking screen: month calendar, real time slots, then details ---- */
.sample .box > .booker { grid-column: 2; }
@media (max-width: 860px) { .sample .box > .booker { grid-column: 1; } }
.bk-pick { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: start; }
@media (max-width: 640px) { .bk-pick { grid-template-columns: 1fr; } }
.bk-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; }
.bk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-head strong { font: 700 1.05rem/1 var(--font-display); }
.bk-nav { width: 44px; height: 44px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.bk-nav:hover:not(:disabled) { border-color: var(--ink); }
.bk-nav:disabled { opacity: 0.35; cursor: default; }
.bk-dow, .bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow span { text-align: center; font: 600 0.78rem/1 var(--font-body); color: var(--muted); padding: 6px 0; }
.bk-day { aspect-ratio: 1; min-height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font: 500 0.95rem/1 var(--font-body); cursor: default; }
.bk-day.on { background: var(--surface-2); color: var(--ink); font-weight: 700; cursor: pointer; }
.bk-day.on:hover { outline: 2px solid var(--accent); }
.bk-day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bk-times { display: grid; gap: 8px; align-content: start; }
.bk-times h3 { font-size: 1rem; margin-bottom: 4px; }
.bk-slot { min-height: 44px; border-radius: var(--r-ctl); border: 1.5px solid var(--accent); background: transparent; color: var(--ink); font: 650 0.98rem/1 var(--font-body); cursor: pointer; }
.bk-slot:hover { background: var(--surface-2); }
.bk-slot[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.bk-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 330px; overflow: auto; padding: 2px; }
.bk-summary { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); border-radius: var(--r-ctl); padding: 14px 16px; margin-bottom: 16px; }
.bk-summary .hint { color: var(--ok-ink); }
#bk-form { display: grid; gap: 14px; }
.bk-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sample .box.has-booker { grid-template-columns: 0.7fr 1.3fr; gap: 36px; }
@media (max-width: 860px) { .sample .box.has-booker { grid-template-columns: 1fr; } }

.demo-note { background: #fff3d6; color: #6b4a00; border: 1px solid #e5c675; border-radius: var(--r-ctl); padding: 8px 12px; font-size: 0.9rem; margin-bottom: 12px; }

/* Outbound check */
.check { padding: 80px 0; }
.quiz { max-width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 36px; box-shadow: var(--shadow); }
.quiz .q { border: 0; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.quiz legend { font-weight: 650; padding: 0; margin-bottom: 4px; }
.quiz .qn { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 0.85rem; }
.quiz .q label { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); cursor: pointer; background: var(--bg); }
.quiz .q label:hover { border-color: var(--accent); }
.quiz .q input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.quiz .q label:has(input:checked) { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.quiz-out:focus { outline: none; }
.quiz-out .score { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.quiz-out .score b { font: 700 4.2rem/1 var(--font-display); color: var(--accent); }
.quiz-out .score span { font-size: 1.4rem; color: var(--muted); }
.quiz-out h3 { margin: 8px 0 10px; }
.quiz-out .gap { margin-top: 14px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-ctl); border-left: 4px solid var(--teal); }
.quiz-out .actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .quiz { padding: 22px; } .check { padding: 56px 0; } }

/* six menu links: keep each on one line, and fold the menu away sooner so it never wraps */
.nav ul a { white-space: nowrap; }
@media (max-width: 1040px) { .nav ul { display: none; } .nav .btn { margin-left: auto; } }