/* ===== Design tokens — light blue / white, high-end SaaS ===== */
:root,[data-theme='light']{
  --font-display:'Cabinet Grotesk','Helvetica Neue',sans-serif;
  --font-body:'Satoshi','Helvetica Neue',sans-serif;
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .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.6rem,1rem + 4vw,4.9rem);
  --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;

  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-2:#f2f7ff;
  --color-surface-offset:#e5efff;
  --color-surface-dynamic:#d3e4fb;
  --color-text:#0c1526;
  --color-text-muted:#51607a;
  --color-text-faint:#93a2bd;
  --color-text-inverse:#ffffff;
  --color-primary:#0a2360;
  --color-primary-hover:#123078;
  --color-primary-active:#071847;
  --color-primary-highlight:#dce9ff;
  --color-accent:#2f6fed;
  --color-accent-soft:#eaf1ff;
  --color-border:rgba(12,21,38,.12);
  --color-divider:rgba(12,21,38,.09);
  --color-live:#1ea672;
  --color-danger:#d64545;
  --color-danger-hover:#bf3a3a;
  --color-danger-soft:rgba(214,69,69,.12);
  --color-live-soft:rgba(30,166,114,.14);

  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.9rem;--radius-xl:1.35rem;--radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(12,21,38,.06);--shadow-md:0 10px 25px rgba(20,45,110,.09);--shadow-lg:0 24px 55px rgba(20,45,110,.14);
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
}
[data-theme='dark']{
  --color-bg:#05070f;--color-surface:#0a1122;--color-surface-2:#0e1830;--color-surface-offset:#13214a;--color-surface-dynamic:#1a2d5c;
  --color-text:#eef3ff;--color-text-muted:#a7b6da;--color-text-faint:#6d7ea6;--color-text-inverse:#05070f;
  --color-primary:#6fa2ff;--color-primary-hover:#8fb7ff;--color-primary-active:#b3cdff;--color-primary-highlight:#16244a;
  --color-accent:#6fa2ff;--color-accent-soft:#132345;
  --color-border:rgba(238,243,255,.14);--color-divider:rgba(238,243,255,.1);
  --color-live:#3ddb9a;--color-live-soft:rgba(61,219,154,.16);
  --color-danger:#e2564f;--color-danger-hover:#f0685f;--color-danger-soft:rgba(226,86,79,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 12px 32px rgba(0,0,0,.4);--shadow-lg:0 30px 64px rgba(0,0,0,.5);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#05070f;--color-surface:#0a1122;--color-surface-2:#0e1830;--color-surface-offset:#13214a;--color-surface-dynamic:#1a2d5c;
  --color-text:#eef3ff;--color-text-muted:#a7b6da;--color-text-faint:#6d7ea6;--color-text-inverse:#05070f;
  --color-primary:#6fa2ff;--color-primary-hover:#8fb7ff;--color-primary-active:#b3cdff;--color-primary-highlight:#16244a;
  --color-accent:#6fa2ff;--color-accent-soft:#132345;
  --color-border:rgba(238,243,255,.14);--color-divider:rgba(238,243,255,.1);
  --color-live:#3ddb9a;--color-live-soft:rgba(61,219,154,.16);
  --color-danger:#e2564f;--color-danger-hover:#f0685f;--color-danger-soft:rgba(226,86,79,.18);
}}

/* ===== Layout base ===== */
.container-wide,.container-default,.container-narrow{margin-inline:auto;padding-inline:var(--space-6)}
.container-wide{max-width:calc(var(--content-wide) + var(--space-12))}
.container-default{max-width:calc(var(--content-default) + var(--space-12))}
.container-narrow{max-width:calc(var(--content-narrow) + var(--space-12))}
.skip-link{position:absolute;left:var(--space-4);top:calc(var(--space-2) * -20);z-index:99;padding:var(--space-3) var(--space-4);background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-sm)}
.skip-link:focus{top:var(--space-2)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px)}
.site-header.scrolled{border-color:var(--color-divider)}
.nav-wrap{min-height:5.25rem;max-width:calc(var(--content-wide) + var(--space-12));margin:auto;padding:var(--space-3) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text);text-decoration:none;white-space:nowrap}
.brand-mark{height:1.85rem;width:auto;flex:none;display:block}
.brand span{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.04em}
.brand i{font-style:normal;color:var(--color-accent)}
.desktop-nav{display:flex;align-items:center;gap:var(--space-6)}
.desktop-nav a,.footer-links a{color:var(--color-text-muted);font-size:var(--text-sm);font-weight:500;text-decoration:none;transition:color var(--transition-interactive)}
.desktop-nav a:hover,.footer-links a:hover{color:var(--color-accent)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle,.menu-toggle{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text);font-size:var(--text-lg);background:var(--color-surface)}
.theme-toggle:hover,.menu-toggle:hover{background:var(--color-surface-offset)}
.menu-toggle{display:none;position:relative}
.menu-toggle span:not(.sr-only){position:absolute;width:1.1rem;height:1px;background:currentColor;transition:transform var(--transition-interactive)}
.menu-toggle span:nth-child(2){transform:translateY(-.2rem)}
.menu-toggle span:nth-child(3){transform:translateY(.2rem)}
.menu-toggle.open span:nth-child(2){transform:rotate(45deg)}
.menu-toggle.open span:nth-child(3){transform:rotate(-45deg)}
.mobile-menu{display:none}

