@charset "UTF-8";
/* Tokens: one spacing rhythm, one radius family, one hairline, warm-tinted neutrals. */
:root{color-scheme:dark;--bg:#14111c;--bg-raised:#1b1726;--surface:#211c2e;--line:rgb(236 228 255 / 9%);--line-strong:rgb(236 228 255 / 16%);--text:#f6f1ec;--muted:#b9b1c6;--soft:#8f879e;--purple:#7b73fc;--purple-hover:#918aff;--lavender:#b0b8fd;--peach:#f3c4ae;--ink:#110e1b;--sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--radius-s:12px;--radius-m:20px;--radius-l:28px;--section:clamp(80px,10vw,136px);font-family:var(--sans);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:96px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* Clip decorative glows here: on body, overflow propagates to the viewport and stays scrollable. */
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--lavender);outline-offset:5px;border-radius:6px}
::selection{background:var(--lavender);color:var(--ink)}
.container{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;top:-100px;left:20px;z-index:10;padding:12px 16px;border-radius:var(--radius-s);background:var(--lavender);color:var(--ink)}
.skip-link:focus{top:12px}

/* Type */
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6vw,64px);line-height:1.05;letter-spacing:-.035em;margin-block:24px}
h2{font-size:clamp(34px,3.6vw,48px);line-height:1.1;letter-spacing:-.03em}
h3{font-size:20px;line-height:1.3;letter-spacing:-.015em}
p{text-wrap:pretty}
em,h2 span{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
em{color:var(--lavender)}
h2 span{color:var(--muted)}

/* Buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 26px;border:1px solid var(--purple);border-radius:999px;background:var(--purple);color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.button:hover{background:var(--purple-hover);border-color:var(--purple-hover);transform:translateY(-1px);box-shadow:0 10px 30px -10px rgb(123 115 252 / 70%)}
.button span{font-size:26px;font-weight:500;line-height:1}
.button-small{min-height:42px;padding:9px 20px;font-size:14px}
.button-outline{color:var(--text);background:rgb(255 255 255 / 4%);border-color:var(--line-strong)}
.button-outline:hover{background:rgb(255 255 255 / 9%);border-color:var(--lavender);box-shadow:none}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--text);transition:color .2s}
.text-link span{font-size:26px;line-height:1;transition:transform .2s}
.text-link:hover{color:var(--lavender)}
.text-link:hover span{transform:translateY(2px)}
.action-arrow{display:block;flex:none;width:24px;height:24px;transition:transform .2s}
.text-link:hover .action-arrow{transform:translateY(2px)}

/* Header */
.site-header{position:sticky;top:0;z-index:5;background:rgb(20 17 28 / 78%);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.navigation{height:76px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.brand img{flex:none}
.nav-links{display:flex;gap:32px;color:var(--muted);font-size:15px}
.nav-links a{transition:color .2s}
.nav-links a:hover,.site-footer a:hover{color:var(--text)}

/* Hero */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center;padding-block:clamp(64px,8vw,112px) clamp(72px,9vw,128px)}
/* Glows are plain radial gradients: no blur filter, which renders unreliably in captures. */
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hero::before{width:760px;height:640px;right:-14%;top:-4%;background:radial-gradient(closest-side,rgb(123 115 252 / 24%),rgb(123 115 252 / 8%) 55%,transparent)}
.hero::after{width:520px;height:460px;right:26%;bottom:-8%;background:radial-gradient(closest-side,rgb(243 196 174 / 9%),transparent)}
.hero h1{font-size:clamp(56px,6.6vw,92px);line-height:1;letter-spacing:-.045em;margin:0 0 28px}
.hero h1 em{letter-spacing:-.025em;padding-right:.04em}
.hero-eyebrow{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--lavender);margin:0 0 18px;line-height:1.6}
.hero-description{font-size:22px;line-height:1.45;letter-spacing:-.015em;margin:0 0 14px;max-width:440px}
.hero-detail{font-size:16px;line-height:1.7;color:var(--muted);max-width:420px;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:36px}
.platform-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--soft);font-size:14px;margin:28px 0 0}
.coming-soon{padding:3px 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:12px;color:var(--lavender)}
.hero-visual{position:relative;min-width:0}
.interview-window{margin:0;position:relative;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-l);overflow:hidden;box-shadow:0 40px 80px -30px rgb(0 0 0 / 70%),0 0 0 1px rgb(0 0 0 / 20%)}
.window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;font-size:16px;line-height:1.5;color:var(--muted)}
.window-bar>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
/* The screenshot includes app chrome and letterbox bars; frame only the interviewer. */
.portrait{position:relative;aspect-ratio:3/2;overflow:hidden;margin-inline:8px;border-radius:var(--radius-m);background:#2a2532}
.portrait>img{width:100%;height:100%;object-fit:cover}
.portrait[hidden],.interviewer-controls[hidden]{display:none}
.interviewer-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 0}
.interviewer-controls button{font:inherit;cursor:pointer;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:10px;min-height:44px;transition:background .2s,color .2s}
.interviewer-controls button:hover{color:var(--text);background:rgb(176 184 253 / 8%)}
.interviewer-choices{display:flex;justify-content:center;gap:6px;min-width:0}
.interviewer-choices button{font-size:13px;padding:8px 12px;border-color:var(--line);background:rgb(176 184 253 / 4%)}
.interviewer-choices button[aria-pressed=true]{color:#f5f2ff;background:rgb(130 117 255 / 24%);border-color:var(--purple)}
.carousel-arrow{display:grid;place-items:center;flex:none;width:44px}
@media(max-width:400px){.interviewer-controls{padding-inline:8px;gap:2px}.interviewer-choices button{padding-inline:8px}.carousel-arrow{width:36px}}
.portrait-shade{position:absolute;inset:0;background:linear-gradient(transparent 55%,rgb(17 14 27 / 82%))}
.interviewer-label{position:absolute;bottom:18px;left:20px;right:20px;display:flex;align-items:center;gap:10px}
.presence{width:8px;height:8px;flex:none;background:#87d6b0;border-radius:50%;box-shadow:0 0 0 4px rgb(135 214 176 / 18%)}
.interviewer-label strong{display:block;font-size:16px;font-weight:600}
.interviewer-label small{display:block;font-size:13px;color:#ddd6e7;margin-top:2px}
.sound-bars{margin-left:auto;display:flex;gap:3px;height:22px;align-items:center}
.sound-bars i{width:3px;height:8px;border-radius:3px;background:var(--lavender)}
.sound-bars i:nth-child(2),.sound-bars i:nth-child(4){height:15px}
.sound-bars i:nth-child(3){height:22px}
.interviewer-wisdom{display:flex;align-items:center;gap:14px;margin:16px 8px 8px;padding:18px 20px;border-radius:var(--radius-m);background:#ece8f8;color:#2c2539}
.wisdom-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--purple);color:#fff;font-size:24px;line-height:1}
.wisdom-icon svg{display:block}
.wisdom-copy{display:flex;flex-direction:column;justify-content:center;min-height:84px;margin:0;font-size:22px;line-height:1.3}
.wisdom-copy[hidden]{display:none}
.wisdom-copy strong{display:block;margin-top:4px;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.02em}

/* Role strip */
.role-strip{border-block:1px solid var(--line);padding-block:32px}
.role-strip .container{display:flex;gap:16px 48px;align-items:center}
.role-label{flex:none;margin:0;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.role-label span{color:var(--muted)}
/* The list is rendered twice and shifted by half its width, so the loop is seamless. */
.role-marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.role-track{display:flex;width:max-content;animation:role-scroll 60s linear infinite}
.role-marquee:hover .role-track{animation-play-state:paused}
.role-list{display:flex;gap:10px;margin:0;padding:0 10px 0 0;list-style:none}
.role-list li{padding:8px 18px;border:1px solid var(--line-strong);border-radius:999px;font-size:15px;white-space:nowrap;color:var(--text);background:rgb(255 255 255 / 3%)}
@keyframes role-scroll{to{transform:translateX(-50%)}}

/* Sections */
.section{padding-block:var(--section)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.section-heading>p{margin:0;max-width:320px;color:var(--muted);font-size:22px;line-height:1.5}
.section-intro>p:last-child{font-size:16px;line-height:1.7;max-width:340px;color:var(--muted);margin:24px 0 0}

/* Demos */
.demos{padding-bottom:calc(var(--section) / 2)}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;margin-top:48px}
.demo-card,.demo-preview{border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:var(--bg-raised)}
.demo-player{aspect-ratio:16/9;background:#0f0d16}
.demo-player iframe{display:block;width:100%;height:100%;border:0}
.demo-card-copy{padding:24px 28px 28px}
.demo-preview{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-top:48px}
.demo-preview>img{width:100%;height:100%;object-fit:cover;min-width:0}
.demo-preview>div{padding:32px 32px 32px 0}
.demo-badge{font-size:13px;color:var(--lavender)}
.demo-preview h3,.demo-card h3{font-size:22px;margin:0 0 10px}
.demo-preview h3{margin-top:16px}
.demo-preview p,.demo-card p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 18px}

/* Experience */
.experience{display:grid;grid-template-columns:1fr 1.2fr;gap:96px;padding-top:calc(var(--section) / 2)}
.experience-list{display:grid;gap:12px}
.experience-list article{display:flex;gap:20px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-m);background:linear-gradient(160deg,rgb(255 255 255 / 3%),transparent 60%);transition:border-color .25s,background-color .25s}
.experience-list article:hover{border-color:var(--line-strong);background-color:rgb(255 255 255 / 2%)}
.feature-number{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:rgb(176 184 253 / 10%);color:var(--lavender);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;word-spacing:-.3em}
.experience-list h3{margin:5px 0 8px}
.experience-list p{font-size:15px;line-height:1.7;color:var(--muted);margin:0;max-width:440px}

/* Process */
.process-section{position:relative;overflow:hidden;padding-block:var(--section);background:var(--bg-raised);border-block:1px solid var(--line)}
.process-section::before{content:"";position:absolute;width:640px;height:420px;left:-180px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,rgb(123 115 252 / 16%),transparent);pointer-events:none}
.process-section .container{position:relative}
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.steps li{position:relative;padding:28px 28px 32px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg)}
.step-number{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgb(176 184 253 / 10%);color:var(--lavender);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.steps h3{margin:24px 0 10px}
.steps p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}

/* FAQ */
/* The heading is two short words: size its column to it and give the answers the room. */
.questions{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:80px;align-items:start}
.questions>div:first-child{position:sticky;top:120px}
.faq-list{display:grid;gap:10px}
.faq-list details{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-raised);transition:border-color .25s,background-color .25s}
.faq-list details:hover,.faq-list details[open]{border-color:var(--line-strong)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;font-size:17px;font-weight:500;line-height:1.45}
summary::-webkit-details-marker{display:none}
summary>span{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:rgb(176 184 253 / 10%);font-size:0;color:transparent;transition:transform .25s}
/* Draw the plus with bars so it stays centred regardless of font metrics. */
summary>span::before,summary>span::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;border-radius:1px;background:var(--lavender);transform:translate(-50%,-50%)}
summary>span::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary>span{transform:rotate(45deg)}
.faq-list p{font-size:15px;line-height:1.7;color:var(--muted);padding:0 78px 22px 24px;margin:0}

