/* Presenter-led story; one persistent voice launcher, no phone-shaped menu. */
.hero-layout{grid-template-columns:1.08fr 1fr;grid-template-areas:"copy vsl";gap:52px;align-items:center;padding-top:30px;padding-bottom:50px}
.hero-copy{padding:48px 0}.hero-copy h1{font-size:clamp(40px,4.35vw,60px);letter-spacing:-2.5px;line-height:1.07}.hero-copy h1 br:last-child{display:initial}
.presenter-section{padding:0;border:0;min-width:0}.vsl-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Portrait 9:16 presenter video: sized from the viewport height so the whole of Ciara fits on a laptop screen; vh line is the fallback for browsers without svh. */
.vsl-frame{position:relative;width:min(100%,calc(min(640px,max(360px,100vh - 170px))*9/16));width:min(100%,calc(min(640px,max(360px,100svh - 170px))*9/16));aspect-ratio:9/16;margin:0 auto;border-radius:24px;overflow:hidden;background:#102b49 url(assets/ciara-vsl-start.jpg) center/cover no-repeat;border:1px solid var(--line);box-shadow:0 18px 45px #102b491f}/* No flash on play: her first frame (the poster) is also painted BEHIND the video, so the gap between the poster going and the first decoded frame arriving shows the same picture — it used to show the navy ground (iPhone flicker, 14 Sep). */
.vsl-video{display:block;width:100%;height:100%;object-fit:cover;background:#102b49 url(assets/ciara-vsl-start.jpg) center/cover no-repeat}
/* The whole of her is the one control: a transparent button over the video toggles play/pause; the circle is only drawn while paused. */
.vsl-toggle{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.vsl-toggle[hidden]{display:none}.vsl-toggle:focus-visible{outline:3px solid #04ae70;outline-offset:-3px;border-radius:inherit}
/* Play circle: the triangle's centroid (not its bounding box) sits on the circle's centre — (8.5+8.5+19)/3 = 12 in a 24 box — so it reads centred without a hand-tuned nudge. Stroke in the fill colour rounds the corners evenly. */
.vsl-play{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fffffff2;color:var(--navy);box-shadow:0 0 0 1px #ffffffb3,0 12px 32px #0c234047,0 2px 6px #0c23401f;transition:transform .2s,opacity .25s}.vsl-toggle:hover .vsl-play{transform:scale(1.06)}.vsl-play svg{display:block;width:30px;height:30px;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}.is-playing .vsl-play{opacity:0;transform:scale(.85)}
/* When Ciara says "talk to Ciara" in the video, the launcher lights up: a soft green glow behind and around it. No filter:blur — a blurred layer inside the launcher costs iPhones every frame the call waveform paints; the gradient alone is soft enough. The glow sits behind the button's white face (z-index -1 inside #nmac-talk's stacking context). */
#nmac-talk .nt-launch{position:relative;transition:box-shadow .6s ease,border-color .6s ease}#nmac-talk .nt-launch::before{content:"";position:absolute;inset:-24px;z-index:-1;border-radius:70px;background:radial-gradient(ellipse at center,#17bc6e99 0,#17bc6e4d 42%,#17bc6e1a 62%,transparent 76%);opacity:0;transform:scale(.85);transition:opacity 1.2s ease,transform 1.2s ease;pointer-events:none}
#nmac-talk.vsl-cue .nt-launch{border-color:#5fcf98;box-shadow:0 0 0 3px #17bc6e47,0 0 46px 12px #17bc6e73,0 7px 28px #0c23401f}#nmac-talk.vsl-cue .nt-launch::before{opacity:1;transform:scale(1);transition-duration:.5s;animation:vsl-cue-breathe 1.8s ease-in-out .5s infinite}#nmac-talk.vsl-cue .nt-orb{background:#c8efd9}
@keyframes vsl-cue-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){#nmac-talk.vsl-cue .nt-launch::before{animation:none}}
.outcome-section{border-top:1px solid var(--line)}
@media(max-width:1000px){.hero-layout{gap:30px}.hero-copy h1{font-size:43px}}
@media(max-width:760px){.hero-layout{grid-template-columns:1fr;grid-template-areas:"copy" "vsl";gap:14px;padding-top:0;padding-bottom:35px}.hero-copy{padding:35px 0 16px}.hero-copy h1{font-size:clamp(35px,9.3vw,52px);letter-spacing:-1.7px}.vsl-frame{width:min(100%,calc(min(560px,max(360px,100vh - 150px))*9/16));width:min(100%,calc(min(560px,max(360px,100svh - 150px))*9/16));border-radius:18px}.vsl-play{width:62px;height:62px}.vsl-play svg{width:26px;height:26px}.site-footer{padding-bottom:140px}}
.tour-button .tour-play{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
/* Phone menu (hamburger, ≤700px): Watch Product Tour and Talk to Ciara sit above Start Free Trial. Hidden in the desktop header, which already has the hero buttons and the floating launcher. */
.site-header nav .nav-extra{display:none}
@media(max-width:700px){.site-header nav .nav-extra{display:flex;align-items:center;gap:10px}.site-header nav .tour-button .tour-play{width:14px;height:14px}.site-header nav .nav-talk{justify-content:center;gap:10px;margin-top:8px;min-height:46px;padding:10px 20px}.site-header nav .nav-talk svg{width:18px;height:18px;color:var(--green);fill:none;stroke:currentColor;stroke-width:2}.site-header nav .button.primary{margin-top:8px;min-height:46px}}
/* Header items never break onto two lines ("Start Free Trial" is longer than "Get started"); between the phone menu and a roomy laptop the gaps tighten instead. */
.site-header nav a{white-space:nowrap}
@media(min-width:701px) and (max-width:900px){.site-header{gap:16px;padding-left:24px;padding-right:24px}.site-header nav{gap:18px;font-size:13px}.site-header .brand img{width:min(210px,28vw)}.site-header nav .button.small{padding:8px 16px}}