/* ===== Buttons ===== */
.button{min-height:2.9rem;padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--transition-interactive),background var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive);white-space:nowrap}
.button:active{transform:translateY(1px)}
.button-primary{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-md)}
.button-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-lg)}
.button-outline{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
.button-outline:hover{background:var(--color-surface-offset);border-color:var(--color-accent)}
.button-light{background:var(--color-text-inverse);color:var(--color-primary)}
.button-light:hover{background:color-mix(in oklab,var(--color-text-inverse) 88%,var(--color-accent))}
.button-small{min-height:2.4rem;padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.button[disabled]{opacity:.6;cursor:progress}
.text-link{color:var(--color-accent);font-weight:600;font-size:var(--text-sm);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1)}
.text-link:hover{text-decoration:underline}
.text-link-light{color:var(--color-text-inverse)}

/* ===== Hero ===== */
.hero{min-height:min(50rem,calc(100dvh - 5.25rem));display:grid;align-items:center;padding:clamp(var(--space-12),7vw,var(--space-24)) var(--space-6) clamp(var(--space-16),8vw,var(--space-24));overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:-20% -10% auto -10%;height:38rem;background:radial-gradient(60% 60% at 30% 20%,color-mix(in oklab,var(--color-accent) 20%,transparent),transparent 70%),radial-gradient(50% 50% at 80% 10%,color-mix(in oklab,var(--color-accent) 14%,transparent),transparent 70%);pointer-events:none;z-index:0}
.hero-grid{width:min(var(--content-wide),100%);margin:auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(24rem,.96fr);align-items:center;gap:clamp(var(--space-12),7vw,var(--space-24));position:relative;z-index:1}
.eyebrow{color:var(--color-accent);font-size:var(--text-xs);font-weight:700;letter-spacing:.1em}
.eyebrow-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:var(--color-accent-soft);border:1px solid color-mix(in oklab,var(--color-accent) 25%,transparent)}
.hero h1{max-width:13ch;margin-top:var(--space-5);font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;letter-spacing:-.06em;color:var(--color-text)}
.hero-lede{margin-top:var(--space-6);color:var(--color-text-muted);font-size:var(--text-base);max-width:58ch}
.hero-actions{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-8)}
.hero-note{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.status-dot,.pulse-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--color-accent);flex:none;box-shadow:0 0 0 0 color-mix(in oklab,var(--color-accent) 55%,transparent);animation:pulse 2.2s infinite}

