/* ==========================================================================
   Callback Clone: site stylesheet
   One token set for every page. No framework, no build step.
   Sections: 1 tokens · 2 base · 3 layout · 4 type · 5 controls · 6 header/nav
             7 components · 8 page sections · 9 footer · 10 motion · 11 utilities
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  /* v2 (2026-11-07): cool porcelain ground, forest fields; see ops/website/design-direction-2026-11-07.md */
  --paper: #F3F5F2;
  --paper-2: #E7ECE6;
  --surface: #FFFFFF;
  --ink: #0F1C17;
  --ink-2: #3D4A44;
  --muted: #5A6660;
  --line: rgba(15, 28, 23, .11);
  --line-2: rgba(15, 28, 23, .2);

  --forest: #234B3B;      /* logo dark green (2026-10-18 logo) */
  --forest-2: #2D5D4A;
  --night: #0F241B;       /* same hue as the logo, darkened for night sections */
  --night-2: #15301F;
  --night-line: rgba(234, 242, 238, .14);
  --night-ink: #EAF2EE;
  --night-muted: #A6BCB3;
  --mint: #3DD6A8;
  --mint-ink: #0A6E53;
  --mint-soft: #E1F2EA;
  --signal: #B4441E;      /* warnings only: missed calls, lost revenue */
  --signal-soft: #F7E6DE;
  --copper: #B87333;      /* third brand color (2026-11-02): rules, dots, borders */
  --copper-ink: #96582E;  /* copper for small text on paper (4.5:1+) */
  --copper-soft: #F3E6DA;
  --copper-night: #D9A27A; /* copper on night sections */

  --font: 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --display: 'Funnel Display', 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .875rem;     /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-body: 1.0625rem; /* 17 */
  --fs-lede: 1.1875rem; /* 19 */
  --fs-h4: 1.25rem;     /* 20 */
  --fs-h3: 1.5rem;      /* 24 */
  --fs-h2: clamp(2.125rem, 1.3rem + 2.7vw, 3.6rem);
  --fs-h1: clamp(2.9rem, 1.2rem + 4.3vw, 5.4rem);
  --fs-statement: clamp(2.2rem, 1.2rem + 3.7vw, 4.6rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(64px, 9vw, 128px);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;

  --r-control: 10px;
  --r-panel: 14px;
  --r-device: 16px;

  --raise: 0 1px 2px rgba(10, 30, 24, .05), 0 24px 48px -24px rgba(10, 30, 24, .28);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 160ms;
  --t-slow: 520ms;
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--forest); color: #fff; }
html { accent-color: var(--forest); caret-color: var(--forest); scrollbar-color: rgba(15,28,23,.35) transparent; }
a { text-underline-offset: .22em; text-decoration-thickness: from-font; }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 3px; border-radius: 4px; }
.night :focus-visible { outline-color: var(--mint); }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--s4); top: -64px; z-index: 200;
  background: var(--forest); color: #fff; font-weight: 600; font-size: var(--fs-sm);
  padding: var(--s3) var(--s4); border-radius: var(--r-control); text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 3. Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: calc(760px + var(--gutter) * 2); }
