:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.75rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  --color-bg: oklch(0.975 0.01 80);
  --color-surface: oklch(0.995 0.004 80);
  --color-alt: oklch(0.945 0.016 75);
  --color-text: oklch(0.22 0.02 50);
  --color-muted: oklch(0.45 0.02 55);
  --color-line: oklch(0.22 0.02 50 / 0.12);
  --color-primary: oklch(0.58 0.19 38);
  --color-primary-hover: oklch(0.52 0.18 36);
  --color-primary-soft: oklch(0.58 0.19 38 / 0.1);
  --color-ink: oklch(0.2 0.02 45);
  --color-good: oklch(0.5 0.11 155);

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-sm: 0 2px 8px -2px oklch(0.3 0.05 45 / 0.12);
  --shadow-md: 0 10px 30px -12px oklch(0.3 0.05 45 / 0.25);
  --shadow-lg: 0 30px 60px -24px oklch(0.3 0.05 45 / 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms var(--ease);
  --wrap: 1200px;
}

body { overflow-x: hidden; }
.wrap { width: min(100% - 2 * var(--space-5), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 100; background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); line-height: 1.05; }
h3 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.muted { color: var(--color-muted); }
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.fine { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-4); }
.fine a, .stat a { color: inherit; }
.hint { font-size: var(--text-xs); color: var(--color-muted); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn--sm { min-height: 40px; padding: 0 var(--space-5); }
.btn--lg { min-height: 52px; padding: 0 var(--space-8); }
.btn--primary { background: var(--color-primary); color: white; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--ghost { color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-line); background: var(--color-surface); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--color-text); }
.btn--light { background: var(--color-bg); color: var(--color-ink); }
.btn--light:hover { background: white; }
.btn--onDark { color: var(--color-bg); box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / .3); }
.btn--onDark:hover { box-shadow: inset 0 0 0 1.5px var(--color-bg); }

/* Top bar + header */
.topbar { background: var(--color-ink); color: var(--color-bg); text-align: center; font-size: var(--text-xs); font-weight: 500; padding: var(--space-2) var(--space-4); }
.header { position: sticky; top: 0; z-index: 50; background: oklch(0.975 0.01 80 / 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.header--scrolled { border-bottom-color: var(--color-line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 64px; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--color-text); text-decoration: none; display: inline-flex; align-items: baseline; }
.brand span { color: var(--color-primary); }
.brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); margin-left: 3px; }
.brand--sm { font-size: 1.25rem; }
.nav { display: flex; gap: var(--space-6); }
.nav a { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; }
.nav a:hover { color: var(--color-text); }

/* Hero */
.hero { padding-block: clamp(var(--space-10), 6vw, var(--space-20)); }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(var(--space-10), 5vw, var(--space-16)); align-items: center; }
.hero h1 { font-size: var(--text-3xl); line-height: .98; margin-block: var(--space-5) var(--space-6); }
.lede { font-size: var(--text-base); color: var(--color-muted); max-width: 56ch; }
.lede strong { color: var(--color-text); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-muted); }
.hero__proof li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__proof li::before, .plan li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--color-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; flex: none; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.58 0.19 38 / .5); } 70%, 100% { box-shadow: 0 0 0 10px oklch(0.58 0.19 38 / 0); } }

.hero__visual { position: relative; min-height: 520px; }
.hero__img { position: absolute; inset: 0 0 0 12%; width: 88%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); }
.hcard { position: absolute; z-index: 2; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); font-size: .875rem; max-width: 280px; opacity: 0; transform: translateY(10px); animation: msgIn .6s var(--ease) forwards; }
.hcard b { display: block; font-size: .875rem; }
.hcard small { color: var(--color-muted); font-size: .75rem; }
.hcard p { margin-top: var(--space-1); line-height: 1.4; }
.hcard--miss { top: 6%; left: 0; display: flex; gap: var(--space-3); align-items: center; animation-delay: .2s; }
.hcard--miss .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.hcard--text { top: 22%; left: 4%; background: var(--color-primary); color: white; animation-delay: .9s; }
.hcard--text small { color: oklch(1 0 0 / .8); }
.hcard--booked { bottom: 22%; left: 0; border-left: 4px solid var(--color-good); animation-delay: 1.6s; }
.hcard--paid { bottom: 5%; right: 4%; border-left: 4px solid var(--color-good); animation-delay: 2.3s; }