/* ===== Hero interactive widget ===== */
.hero-widget{position:relative;isolation:isolate;min-height:26rem;display:flex;align-items:center;justify-content:center}
.hero-widget-glow{position:absolute;inset:6% 2%;border-radius:var(--radius-full);background:radial-gradient(ellipse at center,color-mix(in oklab,var(--color-accent) 30%,transparent),transparent 72%);filter:blur(var(--space-10));z-index:-1}
.widget-card{width:100%;max-width:23rem;padding:var(--space-6);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}
.widget-top-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-4)}
.widget-agent{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.widget-avatar{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:grid;place-items:center}
.widget-avatar svg{width:1.2rem;height:1.2rem}
.widget-agent-info{display:flex;flex-direction:column;min-width:0}
.widget-agent-info strong{font-size:var(--text-sm);font-weight:700;color:var(--color-text);line-height:1.2}
.widget-agent-info span{font-size:var(--text-xs);color:var(--color-text-muted)}
.widget-live-badge{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-live-soft);color:var(--color-live);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em}
.live-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-live);box-shadow:0 0 0 0 color-mix(in oklab,var(--color-live) 55%,transparent);animation:pulse-live 1.8s infinite}
.widget-preview-bars{display:flex;align-items:center;justify-content:center;gap:3px;height:1.6rem;margin-bottom:var(--space-5);opacity:.55}
.widget-preview-bars i{display:block;width:3px;border-radius:2px;background:var(--color-accent);height:30%;animation:sound-wave-idle 2.4s ease-in-out infinite}
.widget-preview-bars i:nth-child(odd){animation-delay:-.6s}
.widget-preview-bars i:nth-child(3n){animation-delay:-1.2s}
.widget-preview-bars i:nth-child(5n){animation-delay:-1.8s}
.widget-form-lede{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
.widget-email-form{display:grid;gap:var(--space-3)}
.widget-email-form label{font-size:var(--text-xs);font-weight:700;color:var(--color-text);letter-spacing:.02em}
.label-note{font-weight:500;color:var(--color-text-faint);text-transform:none;letter-spacing:0}
.widget-email-form input{margin-top:var(--space-2);width:100%;height:2.9rem;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-sm)}
.widget-email-form input:focus{outline:2px solid var(--color-accent);outline-offset:1px}
.widget-continue{width:100%;margin-top:var(--space-1)}
.widget-fineprint{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;margin-top:var(--space-1)}
.widget-call{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-2) 0 var(--space-1)}
.widget-call[hidden],.widget-email-form[hidden]{display:none}
.widget-call-hello{font-size:var(--text-sm);color:var(--color-text-muted);text-align:center}
.widget-call-hello b{color:var(--color-text)}
.mic-button{width:5.5rem;height:5.5rem;border-radius:50%;border:none;background:var(--color-primary);color:var(--color-text-inverse);display:grid;place-items:center;cursor:pointer;position:relative;transition:transform var(--transition-interactive),background var(--transition-interactive)}
.mic-button svg{width:1.9rem;height:1.9rem}
.mic-button:hover{transform:scale(1.04)}
.mic-button::after{content:'';position:absolute;inset:-.6rem;border-radius:50%;border:2px solid color-mix(in oklab,var(--color-accent) 45%,transparent);opacity:0;transition:opacity var(--transition-interactive)}
.mic-button.is-connecting{background:var(--color-accent)}
.mic-button.is-connecting::after{opacity:1;animation:pulse-ring 1.4s infinite}
.mic-button.is-live{background:#d64545}
.mic-button.is-live::after{opacity:1;border-color:color-mix(in oklab,#d64545 45%,transparent);animation:pulse-ring 1.6s infinite}
.sound-bars{display:flex;align-items:center;gap:3px;height:1.9rem}
.sound-bars i{display:block;width:3px;border-radius:2px;background:var(--color-accent);height:35%;transition:height .18s ease}
.widget-call.is-idle .sound-bars i{height:12%;opacity:.4}
.widget-call.is-live .sound-bars i{animation:sound-wave 900ms ease-in-out infinite}
.widget-call.is-live .sound-bars i:nth-child(odd){animation-delay:-.3s}
.widget-call.is-live .sound-bars i:nth-child(3n){animation-delay:-.55s}
#voice-demo-wave-status{font-size:var(--text-sm);color:var(--color-text-muted);text-align:center;min-height:1.4em}
.widget-end-note{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}
.mini-card{position:absolute;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);text-align:center;pointer-events:none;transition:opacity var(--transition-interactive);animation:float 5s ease-in-out infinite alternate}
.mini-card span{display:block;font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-primary)}
.mini-card p{font-size:var(--text-xs);color:var(--color-text-muted)}
.mini-card-a{left:-2%;top:6%}
.mini-card-b{right:-3%;bottom:8%;animation-delay:1.2s}


/* ===== Hero widget — live call state =====
   The card keeps its identity (same surface, radius, header row) and swaps its
   body for a real-time transcript feed while a call is running. Everything is
   driven by one class on .widget-card, so there is a single source of truth
   for "are we on a call" in the CSS. */
.widget-card.is-calling .widget-live-badge,.widget-card.is-calling .widget-preview-bars{display:none}
/* The decorative floating badge would sit over the End Call button once the
   card grows, so it steps aside for the duration of the call. */
.hero-widget.is-calling .mini-card{opacity:0}
.widget-card.is-calling .widget-top-row{margin-bottom:var(--space-4)}
.widget-agent-info .widget-agent-oncall{display:none;color:var(--color-live);font-weight:600}
.widget-card.is-live .widget-agent-idle{display:none}
.widget-card.is-live .widget-agent-info .widget-agent-oncall{display:block}
.widget-call-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}
.widget-call-meta[hidden]{display:none}
.widget-timer{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-live-soft);color:var(--color-live);font-size:var(--text-xs);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.widget-timer-note{font-size:.68rem;line-height:1;color:var(--color-text-faint);font-weight:500;letter-spacing:.01em}
.widget-call-view{display:grid;gap:var(--space-4)}
.widget-call-view[hidden],.widget-email-form[hidden]{display:none}