.section { padding: var(--section) 0; }
.section-tight { padding: calc(var(--section) * .66) 0; }
.section + .section.rule { border-top: 1px solid var(--line); }
.band { background: var(--paper-2); }
.night { background: var(--night); color: var(--night-ink); }
.night .muted, .night .lede { color: var(--night-muted); }
.grid-2 { display: grid; gap: var(--s7); }
@media (min-width: 960px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.split { display: grid; gap: var(--s7); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .split-sticky > :first-child { position: sticky; top: 112px; align-self: start; }
}
main { display: block; overflow-x: clip; }

/* 4. Type ----------------------------------------------------------------- */
.display, .h1, .h2, .statement {
  font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
}
.h1 { font-size: var(--fs-h1); letter-spacing: -.035em; line-height: .96; }
.h1-long { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.02; }
.h2 { font-size: var(--fs-h2); line-height: 1.04; }
.h3, .h4 { font-family: var(--display); }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.statement { font-size: var(--fs-statement); line-height: 1.04; max-width: 21ch; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 38rem; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); line-height: 1.5; }
.xs { font-size: var(--fs-xs); line-height: 1.45; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.label {
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0;
  color: var(--ink-2); text-transform: none;
}
.night .label { color: var(--night-muted); }
.accent { color: var(--mint-ink); }
.night .accent { color: var(--mint); }
.prose p + p { margin-top: var(--s4); }
.prose h2 { font-size: var(--fs-h4); font-weight: 650; margin: var(--s7) 0 var(--s3); letter-spacing: -.01em; }
.prose a { color: var(--mint-ink); }
.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-5 > * + * { margin-top: var(--s5); }
.stack-6 > * + * { margin-top: var(--s6); }

/* 5. Controls ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-control);
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--forest-2); }
@media (hover: hover) and (pointer: fine) { .btn:not(:disabled):hover { transform: translateY(-1px); } }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); padding: 0 var(--s3); }
.btn-ghost:hover { color: var(--forest); }
.btn-sm { min-height: 40px; padding: 0 var(--s4); font-size: var(--fs-sm); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.night .btn-primary { background: var(--mint); color: var(--night); }
.night .btn-primary:hover { background: #6BE3BF; }
.night .btn-secondary { background: transparent; color: var(--night-ink); border-color: var(--night-line); }
.night .btn-secondary:hover { border-color: var(--night-ink); }
.btn[aria-busy="true"] { opacity: .8; cursor: progress; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.link-arrow span { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }
.link-arrow.accent { color: var(--mint-ink); }
.night .link-arrow { color: var(--night-ink); }
.text-link { color: var(--mint-ink); text-underline-offset: 3px; }
.night .text-link { color: var(--mint); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
@media (max-width: 559px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .cta-row .link-arrow { justify-content: center; }
}
.terms-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--muted); }
.terms-line li { list-style: none; display: inline-flex; align-items: center; gap: var(--s2); }
.terms-line li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }
.night .terms-line { color: var(--night-muted); }
.night .terms-line li::before { background: var(--copper-night); }

.field { display: block; }
.field > span { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s2); }
.input, select.input {
  width: 100%; min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-control);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: var(--fs-md); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus { outline: none; border-color: var(--mint-ink); box-shadow: 0 0 0 3px rgba(11, 122, 92, .18); }
select.input { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2347524E' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* 6. Header / nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(246, 244, 239, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; gap: var(--s5); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img:first-child { width: 34px; height: 32px; object-fit: contain; }
.brand-name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em; }
.brand-word { height: 16px; width: auto; }
@media (max-width: 379px) { .brand-word { height: 14px; } }
.nav-primary { display: none; align-items: center; gap: var(--s1); margin-left: var(--s4); }
.nav-primary > a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s3);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; cursor: pointer; border-radius: var(--r-control);
  transition: color var(--t-fast) var(--ease);
}
.nav-primary > a:hover, .nav-drop > button:hover { color: var(--ink); }
.nav-primary a[aria-current="page"], .nav-drop.is-current > button { color: var(--ink); box-shadow: inset 0 -2px 0 var(--forest); border-radius: 0; }
.nav-drop { position: relative; }
.nav-drop svg { transition: transform var(--t-fast) var(--ease); }
.nav-drop[data-open="true"] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--raise);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.nav-drop[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-menu a { display: block; padding: 10px var(--s3); border-radius: 6px; text-decoration: none; font-size: var(--fs-sm); color: var(--ink); }
.nav-menu a small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: var(--paper); }
.nav-menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.header-actions .btn-ghost, .header-actions .btn-primary { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-control); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer;
}
.menu-icon { position: relative; width: 18px; height: 12px; }
.menu-icon span { position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 220ms var(--ease), opacity var(--t-fast); }
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 5px; }
.menu-icon span:nth-child(3) { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (min-width: 600px) { .header-actions .btn-primary { display: inline-flex; } }
@media (min-width: 1040px) {
  .nav-primary { display: flex; }
  .header-actions .btn-ghost { display: inline-flex; }
  .menu-toggle { display: none; }
}

.mobile-menu {
  position: fixed; inset: 68px 0 0 0; z-index: 79; background: var(--paper);
  overflow-y: auto; padding: var(--s5) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: 1px solid var(--line); text-decoration: none; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em;
}
.mobile-menu nav a[aria-current="page"] { color: var(--mint-ink); }
.mobile-menu .mm-group { margin-top: var(--s5); }
.mobile-menu .mm-group a { font-size: var(--fs-body); font-weight: 500; min-height: 48px; }
.mobile-menu .mm-actions { display: grid; gap: var(--s3); margin-top: var(--s6); }
body.menu-open { overflow: hidden; }
@media (min-width: 1040px) { .mobile-menu { display: none; } }

/* 7. Components ----------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  background: var(--mint-soft); color: var(--forest);
}
.chip-missed { background: var(--signal-soft); color: var(--signal); }
.chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Example call: the product demonstration */
.call {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-device);
  box-shadow: var(--raise); overflow: hidden; max-width: 500px; width: 100%;
}
.call-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); background: linear-gradient(var(--surface), var(--surface)); }
.call-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; flex-shrink: 0; position: relative; }
.call-avatar img { width: 26px; height: 24px; object-fit: contain; }
.call-avatar::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--mint-ink); opacity: 0; }
.call.is-live .call-avatar::after { animation: ring 1.8s var(--ease) infinite; }
@keyframes ring { 0% { opacity: .7; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.35); } }
.call-who { line-height: 1.25; }
.call-who strong { display: block; font-size: var(--fs-md); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-who > span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.call-who { min-width: 0; }
.call-head .chip { margin-left: auto; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 479px) {
  .call-head { flex-wrap: wrap; padding: var(--s4); }
  .call-head .chip { margin-left: 52px; }
  .call-body { padding: var(--s4); min-height: 0; }
  .call-result { padding: var(--s4); }
  .line { grid-template-columns: 48px 1fr; }
}
.call-body { padding: var(--s5); display: grid; gap: var(--s3); min-height: 268px; align-content: start; }
.line { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); font-size: var(--fs-sm); line-height: 1.5; }
.line b { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); padding-top: 2px; }
.line.is-ai p { color: var(--ink); }
.line.is-ai b { color: var(--mint-ink); }
.line.is-caller p { color: var(--ink-2); }
.call-result { display: grid; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); border-top: 1px dashed var(--line-2); background: var(--paper); }
.booked { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); font-weight: 600; }
.booked svg { color: var(--mint-ink); }
.sms {
  justify-self: end; max-width: 86%; background: var(--forest); color: #fff; border-radius: 14px 14px 4px 14px;
  padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.45;
}
.sms small { display: block; font-family: var(--mono); font-size: 11px; opacity: .75; margin-bottom: 2px; }
.call-caption { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--muted); text-align: center; max-width: 500px; }
.js .call [data-step] { opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.js .call [data-step].is-shown { opacity: 1; transform: none; }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* 24-hour coverage diagram */
.coverage { display: grid; gap: var(--s4); }
.cov-row { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 720px) { .cov-row { grid-template-columns: 180px 1fr; align-items: center; gap: var(--s5); } }
.cov-label { font-size: var(--fs-sm); font-weight: 600; }
.cov-label span { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.cov-track { position: relative; height: 36px; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1px), var(--line) calc(100% / 24 - 1px) calc(100% / 24)); border: 1px solid var(--line); overflow: hidden; }
.cov-fill { position: absolute; top: 0; bottom: 0; background: var(--forest); }
.cov-fill.is-gap { background: repeating-linear-gradient(-45deg, var(--signal-soft) 0 6px, transparent 6px 12px); border-left: 1px solid var(--signal); border-right: 1px solid var(--signal); }
.cov-fill.is-team { background: var(--ink-2); opacity: .85; }
.cov-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (min-width: 720px) { .cov-scale { margin-left: calc(180px + var(--s5)); } }
.cov-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-xs); color: var(--muted); }
.cov-legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.cov-legend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