/* Stats */
.stats { background: var(--color-ink); color: var(--color-bg); padding-block: var(--space-12); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.stat b, .stat span { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1; color: var(--color-bg); font-variant-numeric: tabular-nums; }
.stat span { color: oklch(0.72 0.16 45); }
.stat p { font-size: var(--text-sm); color: oklch(0.82 0.01 70); margin-top: var(--space-3); }
.stat a { display: block; font-size: var(--text-xs); color: oklch(0.7 0.01 70); margin-top: var(--space-2); }

/* Sections */
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.section--alt { background: var(--color-alt); }
.section__head { max-width: 760px; margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }
.section__head h2 { margin-top: var(--space-3); }
.section__head > p:not(.eyebrow) { margin-top: var(--space-4); color: var(--color-muted); }

/* Demo hub */
.tabs { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-1); background: var(--color-alt); border-radius: var(--radius-lg); margin-bottom: var(--space-6); scrollbar-width: none; }
.tab { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); text-align: left; min-height: 56px; }
.tab span { font-size: .75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.panel { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: var(--space-6); align-items: start; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: clamp(var(--space-5), 3vw, var(--space-10)); min-height: 560px; }
.panel--full { display: block; }
.panel__intro { display: grid; gap: var(--space-4); align-content: start; }
.panel__intro h3 { font-size: var(--text-xl); }
.panel__intro > p { color: var(--color-muted); font-size: var(--text-sm); }
.select, .fld { display: grid; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
select, input[type="text"], input:not([type]), input[type="email"] { min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-surface); font-size: 1rem; font-weight: 400; color: var(--color-text); width: 100%; }
select:focus, input:focus { outline: 2px solid var(--color-primary); outline-offset: 0; border-color: transparent; }
.toggle { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-muted); min-height: 44px; }
.toggle input { width: 18px; height: 18px; accent-color: var(--color-primary); }

.side { display: grid; gap: var(--space-3); align-content: start; }
.side__label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.metric { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.metric small { font-size: var(--text-xs); color: var(--color-muted); }
.metric b { font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.metric--good b { color: var(--color-good); }
.note { font-size: var(--text-xs); color: var(--color-muted); }
.empty { font-size: var(--text-xs); color: var(--color-muted); padding: var(--space-4); border: 1px dashed var(--color-line); border-radius: var(--radius-md); list-style: none; }

/* Phone */
.phone { width: 100%; max-width: 360px; justify-self: center; height: 540px; background: var(--color-surface); border-radius: 40px; box-shadow: var(--shadow-lg), inset 0 0 0 8px var(--color-ink); padding: var(--space-3); display: flex; flex-direction: column; overflow: hidden; }
.phone__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-line); }
.phone__bar strong { display: block; font-size: var(--text-sm); }
.phone__bar small { font-size: var(--text-xs); color: var(--color-muted); }
.phone__avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-alt); font-weight: 600; font-size: var(--text-xs); color: var(--color-text); }
.thread { list-style: none; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-3); overflow-y: auto; scrollbar-width: none; }
.thread > :first-child { margin-top: auto; }
.msg { max-width: 84%; padding: var(--space-2) var(--space-3); border-radius: 18px; font-size: .875rem; line-height: 1.4; opacity: 0; transform: translateY(8px); animation: msgIn .45s var(--ease) forwards; }
.msg--in { align-self: flex-end; background: oklch(0.6 0.13 245); color: white; border-bottom-right-radius: 6px; }
.msg--out { align-self: flex-start; background: var(--color-alt); border-bottom-left-radius: 6px; }
.msg--out::before { content: 'NeverMiss AI'; display: block; font-size: .6875rem; font-weight: 600; color: var(--color-muted); margin-bottom: 2px; }
.msg--sys { align-self: center; background: none; color: var(--color-muted); font-size: .75rem; font-weight: 600; padding: var(--space-1) 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.msg--sys.missed::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.msg--done { align-self: stretch; max-width: 100%; background: var(--color-ink); color: var(--color-bg); font-size: .8125rem; font-weight: 600; border-radius: var(--radius-md); padding: var(--space-3); text-align: center; }
.ring { align-self: center; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) 0; font-size: .8125rem; color: var(--color-muted); list-style: none; }
.ring i { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); animation: pulse 1s infinite; display: grid; place-items: center; }
.ring i::after { content: ''; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: var(--space-3) var(--space-4); background: var(--color-alt); border-radius: 18px; list-style: none; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); animation: dot 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@keyframes msgIn { to { opacity: 1; transform: none; } }
.replies { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-4); min-height: 20px; }
.replies button { min-height: 36px; padding: var(--space-1) var(--space-3); border-radius: 999px; font-size: .8125rem; font-weight: 600; background: oklch(0.6 0.13 245 / .12); color: oklch(0.42 0.13 245); text-align: left; }
.replies button:hover { background: oklch(0.6 0.13 245 / .22); }

.crm { display: grid; gap: var(--space-2); }
.crmrow { background: var(--color-bg); border-left: 4px solid var(--color-good); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: .8125rem; opacity: 0; animation: msgIn .5s var(--ease) forwards; }
.crmrow b { display: block; font-size: .875rem; }
.crmrow small { color: var(--color-muted); }
.chiprow { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.tag { font-size: .6875rem; font-weight: 600; padding: 2px var(--space-2); border-radius: 999px; background: var(--color-alt); color: var(--color-muted); }
.tag--good { background: oklch(0.5 0.11 155 / .12); color: var(--color-good); }

/* Voice */
.call { background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); height: 540px; }
.call__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.call__head span:last-child { font-variant-numeric: tabular-nums; color: oklch(0.8 0.01 70); }
.live { font-size: .75rem; font-weight: 600; padding: 2px var(--space-2); border-radius: 999px; background: oklch(1 0 0 / .1); }
.live.on { background: var(--color-primary); }
.wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; }
.wave i { width: 4px; border-radius: 2px; background: oklch(0.72 0.16 45); height: 6px; transition: height .12s; }
.transcript { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.transcript li { font-size: .875rem; line-height: 1.45; opacity: 0; animation: msgIn .4s var(--ease) forwards; }
.transcript li b { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: oklch(0.72 0.16 45); margin-bottom: 2px; }
.transcript li.caller b { color: oklch(0.75 0.1 245); }
.fields { display: grid; gap: var(--space-2); }
.fields div { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); display: grid; }
.fields dt { font-size: .75rem; color: var(--color-muted); }
.fields dd { font-size: .875rem; font-weight: 600; min-height: 1.3em; }
.fields dd.fill { animation: flash 1s var(--ease); }
@keyframes flash { from { background: oklch(0.5 0.11 155 / .18); } to { background: transparent; } }
.summary { background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-4); font-size: .8125rem; line-height: 1.5; animation: msgIn .5s var(--ease) forwards; }
.summary b { display: block; color: oklch(0.72 0.16 45); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-1); }

