/* Follow Up Boss AI implementation, VocalX Labs.
   One stylesheet for every page. Mobile first: base rules target 375px and
   min-width queries scale up.

   Design brief: whitespace is the design. Large type, hairline borders, one
   accent colour, almost no decoration. Sections breathe at 80 to 120px of
   vertical padding on desktop. Nothing in body copy goes under 15px.

   The landing page owns the sections marked LANDING. Everything above that is
   the shared kit the inner pages (how-it-works, ai-calling, case study, legal,
   contact) are already written against, so those class contracts stay put. */

:root{
  --ink:#0c1120;--ink-2:#1b2338;--ink-3:#333e55;
  --muted:#58637a;--muted-2:#5f6a80;--muted-3:#69748a;
  /* muted-2 and muted-3 stay this dark on purpose: lighter greys failed WCAG AA
     on white and they carry the fine print. */
  --line:#e5e9f1;--line-2:#eff2f8;--soft:#f7f8fc;--soft-2:#fbfcfe;--paper:#fff;
  --blue:#2f52ef;--blue-2:#2140cf;--blue-soft:#eef2ff;
  --coral:#ff6846;--violet:#7c5ad4;--green:#17936a;--green-soft:#e8f7f1;--gold:#d99a1f;
  --red:#d1354a;--red-soft:#fdeef0;
  --container:1120px;
  --display:"Manrope",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif;
  --radius:16px;--radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(12,17,32,.04);
  --shadow:0 14px 40px rgba(12,17,32,.07);
  --shadow-lg:0 28px 70px rgba(12,17,32,.11);
}

*{box-sizing:border-box}
/* overflow-x lives on html, never on body. On body it makes body the scroll
   container, which silently zeroes window.scrollY and kills every scroll
   handler on the page (sticky CTA, header state). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;
  overflow-x:hidden}
body{margin:0;color:var(--ink);background:var(--paper);
  font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);letter-spacing:-.035em;line-height:1.08}
p{margin:0}
::selection{background:rgba(47,82,239,.14)}
.container{width:min(100% - 32px,var(--container));margin-inline:auto}
.skip{position:fixed;z-index:999;left:10px;top:10px;transform:translateY(-200%);
  padding:11px 15px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);transition:.2s}
.header.scrolled{border-color:var(--line)}
.nav{height:68px;display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:max-content}
.brand img{width:30px;height:30px;object-fit:contain}
.brand-copy{display:grid;line-height:1.1}
.brand-copy strong{font:800 14px var(--display);letter-spacing:-.02em}
.brand-copy small{margin-top:2px;color:var(--muted-2);font-size:12px;font-weight:700}
.nav-links{display:none}
.nav>.button{display:none}
.menu{display:grid;place-content:center;gap:4px;width:44px;height:44px;margin-left:auto;
  border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.menu span{display:block;width:17px;height:2px;border-radius:99px;background:var(--ink)}
.mobile-nav{position:fixed;z-index:99;inset:69px 0 auto;max-height:calc(100dvh - 69px);
  overflow-y:auto;padding:8px 16px calc(22px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:#fff;box-shadow:0 20px 40px rgba(12,17,32,.12)}
.mobile-nav a{display:flex;align-items:center;min-height:52px;font-size:16px;font-weight:700;
  border-bottom:1px solid var(--line-2)}
.mobile-nav .button{margin-top:16px;width:100%;border-bottom:0}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:12px;
  font-size:16px;font-weight:700;text-align:center;cursor:pointer;transition:.18s}
.button.primary{color:#fff;background:var(--blue)}
.button.primary:hover{background:var(--blue-2)}
.button.secondary{border-color:var(--line);background:#fff}
.button.secondary:hover{border-color:#c6d0e4;background:var(--soft-2)}
.button.ghost{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
.button.ghost:hover{background:rgba(255,255,255,.14)}
.button.large{min-height:58px;padding:0 28px;font-size:17px;border-radius:13px}
.button.block{width:100%}

/* ---------- section shells ----------
   Padding is the main design decision on this site. Do not tighten it. */