/* Ruled lists (instead of card grids) */
.ruled { display: grid; border-top: 1px solid var(--line); }
.ruled > * { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.night .ruled, .night .ruled > * { border-color: var(--night-line); }
@media (min-width: 840px) {
  .ruled.cols-3, .ruled.cols-4 { border-bottom: 1px solid var(--line); }
  .ruled.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ruled.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .ruled.cols-3 > *, .ruled.cols-4 > * { border-bottom: 0; padding: var(--s6) var(--s5) var(--s6) 0; }
  .ruled.cols-3 > * + *, .ruled.cols-4 > * + * { border-left: 1px solid var(--line); padding-left: var(--s5); }
  .night .ruled.cols-3 > * + *, .night .ruled.cols-4 > * + * { border-color: var(--night-line); }
}
.step-num { font-family: var(--mono); font-size: var(--fs-sm); color: var(--forest); display: block; margin-bottom: var(--s4); }
.night .step-num { color: var(--mint); }
.ruled h3 { font-size: var(--fs-h4); font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.ruled p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-md); }
.night .ruled p { color: var(--night-muted); }

.feature-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .feature-list { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }
.feature-list li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.feature-list svg { color: var(--mint-ink); margin-top: 3px; }
.feature-list strong { display: block; font-weight: 600; }
.feature-list span { color: var(--ink-2); font-size: var(--fs-md); }

.check-list { display: grid; gap: var(--s3); }
.check-list li { list-style: none; display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); font-size: var(--fs-md); line-height: 1.45; }
.check-list li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.check-list.x li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4441E' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); }
.check-list.sm li { font-size: var(--fs-sm); }

