/* MIZO public website (home, pricing, legal, sign-in, sign-up). Built on the app's tokens, so the themes apply here too. */
.site{min-height:100vh;display:flex;flex-direction:column}
.site-wrap{width:min(1180px,100%);margin:0 auto;padding:0 1.5rem}
.site-main{flex:1}
.site a:not(.btn){text-decoration:none}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--color-bg) 72%,transparent);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line)}
.site-head-in{display:flex;align-items:center;gap:1.5rem;height:68px}
.site-logo .logo{margin:0;width:74px;height:21px}
.site-nav{display:flex;gap:.3rem;flex:1}
.site-nav a{color:var(--muted);font-weight:500;font-size:.95rem;padding:.5rem .75rem;border-radius:var(--radius-md);transition:color .18s,background .18s}
.site-nav a:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 6%,transparent)}
.site-nav .site-signin{margin-left:auto}
.site-head-cta{display:flex;align-items:center;gap:.6rem}
.site-burger{display:none}

/* hero */
.site-hero{padding:5rem 0 3.5rem;background:radial-gradient(800px 420px at 85% 10%,color-mix(in srgb,var(--color-accent) 16%,transparent),transparent 70%)}
.site-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:center}
.site-hero h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.035em;margin:.8rem 0 1rem}
.site-kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink);background:color-mix(in srgb,var(--color-accent) 12%,transparent);padding:.35rem .7rem;border-radius:999px}
.site-lead{font-size:1.15rem;line-height:1.55;color:var(--muted);max-width:56ch;margin:0 0 1.6rem}
.site-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.site-big{min-height:3.1rem;padding:.7rem 1.3rem;font-size:1rem}
.site .btn-primary.site-big,.site .site-trial,.site .site-plan-cta.btn-primary,.auth-btn{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);font-weight:600}
.site .btn-primary.site-big:hover,.site .site-trial:hover,.site .site-plan-cta.btn-primary:hover,.auth-btn:hover:not(:disabled){background:color-mix(in srgb,var(--color-accent) 88%,var(--color-text));color:var(--color-bg)}

