/* VoiceOwl homepage, shared by v1 and v2 (thought 08): VoiceOwl's own palette instead of the purple-blue "AI" glow,
   and the new sections — grow revenue and miss no call, the use-case roller, one conversation across channels, and the
   how-it-works video. Pairs with home.js; loads after site.css and motion.css. */
:root{--vo-navy:#004480;--vo-ink:#0b2440;--vo-blue:#0a73c0;--vo-gold:#f9cf00;--vo-teal:#30a890;--vo-red:#d81848;--vo-paper:#f5fafc;--vo-sky:#c0d8f0;--vo-muted:#4b5a6c}

/* ── the hero in the brand palette: paper white, navy type, a blue word on a yellow marker ─────────────────────── */
.mo-hero{color:var(--vo-ink);background:radial-gradient(1100px 620px at 82% 8%,rgba(249,207,0,.16),transparent 62%),linear-gradient(180deg,var(--vo-paper) 0%,#fff 100%)}
.mo-hero h1.h65{color:var(--vo-ink)}
.mo-sub{color:var(--vo-muted)}
.mo-rot .mo-w{color:var(--vo-blue);text-shadow:none;background:linear-gradient(180deg,transparent 64%,rgba(249,207,0,.6) 64%,rgba(249,207,0,.6) 90%,transparent 90%)}
.mo-hero .mo-ctl .pill-btn{background:var(--vo-navy);color:#fff;box-shadow:0 12px 28px -14px rgba(0,68,128,.6)}
.mo-hero .mo-ctl .pill-btn:hover{background:var(--vo-blue)}
.mo-seg{color:rgba(11,36,64,.5)}
.mo-seg[aria-pressed="true"],.mo-seg:hover{color:var(--vo-ink)}
.mo-seg i{background:rgba(11,36,64,.12)}
.mo-seg i b{background:var(--vo-gold)}
.mo-seg:focus-visible{outline-color:var(--vo-blue)}
.mo-grid{opacity:1;background-image:linear-gradient(rgba(0,68,128,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,68,128,.05) 1px,transparent 1px)}
.mo-mesh i:nth-child(1){background:radial-gradient(circle,rgba(249,207,0,.30),transparent 62%)}
.mo-mesh i:nth-child(2){background:radial-gradient(circle,rgba(192,216,240,.85),transparent 62%)}
.mo-mesh i:nth-child(3){background:radial-gradient(circle,rgba(48,168,144,.16),transparent 62%)}
.mo-mesh i:nth-child(4){background:radial-gradient(circle,rgba(10,115,192,.10),transparent 62%)}
.mo-horizon::before{opacity:.32;background:linear-gradient(90deg,#f9cf00 0%,#c0d8f0 12.5%,#30a890 25%,#0a73c0 37.5%,#f9cf00 50%,#c0d8f0 62.5%,#30a890 75%,#0a73c0 87.5%,#f9cf00 100%)}
.mo-horizon::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,color-mix(in srgb,var(--bg) 60%,transparent) 75%,var(--bg) 100%)}
.mo-hcard{border-color:rgba(11,36,64,.08);box-shadow:0 26px 54px -30px rgba(0,40,80,.45)}
.mo-rings i{border-color:rgba(10,115,192,.28)}
.mo-speak.mo-custs .mo-rings i{border-color:rgba(48,168,144,.4)}
.v2-ghost,.mo-ghost{display:inline-flex;align-items:center;padding:12px 4px;font:500 15px/1 var(--f-sans);color:var(--vo-ink);
  text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--vo-gold);text-decoration-thickness:2px}
.v2-ghost:hover,.mo-ghost:hover{color:var(--vo-blue)}
/* the headline fits "Close more collections" on one line beside the phone */
.mo-hero h1.h65{font-size:clamp(38px,3.9vw,56px)}
/* the hero visual sits further right, with room on its left for channel pop-ups (thought 11) */
.mo-hero-in{max-width:1360px;grid-template-columns:minmax(0,1fr) 680px;gap:clamp(24px,3.5vw,64px)}
.mo-hero-vis{width:680px;height:680px}
.mo-vis-in{width:680px;height:680px}
.mo-tiltwrap{left:210px;top:20px}
.mo-rings{left:380px;top:340px}
.mo-hcard.mo-outcome{right:0;top:94px}
.mo-hcard.mo-voice{right:6px;top:404px}
.mo-pops{position:absolute;inset:0;z-index:4;pointer-events:none}
.mo-note{position:absolute;width:238px;display:flex;gap:10px;align-items:flex-start;padding:11px 13px 12px;border-radius:16px;background:rgba(255,255,255,.97);color:var(--vo-ink);
  border:1px solid rgba(11,36,64,.08);box-shadow:0 22px 46px -24px rgba(0,30,60,.5);font-size:13px;line-height:1.38;transition:opacity .5s ease,transform .65s var(--mo-ease)}
.mo-note-ic{position:relative;flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--vo-blue)}
.mo-note-ic svg{width:17px;height:17px}
.mo-note--wa .mo-note-ic,.mo-note--wacall .mo-note-ic{background:#25d366}
.mo-note--mail .mo-note-ic{background:var(--vo-red)}
.mo-note--sms .mo-note-ic{background:var(--vo-navy)}
.mo-note--call .mo-note-ic::after,.mo-note--wacall .mo-note-ic::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid currentColor;opacity:0;animation:mo-ring2 1.6s ease-out infinite}
.mo-note--call .mo-note-ic{color:#fff}.mo-note--call .mo-note-ic::after{border-color:var(--vo-blue)}.mo-note--wacall .mo-note-ic::after{border-color:#25d366}
@keyframes mo-ring2{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.mo-note b{font-weight:600;font-size:12.5px}
.mo-note small{margin-left:6px;font-size:11px;color:#6b7686}
.mo-note p{margin:3px 0 0;color:#16222f}
.mo-note em{display:inline-block;margin-top:7px;padding:5px 10px;border-radius:8px;background:#eef4fa;color:var(--vo-blue);font-style:normal;font-weight:500;font-size:12px}
.mo-note.is-left{opacity:0;transform:translateX(-34px)}
.mo-note.is-right{opacity:0;transform:translateX(34px)}
.mo-note.is-drop{opacity:0;transform:translateY(-26px)}
.mo-note.is-pop{opacity:0;transform:scale(.8)}
.mo-note.is-out{opacity:0;transform:translateY(-12px) scale(.96)}
@media (max-width:1280px){.mo-hero-in{grid-template-columns:minmax(0,1fr) 600px}.mo-hero-vis{width:600px;height:600px;--mo-s:.882}}
@media (max-width:1100px){.mo-hero-in{grid-template-columns:minmax(0,1fr) 520px}.mo-hero-vis{width:520px;height:520px;--mo-s:.765}}
@media (max-width:900px){.mo-hero-in{grid-template-columns:minmax(0,1fr)}.mo-hero-vis{justify-self:center;width:560px;height:560px;--mo-s:.824}}
/* phones: the previous, larger phone; no pop-ups (too small to read at this size) */
@media (max-width:620px){
  .mo-hero-vis{width:340px;height:432px;--mo-s:.654}
  .mo-vis-in{width:520px;height:660px}
  .mo-tiltwrap{left:24px;top:10px}
  .mo-rings{left:194px;top:330px}
  .mo-hcard.mo-outcome{top:84px}.mo-hcard.mo-voice{top:392px}
  .mo-pops{display:none}
}

/* the call switcher: a row of pills at the top of the hero (thought 09: more calls, not under the buttons) */
.mo-hero-tabs{grid-column:1/-1;justify-self:center;min-width:0;max-width:100%;margin-bottom:clamp(8px,2vw,24px)}
.mo-hero .mo-seg:not([aria-pressed="true"]) i b{opacity:0}
.mo-hero .mo-segs{display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(11,36,64,.08);
  box-shadow:0 14px 34px -24px rgba(0,40,80,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-x:auto;scrollbar-width:none}
.mo-hero .mo-segs::-webkit-scrollbar{display:none}
.mo-hero .mo-seg{position:relative;flex:none;display:block;min-width:0;padding:11px 18px 13px;border-radius:999px;font:500 15px/1 var(--f-sans);color:rgba(11,36,64,.62);transition:background-color .3s,color .3s}
.mo-hero .mo-seg:hover{color:var(--vo-ink);background:rgba(11,36,64,.05)}
.mo-hero .mo-seg[aria-pressed="true"]{background:var(--vo-navy);color:#fff}
.mo-hero .mo-seg i{position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:transparent}
.mo-hero .mo-seg[aria-pressed="true"] i{background:rgba(255,255,255,.22)}
.mo-hero .mo-seg i b{background:var(--vo-gold)}
.mo-hero .mo-seg:focus-visible{outline:2px solid var(--vo-blue);outline-offset:2px}
.mo-ctl{margin-top:36px}
@media (max-width:900px){.mo-hero-in{grid-template-columns:minmax(0,1fr)}.mo-hero-tabs{justify-self:stretch}.mo-hero .mo-segs{border-radius:20px}}
@media (max-width:520px){.mo-hero .mo-seg{padding:10px 14px 12px;font-size:14px}}

/* over the light hero the header keeps its normal look, without the white bar */
header.nav.mo-over{background:transparent}
header.nav.mo-over.mo-glass{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(11,36,64,.06)}
header.nav.mo-over .logo .mo-lg-d{display:block}
header.nav.mo-over .logo .mo-lg-l{display:none}
header.nav.mo-over .nl,header.nav.mo-over .signin,header.nav.mo-over .burger{color:var(--muted)}
header.nav.mo-over .btn-dark{background:var(--fg);color:var(--bg)}
.mo-pause{display:none!important}

/* dark theme: a deep brand navy (not violet), warm glows */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mo-hero{color:#fff;background:radial-gradient(1000px 600px at 80% 10%,rgba(249,207,0,.12),transparent 62%),linear-gradient(165deg,#063260,#04213f 70%)}
  :root:not([data-theme="light"]) .mo-hero h1.h65{color:#fff}
  :root:not([data-theme="light"]) .mo-sub{color:rgba(255,255,255,.74)}
  :root:not([data-theme="light"]) .mo-rot .mo-w{color:var(--vo-gold);background:none}
  :root:not([data-theme="light"]) .mo-hero .mo-ctl .pill-btn{background:#fff;color:var(--vo-ink)}
  :root:not([data-theme="light"]) .mo-hero .mo-ctl .pill-btn:hover{background:var(--vo-gold)}
  :root:not([data-theme="light"]) .mo-seg{color:rgba(255,255,255,.6)}
  :root:not([data-theme="light"]) .mo-hero .mo-segs{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
  :root:not([data-theme="light"]) .mo-hero .mo-seg{color:rgba(255,255,255,.72)}
  :root:not([data-theme="light"]) .mo-hero .mo-seg:hover{background:rgba(255,255,255,.08);color:#fff}
  :root:not([data-theme="light"]) .mo-hero .mo-seg[aria-pressed="true"]{background:#fff;color:var(--vo-ink)}
  :root:not([data-theme="light"]) .mo-hero .mo-seg[aria-pressed="true"] i{background:rgba(11,36,64,.12)}
  :root:not([data-theme="light"]) .mo-seg[aria-pressed="true"],:root:not([data-theme="light"]) .mo-seg:hover{color:#fff}
  :root:not([data-theme="light"]) .mo-seg i{background:rgba(255,255,255,.2)}
  :root:not([data-theme="light"]) .mo-grid{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}
  :root:not([data-theme="light"]) .mo-mesh i:nth-child(2){background:radial-gradient(circle,rgba(48,168,144,.24),transparent 62%)}
  :root:not([data-theme="light"]) .mo-mesh i:nth-child(3){background:radial-gradient(circle,rgba(192,216,240,.12),transparent 62%)}
  :root:not([data-theme="light"]) .mo-mesh i:nth-child(4){background:radial-gradient(circle,rgba(249,207,0,.10),transparent 62%)}
  :root:not([data-theme="light"]) .mo-horizon::after{background:linear-gradient(180deg,rgba(4,33,63,0) 0%,rgba(4,33,63,0) 34%,color-mix(in srgb,var(--bg) 50%,transparent) 70%,var(--bg) 100%)}
  :root:not([data-theme="light"]) .mo-rings i{border-color:rgba(192,216,240,.3)}
  :root:not([data-theme="light"]) .v2-ghost,:root:not([data-theme="light"]) .mo-ghost{color:#fff}
  :root:not([data-theme="light"]) header.nav.mo-over .logo .mo-lg-d{display:none}
  :root:not([data-theme="light"]) header.nav.mo-over .logo .mo-lg-l{display:block}
  :root:not([data-theme="light"]) header.nav.mo-over .nl,:root:not([data-theme="light"]) header.nav.mo-over .signin,:root:not([data-theme="light"]) header.nav.mo-over .burger{color:rgba(255,255,255,.86)}
  :root:not([data-theme="light"]) header.nav.mo-over .btn-dark{background:#fff;color:var(--vo-ink)}
  :root:not([data-theme="light"]) header.nav.mo-over.mo-glass{background:rgba(4,33,63,.78);box-shadow:0 1px 0 rgba(255,255,255,.06)}
}

/* ── shared section frame ──────────────────────────────────────────────────────────────────────────────────────── */
.hs{padding-block:clamp(72px,9vw,128px)}
.hs-head{max-width:760px;margin:0 0 48px}
.hs-head.cen{margin-inline:auto;text-align:center}
.hs-kick{display:inline-block;margin-bottom:14px;font:600 12.5px/1 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--vo-blue)}
.hs-head p{margin-top:16px;font-size:17px;line-height:1.6;color:var(--muted)}
.hs-panel{background:#fff;color:var(--vo-ink);border:1px solid rgba(11,36,64,.08);border-radius:16px;box-shadow:0 20px 44px -34px rgba(0,30,60,.45)}
.mo-js .hs-rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--mo-ease),transform .8s var(--mo-ease);transition-delay:var(--mo-d,0s)}
.mo-js .hs-rv.mo-in{opacity:1;transform:none}

/* ── grow revenue, miss no call ───────────────────────────────────────────────────────────────────────────────── */
.gf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gf-tile{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.gf-tile h3{margin:0;font:500 19px/1.3 var(--f-sans);letter-spacing:-.005em}
.gf-tile p{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.gf-vis{padding:14px 16px;min-height:208px;display:flex;flex-direction:column;gap:8px}
.gf-row{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:var(--vo-ink)}
.gf-row time{flex:none;width:58px;font:500 12px/1 var(--f-sans);color:#6b7686;font-variant-numeric:tabular-nums}
.gf-row span{flex:1;min-width:0}
.gf-row .chip2{flex:none}
.gf-vis .bub2{font-size:13.5px;margin:2px 0 4px;max-width:92%;padding:10px 13px}
.gf-vis .bub2.me{align-self:flex-end}
.gf-vis .bub2 .mo-en{font-size:11.5px}
.gf-big{display:flex;align-items:baseline;gap:10px;padding:4px 0 6px;border-bottom:1px solid #eef1f5;margin-bottom:4px}
.gf-big b{font:500 40px/1 var(--f-display);color:var(--vo-teal);font-variant-numeric:tabular-nums}
.gf-big span{font-size:13px;color:#6b7686}
.gf-step{transition:opacity .45s ease,transform .5s var(--mo-ease)}
.gf-step.is-pre{opacity:0;transform:translateY(8px)}

/* ── the use-case roller: cards ride a ring as you scroll; one faces you at a time ───────────────────────────── */
.uc-roller{position:relative;height:calc(100vh + 8 * 48vh)}
.uc-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:56px}
.uc-roller .hs-head{margin:0 auto 6px;text-align:center}
.uc-stage{position:relative;height:min(600px,64vh);perspective:1800px;display:grid;place-items:center}
.uc-orb{position:absolute;width:min(560px,70vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(249,207,0,.38),transparent 58%),radial-gradient(circle at 70% 70%,rgba(192,216,240,.85),transparent 60%),radial-gradient(circle,rgba(48,168,144,.14),transparent 70%);
  filter:blur(18px);opacity:.85}
.uc-ring{position:relative;width:min(560px,60vw);height:min(520px,60vh);transform-style:preserve-3d}
.uc-card{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;color:var(--vo-ink);
  border:1px solid rgba(11,36,64,.08);box-shadow:0 40px 80px -40px rgba(0,30,60,.55);backface-visibility:hidden}
.uc-card img{display:block;flex:1 1 auto;min-height:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.uc-body{display:flex;flex-direction:column;gap:10px;padding:20px 24px 22px;flex:none}
.uc-dir{align-self:flex-start;font:600 11px/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:#eef4fa;color:var(--vo-navy)}
.uc-dir.in{background:#e4f5ee;color:#1f7a52}
.uc-card h3{margin:2px 0 0;font:500 22px/1.25 var(--f-sans)}
.uc-card p{margin:0;font-size:15.5px;line-height:1.55;color:#4b5a6c}
.uc-ch{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.uc-ch span{font-size:12px;padding:4px 9px;border-radius:999px;border:1px solid #dfe6ee;color:#3b4a5c}
.uc-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.uc-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color .3s,transform .3s}
.uc-dots i.on{background:var(--vo-blue);transform:scale(1.25)}
.uc-hint{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}
.uc-count{display:block;margin-top:14px;text-align:center;font:500 13px/1 var(--f-sans);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .uc-orb{background:radial-gradient(circle at 35% 30%,rgba(10,115,192,.45),transparent 58%),radial-gradient(circle at 70% 70%,rgba(48,168,144,.32),transparent 60%),radial-gradient(circle,rgba(192,216,240,.10),transparent 70%);opacity:.7}}

/* ── one conversation, every channel ──────────────────────────────────────────────────────────────────────────── */
.oc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,96px);align-items:center}
.oc-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.oc-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--muted)}
.oc-list li b{display:block;color:var(--fg);font-weight:500}
.oc-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--vo-blue)}
.oc-ic svg{width:18px;height:18px}
.oc-ic.wa{color:#1f9e5a}.oc-ic.sms{color:var(--vo-navy)}.oc-ic.mail{color:var(--vo-red)}.oc-ic.web{color:var(--vo-teal)}
.oc-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:28px}
.oc-strip span{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:background-color .3s,color .3s,border-color .3s}
.oc-strip span.on{background:var(--vo-navy);border-color:var(--vo-navy);color:#fff}
.oc-strip span.done{background:#e4f5ee;border-color:#cdebdc;color:#1f7a52}
.oc-phone{position:relative;justify-self:center;width:340px;height:640px;border-radius:44px;background:#0b1626;padding:12px;box-shadow:0 50px 90px -46px rgba(0,20,50,.6)}
.oc-scr{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#efe9e1}
.oc-top{position:absolute;inset:0 0 auto 0;height:58px;padding:22px 18px 0;display:flex;align-items:center;gap:10px;background:#fff;border-bottom:1px solid #ece7df;font-size:13px;color:#4b5a6c;z-index:2}
.oc-top img{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e6edf4;padding:3px}
.oc-top b{color:var(--vo-ink);font-weight:500}
.oc-feed{position:absolute;inset:66px 12px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden}
.oc-msg{max-width:84%;padding:9px 12px 8px;border-radius:14px;font-size:13.5px;line-height:1.4;color:#16222f;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.oc-msg small{display:block;margin-bottom:3px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.oc-msg.agent{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.oc-msg.cust{align-self:flex-end;background:#d9fdd3;border-bottom-right-radius:4px}
.oc-msg.sms{align-self:flex-start;background:#e8edf3}
.oc-msg em{display:block;margin-top:7px;padding:7px 10px;border-radius:8px;background:#f2f7fc;color:var(--vo-blue);font-style:normal;font-weight:500;text-align:center}
.oc-call{align-self:stretch;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--vo-navy);color:#fff;font-size:13px}
.oc-call svg{width:18px;height:18px;flex:none}
.oc-call b{font-weight:500}
.oc-call time{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8}
.oc-img{display:block;width:150px;height:96px;margin:4px 0 6px;border-radius:8px;background:linear-gradient(#fff,#fff) 14px 16px/90px 8px no-repeat,linear-gradient(#e2e8ef,#e2e8ef) 14px 34px/110px 6px no-repeat,linear-gradient(#e2e8ef,#e2e8ef) 14px 48px/84px 6px no-repeat,linear-gradient(#e2e8ef,#e2e8ef) 14px 62px/100px 6px no-repeat,linear-gradient(#cfe8d6,#cfe8d6) 14px 78px/56px 8px no-repeat,#f7f9fb;border:1px solid #dfe6ee}
.oc-mail{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:16px;background:rgba(255,255,255,.96);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.35);font-size:12.5px;line-height:1.35;color:#16222f;transform:translateY(-130%);transition:transform .6s var(--mo-ease)}
.oc-mail.show{transform:none}
.oc-mail .oc-ic{width:30px;height:30px;border-radius:8px}
.oc-mail b{display:block;font-weight:600}
.oc-replay{display:inline-flex;align-items:center;gap:6px;margin-top:18px;padding:8px 14px 8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--raised);color:var(--fg);font:500 13px/1 var(--f-sans);cursor:pointer}
.oc-replay svg{width:14px;height:14px}
.oc-replay:hover{border-color:var(--vo-blue);color:var(--vo-blue)}
.oc-replay:focus-visible{outline:2px solid var(--vo-blue);outline-offset:2px}

/* ── how VoiceOwl works: the video slot ───────────────────────────────────────────────────────────────────────── */
.vid-frame{position:relative;max-width:1080px;margin:0 auto;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#04213f;box-shadow:0 40px 80px -50px rgba(0,30,60,.6)}
.vid-frame video{display:block;width:100%;height:100%;object-fit:cover}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:linear-gradient(180deg,rgba(4,33,63,0) 40%,rgba(4,33,63,.45));cursor:pointer;color:var(--vo-ink)}
.vid-play span{display:inline-flex;align-items:center;gap:10px;padding:14px 22px 14px 16px;border-radius:999px;background:#fff;font:500 15px/1 var(--f-sans);box-shadow:0 18px 40px -16px rgba(0,0,0,.45);transition:transform .2s}
.vid-play:hover span{transform:scale(1.04)}
.vid-play svg{width:22px;height:22px;color:var(--vo-navy)}
.vid-play:focus-visible span{outline:3px solid var(--vo-gold);outline-offset:3px}
.vid-frame.is-playing .vid-play{display:none}

/* ── v2 proof band (logos + results right after the hero) ────────────────────────────────────────────────────── */
.v2-proof{padding:56px 0 8px;border-bottom:1px solid var(--line)}
.v2-kicker{margin:0 0 18px;text-align:center;font:500 12.5px/1.4 var(--f-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.v2-logos div{height:84px}
.v2-r4{margin-top:36px;padding-top:44px;border-top:1px solid var(--line)}
.v2-more{margin:40px 0;text-align:center;font-size:15px}
.v2-more a{color:var(--fg);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
html[data-calm].mo-js .mo-tiltwrap{animation:none}

@media (max-width:1100px){.gf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .oc-grid{grid-template-columns:1fr}
  .uc-roller{height:auto}
  .uc-pin{position:static;display:block;height:auto;padding-top:0;overflow:visible}
  .uc-pin>.c,.uc-stage{min-width:0;max-width:100%}
  .uc-stage{height:auto;perspective:none;display:block}
  .uc-orb,.uc-dots,.uc-hint{display:none}
  .uc-ring{width:calc(100% + 40px);height:auto;transform:none!important;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 24px;margin-inline:-20px}
  .uc-card{position:relative;inset:auto;flex:0 0 min(300px,82vw);transform:none!important;opacity:1!important;visibility:visible!important;filter:none!important;scroll-snap-align:center}
  .uc-card img{flex:none}
  .uc-count{display:none}
}
@media (max-width:640px){.gf-grid{grid-template-columns:1fr}.oc-phone{transform:scale(.92);transform-origin:top center;margin-bottom:-50px}}
@media (prefers-reduced-motion:reduce){.uc-ring{transition:none}}

/* ── grow revenue, miss no call: a scroll story (thought 13) — the points on the left, a pinned photo on the right
   that changes with the point being read, its live panel floating over it; phones: each point with its own photo ── */
.gf2-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.gf2-list{list-style:none;margin:0;padding:0}
.gf2-item{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;transition:opacity .45s ease}
.mo-js .gf2-item{opacity:.28}
.mo-js .gf2-item.is-on{opacity:1}
.gf2-n{font:500 14px/1 var(--f-sans);letter-spacing:.12em;color:var(--vo-blue)}
.gf2-item h3{margin:14px 0 12px;font:400 clamp(26px,2.6vw,38px)/1.15 var(--f-display);letter-spacing:-.015em}
.gf2-item p{margin:0;max-width:46ch;font-size:17px;line-height:1.6;color:var(--muted)}
.gf2-kpi{align-self:flex-start;margin-top:18px;padding:7px 12px;border-radius:999px;font:600 12.5px/1 var(--f-sans);letter-spacing:.02em;color:#1f7a52;background:#e4f5ee}
.gf2-stick{position:sticky;top:calc(50vh - min(300px,36vh));}
.gf2-frame{position:relative;height:min(660px,76vh);border-radius:28px;overflow:hidden;background:#04213f;box-shadow:0 40px 80px -46px rgba(0,30,60,.6)}
.gf2-frame .gf2-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}
.gf2-frame .gf2-slide.is-on,.gf2-frame:not(.is-live) .gf2-slide:first-child{opacity:1}
.gf2-slide img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s ease-out}
.gf2-slide.is-on img{transform:scale(1)}
.gf2-frame .gf2-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,33,63,0) 35%,rgba(4,33,63,.55));pointer-events:none}
.gf2-tag{position:absolute;left:24px;top:24px;z-index:2;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--vo-ink);font:600 13px/1 var(--f-sans);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.gf2-panel{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;max-width:440px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-height:0}
.gf2-prog{position:absolute;left:24px;right:24px;bottom:10px;z-index:3;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.gf2-prog i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--gf2-p,0));background:var(--vo-gold);transition:transform .2s linear}
.gf2-count{position:absolute;right:24px;top:24px;z-index:3;font:600 12.5px/1 var(--f-sans);letter-spacing:.1em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gf2-inline{display:none}
@media (max-width:900px){
  .gf2-grid{grid-template-columns:1fr}
  .gf2-stick{display:none}
  .gf2-item{min-height:0;padding:28px 0;opacity:1!important}
  .gf2-inline{display:block;margin-bottom:20px}
  .gf2-inline .gf2-slide{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#04213f}
  .gf2-inline .gf2-slide img{position:absolute;inset:0;transform:none}
  .gf2-inline .gf2-panel{left:14px;right:14px;bottom:14px}
  .gf2-inline .gf2-tag{left:14px;top:14px}
}