/* Before / after comparison */
.compare { display: grid; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--surface); }
@media (min-width: 840px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare > div { padding: var(--s6); }
.compare > div + div { border-top: 1px solid var(--line); }
@media (min-width: 840px) { .compare > div + div { border-top: 0; border-left: 1px solid var(--line); } }
.compare .is-before { background: var(--paper); }
.compare > .plan.is-featured { border-radius: 0; margin: 0; }
.compare h3 { margin-bottom: var(--s5); }

/* Pricing table */
.plans { display: grid; border: 1px solid var(--line-2); border-radius: var(--r-panel); background: var(--surface); }
@media (min-width: 880px) { .plans { grid-template-columns: repeat(3, 1fr); } .plans.has-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 880px) and (max-width: 1099px) { .plans.has-4 { grid-template-columns: repeat(2, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s6); }
.plan + .plan { border-top: 1px solid var(--line); }
@media (min-width: 880px) {
  .plans:not(.has-4) .plan + .plan { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .plans.has-4 .plan + .plan { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 880px) and (max-width: 1099px) {
  .plans.has-4 .plan:nth-child(2), .plans.has-4 .plan:nth-child(4) { border-left: 1px solid var(--line); }
  .plans.has-4 .plan:nth-child(2) { border-top: 0; }
}
.plan.is-featured { background: var(--forest); color: #fff; border-radius: var(--r-panel); }
.plans .plan.is-featured { margin: -1px; }
.plan.is-featured .price span, .plan.is-featured .plan-meta { color: #BFD3CA; }
.plan.is-featured .plan-meta .mono { color: #fff; }
.plan.is-featured .check-list { border-top-color: rgba(255,255,255,.16); }
.plan.is-featured .check-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DD6A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.plan.is-featured .btn-primary { background: #fff; color: var(--forest); }
.plan.is-featured .btn-primary:hover { background: var(--mint-soft); }
.plan.is-featured .link-arrow { color: #fff; }
.plan.is-featured .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.plan.is-featured .btn-secondary:hover { border-color: #fff; }
.plan.is-featured :focus-visible { outline-color: var(--mint); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-family: var(--display); font-weight: 600; letter-spacing: -.015em; font-size: var(--fs-h4); }
.plan-flag { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--night); background: var(--mint); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.price { display: flex; align-items: baseline; gap: 4px; margin-top: var(--s4); }
.price strong { font-family: var(--display); font-size: clamp(2.6rem, 2rem + 1.8vw, 3.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); font-size: var(--fs-md); }
.plan-meta { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }
.plan-meta div + div { margin-top: 2px; }
.plan-meta .mono { color: var(--ink); }
.plan .check-list { margin: var(--s5) 0 var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); flex: 1; }
.plan .btn + .btn, .plan .btn + .link-arrow { margin-top: var(--s2); }
.plan .link-arrow { justify-content: center; font-size: var(--fs-sm); }
.plans-note { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--muted); }

/* Phones and small tablets: plans become a swipeable row with a peek of the next card */
.plan-dots { display: none; }
@media (max-width: 879px) {
  .plans {
    display: flex; gap: var(--s3); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: var(--s1) var(--gutter) var(--s2);
    border: 0; background: none; border-radius: 0;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plans .plan, .plans .plan + .plan {
    flex: 0 0 min(86%, 380px); scroll-snap-align: start; border: 1px solid var(--line-2); border-radius: var(--r-panel);
    background: var(--surface); padding: var(--s5);
  }
  .plans .plan.is-featured { margin: 0; border-color: var(--forest); background: var(--forest); }
  .plan-dots { display: flex; align-items: center; justify-content: center; gap: var(--s1); margin-top: var(--s2); }
  .plan-dots button {
    position: relative; min-width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0 var(--s2) 14px;
    font-family: var(--mono); font-size: 11px; color: var(--muted);
  }
  .plan-dots button::after {
    content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    background: var(--line-2); transition: transform var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
  }
  .plan-dots button[aria-current="true"] { color: var(--ink); }
  .plan-dots button[aria-current="true"]::after { background: var(--forest); transform: scale(1.35); }
}

/* Add-on tiles (hooks: .addon-tile, .on, .addon-check, [data-addon-btn]) */
.addons { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .addons { grid-template-columns: repeat(3, 1fr); } }
.addon-tile {
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r-panel);
  background: var(--surface); border: 1px solid var(--line-2); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.addon-tile:hover { border-color: var(--ink-2); }
.addon-tile.on { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); background: #FBFDFC; }
.addon-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.addon-price { font-family: var(--mono); font-weight: 500; color: var(--forest); }
.addon-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: #fff; font-size: 13px; flex-shrink: 0; }
.addon-tile.on .addon-check { border-color: var(--forest); background: var(--forest) !important; }
.addon-tile p { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; }
.addon-tile .btn { margin-top: var(--s3); }
.addon-tile.on .btn { border-color: var(--forest); }
.addon-row { flex-direction: row; align-items: flex-start; gap: var(--s3); }
.addon-row > div { flex: 1; }
.plan-tiles { display: grid; gap: var(--s2); }
@media (min-width: 560px) { .plan-tiles { grid-template-columns: repeat(3, 1fr); } }
.plan-tile { display: block; padding: var(--s4); border-radius: var(--r-panel); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.plan-tile:hover { border-color: var(--ink-2); }
.plan-tile.on { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.plan-tile strong { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.summary-bar { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--line-2); }
@media (min-width: 760px) { .summary-bar { grid-template-columns: 1fr auto; align-items: center; } }
.summary-total { font-family: var(--mono); font-size: 1.375rem; font-weight: 500; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s6); }
.panel-quiet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s5); }

/* FAQ (native details) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: var(--s4) 0;
  cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-body); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; margin-right: 4px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--forest); }
.faq .answer { padding: 0 var(--s7) var(--s5) 0; color: var(--ink-2); }
.faq .answer a { color: var(--mint-ink); }

/* Calculator */
.calc { display: grid; gap: var(--s5); }
@media (min-width: 960px) { .calc { grid-template-columns: 7fr 5fr; align-items: start; } .calc-out { position: sticky; top: 100px; } }
.calc-in .field + .field { margin-top: var(--s6); }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.calc-row label { font-weight: 600; font-size: var(--fs-md); }
.calc-num { width: 96px; min-height: 48px; text-align: right; font-family: var(--mono); font-size: 1.25rem; border: 1px solid var(--line-2); border-radius: var(--r-control); background: var(--surface); padding: 0 var(--s3); }
.calc-num:focus { outline: none; border-color: var(--mint-ink); box-shadow: 0 0 0 3px rgba(11, 122, 92, .18); }
.calc-help { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--muted); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--forest) var(--fill, 10%), var(--paper-2) var(--fill, 10%)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--paper-2); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--forest); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--forest); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--forest); }
.calc-out .panel { padding: 0; overflow: hidden; }
.calc-block { padding: var(--s5) var(--s6); }
.calc-block + .calc-block { border-top: 1px solid var(--line); }
.calc-big { font-family: var(--display); font-size: clamp(2.4rem, 1.75rem + 2.2vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.calc-big.loss { color: var(--signal); }
.calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.calc-pair strong { display: block; font-family: var(--mono); font-size: 1.25rem; font-weight: 500; margin-top: var(--s1); font-variant-numeric: tabular-nums; }

/* Demo booking */
.booking-frame { position: relative; min-height: 650px; border-radius: var(--r-panel); overflow: hidden; background: var(--surface); }
.skeleton { position: absolute; inset: 0; padding: var(--s6); display: grid; gap: var(--s4); align-content: start; }
.skeleton i { display: block; height: 16px; border-radius: 6px; background: linear-gradient(90deg, var(--paper-2), var(--paper), var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton i.tall { height: 240px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 8. Page sections -------------------------------------------------------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 var(--section); }
.hero-grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s7); } }
.hero .lede { margin-top: var(--s5); }
.hero .cta-row { margin-top: var(--s6); }
.hero .terms-line { margin-top: var(--s5); }
/* Desktop: the hero owns the first screen, content centered in it */
@media (min-width: 1000px) and (min-height: 680px) {
  .hero { min-height: calc(100svh - 68px); display: flex; align-items: center; padding: var(--s7) 0 var(--s8); }
  .hero > .wrap { width: 100%; }
}
.hero-visual { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1000px) { .hero-visual { align-items: flex-end; } .hero-visual .call-caption { align-self: flex-end; } }
.hero-divider { display: none; }
.hero-built { margin-top: var(--s6); }
.hero-built p { font-size: var(--fs-sm); color: var(--muted); }
.hero-built ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.hero-built ul { gap: 0 var(--s5); }
.hero-built a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--fs-md); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .3em;
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hero-built a:hover { color: var(--forest); text-decoration-color: var(--forest); }
@media (max-width: 719px) {
  .hero { padding: var(--s6) 0 var(--s8); }
  .hero .h1 { font-size: clamp(2.3rem, 10.6vw, 3.6rem); letter-spacing: -.03em; }
  .hero .lede { margin-top: var(--s4); }
  .hero .cta-row { margin-top: var(--s5); }
  .hero-built { margin-top: var(--s6); }
}
.page-hero { padding: clamp(48px, 8vw, 112px) 0 calc(var(--section) * .6); }
.page-hero .lede { margin-top: var(--s5); }
.section-head { max-width: 46rem; margin-bottom: var(--s7); }
.section-head .lede { margin-top: var(--s4); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.night .lede { color: var(--night-muted); }

.industry-grid { display: grid; border-top: 1px solid var(--line-2); }
.industry {
  position: relative; display: grid; gap: var(--s2); padding: var(--s5) 56px var(--s5) 0; border-bottom: 1px solid var(--line-2);
  text-decoration: none; color: var(--ink);
}
@media (min-width: 840px) {
  .industry { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: var(--s6); padding: var(--s6) 72px var(--s6) 0; }
}
.industry h3 { font-family: var(--display); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; transition: color var(--t-ui) var(--ease); }
.industry h3 span {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--forest); font-size: 1.1rem; letter-spacing: 0;
  transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.industry p { color: var(--ink-2); font-size: var(--fs-body); max-width: 44ch; }
@media (hover: hover) and (pointer: fine) {
  .industry:hover h3 { color: var(--forest); }
  .industry:hover h3 span { background: var(--forest); border-color: var(--forest); color: #fff; transform: translateX(2px); }
}

.timeline { display: grid; gap: 0; counter-reset: t; }
.timeline li { list-style: none; position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); padding-bottom: var(--s6); }
.timeline li::before { counter-increment: t; content: counter(t); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-sm); background: var(--surface); position: relative; z-index: 1; }
.timeline li::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 1px; background: var(--line-2); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline h3 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.3; padding-top: 3px; }
.timeline p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-md); }
.night .timeline li::before { background: var(--night-2); border-color: var(--night-line); color: var(--mint); }
.night .timeline li::after { background: var(--night-line); }
.night .timeline p { color: var(--night-muted); }