/* Transcript feed: fixed height so the hero never jumps as lines arrive. */
.widget-transcript{display:flex;flex-direction:column;gap:var(--space-3);height:13.5rem;overflow-y:auto;overscroll-behavior:contain;padding-right:var(--space-2);scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}
.widget-transcript::-webkit-scrollbar{width:5px}
.widget-transcript::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}
.transcript-empty{margin:auto;max-width:26ch;text-align:center;font-size:var(--text-sm);color:var(--color-text-faint)}
.transcript-row{display:flex;flex-direction:column;gap:var(--space-1);max-width:88%;animation:transcript-in 260ms var(--ease-out) both}
.transcript-row.is-agent{align-self:flex-start;align-items:flex-start}
.transcript-row.is-you{align-self:flex-end;align-items:flex-end}
.transcript-speaker{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint)}
.transcript-bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.45;overflow-wrap:anywhere}
.is-agent .transcript-bubble{background:var(--color-surface-2);border:1px solid var(--color-divider);color:var(--color-text);border-top-left-radius:var(--radius-sm)}
.is-you .transcript-bubble{background:var(--color-primary);color:var(--color-text-inverse);border-top-right-radius:var(--radius-sm)}
.transcript-row.is-interim .transcript-bubble{opacity:.75}
.transcript-row.is-interim .transcript-bubble::after{content:'';display:inline-block;width:.34rem;height:.34rem;margin-left:.35em;border-radius:50%;background:currentColor;animation:transcript-typing 1.1s ease-in-out infinite}

/* Status line + waveform: mirrors who currently holds the floor. */
.widget-call-state{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-divider);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);min-height:1.9rem}
.widget-wave{display:inline-flex;align-items:center;gap:2px;height:.9rem}
.widget-wave i{display:block;width:2px;border-radius:2px;background:var(--color-accent);height:25%;opacity:.5;transition:height .18s ease,opacity .18s ease}
.widget-card.is-speaking .widget-wave i{opacity:1;animation:sound-wave 820ms ease-in-out infinite}
.widget-card.is-speaking .widget-wave i:nth-child(2){animation-delay:-.28s}
.widget-card.is-speaking .widget-wave i:nth-child(3){animation-delay:-.52s}
.widget-card.is-speaking .widget-wave i:nth-child(4){animation-delay:-.14s}

.widget-end-call{width:100%;gap:var(--space-2);background:var(--color-danger);color:#fff;box-shadow:0 8px 20px var(--color-danger-soft)}
.widget-end-call:hover{background:var(--color-danger-hover);box-shadow:0 12px 26px var(--color-danger-soft)}
.widget-end-call svg{width:1.05rem;height:1.05rem;flex:none}
.widget-end-call[disabled]{opacity:.65;cursor:progress}

/* Greyed-out until a valid email is entered. */
.widget-continue[disabled]{background:var(--color-surface-dynamic);color:var(--color-text-faint);box-shadow:none;opacity:1;cursor:not-allowed}
.widget-continue[disabled]:hover{background:var(--color-surface-dynamic)}
.widget-continue.is-busy[disabled]{cursor:progress}

@keyframes transcript-in{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
@keyframes transcript-typing{0%,100%{opacity:.25}50%{opacity:1}}
/* ===== Sections generic ===== */
.section{padding:clamp(var(--space-12),6vw,var(--space-20)) 0}
.section-tinted{background:var(--color-surface-2)}
.section-head{max-width:44rem}
.section-head.centered{margin-inline:auto;text-align:center}
.section-head h2,.audience-copy h2,.integration-row h2,.contact-copy h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.055em;margin-top:var(--space-3);color:var(--color-text)}
.section-head>p{margin-top:var(--space-3);color:var(--color-text-muted)}

/* ===== Testimonials / proof ===== */
.stats-section{padding:clamp(var(--space-10),5vw,var(--space-16)) 0}
.proof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);margin-top:var(--space-10);padding:var(--space-8) 0;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider)}
.proof-stats div{text-align:center}
.proof-stats strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.04em;color:var(--color-primary)}
.proof-stats span{font-size:var(--text-xs);color:var(--color-text-muted)}
.proof-source{margin-top:var(--space-6);font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}
.proof-source a{color:var(--color-accent);text-decoration:none}
.proof-source a:hover{text-decoration:underline}

