/* Reclaim — homepage (9 October 2026): the /ads/ and /voice/ sales-systems.css design system, plus the homepage blocks at the end. Standalone: does not load styles.css. */
:root {
  --blue: #0B57FF;
  --blue-hover: #0047E0;
  --ink: #0A0A0A;
  --muted: #5B6472;
  --muted-2: #8A93A1;
  --line: #ECEEF2;
  --soft: #F6F6F4;
  --navy: #050816;
  --navy-line: #1B2340;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --geist: "Geist", var(--sans);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 64px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: #fff; color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, figure, ul, ol { margin: 0; padding: 0; font-weight: 400; }
ul, ol { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: 1520px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

/* Type */
.eyebrow { font-size: 15px; line-height: 20px; color: var(--blue); }
.h2 { font-family: var(--geist); font-size: 56px; line-height: 60px; letter-spacing: -0.045em; }
.h2.md { font-size: 48px; line-height: 52px; }
.lead { font-size: 18px; line-height: 28px; color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 4px; font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--blue); color: #fff; padding: 12px 16px 12px 20px; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-sm { padding: 10px 14px 10px 16px; }
.nav .btn { font-family: var(--geist); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid #DADDE3; padding: 11px 20px; }
.btn-ghost:hover { border-color: #B9BEC7; }
.btn-white { background: #fff; color: var(--blue); padding: 13px 16px 13px 20px; }
.btn-white:hover { background: #EEF3FF; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.nav-in { max-width: 1520px; height: 64px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.brand { width: 260px; display: flex; align-items: center; gap: 10px; font-family: "Manrope", var(--sans); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -0.06em; }
.nav-links { display: flex; gap: 36px; font-family: var(--geist); font-size: 15px; line-height: 20px; }
.nav-links a:hover { color: var(--blue); }
.nav-cta { width: 260px; display: flex; justify-content: flex-end; }

/* Scaled illustration wrappers (the script sets --k: below 1 on narrow screens, up to 1.2 on wide ones) */
.fit { position: relative; height: calc(var(--h) * var(--k, 1)); }
.fit-inner { position: absolute; left: 50%; top: 0; width: var(--w); height: var(--h); transform: translateX(-50%) scale(var(--k, 1)); transform-origin: top center; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--soft); border-bottom: 1px solid var(--line); padding-top: 104px; }
.hero-text { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero h1 { font-family: var(--geist); font-size: 64px; line-height: 64px; letter-spacing: -0.05em; max-width: 760px; }
.hero .lead { max-width: 730px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 12px; }
.stage-fit { margin-top: 60px; }
.stage > * { position: absolute; }
.stage .grid-field { left: 0; top: 48px; }
.stage .connectors { left: 526px; top: 122px; }
.stage .reply { left: 958px; top: 96px; }
.stage .pipeline { left: 838px; top: 188px; }
.stage .phone { left: 64px; top: 28px; }
.stage .lead-card { left: 336px; top: 240px; }

/* Shared UI pieces */
.card-ui { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 10px 24px rgba(10,10,10,.05); }
.card-ui .tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.reply { width: 320px; padding: 12px 14px 12px 12px; }
.reply .ic { width: 40px; height: 40px; border-radius: 6px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reply .t1 { font-family: var(--geist); font-size: 15px; line-height: 20px; }
.reply .t2 { font-family: var(--geist); font-size: 13px; line-height: 16px; color: var(--muted); }
.reply .time { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted-2); flex-shrink: 0; }
.lead-card { width: 258px; padding: 12px 14px 12px 12px; box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 14px 32px rgba(10,10,10,.09); }
.lead-card .ic { width: 32px; height: 32px; border-radius: 6px; background: #E8EFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lead-card .t1 { font-family: var(--geist); font-size: 14px; line-height: 18px; }
.lead-card .t2 { font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }

.win-bar { display: flex; align-items: center; gap: 6px; padding: 0 12px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.win-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D9DCE2; flex-shrink: 0; }
.win-bar span { margin-left: 8px; font-family: var(--mono); font-size: 11px; line-height: 14px; color: #8A919C; white-space: nowrap; }

.pipeline { width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 10px 24px rgba(10,10,10,.05); font-family: var(--geist); }
.pipeline .win-bar { height: 32px; }
.pl-row { display: grid; grid-template-columns: 140px 140px 1fr; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid #F0F1F4; font-size: 13px; line-height: 16px; }
.pl-row:last-child { border-bottom: 0; }
.pl-row.head { height: 36px; font-size: 12px; color: var(--muted-2); }
.pl-src { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.pl-src i { width: 6px; height: 6px; border-radius: 1px; background: var(--blue); flex-shrink: 0; }
.pl-src i.lt { background: #A9C1FF; }
.pill { justify-self: start; padding: 3px 7px; border-radius: 4px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 11px; line-height: 14px; white-space: nowrap; }
.pill.solid { background: var(--blue); color: #fff; }

.phone { width: 316px; height: 520px; padding: 10px; background: #fff; border: 1px solid #E3E6EC; border-radius: 36px; box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 24px 48px rgba(10,10,10,.08); display: flex; }
.screen { flex: 1; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: #FAFAF9; border: 1px solid #EFF0F3; font-family: var(--geist); }
.status { height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 12px; line-height: 16px; }
.status .island { width: 56px; height: 14px; border-radius: 7px; background: var(--ink); }
.status .bat { width: 14px; height: 8px; border-radius: 2px; border: 1px solid var(--ink); }
.post { margin-top: 6px; background: #fff; border-top: 1px solid #EFF0F3; border-bottom: 1px solid #EFF0F3; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-head .av { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.post-head .who { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.post-head .who b { font-weight: 400; font-size: 13px; line-height: 16px; }
.post-head .who span { font-size: 11px; line-height: 14px; color: var(--muted-2); }
.post-head .more { display: flex; gap: 3px; }
.post-head .more i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }
.creative { position: relative; height: 196px; overflow: hidden; background: var(--blue); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.creative .sun { position: absolute; left: 170px; top: 4px; }
.creative p { position: relative; font-size: 30px; line-height: 32px; letter-spacing: -0.03em; color: #fff; }
.post-cta { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--soft); }
.skel { display: flex; flex-direction: column; gap: 6px; }
.skel i { display: block; height: 7px; border-radius: 4px; background: #D9DCE2; }
.post-cta .quote-btn { padding: 7px 12px; border-radius: 6px; background: #fff; border: 1px solid #DADDE3; font-size: 12px; line-height: 16px; }
.next-post { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 14px; background: #fff; }
.next-post .av { width: 30px; height: 30px; border-radius: 50%; background: #E6E8EC; flex-shrink: 0; }

/* Block strips */
.strip { position: relative; height: 50px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }

/* Sections */
.sec { padding: 104px 72px 112px; }

/* Problem */
.problem-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.problem-head .l { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.problem-head .lead { width: 420px; flex-shrink: 0; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.timeline .dash { position: absolute; top: 90px; height: 1.5px; }
.timeline .dash.a { left: 0; width: 50%; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px); }
.timeline .dash.b { left: calc(50% + 6px); right: 0; background: repeating-linear-gradient(90deg, #C9CDD4 0 6px, transparent 6px 12px); }
.stop { position: relative; display: flex; flex-direction: column; gap: 20px; padding-right: 8px; }
.stop .chip-area { height: 64px; display: flex; align-items: flex-end; }
.chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 8px 20px rgba(10,10,10,.05); font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.chip.dark { color: var(--ink); }
.chip.cold { background: #F1F2F4; border-color: #E3E6EC; box-shadow: none; }
.chip.cold i { width: 6px; height: 6px; border-radius: 50%; background: #9AA1AD; }
.contact { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 8px 20px rgba(10,10,10,.05); }
.contact .av { width: 30px; height: 30px; border-radius: 50%; background: #E8EFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact b { display: block; font-weight: 500; font-size: 13px; line-height: 18px; }
.contact span { display: block; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.stop .dot { height: 14px; display: flex; align-items: center; }
.stop .dot i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue); display: flex; align-items: center; justify-content: center; }
.stop .dot i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.stop .dot.off i { border-color: #C9CDD4; }
.stop .dot.off i::after { background: #C9CDD4; }
.stop h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.02em; }
.stop h3.off { color: var(--muted); }
.stop p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 220px; }
.problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; border-top: 1px solid var(--line); }
.pcard { display: flex; flex-direction: column; gap: 16px; padding: 40px 40px 8px; }
.pcard:first-child { padding-left: 0; }
.pcard:last-child { padding-right: 0; }
.pcard:nth-child(2) p { max-width: 290px; }
.pcard + .pcard { border-left: 1px solid var(--line); }
.pcard .n { font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--blue); }
.pcard h3, .bcard h3, .step h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.025em; }
.pcard p, .bcard-text p, .step p { font-size: 16px; line-height: 26px; color: var(--muted); }

/* What we build */
.build { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.center-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; max-width: 960px; }
.center-head .lead { max-width: 820px; }
.cards { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); justify-items: center; gap: 48px 24px; }
.bcard { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.panel { border-radius: 8px; overflow: hidden; background: var(--blue); }
.panel .tex { position: absolute; top: 0; left: 0; }
.panel .tex.r { left: auto; right: 0; }
.win { position: absolute; left: 40px; top: 40px; width: 364px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 40px rgba(5,8,22,.22); font-family: var(--geist); }
.win .win-bar { height: 30px; }
.win.t26 { top: 26px; }
.float { position: absolute; left: 16px; top: 278px; width: 250px; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(5,8,22,.08), 0 14px 32px rgba(5,8,22,.24); }
.float .ic { width: 32px; height: 32px; border-radius: 6px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.float b { display: block; font-family: var(--geist); font-weight: 400; font-size: 14px; line-height: 18px; }
.float span { display: block; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }
.src-head, .src-row { display: grid; grid-template-columns: 1fr 52px 52px; align-items: center; padding: 0 38px 0 14px; }
.src-head { padding-top: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 14px; color: #8A919C; }
.src-row { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid #F1F2F4; }
.src-row:last-child { border-bottom: 0; }
.src-head span + span, .src-row .num { text-align: right; }
.src-row .num { font-family: var(--mono); font-size: 12px; line-height: 16px; }
.src-name { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.src-name b { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; line-height: 16px; white-space: nowrap; }
.src-name em { font-style: normal; padding: 1px 6px; border-radius: 999px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 10px; line-height: 14px; }
.bar { width: 150px; max-width: 100%; height: 4px; border-radius: 2px; background: #EEF1F6; }
.bar i { display: block; height: 4px; border-radius: 2px; background: #7FA2FF; }
.bar i.top { background: var(--blue); }
.thread { display: flex; flex-direction: column; gap: 12px; padding: 14px 38px 20px 14px; }
.sys { align-self: center; padding: 3px 9px; border-radius: 999px; background: #F1F2F4; font-family: var(--mono); font-size: 10px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.msg { display: flex; flex-direction: column; gap: 4px; }
.msg.out { align-self: flex-end; align-items: flex-end; max-width: 224px; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg p { padding: 9px 12px; font-size: 13px; line-height: 18px; }
.msg.out p { border-radius: 14px 14px 4px 14px; background: var(--blue); color: #fff; }
.msg.in p { border-radius: 14px 14px 14px 4px; background: #F1F2F4; }
.msg small { font-family: var(--mono); font-size: 10px; line-height: 12px; color: #8A919C; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); padding-right: 24px; border-bottom: 1px solid var(--line); }
.stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats small { font-family: var(--mono); font-size: 10px; line-height: 12px; color: #8A919C; white-space: nowrap; }
.stats b { font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: -0.02em; }
.rep { display: flex; align-items: center; gap: 12px; padding: 11px 38px 11px 14px; border-bottom: 1px solid #F1F2F4; }
.rep:last-child { border-bottom: 0; }
.rep .av { width: 28px; height: 28px; border-radius: 50%; background: #F1F2F4; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); font-size: 11px; line-height: 14px; }
.rep .av.on { background: #E8EFFF; color: var(--blue); }
.rep .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rep .who b { font-weight: 400; font-size: 13px; line-height: 16px; }
.rep .who span { font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.rep .tag { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 11px; line-height: 16px; }
.rep .tag.grey { background: #F1F2F4; color: var(--muted); }
.bcard-text { display: flex; flex-direction: column; gap: 12px; padding-right: 16px; }
.bcard-text .k { font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--muted); }

/* Statement */
.statement { display: flex; align-items: center; justify-content: center; padding: 112px 0; }
.statement .blocks { flex-shrink: 0; }
.statement-box { width: 880px; max-width: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 56px 80px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.statement-box p { font-size: 26px; line-height: 38px; letter-spacing: -0.02em; }

/* How it works */
.how { border-bottom: 1px solid var(--line); }
.how .head { display: flex; flex-direction: column; gap: 20px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; }
.steps .conn { position: absolute; left: 44px; right: 33.333%; top: 21px; height: 1.5px; background: repeating-linear-gradient(90deg, #B9CCFF 0 6px, transparent 6px 12px); }
.step { position: relative; display: flex; flex-direction: column; gap: 28px; padding-right: 48px; }
.step .num { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #B9CCFF; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; line-height: 18px; color: var(--blue); }
.step.on .num { background: var(--blue); border-color: var(--blue); color: #fff; }
.step .body { display: flex; flex-direction: column; gap: 12px; }
.step p { max-width: 330px; }

/* Why Reclaim (dark band) */
.why { background: var(--navy); overflow: hidden; padding: 112px 72px 40px; display: flex; flex-direction: column; align-items: center; gap: 72px; }
.why .center-head .eyebrow { color: #BFD6FF; }
.why h2 { font-family: var(--geist); font-size: 72px; line-height: 72px; letter-spacing: -0.05em; color: #fff; }
.why-cols { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); }
.why-col { display: flex; flex-direction: column; gap: 14px; padding: 40px 40px 44px; }
.why-col:first-child { padding-left: 0; }
.why-col:last-child { padding-right: 0; }
.why-col + .why-col { border-left: 1px solid var(--navy-line); }
.why-col p { padding-top: 10px; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.route-fit { width: 100%; }
.route .lbl { position: absolute; width: 160px; text-align: center; font-family: var(--geist); font-size: 15px; line-height: 20px; color: #fff; }
.route .lbl.dim { color: #8A93B0; }
.route .tag { position: absolute; font-family: var(--mono); font-size: 11px; line-height: 14px; color: #6F97FF; }
.route .tag.rep { color: #7FA2FF; }
.route-list { width: 100%; display: none; flex-direction: column; padding-bottom: 48px; }
.route-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; color: #fff; font-family: var(--geist); font-size: 16px; line-height: 22px; }
.route-list li i { width: 16px; height: 16px; flex-shrink: 0; background: var(--blue); border: 1.5px solid #6F97FF; }
.route-list li i.o { background: transparent; border-color: rgba(255,255,255,.55); }
.route-list li i.w { background: #fff; border-color: #fff; }
.route-list li.sub { padding-left: 30px; color: #BFD6FF; }
.route-list li.sub i { background: #7FA2FF; border-color: #7FA2FF; }
.route-list li small { font-family: var(--mono); font-size: 11px; color: #6F97FF; }

/* Tools */
.tools { background: var(--soft); border-bottom: 1px solid var(--line); overflow: hidden; padding: 104px 72px; display: flex; flex-direction: column; gap: 64px; }
.tools .head { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.tools .ex { display: flex; flex-direction: column; gap: 20px; }
.tools .ex > small { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.hex .t { position: absolute; width: 140px; text-align: center; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: var(--muted); }
.tool-list { display: none; flex-wrap: wrap; gap: 8px; }
.tool-list li { padding: 8px 14px; border: 1px solid #DADDE3; border-radius: 999px; background: #fff; font-size: 15px; line-height: 20px; color: var(--muted); }

/* Credibility */
.cred-sec { padding: 104px 72px; border-bottom: 1px solid var(--line); }
.cred { display: flex; flex-direction: column; gap: 48px; background: var(--navy); border-radius: 12px; overflow: hidden; padding: 64px 40px; }
.cred-intro { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }
.cred-intro .eyebrow { color: #BFD6FF; font-size: 15px; line-height: 20px; }
.cred-intro h2 { font-family: var(--geist); font-size: 56px; line-height: 60px; letter-spacing: -0.045em; color: #fff; }
.cred-intro p { font-size: 18px; line-height: 28px; color: #7FA3E8; }
.cue { display: none; align-items: center; gap: 16px; padding-top: 28px; }
.cue .n { font-family: var(--mono); font-size: 12px; line-height: 16px; color: #BFD6FF; white-space: nowrap; }
.cue .ln { width: 64px; height: 1px; background: #2A3558; flex-shrink: 0; }
.cue .t { font-size: 15px; line-height: 22px; color: #fff; }
.stack { display: grid; gap: 20px; }
.story { display: flex; border-radius: 12px; overflow: hidden; border: 1px solid #26325A; background: #0D1426; }
.story img { width: 278px; height: auto; align-self: stretch; flex-shrink: 0; object-fit: cover; }
.story.front img { object-position: 50% 38%; }
.story.back img { object-position: 50% 30%; }
.story .q { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 40px 32px; }
.story blockquote { font-size: 19px; line-height: 29px; letter-spacing: -0.01em; color: #fff; }
.story .by { display: flex; flex-direction: column; gap: 4px; }
.story .by b { font-family: var(--geist); font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: -0.02em; color: #fff; }
.story .by span { font-family: var(--mono); font-size: 12px; line-height: 18px; color: #8A93B0; }

/* Credibility — pinned scroll on large screens only; elsewhere both stories are stacked and readable */
@media (min-width: 1240px) and (min-height: 770px) and (prefers-reduced-motion: no-preference) {
  .cred-pin { height: calc(700px + 110vh); }
  .cred { position: sticky; top: calc(64px + (100vh - 64px - 700px) / 2); height: 700px; flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; padding: 80px clamp(40px, calc((100% - 1118px) / 2 + 40px), 104px); }
  .cred-intro { flex: 0 1 420px; min-width: 0; }
  .cue { display: flex; }
  .stack { display: block; position: relative; width: 664px; height: 540px; flex-shrink: 0; }
  .story { position: absolute; height: 480px; will-change: transform; }
  .story img { height: 100%; }
  .story.front { left: -11px; top: 0; width: 651px; z-index: 2; }
  .story.back { left: 32px; top: 51px; width: 640px; z-index: 1; background: #0A1020; }
  .story .q { padding: 0 28px; align-self: center; }
  .story.front .q { height: 370px; justify-content: flex-start; gap: 16px; }
  .story.back .q { height: 442px; padding-right: 48px; gap: 16px; }
  .story.back .by { gap: 12px; }
}
/* Laptop widths: shrink the story stack slightly so the intro keeps its width and nothing is clipped. */
@media (min-width: 1240px) and (max-width: 1535px) and (min-height: 770px) and (prefers-reduced-motion: no-preference) {
  .stack { zoom: .9; }
}

/* FAQ */
.faq { display: flex; flex-direction: column; align-items: center; gap: 64px; border-bottom: 1px solid var(--line); }
.acc { width: 1060px; max-width: 100%; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 0; font-size: 24px; line-height: 32px; letter-spacing: -0.025em; }
.acc summary::-webkit-details-marker { display: none; }
.acc details[open] summary { padding-bottom: 16px; }
.acc .ic { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #DADDE3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); transition: background-color .15s, border-color .15s, color .15s; }
.acc details[open] .ic { background: var(--blue); border-color: var(--blue); color: #fff; }
.acc details[open] .ic .v { opacity: 0; }
.acc .a { padding-bottom: 36px; max-width: 760px; font-size: 18px; line-height: 28px; color: var(--muted); }

/* Closing CTA */
.cta-sec { padding: 96px 72px; border-bottom: 1px solid var(--line); }
.cta { position: relative; overflow: hidden; background: var(--blue); border-radius: 12px; }
.cta-bar { height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.25); }
.cta-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.cta-body { position: relative; }
.cta-tex { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.cta-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 120px 24px 140px; text-align: center; }
.cta h2 { max-width: 660px; font-family: var(--geist); font-size: 56px; line-height: 60px; letter-spacing: -0.045em; color: #fff; }
.cta p { max-width: 600px; font-size: 18px; line-height: 28px; color: #D6E2FF; }
.cta .btn-white { margin-top: 16px; }

/* Footer */
.foot { padding: 72px 72px 32px; display: flex; flex-direction: column; gap: 72px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.foot-brand .brand { width: auto; }
.foot-brand .loc { font-size: 15px; line-height: 22px; color: var(--muted); }
.foot-brand .btn { margin-top: 8px; }
.foot-links { width: 220px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 22px; }
.foot-links small { padding-bottom: 6px; font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--muted); }
.foot-links a:hover { color: var(--blue); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1340px) {
  .statement .blocks { display: none; }
}
@media (max-width: 1180px) {
  .problem-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .problem-head .lead { width: auto; max-width: 640px; }
}
@media (max-width: 1100px) {
  .sec, .tools, .cred-sec, .cta-sec, .why, .foot { padding-left: 40px; padding-right: 40px; }
  .hero h1 { font-size: 56px; line-height: 58px; }
  .h2, .cred-intro h2, .cta h2 { font-size: 48px; line-height: 52px; }
  .why h2 { font-size: 60px; line-height: 62px; }
}
@media (max-width: 1060px) {
  .cta-tex .deco { display: none; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .brand, .nav-cta { width: auto; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .timeline .dash { display: none; }
  .problem-cards, .why-cols, .steps { grid-template-columns: 1fr; }
  .pcard, .pcard:first-child { padding: 32px 0 8px; }
  .pcard + .pcard { border-left: 0; border-top: 1px solid var(--line); }
  .steps { gap: 40px; }
  .steps .conn { display: none; }
  .step { padding-right: 0; gap: 20px; }
  .why-col, .why-col:first-child, .why-col:last-child { padding: 28px 0 32px; }
  .why-col + .why-col { border-left: 0; border-top: 1px solid var(--navy-line); }
  .statement-box { padding: 48px 32px; }
  .statement-box p { font-size: 22px; line-height: 32px; }
}
@media (max-width: 760px) {
  .nav-in { padding: 0 16px; }
  .sec, .tools, .cred-sec, .cta-sec { padding: 72px 20px 80px; }
  .why { padding: 80px 20px 32px; gap: 48px; }
  .foot { padding: 56px 20px 28px; gap: 48px; }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.045em; }
  .lead, .cred-intro p, .cta p, .acc .a { font-size: 17px; line-height: 27px; }
  .h2, .h2.md, .cred-intro h2, .cta h2 { font-size: 36px; line-height: 40px; }
  .why h2 { font-size: 44px; line-height: 48px; }
  .stage-fit { height: auto; margin-top: 0; }
  .stage { position: static; transform: none; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px 48px; }
  .stage > * { position: static; }
  .stage .grid-field, .stage .connectors, .stage .phone { display: none; }
  .stage .lead-card { order: 1; }
  .stage .reply { order: 2; }
  .stage .pipeline { order: 3; }
  .lead-card, .reply, .pipeline { width: 100%; max-width: 420px; }
  .pl-row { grid-template-columns: 1fr 1.3fr auto; gap: 8px; padding: 0 12px; font-size: 12px; }
  .timeline { grid-template-columns: 1fr; }
  .route-fit, .hex-fit { display: none; }
  .route-list { display: flex; }
  .tool-list { display: flex; }
  .cred { padding: 40px 20px; gap: 36px; }
  .story { flex-direction: column; }
  .story img { width: 100%; height: 300px; align-self: auto; }
  .story .q { padding: 28px 24px; }
  .story blockquote { font-size: 17px; line-height: 26px; }
  .statement { padding: 64px 0; }
  .statement-box { padding: 40px 24px; }
  .statement-box p { font-size: 20px; line-height: 30px; }
  .acc summary { font-size: 19px; line-height: 26px; padding: 24px 0; gap: 20px; }
  .acc details[open] summary { padding-bottom: 12px; }
  .cta-content { padding: 72px 20px 88px; }
  .foot-top { flex-direction: column; }
  .foot-links { width: auto; }
}

/* ---------- Motion (30 September) ----------
   Everything above is the finished state. The start states below apply only while <html> has .anim, which the inline
   head script adds when motion is allowed (and removes again if sales-systems.js never starts). The script adds .play
   to a container when it scrolls into view, or .play.instant when it is already above the viewport. */
.cn { stroke-dasharray: 1; }
.route .trk, .route .hd, .typing { display: none; }

.anim .rv {
  opacity: 0; transform: var(--from, translateY(10px));
  transition: opacity var(--t, .6s) var(--e, var(--ease)) calc(var(--o, 0s) + var(--d, 0s)),
              transform var(--t, .6s) var(--e, var(--ease)) calc(var(--o, 0s) + var(--d, 0s));
}
.anim .play .rv { opacity: 1; transform: none; }
.anim .instant .rv, .anim .instant .cn, .anim .instant .node { transition: none !important; }
.anim .instant * { animation: none !important; }

/* Hero: the ad, the lead, the instant reply, then the lead lands in the pipeline */
.stage .phone { --d: 0s; --t: .8s; --from: translateY(18px); }
.stage .pipeline { --d: .15s; --t: .8s; --from: translateY(18px); }
.stage .grid-field { --d: .3s; --t: 1.2s; --from: none; }
.stage .lead-card { --d: .8s; --t: .5s; --from: translateY(10px) scale(.96); }
.stage .reply { --d: 2s; --t: .5s; --from: translateY(10px) scale(.96); }
.stage .pl-row.new { --d: 2.2s; --t: .5s; --from: translateX(-12px); }
.stage .pl-row.new .pill { --d: 2.6s; --t: .4s; --from: scale(.8); }
.anim .stage .cn { stroke-dashoffset: 1; transition: stroke-dashoffset var(--t) linear var(--d); }
.anim .stage.play .cn { stroke-dashoffset: 0; }
.anim .stage .node { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .2s ease var(--d), transform .35s var(--ease) var(--d); }
.anim .stage.play .node { opacity: 1; transform: none; }
.anim .stage.play:not(.instant) .pl-row.new { animation: rowflash 1.8s ease 2.4s both; }
@keyframes rowflash { from { background: #EEF3FF; } to { background: #fff; } }

/* Problem timeline: the line draws with the scroll and each stop lands as the line reaches it.
   Where the timeline stacks (no dashed line), each stop lands as it scrolls into view. */
.timeline .dash { transform-origin: left center; }
.anim .timeline .dash { transform: scaleX(0); transition: transform .12s linear; }
.anim .stop .dot i, .anim .stop .chip-area > *, .anim .stop .txt { opacity: 0; transition: opacity .4s ease var(--d, 0s), transform .45s var(--ease) var(--d, 0s); }
.anim .stop .dot i { transform: scale(.3); }
.anim .stop .chip-area > * { --d: .06s; transform: translateY(8px) scale(.97); }
.anim .stop .txt { --d: .12s; transform: translateY(8px); }
.anim .stop.on .dot i, .anim .stop.on .chip-area > *, .anim .stop.on .txt { opacity: 1; transform: none; }

/* What we build: each mock window plays once */
.panel .bar i { --from: scaleX(0); --t: .8s; transform-origin: left center; }
.panel .src-name em { --d: 1s; --t: .35s; --from: scale(.8); }
.panel .float { --t: .5s; --from: translateY(14px); }
.panel .rep .tag { --t: .35s; --from: scale(.8); }
.thread { position: relative; }
.typing { position: absolute; left: 14px; bottom: 36px; align-items: center; gap: 4px; height: 36px; padding: 0 13px; border-radius: 14px 14px 14px 4px; background: #F1F2F4; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #8A919C; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.anim .panel.play:not(.instant) .typing { display: flex; animation: typing 1s linear calc(var(--o, 0s) + .9s) both; }
@keyframes typing { 0% { opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* Why Reclaim route: the script draws the lines and lights each stop with the scroll */
.anim .route .trk { display: inline; }
.anim .route .r-main, .anim .route .r-branch { stroke-dasharray: 1; }
.anim .route .hd.on { display: inline; }
.anim .route .st.b { transition: fill .3s ease, stroke .3s ease; }
.anim .route .st.b:not(.on) { fill: #0B1330; stroke: #243056; }
.anim .route .pk { transition: opacity .3s ease; }
.anim .route .pk:not(.on) { opacity: 0; }
.anim .route .mq { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease) calc(var(--i) * 70ms); }
.anim .route .mk:not(.on) .mq { transform: scale(0); }
.anim .route .mk:not(.on) .mb { opacity: 0; }
.anim .route .lbl, .anim .route .tag { transition: color .3s ease, opacity .3s ease; }
.anim .route .lbl:not(.on) { color: #3A4466; }
.anim .route .tag:not(.on) { opacity: 0; }

@media (max-width: 760px) {
  /* Phones show the hero as a card stack: lead, reply, then the pipeline */
  .stage .lead-card { --d: .1s; }
  .stage .reply { --d: .7s; }
  .stage .pipeline { --d: 1.2s; }
  .stage .pl-row.new { --d: 1.6s; }
  .stage .pl-row.new .pill { --d: 1.9s; }
  .anim .stage.play:not(.instant) .pl-row.new { animation-delay: 1.8s; }
}

/* ---------- Story order (30 September, local preview) ----------
   Who it's for and the promise, proof straight after it, then why growth stalls (one headline, nine labelled symptoms
   and what it costs), the system behind the business, what changes, the first step and the close. */

/* 1. Hero: who it's for, above the promise */
.hero .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border: 1px solid #DADDE3; border-radius: 999px; background: #fff; font-size: 14px; line-height: 20px; color: var(--muted); }
.hero .kicker i { width: 8px; height: 8px; background: var(--blue); }
.hero .lead { text-wrap: balance; }

/* 3-4. Why growth stalls: nine labelled symptoms in three groups, under the one headline.
   Groups use subgrid so the first symptom in each column starts on the same line. */
.symptoms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; margin-top: 72px; border-top: 1px solid var(--line); }
.sgroup { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding: 40px 40px 0; }
.sgroup:first-child { padding-left: 0; }
.sgroup:last-child { padding-right: 0; }
.sgroup + .sgroup { border-left: 1px solid var(--line); }
.sg-head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.sg-head .n { font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--blue); }
.sg-head h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.025em; text-wrap: balance; }
.sgroup li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 0 28px; border-top: 1px solid var(--line); }
.sgroup li .tag { padding: 3px 10px; border-radius: 999px; background: #F1F2F4; border: 1px solid #E3E6EC; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
.sgroup li p { max-width: 360px; font-size: 18px; line-height: 27px; letter-spacing: -0.01em; text-wrap: pretty; }
.cost { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 880px; margin: 96px auto 0; padding: 56px 80px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.cost-line { font-size: 26px; line-height: 38px; letter-spacing: -0.02em; text-wrap: balance; }
.bridge { display: inline-block; text-wrap: balance; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--blue); transition: color .15s; }
.bridge:hover { color: var(--blue-hover); }

/* 5. What we build: white section, picture-first pillars, then the service line */
.journey { background: #fff; border-top: 1px solid var(--line); overflow: hidden; padding: 112px 72px; display: flex; flex-direction: column; align-items: center; gap: 72px; }

/* 5b. What we build: four picture-first cards (blue panel with an illustrative screen, then the words), 2 x 2 */
.pillars { width: 100%; max-width: 1180px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 32px; }
.pillars.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
.pillars.three .pillar .pt { padding-right: 8px; }
.pillars.three .pillar h3 { font-size: 26px; line-height: 32px; }
.pillars.three .pillar .open { font-size: 19px; line-height: 27px; }
.pillar { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pillar .pv { display: flex; justify-content: center; border-radius: 12px; background: var(--blue); overflow: hidden; }
.pillar .panel { width: min(100%, 440px); border-radius: 0; }
.panel .tex.flip { transform: scaleX(-1); }
.pillar .pt { display: flex; flex-direction: column; gap: 10px; padding-right: 24px; }
.pillar .k { font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--blue); }
.pillar h3 { padding-top: 4px; font-family: var(--geist); font-size: 28px; line-height: 34px; letter-spacing: -0.03em; }
.pillar .open { font-family: var(--geist); font-size: 20px; line-height: 28px; letter-spacing: -0.015em; }
.pillar .pt p:not(.k):not(.open) { max-width: 540px; font-size: 16px; line-height: 26px; color: var(--muted); }
.reveal-line { max-width: 900px; padding-top: 40px; text-align: center; font-family: var(--geist); font-size: 40px; line-height: 48px; letter-spacing: -0.035em; text-wrap: balance; }
.reveal-line .w { transition: opacity .25s linear; }

/* 6. What changes for you: the dark band now sits here */
.gains { background: var(--navy); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.gains .center-head .eyebrow { color: #BFD6FF; }
.gains .h2 { color: #fff; }
.gains .why-col p { color: #fff; }
.tools-ex { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tools-ex > small { font-family: var(--mono); font-size: 12px; line-height: 16px; color: #8A93B0; }
.gains .tool-list { display: flex; justify-content: center; }
.gains .tool-list li { background: transparent; border-color: #26325A; color: #A3AECB; }

/* 2. Proof: one labelled case study under the testimonial and founder story */
.case { display: grid; grid-template-columns: 200px auto 1fr; align-items: center; gap: 48px; margin-top: 48px; padding: 36px 40px; border: 1px solid var(--line); border-radius: 12px; }
.case-l { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.case-label { padding: 2px 8px; border-radius: 999px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 11px; line-height: 16px; }
.case-l b { font-family: var(--geist); font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: -0.02em; }
.case-metric { font-family: var(--geist); font-size: 44px; line-height: 48px; letter-spacing: -0.04em; white-space: nowrap; }
.case-metric span[aria-hidden] { color: var(--blue); }
.case-r { display: flex; flex-direction: column; gap: 8px; }
.case-r p { font-size: 16px; line-height: 24px; }
.case-r small { font-size: 14px; line-height: 22px; color: var(--muted); }

/* 7. How it works, introduced by the service statement */
.how .head .lead { max-width: 640px; }

@media (max-width: 1180px) {
  .case { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 1100px) {
  .journey { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; max-width: 640px; row-gap: 56px; }
  .pillars.three { grid-template-columns: 1fr; }
  .reveal-line { font-size: 32px; line-height: 40px; }
  .symptoms { grid-template-columns: 1fr; margin-top: 56px; }
  .sgroup, .sgroup:first-child, .sgroup:last-child { display: block; padding: 32px 0 8px; }
  .sgroup + .sgroup { border-left: 0; border-top: 1px solid var(--line); }
  .sg-head { padding-bottom: 20px; }
  .sgroup li { padding: 20px 0 24px; }
  .cost { margin-top: 72px; padding: 48px 32px; }
  .cost-line { font-size: 22px; line-height: 32px; }
}
@media (max-width: 760px) {
  .journey { padding: 80px 20px; gap: 48px; }
  .hero .kicker { gap: 8px; padding: 6px 12px 6px 10px; font-size: 12px; line-height: 16px; text-wrap: balance; }
  .symptoms { margin-top: 40px; }
  .sg-head h3 { font-size: 22px; line-height: 28px; }
  .sgroup li p { font-size: 17px; line-height: 26px; }
  .cost { margin-top: 56px; padding: 40px 24px; }
  .cost-line { font-size: 20px; line-height: 30px; }
  .gains { gap: 40px; }
  .pillar { gap: 22px; }
  .pillar .pt { padding-right: 0; }
  .pillar h3 { font-size: 26px; line-height: 30px; }
  .pillar .open { font-size: 19px; line-height: 27px; }
  .reveal-line { padding-top: 16px; font-size: 26px; line-height: 34px; }
  .case { margin-top: 36px; padding: 28px 24px; }
  .case-metric { font-size: 34px; line-height: 40px; white-space: normal; }
}

/* Insurance page, What we build (5 October): four different mock shapes, a call screen, a call transcript,
   a live handoff to the free rep, and a results dashboard */
.callcard { position: absolute; left: 62px; top: 30px; width: 260px; padding: 16px 18px 14px; background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(5,8,22,.22); font-family: var(--geist); display: flex; flex-direction: column; align-items: center; text-align: center; }
.cc-top { font-family: var(--mono); font-size: 10px; line-height: 14px; color: #8A919C; }
.cc-av { position: relative; margin-top: 16px; width: 60px; height: 60px; border-radius: 50%; background: #E8EFFF; color: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 15px; line-height: 20px; }
.cc-av::before, .cc-av::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid #BFD3FF; }
.cc-av::after { inset: -16px; border-color: #DCE7FF; }
.anim .panel.play:not(.instant) .cc-av::before, .anim .panel.play:not(.instant) .cc-av::after { animation: ring 1.8s ease-out infinite; }
.anim .panel.play:not(.instant) .cc-av::after { animation-delay: .5s; }
@keyframes ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.cc-name { margin-top: 20px; font-weight: 400; font-size: 17px; line-height: 22px; }
.cc-status { font-size: 12px; line-height: 16px; color: var(--muted); }
.cc-timer { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #E8EFFF; }
.cc-timer b { font-family: var(--mono); font-weight: 400; font-size: 18px; line-height: 22px; color: var(--blue); }
.cc-timer span { font-family: var(--mono); font-size: 10px; line-height: 14px; color: var(--blue); white-space: nowrap; }
.cc-log { align-self: stretch; margin-top: 14px; padding-top: 2px; border-top: 1px solid var(--line); }
.cc-log div { display: flex; justify-content: space-between; padding: 8px 2px 0; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }
.xfer-lead { position: absolute; left: 52px; top: 34px; width: 280px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 10px; box-shadow: 0 16px 40px rgba(5,8,22,.22); font-family: var(--geist); }
.xfer-lead .av { width: 32px; height: 32px; border-radius: 50%; background: #E8EFFF; color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); font-size: 11px; line-height: 14px; }
.xfer-lead b { display: block; font-weight: 400; font-size: 14px; line-height: 18px; }
.xfer-lead div span { display: block; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }
.xfer-link { position: absolute; left: 191px; top: 92px; width: 2px; height: 82px; background: repeating-linear-gradient(180deg, #fff 0 5px, transparent 5px 10px); }
.xfer-link span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--blue); font-family: var(--mono); font-size: 11px; line-height: 14px; white-space: nowrap; box-shadow: 0 6px 16px rgba(5,8,22,.18); }
.reps3 { position: absolute; left: 22px; top: 174px; width: 340px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-family: var(--geist); }
.rt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; text-align: center; }
.rt .av { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; line-height: 14px; }
.rt b { font-weight: 400; font-size: 14px; line-height: 18px; }
.rt small { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; line-height: 14px; color: rgba(255,255,255,.8); white-space: nowrap; }
.rt small i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.rt.on { background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(5,8,22,.22); }
.rt.on .av { background: #E8EFFF; color: var(--blue); }
.rt.on small { color: var(--blue); }
.rt.on small i { background: var(--blue); }
.win.dash .src-head, .win.dash .src-row { grid-template-columns: 1fr 48px 84px; }

/* Insurance page (6 October): How it works sits inside the dark Why Reclaim band */
.gains .how-in { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 32px; }
.gains .how-in .head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.gains .how-in .eyebrow { color: #BFD6FF; }
.gains .how-in .h2 { color: #fff; }
.gains .steps { width: 100%; }
.gains .steps .conn { background: repeating-linear-gradient(90deg, #3A4A7A 0 6px, transparent 6px 12px); }
.gains .step .num { background: var(--navy); border-color: #3A4A7A; color: #BFD6FF; }
.gains .step.on .num { background: var(--blue); border-color: var(--blue); color: #fff; }
.gains .step h3 { color: #fff; }
.gains .step p { color: #A3AECB; }

/* ---------- Homepage (9 October 2026) ----------
   Content and section order from Paper "Homepage · AI implementation"; every piece below reuses the type, colour,
   panel, card and motion language above. */

/* Hero: an enquiry comes in, the workflow handles it, the booking goes out */
.stage.home .connectors { left: 0; top: 0; }
.stage.home .enq { left: 96px; top: 168px; }
.stage.home .flow { left: 471px; top: 56px; }
.stage.home .booked { left: 986px; top: 292px; }
.enq, .booked { width: 300px; padding: 14px 16px 14px 14px; align-items: flex-start; }
.enq { box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 14px 32px rgba(10,10,10,.09); }
.enq .av { width: 32px; height: 32px; border-radius: 50%; background: #E8EFFF; color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mono); font-size: 11px; line-height: 14px; }
.enq .t1, .booked .t1 { font-family: var(--geist); font-size: 14px; line-height: 20px; }
.enq .t2 { font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }
.booked .ic { width: 32px; height: 32px; border-radius: 6px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.booked .t2 { font-family: var(--geist); font-size: 13px; line-height: 18px; color: var(--muted); }
.flow { width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 10px 24px rgba(10,10,10,.05); font-family: var(--geist); }
.flow .win-bar { height: 32px; }
.win-bar span.r { margin-left: auto; }
.fl-row { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-bottom: 1px solid #F0F1F4; }
.fl-row:last-child { border-bottom: 0; }
.fl-row .ic { width: 32px; height: 32px; border-radius: 6px; background: #E8EFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fl-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-row .tx b { font-weight: 400; font-size: 14px; line-height: 18px; }
.fl-row .tx span { font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.pill.grey { background: #F1F2F4; color: var(--muted); }
.hero-note { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; padding: 4px 24px 40px; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; }
.hero-note i { width: 4px; height: 4px; border-radius: 50%; background: #C3C8D0; flex-shrink: 0; }

/* Where we come in: heading only, then the three problem cards */
.problem.where .problem-cards { margin-top: 64px; }
.problem.where .pcard:nth-child(2) p { max-width: none; }

/* How it works: Map, Build and Run as picture-first pillars */
.pillar .out { align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 12px; line-height: 16px; }
.win.mid { top: 66px; }
.tg-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 13px; border-bottom: 1px solid #F1F2F4; }
.tg-row:last-child { border-bottom: 0; }
.tg-row .l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tg-row .l b { font-weight: 400; font-size: 13px; line-height: 16px; white-space: nowrap; }
.tg-row .l span { font-family: var(--mono); font-size: 10px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.tg-row .bar { width: 100%; height: 6px; border-radius: 3px; }
.tg-row .bar i { height: 6px; border-radius: 3px; }
.bflow { position: absolute; left: 0; top: 0; width: 383px; height: 344px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--geist); }
.chips { display: flex; justify-content: center; gap: 8px; }
.chips span { padding: 7px 12px; border-radius: 999px; background: #fff; font-size: 13px; line-height: 16px; white-space: nowrap; box-shadow: 0 8px 20px rgba(5,8,22,.18); }
.chips.in span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; box-shadow: none; }
.vlink { width: 2px; height: 30px; margin: 8px 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 5px, transparent 5px 10px); }
.ai-card { width: 300px; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 14px 14px; background: #fff; border-radius: 10px; box-shadow: 0 16px 40px rgba(5,8,22,.22); }
.ai-card .ic { width: 32px; height: 32px; border-radius: 6px; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-card b { display: block; font-weight: 400; font-size: 14px; line-height: 18px; }
.ai-card p { margin-top: 4px; font-size: 12px; line-height: 17px; color: var(--muted); }
.win .note { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px 16px; }
.win .note p, .float.note-card p { font-family: var(--geist); font-size: 13px; line-height: 19px; color: var(--ink); }
.ntag, .float .ntag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 11px; line-height: 16px; white-space: nowrap; }
.ntag.grey, .float .ntag.grey { background: #F1F2F4; color: var(--muted); }
.float.note-card { left: 67px; top: 200px; width: 300px; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.journey-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.journey-cta p { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }

/* Panel windows bleed off the right edge (as on /ads/), so their right-hand labels stay inside the visible part */
.panel .win .win-bar, .panel .cs-head, .tg-row, .win .note { padding-right: 38px; }
.app .rep .who span { white-space: normal; }
.win.inset .win-bar, .win.inset .rep { padding-right: 14px; }

/* Problems we can solve: alternating picture and text rows, then the other areas */
.apps { border-top: 1px solid var(--line); }
.app-rows { display: flex; flex-direction: column; gap: 96px; margin-top: 80px; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.app .pv { display: flex; justify-content: center; border-radius: 12px; background: var(--blue); overflow: hidden; }
.app .panel { width: min(100%, 460px); border-radius: 0; }
.app.rev .pv { order: 2; }
.app .at { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 540px; }
.app .k { font-family: var(--mono); font-size: 13px; line-height: 16px; color: var(--blue); }
.app h3 { font-family: var(--geist); font-size: 40px; line-height: 46px; letter-spacing: -0.04em; text-wrap: balance; }
.app .at p:not(.k) { font-size: 17px; line-height: 27px; color: var(--muted); text-wrap: pretty; }
.more { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--blue); transition: color .15s; }
.more:hover { color: var(--blue-hover); }
.more svg { flex-shrink: 0; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cs-head b { display: block; font-weight: 400; font-size: 15px; line-height: 20px; }
.cs-head span { display: block; font-family: var(--mono); font-size: 10px; line-height: 14px; color: var(--muted); }
.cs-head em { flex-shrink: 0; font-style: normal; padding: 2px 8px; border-radius: 999px; background: #E8EFFF; color: var(--blue); font-family: var(--mono); font-size: 10px; line-height: 14px; }
.float.wide { width: 300px; }
.tabs { display: flex; gap: 20px; height: 32px; padding: 0 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--muted); }
.tabs span { display: flex; align-items: center; }
.tabs span.on { color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.inv-head, .inv-row { display: grid; grid-template-columns: 58px 1fr 40px 84px; align-items: center; gap: 6px; padding: 0 14px; }
.inv-head { height: 30px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; line-height: 14px; color: #8A919C; }
.inv-row { height: 36px; border-bottom: 1px solid #F1F2F4; font-size: 12px; line-height: 16px; }
.inv-row:last-child { border-bottom: 0; }
.inv-row .st { font-family: var(--mono); font-size: 11px; color: var(--blue); }
.inv-row .st.grey { color: var(--muted); }
.areas-wrap { display: flex; flex-direction: column; gap: 36px; margin-top: 120px; }
.areas-title { font-family: var(--geist); font-size: 32px; line-height: 38px; letter-spacing: -0.035em; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.area { display: flex; flex-direction: column; gap: 10px; padding: 28px 0 36px; border-top: 1px solid var(--line); }
.area h4 { margin: 0; font-family: var(--geist); font-weight: 400; font-size: 21px; line-height: 28px; letter-spacing: -0.02em; }
.area p { max-width: 340px; font-size: 16px; line-height: 25px; color: var(--muted); }

/* Next steps: the blue closing band with the three stages inside it */
.next-in { position: relative; display: flex; flex-direction: column; gap: 64px; padding: 88px clamp(24px, 6vw, 88px); }
.next-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.next-head .l { display: flex; flex-direction: column; gap: 20px; max-width: 700px; }
.next .eyebrow { color: #BFD6FF; }
.next h2 { max-width: none; }
.next .next-lead { width: 420px; flex-shrink: 0; }
.next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.next-steps li { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); }
.next-steps .k { font-family: var(--mono); font-size: 12px; line-height: 16px; color: #BFD6FF; }
.next-steps h3 { font-family: var(--geist); font-size: 24px; line-height: 30px; letter-spacing: -0.025em; color: #fff; }
.next .next-steps p { font-size: 16px; line-height: 25px; }
.next-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.next .next-cta .btn-white { margin-top: 0; }
.next .next-cta p { font-size: 15px; line-height: 22px; }

@media (max-width: 1180px) {
  .app { gap: 48px; }
  .app h3 { font-size: 34px; line-height: 40px; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; gap: 32px; }
  .app.rev .pv { order: 0; }
  .app-rows { gap: 72px; margin-top: 56px; }
  .app .at { max-width: 640px; }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas-wrap { margin-top: 96px; }
  .next-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .next .next-lead { width: auto; }
  .next-steps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .stage.home .enq { order: 1; }
  .stage.home .flow { order: 2; }
  .stage.home .booked { order: 3; }
  .enq, .booked, .flow { width: 100%; max-width: 420px; }
  .fl-row { padding: 0 12px; }
  .fl-row .tx span { white-space: normal; }
  .hero-note { flex-direction: column; gap: 6px; padding-bottom: 32px; }
  .hero-note i, .flow .win-bar .r { display: none; }
  .app h3 { font-size: 30px; line-height: 36px; }
  .areas { grid-template-columns: 1fr; }
  .area { padding: 24px 0 28px; }
  .areas-title { font-size: 26px; line-height: 32px; }
  .next-in { gap: 48px; padding: 56px 20px 64px; }
}

/* Homepage motion: the workflow window, the enquiry, each step completing, then the booking */
.stage.home .flow { --d: 0s; --t: .8s; --from: translateY(18px); }
.stage.home .enq { --d: .5s; --t: .5s; --from: translateY(10px) scale(.96); }
.stage.home .fl-row .pill { --t: .4s; --from: scale(.8); }
.stage.home .booked { --d: 2.5s; --t: .5s; --from: translateY(10px) scale(.96); }
.bflow .rv { --t: .5s; }
.panel .ntag, .panel .cs-head em { --t: .35s; --from: scale(.8); }
@media (max-width: 760px) {
  /* Phones show the hero as a card stack: the enquiry, the workflow, then the booking */
  .stage.home .enq { --d: .1s; }
  .stage.home .flow { --d: .5s; }
  .stage.home .booked { --d: 1.8s; }
}