/* hero product mock */
.site-mock{background:var(--color-surface);border-radius:20px;padding:1.1rem;box-shadow:var(--shadow-lg),0 40px 80px -30px color-mix(in srgb,var(--color-accent) 40%,transparent);display:flex;flex-direction:column;gap:.8rem;transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);animation:rise .8s cubic-bezier(.22,1,.36,1) .15s backwards}
.site-mock-bar{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted)}.site-mock-bar i{width:.6rem;height:.6rem;border-radius:50%;background:color-mix(in srgb,var(--color-text) 18%,transparent)}.site-mock-bar span{margin-left:.5rem}
.site-mock-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.site-mock-kpis div{background:var(--surface-2);border-radius:12px;padding:.75rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.site-mock-kpis div>span{font-size:.72rem;color:var(--muted)}.site-mock-kpis b{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}.site-mock-kpis em{font-style:normal;font-size:.75rem}
.pos{color:var(--pos)}
.site-mock-leak{display:flex;gap:.7rem;align-items:center;padding:.8rem;border-radius:12px;background:color-mix(in srgb,var(--warn) 10%,transparent)}.site-mock-leak>i{font-size:1.4rem;color:var(--warn)}.site-mock-leak div{display:flex;flex-direction:column;font-size:.85rem}.site-mock-leak span{color:var(--muted);font-size:.8rem}
.site-mock-chat{display:flex;flex-direction:column;gap:.45rem;font-size:.85rem}
.site-mock-chat .me,.site-bubble.me{align-self:flex-end;background:color-mix(in srgb,var(--color-accent) 20%,transparent);padding:.5rem .8rem;border-radius:14px 14px 4px 14px;max-width:85%}
.site-mock-chat .ai{background:var(--surface-2);padding:.55rem .8rem;border-radius:14px 14px 14px 4px;max-width:92%}.site-mock-chat .ai i{color:var(--acc-ink)}

/* bands and sections */
.site-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--color-surface) 50%,transparent)}
.site-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding-top:1.8rem;padding-bottom:1.8rem}
.site-stats div{display:flex;flex-direction:column;gap:.25rem}.site-stats b{font-size:1.15rem}.site-stats span{color:var(--muted);font-size:.95rem}
.site-sec{padding:4.5rem 0}
.site-sec-head{max-width:720px;margin-bottom:2.2rem}.site-sec-head h1,.site-sec-head h2,.site-sec h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.025em;margin:0 0 .6rem}
.site-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.site-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm),inset 0 1px 0 color-mix(in srgb,var(--color-text) 5%,transparent);padding:1.4rem;color:var(--color-text)}
.site-grid .site-card{display:flex;flex-direction:column;gap:.5rem;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.site-grid .site-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.site-grid h3{font-size:1.05rem;margin:.3rem 0 0}.site-grid p{margin:0;font-size:.93rem;line-height:1.5}
.site-ic{width:2.6rem;height:2.6rem;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;color:var(--acc-ink);background:color-mix(in srgb,var(--color-accent) 14%,transparent)}
.site-ai{background:radial-gradient(700px 380px at 10% 50%,color-mix(in srgb,var(--color-accent) 12%,transparent),transparent 70%)}
.site-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.site-split h2{margin-top:.8rem}
.site-ticks{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.site-ticks li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.45}.site-ticks i{color:var(--pos);font-size:1.15rem;margin-top:.1rem;flex:none}
.site-ai-card{background:var(--color-surface);border-radius:20px;padding:1.3rem;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:.8rem}
.site-bubble.ai{background:var(--surface-2);padding:.9rem 1rem;border-radius:16px 16px 16px 4px;line-height:1.5;display:flex;flex-direction:column;gap:.3rem}.site-bubble.ai b{color:var(--acc-ink);font-size:.8rem;display:flex;gap:.3rem;align-items:center}
.site-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.site-steps li{display:flex;flex-direction:column;gap:.4rem}.site-steps b{width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--color-accent);color:var(--color-bg);font-weight:700}.site-steps h3{margin:.4rem 0 0;font-size:1.1rem}.site-steps p{margin:0}
.site-plans-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.site-plan-mini{display:flex;flex-direction:column;gap:.4rem;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}.site-plan-mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.site-plan-mini.hl,.site-plan.hl{box-shadow:0 0 0 2px var(--color-accent),0 20px 50px -25px color-mix(in srgb,var(--color-accent) 60%,transparent)}
.site-price{font-size:2.4rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}.site-price small{font-size:.95rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:.15rem}
.site-plan-mini .site-price{font-size:1.9rem}
.site-faq{max-width:820px}
.site-faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.site-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-weight:500;font-size:1.05rem}.site-faq summary::-webkit-details-marker{display:none}
.site-faq summary i{transition:transform .25s;color:var(--muted)}.site-faq details[open] summary i{transform:rotate(180deg)}
.site-faq details p{margin:.7rem 0 0;line-height:1.55}
.site-final{padding:4.5rem 0;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 22%,var(--color-surface)),var(--color-surface));border-top:1px solid var(--line)}
.site-final-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.site-final h2{margin:0;max-width:22ch;font-size:clamp(1.7rem,3vw,2.4rem)}

/* pricing */
.site-pricing-head{padding-top:3.5rem}
.site-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}
.site-plan{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.7rem}
.site-plan h2{font-size:1.4rem;margin:0}.site-plan>p{margin:0}
.site-badge{position:absolute;top:-.75rem;left:1.5rem;background:var(--color-accent);color:var(--color-bg);font-size:.75rem;font-weight:700;padding:.25rem .7rem;border-radius:999px}
.site-plan-cta{justify-content:center;margin:.6rem 0 .2rem;min-height:2.9rem}
.site-plan .site-ticks i{color:var(--acc-ink)}
.site-builder{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.site-builder-list{display:flex;flex-direction:column;gap:.5rem}
.site-addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.9rem 1rem;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--color-surface);cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s;margin-bottom:.5rem}
.site-addon:hover{border-color:color-mix(in srgb,var(--color-accent) 50%,var(--line))}
.site-addon.on{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 7%,var(--color-surface))}
.site-addon.base{cursor:default}
.site-addon input{width:1.15rem;height:1.15rem}
.site-addon div{display:flex;flex-direction:column;gap:.15rem}
.site-addon-check{width:1.15rem;display:grid;place-items:center;color:var(--muted)}
.site-addon-price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.site-builder-sum{position:sticky;top:88px;display:flex;flex-direction:column;gap:.6rem}
.site-tip{display:flex;gap:.5rem;align-items:flex-start;margin:0;padding:.7rem .8rem;border-radius:var(--radius-md);background:color-mix(in srgb,var(--warn) 12%,transparent);font-size:.88rem}.site-tip i{color:var(--warn);margin-top:.15rem}