.section{padding:72px 0}
.section.deep{padding:88px 0}
.section.close{padding:48px 0}
.section.soft{background:var(--soft)}
.section.dark{color:#fff;background:var(--ink)}
.section.dark p,.section.dark li{color:#aab4c8}
.section.tight{padding-top:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink-3);
  background:var(--soft);font-size:14px;font-weight:700;line-height:1}
.eyebrow i{display:none}
.kicker{color:var(--blue);font-size:14px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase}
.section.dark .kicker{color:#93a6ff}
.section-head{max-width:720px}
.section-head h2{margin:14px 0 18px;font-size:clamp(30px,5.8vw,44px);letter-spacing:-.04em}
.section-head p{color:var(--muted);font-size:18px}
.section.dark .section-head p{color:#aab4c8}
.section-head.center{margin-inline:auto;text-align:center}
.lede{color:var(--muted);font-size:18px}
.fine{color:var(--muted-2);font-size:14px;line-height:1.6}
.section.dark .fine{color:#8b95a9}

/* ---------- hero ----------
   Deliberately flat. A grid mesh plus twin radial glows plus a gradient-clipped
   headline is the most recognisable generated-landing-page combination there is,
   and this audience has seen it on the last three vendors who pitched them. */
.hero{position:relative;padding:44px 0 56px;background:var(--paper)}
.grid-bg,.glow{display:none}
.hero-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
.hero h1{margin:20px 0 20px;font-size:clamp(36px,9vw,58px);letter-spacing:-.045em;
  line-height:1.03}
.gradient{color:var(--blue)}
.hero .lead{max-width:540px;color:var(--muted);font-size:18px}
.actions{display:grid;gap:12px;margin-top:30px}
.hero-assure{margin-top:16px;color:var(--muted-2);font-size:15px}

/* ---------- generic cards / grids ---------- */
.grid-2,.grid-3{display:grid;gap:16px;margin-top:40px}
.card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff}
.card h3{margin-bottom:10px;font-size:20px;letter-spacing:-.025em}
.card p{color:var(--muted);font-size:16px}
.section.soft .card{background:#fff}
.section.dark .card{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.section.dark .card p{color:#a2aac0}
/* One treatment. The old rotation coloured badges by their position in the loop,
   which is decoration pretending to be meaning. */
.num{display:inline-block;margin-bottom:14px;color:var(--muted-3);
  font:700 14px var(--display);letter-spacing:.08em}
.num.coral,.num.green,.num.violet{color:var(--muted-3)}
.section.dark .num{color:#8b95a9}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);background:var(--soft);font-size:14px;font-weight:600}
.section.dark .pill{border-color:rgba(255,255,255,.14);color:#b9c2d4;
  background:rgba(255,255,255,.05)}

.check-list{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.check-list li{position:relative;padding-left:29px;color:var(--muted);font-size:16px}
.check-list li::before{content:"";position:absolute;left:0;top:.55em;width:15px;height:8px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}
.section.dark .check-list li{color:#aab4c8}
.x-list{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.x-list li{position:relative;padding-left:29px;color:var(--muted);font-size:16px}
.x-list li::before{content:"\00d7";position:absolute;left:4px;top:-2px;
  color:var(--red);font-size:20px;font-weight:700}

/* ---------- callouts ---------- */
.callout{margin-top:30px;padding:26px;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff}
.callout.warn{border-left:3px solid var(--coral);background:#fffaf8}
.callout.note{border-left:3px solid var(--blue);background:var(--blue-soft)}
.callout strong{display:block;margin-bottom:8px;font:800 17px var(--display)}
.callout p{color:var(--muted);font-size:16px}

/* ---------- flow steps ----------
   Shared by the landing mechanism section and the inner architecture pages. */
.flow{display:grid;gap:0;margin-top:40px}
.flow-step{position:relative;display:grid;grid-template-columns:38px 1fr;gap:18px;
  padding:0 0 34px}
.flow-step:last-child{padding-bottom:0}
.flow-step::before{content:"";position:absolute;left:18px;top:40px;bottom:0;width:1px;
  background:var(--line)}
.flow-step:last-child::before{display:none}
.flow-step>span{position:relative;z-index:1;display:grid;place-items:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--muted-2);font:700 14px var(--display)}
.flow-step b{display:block;font:800 19px/1.3 var(--display);letter-spacing:-.025em}
.flow-step small{display:block;margin-top:7px;color:var(--muted);font-size:16px;
  line-height:1.6}
/* The inner pages hang a stage label off the step as a third child. Without an
   explicit column it auto-places into the 38px rail track and gets crushed. */
.flow-step em{grid-column:2;justify-self:start;margin-top:10px;color:var(--muted-3);
  font-size:13px;font-weight:700;font-style:normal;letter-spacing:.07em}
.section.dark .flow-step>span{border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#c3cbdc}
.section.dark .flow-step::before{background:rgba(255,255,255,.12)}
.section.dark .flow-step small{color:#aab4c8}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.stat{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.section.dark .stat{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.stat strong{display:block;font:800 clamp(28px,7vw,36px)/1 var(--display);letter-spacing:-.04em}
.stat small{display:block;margin-top:10px;color:var(--muted);font-size:15px;line-height:1.5}
.section.dark .stat small{color:#a2aac0}

/* ---------- evidence table (case study) ---------- */
.evidence{margin-top:36px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.ev-row{padding:22px;border-bottom:1px solid var(--line-2)}
.ev-row:last-child{border-bottom:0}
.ev-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.ev-top b{font:800 17px var(--display);letter-spacing:-.02em}
.ev-row p{color:var(--muted);font-size:16px}
.status{padding:5px 11px;border-radius:999px;font-size:14px;font-weight:700;
  white-space:nowrap}
.status.pass{color:#0f6f50;background:var(--green-soft)}
.status.fixed{color:#82550a;background:#fbf3e2}
.status.open{color:#2b41a8;background:var(--blue-soft)}

/* ---------- defect cards ---------- */
.defect{margin-top:16px;padding:26px;border:1px solid var(--line);
  border-left:3px solid var(--coral);border-radius:4px var(--radius) var(--radius) 4px;
  background:#fff}
.section.dark .defect{border-color:rgba(255,255,255,.1);border-left-color:var(--coral);
  background:rgba(255,255,255,.04)}
.defect b{display:block;margin-bottom:8px;font:800 18px var(--display);letter-spacing:-.02em}
.defect p{color:var(--muted);font-size:16px}
.section.dark .defect p{color:#a2aac0}
.defect .fix{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);
  color:var(--ink);font-size:15px;font-weight:600}
.section.dark .defect .fix{border-color:rgba(255,255,255,.12);color:#dfe5f0}

/* ---------- quotes ---------- */
.quote{margin-top:32px;padding:32px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:#fff}
.section.dark .quote{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.quote blockquote{margin:0;font:800 clamp(20px,4.4vw,26px)/1.34 var(--display);
  letter-spacing:-.03em}
.quote cite{display:block;margin-top:18px;color:var(--muted);font-size:15px;
  font-style:normal;font-weight:600}
.section.dark .quote cite{color:#98a2b6}
.quote footer{display:flex;align-items:center;gap:13px;margin-top:20px}
.quote footer b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:#fff;background:var(--blue);font:800 15px var(--display)}
.quote footer strong{display:block;font:800 15px var(--display)}
.quote footer small{display:block;color:var(--muted);font-size:14px}

/* ---------- CTA panel ---------- */
.cta-panel{position:relative;display:grid;gap:28px;padding:38px 28px;
  border-radius:var(--radius-lg);color:#fff;background:var(--ink);overflow:hidden}
.cta-panel h2{font-size:clamp(28px,6vw,40px);letter-spacing:-.04em}
.cta-panel p{margin-top:16px;color:rgba(255,255,255,.78);font-size:17px}
.cta-panel .kicker{color:#c9d3ff}
.cta-list{display:grid;gap:11px;margin:22px 0 0;padding:0;list-style:none}
.cta-list li{position:relative;padding-left:28px;color:rgba(255,255,255,.86);font-size:16px}
.cta-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:7px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* ---------- footer ---------- */
.footer{padding:56px 0 108px;border-top:1px solid var(--line);background:var(--soft-2)}
.footer-grid{display:grid;gap:34px}
.footer-copy{max-width:340px;margin-top:16px;color:var(--muted);font-size:15px}
.footer-links{display:grid;align-content:start;gap:12px}
.footer-links strong{margin-bottom:2px;font:800 15px var(--display)}
.footer-links a{color:var(--muted);font-size:15px}
.footer-links a:hover{color:var(--ink)}
.footer-bottom{display:grid;gap:12px;margin-top:40px;padding-top:26px;
  border-top:1px solid var(--line);color:var(--muted-2);font-size:14px}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed;z-index:90;inset:auto 0 0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
.sticky-cta[hidden]{display:none}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:720px}
.prose h2{margin:44px 0 14px;font-size:28px}
.prose h3{margin:30px 0 10px;font-size:20px}
.prose p,.prose li{margin-top:14px;color:var(--muted)}
.prose ul{padding-left:20px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:52px 0 48px;background:var(--paper);border-bottom:1px solid var(--line-2)}
.page-hero h1{margin:18px 0 18px;font-size:clamp(32px,8vw,50px);letter-spacing:-.045em}
.page-hero p{max-width:640px;color:var(--muted);font-size:18px}
.case-hero{padding:52px 0 48px;color:#fff;background:var(--ink)}
.case-hero h1{margin:18px 0 18px;font-size:clamp(31px,7.6vw,48px);letter-spacing:-.045em}
.case-hero p{max-width:660px;color:#aab4c8;font-size:18px}
.case-hero .eyebrow{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.case-hero .stat{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.case-hero .stat small{color:#a2aac0}

/* ---------- inner page components ---------- */
.hero.compact{padding:44px 0 40px}
.hero.compact h1{font-size:clamp(32px,8vw,50px)}

.timeline{display:grid;gap:16px;margin-top:36px}
.timeline article{padding:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff}
.timeline b{display:inline-block;margin-bottom:14px;color:var(--muted-3);
  font:700 14px var(--display);letter-spacing:.08em}
.timeline h3{margin-bottom:8px;font-size:19px;letter-spacing:-.025em}
.timeline p{color:var(--muted);font-size:16px}

.audit{padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.section.dark .audit{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.audit small{color:var(--muted-2);font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.audit strong{display:block;margin:8px 0 12px;
  font:800 clamp(36px,9vw,52px)/1 var(--display);letter-spacing:-.045em;color:var(--blue)}
.section.dark .audit strong{color:#93a6ff}
.audit p{color:var(--muted);font-size:16px}
.section.dark .audit p{color:#aab4c8}

.notice{padding:26px;border-left:3px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0;background:var(--soft)}
.notice p{color:var(--muted);font-size:16px}

.contact-grid{display:grid;gap:24px;margin-top:36px}
.contact-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#fff}
.contact-list{display:grid;gap:14px;margin-top:26px}
.contact-list a,.contact-list span{display:flex;gap:10px;color:var(--muted);font-size:16px}
.contact-list a:hover{color:var(--ink)}
.calendly-shell{min-height:640px;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:#fff}
/* min() rather than a flat 280px: inside a 271px shell at 320px the flat floor
   pushed 9px of the booking widget under overflow:hidden and clipped it. */
.calendly-inline-widget{min-width:min(280px,100%);height:640px}

.muted{color:var(--muted)}
.center{text-align:center}
.mt-20{margin-top:20px}.mt-30{margin-top:30px}.mt-40{margin-top:40px}

/* =========================================================================
   LANDING
   ========================================================================= */

/* ---------- hero timeline visual ----------
   A lead moving along its own lifecycle. The rail shows the five stops, and a
   chip lands under it as each one activates. No library, no canvas: a JS
   interval walks a .on class down the stops and CSS does the rest.

   The static default state is the FINISHED state, every chip visible. The
   animated state only exists under html.js, so a script failure or a browser
   with reduced motion shows a complete, readable graphic rather than an
   empty box. */
.tl{padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow)}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.tl-head b{font:800 14px var(--display);letter-spacing:-.02em}
.tl-head span{display:inline-flex;align-items:center;gap:6px;color:var(--muted-2);
  font-size:13px;font-weight:700}
.tl-head span::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--green)}

/* Everything in this block is the FINISHED state: filled dots, filled rail,
   every chip visible. That is what renders with no JS at all.

   The rail is horizontal at every width. A vertical variant on phones made the
   card 604px tall, which meant scrolling a hero graphic to see the end of it.
   Horizontal keeps the whole story in one glance on a 375px screen. */
/* minmax(0,1fr), not 1fr: a plain 1fr floors at min-content, so the "Qualified"
   column stole 10px from every other stop and the rail sat unevenly. */
.tl-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:auto repeat(5,auto);column-gap:6px;row-gap:0}
.tl-stop{display:contents}
.tl-node{position:relative;display:grid;justify-items:start;gap:8px;
  grid-row:1;padding-bottom:16px}
/* right offset bridges the column gap plus the 8px to the next dot's centre */
.tl-node::before{content:"";position:absolute;left:8px;right:-14px;top:7px;height:2px;
  background:var(--blue);transition:.4s ease}
.tl-stop:last-child .tl-node::before{display:none}
.tl-dot{position:relative;z-index:1;grid-column:1;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--blue);background:var(--blue)}
.tl-label{grid-column:1;font:800 12.5px/1.2 var(--display);letter-spacing:-.02em;
  color:var(--ink)}
.tl-chip{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  margin-bottom:6px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--soft-2)}
.tl-stop:last-child .tl-chip{margin-bottom:0}
.tl-stop:nth-child(1) .tl-chip{grid-row:2}
.tl-stop:nth-child(2) .tl-chip{grid-row:3}
.tl-stop:nth-child(3) .tl-chip{grid-row:4}
.tl-stop:nth-child(4) .tl-chip{grid-row:5}
.tl-stop:nth-child(5) .tl-chip{grid-row:6}
.tl-chip b{font:700 13px var(--body);letter-spacing:0}
.tl-chip span{color:var(--muted-2);font-size:13px}
.tl-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  color:var(--muted-2);font-size:13px;line-height:1.5}

/* Animated state, only once app.js has confirmed it is running. A stop is
   .on while it is the current step and .done once the run has passed it.
   The connector leaving a stop fills on .done, not .on, so the rail never
   runs ahead of the marker. */
.js .tl-chip{opacity:0;transform:translateY(5px) scale(.97);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.8,.28,1)}
.js .tl-stop.on .tl-chip,.js .tl-stop.done .tl-chip{opacity:1;transform:none}
.js .tl-stop.on .tl-chip{border-color:#ccd8fb;background:var(--blue-soft)}
.js .tl-dot,.js .tl-label{transition:.4s ease}
.js .tl-stop:not(.on):not(.done) .tl-dot{border-color:var(--line);background:#fff}
.js .tl-stop:not(.on):not(.done) .tl-label{color:var(--muted-3)}
.js .tl-stop:not(.done) .tl-node::before{background:var(--line)}
.js .tl-stop.on .tl-dot{box-shadow:0 0 0 3px rgba(47,82,239,.13)}

/* ---------- positioning strip ----------
   Not a logo wall. The single sentence that separates this from every tool that
   makes agents open a second tab. */
.trust{border-block:1px solid var(--line-2);background:var(--soft-2)}
.trust .container{display:grid;gap:12px;padding:36px 0;max-width:860px}
.trust b{font:800 clamp(20px,4.8vw,27px)/1.28 var(--display);letter-spacing:-.035em}
.trust p{color:var(--muted);font-size:17px}
.trust em{color:var(--ink);font-style:normal;font-weight:700}

/* ---------- plain point list (problem section) ---------- */
.points{display:grid;gap:0;margin:40px 0 0;padding:0;list-style:none;max-width:720px}
.points li{padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:18px}
.points li:last-child{border-bottom:1px solid var(--line)}
.points b{color:var(--ink);font-weight:700}

/* ---------- comparison ----------
   One grid, two value columns, and the row label spanning both above each pair.
   Stacking the two sides as separate cards cost 1620px on a phone and made you
   scroll a screen of the competitor before reaching us; repeating the labels in
   both columns wasted the width that made side by side possible. This reads the
   same at 320px and at 1280px, and never scrolls sideways. */
.cmp{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
/* the tint behind the right hand column, drawn once so the label rows do not
   chop it into stripes. Exactly 50% because the two columns are 1fr each. */
.cmp::after{content:"";position:absolute;inset:0 0 0 50%;background:var(--blue-soft);
  pointer-events:none}
.cmp>*{position:relative;z-index:1}
.cmp-col{padding:13px 14px;border-bottom:1px solid var(--line)}
.cmp-col b{display:block;font:800 15px/1.25 var(--display);letter-spacing:-.025em}
.cmp-col small{display:block;margin-top:3px;color:var(--muted-2);font-size:12.5px;
  line-height:1.35}
.cmp-col.ours b{color:#1c2f9e}
/* The label band carries its own opaque background. Without it the label spans
   the full width while the tint starts at 50%, so a long label like "Every time
   your lead replies" ran straight across the colour boundary and read as text
   overlapping the column beside it. */
.cmp-label{grid-column:1/-1;padding:9px 14px;border-top:1px solid var(--line);
  background:var(--soft);color:var(--ink-3);font-size:12.5px;font-weight:700;
  letter-spacing:.01em}
.cmp-label:first-of-type{border-top:0}
.cmp-val{padding:11px 14px 13px;font-size:14.5px;font-weight:600;line-height:1.4}
.cmp-val.ours{color:var(--ink)}
.cmp-note{margin-top:16px;color:var(--muted-2);font-size:13px;line-height:1.6}

/* ---------- intent match ----------
   The differentiator section. Same motion technique as the hero timeline: the
   static default is the finished state and app.js walks a .shown class down the
   [data-i] elements, so a script failure leaves the whole story readable. */
/* Two columns at every width: cause on the left, effect on the right. Stacked,
   this ran 1007px on a phone, so you scrolled past the activity before ever
   reaching the message it produced, which is the whole point of the graphic. */
.im{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;padding:14px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow)}
/* The two captions are the spine of the story (what the lead did, what went
   back out), so they read as labels rather than fine print. */
.im-cap{display:flex;align-items:baseline;gap:7px;margin-bottom:10px;padding:6px 9px;
  border-radius:7px;background:var(--soft);color:var(--ink);
  font-size:12px;font-weight:800;line-height:1.3}
.im-cap::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--blue);transform:translateY(-2px)}
.im-rows{display:grid;gap:6px}
.im-row{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:1px;
  padding:9px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--soft-2)}
.im-row b,.im-row i,.im-row em{grid-column:2}
.im-eye{grid-column:1;margin-top:4px}
.im-row b{font:700 13px/1.3 var(--body);letter-spacing:0}
.im-row i{color:var(--muted-2);font-size:12px;font-style:normal}
.im-row em{display:block;color:var(--blue);font-size:12px;font-style:normal;font-weight:700;
  line-height:1.3}
/* the eye mark, a plain geometric glyph rather than an icon standing in for meaning */
.im-eye{width:14px;height:9px;border:1.5px solid var(--muted-3);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.im-row.hot{border-color:#ccd8fb;background:var(--blue-soft)}
.im-row.hot .im-eye{border-color:var(--blue)}

.im-read{margin-top:10px;padding:10px 12px;border-left:3px solid var(--blue);
  border-radius:0 10px 10px 0;background:var(--blue-soft)}
.im-read small{display:block;color:#2b41a8;font-size:12px;font-weight:700}
.im-read b{display:block;margin-top:3px;font:800 13px/1.35 var(--display);
  letter-spacing:-.015em}

.im-thread{padding-left:14px;border-left:1px solid var(--line-2)}
.im-msg{margin-top:8px;padding:9px 11px;border-radius:12px;font-size:13px;line-height:1.45}
.im-msg.out{color:#fff;background:var(--blue);border-bottom-right-radius:4px}
.im-msg.in{color:var(--ink);background:var(--soft);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.im-won{display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-2);color:#0f6f50;font-size:12.5px;font-weight:700;
  line-height:1.35}
.im-won::before{content:"";width:12px;height:6px;flex:none;margin-top:4px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}

.js .im [data-i]{opacity:0;transform:translateY(6px) scale(.985);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.8,.28,1)}
.js .im [data-i].shown{opacity:1;transform:none}

/* the claim, carried as one number rather than a stats band */
.im-claim{display:grid;gap:6px;margin-top:36px;padding:26px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--soft-2)}
.im-claim b{font:800 clamp(34px,8vw,46px)/1 var(--display);letter-spacing:-.045em;
  color:var(--blue)}
.im-claim span{color:var(--muted);font-size:17px}

/* ---------- case study feature, the heaviest block in the proof section ---------- */
.casefeat{display:grid;gap:26px;margin-top:40px;padding:32px 26px;
  border-radius:var(--radius-lg);color:#fff;background:var(--ink)}
.casefeat .kicker{color:#c9d3ff}
.casefeat h3{margin:14px 0 16px;font-size:clamp(26px,5.6vw,36px);letter-spacing:-.04em}
.casefeat>div>p{color:rgba(255,255,255,.8);font-size:17px}
.casefeat-facts{display:grid;gap:0;margin:26px 0 0;padding:0;list-style:none}
.casefeat-facts li{padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.casefeat-facts li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.casefeat-facts b{display:block;font:800 22px var(--display);letter-spacing:-.03em}
.casefeat-facts span{display:block;margin-top:3px;color:rgba(255,255,255,.72);font-size:15px}
.proof-sub{margin-top:48px;font-size:clamp(20px,4.6vw,26px);letter-spacing:-.03em}

/* ---------- video testimonials ----------
   9/16 with object-fit:contain: these are portrait phone clips and cropping them
   to a landscape box cut the speaker's head off. Contain guarantees the whole
   frame, the column stays narrow so the card stays compact on a phone. */
.videos{display:grid;gap:16px;margin-top:32px}
.video-card{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;
  padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.video-wrap{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:12px;
  background:var(--ink);cursor:pointer}
.video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.video-overlay{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(rgba(12,17,32,.12),rgba(12,17,32,.5))}
.video-overlay .play{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.video-overlay .play::after{content:"";margin-left:4px;border:9px solid transparent;
  border-left:14px solid var(--ink)}
.video-copy blockquote{margin:0;font:800 17px/1.42 var(--display);letter-spacing:-.025em}
.video-copy cite{display:block;margin-top:14px;color:var(--muted);font-size:15px;
  font-style:normal}
.video-copy cite b{display:block;color:var(--ink);font:800 15px var(--display)}

/* ---------- offer ---------- */
.offer{margin-top:40px;padding:32px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:#fff}
.offer .amount{font:800 clamp(40px,10vw,58px)/1 var(--display);letter-spacing:-.05em}
.offer .amount small{font:700 17px var(--body);letter-spacing:0;color:var(--muted)}
.offer>p{margin-top:16px;color:var(--muted);font-size:17px}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;gap:16px;padding:24px 0;cursor:pointer;
  font:800 18px/1.4 var(--display);letter-spacing:-.025em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* margin-right clears the rotated corner: an 11px square turned 45deg has a
   ~15.6px bounding box, which pushed 3px past the container at 320px. */
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-left:auto;
  margin-right:4px;margin-top:7px;border-right:2px solid var(--muted-2);
  border-bottom:2px solid var(--muted-2);transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq details p{padding-bottom:26px;color:var(--muted);font-size:17px}
.faq details p+p{margin-top:14px}

/* ---------- reveal ----------
   Only hidden once JS has confirmed it is running. Without the html.js gate a
   failed script would leave every section below the hero permanently invisible. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:none}

/* =========================================================================
   Phones. A real iPhone shows about 635px on first load, and the header plus
   the sticky CTA take roughly 140px of it, so the headline, subhead and button
   have to land inside about 500px of usable window.

   The type scale steps down here as a set. At 17px body and 18px secondary the
   page read like a desktop layout squeezed onto a phone: correct line lengths,
   far too much height. 16/15 keeps every line comfortably readable and takes
   whole screens out of the scroll.
   ========================================================================= */
@media(max-width:639px){
  body{font-size:16px;line-height:1.6}
  .section{padding:56px 0}
  .section.deep{padding:68px 0}
  .section.close{padding:36px 0}

  .hero{padding:22px 0 36px}
  .hero-grid{gap:26px}
  .hero h1{margin:14px 0 12px;font-size:clamp(31px,8.2vw,40px);line-height:1.06}
  .hero .lead{font-size:16px}
  .actions{margin-top:20px}
  .hero-assure{margin-top:12px;font-size:14px}
  .eyebrow{padding:7px 12px;font-size:13px}

  .kicker{font-size:13px}
  .section-head h2{margin:10px 0 12px;font-size:clamp(25px,6.2vw,32px)}
  .section-head p,.lede{font-size:16px}
  .button{min-height:48px;font-size:15px}
  .button.large{min-height:52px;padding:0 22px;font-size:16px}

  .trust .container{gap:9px;padding:26px 0}
  .trust b{font-size:clamp(18px,5vw,22px)}
  .trust p{font-size:15px}

  .points{margin-top:26px}
  .points li{padding:15px 0;font-size:15.5px}

  .flow{margin-top:28px}
  .flow-step{grid-template-columns:32px 1fr;gap:14px;padding-bottom:24px}
  .flow-step::before{left:15px;top:34px}
  .flow-step>span{width:32px;height:32px;font-size:13px}
  .flow-step b{font-size:16.5px}
  .flow-step small{margin-top:5px;font-size:15px}

  .grid-2,.grid-3{gap:10px;margin-top:28px}
  .card{padding:18px}
  .card h3{margin-bottom:6px;font-size:17.5px}
  .card p{font-size:15px}
  .callout,.offer{padding:20px 18px}
  .check-list{gap:10px;margin-top:20px}
  .check-list li{padding-left:26px;font-size:15px}
  .cta-list li{font-size:15px}

  .videos{gap:12px;margin-top:28px}
  .video-card{grid-template-columns:96px 1fr;gap:13px;padding:13px}
  .video-copy blockquote{font-size:15px;line-height:1.4}
  .video-copy cite{margin-top:10px;font-size:13.5px}
  .video-copy cite b{font-size:14px}
  .video-overlay .play{width:38px;height:38px}
  .video-overlay .play::after{border-width:7px;border-left-width:11px}

  .casefeat{gap:22px;padding:22px 18px}
  .casefeat h3{margin:10px 0 12px;font-size:clamp(21px,5.4vw,26px)}
  .casefeat>div>p{font-size:15.5px}
  .casefeat-facts{margin-top:20px}
  .casefeat-facts li{padding:12px 0}
  .casefeat-facts b{font-size:19px}
  .casefeat-facts span{font-size:14px}
  .proof-sub{margin-top:32px;font-size:clamp(18px,4.8vw,22px)}

  /* Stacked on phones, but compressed hard so the whole story still fits in
     roughly one screen. Side by side put message bubbles in a 149px column;
     top to bottom at this density reads faster and is shorter overall. */
  .im{grid-template-columns:1fr;gap:0;margin-top:24px;padding:12px}
  .im-thread{margin-top:11px;padding-top:11px;padding-left:0;border-left:0;
    border-top:1px solid var(--line-2)}
  .im-rows{gap:5px}
  .im-row{grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:7px;row-gap:0;
    padding:7px 9px}
  .im-row b{grid-column:2;font-size:12.5px}
  /* inline, with its own separator, so an extra signal costs no extra line */
  .im-row em{display:inline;font-size:11.5px}
  .im-row em::before{content:"\00b7";margin:0 5px;color:var(--muted-3);font-weight:400}
  .im-row i{grid-column:3;font-size:11.5px;white-space:nowrap}
  .im-eye{margin-top:3px}
  .im-read{margin-top:8px;padding:8px 10px}
  .im-read small{font-size:11.5px}
  .im-read b{margin-top:2px;font-size:12.5px}
  .im-msg{max-width:88%;margin-top:7px;padding:8px 10px;font-size:12.5px}
  .im-msg.out{margin-left:auto}
  .im-won{margin-top:10px;padding-top:10px;font-size:12px}
  .im-claim{gap:4px;margin-top:24px;padding:18px}
  .im-claim b{font-size:clamp(30px,8vw,38px)}
  .im-claim span{font-size:15px}

  .offer .amount{font-size:clamp(34px,9vw,44px)}
  .offer .amount small{font-size:15px}
  .offer>p{margin-top:12px;font-size:15.5px}

  .faq{margin-top:28px}
  .faq summary{gap:12px;padding:17px 0;font-size:16px}
  .faq summary::after{width:10px;height:10px;margin-top:6px}
  .faq details p{padding-bottom:18px;font-size:15px}

  .cta-panel{gap:20px;padding:26px 20px}
  .cta-panel h2{font-size:clamp(24px,6vw,30px)}
  .cta-panel p{margin-top:12px;font-size:15.5px}

  .ev-row{padding:16px}
  .ev-top b{font-size:16px}
  .ev-row p{font-size:15px}
  .defect{padding:20px 18px}
  .defect b{font-size:16.5px}
  .defect p{font-size:15px}
  .quote{padding:22px 20px}
  .stat{padding:18px}
  .stat small{font-size:14px}
  .timeline article{padding:20px}
  .page-hero,.case-hero{padding:34px 0 32px}
  .page-hero h1,.case-hero h1{margin:12px 0 12px}
  .page-hero p,.case-hero p{font-size:16px}
  .hero.compact{padding:30px 0 28px}
  .prose h2{margin:32px 0 10px;font-size:24px}
  .prose h3{margin:22px 0 8px;font-size:18px}
  .prose p,.prose li{font-size:15.5px}
  .footer{padding:40px 0 96px}
  .footer-copy,.footer-links a,.footer-links strong{font-size:14.5px}
  .footer-bottom{margin-top:28px;padding-top:18px;font-size:13px}
}

@media(max-width:899px){
  /* Full height links, so every footer target clears 44px. */
  .footer-links{gap:0}
  .footer-links a{display:flex;align-items:center;min-height:46px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}

/* =========================================================================
   640px and up
   ========================================================================= */
@media(min-width:640px){
  .container{width:min(100% - 48px,var(--container))}
  .section{padding:96px 0}
  .section.deep{padding:112px 0}
  .section.close{padding:56px 0}
  .hero{padding:60px 0 72px}
  .actions{display:flex;flex-wrap:wrap;gap:14px}
  .actions .button{flex:0 0 auto}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(4,1fr)}
  .videos{grid-template-columns:repeat(2,1fr);gap:20px}
  .video-card{grid-template-columns:120px 1fr;gap:18px;padding:18px}
  .cta-panel{padding:46px 40px}
  .tl{padding:24px}
  .tl-label{font-size:14px}
  .tl-chip{padding:9px 13px}
  .tl-chip b,.tl-chip span{font-size:14px}
  .im{gap:26px;padding:26px}
  .im-thread{padding-left:26px}
  .im-row{padding:11px 13px}
  .im-row b{font-size:14px}
  .im-row i,.im-row em{font-size:13px}
  .im-read{padding:13px 15px}
  .im-read b{font-size:15px}
  .im-msg{font-size:14.5px;padding:11px 14px}
  .im-won{font-size:14px}
  .im-claim{grid-template-columns:auto 1fr;align-items:center;gap:24px;padding:30px}
  .cmp-col{padding:18px 20px}
  .cmp-col b{font-size:18px}
  .cmp-col small{font-size:13.5px}
  .cmp-label{padding:11px 20px;font-size:13.5px}
  .cmp-val{padding:14px 20px 16px;font-size:16px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{grid-template-columns:1fr auto;align-items:center;gap:24px}
  .offer{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;padding:40px}
}

/* =========================================================================
   900px and up
   ========================================================================= */
@media(min-width:900px){
  .section{padding:112px 0}
  .section.deep{padding:128px 0}
  .nav{height:78px}
  .nav-links{display:flex;gap:30px;margin-left:auto}
  .nav-links a{color:#4c5870;font-size:16px;font-weight:600}
  .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
  .nav>.button{display:inline-flex}
  .menu,.mobile-nav{display:none}
  .sticky-cta{display:none}
  .footer{padding:72px 0 56px}
  .hero{padding:76px 0 92px}
  .hero-grid{grid-template-columns:1.04fr .96fr;gap:56px}
  .hero h1{font-size:clamp(46px,4.6vw,60px)}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:20px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .split.wide-left{grid-template-columns:1.15fr .85fr}
  .cta-panel{grid-template-columns:1.3fr auto;align-items:center;gap:48px;padding:56px}
  .footer-grid{grid-template-columns:1.5fr repeat(3,.85fr);gap:48px}
  .section-head h2{font-size:clamp(36px,3.4vw,46px)}
  .timeline{grid-template-columns:repeat(4,1fr)}
  .contact-grid{grid-template-columns:.85fr 1.15fr;gap:32px}
  .videos{gap:28px}
  .video-card{grid-template-columns:130px 1fr;gap:20px;padding:20px}
  .points li{font-size:19px;padding:26px 0}

  /* The rail has more room, so the dots and labels come back up to full size. */
  .tl{padding:28px}
  .tl-track{column-gap:8px}
  .tl-node{gap:12px;padding-bottom:26px}
  .tl-node::before{left:10px;right:-18px;top:9px}
  .tl-dot{width:20px;height:20px}
  .tl-label{font-size:15px}
  .tl-chip{margin-bottom:10px}
  .tl-head b{font-size:15px}
  .tl-head span,.tl-foot{font-size:14px}

  .im{gap:34px;padding:32px}
  .im-thread{padding-left:34px}
  .im-cap{font-size:14px}
  .casefeat{grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding:48px}

  /* Wide enough for a label column of its own, so the two value columns line
     up as a proper comparison. The tint follows the new column boundary. */
  .cmp{grid-template-columns:1.1fr 1fr 1fr}
  .cmp::after{left:calc((1.1 / 3.1) * 100% + (1 / 3.1) * 100%)}
  .cmp-col:first-of-type{grid-column:2}
  .cmp-label{grid-column:1;align-self:stretch;padding:18px 20px;
    border-top:1px solid var(--line);color:var(--ink);font-size:15px}
  .cmp-val{padding:18px 20px;border-top:1px solid var(--line)}
}

/* =========================================================================
   1100px and up
   ========================================================================= */
@media(min-width:1100px){
  .section{padding:120px 0}
  .hero h1{font-size:60px}
}

/* =========================================================================
   Reduced motion. These selectors deliberately repeat the specificity of the
   rules they override, because a media query adds none of its own: a bare
   .reveal here would lose to .js .reveal and leave content invisible.
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}

  /* Force both motion mocks back to their finished state whatever classes the
     script left on them. .js .tl-stop .tl-chip is 0-3-0 against the 0-2-0 rule
     that hides chips, and the :not() pair repeats its original verbatim and
     wins on order, because it sits at the end of the file. */
  .js .tl-stop .tl-chip{opacity:1;transform:none;transition:none}
  .js .tl-stop:not(.on):not(.done) .tl-dot{border-color:var(--blue);background:var(--blue)}
  .js .tl-stop:not(.on):not(.done) .tl-label{color:var(--ink)}
  .js .tl-stop:not(.done) .tl-node::before{background:var(--blue)}
  .js .tl-stop.on .tl-dot{box-shadow:none}
  .js .tl-dot,.js .tl-label{transition:none}
  .js .im [data-i]{opacity:1;transform:none;transition:none}
}