/* Download */
.download-section{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:72px;margin-bottom:72px;border:1px solid var(--line-strong);border-radius:36px;background:radial-gradient(120% 140% at 100% 0%,rgb(123 115 252 / 45%),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgb(243 196 174 / 14%),transparent 60%),#221c33}
.download-section h2{font-size:clamp(34px,3.8vw,48px)}
.download-section h2 em{display:inline-block;margin-top:4px}
.download-copy>p{font-size:16px;line-height:1.7;color:#d6d0e0;margin:20px 0 0}
.download-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.download-buttons .button{font-size:15px;padding:14px 22px}
.download-buttons svg{width:17px;height:17px;fill:currentColor;flex:none}
.download-copy .release-note{font-size:13px!important;color:var(--soft)!important;max-width:470px}
.download-logo{width:200px;height:200px;flex:none;margin-right:16px;filter:drop-shadow(0 30px 40px rgb(17 14 27 / 50%))}

/* Footer */
.site-footer{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-block:8px 48px}
.site-footer .brand{font-size:17px}
.site-footer .brand img{width:29px;height:27px}
.site-footer p{font-size:14px;color:var(--soft);margin:0}
.site-footer>a:not(.brand){margin-left:auto;font-size:14px;color:var(--muted);transition:color .2s}
.site-footer small{font-size:13px;color:var(--soft)}
.socials{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;color:var(--muted);transition:color .2s,border-color .2s,background-color .2s}
.socials a:hover{color:var(--text);border-color:var(--lavender);background:rgb(176 184 253 / 8%)}
.socials svg{width:17px;height:17px;fill:currentColor}
.socials .stroke{fill:none;stroke:currentColor;stroke-width:2}

@media(max-width:1050px){
  .container{width:calc(100% - 64px)}
  .nav-links{gap:24px}
  .hero{gap:40px}
  .hero h1{font-size:clamp(52px,7.4vw,76px)}
  .hero-description{font-size:19px}
  .preview-label{display:none}
  .experience{gap:56px;grid-template-columns:1fr 1.25fr}
  .questions{gap:48px;grid-template-columns:200px minmax(0,1fr)}
  .steps{gap:16px}
  .steps li{padding:24px}
  .download-section{padding:52px 44px}
  .download-logo{width:140px;height:140px;margin-right:0}
}
@media(max-width:760px){
  .container{width:calc(100% - 40px)}
  .navigation{height:68px;gap:14px}
  .brand{font-size:18px}
  .brand img{width:31px;height:29px}
  .nav-links{display:none}
  .button-small{min-height:40px;padding:8px 16px;font-size:14px}
  .hero{grid-template-columns:1fr;gap:48px;padding-block:48px 72px}
  .hero::before{width:420px;height:420px;right:-40%;top:auto;bottom:10%}
  .hero::after{display:none}
  .hero-copy{max-width:520px}
  .hero h1{font-size:clamp(52px,15vw,80px);margin-bottom:22px}
  .hero-description{font-size:20px}
  .hero-actions{gap:24px;margin-top:30px}
  .hero-visual{width:100%;max-width:520px;margin-inline:auto}
  .window-bar{padding:12px 16px}
  .portrait{margin-inline:6px}
  .role-strip{padding-block:28px}
  .role-strip .container{flex-direction:column;align-items:stretch}
  .role-label{font-size:20px}
  .role-marquee{margin-inline:-20px}
  .role-list{gap:8px;padding-right:8px}
  .role-list li{font-size:14px;padding:6px 14px}
  .experience,.questions{grid-template-columns:1fr;gap:36px}
  .questions>div:first-child{position:static}
  h2{font-size:clamp(32px,9vw,40px)}
  .section-intro>p:last-child{margin-top:18px}
  .experience-list article{padding:22px;gap:16px}
  .section-heading{display:block}
  .section-heading>p{margin-top:18px}
  .steps{grid-template-columns:1fr;gap:12px;margin-top:36px}
  .steps li{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:22px}
  .step-number{grid-row:1/3}
  .steps h3{margin:5px 0 8px}
  summary{font-size:16px;padding:18px 20px}
  .faq-list p{padding:0 20px 20px}
  .demo-grid,.demo-preview{margin-top:36px}
  .demo-preview{grid-template-columns:1fr;gap:0}
  .demo-preview>div{padding:24px}
  .demo-preview>img{height:auto}
  .demo-card-copy{padding:20px 22px 24px}
  .download-section{padding:40px 24px;margin-bottom:48px;border-radius:var(--radius-l)}
  .download-logo{display:none}
  .download-copy{width:100%}
  .download-buttons{flex-direction:column;align-items:stretch}
  .download-buttons .button{justify-content:flex-start}
  .download-buttons .button>span{margin-left:auto}
  .site-footer{gap:12px 18px;padding-bottom:32px}
  .site-footer .brand,.site-footer small{width:100%}
  .site-footer>a:not(.brand){margin-left:0}
  .desktop-break{display:none}
}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .role-marquee{margin-inline:0;-webkit-mask-image:none;mask-image:none}
  .role-track{width:auto;animation:none}
  .role-list{flex-wrap:wrap;padding:0}
  .role-list[aria-hidden]{display:none}
}

#waitlist{max-width:480px;text-align:left}#waitlist>label{display:block;margin:14px 0 6px}#waitlist input[type=email],#waitlist select{width:100%;padding:12px;border:1px solid #6b627b;border-radius:8px;font:inherit;background:#fff;color:#211b2c}#waitlist .waitlist-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px}#waitlist button{margin-top:14px}#waitlist p{font-size:14px;line-height:1.6}.waitlist-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Shared footer and information pages */
.site-footer{display:block;border-top:1px solid var(--line);padding-block:52px 28px}
.footer-top{display:grid;grid-template-columns:minmax(220px,.65fr) 1.5fr;gap:40px;padding-bottom:44px}
.footer-intro p{margin-top:14px;max-width:260px}
.site-footer .footer-intro .brand{font-size:24px;gap:12px}
.site-footer .footer-intro .brand img{width:40px;height:37px}
.site-footer .footer-intro p{font-size:18px;color:var(--muted)}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer-links h2{font:500 14px/1.5 var(--sans);letter-spacing:0;margin:0 0 14px;color:var(--text)}
.footer-links a{display:block;width:fit-content;color:var(--muted);font-size:14px;padding-block:6px;transition:color .2s}
.footer-links a:hover{color:var(--lavender)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px}
@media(max-width:480px){.footer-bottom{flex-direction:column;align-items:flex-start}.footer-bottom .socials{flex-wrap:wrap}}
.content-page{max-width:880px;padding-block:64px 100px;min-height:65vh}
.content-page>.page-label{margin-top:48px}
.content-page h1{max-width:780px;font-size:clamp(40px,5vw,64px);margin-top:16px}
.page-body{max-width:700px;color:var(--muted)}
.page-body h2{font:500 25px/1.3 var(--sans);letter-spacing:-.02em;color:var(--text);margin:36px 0 12px}
.page-body p{margin:12px 0 20px}
.page-body .page-lead{font-size:22px;line-height:1.5;color:var(--text);margin-bottom:28px}
.page-label{font-size:14px;color:var(--lavender)}
.page-body a{color:var(--lavender);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.page-callout{background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:28px 32px;margin-block:32px}
.page-callout h2:first-child{margin-top:0}
.page-callout p:last-child{margin-bottom:0}
.page-body li{padding-left:4px;margin-bottom:14px}
.contact-email{font-size:clamp(18px,3vw,25px)}
.pricing-section .section-heading{margin-bottom:38px}.pricing-section .page-label{margin:0 0 18px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.pricing-card{min-width:0;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--radius-m);padding:30px;display:flex;flex-direction:column}
.pricing-featured{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple);background:linear-gradient(150deg,#2e264b,var(--bg-raised) 80%)}
.pricing-best{border-color:#746ab4;background:linear-gradient(150deg,#29243e,var(--bg-raised) 80%)}
.pricing-badge{align-self:flex-start;font-size:12px;font-weight:600;line-height:1.5;border-radius:7px;padding:5px 10px;background:var(--surface);color:var(--lavender)}
.pricing-featured .pricing-badge,.pricing-best .pricing-badge{border:1px solid #746ab4;background:#2e264b}
.pricing-card h3{font:500 32px/1.2 var(--sans);letter-spacing:-1px;margin:30px 0 4px;color:var(--text)}
.pricing-card .pricing-description{font-size:13px;color:var(--muted);margin:0 0 32px}
.pricing-card .pricing-price{font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.2;letter-spacing:-1px;color:var(--text);margin:0 0 8px;font-variant-numeric:tabular-nums}
.pricing-card .pricing-rate{font-size:14px;margin:0;color:var(--muted)}
.pricing-card .pricing-savings{font-size:13px;line-height:1.8;min-height:48px;margin:24px 0;color:var(--lavender)}.pricing-savings s{color:var(--soft);margin-right:6px}
.pricing-footnote,.pricing-availability{font-size:13px;color:var(--muted);line-height:1.8;max-width:780px}.pricing-footnote{margin:24px 0 0}.pricing-availability{margin-top:20px}.pricing-status{padding:24px;border:1px solid var(--line-strong);border-radius:var(--radius-s);color:var(--muted)}
@media(max-width:900px){.pricing-grid{gap:14px}.pricing-card{padding:24px 18px}.pricing-card .pricing-price{font-size:26px}}
@media(max-width:680px){.pricing-grid{grid-template-columns:1fr;gap:20px}.pricing-card{padding:28px}.pricing-card h3{margin-top:24px}.pricing-card .pricing-price{font-size:34px}.pricing-card .pricing-description{margin-bottom:24px}.pricing-card .pricing-savings{min-height:0;margin:22px 0}}
@media(max-width:760px){
  .footer-top{grid-template-columns:1fr;gap:36px;padding-bottom:32px}
  .footer-links{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-links>div:last-child{grid-column:1/-1}
  .footer-bottom small{width:auto}
  .content-page{padding-block:36px 64px}
  .content-page>.page-label{margin-top:32px}
  .page-callout{padding:22px}
  .page-body .page-lead{font-size:20px}
}
/* A scroll-driven story with a natural sticky boundary; no scroll interception. */
.product-tour{padding-block:var(--section);overflow:visible;border-block:1px solid var(--line);background:linear-gradient(140deg,#1d172a,var(--bg));--tour-top:88px}
@media(min-width:801px){.product-tour{padding-top:clamp(40px,5vw,64px)}.product-tour .page-label{margin-top:0}}
.tour-example{max-width:760px;color:var(--muted);margin:24px 0 20px;font-size:16px}
.tour-scroll-hint{display:flex;align-items:center;gap:12px;color:var(--lavender);font-size:14px;margin:0 0 28px}
.tour-panel{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.65fr);gap:48px;align-items:center;margin:0 0 64px}
.tour-panel[hidden],.tour-selector[hidden]{display:none}
.tour-screen{grid-column:2;grid-row:1;min-width:0;aspect-ratio:1200/940;display:grid;align-items:center;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:#111019;box-shadow:0 18px 50px #0004}
.tour-screen img{display:block;width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain}
.tour-panel figcaption{grid-column:1;grid-row:1;min-width:0}
.tour-step-label{font:500 13px/1.5 var(--sans);letter-spacing:.1em;color:var(--lavender);margin:0 0 20px}
.tour-panel h3{font:500 clamp(26px,2.7vw,38px)/1.12 var(--sans);letter-spacing:-.03em;margin:0 0 20px;color:var(--text);text-wrap:balance}
.tour-panel figcaption>p:not(.tour-step-label){font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 22px}
.tour-scroll.is-scroll{height:565svh}
.is-scroll .tour-sticky{position:sticky;top:var(--tour-top);height:calc(100svh - var(--tour-top) - 16px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.is-scroll .tour-stage{min-height:0}
.is-scroll .tour-panel{margin:0}
.is-scroll .tour-screen{max-height:calc(100svh - var(--tour-top) - 100px)}
.is-scroll .tour-panel.is-active{animation:tour-reveal .24s ease-out}
.tour-selector{display:flex;justify-content:center;gap:10px;flex-shrink:0}
.tour-selector button{border:1px solid var(--line-strong);background:transparent;color:var(--muted);border-radius:50%;width:36px;height:36px;font:500 12px/1 var(--sans);cursor:pointer}
.tour-selector button[aria-pressed=true]{background:var(--lavender);color:var(--ink);border-color:var(--lavender)}
@keyframes tour-reveal{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.product-tour{--tour-top:80px}.tour-panel{display:flex;flex-direction:column;gap:22px;align-items:stretch}.tour-panel figcaption{order:-1}.tour-step-label{margin-bottom:10px}.tour-panel h3{font-size:28px;margin-bottom:12px}.tour-panel figcaption>p:not(.tour-step-label){font-size:14px;line-height:1.6;margin-bottom:10px}.tour-screen{border-radius:10px}.is-scroll .tour-screen{width:min(100%,600px);margin-inline:auto;max-height:calc(100svh - 335px)}.tour-scroll-hint{font-size:12px}.tour-example{font-size:15px}.tour-selector{gap:8px}}
@media(prefers-reduced-motion:reduce){.tour-panel.is-active{animation:none}}

/* The screenshot itself opens its original image; captions stay uncluttered. */
a.tour-screen{cursor:zoom-in}
a.tour-screen:focus-visible{outline:2px solid var(--lavender);outline-offset:5px}