/* Leads */
.mini { display: grid; gap: var(--space-3); background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-5); }
.mini__title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.mini label { display: grid; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.score { display: grid; gap: var(--space-4); align-content: start; }
.gauge { position: relative; width: 200px; height: 200px; justify-self: center; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-bg { fill: none; stroke: var(--color-alt); stroke-width: 10; }
.g-fg { fill: none; stroke: var(--color-good); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.2s var(--ease); }
.gauge > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge b { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.gauge small { font-size: var(--text-xs); color: var(--color-muted); }
.factors { list-style: none; display: grid; gap: var(--space-2); }
.factors li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); font-size: .8125rem; opacity: 0; animation: msgIn .4s var(--ease) forwards; }
.factors li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--color-alt); overflow: hidden; }
.factors li i::after { content: ''; display: block; height: 100%; width: var(--w); background: var(--color-good); border-radius: 3px; }
.side--wide { gap: var(--space-4); }
.crmtoggle { display: inline-flex; background: var(--color-alt); border-radius: 999px; padding: 2px; text-transform: none; letter-spacing: 0; }
.crmtoggle button { font-size: .75rem; font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: 999px; color: var(--color-muted); min-height: 32px; }
.crmtoggle button.on { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.col { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-2); min-height: 120px; }
.col h4 { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); padding: var(--space-1) var(--space-1) var(--space-2); }
.kcard { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: var(--space-2); font-size: .75rem; animation: msgIn .4s var(--ease) forwards; opacity: 0; }
.kcard b { display: block; font-size: .8125rem; }
.seq { list-style: none; display: grid; gap: var(--space-2); border-left: 2px solid var(--color-line); padding-left: var(--space-4); }
.seq li { font-size: .8125rem; position: relative; color: var(--color-muted); }
.seq li::before { content: ''; position: absolute; left: calc(-1 * var(--space-4) - 6px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-line); }
.seq li.done { color: var(--color-text); }
.seq li.done::before { background: var(--color-good); }
.seq li b { color: var(--color-text); }