/* ===== Standalone testimonial feature ===== */
.testimonial-feature{padding:clamp(var(--space-10),5vw,var(--space-16)) 0}
.testimonial-feature-alt{background:var(--color-surface-2)}
.testimonial-feature .container-default{text-align:center}
.testimonial-mark{width:2.6rem;height:2rem;color:var(--color-accent);opacity:.5;margin-inline:auto;display:block}
.testimonial-feature blockquote{margin-top:var(--space-5)}
.testimonial-feature blockquote p{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;letter-spacing:-.03em;line-height:1.35;color:var(--color-text);max-width:44ch;margin-inline:auto}
.testimonial-feature footer{margin-top:var(--space-8);display:flex;align-items:center;justify-content:center;gap:var(--space-3)}
.testimonial-avatar{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-sm);font-weight:700}
.testimonial-feature footer>div{text-align:left}
.testimonial-feature footer strong{display:block;font-size:var(--text-sm);color:var(--color-text)}
.testimonial-feature footer span{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ===== Missed-calls callout ===== */
.calculator-eyebrow-wrap{display:flex;flex-direction:column;align-items:center}

/* ===== Feature showcase (replaces What It Does) ===== */
.feature-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center;padding:clamp(var(--space-12),7vw,var(--space-20)) 0;border-bottom:1px solid var(--color-divider)}
.feature-block:last-of-type{border-bottom:none}
.feature-block.reverse .feature-visual{order:2}
.feature-visual{border-radius:var(--radius-xl);background:var(--color-surface-2);border:1px solid var(--color-border);min-height:18rem;display:flex;align-items:center;justify-content:center;padding:var(--space-8);position:relative;overflow:hidden}
.feature-index{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.04em;color:var(--color-accent)}
.feature-copy h3{margin-top:var(--space-3);font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.045em;color:var(--color-text)}
.feature-copy p{margin-top:var(--space-4);color:var(--color-text-muted)}
.feature-list{margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.feature-list li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);color:var(--color-text)}
.feature-list li svg{flex:none;width:1.1rem;height:1.1rem;color:var(--color-accent);margin-top:.15rem}
.visual-call{width:100%;max-width:22rem;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);border:1px solid var(--color-border)}
.visual-call header{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted)}
.call-transcript{margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.call-line{display:flex;flex-direction:column;gap:3px;max-width:88%}
.call-speaker{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint)}
.call-line p{margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm);color:var(--color-text);line-height:1.4}
.call-ai{align-self:flex-end;align-items:flex-end}
.call-ai .call-speaker{color:var(--color-accent)}
.call-ai p{background:var(--color-accent-soft)}
.call-caller{align-self:flex-start;align-items:flex-start}
.visual-call .call-route{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-divider);font-size:var(--text-xs);font-weight:700;color:var(--color-primary)}
.visual-call .call-route b{color:var(--color-text-faint);font-weight:400}
.visual-crew{width:100%;max-width:21rem;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);border:1px solid var(--color-border)}
.crew-header{display:flex;align-items:center;gap:var(--space-3)}
.crew-avatar{flex:none;width:2.6rem;height:2.6rem;border-radius:var(--radius-full);background:var(--color-accent-soft);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;letter-spacing:-.02em}
.crew-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.crew-label{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--color-text-faint)}
.crew-name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.crew-status{display:inline-flex;align-items:center;gap:var(--space-1);font-size:10px;color:var(--color-text-muted)}
.crew-status .status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-live);flex:none}
.crew-week-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-divider);font-size:var(--text-xs);font-weight:700;color:var(--color-text)}
.week-chevron{color:var(--color-text-faint);font-size:var(--text-sm)}
.crew-days{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}
.crew-day-label{display:block;font-size:10px;font-weight:700;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.crew-slots{display:flex;flex-wrap:wrap;gap:6px}
.slot{display:inline-flex;align-items:center;padding:5px 9px;border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:10px;font-weight:600;color:var(--color-text)}
.slot-off{border-color:var(--color-divider);color:var(--color-text-faint);text-decoration:line-through;font-weight:500}
.crew-actions{display:flex;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-divider)}
.crew-btn{flex:1;text-align:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:700}
.crew-btn-cancel{background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border)}
.crew-btn-dispatch{background:var(--color-primary);color:var(--color-text-inverse)}
.visual-invoice-detail{width:100%;max-width:20rem;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);border:1px solid var(--color-border)}
.invoice-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.invoice-status-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.status-badge{padding:3px 9px;border-radius:var(--radius-full);font-size:9px;font-weight:700}
.status-badge-sent{background:var(--color-accent-soft);color:var(--color-accent)}
.status-badge-paid{background:var(--color-live-soft);color:var(--color-live)}
.invoice-due-text{font-size:10px;color:var(--color-text-faint)}
.invoice-block-label{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-divider);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--color-text-faint)}
.invoice-row{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.invoice-row span:last-child{color:var(--color-text);font-weight:600}
.invoice-row-strong span:last-child{font-weight:700;color:var(--color-text)}
.invoice-payment-row{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-surface-2);border:1px solid var(--color-divider)}
.invoice-payment-method{display:flex;flex-direction:column;gap:2px}
.invoice-payment-method span{font-size:var(--text-xs);font-weight:600;color:var(--color-text)}
.invoice-payment-method small{font-size:10px;color:var(--color-text-faint)}
.invoice-payment-amount{font-size:var(--text-xs);font-weight:700;color:var(--color-text)}
.invoice-stack{position:relative;width:100%;max-width:20rem}
.invoice-card{position:absolute;top:0;left:0;right:0;width:100%;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:transform 1.2s cubic-bezier(.65,0,.35,1),opacity 1.2s cubic-bezier(.65,0,.35,1);backface-visibility:hidden;will-change:transform,opacity;pointer-events:none}
/* Depth tiers form a physical deck: the front card sits full-size on top, the
   tier-1 card peeks out slightly behind/below it, tiers 2-4 sit directly
   underneath (invisible, waiting their turn). No rotation at rest keeps the
   stack calm — rotation only appears briefly during the exit flourish. */
