/* storyad.ai coming-soon · tokens from docs/design/BR-2/overprint/tokens.json v1.0.0 (APPROVED 2026-10-19) */
@font-face{font-family:'Unbounded';src:url('/fonts/unbounded-latin.woff2') format('woff2');font-weight:200 900;font-display:swap}@font-face{font-family:'Archivo';src:url('/fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--c-ink:#0B0B0F;--c-white:#FFFFFF;--c-cobalt:#1F3FFF;--c-pink:#FF2D7A;--c-overprint:#1F0B7A;--c-overprint-dark:#FF61FF;--c-paper:#F4F4F2;--c-line:#E3E3DF;--c-line-strong:#C6C6C1;--c-mute:#5E626B;--c-mute-2:#6B6E76;--c-ink-2:#2B2E36;--c-cobalt-hover:#1735E6;--c-cobalt-tint:#E9ECFF;--c-pink-tint:#FFE4EE;--c-pink-text:#C7084E;--c-overprint-tint:#ECE8F7;--c-state-pending:#FF2D7A;--c-state-approved:#0B0B0F;--c-state-generating:#1F3FFF;--c-state-ready:#1F0B7A;--c-state-outdated:#8A8D95;--c-state-error:#D9243A;--c-error-tint:#FDF6F7;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;--s-32:128px;--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;--sh-none:none;--sh-edge:0 0 0 1px #0B0B0F;--sh-keyline:0 0 0 2px #FFFFFF, 0 0 0 3px #0B0B0F;--sh-focus:0 0 0 2px #FFFFFF, 0 0 0 4px #1F3FFF;--sh-lift:0 16px 40px -16px rgba(11,11,15,.28), 0 2px 6px -2px rgba(11,11,15,.12);--e-out-expo:cubic-bezier(.16,1,.3,1);--e-spring:cubic-bezier(.34,1.56,.64,1);--e-in-out:cubic-bezier(.65,0,.35,1);--e-step:steps(4,end);--d-fast:160ms;--d-base:320ms;--d-slow:640ms;--d-reveal:800ms;--d-stamp:480ms;--f-display:'Unbounded', system-ui, sans-serif;--f-ui:'Archivo', system-ui, sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.5 var(--f-ui);color:var(--c-ink);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
::selection{background:var(--c-cobalt);color:#fff}
a{color:inherit}
h1,h2,p,ul{margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-48px;z-index:10;background:var(--c-ink);color:#fff;padding:10px 14px;border-radius:var(--r-md);font:600 14px/1 var(--f-ui);text-decoration:none}
.skip:focus{top:12px;outline:0;box-shadow:var(--sh-focus)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.hero{flex:1;display:flex;align-items:center;padding:40px 0 48px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.intro{width:min(100%,420px);margin:0 0 36px}
.intro-logo{width:100%;height:auto;display:block;overflow:visible}
h1{font:800 clamp(40px,8.5vw,72px)/1.02 var(--f-display);letter-spacing:-.03em;text-wrap:balance;margin:0 0 20px}
.lead{font:400 clamp(17px,2vw,20px)/1.5 var(--f-ui);color:var(--c-mute);max-width:46ch;margin:0 0 28px}
.waitlist{display:flex;flex-direction:column;gap:14px;max-width:520px}
.capture{display:flex;align-items:center;height:60px;padding:5px 5px 5px 20px;border-radius:var(--r-pill);border:1.5px solid var(--c-ink);background:#fff;gap:8px}
.capture:focus-within{box-shadow:var(--sh-focus)}
.capture input{flex:1;min-width:0;width:100%;border:0;outline:0;font:400 17px/1 var(--f-ui);color:var(--c-ink);background:transparent;padding:0;height:100%}
.capture input::placeholder{color:var(--c-mute-2)}
.capture input[aria-invalid="true"]{color:var(--c-state-error)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-pill);border:0;font:600 15px/1 var(--f-ui);color:var(--c-ink);background:transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color var(--d-fast) var(--e-out-expo),transform var(--d-fast) var(--e-out-expo),box-shadow var(--d-fast) var(--e-out-expo)}
.btn:focus-visible{outline:0;box-shadow:var(--sh-focus)}
.btn-ink{background:var(--c-ink);color:#fff}
.btn-ink:hover{background:var(--c-overprint);transform:translateY(-1px);box-shadow:var(--sh-keyline)}
.btn-ink:active{background:var(--c-overprint);transform:none;box-shadow:none}
.btn-ink:disabled{cursor:progress;transform:none;box-shadow:none}
.btn-primary{background:var(--c-cobalt);color:#fff}
.btn .price{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);background:rgba(255,255,255,.2);font-size:13px;font-weight:600}
.btn.is-loading{color:#fff;background-color:var(--c-cobalt);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 10px,transparent 10px 20px);background-size:28.28px 28.28px;animation:tape 1.2s linear infinite}
.waitlist.is-sending .btn-ink{background-color:var(--c-ink);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 10px,transparent 10px 20px);background-size:28.28px 28.28px;animation:tape 1.2s linear infinite}
@keyframes tape{to{background-position:28.28px 0}}
.check{display:flex;align-items:flex-start;gap:12px;font:500 15px/1.4 var(--f-ui);color:var(--c-ink);cursor:pointer;padding-left:4px}
.check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.check i{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-top:0;border:1.5px solid var(--c-ink);border-radius:var(--r-xs);background:#fff;transition:background-color var(--d-fast) var(--e-out-expo)}
.check i::after{content:"";width:12px;height:7px;border:2.2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg);opacity:0}
.check input:checked+i{background:var(--c-ink)}
.check input:checked+i::after{opacity:1}
.check input:focus-visible+i{box-shadow:var(--sh-focus)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.status{min-height:1.4em;font:500 15px/1.4 var(--f-ui);color:var(--c-mute);margin:0}
.status.is-error{color:var(--c-state-error)}
.status.is-info{color:var(--c-mute)}
.done{display:flex;flex-direction:column;gap:10px;max-width:520px;padding:22px 24px;border:1.5px solid var(--c-ink);border-radius:var(--r-lg);position:relative}
.done h2{font:700 26px/1.2 var(--f-display);letter-spacing:-.01em;outline:0}
.done p{color:var(--c-mute)}
.done .stamp{position:static;align-self:flex-start;animation:stamp var(--d-stamp) var(--e-spring) both}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-sm);font:600 13px/1 var(--f-ui);color:var(--c-ink);background:var(--c-paper);white-space:nowrap}
.chip-pink{background:var(--c-pink-tint);color:var(--c-pink-text)}
.chip-pink i{width:8px;height:8px;border-radius:50%;background:var(--c-pink)}
.stamp{position:absolute;right:12px;top:12px;padding:6px 10px;border:2px solid var(--c-ink);border-radius:var(--r-xs);font:700 12px/1 var(--f-display);letter-spacing:.08em;color:var(--c-ink);background:rgba(255,255,255,.92);transform:rotate(-8deg);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* teaser: three scenes replace each other with the overprint wipe (9 s loop) */
.teaser{display:flex;flex-direction:column;align-items:center;gap:18px;justify-self:center;width:100%}
.strip{position:relative;width:min(100%,260px);aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:#fff;box-shadow:0 0 0 1px var(--c-line)}
.tile{position:absolute;inset:0;mix-blend-mode:multiply;transform:translateX(104%);will-change:transform,opacity}
.tile .still{display:block;width:100%;height:100%}
.tile .stamp{opacity:0;transform:rotate(-8deg) scale(1.8)}
.addr{position:absolute;left:12px;top:12px;z-index:5;opacity:0;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-sm);background:#fff;font:600 12px/1 var(--f-display);color:var(--c-ink);letter-spacing:-.01em;box-shadow:0 0 0 1px var(--c-line)}
.control{position:relative;display:grid}
.control .btn{grid-area:1/1;pointer-events:none}
.control .b-busy{opacity:0}
.t1{animation:tile1 9s linear infinite}.t2{animation:tile2 9s linear infinite}.t3{animation:tile3 9s linear infinite}
.s1{animation:stamp1 9s linear infinite}.s2{animation:stamp2 9s linear infinite}.s3{animation:stamp3 9s linear infinite}
.a1{animation:addr1 9s linear infinite}.a2{animation:addr2 9s linear infinite}.a3{animation:addr3 9s linear infinite}
.control .b-busy.is-loading{animation:busy 9s linear infinite,tape 1.2s linear infinite}
@keyframes tile1{0%{transform:translateX(104%);opacity:1;z-index:4;animation-timing-function:var(--e-out-expo)}8.9%{transform:translateX(0)}13.3%{z-index:4}13.4%{z-index:3}43.3%{opacity:1;transform:translateX(0);z-index:3;animation-timing-function:ease}46.6%{opacity:0;transform:translateX(0);z-index:3}46.7%{transform:translateX(104%);z-index:1;opacity:0}46.8%{opacity:1}100%{transform:translateX(104%);opacity:1;z-index:1}}
@keyframes tile2{0%{transform:translateX(104%);opacity:1;z-index:1}33.2%{z-index:1;transform:translateX(104%)}33.33%{transform:translateX(104%);z-index:4;animation-timing-function:var(--e-out-expo)}42.2%{transform:translateX(0)}46.6%{z-index:4}46.7%{z-index:3}76.6%{opacity:1;transform:translateX(0);z-index:3;animation-timing-function:ease}79.9%{opacity:0;transform:translateX(0);z-index:3}80%{transform:translateX(104%);z-index:1;opacity:0}80.1%{opacity:1}100%{transform:translateX(104%);opacity:1;z-index:1}}
@keyframes tile3{0%{transform:translateX(0);opacity:1;z-index:3}10%{opacity:1;transform:translateX(0);z-index:3;animation-timing-function:ease}13.3%{opacity:0;transform:translateX(0);z-index:3}13.4%{transform:translateX(104%);z-index:1;opacity:0}13.5%{opacity:1}66.6%{transform:translateX(104%);z-index:1;opacity:1}66.67%{transform:translateX(104%);z-index:4;animation-timing-function:var(--e-out-expo)}75.6%{transform:translateX(0)}79.9%{z-index:4}80%{z-index:3}100%{transform:translateX(0);opacity:1;z-index:3}}
@keyframes stamp1{0%,15%{opacity:0;transform:rotate(-8deg) scale(1.8);animation-timing-function:var(--e-spring)}20.3%,100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes stamp2{0%,48.33%{opacity:0;transform:rotate(-8deg) scale(1.8);animation-timing-function:var(--e-spring)}53.6%,100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes stamp3{0%,13.3%{opacity:1;transform:rotate(-8deg) scale(1)}13.4%,81.67%{opacity:0;transform:rotate(-8deg) scale(1.8);animation-timing-function:var(--e-spring)}87%,100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes addr1{0%,8.9%{opacity:0}9%,42.2%{opacity:1}42.3%,100%{opacity:0}}
@keyframes addr2{0%,42.2%{opacity:0}42.3%,75.5%{opacity:1}75.6%,100%{opacity:0}}
@keyframes addr3{0%,8.9%{opacity:1}9%,75.5%{opacity:0}75.6%,100%{opacity:1}}
@keyframes busy{0%,8.9%{opacity:1}9%,32.3%{opacity:0}32.4%,42.2%{opacity:1}42.3%,65.6%{opacity:0}65.7%,75.6%{opacity:1}75.7%,99%{opacity:0}99.1%,100%{opacity:1}}
@keyframes stamp{0%{opacity:0;transform:rotate(-8deg) scale(1.8)}60%{opacity:1}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
/* intro lockup (from logo/lockup-light-animated-intro.svg) */
.op-a{animation:op-a-in .6s cubic-bezier(.16,1,.3,1) both}.op-b{animation:op-b-in .9s cubic-bezier(.16,1,.3,1) .18s both}.wm{animation:op-wm-in .8s cubic-bezier(.16,1,.3,1) .5s both}@keyframes op-a-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes op-b-in{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}@keyframes op-wm-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
.foot{border-top:1px solid var(--c-line);padding:22px 0 28px}
.foot .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-brand{display:block;line-height:0}
.foot-logo{height:24px;width:auto;display:block}
.foot-nav{margin-left:auto;display:flex;gap:18px;font:500 14px/1 var(--f-ui);color:var(--c-mute)}
.foot-nav a{color:var(--c-ink);text-decoration:none;text-underline-offset:4px}
.foot-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--c-cobalt)}
.foot-nav a:focus-visible{outline:0;box-shadow:var(--sh-focus);border-radius:4px}
.social{display:none}
/* privacy page */
.page{flex:1;padding:48px 0 64px}
.narrow{max-width:680px}
.back{display:inline-block;font:600 14px/1 var(--f-ui);color:var(--c-cobalt);text-decoration:none;margin:0 0 28px}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.page h1{font:800 clamp(34px,6vw,48px)/1.05 var(--f-display);letter-spacing:-.025em;margin:0 0 14px}
.page h2{font:700 20px/1.3 var(--f-ui);margin:28px 0 8px}
.page p,.page li{font:400 17px/1.55 var(--f-ui);color:var(--c-ink-2);max-width:62ch}
.page ul{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.page .lead{color:var(--c-mute);margin:0 0 8px}
@media (min-width:900px){.hero{padding:56px 0 64px}.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}.strip{width:min(100%,300px)}.teaser{justify-self:end}.intro{margin-bottom:44px}}
@media (min-width:1280px){.wrap{max-width:1280px;padding:0 40px}.hero-grid{gap:96px}.strip{width:320px}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .tile{transform:none;opacity:0}.t1{opacity:1}.tile .stamp{opacity:1;transform:rotate(-8deg)}
  .addr{opacity:0}.a1{opacity:1}.b-busy{opacity:0}
  .in-a,.in-b{opacity:1;transform:none}.in-w{clip-path:none}
}