/* Payments */
.seg, .billing { display: inline-flex; background: var(--color-alt); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button, .billing button { min-height: 40px; padding: 0 var(--space-4); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.seg button[aria-checked="true"], .billing button[aria-checked="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
.billing { margin-top: var(--space-6); }
.billing em { font-style: normal; font-size: .75rem; color: var(--color-good); margin-left: var(--space-1); }
.timeline { display: grid; gap: var(--space-4); align-content: start; }
.doc { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-2); position: relative; overflow: hidden; }
.doc b { font-family: var(--font-display); font-size: var(--text-xl); }
.doc small { color: var(--color-muted); font-size: var(--text-xs); }
.doc .stamp { position: absolute; right: var(--space-4); top: var(--space-4); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); border: 2px solid currentColor; color: var(--color-primary); }
.doc .stamp.paid { color: var(--color-good); animation: stamp .5s var(--ease); }
@keyframes stamp { from { transform: scale(1.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.tl { list-style: none; display: grid; gap: var(--space-3); max-height: 360px; overflow-y: auto; }
.tl li { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); font-size: .8125rem; opacity: 0; animation: msgIn .4s var(--ease) forwards; }
.tl li > b { font-size: .75rem; color: var(--color-muted); padding-top: 2px; }
.tl li div { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3); line-height: 1.45; }
.tl li div small { display: block; font-weight: 600; color: var(--color-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.tl li.ok div { background: oklch(0.5 0.11 155 / .1); }

/* Complete day */
.dayhead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.dayhead h3 { font-size: var(--text-xl); }
.dayhead p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.clock { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }
.dash { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-4); }
.kpi small { font-size: var(--text-xs); color: var(--color-muted); }
.kpi b { display: block; font-family: var(--font-display); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.kpi--good b { color: var(--color-good); }
.feed { list-style: none; display: grid; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.feed li:not(.empty) { display: grid; grid-template-columns: 76px 130px 1fr; gap: var(--space-3); align-items: center; background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: .875rem; opacity: 0; animation: msgIn .4s var(--ease) forwards; }
.feed time { font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: .8125rem; }

/* ROI */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: center; }
.roi h2 { margin-block: var(--space-3) var(--space-4); }
.sliders { display: grid; gap: var(--space-6); }
.sliders label { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.sliders output { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-bg); font-variant-numeric: tabular-nums; }
.sliders input { grid-column: 1 / -1; width: 100%; accent-color: var(--color-primary); height: 28px; }
.roi__card { background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 4vw, var(--space-10)); display: grid; gap: var(--space-3); }
.roi__card > small { font-size: var(--text-sm); color: oklch(0.8 0.01 70); }
.big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1; color: oklch(0.72 0.16 45); font-variant-numeric: tabular-nums; }
.roi__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid oklch(1 0 0 / .1); font-size: var(--text-sm); color: oklch(0.85 0.01 70); }
.roi__row b { color: var(--color-bg); font-variant-numeric: tabular-nums; }
.roi__verdict { font-size: var(--text-sm); background: oklch(1 0 0 / .06); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.roi__card .btn { justify-self: start; margin-top: var(--space-2); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.plan { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.plan--best { border: 2px solid var(--color-primary); box-shadow: var(--shadow-lg); }
.badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-8); background: var(--color-primary); color: white; font-size: .75rem; font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: 999px; }
.plan h3 { font-size: var(--text-xl); }
.plan__for { font-size: var(--text-sm); color: var(--color-muted); }
.price { display: flex; align-items: baseline; gap: var(--space-1); margin-top: var(--space-2); }
.price b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--color-muted); font-size: var(--text-sm); }
.perday { font-size: var(--text-xs); color: var(--color-good); font-weight: 600; min-height: 2.6em; }
.plan .btn { margin-block: var(--space-2) var(--space-3); }
.plan ul { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.plan li { display: flex; gap: var(--space-2); align-items: flex-start; }
.plan li::before { margin-top: 4px; }
/* Get started */
.start { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-10), 6vw, var(--space-20)); align-items: start; }
.start h2 { margin-block: var(--space-3) var(--space-8); }
.steps { list-style: none; display: grid; gap: var(--space-5); }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); }
.steps__n { width: 44px; height: 44px; border-radius: 50%; background: var(--color-ink); color: var(--color-bg); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; }
.steps h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.steps p { font-size: var(--text-sm); color: var(--color-muted); }
.download { margin-top: var(--space-8); display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1.5px solid var(--color-line); text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.download:hover { border-color: var(--color-text); }
.download__icon { width: 48px; height: 56px; border-radius: var(--radius-sm); background: var(--color-ink); color: white; font-weight: 700; font-size: .75rem; display: grid; place-items: center; flex: none; }
.download b { display: block; }
.download small { font-size: var(--text-xs); color: var(--color-muted); }
.wizard { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 3vw, var(--space-8)); box-shadow: var(--shadow-md); display: grid; gap: var(--space-5); position: sticky; top: 88px; }
.wizard__bar { display: grid; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.wizard__prog { height: 6px; background: var(--color-alt); border-radius: 3px; overflow: hidden; }
.wizard__prog i { display: block; height: 100%; width: 33%; background: var(--color-primary); border-radius: 3px; transition: width .4s var(--ease); }
fieldset { border: 0; display: grid; gap: var(--space-4); }
legend { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-4); }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pick label { position: relative; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: flex; align-items: center; min-height: 48px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--color-line); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: border-color var(--transition-interactive), background var(--transition-interactive); }
.pick input:checked + span { border-color: var(--color-text); background: var(--color-alt); font-weight: 600; }
.pick input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.fld input[aria-invalid="true"] { border-color: oklch(0.6 0.2 28); }
.preview { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-4); font-size: .8125rem; }
.preview b { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin-bottom: var(--space-2); }
.preview p { background: var(--color-alt); border-radius: 14px; padding: var(--space-2) var(--space-3); }
.wizard__nav { display: flex; justify-content: space-between; gap: var(--space-3); }
.wizard__nav .btn--primary { margin-left: auto; }
.wizard__msg { font-size: var(--text-sm); color: oklch(0.5 0.18 28); min-height: 1.2em; }
.wizard__done { display: grid; gap: var(--space-3); }
.wizard__done h3 { font-size: var(--text-xl); }
.wizard__done p { color: var(--color-muted); font-size: var(--text-sm); }
.code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; background: var(--color-ink); color: var(--color-bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 1rem; }

