/* The landing page: white, generous space, one accent, and the product as the demo. */
body.landing { background: var(--white); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

header.site { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--white) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.bar nav { display: flex; align-items: center; gap: 24px; }
.bar .brand .wm { font-size: 28px; }
.bar nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .bar nav a:not(.btn):hover { color: var(--ink); } }
@media (max-width: 760px) { .bar nav a[href^="#"]:not(.btn) { display: none; } .bar nav { gap: 14px; } .bar .btn { padding: 8px 14px; min-height: 40px; } }

.btn.big { min-height: 52px; padding: 14px 22px; font-size: 17px; border-radius: 11px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 104px; }
.hero h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 22px; max-width: 12ch; }
.say { font-size: 20px; line-height: 1.5; color: #33413A; max-width: 34em; margin: 0; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 32px 0 0; }
.cta + .fine { margin-top: 14px; }
.cta .number { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fine { font-size: 15px; color: var(--muted); margin: 0; }

.demo { background: var(--sage-100); border-radius: 22px; padding: 32px; }
.call { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; display: grid; gap: 18px; box-shadow: 0 24px 48px -36px rgba(19, 32, 26, 0.55); }
.call-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.call-head strong, .call-head span:not(.avatar):not(.badge) { display: block; }
.call-head strong { font-size: 16px; } .call-head div span { font-size: 14px; color: var(--muted); }
.lines { display: grid; gap: 10px; }
.lines p { margin: 0; padding-left: 20px; text-indent: -20px; font-size: 17px; line-height: 1.45; }
.lines p::before { content: "\2014\00a0"; }
.lines .caller { color: var(--muted); } .lines .desk { color: var(--ink); font-weight: 500; }
.call-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.call-foot time { color: var(--muted); } .call-foot span { color: var(--muted); }
.payoff { margin: 22px 4px 0; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.payoff mark { background: var(--sage-300); }

/* The hero cycles through example calls. Each plays at the pace people talk, stamps what the front desk did, then the payoff.
   Scenes share one grid cell, so the panel keeps the tallest scene's height and never jumps. */
.demo-top { display: flex; align-items: center; gap: 10px; margin: -8px -8px 18px; }
.scene-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; padding: 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.scene-tabs::-webkit-scrollbar { display: none; }
.scene-tabs button { position: relative; flex: none; overflow: hidden; font: 600 13.5px/1 var(--font); color: var(--pine-800); background: transparent; border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.scene-tabs button:active { transform: scale(0.97); }
.scene-tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 32, 26, 0.08); }
.scene-tabs button i { position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--pine); transform: scaleX(0); transform-origin: left; }
.scene-tabs button:focus-visible, .scene-pause:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .scene-tabs button[aria-selected="false"]:hover { background: color-mix(in srgb, var(--white) 55%, transparent); } }
.scene-pause { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--white); color: var(--pine-800); display: grid; place-items: center; cursor: pointer; }
.scene-pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero > *, .demo { min-width: 0; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.scene { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.scene.on { visibility: visible; opacity: 1; }
.demo.cycling .scene-tabs button[aria-selected="true"] i { animation: scene-progress var(--scene-ms, 8200ms) linear both; }
.demo.cycling.paused .scene-tabs button[aria-selected="true"] i { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  .scene { transition: opacity 240ms ease, filter 240ms ease, visibility 0s linear 240ms; filter: blur(4px); }
  .scene.on { transition: opacity 240ms ease, filter 240ms ease; filter: none; }
  .scene.play .lines p { animation: hero-rise 360ms var(--ease-out) both; }
  .scene.play .lines p:nth-child(1) { animation-delay: 250ms; }
  .scene.play .lines p:nth-child(2) { animation-delay: 1100ms; }
  .scene.play .lines p:nth-child(3) { animation-delay: 2300ms; }
  .scene.play .lines p:nth-child(4) { animation-delay: 2900ms; }
  .scene.play .call-head .badge { animation: hero-stamp 380ms var(--ease-out) 3600ms both; }
  .scene.play .call-foot { animation: hero-unfold 460ms var(--ease-in-out) 3850ms both; }
  .scene.play .payoff { animation: hero-rise 420ms var(--ease-out) 4350ms both; }
  .scene.play .payoff mark { background: linear-gradient(var(--sage-300), var(--sage-300)) no-repeat 0 0 / 100% 100%; animation: hero-marker 700ms var(--ease-out) 4700ms both; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes hero-stamp { from { opacity: 0; transform: scale(0.94); filter: blur(3px); } }
@keyframes hero-unfold { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-4px); } }
@keyframes hero-marker { from { background-size: 0% 100%; } }
@keyframes scene-progress { to { transform: scaleX(1); } }

.section { padding-top: 80px; padding-bottom: 80px; border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 40px; max-width: 18ch; text-wrap: balance; }
.how { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.how li { counter-increment: step; display: grid; gap: 10px; align-content: start; }
.how li::before { content: counter(step); width: 34px; height: 34px; border-radius: 50%; background: var(--sage-100); color: var(--pine-800); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.how h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.how p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; }
.split h2 { margin-bottom: 16px; }
.modes { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 48px -40px rgba(19, 32, 26, 0.5); max-width: 620px; }
.always { list-style: none; margin: 0; padding: 20px 24px; display: grid; gap: 10px; background: var(--sage-50); border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.4; }
.always li { display: flex; gap: 12px; align-items: flex-start; }
.always svg { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--sage-200); fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modes fieldset { border: 0; margin: 0; padding: 20px 24px 24px; display: grid; gap: 10px; }
.modes legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.mode { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.mode input { appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--white); display: grid; place-items: center; cursor: pointer; transition: border-color 150ms ease; }
.mode input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pine); transform: scale(0); transition: transform 160ms var(--ease-out); }
.mode input:checked { border-color: var(--pine); }
.mode input:checked::after { transform: scale(1); }
.mode input:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.mode:has(input:checked) { border-color: var(--pine); background: var(--sage-50); }
@media (hover: hover) and (pointer: fine) { .mode:not(:has(input:checked)):hover { border-color: var(--line-strong); } }
.mode strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mode > span > span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--muted); }