.invoice-card.tier-0{transform:translate(0,0) scale(1);opacity:1;z-index:5;pointer-events:auto}
.invoice-card.tier-1{transform:translate(0,9px) scale(.97);opacity:1;z-index:4}
.invoice-card.tier-2{transform:translate(0,14px) scale(.945);opacity:0;z-index:3}
.invoice-card.tier-3{transform:translate(0,17px) scale(.925);opacity:0;z-index:2}
.invoice-card.tier-4{transform:translate(0,19px) scale(.905);opacity:0;z-index:1}
/* The exiting card stays above everything for its whole flight so it never
   crosses behind another card mid-air. transition:none keeps the regular CSS
   transition from ever competing with this keyframe animation on the same
   properties (that overlap was the source of the earlier stutter). A single
   easing curve runs across the whole animation — no per-keyframe easing
   swaps — so the motion never changes speed abruptly (that was the other
   source of jitter). The card also holds full opacity until 70% and only
   fades out in the final stretch, once it is already well clear of the
   incoming card's position, so the two never visually blend together. */
.invoice-card.is-exiting{transition:none;animation:invoiceCardExit 1.2s cubic-bezier(.5,0,.5,1) forwards;z-index:6;pointer-events:none}
@keyframes invoiceCardExit{
  0%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1}
  45%{transform:translate(15%,-30px) scale(1.02) rotate(8deg);opacity:1}
  70%{transform:translate(9%,-6px) scale(.965) rotate(6deg);opacity:1}
  100%{transform:translate(0,19px) scale(.905) rotate(0deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .invoice-card{transition:opacity .3s ease}
  .invoice-card.is-exiting{animation:none}
}

/* ===== Integrations grid ===== */
.integration-section{padding:clamp(var(--space-12),6vw,var(--space-20)) 0}
.integration-head{max-width:40rem;margin-inline:auto;text-align:center}
.integration-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-12)}
.integration-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);text-align:center}
.integration-card .icon-wrap{width:2.75rem;height:2.75rem;border-radius:var(--radius-md);background:var(--color-accent-soft);display:grid;place-items:center;color:var(--color-accent)}
.integration-card .icon-wrap svg{width:1.4rem;height:1.4rem}
.integration-card .icon-wrap img{width:1.6rem;height:1.6rem;object-fit:contain}
.integration-card .icon-wrap-brand{background:#12294f}
.integration-card .icon-wrap-brand img{width:2.1rem;height:auto}
.integration-card .icon-wrap-phone{background:#30d158}
.integration-card .icon-wrap-phone svg{width:1.35rem;height:1.35rem}
.integration-card span{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
/* ===== How it works ===== */
.how-section{padding-top:clamp(var(--space-10),5vw,var(--space-16))}
.steps{margin-top:clamp(var(--space-12),6vw,var(--space-16));display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--space-8),4vw,var(--space-12))}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
.step-number{flex:none;width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent);font-family:var(--font-display);font-size:var(--text-base);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-4)}
.step h3{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.04em;color:var(--color-text)}
.step p{margin-top:var(--space-3);color:var(--color-text-muted)}

/* ===== Audience ===== */
.audience-section{background:var(--color-surface-2)}
.audience-grid{display:grid;grid-template-columns:1fr;max-width:52rem;margin-inline:auto}
.audience-copy p{margin-top:var(--space-4);color:var(--color-text-muted)}