/* legal */
.site-legal{padding-top:2.5rem}
.site-legal-in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2.5rem;align-items:start}
.site-legal-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:.2rem}
.site-legal-nav a{color:var(--muted);padding:.55rem .75rem;border-radius:var(--radius-md);font-weight:500}.site-legal-nav a.on{color:var(--color-text);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.site-legal-doc{max-width:760px;line-height:1.65}
.site-legal-doc h1{font-size:2.2rem;letter-spacing:-.025em;margin:.4rem 0 .3rem}
.site-legal-doc h2{font-size:1.15rem;margin:2rem 0 .5rem}
.site-legal-doc ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.site-draft{display:inline-flex;gap:.4rem;align-items:center;margin:0;padding:.35rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.site-ph{background:color-mix(in srgb,var(--warn) 30%,transparent);color:inherit;padding:0 .2rem;border-radius:3px}

/* sign-in and sign-up */
.auth{padding:3rem 1.5rem 4rem;display:grid;place-items:center}
.auth-card{width:min(980px,100%);padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);overflow:hidden}
.auth-form{padding:2.4rem;display:flex;flex-direction:column;gap:1rem}
.auth-form h1{font-size:1.9rem;letter-spacing:-.02em;margin:0}
.auth-form form{display:flex;flex-direction:column;gap:1rem}.auth-form form>p{margin:0}
.auth-side{padding:2.4rem;background:radial-gradient(500px 300px at 100% 0,color-mix(in srgb,var(--color-accent) 30%,transparent),transparent 70%),color-mix(in srgb,var(--color-accent) 8%,var(--surface-2));display:flex;flex-direction:column;gap:.8rem;justify-content:center}
.auth-side h2{font-size:1.6rem;letter-spacing:-.02em;margin:.5rem 0 0}
.auth-btn{justify-content:center;min-height:3rem;font-size:1rem}
.auth-agree{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.5;cursor:pointer}.auth-agree input{margin-top:.2rem;width:1.1rem;height:1.1rem;flex:none}
.auth-agree.has-err span{color:var(--neg)}
.auth-sent{display:flex;flex-direction:column;gap:.3rem}.auth-sent p{margin:0}
.auth-sent-ic{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:var(--acc-ink);background:color-mix(in srgb,var(--color-accent) 14%,transparent);margin-bottom:.5rem}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:3rem 0 1.5rem;margin-top:auto}
.site-foot-in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.site-foot-cols{display:flex;gap:3.5rem;flex-wrap:wrap}
.site-foot-cols div{display:flex;flex-direction:column;gap:.5rem}.site-foot-cols b{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.site-foot-cols a{color:var(--color-text);font-size:.93rem}.site-foot-cols a:hover{color:var(--acc-ink)}
.site-copy{margin-top:2rem}

/* the app's trial reminder */
.trial-note{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;white-space:nowrap}
.tag-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:transparent}