.cta-band { padding: var(--section) 0; }
.cta-band .statement { max-width: 18ch; }
.cta-band .cta-row { margin-top: var(--s6); }
.cta-band .terms-line { margin-top: var(--s5); }
.cta-grid { display: grid; gap: var(--s6); align-items: end; }
@media (min-width: 960px) { .cta-grid { grid-template-columns: 1.3fr 1fr; } }

.contact-card { border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s6); }
.contact-card a { font-weight: 600; text-decoration: none; color: var(--forest); }

/* 9. Footer --------------------------------------------------------------- */
.site-footer { background: #0F231B; border-top: 1px solid var(--night-line); color: var(--night-muted); padding: var(--s8) 0 var(--s6); font-size: var(--fs-sm); }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand .brand { color: var(--night-ink); }
.footer-brand .brand img:first-child { background: var(--night-ink); border-radius: 8px; padding: 4px; width: 38px; height: 36px; }
.footer-brand .brand-word { height: 15px; filter: brightness(0) invert(1); opacity: .94; }
.footer-brand p { margin-top: var(--s4); max-width: 30ch; }
.site-footer h2 { font-size: var(--fs-sm); font-weight: 600; color: var(--night-ink); margin-bottom: var(--s4); }
.site-footer ul { list-style: none; display: grid; gap: var(--s2); }
.site-footer a { color: var(--night-muted); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.site-footer a:hover { color: var(--night-ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--night-line); font-size: var(--fs-xs); }

/* Sticky mobile CTA */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; gap: var(--s2);
    padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform var(--t-slow) var(--ease);
  }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta .btn-primary { flex: 1; }
  .mobile-cta .icon-btn { width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-control); display: grid; place-items: center; color: var(--ink); }
  .mobile-cta .btn-secondary { padding: 0 var(--s4); }
  body.has-mobile-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* 10. Motion -------------------------------------------------------------- *
   Rules (from the web-animation skills):
   - Only transform and opacity animate per frame (compositor only).
   - Entrances ease out, exits ease in; UI feedback 100-250ms, reveals ~500ms.
   - Motion is opt-in: everything below is scoped to html.js:not(.rm).
     .rm ("reduced motion") is set in <head> from prefers-reduced-motion
     (live-updating) or ?reduce=1 for testing. Reduced motion is tiered:
     large movement is removed, short opacity fades and feedback stay.
   ------------------------------------------------------------------------ */