/* FAQ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-12); }
.faq__list { border-top: 1px solid var(--color-line); }
details { border-bottom: 1px solid var(--color-line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; font-weight: 600; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--color-text); transition: transform .25s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }

/* CTA + footer */
.cta { background: var(--color-primary); color: white; padding-block: clamp(var(--space-16), 8vw, var(--space-24)); text-align: center; }
.cta h2 { font-size: var(--text-2xl); }
.cta p { margin: var(--space-4) auto 0; color: oklch(1 0 0 / .9); }
.cta .hero__ctas { justify-content: center; }
.cta .btn--primary { background: var(--color-ink); }
.cta .btn--primary:hover { background: oklch(0.12 0.02 45); }
.footer { padding-block: var(--space-8); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.footer p { font-size: var(--text-xs); color: var(--color-muted); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1100px) {
  .nav { gap: var(--space-4); }
  .panel { grid-template-columns: 1fr 1fr; }
  .panel > .side { grid-column: 1 / -1; }
  .dash { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .hero__grid, .roi, .start, .faq { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .wizard { position: static; }
  .faq { gap: 0; }
}
@media (max-width: 640px) {
  .panel { grid-template-columns: 1fr; padding: var(--space-4); border-radius: var(--radius-lg); }
  .tab { min-width: 150px; }
  .dash { grid-template-columns: 1fr 1fr; }
  .feed li:not(.empty) { grid-template-columns: 1fr; gap: var(--space-1); }
  .pick { grid-template-columns: 1fr; }
  .hcard { max-width: 230px; }
  .phone, .call { height: 500px; }
  .kanban { grid-template-columns: 1fr 1fr 1fr; }
  .topbar { font-size: .75rem; }
}
/* v2 polish */
.live { white-space: nowrap; }
.kcard .tag { display: inline-block; margin-top: 4px; white-space: nowrap; font-size: .68rem; }
.feed li .tag, #dFeed li .tag { justify-self: start; align-self: start; white-space: nowrap; }

/* ============ v4: conversion redo ============ */
.topbar b { color: oklch(0.8 0.14 50); font-weight: 600; }
.center { text-align: center; }
.btn--xl { min-height: 56px; padding: 0 var(--space-8); font-size: 1.0625rem; box-shadow: 0 10px 24px -10px oklch(0.58 0.19 38 / .7); }
.btn--dark { background: var(--color-ink); color: var(--color-bg); }
.btn--dark:hover { background: oklch(0.12 0.02 45); }
.btn--block { width: 100%; }
.textlink { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.textlink:hover { color: var(--color-primary-hover); }
.assure { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-muted); }
.assure svg { width: 16px; height: 16px; color: var(--color-good); flex: none; }
.assure--sm { margin-top: 0; justify-content: center; }

/* Hero */
.hero { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }
.hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5rem); line-height: .96; margin-block: var(--space-6) var(--space-5); }
.hero h1 .hl { background: none; color: var(--color-text); font-weight: inherit; box-shadow: inset 0 -.18em 0 oklch(0.58 0.19 38 / .28); }
.lede { font-size: var(--text-lg); color: var(--color-muted); max-width: 34ch; line-height: 1.4; }
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.picker__label { font-size: var(--text-sm); font-weight: 600; margin-right: var(--space-1); }
.picker button { min-height: 40px; padding: 0 var(--space-4); border-radius: 999px; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); box-shadow: inset 0 0 0 1.5px var(--color-line); background: var(--color-surface); transition: all var(--transition-interactive); }
.picker button:hover { color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-text); }
.picker button[aria-checked="true"] { background: var(--color-ink); color: var(--color-bg); box-shadow: none; }
.outcomes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.outcomes li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-line); font-size: var(--text-sm); }
.outcomes li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--color-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.hero__ctas { align-items: center; gap: var(--space-5); margin-top: var(--space-8); }
.hero__ctas--center { justify-content: center; }
.hero__visual { position: relative; min-height: 0; padding: 0 0 0 10%; }
.hero__img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transition: opacity .35s var(--ease); }
.hero__img.swap { opacity: 0; }
.hcard { max-width: 270px; }
.hcard--miss { top: 7%; left: 0; }
.hcard--text { top: 21%; left: 2%; background: var(--color-ink); }
.hcard--booked { top: auto; bottom: 8%; left: 0; right: auto; display: flex; gap: var(--space-3); align-items: center; border-left: 0; background: var(--color-surface); }
.hcard--booked .check { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--color-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.hcard--booked b { color: var(--color-good); }
.hcard.flip { animation: none; opacity: 1; transform: none; }

/* Demo */
.demo { padding-top: clamp(var(--space-12), 6vw, var(--space-20)); }
.tally { display: flex; justify-content: center; align-items: baseline; gap: var(--space-3); margin: calc(-1 * var(--space-4)) auto var(--space-6); font-size: var(--text-sm); color: var(--color-muted); }
.tally b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-good); font-variant-numeric: tabular-nums; }
.tally b.bump { animation: bump .6s var(--ease); }
.tally[hidden] { display: none; }
@keyframes bump { 30% { transform: scale(1.18); } }
.metric--loss b { color: var(--color-primary); }
.msg--done { background: var(--color-good); color: white; }
.msg--won { align-self: center; font-family: var(--font-display); font-weight: 800; color: var(--color-good); font-size: 1.25rem; list-style: none; animation: msgIn .5s var(--ease) forwards; opacity: 0; }
.replay { align-self: center; list-style: none; }
.replay button { min-height: 44px; padding: 0 var(--space-5); border-radius: 999px; background: var(--color-primary); color: white; font-weight: 600; font-size: var(--text-sm); box-shadow: var(--shadow-md); }
.phone.is-preview .thread { opacity: .96; }

/* Loss band */
.loss { background: var(--color-ink); color: var(--color-bg); padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.loss__head { max-width: 760px; margin-bottom: var(--space-10); }
.loss__head h2 { margin-top: var(--space-3); color: var(--color-bg); }
.eyebrow--dark { color: oklch(0.75 0.01 70); }
.loss .stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); padding-bottom: var(--space-10); border-bottom: 1px solid oklch(1 0 0 / .12); margin-bottom: var(--space-10); }
.loss .stat b, .loss .stat span { color: oklch(0.72 0.17 42); }
.loss .stat b { font-size: var(--text-3xl); }
.loss .stat span { font-size: var(--text-2xl); }
.roi__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.roi__title small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: oklch(0.75 0.01 70); margin-left: var(--space-2); }
.loss .sliders label { color: oklch(0.88 0.01 70); }
.loss .sliders input { accent-color: oklch(0.72 0.17 42); }
.loss .roi__card { background: oklch(0.26 0.02 45); border: 1px solid oklch(1 0 0 / .1); }
.loss .roi__card .btn { justify-self: stretch; }