/* ===== Pricing ===== */
.pricing-head{text-align:center;margin-inline:auto}
.pricing-head p{margin-inline:auto}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:stretch;margin-top:var(--space-12)}
.price-card{position:relative;display:flex;flex-direction:column;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface)}
.price-card ul{margin:var(--space-8) 0;display:grid;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}
.price-card li{position:relative;padding-left:var(--space-5)}
.price-card li::before{position:absolute;left:0;content:'•';color:var(--color-accent);font-weight:700}
.price-card .button{margin-top:auto}
.price-card h3{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.045em;color:var(--color-text)}
.price-top>p{min-height:3.5rem;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted)}
.price-top strong{display:block;margin-top:var(--space-6);font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.06em;color:var(--color-text)}
.price-top strong span{margin-left:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;letter-spacing:0;color:var(--color-text-muted)}
.price-top>p.price-overage{min-height:0;margin-top:2px;font-size:11px;font-weight:500;color:var(--color-text-faint)}
.everything{margin-top:var(--space-6);font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.price-featured{z-index:2;transform:translateY(calc(var(--space-3) * -1));border:2px solid var(--color-primary);box-shadow:var(--shadow-lg)}
.price-featured .price-top h3{color:var(--color-primary)}
.price-badge{position:absolute;top:calc(var(--space-3) * -1);left:50%;transform:translate(-50%,-50%);width:max-content;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-text-inverse);font-size:var(--text-xs);font-weight:700}
.pricing-note{max-width:70ch;margin:var(--space-12) auto 0;text-align:center;color:var(--color-text-muted)}

/* ===== Calculator — now secondary, moved lower ===== */
.calculator-section{padding:var(--space-8) var(--space-6)}
.calculator-eyebrow-wrap{text-align:center;max-width:40rem;margin:0 auto var(--space-8)}
.calculator{display:grid;grid-template-columns:.8fr 1.25fr .75fr;align-items:center;gap:var(--space-8);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);max-width:var(--content-wide);margin-inline:auto}
.calculator .eyebrow{color:var(--color-accent)}
.calculator h2{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.05em;margin-top:var(--space-3);color:var(--color-text)}
.calculator-intro p{font-size:var(--text-sm);margin-top:var(--space-2);color:var(--color-text-muted)}
.calculator-form{display:grid;gap:var(--space-4)}
.calculator label{display:grid;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;color:var(--color-text)}
.calculator input[type=number]{width:100%;height:2.8rem;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text)}
.calculator input[type=range]{width:100%;accent-color:var(--color-accent)}
.range-row{font-size:var(--text-sm);color:var(--color-text-muted)}
.calculator-result{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:var(--space-2);padding-left:var(--space-8);border-left:1px solid var(--color-divider)}
.calculator-result span{grid-column:1/-1;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;color:var(--color-text-muted)}
.calculator-result strong{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.06em;color:var(--color-primary)}
.calculator-result small{font-size:var(--text-xs);color:var(--color-text-muted)}
.calculator-result div{height:1px;grid-column:1/-1;background:var(--color-divider);margin:var(--space-2) 0}

/* ===== Trial ===== */
.trial-section{padding:var(--space-16) 0;background:var(--color-primary)}
.trial-card{padding:var(--space-12);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-xl);background:color-mix(in oklab,var(--color-primary) 92%,white 8%);color:var(--color-text-inverse);text-align:center}
.trial-card .eyebrow{color:color-mix(in oklab,var(--color-text-inverse) 70%,transparent)}
.trial-card h2{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.05em;margin-top:var(--space-3)}
.trial-card p{margin-top:var(--space-4);max-width:56ch;margin-inline:auto;color:color-mix(in oklab,var(--color-text-inverse) 80%,transparent)}
.trial-card .text-link{color:var(--color-text-inverse);margin-top:var(--space-6)}

/* ===== Dealing with ===== */

/* ===== FAQ ===== */
.faq-list{margin-top:var(--space-10);display:grid;gap:var(--space-3)}
.faq-item{padding:var(--space-5) var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600;list-style:none;color:var(--color-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-plus{color:var(--color-accent);font-size:var(--text-lg)}
.faq-item[open] summary .faq-plus{transform:rotate(45deg)}
.faq-item p{margin-top:var(--space-4);color:var(--color-text-muted)}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-12)}
.contact-copy p{margin-top:var(--space-4);color:var(--color-text-muted)}
.contact-form{display:grid;gap:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.contact-form label{display:grid;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;color:var(--color-text)}
.contact-form input,.contact-form select,.contact-form textarea{height:2.9rem;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-sm)}
.contact-form textarea{height:auto;padding:var(--space-3) var(--space-4)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--color-accent);outline-offset:1px}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint)}
.form-status{font-size:var(--text-sm);color:var(--color-accent);min-height:1.2em}
.form-status.is-error{color:var(--color-danger)}
/* Spam trap: off-screen rather than display:none, because bots skip hidden
   fields but happily fill this one in. The function drops anything with it set. */
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status a{color:inherit;font-weight:600}