:root {
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-ui: 180ms;
}

/* 10a. Cross-page transitions (View Transitions API, multi-page).
   Header holds still; the page content crossfades with a short lift.
   Browsers without support navigate instantly. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
main { view-transition-name: page; }
::view-transition-old(page) { animation: vt-out 160ms var(--ease-in) both; }
::view-transition-new(page) { animation: vt-in 320ms var(--ease) both; }
::view-transition-group(site-header) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.rm::view-transition-old(page), .rm::view-transition-new(page) { animation-duration: 120ms; animation-name: vt-fade; }
@keyframes vt-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page), ::view-transition-new(page) { animation-duration: 120ms; animation-name: vt-fade; }
}

/* 10b. Hero entrance: one short staggered sequence on load */
@keyframes rise { from { transform: translateY(16px); } }  /* v2: visible from the first frame */
@keyframes rise-card { from { transform: translateY(24px) scale(.985); } }
@keyframes fade { from { opacity: 0; } }
.js:not(.rm) .intro { animation: rise 640ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.js:not(.rm) .intro-card { animation: rise-card 820ms var(--ease) both; animation-delay: 280ms; }
/* The headline is the likely LCP element: it moves but never starts invisible */
@keyframes rise-solid { from { transform: translateY(14px); } }
.js:not(.rm) h1.intro { animation-name: rise-solid; animation-delay: 0ms; }
.js.rm h1.intro { animation: none; }
.js.rm .intro, .js.rm .intro-card { animation: fade 150ms ease both; }

/* 10c. Scroll reveals, with optional per-child stagger */
/* v2: no scroll fade-ins. .reveal / .stagger stay as hooks (the observer still adds .is-in,
   which drives the authored moments: coverage bars, ruled-step rules, statement words). */

/* Ruled step lists: the top rule of each step draws across as it arrives */
.ruled.stagger > * { position: relative; }
.js .ruled.stagger > *::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--copper);
  transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 120ms);
}
.night .ruled.stagger > *::before { background: var(--copper-night); }
.js .ruled.stagger.is-in > *::before { transform: scaleX(1); }
.js.rm .ruled.stagger > *::before { transform: scaleX(1); transition: none; }