/* Pricing */
.anchor { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.anchor__item { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-surface); }
.anchor__item small { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }
.anchor__item b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin-block: var(--space-2) var(--space-1); color: var(--color-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: oklch(0.58 0.19 38 / .6); }
.anchor__item b span { font-size: var(--text-sm); }
.anchor__item p { font-size: var(--text-xs); color: var(--color-muted); }
.anchor__item--us { background: var(--color-ink); border-color: transparent; }
.anchor__item--us small, .anchor__item--us p { color: oklch(0.8 0.01 70); }
.anchor__item--us b { color: var(--color-bg); text-decoration: none; }
#pricing .billing { display: flex; width: max-content; margin: var(--space-12) auto var(--space-8); }
.plans { align-items: center; }
.plan--best { transform: scale(1.04); z-index: 1; padding-block: var(--space-10); border-color: var(--color-ink); box-shadow: 0 40px 80px -30px oklch(0.3 0.05 45 / .45); }
.badge { background: var(--color-ink); }
.price b { font-size: var(--text-3xl); }
.permo { font-size: var(--text-xs); color: var(--color-muted); min-height: 2.6em; }
.promise { margin-top: var(--space-12); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); border: 2px dashed oklch(0.5 0.11 155 / .5); background: oklch(0.5 0.11 155 / .06); }
.promise__seal { width: 76px; height: 76px; border-radius: 50%; background: var(--color-good); color: white; display: grid; place-content: center; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: .9; }
.promise__seal small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.promise h3 { margin-bottom: var(--space-1); }
.promise p { font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }

/* Section separators (one paper tone, thin rules) */
.section--line { border-top: 1px solid var(--color-line); }

/* Security */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.tiles li { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); }
.ic { width: 40px; height: 40px; border-radius: var(--radius-md); background: oklch(0.5 0.11 155 / .12); display: grid; place-items: center; margin-bottom: var(--space-4); }
.ic svg { width: 22px; height: 22px; fill: none; stroke: var(--color-good); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tiles h3 { font-size: 1.125rem; margin-bottom: var(--space-1); }
.tiles p { font-size: var(--text-sm); color: var(--color-muted); }

/* Start */
.trial { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--space-8); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.trial li { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--color-muted); border-left: 1px solid var(--color-line); }
.trial li:first-child { border-left: 0; }
.trial b { display: block; font-size: var(--text-sm); color: var(--color-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: .75rem; color: var(--color-muted); line-height: 1.5; }
.consent a { color: inherit; }
.wizard__msg.ok { color: var(--color-good); }

/* Trust */
.trust__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-12); align-items: center; }
.founder blockquote p { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.01em; }
.founder figcaption { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-6); }
.founder__av { width: 48px; height: 48px; border-radius: 50%; background: var(--color-ink); color: var(--color-bg); display: grid; place-items: center; font-weight: 700; font-size: .875rem; }
.founder figcaption b { display: block; }
.founder figcaption small { font-size: var(--text-xs); color: var(--color-muted); }
.logos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.logos li { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); text-align: center; background: var(--color-surface); }
.faq .section__head a { color: var(--color-text); }
details p a { color: var(--color-text); font-weight: 600; }