.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 16px 0 80px; padding: 56px 48px; border-radius: 22px; background: var(--sage-100); }
.band h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.025em; }
.band p { margin: 0; font-size: 17px; color: #4A5852; }

.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.site-foot a { color: var(--muted); margin-left: 18px; }
.site-foot a:first-child { margin-left: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 72px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .demo { padding: 18px; }
  .band { padding: 36px 24px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
}

.link-cta { font-weight: 600; font-size: 16px; color: var(--pine); }
.offer { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 13px 8px 11px; border: 1px solid var(--sage-200); border-radius: 9px; background: var(--sage-50); color: var(--pine-800); font-size: 14px; font-weight: 500; line-height: 1.3; }
.offer svg { flex: none; width: 15px; height: 7.5px; fill: var(--pine); }
.access-copy .offer { margin-top: 22px; background: var(--white); border-color: var(--white); }

/* Pricing: one plan, said plainly. */
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 24px 48px -40px rgba(19, 32, 26, 0.5); }
.plan-title { font-size: 18px; }
.plan .price { font-size: 44px; font-weight: 600; letter-spacing: -0.035em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.plan .includes { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.plan .includes li { display: flex; gap: 10px; align-items: flex-start; }
.plan .includes li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sage-100) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 4.8 9 10 3' fill='none' stroke='%23416851' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Questions: open one at a time, readable on a phone. */
.faq { display: grid; max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; color: var(--muted); font-size: 22px; line-height: 1; transition: transform 160ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 62ch; }

/* Early access */
.access { align-items: flex-start; }
.access-copy { flex: 1 1 320px; min-width: 0; }
.access-form, .thanks { flex: 1 1 360px; min-width: 0; background: var(--white); border-radius: 16px; padding: 24px; }
.access-form label { margin-top: 14px; } .access-form label:first-of-type { margin-top: 0; }
.access-form button { width: 100%; margin-top: 20px; }
.optional { color: var(--muted); font-weight: 400; }
.notice-at { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.thanks { display: grid; gap: 4px; font-size: 17px; } .thanks span { color: var(--muted); }
.access .errors { margin-bottom: 14px; }