@media (max-width:1000px){
.site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-plans-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-hero-in,.site-split{grid-template-columns:1fr}.site-mock{transform:none}
.site-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
.site-builder{grid-template-columns:1fr}.site-builder-sum{position:static}
.site-legal-in{grid-template-columns:1fr}.site-legal-nav{position:static;flex-direction:row;flex-wrap:wrap}
.auth-card{grid-template-columns:1fr}.auth-side{display:none}
}
@media (max-width:760px){
.site-wrap{padding:0 1rem}
.site-head-in{height:60px;gap:.6rem}
.site-nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;padding:.6rem 1rem 1rem;background:var(--color-bg);border-bottom:1px solid var(--line)}
.site-nav.open{display:flex}.site-nav a{padding:.8rem .6rem;font-size:1.05rem}.site-nav .site-signin{margin-left:0}
.site-burger{display:inline-flex}.site-head-cta{margin-left:auto}.site-trial{display:none}
.site-hero{padding:2.5rem 0 2rem}
.site-grid,.site-plans-mini,.site-steps,.site-stats{grid-template-columns:1fr}
.site-mock-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.site-mock-kpis div:last-child{display:none}
.site-sec{padding:3rem 0}
.auth{padding:1.5rem 1rem 3rem}.auth-form{padding:1.6rem}
.site-foot-cols{gap:2rem}
.trial-note{display:none}
}
@media print{
.site-head,.site-foot,.no-print{display:none!important}
.site,.site-main{background:#fff!important;color:#000!important}
.site-legal-in{display:block}.site-legal-doc{max-width:none;color:#000}.site-legal-doc .muted{color:#333}
.site-ph{background:#ffe9a8}
}

/* ─── Motion and identity (Nov 2026): ambient glows, text and scroll reveals, tilt, spotlight, ribbon ─── */
/* Ambient: three soft glows in the theme's accent drift slowly behind a section, over a faint fading grid. */
.site-hero,.site-ai,.site-final{position:relative;isolation:isolate;overflow:hidden}
.site-hero{background:none}
.aurora{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;filter:blur(60px) saturate(130%);opacity:.9}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
html[data-mode="light"] .aurora i{mix-blend-mode:multiply;opacity:.55}
.aurora .a1{width:46vw;height:46vw;max-width:720px;max-height:720px;left:52%;top:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 55%,transparent),transparent 65%);animation:drift1 26s ease-in-out infinite alternate}
.aurora .a2{width:38vw;height:38vw;max-width:600px;max-height:600px;left:8%;top:28%;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 30%,var(--pos) 18%),transparent 65%);opacity:.55;animation:drift2 32s ease-in-out infinite alternate}
.aurora .a3{width:30vw;height:30vw;max-width:480px;max-height:480px;left:70%;top:48%;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 40%,#ff7ab6 22%),transparent 65%);opacity:.45;animation:drift3 22s ease-in-out infinite alternate}
.aurora.dense{opacity:.55}.aurora.dense .a1{left:-10%;top:10%}.aurora.dense .a3{left:60%;top:30%}
.aurora-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--color-text) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-text) 5%,transparent) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 60% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 60% 30%,#000 10%,transparent 75%)}
.aurora.dense .aurora-grid{display:none}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,6%) scale(1.12)}100%{transform:translate(-14%,-4%) scale(.95)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(14%,-10%) scale(1.2)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-18%,12%) scale(.9)}}

/* Text reveal: each headline word rises out of a soft blur; *starred* words shimmer in the accent. */
.rv-text{overflow-wrap:break-word}
.rv-word{display:inline-block;animation:wordin .9s cubic-bezier(.22,1,.36,1) backwards;white-space:pre}
@keyframes wordin{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.rv-hot{background:linear-gradient(100deg,var(--color-accent) 0%,color-mix(in srgb,var(--color-accent) 40%,var(--color-text)) 35%,var(--color-accent) 55%,color-mix(in srgb,var(--color-accent) 60%,#ff7ab6) 80%,var(--color-accent) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-250% 0}}
.rv-fade{animation:fadeup .9s cubic-bezier(.22,1,.36,1) backwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}}

/* Scroll reveal: marked blocks rise into place once; groups arrive one after another (--i). */
html.rv-on [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 70ms)}
html.rv-on [data-reveal].in{opacity:1;transform:none}

/* Header: glass that firms up on scroll. */
.site-head{transition:background .3s,box-shadow .3s,border-color .3s;border-bottom-color:transparent}
.site-head.scrolled{background:color-mix(in srgb,var(--color-bg) 86%,transparent);border-bottom-color:var(--line);box-shadow:0 8px 30px -18px rgba(0,0,0,.5)}

/* Primary call to action: a slow light sweep. */
.site-glow{position:relative;overflow:hidden}
.site-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 4.5s ease-in-out 1.6s infinite}
@keyframes sweep{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}

/* Product preview: floats, and tilts toward the pointer (--mx/--my). */
.site-mock-stage{perspective:1400px;--mx:.5;--my:.5}
.site-mock{position:relative;transform:rotateY(calc(-6deg + (var(--mx) - .5) * 10deg)) rotateX(calc(2deg - (var(--my) - .5) * 8deg));transition:transform .5s cubic-bezier(.22,1,.36,1);animation:rise .9s cubic-bezier(.22,1,.36,1) .3s backwards,float 7s ease-in-out 1.3s infinite}
@keyframes float{50%{translate:0 -10px}}
.site-mock::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),color-mix(in srgb,var(--color-accent) 14%,transparent),transparent 45%)}
.site-mock-leak{animation:pulse 3.2s ease-in-out 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 14%,transparent)}}
.site-mock-chat .ai{animation:fadeup .7s cubic-bezier(.22,1,.36,1) 1.9s backwards}