/* CTA + footer */
.cta p { font-size: var(--text-base); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer__links a { font-size: var(--text-xs); color: var(--color-muted); }
.footer__links a:hover { color: var(--color-text); }

/* Mobile sticky bar */
.mbar { display: none; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__visual { padding: 0; }
  .hero__img { aspect-ratio: 4 / 3; max-height: 360px; object-position: 50% 25%; }
  .hcard--text { top: auto; bottom: 8%; left: auto; right: 4%; }
  .hcard--miss { top: 6%; left: 4%; }
  .hcard--booked { display: none; }
  .loss .stats__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .anchor { grid-template-columns: 1fr 1fr; }
  .plans { max-width: 480px; }
  .plan--best { transform: none; order: -1; }
  .promise { grid-template-columns: 1fr; text-align: left; padding: var(--space-6); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .trust__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .mbar { display: flex; position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 60; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); background: var(--color-ink); color: var(--color-bg); border-radius: 999px; box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform .35s var(--ease); }
  .mbar.on { transform: none; }
  .mbar b { display: block; font-size: .9375rem; }
  .mbar small { font-size: .75rem; color: oklch(0.8 0.01 70); }
  .mbar .btn { min-height: 48px; }
  .footer { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 2.6rem; }
  .lede { font-size: 1.125rem; }
  .picker__label { width: 100%; }
  .picker button { min-height: 36px; padding: 0 var(--space-3); font-size: .8125rem; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .hero__ctas .btn--xl { width: 100%; }
  .textlink { justify-content: center; }
  .assure { justify-content: center; }
  .tiles { grid-template-columns: 1fr; }
  .tiles li { padding: var(--space-5); display: grid; grid-template-columns: 40px 1fr; gap: 0 var(--space-4); }
  .tiles .ic { grid-row: span 2; margin: 0; }
  .trial { grid-template-columns: 1fr 1fr; }
  .trial li:nth-child(3) { border-left: 0; }
  .trial li:nth-child(n+3) { border-top: 1px solid var(--color-line); }
  .anchor__item { padding: var(--space-4); }
  .anchor__item b { font-size: 1.375rem; }
  .founder blockquote p { font-size: 1.25rem; }
  .section { padding-block: var(--space-12); }
  .loss { padding-block: var(--space-12); }
  .loss .stat b { font-size: 2.75rem; }
  .cta .btn--xl { width: 100%; }
}

/* Legal pages */
.legal { max-width: 760px; padding-block: var(--space-12) var(--space-20); }
.legal h1 { font-size: var(--text-2xl); line-height: 1.05; }
.legal h2 { font-size: var(--text-lg); margin-top: var(--space-10); margin-bottom: var(--space-3); }
.legal p, .legal li { color: var(--color-muted); font-size: var(--text-base); line-height: 1.65; }
.legal p + p { margin-top: var(--space-3); }
.legal ul { padding-left: 1.2em; display: grid; gap: var(--space-2); }
.legal b { color: var(--color-text); }
.legal a { color: var(--color-text); }
.legal .lead { font-size: var(--text-lg); color: var(--color-text); margin-top: var(--space-4); }
.legal__meta { font-size: var(--text-xs) !important; margin-top: var(--space-2); }
.callout { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-alt); font-size: var(--text-sm) !important; }
.contact { margin-top: var(--space-8); position: static; }
textarea { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-surface); font: inherit; font-size: 1rem; color: var(--color-text); width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid var(--color-primary); border-color: transparent; }
.fld textarea[aria-invalid="true"], .fld input[aria-invalid="true"] { border-color: oklch(0.6 0.2 28); }
.contact .btn { justify-self: start; }
.admin { padding-block: var(--space-10); }
.admin h1 { font-size: var(--text-xl); }
.admin .table-wrap { margin-top: var(--space-6); }
.admin td { color: var(--color-text); vertical-align: top; max-width: 360px; }
.fine { font-size: var(--text-xs) !important; }

/* v4 mobile: everything visible, no sideways scrolling */
.swipe { display: none; }
@media (max-width: 640px) {
  .tabs { display: grid; grid-template-columns: 1fr; gap: var(--space-2); overflow: visible; padding: 0; background: none; border-radius: 0; }
  .tab { flex-direction: row; align-items: center; gap: var(--space-3); min-width: 0; min-height: 52px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-text); font-size: .9375rem; white-space: normal; }
  .tab span { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-alt); color: var(--color-muted); font-size: .75rem; font-weight: 700; }
  .tab::after { content: '›'; margin-left: auto; font-size: 1.25rem; color: var(--color-muted); line-height: 1; }
  .tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-bg); border-color: transparent; box-shadow: var(--shadow-md); }
  .tab[aria-selected="true"] span { background: var(--color-primary); color: white; }
  .tab[aria-selected="true"]::after { content: '↓'; color: var(--color-bg); font-size: 1rem; }
  .plans { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
  .plan { padding: var(--space-6); }
  .plan--best { padding-block: var(--space-6); }
  .tiles li { padding: var(--space-4) var(--space-5); }
  .tiles p { font-size: .875rem; }
  #pricing .billing { margin: var(--space-8) auto var(--space-5); }
  .promise { margin-top: var(--space-6); gap: var(--space-3); }
  .promise__seal { width: 60px; height: 60px; font-size: 1.375rem; }
  .loss .stats__grid { gap: var(--space-5); padding-bottom: var(--space-8); margin-bottom: var(--space-8); }
  .loss .stat b { font-size: 2.25rem; } .loss .stat span { font-size: 1.5rem; }
  .loss__head { margin-bottom: var(--space-8); }
  .anchor { gap: var(--space-2); }
  .anchor__item p { font-size: .75rem; }
  .start .trial { display: none; }
  .faq details p { font-size: .875rem; }
  .section__head { margin-bottom: var(--space-8); }
}
.panel { scroll-margin-top: 84px; }

/* ============ v7: self-playing story ============ */
.story { padding-top: clamp(var(--space-12), 6vw, var(--space-20)); }
.steps2 { list-style: none; max-width: 980px; margin-inline: auto; position: relative; display: grid; gap: clamp(var(--space-12), 7vw, var(--space-20)); padding-left: 36px; }
.steps2::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--color-line); }
.s2 { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-6), 5vw, var(--space-16)); align-items: center; }
.s2::before { content: ''; position: absolute; left: -36px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-line); transition: all .4s var(--ease); }
.s2.play::before { background: var(--color-ink); border-color: var(--color-ink); box-shadow: 0 0 0 6px var(--color-bg); }
.s2:first-child.play::before { background: var(--color-primary); border-color: var(--color-primary); }
.s2:nth-child(n+2).play::before { background: var(--color-good); border-color: var(--color-good); }
.s2__time { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3); }
.s2 h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.08; letter-spacing: -.015em; }
.s2 p { margin-top: var(--space-3); font-size: var(--text-base); color: var(--color-muted); max-width: 42ch; }
.s2 .s2__bad { border-left: 3px solid var(--color-primary); padding-left: var(--space-3); color: var(--color-text); }
.s2__vis { display: grid; gap: var(--space-3); justify-items: stretch; max-width: 400px; width: 100%; justify-self: end; }