/* 10d. Coverage diagram: the bars fill in from midnight, team first, then 24/7 */
.js .coverage .cov-fill { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease); }
.js .coverage .cov-row:nth-child(1) .cov-fill { transition-delay: calc(var(--seg, 0) * 90ms); }
.js .coverage .cov-row:nth-child(2) .cov-fill { transition-duration: 1400ms; transition-delay: 650ms; }
.js .coverage.is-in .cov-fill, .js .is-in .coverage .cov-fill { transform: scaleX(1); }
.js.rm .coverage .cov-fill { transform: none; transition: none; }

/* 10e. Setup timeline: the connecting line draws as you scroll (scroll-driven where supported) */
@supports (animation-timeline: view()) {
  .js:not(.rm) .timeline li::after {
    transform-origin: top center; animation: grow-y linear both;
    animation-timeline: view(); animation-range: entry 40% cover 55%;
  }
  @keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

/* 10f. Statement: words light up in reading order (opacity only, stays readable) */
.js .statement[data-words] .w { opacity: .22; transition: opacity 420ms var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.js .statement[data-words].is-lit .w { opacity: 1; }
.js.rm .statement[data-words] .w { opacity: 1; transition: none; }

/* 10g. Example call: live waveform, timer, booked pop, SMS slide */
.call-wave { display: flex; align-items: center; gap: 3px; height: 18px; margin-left: auto; }
.call-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--mint-ink); transform: scaleY(.25); transform-origin: center; }
.call.is-live .call-wave i { animation: wave 900ms ease-in-out infinite; }
.call-wave i:nth-child(2) { animation-delay: -150ms !important; } .call-wave i:nth-child(3) { animation-delay: -420ms !important; }
.call-wave i:nth-child(4) { animation-delay: -600ms !important; } .call-wave i:nth-child(5) { animation-delay: -300ms !important; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.call.is-done .call-wave { opacity: 0; transition: opacity 300ms ease; }
.call-time { font-variant-numeric: tabular-nums; }
.call-time:empty { display: none; }
.call-time::before { content: " \00b7  "; white-space: pre; }
.call-wave + .chip { margin-left: var(--s3); }
@media (max-width: 479px) { .call-wave { margin-left: auto; } .call-wave + .chip { margin-left: 52px; order: 3; } }
.call-replay { visibility: hidden; margin-top: var(--s3); }
.call-replay.is-ready { visibility: visible; }
html:not(.js) .call-replay, .js.rm .call-replay { display: none; }
.js .call .booked[data-step] { transform: translateY(6px) scale(.96); transform-origin: left center; }
.js .call .booked[data-step].is-shown { transform: none; transition: opacity 300ms var(--ease), transform 420ms var(--ease-spring); }
.js .call .booked.is-shown svg { animation: pop 420ms var(--ease-spring) both 120ms; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.js .call .sms[data-step] { transform: translateY(10px) scale(.94); transform-origin: right bottom; }
.js .call .sms[data-step].is-shown { transform: none; transition: opacity 320ms var(--ease), transform 460ms var(--ease-spring); }
.call-replay {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3); margin: 0 auto;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-family: var(--mono); font-size: var(--fs-xs); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.call-replay:hover { border-color: var(--ink); color: var(--ink); }
.call.is-done ~ .call-replay, .call-replay.is-ready { opacity: 1; pointer-events: auto; }
.call-replay svg { transition: transform 400ms var(--ease); }
.call-replay:hover svg { transform: rotate(-120deg); }
.js.rm .call [data-step] { transform: none !important; transition: opacity 150ms ease !important; }
.js.rm .call-wave i { animation: none !important; }
.js.rm .call-avatar::after { animation: none !important; }
.js.rm .call .booked svg, .js.rm .addon-tile.on .addon-check, .js.rm .faq details[open] .answer { animation: none !important; }

/* 10h. Micro-interactions */
.btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active { transform: scale(.97); transition-duration: 60ms; }
.btn-primary .arrow, .link-arrow span { display: inline-block; }
@media (hover: hover) {
  .btn-primary:hover svg { transform: translateX(3px); }
  .btn svg { transition: transform var(--t-ui) var(--ease); }
}
.addon-tile.on .addon-check { animation: pop 360ms var(--ease-spring) both; }
.plan-tile:active, .addon-tile:active { transform: scale(.985); }
.plan-tile, .addon-tile { transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform 120ms var(--ease); }
.nav-menu { transform-origin: top left; transform: translateY(-4px) scale(.98); }
.nav-drop[data-open="true"] .nav-menu { transform: none; }
.nav-menu a { transition: background-color var(--t-ui) var(--ease); }

/* Mobile menu: links settle in one after another */
.js:not(.rm) .mobile-menu nav a, .js:not(.rm) .mobile-menu .label, .js:not(.rm) .mobile-menu .mm-actions > * {
  opacity: 0; transform: translateY(10px); transition: opacity 260ms var(--ease), transform 360ms var(--ease);
}
.js:not(.rm) .mobile-menu.is-open nav a, .js:not(.rm) .mobile-menu.is-open .label, .js:not(.rm) .mobile-menu.is-open .mm-actions > * {
  opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 30ms + 40ms);
}

/* FAQ: answers expand and collapse smoothly where the browser supports it */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 280ms var(--ease), content-visibility 280ms allow-discrete; }
  .faq details[open]::details-content { height: auto; }
  .js.rm .faq details::details-content { transition: none; }
}
.faq details[open] .answer { animation: fade 240ms var(--ease) both; }