/* Confirmation panel — takes the form's place once an enquiry is through, so
   the section resolves into a single clear answer rather than a message
   tacked under a form the visitor has already finished with. */
.contact-form[hidden],.form-success[hidden]{display:none}
.form-success{display:grid;justify-items:start;gap:var(--space-4);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);animation:form-success-in 420ms var(--ease-out) both}
.form-success:focus{outline:none}
.form-success:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.form-success-icon{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--color-live-soft);color:var(--color-live)}
.form-success-icon svg{width:1.5rem;height:1.5rem}
.form-success h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-.03em;color:var(--color-text)}
.form-success p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:42ch}
.form-success-again{margin-top:var(--space-1);padding:0;font-size:var(--text-sm)}
@keyframes form-success-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}

/* ===== Footer ===== */
footer{padding:var(--space-12) 0 var(--space-6);border-top:1px solid var(--color-divider)}
.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-8)}
.footer-links{display:flex;gap:var(--space-5);flex-wrap:wrap}
.footer-bottom{margin-top:var(--space-12);padding-top:var(--space-5);border-top:1px solid var(--color-divider)}
.footer-bottom p{font-size:var(--text-xs);color:var(--color-text-muted);max-width:58ch}

/* ===== Scroll fade in/out motion ===== */
.reveal{opacity:1;transform:none}
.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.motion-ready .reveal.is-revealed{opacity:1;transform:translateY(0)}

@keyframes slow-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes float{to{translate:0 calc(var(--space-2) * -1)}}
@keyframes pulse{50%{box-shadow:0 0 0 var(--space-2) color-mix(in oklab,var(--color-accent) 0%,transparent)}0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--color-accent) 45%,transparent)}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes sound-wave{0%,100%{height:20%}50%{height:85%}}
@keyframes pulse-live{50%{box-shadow:0 0 0 var(--space-2) color-mix(in oklab,var(--color-live) 0%,transparent)}0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--color-live) 45%,transparent)}}
@keyframes sound-wave-idle{0%,100%{height:20%}50%{height:55%}}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .proof-stats{grid-template-columns:repeat(2,1fr)}
  .integration-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .desktop-nav,.nav-cta{display:none}.menu-toggle{display:grid}
  .mobile-menu{padding:0 var(--space-6);background:var(--color-bg);border-bottom:1px solid var(--color-divider);max-height:0;overflow:hidden;transition:max-height .3s var(--ease-out),padding .3s var(--ease-out)}
  .mobile-menu.open{display:grid;max-height:24rem;padding-block:var(--space-4)}
  .mobile-menu a{min-height:2.75rem;padding:var(--space-2) 0;color:var(--color-text);font-size:var(--text-sm);font-weight:700;text-decoration:none}
  .hero-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .hero-widget{min-height:auto;max-width:26rem;width:100%;margin-inline:auto}
  .feature-block{grid-template-columns:1fr;gap:var(--space-6)}
  .feature-block.reverse .feature-visual{order:0}
  .integration-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:var(--space-8)}
  .calculator{grid-template-columns:1fr 1fr}
  .calculator-result{grid-column:1/-1;border-left:0;border-top:1px solid var(--color-divider);padding:var(--space-5) 0 0;grid-template-columns:auto 1fr}
  .pricing-grid{gap:var(--space-6);grid-template-columns:1fr}
  .price-featured{transform:none}
  .price-card{padding:var(--space-8)}
  .price-card ul{margin:var(--space-6) 0}
  .contact-grid,.audience-grid{grid-template-columns:1fr;gap:var(--space-8)}
}
@media(max-width:620px){
  .nav-wrap{padding-inline:var(--space-4)}
  .container-wide,.container-default,.container-narrow,.hero{padding-inline:var(--space-4)}
  .hero{min-height:auto;padding-top:var(--space-12)}
  .hero h1{font-size:var(--text-2xl)}
  .mini-card-a{left:0}
  .mini-card-b{right:0}
  .calculator-section{padding-inline:var(--space-4)}
  .calculator{grid-template-columns:1fr;padding:var(--space-6);gap:var(--space-6)}
  .calculator-result{grid-column:auto}
  .step{grid-template-columns:1fr;gap:var(--space-4)}
  .integration-grid{grid-template-columns:repeat(2,1fr)}
  .proof-stats{grid-template-columns:1fr 1fr}
  .testimonial-feature blockquote p{font-size:var(--text-lg)}
    .trial-card{padding:var(--space-8) var(--space-6)}
    .faq-item summary{font-size:var(--text-base)}
  .form-row{grid-template-columns:1fr}
  .footer-top,.footer-bottom{flex-direction:column;gap:var(--space-5)}
  .footer-bottom{margin-top:var(--space-8)}
  .footer-links{gap:var(--space-4)}
}