.nt { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border-radius: 18px; padding: var(--space-4); box-shadow: var(--shadow-lg); border: 1px solid var(--color-line); }
.nt b { display: block; font-size: 1rem; }
.nt small { font-size: .8125rem; color: var(--color-muted); }
.nt__ic { width: 40px; height: 40px; border-radius: 50%; flex: none; background-position: center; background-repeat: no-repeat; background-size: 55%; }
.nt__ic--miss { background-color: var(--color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85a1 1 0 01-1.41-.01L.29 13.08a1 1 0 010-1.41C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67a1 1 0 010 1.41l-2.48 2.48a1 1 0 01-1.41.01 11.3 11.3 0 00-2.67-1.85 1 1 0 01-.56-.9v-3.1A15 15 0 0012 9z'/%3E%3C/svg%3E"); }
.nt__ic--good { background-color: var(--color-good); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 70%; }
.nt--good b { color: var(--color-good); }

.chat { display: grid; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 24px; padding: var(--space-4); box-shadow: var(--shadow-md); }
.b { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: 20px; font-size: .9375rem; line-height: 1.4; margin: 0 !important; }
.b small { display: block; font-size: .6875rem; font-weight: 600; color: var(--color-muted); margin-bottom: 2px; }
.b--you { justify-self: start; background: var(--color-alt); color: var(--color-text) !important; border-bottom-left-radius: 6px; }
.b--them { justify-self: end; background: oklch(0.6 0.13 245); color: white !important; border-bottom-right-radius: 6px; }

.vc { background: var(--color-ink); color: var(--color-bg); border-radius: 24px; padding: var(--space-5); display: grid; gap: var(--space-3); box-shadow: var(--shadow-lg); }
.vc__top { display: flex; justify-content: space-between; font-size: .8125rem; color: oklch(0.8 0.01 70); font-variant-numeric: tabular-nums; }
.vc__live { color: oklch(0.75 0.15 150); font-weight: 600; }
.vc p { margin: 0 !important; color: var(--color-bg) !important; font-size: .9375rem; line-height: 1.45; max-width: none; }
.vc p b { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: oklch(0.75 0.1 245); margin-bottom: 2px; }
.vc p + p b { color: oklch(0.75 0.15 45); }

.inv { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 20px; padding: var(--space-5); box-shadow: var(--shadow-md); }
.inv small { display: block; font-size: .8125rem; color: var(--color-muted); }
.inv b { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color .4s; }
.inv__st { display: grid; flex: none; }
.inv__st i { grid-area: 1 / 1; font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); text-align: center; transition: opacity .4s, transform .4s var(--ease); }
.inv__st i:first-child { border: 2px solid var(--color-primary); color: var(--color-primary); }
.inv__st i:last-child { background: var(--color-good); color: white; border: 2px solid var(--color-good); opacity: 0; transform: scale(1.5) rotate(-8deg); }
.s2.paid .inv__st i:first-child { opacity: 0; }
.s2.paid .inv__st i:last-child { opacity: 1; transform: none; }
.s2.paid .inv b { color: var(--color-good); }

.story__end { margin-top: clamp(var(--space-12), 7vw, var(--space-20)); text-align: center; display: grid; justify-items: center; gap: var(--space-5); }
.story__sum { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 1.1rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -.015em; max-width: 22ch; }
.story__sum b { color: var(--color-good); }
#tryOpen { margin-top: var(--space-5); }
#tryBody { margin-top: var(--space-8); }
#try .section__head { margin-bottom: 0; }

/* reveal choreography (only when JS is running) */
.js .s2 .s2__vis > *, .js .s2 .chat > * { opacity: 0; transform: translateY(14px); }
.js .s2.play .s2__vis > *, .js .s2.play .chat > * { animation: msgIn .5s var(--ease) forwards; }
.js .s2.play .chat > :nth-child(2) { animation-delay: 1.1s; }
.js .s2.play .s2__vis > .nt--good { animation-delay: 2s; }
.js .s2.play .vc p:nth-of-type(2) { animation: msgIn .5s var(--ease) 1s forwards; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .s2 .s2__vis > *, .js .s2 .chat > *, .js .s2 .vc p { opacity: 1 !important; transform: none !important; animation: none !important; } }

@media (max-width: 760px) {
  .s2 { grid-template-columns: 1fr; gap: var(--space-5); }
  .s2__vis { justify-self: stretch; max-width: none; }
  .steps2 { padding-left: 30px; gap: var(--space-12); }
  .steps2::before { left: 8px; }
  .s2::before { left: -30px; width: 18px; height: 18px; top: 2px; }
  .s2 h3 { font-size: 1.5rem; }
  .s2 p { font-size: .9375rem; }
  .story__end .btn--xl { width: 100%; }
}
.s2 { max-width: none; width: 100%; }
.s2 h3 { max-width: 18ch; }
.s2__vis { max-width: 440px; }
.s2 { align-items: start; }