/* Spotlight cards: a soft glow follows the cursor across the feature grid. */
.site-spot{position:relative;overflow:hidden}
.site-spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--color-accent) 16%,transparent),transparent 60%)}
.site-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .35s;background:radial-gradient(240px circle at var(--x,50%) var(--y,50%),var(--color-accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.site-grid:hover .site-spot::before,.site-grid:hover .site-spot::after{opacity:1}
.site-spot .site-ic{transition:transform .4s cubic-bezier(.34,1.4,.64,1)}.site-spot:hover .site-ic{transform:translateY(-2px) rotate(-6deg) scale(1.08)}

/* Ribbon: everything MIZO covers, drifting by. */
.site-ribbon{overflow:hidden;border-top:1px solid var(--line);padding:.9rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.site-ribbon-track{display:flex;gap:2.2rem;width:max-content;animation:ribbon 48s linear infinite}
.site-ribbon:hover .site-ribbon-track{animation-play-state:paused}
.site-ribbon span{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-weight:500;white-space:nowrap}.site-ribbon i{color:var(--acc-ink);font-size:.8rem}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* The AI conversation: a typing pause, then the answer. */
.site-typing{display:flex;gap:.3rem;padding:.6rem .8rem;width:max-content;border-radius:14px;background:var(--surface-2)}
.site-typing i{width:.45rem;height:.45rem;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}.site-typing i:nth-child(2){animation-delay:.2s}.site-typing i:nth-child(3){animation-delay:.4s}
.site-ai-card.in .site-typing{animation:typing-out .4s ease 2.2s forwards}
@keyframes typing-out{to{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-top:-.8rem}}
.site-ai-card.in .site-bubble.ai{animation:fadeup .8s cubic-bezier(.22,1,.36,1) 2.4s backwards}
.site-ai-card:not(.in) .site-bubble.ai{opacity:0}

/* Steps: a line draws between the numbers as they arrive. */
.site-steps{position:relative}
.site-steps::before{content:"";position:absolute;top:1.15rem;left:1.15rem;right:12%;height:2px;background:linear-gradient(90deg,var(--color-accent),color-mix(in srgb,var(--color-accent) 10%,transparent));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.22,1,.36,1) .3s;z-index:0}
.site-steps.in::before{transform:scaleX(1)}
.site-steps li{position:relative;z-index:1}
.site-steps b{box-shadow:0 0 0 6px var(--color-bg),0 0 24px color-mix(in srgb,var(--color-accent) 50%,transparent)}

/* Plans: the highlighted one breathes; all lift on hover. */
.site-plan.hl,.site-plan-mini.hl{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 2px var(--color-accent),0 26px 60px -22px color-mix(in srgb,var(--color-accent) 80%,transparent)}}
.site-plan{transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .8s,translate .8s}.site-plan:hover{transform:translateY(-4px)}

/* Section headings: a short accent underline that draws in. */
.site-sec-head h2::after,.site-faq h2::after{content:"";display:block;width:56px;height:3px;margin-top:.7rem;border-radius:3px;background:linear-gradient(90deg,var(--color-accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,1,.36,1) .25s}
.site-sec-head.in h2::after,.site-faq.in h2::after,html:not(.rv-on) .site-sec-head h2::after{transform:scaleX(1)}

@media (max-width:1000px){.site-mock{transform:none}.aurora .a1{width:90vw;height:90vw;left:30%}}
@media (max-width:760px){.site-steps::before{display:none}.site-ribbon-track{animation-duration:36s}}
@media (prefers-reduced-motion:reduce){
.aurora i,.rv-word,.rv-hot,.rv-fade,.site-glow::after,.site-mock,.site-mock-leak,.site-ribbon-track,.site-typing i,.site-plan.hl,.site-plan-mini.hl,.site-ai-card.in .site-bubble.ai{animation:none!important}
.site-typing{display:none}.site-ai-card:not(.in) .site-bubble.ai{opacity:1}
html.rv-on [data-reveal]{opacity:1;transform:none;transition:none}
.site-steps::before,.site-sec-head h2::after,.site-faq h2::after{transform:none;transition:none}
}
@media print{.aurora,.site-ribbon{display:none}}

/* Header: the way into the app, next to the trial button; on phones it stays, icon and short label. */
.site-open{gap:.4rem}
@media (max-width:760px){.site-open{min-height:2.4rem;padding:.4rem .7rem;font-size:.85rem}.site-head-cta .lang button{padding:.4rem .5rem}}