/* Mobile: header slides away while reading down, returns on scroll up */
@media (max-width: 1039px) {
  .js .site-header { transition: transform 300ms var(--ease), border-color var(--t-fast) var(--ease); }
  .js .site-header.is-hidden { transform: translateY(-100%); }
  .js.rm .site-header { transition: none; }
}

/* 10i. Safety net for anything not covered above */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  html:not(.js) .reveal, html:not(.js) .stagger > * { opacity: 1; transform: none; }
}

/* 11. Utilities ----------------------------------------------------------- */
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); } .mt-8 { margin-top: var(--s8); }
.center { text-align: center; }
.max-40 { max-width: 40rem; }

/* v2 (2026-11-07): a time stamp, set as data (the only mono line in a statement band) */
.stamp { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--mono); font-size: var(--fs-sm); color: var(--night-muted); }
.stamp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

/* v2: the hero's product frame sits on a forest field (the brand colour owns the demo, not just the buttons) */
.hero .hero-visual { padding: clamp(20px, 3.2vw, 40px) clamp(14px, 2.2vw, 28px) clamp(16px, 2vw, 22px); background: var(--forest); border-radius: 20px; align-items: center; }
.hero .hero-visual .call { box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 28px 56px -24px rgba(0,0,0,.55); border-color: transparent; }
.hero .hero-visual .call-caption { color: #BFD3CA; align-self: center; text-align: center; }
.hero .hero-visual .call-replay { background: transparent; border-color: rgba(255,255,255,.3); color: #E4EEE9; }
.hero .hero-visual .call-replay:hover { border-color: #fff; color: #fff; }
.hero .hero-visual :focus-visible { outline-color: var(--mint); }