*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:#050506;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}h1,h2,p{margin:0}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:5px}p{font-size:16px;line-height:1.6;color:var(--ink-2)}.kicker{font-size:12px;font-weight:600;letter-spacing:.075em;line-height:1.6}.pill{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--glass);border:1px solid #fff3;font-size:14px;font-weight:600;transition:background .2s}.pill:hover{background:#303138}.pill.primary{background:var(--ink);color:#101113;border-color:var(--ink)}.pill.small{min-height:42px;padding:0 18px}.download-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.platform-link{font-size:14px;color:var(--ink-2)}.nav{position:fixed;z-index:20;left:7%;right:7%;top:20px;display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:7px 7px 7px 22px;border:1px solid #ffffff20;border-radius:999px;background:#0e0e1299;backdrop-filter:blur(22px)}.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:600;letter-spacing:-.03em}.nav nav{display:flex;align-items:center;gap:28px;font-size:13px}.nav nav>a:not(.pill){color:var(--ink-2)}
#specks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.journey{position:relative;height:560svh}.stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}.hero-frame{position:absolute;inset:0;background:#05070c;z-index:0;transform-origin:50% 50%;box-shadow:0 35px 75px #0008}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#181923aa,transparent 65%)}.hero-word{position:absolute;z-index:2;top:12%;left:50%;transform:translateX(-50%);width:max-content;padding:0 .12em .06em;font-family:Arial,Helvetica,sans-serif;font-size:clamp(115px,17.2vw,340px);font-weight:700;line-height:1.06;letter-spacing:-.055em;white-space:nowrap;color:#666977;mask-image:linear-gradient(to bottom,transparent 0%,#0002 20%,#000 72%);pointer-events:none}.orb{opacity:0;position:absolute;z-index:3;left:50%;top:53%;width:min(55vw,69vh,740px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.orb img,.orb canvas{position:absolute;inset:0;width:100%;height:100%}.orb canvas{opacity:0}.orb.ready canvas{opacity:1}.orb.ready img{opacity:0}.hero-copy{position:absolute;z-index:5;left:6.5%;bottom:14%;max-width:390px}.hero-copy h1{font-size:clamp(24px,2.1vw,36px);line-height:1.12;letter-spacing:-.04em;font-weight:600}.hero-copy p{margin:18px 0 24px;font-size:clamp(13px,1.05vw,18px)}.hero-prompts{position:absolute;z-index:5;right:6.5%;bottom:27%;width:28%;text-align:right}.hero-prompts .kicker{font-size:10px;color:var(--ink-3);margin-bottom:20px}.prompt-window{height:40px;overflow:hidden}.prompt-line{font-size:clamp(19px,1.65vw,30px);line-height:1.3;letter-spacing:-.03em;white-space:nowrap}.hero-scroll{position:absolute;z-index:6;left:50%;bottom:5%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:10px;font-size:10px;letter-spacing:.12em;color:#cac9ce}.hero-scroll b{font-size:21px;animation:invite 1.8s ease-in-out infinite}@keyframes invite{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(5px);opacity:1}}
.overview{position:absolute;z-index:4;top:15%;left:27%;right:27%;text-align:center;opacity:0;pointer-events:none}.overview h2{font-size:clamp(28px,2.7vw,47px);line-height:1.07;font-weight:600;letter-spacing:-.045em}.world-panels{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none}.world-card{position:absolute;width:clamp(200px,23vw,380px);height:clamp(140px,23vh,225px);border:1px solid #ffffff28;border-radius:20px;background:#191b24;box-shadow:0 15px 40px #0006;overflow:hidden}.world-card>span{display:block;height:36px;padding:13px 17px 0;color:#d5d5e0;font-size:10px;font-weight:600;letter-spacing:.08em}.world-ideas{left:5%;top:22%;transform:rotate(-3deg)}.world-ask{right:5%;top:22%;transform:rotate(3deg)}.world-edit{left:6%;bottom:12%;transform:rotate(2deg)}.world-analytics{right:6%;bottom:12%;transform:rotate(-2deg)}.world-pipeline{left:50%;bottom:5%;width:30vw;height:18vh;transform:translateX(-50%)}.mini-frame{position:absolute;inset:40px 12px 12px;overflow:hidden}.mini-frame iframe{border:0;width:600px;height:300px;transform-origin:0 0;pointer-events:none}
.feature-panel{position:absolute;z-index:7;left:35%;right:4%;top:15%;bottom:6%;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none}.feature-heading{text-align:center;flex:none;width:100%;margin:0 auto 26px;height:130px;min-height:130px}.feature-heading .kicker{margin-bottom:12px;color:#b9b9c1}.feature-heading h2{font-size:clamp(28px,2.6vw,46px);font-weight:600;line-height:1.12;letter-spacing:-.045em;white-space:nowrap}.feature-heading h2 span{color:#9e9ea7}.feature-heading>p:last-child{font-size:clamp(12px,1vw,16px);line-height:1.6;max-width:56ch;margin:14px auto 0}.product-demo{position:relative;flex:none;width:min(100%,98vh,1080px);aspect-ratio:16/10;border:1px solid #ffffff28;border-radius:18px;overflow:hidden;background:#14171f;box-shadow:0 24px 70px #0007}.product-demo iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none}.demo-caption{text-align:center;font-size:12px;color:#bbbcc4;line-height:1.5;max-width:65ch;margin:16px 0 0;min-height:2em}
.closing{position:absolute;inset:0;z-index:6;display:flex;align-items:flex-start;justify-content:center;padding-top:54vh;text-align:center;opacity:0}.closing h2{font-size:clamp(34px,4vw,65px);line-height:1.03;letter-spacing:-.045em;font-weight:600;margin:16px 0}.closing .download-actions{justify-content:center;margin-top:25px}.closing p{font-size:15px}.closing .kicker{font-size:11px}.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}#meet{top:115vh}#feature{top:650svh}#filming{top:475vh}#ask{top:635vh}#schedule{top:795vh}#analytics{top:955vh}footer{position:relative;z-index:8;display:flex;gap:28px;align-items:center;justify-content:space-between;padding:40px 7%;border-top:1px solid #ffffff15;font-size:12px;color:var(--ink-3);background:transparent}.text-button{border:0;background:none;padding:5px 0;font-size:12px;text-decoration:underline;text-underline-offset:4px}.skip{position:fixed;left:20px;top:-80px;z-index:99;padding:14px;background:white;color:black}.skip:focus{top:12px}
@media(max-height:760px) and (min-width:761px){.feature-panel{top:14%;bottom:3%}.feature-heading{height:122px;min-height:122px;margin-bottom:18px}.feature-heading h2{font-size:clamp(26px,2.5vw,41px)}.feature-heading>p:last-child{margin-top:10px}.product-demo{width:min(100%,98vh,1000px)}.demo-caption{margin-top:12px}.hero-copy{bottom:14%}.overview{top:15%}}
@media(max-width:1050px) and (min-width:761px){.feature-panel{left:31%;right:3%}.feature-heading h2{white-space:normal}.hero-copy{left:5%;max-width:300px}.hero-prompts{right:4%}.world-card{width:25vw}.world-pipeline{width:32vw}}
@media(max-width:760px){.nav{left:16px;right:16px;top:12px;min-height:50px;padding:5px 6px 5px 13px}.nav .brand{font-size:16px}.nav nav{gap:14px;font-size:11px}.nav nav>a:first-child{display:none}.nav .pill{min-height:36px;padding:0 13px;font-size:11px}.hero-word{font-size:26vw;top:17%;letter-spacing:-.06em}.orb{width:84vw;top:42%}.hero-copy{left:24px;bottom:15%;max-width:100%}.hero-copy h1{font-size:27px}.hero-copy p{font-size:13px;margin:12px 0 18px}.hero-prompts{display:none}.hero-scroll{bottom:3%}.hero-copy .pill{font-size:12px;min-height:44px;padding:0 18px}.hero-copy .platform-link{font-size:12px}.overview{top:17%;left:8%;right:8%}.overview h2{font-size:29px}.world-card{width:43%;height:18vh;border-radius:13px}.world-ideas{top:29%;left:4%}.world-ask{top:29%;right:4%}.world-edit{left:4%;bottom:26%}.world-analytics{right:4%;bottom:26%}.world-pipeline{width:67%;height:15vh;bottom:8%}.world-card>span{font-size:8px;padding:10px 10px 0;height:25px}.mini-frame{inset:30px 7px 8px}.feature-panel{left:16px;right:16px;top:23%;bottom:6%}.feature-heading{height:196px;min-height:196px;margin-bottom:25px}.feature-heading h2{font-size:31px;white-space:normal;max-width:18ch;margin:auto}.feature-heading .kicker{font-size:10px}.feature-heading>p:last-child{font-size:13px;max-width:43ch;line-height:1.6}.product-demo{width:100%;border-radius:11px}.demo-caption{font-size:11px;max-width:40ch;margin-top:18px}.closing{padding-top:49vh}.closing h2{font-size:42px}.closing .download-actions{gap:10px}.closing .pill{font-size:12px;padding:0 15px;min-height:46px}.closing p{font-size:13px}.closing .kicker{font-size:10px}footer{flex-wrap:wrap;justify-content:center;padding:30px 20px;gap:18px}.sample-note{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-scroll b{animation:none}}
@media(max-width:760px){.feature-heading h2{font-size:28px;max-width:none;min-height:63px}.feature-heading h2 span{display:block}.overview h2{max-width:21ch;margin:auto}}
.motion-calm .hero-scroll b{animation:none}

/* Hero, 3 Nov: small centred menu bar, centred headline,
   buttons that say where they go, the waiting list's planet rising below. */
.nav{left:50%;right:auto;transform:translateX(-50%);width:min(780px,calc(100% - 32px));gap:18px;padding:6px 6px 6px 18px}
.nav nav{flex:1;justify-content:center;gap:30px;font-size:13.5px}
.nav nav a{color:var(--ink-2);transition:color .2s}.nav nav a:hover{color:var(--ink)}
.nav .brand{font-size:20px;gap:11px}.nav .brand-mark{width:40px;height:40px}
@media(max-width:760px){.nav .brand-mark{width:34px;height:34px}}
.planet{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hero-copy{--hl:rgba(195,174,255,.42);left:50%;right:auto;top:clamp(130px,23vh,240px);bottom:auto;transform:translateX(-50%);width:min(1100px,92vw);max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy h1{font-size:clamp(48px,6.7vw,116px);line-height:1;letter-spacing:-.05em;font-weight:700;text-wrap:balance;color:var(--ink)}
/* A marker stroke under the key words, as on Roman's Reelfolio reference (3 Nov):
   lavender (--hl, Roman's pick after comparing six) under the lower half, slightly tilted,
   arriving together with the headline (Roman, 3 Nov). Bright markers need --hl-top:.12em and dark text. */
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.05em;top:var(--hl-top,.5em);bottom:-.02em;border-radius:.12em;background:var(--hl);transform:rotate(-1.4deg)}
.hero-ctas{margin-top:38px}
.hero-copy p{margin:22px 0 30px;font-size:clamp(17px,1.45vw,22px);color:var(--ink-2)}
.hero-copy p b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-ctas .pill{min-height:54px;padding:0 26px;font-size:15px;gap:14px}
/* Arrival: the bar, then the words one after another. */
@keyframes rise-in{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes bar-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translateX(-50%)}}
.nav{animation:bar-in .8s var(--ease) .1s both}
.hero-copy>*{animation:rise-in 1s var(--ease) both}
.hero-copy>h1{animation-delay:.2s}.hero-copy>.hero-ctas{animation-delay:.5s}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-height:760px) and (min-width:761px){.hero-copy{top:112px}.hero-copy h1{font-size:clamp(46px,6.3vw,92px)}.hero-ctas{margin-top:30px}}
@media(max-width:760px){.nav{width:calc(100% - 24px);padding:5px 5px 5px 13px}.nav nav{display:none}.nav-cta{margin-left:auto}
 .hero-copy{top:132px;width:calc(100vw - 40px)}.hero-copy h1{font-size:44px}.hero-ctas{margin-top:28px}
 .hero-ctas{width:100%;max-width:340px;flex-direction:column}.hero-ctas .pill{min-height:52px;font-size:14px;padding:0 22px}}
@media(prefers-reduced-motion:reduce){.nav,.hero-copy>*,.cta,.cta-ic{animation:none!important;transition:none!important}}
.motion-calm .nav,.motion-calm .hero-copy>*,.motion-calm .cta-ic{animation:none!important}
/* Buttons, 8 Nov (Roman: no hover to see; keep that hover, main stays white).
   Main is white with the app's warm light inside, the sign-in button's recipe;
   the light sits still, follows the mouse and glides home after (app.js). The
   other is a fine bright rim. Hover grows 2% and lifts, as the app's does, and
   still eases in slowly (Roman, 3 Nov: smooth, not rapid). */
:is(.pill.primary,.nav-cta){--gx:84%;--gy:96%;--gh:18;--ga:1;position:relative;isolation:isolate;color:#101113;border:1px solid var(--ink);background:radial-gradient(62% 100% at var(--gx) var(--gy),hsla(var(--gh),95%,68%,calc(.12*var(--ga))),transparent 72%),var(--ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.2);transition:transform .7s var(--ease),border-color .7s var(--ease)}
:is(.pill.primary,.nav-cta)::after{content:"";position:absolute;z-index:-1;inset:-5px -8px -9px;border-radius:inherit;background:radial-gradient(60% 90% at var(--gx) var(--gy),hsla(var(--gh),90%,70%,.3),transparent 74%);filter:blur(14px);opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
:is(.cta,.get-actions .pill):not(.primary){background:transparent;border:1px solid rgba(245,244,241,.36);color:var(--ink);transition:transform .7s var(--ease),background .9s var(--ease),border-color .9s var(--ease),box-shadow 1.1s var(--ease)}
@media(hover:hover){
:is(.pill.primary,.nav-cta):hover{transform:translateY(-1.5px) scale(1.02);border-color:#fff}
:is(.pill.primary,.nav-cta):hover::after{opacity:1}
:is(.cta,.get-actions .pill):not(.primary):hover{transform:translateY(-1.5px) scale(1.02);background:rgba(245,244,241,.1);border-color:rgba(245,244,241,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -14px rgba(245,244,241,.3)}
}
:is(.pill.primary,.nav-cta,.cta,.get-actions .pill):active{transform:scale(.98);transition-duration:.15s}
@media(prefers-reduced-motion:reduce){:is(.pill.primary,.nav-cta,.get-actions .pill),:is(.pill.primary,.nav-cta)::after{transition:none!important}:is(.pill.primary,.nav-cta,.cta,.get-actions .pill):hover{transform:none!important}}
.motion-calm :is(.pill.primary,.nav-cta,.cta,.get-actions .pill):hover{transform:none!important}
.cta-ic{display:inline-block}
.cta:hover .cta-ic{animation:drop 1.8s cubic-bezier(.45,0,.55,1) .25s infinite}
@keyframes drop{0%{transform:translateY(0);opacity:1}45%{transform:translateY(5px);opacity:0}46%{transform:translateY(-5px);opacity:0}100%{transform:translateY(0);opacity:1}}
/* First scroll, 3 Nov: paper around the shrunk page, the heading inside it,
   four cards at the sides and Alora's writing bar over the page's bottom edge. */
.stage{background:#F2F1EF}
.overview{top:22%;left:25%;right:25%;display:flex;flex-direction:column;align-items:center;gap:12px}
.overview h2{font-size:clamp(30px,2.9vw,46px);line-height:1.08;font-weight:700;letter-spacing:-.04em}
.overview h2 span{color:var(--ink-3)}
/* The writing bar is the app's own AskBar (GlassShell .gs-ask.is-dark), scaled
   up by --k so it reads at website size: star, line, clip, mic, white send. */
.ask-bar{--k:1.3;position:absolute;z-index:7;left:50%;top:calc(74% - 30px);transform:translateX(-50%);width:min(620px,44vw);display:flex;align-items:center;gap:calc(8px*var(--k));padding:calc(6px*var(--k)) calc(6px*var(--k)) calc(6px*var(--k)) calc(14px*var(--k));border-radius:999px;background:rgba(22,22,26,.88);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none}
.ask-bar svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ask-spark{flex:none;width:calc(15px*var(--k));height:calc(15px*var(--k));stroke-width:1.8;color:rgba(241,238,232,.55)}
.ask-text{position:relative;flex:1;min-width:0;padding:calc(6px*var(--k)) 0;font-size:calc(13.5px*var(--k));line-height:calc(20px*var(--k));color:#F1EEE8;white-space:nowrap;overflow:hidden}
.ask-ph{position:absolute;left:0;top:calc(6px*var(--k));color:rgba(241,238,232,.45)}.has-text .ask-ph{display:none}
.ask-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#F1EEE8;animation:caret 1s steps(1) infinite}
.ask-bar:not(.has-text) .ask-caret{position:absolute;left:0;top:calc(6px*var(--k) + .2em);margin:0}
@keyframes caret{50%{opacity:0}}
.ask-btn,.ask-send{flex:none;width:calc(32px*var(--k));height:calc(32px*var(--k));border-radius:999px;display:grid;place-items:center}
.ask-btn{background:rgba(255,255,255,.1);color:#F1EEE8}
.ask-btn svg{width:calc(15px*var(--k));height:calc(15px*var(--k));stroke-width:1.9}
.ask-send{background:#F5F5F7;color:#141416}
.ask-send svg{width:calc(15px*var(--k));height:calc(15px*var(--k));stroke-width:2.2}

@media(max-width:1050px) and (min-width:761px){.ask-bar{width:56vw}}
@media(max-width:760px){.overview{top:calc(8% + 30px);left:10%;right:10%}.overview h2{font-size:26px}
 .world-card{width:44%;height:15vh}.world-ideas{left:3%;top:57%}.world-analytics{right:3%;top:61%}.world-edit,.world-pipeline, .ask-bar{--k:1.1;top:auto;bottom:7%;width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){.ask-caret{animation:none}}
.nav{background:rgba(18,18,23,.86)}
.card-clip{position:absolute;inset:0;z-index:3;pointer-events:none}
/* The five cards, 3 Nov (round two): drawn in the app's own look rather than
   cropped app screens, so they read at this size. Straight, each its own size,
   frosted dark glass; --cs scales them with the screen (set in app.js). */
.world-panels{--cs:1}
.wc{position:absolute;width:calc(var(--w)*var(--cs));padding:calc(14px*var(--cs)) calc(16px*var(--cs)) calc(16px*var(--cs));border-radius:calc(20px*var(--cs));background:rgba(26,27,32,.82);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 70px -24px rgba(20,20,30,.45),0 2px 8px rgba(20,20,30,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#F1EEE8;font-size:calc(13px*var(--cs));opacity:0;will-change:transform,opacity,filter;transform-origin:50% 50%}
.wc header{display:flex;align-items:center;gap:calc(8px*var(--cs));margin-bottom:calc(12px*var(--cs));font-size:calc(12.5px*var(--cs))}
.wc header svg{width:calc(15px*var(--cs));height:calc(15px*var(--cs));fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:rgba(241,238,232,.7)}
.wc header b{font-weight:600}
.wc header span{margin-left:auto;color:rgba(241,238,232,.5);font-size:calc(11.5px*var(--cs))}
.wc svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
/* Saved ideas */
.wc-ideas{--w:300px;left:3%;top:17%}
.wi-tag{display:inline-block;padding:calc(3px*var(--cs)) calc(9px*var(--cs));border-radius:999px;background:rgba(108,215,157,.14);color:#6CD79D;font-size:calc(11px*var(--cs));font-weight:600}
.wc-ideas h3{margin:calc(8px*var(--cs)) 0 calc(5px*var(--cs));font-size:calc(19px*var(--cs));letter-spacing:-.02em;line-height:1.15}
.wc-ideas p{margin:0;font-size:calc(12.5px*var(--cs));line-height:1.45;color:rgba(241,238,232,.62)}
.wi-row{display:flex;align-items:center;gap:calc(10px*var(--cs));margin-top:calc(12px*var(--cs))}
.wi-btn{display:inline-flex;align-items:center;gap:calc(6px*var(--cs));padding:calc(7px*var(--cs)) calc(13px*var(--cs));border-radius:999px;background:#F5F5F7;color:#141416;font-weight:600;font-size:calc(12px*var(--cs))}
.wi-btn svg{width:calc(14px*var(--cs));height:calc(14px*var(--cs));stroke-width:2}
.wi-more{color:rgba(241,238,232,.45);font-size:calc(11.5px*var(--cs))}
/* AI editing */
.wc-edit{--w:310px;left:6%;top:50%}
.we-body{display:flex;gap:calc(14px*var(--cs));align-items:center}
.we-thumb{position:relative;flex:none;width:calc(66px*var(--cs));aspect-ratio:9/16;border-radius:calc(10px*var(--cs));overflow:hidden;background:#111}
.we-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.we-thumb span{position:absolute;left:50%;bottom:calc(6px*var(--cs));transform:translateX(-50%);padding:calc(2px*var(--cs)) calc(7px*var(--cs));border-radius:999px;background:#C3AEFF;color:#141416;font-size:calc(9.5px*var(--cs));font-weight:700}
.wc-edit ol{list-style:none;margin:0;padding:0;display:grid;gap:calc(7px*var(--cs));font-size:calc(12px*var(--cs))}
.st{display:flex;align-items:center;gap:calc(8px*var(--cs));color:rgba(241,238,232,.42);transition:color .5s}
.st-dot{flex:none;width:calc(16px*var(--cs));height:calc(16px*var(--cs));border-radius:50%;border:1.5px solid rgba(241,238,232,.25);display:grid;place-items:center;transition:background .4s,border-color .4s}
.st-dot svg{width:calc(10px*var(--cs));height:calc(10px*var(--cs));stroke-width:3;color:#141416;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.is-in .st.done{color:#F1EEE8;transition-delay:calc(var(--d)*.28s + .2s)}
.is-in .st.done .st-dot{background:#6CD79D;border-color:#6CD79D;transition-delay:calc(var(--d)*.28s + .2s)}
.is-in .st.done .st-dot svg{opacity:1;transform:none;transition-delay:calc(var(--d)*.28s + .25s)}
.st.now{color:#F1EEE8;font-weight:600}
.st.now .st-dot{border-color:#C3AEFF;border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Analytics */
.wc-analytics{--w:280px;right:3%;top:14%}
.wa-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.wa-top small{display:block;font-size:calc(11.5px*var(--cs));color:rgba(241,238,232,.5)}
.wa-top strong{font-size:calc(30px*var(--cs));letter-spacing:-.03em;line-height:1.05}
.wa-up{padding:calc(3px*var(--cs)) calc(9px*var(--cs));border-radius:999px;background:rgba(108,215,157,.14);color:#6CD79D;font-size:calc(11px*var(--cs));font-weight:600;margin-bottom:calc(4px*var(--cs))}
.wa-bars{display:flex;align-items:flex-end;gap:calc(6px*var(--cs));height:calc(64px*var(--cs));margin-top:calc(12px*var(--cs))}
.wa-bars i{flex:1;height:calc(var(--h)*1%);border-radius:calc(5px*var(--cs)) calc(5px*var(--cs)) 2px 2px;background:linear-gradient(#C3AEFF,rgba(195,174,255,.55));transform:scaleY(.04);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.wa-bars i:last-child{background:linear-gradient(#6CD79D,rgba(108,215,157,.6))}
.is-in .wa-bars i{transform:none;transition-delay:calc(var(--d)*.07s + .1s)}
.wa-days{display:flex;justify-content:space-between;margin-top:calc(6px*var(--cs));font-size:calc(10.5px*var(--cs));color:rgba(241,238,232,.4)}
/* Schedule */
.wc-schedule{--w:300px;right:8.5%;top:40%}
.sc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(5px*var(--cs))}
.sc-day{min-height:calc(70px*var(--cs));padding:calc(6px*var(--cs)) calc(4px*var(--cs));border-radius:calc(9px*var(--cs));background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;gap:calc(3px*var(--cs))}
.sc-day b{font-size:calc(9.5px*var(--cs));font-weight:600;color:rgba(241,238,232,.42)}
.sc-day i{font-style:normal;font-size:calc(12.5px*var(--cs));font-weight:600}
.sc-day.is-today i{width:calc(20px*var(--cs));height:calc(20px*var(--cs));border-radius:50%;background:#F5F5F7;color:#141416;display:grid;place-items:center}
.sc-day:last-child{background:rgba(255,255,255,.1);grid-column:auto}
.sc-post{width:100%;padding:calc(2px*var(--cs)) 0;border-radius:calc(5px*var(--cs));font-size:calc(8.5px*var(--cs));font-weight:700;text-align:center;opacity:0;transform:translateY(calc(6px*var(--cs)));transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.sc-post.ig{background:#E1306C;color:#fff}.sc-post.tt{background:#F5F5F7;color:#141416}
.is-in .sc-post{opacity:1;transform:none;transition-delay:.35s}.is-in .sc-post.tt{transition-delay:.5s}
/* Pipeline */
.wc-pipeline{--w:350px;right:2%;top:63%}
.wp-cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:calc(8px*var(--cs))}
.wp-col{display:grid;gap:calc(7px*var(--cs));align-content:start}
.wp-chip{justify-self:start;padding:calc(3px*var(--cs)) calc(8px*var(--cs));border-radius:999px;background:rgba(255,255,255,.1);font-size:calc(10px*var(--cs));font-weight:600;white-space:nowrap}
.wp-chip.ai{background:#C3AEFF;color:#141416}.wp-chip.ready{background:#D4FF4F;color:#141416}
.wp-empty{height:calc(56px*var(--cs));border-radius:calc(9px*var(--cs));border:1.5px dashed rgba(255,255,255,.12)}
.wp-card{padding:calc(8px*var(--cs));border-radius:calc(10px*var(--cs));background:rgba(255,255,255,.08);border:1px solid rgba(212,255,79,.55);display:grid;gap:calc(7px*var(--cs));opacity:0;transform:translateX(calc(-30px*var(--cs)));transition:opacity .5s,transform .8s cubic-bezier(.22,1,.36,1)}
.wp-card b{font-size:calc(11.5px*var(--cs));line-height:1.2}
.wp-btn{justify-self:start;display:inline-flex;align-items:center;gap:calc(4px*var(--cs));padding:calc(3px*var(--cs)) calc(8px*var(--cs));border-radius:999px;background:#D4FF4F;color:#141416;font-size:calc(10px*var(--cs));font-weight:700}
.wp-btn svg{width:calc(11px*var(--cs));height:calc(11px*var(--cs));stroke-width:3}
.is-in .wp-card{opacity:1;transform:none;transition-delay:.3s}
@media(max-width:760px){.wc-edit,.wc-schedule,.wc-pipeline{display:none}.wc-ideas{--w:180px;left:3%;top:56%}.wc-analytics{--w:170px;right:3%;top:60%}.wc-ideas p,.wi-more{display:none}}
@media(prefers-reduced-motion:reduce){.wa-bars i,.sc-post,.wp-card,.st,.st-dot,.st-dot svg{transition:none!important}.st.now .st-dot{animation:none}}
/* A blurred card has soft edges only without its own glass layer. */
.wc.is-flying{backdrop-filter:none;-webkit-backdrop-filter:none}
.wp-btn,.wp-chip,.wa-up,.wc header span,.sc-post{white-space:nowrap}
.wc-pipeline{--w:380px}
@media(max-width:760px){.wc header span,.wa-up{display:none}.wa-top strong{font-size:calc(26px*var(--cs))}}
/* ---- Card looks under trial (4 Nov). Same content and motion, different skin. ---- */
/* Paper: light cards on the paper, dark text, like the app's light mode. */
[data-look=paper] .wc{background:rgba(255,255,255,.9);color:#16161a;border-color:rgba(20,20,30,.08);box-shadow:0 1px 0 #fff inset,0 24px 60px -22px rgba(20,20,30,.28),0 2px 6px rgba(20,20,30,.06)}
[data-look=paper] .wc header svg,[data-look=paper] .wc header span,[data-look=paper] .wa-top small,[data-look=paper] .wa-days,[data-look=paper] .wi-more,[data-look=paper] .sc-day b{color:rgba(22,22,26,.5)}
[data-look=paper] .wc-ideas p{color:rgba(22,22,26,.62)}
[data-look=paper] .wi-btn,[data-look=paper] .sc-day.is-today i{background:#16161a;color:#fff}
[data-look=paper] .wi-tag,[data-look=paper] .wa-up{background:rgba(47,168,102,.12);color:#1F8A50}
[data-look=paper] .st{color:rgba(22,22,26,.4)}[data-look=paper] .st.now,[data-look=paper] .is-in .st.done{color:#16161a}
[data-look=paper] .st-dot{border-color:rgba(22,22,26,.2)}[data-look=paper] .st.now .st-dot{border-color:#8B6CF0;border-top-color:transparent}
[data-look=paper] .sc-day{background:rgba(22,22,26,.05)}[data-look=paper] .sc-day:last-child{background:rgba(22,22,26,.09)}
[data-look=paper] .wp-chip{background:rgba(22,22,26,.08)}[data-look=paper] .wp-empty{border-color:rgba(22,22,26,.12)}
[data-look=paper] .wp-card{background:#fff;border-color:#B8DB3A}
[data-look=paper] .wa-bars i{background:linear-gradient(#9E86F5,#C9B9FF)}
/* Tinted: each card glows with its feature's colour from the app. */
[data-look=tinted] .wc{--tint:195,174,255;background:linear-gradient(160deg,rgba(var(--tint),.22),rgba(26,27,32,.9) 55%);border-color:rgba(var(--tint),.32);box-shadow:0 0 0 1px rgba(var(--tint),.06) inset,0 30px 80px -26px rgba(var(--tint),.45)}
[data-look=tinted] .wc header svg{color:rgb(var(--tint))}
[data-look=tinted] .wc-ideas{--tint:255,214,102}[data-look=tinted] .wc-analytics{--tint:108,215,157}[data-look=tinted] .wc-schedule{--tint:255,128,170}[data-look=tinted] .wc-pipeline{--tint:212,255,79}
/* Widget: rounder, bolder, one thing per card, like phone widgets. */
[data-look=widget] .wc{border-radius:calc(30px*var(--cs));padding:calc(18px*var(--cs)) calc(20px*var(--cs)) calc(20px*var(--cs));background:#1B1C21}
[data-look=widget] .wc header span,[data-look=widget] .wc-ideas p,[data-look=widget] .wi-more,[data-look=widget] .wa-days{display:none}
[data-look=widget] .wc-ideas{--w:250px}[data-look=widget] .wc-ideas h3{font-size:calc(25px*var(--cs))}
[data-look=widget] .wa-top strong{font-size:calc(42px*var(--cs))}[data-look=widget] .wc-analytics{--w:250px}
[data-look=widget] .wc-schedule{--w:270px}[data-look=widget] .wc-edit{--w:290px}
/* Outline: see-through glass with a hairline, quietest of all. */
[data-look=outline] .wc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.28);box-shadow:none;backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3)}
[data-look=outline] .wc-ideas,[data-look=outline] .wc-edit{background:rgba(20,20,26,.55)}
[data-look=outline] .wc-analytics,[data-look=outline] .wc-schedule,[data-look=outline] .wc-pipeline{background:rgba(20,20,26,.55)}
/* Photo: the idea and the edit lead with the creator's footage, like Kin's People and Places. */
[data-look=photo] .wc-ideas{--w:260px;padding:0;overflow:hidden;background:#111}
[data-look=photo] .wc-ideas::before{content:"";display:block;height:calc(150px*var(--cs));background:linear-gradient(transparent 40%,rgba(17,17,17,.95)),url(assets/workout.webp) center 30%/cover}
[data-look=photo] .wc-ideas header{position:absolute;top:calc(12px*var(--cs));left:calc(14px*var(--cs));right:calc(14px*var(--cs));padding:calc(4px*var(--cs)) calc(10px*var(--cs));border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px)}
[data-look=photo] .wc-ideas>:not(header){margin-left:calc(16px*var(--cs));margin-right:calc(16px*var(--cs))}
[data-look=photo] .wc-ideas .wi-tag{margin-top:calc(-34px*var(--cs));position:relative}
[data-look=photo] .wc-ideas p{display:none}[data-look=photo] .wc-ideas .wi-row{margin-bottom:calc(16px*var(--cs))}
[data-look=photo] .wc-edit{--w:300px}[data-look=photo] .we-thumb{width:calc(96px*var(--cs))}
/* 4 Nov: insides of four cards redone in the Analytics card's way: one big
   thing to read first, one simple picture, few words. */
/* Schedule: the next post first, then where and the week */
.wc-schedule{--w:270px}
.ns-top strong{display:block;font-size:calc(30px*var(--cs));letter-spacing:-.03em;line-height:1.05}
.ns-plats{display:flex;gap:calc(6px*var(--cs));margin:calc(10px*var(--cs)) 0 calc(14px*var(--cs))}
.ns-p{display:inline-flex;align-items:center;gap:calc(6px*var(--cs));padding:calc(4px*var(--cs)) calc(10px*var(--cs)) calc(4px*var(--cs)) calc(7px*var(--cs));border-radius:999px;background:rgba(255,255,255,.07);font-size:calc(11.5px*var(--cs));font-weight:600}
.ns-p i{width:calc(8px*var(--cs));height:calc(8px*var(--cs));border-radius:50%}.ns-p.ig i{background:#E1306C}.ns-p.tt i{background:#F1EEE8}
.ns-week{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(4px*var(--cs))}
.ns-week div{display:grid;justify-items:center;gap:calc(6px*var(--cs));padding:calc(6px*var(--cs)) 0;border-radius:calc(8px*var(--cs))}
.ns-week b{font-size:calc(10.5px*var(--cs));color:rgba(241,238,232,.45);font-weight:600}
.ns-week i{width:calc(6px*var(--cs));height:calc(6px*var(--cs));border-radius:50%;background:rgba(255,255,255,.12)}
.ns-week .today b{color:#F1EEE8}
.ns-week .on{background:rgba(255,255,255,.1)}.ns-week .on b{color:#F1EEE8}
.ns-week .on i{background:#E1306C;box-shadow:calc(5px*var(--cs)) 0 0 #F1EEE8;transform:translateX(calc(-2.5px*var(--cs))) scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.is-in .ns-week .on i{transform:translateX(calc(-2.5px*var(--cs))) scale(1);transition-delay:.35s}
@media(prefers-reduced-motion:reduce){.ns-week .on i,.ke-bar i,.k-row i{transition:none!important;animation:none!important}}
/* 4 Nov (round three): Saved ideas, AI editing and Pipeline built exactly like
   Analytics and Schedule, which Roman likes: small label, one big line, a pill,
   one simple row underneath. */
.wc-ideas{--w:280px}.wc-edit{--w:290px}.wc-pipeline{--w:300px}
.k-label{display:block;font-size:calc(11.5px*var(--cs));color:rgba(241,238,232,.5)}
.k-big{display:block;font-size:calc(26px*var(--cs));letter-spacing:-.03em;line-height:1.08;margin-top:calc(2px*var(--cs))}
.k-num{font-size:calc(30px*var(--cs));font-variant-numeric:tabular-nums}
.k-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.k-top .k-pill{margin:0 0 calc(4px*var(--cs))}
.k-pill{display:inline-block;margin-top:calc(10px*var(--cs));padding:calc(3px*var(--cs)) calc(9px*var(--cs));border-radius:999px;font-size:calc(11px*var(--cs));font-weight:600;white-space:nowrap}
.k-pill.green{background:rgba(108,215,157,.14);color:#6CD79D}.k-pill.purple{background:rgba(195,174,255,.16);color:#C3AEFF}.k-pill.lime{background:rgba(212,255,79,.15);color:#D4FF4F}
.k-row{display:grid;gap:calc(4px*var(--cs));margin-top:calc(14px*var(--cs))}
.k-row>div{display:grid;justify-items:center;gap:calc(6px*var(--cs));padding:calc(7px*var(--cs)) 0;border-radius:calc(8px*var(--cs))}
.k-row b{font-size:calc(10.5px*var(--cs));color:rgba(241,238,232,.45);font-weight:600;white-space:nowrap}
.k-row i{width:calc(6px*var(--cs));height:calc(6px*var(--cs));border-radius:50%;background:rgba(255,255,255,.12)}
.k-row .on{background:rgba(255,255,255,.1)}.k-row .on b{color:#F1EEE8}
/* Saved ideas: three ideas, the first picked */
.ki-row{grid-template-columns:repeat(3,1fr)}
.ki-row .on i{background:#6CD79D;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.is-in .ki-row .on i{transform:none;transition-delay:.3s}
/* AI editing: the percentage counts up, the bar fills, five steps tick */
.ke-bar{height:calc(6px*var(--cs));border-radius:999px;background:rgba(255,255,255,.1);margin-top:calc(12px*var(--cs));overflow:hidden}
.ke-bar i{display:block;height:100%;width:72%;border-radius:inherit;background:linear-gradient(90deg,#6CD79D,#C3AEFF);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.is-in .ke-bar i{transform:none;transition-delay:.15s}
.ke-row{grid-template-columns:repeat(5,1fr);margin-top:calc(10px*var(--cs))}
.ke-row>div{padding:calc(4px*var(--cs)) 0}
.ke-row .done i{background:#6CD79D}.ke-row .done b{color:rgba(241,238,232,.75)}
.ke-row .now{background:rgba(195,174,255,.12)}.ke-row .now b{color:#C3AEFF}.ke-row .now i{background:#C3AEFF;animation:ke-pulse 1.6s ease-in-out infinite}
@keyframes ke-pulse{50%{opacity:.35}}
/* Pipeline: three stages, the video sitting in Ready */
.kp-row{grid-template-columns:repeat(3,1fr)}
.kp-row .on{background:rgba(212,255,79,.1)}.kp-row .on b{color:#D4FF4F}
.kp-row .on i{background:#D4FF4F;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.is-in .kp-row .on i{transform:none;transition-delay:.3s}
@media(max-width:760px){.wc-ideas{--w:176px}.wc-analytics{--w:166px}.wc-ideas .k-big{font-size:calc(20px*var(--cs))}.ki-row{display:none}}
/* 4 Nov (round four): the three cards now copy the real app. */
/* Saved ideas: SavedIdeas.tsx card + the Film plan pop-up's three tabs, cycling */
.wc-ideas{--w:300px}
.si-from{display:inline-flex;align-items:center;gap:calc(6px*var(--cs));padding:calc(4px*var(--cs)) calc(10px*var(--cs));border-radius:999px;background:rgba(108,215,157,.12);border:1px solid rgba(108,215,157,.3);color:#6CD79D;font-size:calc(11.5px*var(--cs));font-weight:600}
.si-from svg{width:calc(13px*var(--cs));height:calc(13px*var(--cs));stroke-width:2.2}
.si-title{font-size:calc(22px*var(--cs));margin-top:calc(10px*var(--cs))}
.si-why{margin-top:calc(10px*var(--cs));padding-left:calc(10px*var(--cs));border-left:2px solid rgba(255,255,255,.18);font-size:calc(12.5px*var(--cs));line-height:1.4;color:rgba(241,238,232,.75)}
.si-why small,.si-pane small{display:block;font-size:calc(9.5px*var(--cs));font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(241,238,232,.45);margin-bottom:calc(2px*var(--cs))}
.si-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:calc(14px*var(--cs));padding:calc(3px*var(--cs));border-radius:calc(11px*var(--cs));background:rgba(255,255,255,.06)}
.si-tabs span:not(.si-pill){position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:calc(5px*var(--cs));padding:calc(6px*var(--cs)) 0;font-size:calc(11px*var(--cs));font-weight:600;color:rgba(241,238,232,.5);white-space:nowrap;transition:color .4s}
.si-tabs span.on{color:#F1EEE8}
.si-tabs svg{width:calc(12px*var(--cs));height:calc(12px*var(--cs));stroke-width:2}
.si-pill{position:absolute;top:calc(3px*var(--cs));bottom:calc(3px*var(--cs));left:calc(3px*var(--cs));width:calc((100% - 6px*var(--cs))/3);border-radius:calc(8px*var(--cs));background:rgba(255,255,255,.12);transform:translateX(calc(var(--tab,0)*100%));transition:transform .55s cubic-bezier(.22,1,.36,1)}
.si-pane{position:relative;height:calc(40px*var(--cs));margin-top:calc(10px*var(--cs))}
.si-pane div{position:absolute;inset:0;font-size:calc(14px*var(--cs));font-weight:600;line-height:1.3;opacity:0;transform:translateY(calc(6px*var(--cs)));transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.si-pane div.on{opacity:1;transform:none;transition-delay:.12s}
/* AI editing: the six real steps, ticked one after another */
.wc-edit{--w:310px}
.ke-list{list-style:none;margin:calc(12px*var(--cs)) 0 0;padding:0;display:grid;gap:calc(6px*var(--cs));font-size:calc(12px*var(--cs))}
.ke-list li{display:flex;align-items:center;gap:calc(8px*var(--cs));color:rgba(241,238,232,.4)}
.ke-list i{flex:none;width:calc(15px*var(--cs));height:calc(15px*var(--cs));border-radius:50%;border:1.5px solid rgba(241,238,232,.22);display:grid;place-items:center;transition:background .4s,border-color .4s}
.ke-list i svg{width:calc(9px*var(--cs));height:calc(9px*var(--cs));stroke:#141416;stroke-width:3.4;opacity:0;transition:opacity .3s}
.ke-list .done{transition:color .4s}
.is-in .ke-list .done{color:rgba(241,238,232,.8);transition-delay:calc(var(--d)*.22s + .15s)}
.is-in .ke-list .done i{background:#6CD79D;border-color:#6CD79D;transition-delay:calc(var(--d)*.22s + .15s)}
.is-in .ke-list .done i svg{opacity:1;transition-delay:calc(var(--d)*.22s + .2s)}
.ke-list .now{color:#F1EEE8;font-weight:600}
.ke-list .now i{border-color:#C3AEFF;border-top-color:transparent;animation:spin 1s linear infinite}
/* Pipeline: VideosPage's board, three of its columns */
.wc-pipeline{--w:430px}
.pb-title{font-size:calc(19px*var(--cs));margin-bottom:calc(12px*var(--cs))}
.pb-board{display:grid;grid-template-columns:1fr 1fr 1.12fr;gap:calc(10px*var(--cs))}
.pb-col{display:grid;align-content:start;gap:calc(5px*var(--cs));min-width:0}
.pb-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.pb-head b{font-size:calc(10.5px*var(--cs));color:rgba(241,238,232,.55)}
.pb-chip{display:inline-flex;align-items:center;gap:calc(4px*var(--cs));padding:calc(3px*var(--cs)) calc(7px*var(--cs));border-radius:999px;font-size:calc(10px*var(--cs));font-weight:700;white-space:nowrap;color:#141416}
.pb-chip svg{width:calc(11px*var(--cs));height:calc(11px*var(--cs));stroke-width:2.2}
.ft .pb-chip{background:#C9CCD3}.ai .pb-chip{background:#C3AEFF}.rv .pb-chip{background:#D4FF4F}
.pb-col small{font-size:calc(9.5px*var(--cs));color:rgba(241,238,232,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-line{display:block;height:2px;border-radius:2px;opacity:.85}.ft .pb-line{background:#C9CCD3}.ai .pb-line{background:#C3AEFF}.rv .pb-line{background:#D4FF4F}
.pb-empty{padding:calc(14px*var(--cs)) 0;text-align:center;font-size:calc(9.5px*var(--cs));color:rgba(241,238,232,.35)}
.pb-card{margin-top:calc(3px*var(--cs));padding:calc(8px*var(--cs));border-radius:calc(10px*var(--cs));background:rgba(255,255,255,.07);border:1px solid rgba(212,255,79,.55);display:grid;gap:calc(5px*var(--cs));opacity:0;transform:translateX(calc(-26px*var(--cs)));transition:opacity .5s,transform .8s cubic-bezier(.22,1,.36,1)}
.is-in .pb-card{opacity:1;transform:none;transition-delay:.3s}
.pb-card b{font-size:calc(11.5px*var(--cs));line-height:1.2}
.pb-tags{display:flex;align-items:center;gap:calc(5px*var(--cs));font-size:calc(9.5px*var(--cs));color:rgba(241,238,232,.6)}
.pb-tags em{width:calc(7px*var(--cs));height:calc(7px*var(--cs));border-radius:2px;background:#E1306C}
.pb-btn{justify-self:start;display:inline-flex;align-items:center;gap:calc(4px*var(--cs));padding:calc(3px*var(--cs)) calc(9px*var(--cs));border-radius:999px;background:#D4FF4F;color:#141416;font-size:calc(10px*var(--cs));font-weight:700}
.pb-btn svg{width:calc(10px*var(--cs));height:calc(10px*var(--cs));stroke-width:3}
.wc-pipeline{right:1.5%}
@media(max-width:760px){.wc-ideas{--w:176px}.si-why,.si-tabs,.si-pane{display:none}.si-title{font-size:calc(18px*var(--cs))}}
@media(prefers-reduced-motion:reduce){.si-pill,.si-pane div,.ke-list *,.pb-card{transition:none!important;animation:none!important}}
/* fixes: room for the tabs and the board's labels */
.wc-ideas{--w:330px}
.si-tabs span:not(.si-pill){font-size:calc(10.5px*var(--cs));gap:calc(4px*var(--cs));min-width:0}
.si-pane div{transition:opacity .18s,transform .3s}
.si-pane div.on{transition:opacity .45s .2s,transform .55s .2s cubic-bezier(.22,1,.36,1)}
.ke-list{margin-top:calc(16px*var(--cs))}
.wc-pipeline{--w:480px;right:1%}
.pb-board{grid-template-columns:.95fr .85fr 1.2fr;gap:calc(12px*var(--cs))}
.pb-chip{font-size:calc(9.5px*var(--cs));padding:calc(3px*var(--cs)) calc(6px*var(--cs))}
@media(max-width:1300px) and (min-width:761px){.wc-pipeline{--w:440px}}
.wc-edit .ke-list{margin-top:calc(18px*var(--cs))}
/* Narrower pipeline (Roman, 4 Nov): two of the board's columns, With the AI and Ready for your review. */
.wc-pipeline{--w:370px;right:2.5%}
.pb-board{grid-template-columns:1fr 1.15fr}
@media(max-width:1300px) and (min-width:761px){.wc-pipeline{--w:350px}}
/* Pipeline back to three stages, with the app's short stage names so they fit (Roman, 4 Nov). */
.wc-pipeline{--w:390px;right:2.5%}
.pb-board{grid-template-columns:1fr 1fr 1.3fr;gap:calc(10px*var(--cs))}
@media(max-width:1300px) and (min-width:761px){.wc-pipeline{--w:370px}}
/* Third section, Alora in action (Roman, 4 Nov, like Reelfolio's second section).
   The black page from the first scroll becomes the screen of a Mac window and
   the real app plays in it: four walkthroughs built from the app's own parts,
   chosen with the tabs underneath. Sample content only. */
.feature-panel,.closing{display:none}
.inaction{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;padding-top:clamp(96px,13vh,124px);gap:clamp(14px,2vh,22px);pointer-events:none}
.inaction>*{opacity:0}
.inaction h2{font-size:clamp(28px,2.6vw,42px);line-height:1;letter-spacing:-.045em;font-weight:700;color:#16161a}
.inaction h2 span{color:#8b8a86}
.device{--dw:min(1180px,82vw,calc((100vh - 340px)*1.6));width:var(--dw);border-radius:22px;padding:0 10px 10px;background:linear-gradient(#e9e7e2,#dddbd5);box-shadow:0 1px 0 #fff inset,0 40px 90px -30px rgba(20,20,30,.45),0 2px 8px rgba(20,20,30,.08);pointer-events:auto}
.dev-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 6px}
.dev-bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.dev-bar i:nth-child(2){background:#FEBC2E}.dev-bar i:nth-child(3){background:#28C840}
.dev-bar b{flex:1;text-align:center;margin-right:46px;font-size:12.5px;font-weight:600;color:#55544f}
.dev-screen{width:100%!important;border-radius:12px!important;border:0!important;box-shadow:none!important;background:#05070c}
.ia-cap{margin:9px 0 0!important;min-height:1.4em!important;font-size:13px!important;color:#55544f!important;text-align:center}
.ia-tabs{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(20,20,26,.06);pointer-events:auto}
.ia-tab{all:unset;position:relative;cursor:pointer;overflow:hidden;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;color:#6d6c68;transition:color .3s,background .3s}
.ia-tab:hover{color:#16161a}
.ia-tab.on{background:#16161a;color:#F5F4F1}
.ia-tab i{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:rgba(245,244,241,.25);opacity:0}
.ia-tab i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#F5F4F1;transform:scaleX(var(--pr,0));transform-origin:0 50%}
.ia-tab.on i{opacity:1}
.ia-tab:focus-visible{outline:2px solid #16161a;outline-offset:2px}
@media(max-width:760px){.inaction{padding-top:96px}.device{--dw:calc(100vw - 24px);border-radius:16px;padding:0 6px 6px}.dev-bar{height:26px}.dev-bar i{width:8px;height:8px}.ia-tabs{max-width:calc(100vw - 24px);overflow-x:auto}.ia-tab{padding:8px 13px;font-size:12.5px;white-space:nowrap}}

/* the window's frame grows in around the screen during the morph */
.device{background:linear-gradient(rgba(233,231,226,var(--bz,1)),rgba(221,219,213,var(--bz,1)));box-shadow:0 1px 0 rgba(255,255,255,var(--bz,1)) inset,0 40px 90px -30px rgba(20,20,30,calc(.45*var(--bz,1)))}
.dev-bar,.ia-cap{opacity:var(--bz,1)}
.ia-cap{max-width:none!important;width:100%}
/* Section 3 plays rendered films of the app (one per tab) instead of live pages. */
.dev-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#05070c}
.ia-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Third section (Roman, 6 Nov): everything Alora does as one-line glass pills around her.
   Fourth section: the names turn on a wheel around Alora at the right edge; the one in the
   middle shows its clip and text. The films are parked for later. */
.journey{height:2270svh}
.inaction{display:none}
.feats{position:absolute;inset:0;z-index:2;pointer-events:none;color:#F2F0EB}
.ft-glow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(150,128,255,.3),rgba(150,128,255,.07) 38%,transparent 64%);opacity:0;z-index:0}
.ft-head{position:absolute;z-index:6;left:16px;right:16px;top:max(140px,17vh);max-width:620px;margin:0 auto;text-align:center;opacity:0}
.ft-head h2{margin:0;font-size:clamp(30px,2.9vw,46px);line-height:1.04;letter-spacing:-.045em;font-weight:700;text-wrap:balance}
.ft-head p{margin:10px auto 0;max-width:52ch;font-size:var(--read);line-height:1.45;letter-spacing:-.01em;color:#c3c1bb;text-wrap:balance}
.fps{position:absolute;inset:0}
.fp{--pill:1;--dim:0;position:absolute;left:0;top:0;margin:0;white-space:nowrap;font-size:44px;line-height:1;letter-spacing:-.035em;font-weight:700;transform-origin:100% 50%;opacity:0;will-change:transform,opacity}
.fp span{display:block;padding:.42em .95em;border-radius:999px;border:2px solid rgba(255,255,255,calc(.12*var(--pill)));background:rgba(22,22,30,calc(.72*var(--pill)));box-shadow:0 18px 40px -16px rgba(0,0,0,calc(.9*var(--pill))),inset 0 1px 0 rgba(255,255,255,calc(.08*var(--pill)));color:color-mix(in srgb,#F2F0EB calc(100% - var(--dim)*45%),#6f6d78)}
.fds{position:absolute;inset:0}
.fd{position:absolute;inset:0;opacity:0}
.fd-media{position:absolute;border-radius:16px;overflow:hidden;background:#0b0b0f;border:1px solid #ffffff1a;box-shadow:0 40px 80px -30px #000}
.fd-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-body{position:absolute;margin:0;text-align:right;font-size:clamp(17px,1.45vw,23px);line-height:1.45;letter-spacing:-.01em;color:#a7a5a0;text-wrap:pretty}
/* The team clip: a small team list where people get invited (initials only, no faces). */
@media(max-width:760px){.ft-head{top:104px;max-width:none}.ft-head h2{font-size:27px}.ft-head p{font-size:16px;line-height:1.5;letter-spacing:normal}.fd-body{font-size:13.5px}}
/* Roman, 6 Nov: pills carry an icon and a soft shadow (the light sweep was dropped); the
   clip sits in a lit window so it reads on the black page. */
.fp span{display:flex;align-items:center;gap:.42em;background:linear-gradient(180deg,rgba(255,255,255,calc(.07*var(--pill))),rgba(255,255,255,0) 60%),rgba(22,22,30,calc(.82*var(--pill)));border-color:rgba(255,255,255,calc(.16*var(--pill)));box-shadow:0 22px 44px -14px rgba(0,0,0,calc(.95*var(--pill))),0 6px 14px rgba(0,0,0,calc(.55*var(--pill))),inset 0 1px 0 rgba(255,255,255,calc(.1*var(--pill)))}
.fp svg{flex:none;width:.86em;height:.86em;fill:none;stroke:#c9bdff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:var(--pill)}
.fd-media{padding-top:26px;background:#1c1c24;border:1px solid rgba(255,255,255,.26);box-shadow:0 0 0 6px rgba(255,255,255,.035),0 30px 90px -20px rgba(140,120,255,.5),0 0 120px -30px rgba(140,120,255,.35)}
.fd-media video{top:26px;height:calc(100% - 26px);filter:brightness(1.3) contrast(1.06)}
.fd-bar{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:6px;padding-left:12px;background:#24242d;border-bottom:1px solid rgba(255,255,255,.08)}
.fd-bar i{width:9px;height:9px;border-radius:50%;background:#4a4a55}
.fd-body{color:#c3c1bb}
/* Fourth section (Roman, 6 Nov): one block per feature on the left (name, clip, text) that
   swings around half of Alora on the right edge like a wheel. */
.fd{inset:auto;left:0;top:0;display:flex;flex-direction:column;gap:20px;will-change:transform,opacity}
.fd-head{display:flex;flex-direction:column;gap:10px}
.fd-eye{font-size:12px;letter-spacing:.18em;color:#8b8a86;font-weight:600;font-variant-numeric:tabular-nums}.fd-eye b{color:#F2F0EB;font-weight:600}
.fd-ttl{margin:0;font-size:clamp(30px,min(3.7vw,7.4vh),60px);line-height:1.04;letter-spacing:-.045em;font-weight:700;white-space:normal;text-wrap:balance;color:#F4F2EE}
.fd .fd-media{position:relative;left:auto;top:auto;width:var(--vw,100%);height:var(--vh);flex:none;box-shadow:0 40px 80px -40px #000,0 0 80px -30px rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
/* Body text, one size: the features' (Roman, 9 Nov). */
:root{--read:clamp(18px,1.65vw,25px)}
.fd .fd-body{position:static;margin:0;max-width:52ch;text-align:left;font-size:var(--read);line-height:1.45;letter-spacing:-.01em;color:#c3c1bb}
@media(max-width:760px){.fd{gap:12px}.fd-ttl{font-size:28px;white-space:normal}.fd-eye{font-size:10.5px}.fd .fd-body{font-size:16px;line-height:1.5;letter-spacing:normal}}
/* Roman, 6 Nov: the clip window gets a layered shadow and a soft rim of light. */
.fd .fd-media{border-color:rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px rgba(0,0,0,.6),0 30px 60px -18px rgba(0,0,0,.95),0 70px 120px -40px rgba(0,0,0,.9),0 0 110px -30px rgba(255,255,255,.14)}
.fd .fd-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 22%,transparent 80%,rgba(0,0,0,.25));z-index:3}
/* Roman, 6 Nov: a soft purple glow behind the clip that stays clear of the text under it. */
.fd .fd-media{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px rgba(0,0,0,.6),0 14px 24px -18px rgba(0,0,0,.9),0 -18px 90px -26px rgba(140,118,255,.55),0 0 70px -24px rgba(140,118,255,.45)}
.fd{gap:26px}
/* Roman, 6 Nov: the glow behind the clip is barely there. */
.fd .fd-media{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(0,0,0,.6),0 14px 24px -18px rgba(0,0,0,.9),0 0 50px -22px rgba(140,118,255,.28)}
/* Download: the plain section after the six features */
.get{position:absolute;z-index:7;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;opacity:0;pointer-events:none}.get.is-on{pointer-events:auto}.get h2{font-size:clamp(32px,min(4.5vw,8.6vh),80px);line-height:1.03;letter-spacing:-.045em;font-weight:700;margin:0 0 14px}.get>p:not(.kicker){margin:0;color:#c3c1bb;max-width:44em;font-size:var(--read);line-height:1.45;letter-spacing:-.01em;text-wrap:balance}.get-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}.get-actions .pill{min-height:56px;padding:0 30px;font-size:17px;gap:12px}
@media(max-width:760px){.get h2{font-size:min(11.5vw,46px)}.get-actions{width:100%;max-width:340px;flex-direction:column}.get-actions .pill{min-height:58px;padding:0 26px;font-size:16px}}
/* Reviews (Roman, 9 Nov, after 21st.dev's vertical marquee): Alora on the left, the headline,
   and under it columns of plain cards rolling opposite ways (app.js moves them). The mouse over a
   column stops it, and the wheel then scrolls it. */
.revs{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none}
.rv-area{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;padding-top:clamp(92px,11.5vh,112px)}
.rv-area h2{margin:0;font-size:var(--rv-h,72px);line-height:1;letter-spacing:-.05em;font-weight:700;color:#F4F2EE;white-space:nowrap}
.rv-cols{flex:1;min-height:0;display:flex;gap:14px;margin-top:14px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 13%,#000 80%,transparent)}
.revs.is-on .rv-cols{pointer-events:auto}
.rv-col{flex:1;min-width:0;overflow:hidden}
.rv-track{display:flex;flex-direction:column;gap:14px;padding-bottom:14px;will-change:transform}
.rv-card{padding:18px;border-radius:16px;background:#101014;border:1px solid rgba(255,255,255,.1);transition:border-color .7s var(--ease)}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-pic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;object-fit:cover;background:hsl(var(--h,262) 18% 24%);color:#E9E6E0;font-size:16px;font-weight:600}
.rv-id{min-width:0}.rv-id b{display:block;color:#F2F0EB;font-size:14.5px;font-weight:600;line-height:1.3}
.rv-social{display:flex;flex-wrap:wrap;gap:1px 12px;margin-top:2px}
.rv-social a{position:relative;display:inline-flex;align-items:center;gap:5px;color:#a7a5a0;font-size:12.5px;line-height:1.5;transition:color .5s var(--ease)}
.rv-social svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv-social svg.is-tt{fill:currentColor;stroke:none}
.rv-q{margin:14px 0 0;color:#c3c1bb;font-size:var(--read);line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
@media(hover:hover){.rv-card:hover{border-color:rgba(255,255,255,.26)}.rv-social a:hover{color:#F2F0EB;text-decoration:underline;text-underline-offset:3px}}
@media(pointer:coarse){.rv-social a::after{content:"";position:absolute;inset:-10px -5px}}
/* On a phone all body text is 16px with 1.5 line spacing. */
@media(max-width:760px){.rv-area{padding-top:104px}.rv-q{font-size:16px;line-height:1.5;letter-spacing:normal}.get>p:not(.kicker){font-size:16px;line-height:1.5;letter-spacing:normal}}
@media(prefers-reduced-motion:reduce){.rv-card,.rv-social a{transition:none}}
#download{top:2130svh}
/* After the download scene: the FAQ and the footer, on their own sky so the dots carry on (Roman, 9 Nov). */
.after{position:relative;overflow:clip;background:#05070c}
.after-sky{position:sticky;top:0;display:block;width:100%;height:100vh;margin-bottom:-100vh;pointer-events:none}
.faq{position:relative;z-index:1;max-width:840px;margin:0 auto;padding:clamp(76px,10.5vh,120px) 24px clamp(70px,10vh,110px)}
.faq h2{margin:0 0 clamp(24px,3.8vh,42px);color:#F4F2EE;font-size:clamp(52px,6.6vw,100px);line-height:1;letter-spacing:-.05em;font-weight:700;text-align:center}
.faq h3{margin:0;font:inherit}
.faq-list{border-top:1px solid rgba(255,255,255,.14)}
.faq-i{border-bottom:1px solid rgba(255,255,255,.14)}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:clamp(16px,2.3vh,23px) 0;border:0;background:none;color:#F2F0EB;font-size:clamp(20px,1.7vw,26px);font-weight:600;line-height:1.22;letter-spacing:-.025em;text-align:left;transition:opacity .6s var(--ease)}
.faq-q>span{transition:transform .7s var(--ease)}
.faq-plus{position:relative;flex:none;width:.72em;height:.72em;transition:transform .7s var(--ease)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;border-radius:2px;background:currentColor}
.faq-plus::after{transform:rotate(90deg)}
.faq-i.is-open .faq-plus{transform:rotate(135deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.faq-i.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{min-height:0;overflow:hidden}
.faq-a p{margin:0;padding:0 56px clamp(20px,2.8vh,28px) 0;color:#c3c1bb;font-size:var(--read);line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
@media(hover:hover){.faq-q:hover>span{transform:translateX(8px)}.faq-q:hover .faq-plus{transform:scale(1.18)}.faq-i.is-open .faq-q:hover .faq-plus{transform:rotate(135deg) scale(1.18)}}
@media(max-width:760px){.faq{padding-left:20px;padding-right:20px}.faq-q{font-size:19px;gap:16px}.faq-a p{padding-right:0;font-size:16px;line-height:1.55;letter-spacing:normal}}
@media(prefers-reduced-motion:reduce){.faq-q,.faq-q>span,.faq-plus,.faq-a{transition:none}}
.motion-calm :is(.faq-q,.faq-q>span,.faq-plus,.faq-a){transition:none}
/* Phones: one heading size and a menu button big enough to tap. */
@media(max-width:760px){.nav{min-height:56px}.nav .pill{min-height:44px;padding:0 16px;font-size:13px}.overview h2{font-size:27px}.fd-ttl{font-size:34px;line-height:1.08}.fd-eye{font-size:12px}}
/* Roman, 11 Nov: bigger headlines in the features on phones. */
/* Roman, 11 Nov: a fuller headline that fills the phone's width on two lines, and the line under it as wide. */
.ft-head{max-width:900px}
@media(max-width:760px){.ft-head{padding-left:0!important;padding-right:0!important}.ft-head h2{font-size:min(44px,10.6vw);line-height:1.02}.ft-head p{font-size:17px;max-width:none;margin-top:12px}}
/* Touch screens: small text links get a larger tap area without changing how they look. */
@media(pointer:coarse){.nav .pill{min-height:44px}.nav .brand,.nav nav a,footer a,footer .text-button{position:relative}.nav .brand::after,.nav nav a::after,footer a::after,footer .text-button::after{content:"";position:absolute;inset:-14px -9px}}
/* Upright tablets: the stacked layout (app.js "stack"), with type sized for the extra room. */
@media(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:10/11){:root{--read:20px}.hero-copy h1{font-size:clamp(60px,8.4vw,92px)}.overview{left:12%;right:12%}.overview h2,.ft-head h2,.fd-ttl{font-size:clamp(38px,5.2vw,52px)}.fd-ttl{white-space:normal}.ft-head{top:104px}.get h2{font-size:clamp(46px,6.4vw,66px)}.wc-ideas{left:4%;top:8.4%}.wc-analytics{right:4%;top:8.4%}.wc-edit{left:3%;top:47%}.wc-schedule{right:3%;top:44%}.wc-pipeline{right:3%;top:63%}}
/* Short upright phones: keep the two cards clear of the writing bar. */
@media(max-width:760px) and (max-height:620px){.wc-ideas{top:51%}.wc-analytics{top:53%}}
/* The testimonials scene is off until the reviews are real (REVIEWS_SAMPLE in app.js); the scroll is 3.2 screens shorter. */
@media(max-width:1100px){footer{flex-wrap:wrap;justify-content:center;gap:24px}}
body.no-reviews .revs{display:none}body.no-reviews .journey{height:1950svh}body.no-reviews #download{top:1810svh}
/* The top bar's links (Roman, 9 Nov): the page fades out, moves, and the section fades in. */
#testimonials{top:1810svh}
body.no-reviews #testimonials,body.no-reviews a[href="#testimonials"]{display:none}
.go-veil{position:fixed;inset:0;z-index:19;background:#050506;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1)}
.go-veil.on{opacity:1;pointer-events:auto}
.go-veil.leaving{transition-duration:.62s}
@media(max-width:900px){.nav nav{gap:18px}}
.nav-menu{display:none;flex:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-left:4px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink)}
.nav-menu i{display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-menu[aria-expanded="true"] i:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav-menu[aria-expanded="true"] i:last-child{transform:translateY(-3.3px) rotate(-45deg)}
.nav-sheet{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;padding:8px;border:1px solid #ffffff20;border-radius:24px;background:#101014;box-shadow:0 24px 50px -18px #000}
.nav-sheet[hidden]{display:none}
.nav-sheet a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:14px;font-size:16px;color:var(--ink)}
.nav-sheet a:active{background:#ffffff14}
@media(max-width:760px){.nav-menu{display:flex}}
@media(min-width:761px){.nav-sheet{display:none}}
.motion-calm .go-veil{transition:none}
@media(prefers-reduced-motion:reduce){.go-veil{transition:none}}
.rv-sample{margin:12px 0 0;font-size:clamp(16px,1.25vw,19px);line-height:1.3;font-weight:500;color:#F2F0EB}
/* A short list of reviews: rows of cards, each seen once, nothing rolling. */
.rv-cols.rv-still{flex:none;display:grid;grid-template-columns:repeat(var(--rv-n,3),minmax(0,1fr));margin-top:clamp(18px,3vh,30px);-webkit-mask-image:none;mask-image:none}
@media(max-width:760px) and (max-height:760px){.rv-still{gap:10px;margin-top:12px}.rv-still .rv-card{padding:12px 14px}.rv-still .rv-q{margin-top:8px;font-size:14.5px;line-height:1.4}.rv-still .rv-pic{width:30px;height:30px}}
/* Real iPhones (Roman, 9 Nov). Safari's toolbar hides as you scroll, so the scene is painted down past the box it is laid out in. */
.lvh-probe{position:absolute;top:0;left:0;width:0;height:100lvh;visibility:hidden;pointer-events:none}
/* Under the shrunk page's shadow, so the shadow fades into the strip instead of stopping at a white line (Roman, 11 Nov). */
.lvh-strip{position:absolute;z-index:-1;left:0;right:0;top:100%;height:calc(100lvh - 100svh);background:#05070c;pointer-events:none}
.planet,#specks{height:100lvh}
@supports (overflow:clip) and (height:100lvh){.journey{overflow:clip}.stage{overflow:visible}}
/* Phones: all five cards, small and floating around a big Alora. */
@media(max-width:760px){
 .world-panels{--cs:.92!important}
 .world-panels .wc{width:clamp(150px,43vw,178px);padding:10px 12px 11px;border-radius:16px}
 .wc header{margin-bottom:5px}
 .wc-ideas{left:3%;right:auto;top:23.5%}.wc-analytics{left:auto;right:3%;top:27%}
 .wc-edit{display:block;left:2%;right:auto;top:53%}.wc-schedule{display:block;left:auto;right:2%;top:47%}
 .wc-pipeline{display:block;left:calc(50% - 21.5vw);right:auto;top:71%}
 .wc .k-label,.world-panels .wc .ke-list,.wa-days,.world-panels .wc .ns-week,.pb-board,.wa-top small,.world-panels .wc .si-from,.world-panels .wc .ns-plats{display:none!important}
 .wa-bars{height:20px;margin-top:5px;gap:4px}
 .wc .k-big,.si-title,.pb-title,.ns-top strong,.wa-top strong{font-size:14.5px!important;line-height:1.18}
 .wc-edit .k-top{gap:6px}.wc-edit .k-pill{display:none}
 .ask-btn:nth-of-type(1){display:none}
}
@media(max-width:760px) and (max-height:620px){.wc-ideas{top:26%}.wc-analytics{top:29%}.wc-edit{top:54%}.wc-schedule{top:48%}.wc-pipeline{top:68.5%}}
/* Upright screens: the six features as an even grid. */
@media(max-width:1100px) and (max-aspect-ratio:10/11){
 .fp{--ps:.42;width:calc((50vw - 26px)/var(--ps));white-space:normal}
 .fp span{gap:.5em;padding:.62em .7em;border-radius:.85em;border-width:3px;line-height:1.14;letter-spacing:-.02em;min-height:3.75em}
 .fp svg{width:1.05em;height:1.05em}
}
/* Phones: small floating tags around a big Alora. */
/* Roman, 12 Nov: narrow computer windows get this phone layout too, so the names wrap inside their box instead of running out of it. */
@media(max-width:760px){.fp{--ps:.385;width:max-content;max-width:calc(min(178px,46vw)/var(--ps));white-space:normal}.fp span{min-height:0;padding:.62em .74em;gap:.5em;border-radius:.95em}}
/* Phones: the reviews are a list you can swipe, starting fully in view. */
/* Roman, 11 Nov: the swiped list fades out at the bottom and, once it has moved, at the top too. */
.rv-cols.rv-list{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--tf,0px),#000 calc(100% - 84px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 var(--tf,0px),#000 calc(100% - 84px),transparent)}
.rv-list .rv-col{display:flex;flex-direction:column;gap:12px;padding-bottom:44px;overflow-y:auto;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}
.rv-list .rv-col::-webkit-scrollbar{display:none}
/* Phones: each tag is layered on its own, so it can come out from behind Alora and end in front of her. Text keeps clear of the screen edges. */
@media(max-width:760px){.feats{z-index:auto}.ft-head{padding-left:28px;padding-right:28px}.ft-head p{text-wrap:balance}}
/* Short phones: smaller tags, so the group has room. */
@media(max-width:760px){.fp-short .fp{--ps:.32;max-width:calc(150px/var(--ps))}}
/* Upright iPads: the five cards were scaled down until their text was 7 to 10 pixels. Fewer lines, readable sizes. */
@media(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:10/11){
 .world-panels{--cs:1.08!important}
 .world-panels .wc{width:clamp(236px,31vw,310px)}
 .world-panels .wc .si-why,.world-panels .wc .si-tabs,.world-panels .wc .si-pane,.world-panels .wc .ke-list,.world-panels .wc .ns-week,.world-panels .wc .pb-board,.world-panels .wc .k-label,.wa-days{display:none!important}
 .wc header{font-size:14px}.wc header span{font-size:13px}
 .wc .k-big,.si-title,.pb-title,.ns-top strong,.wa-top strong{font-size:21px!important;line-height:1.15}
 .wc .si-from,.wc .k-pill,.ns-p,.wa-up{font-size:13px!important}
 .wa-bars{height:44px}
}
/* Safari will not draw a page below its own bottom area, so on phones Alora fades out before that line instead of ending in a hard edge. */
@media(max-width:760px){.planet{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--vb,100svh) - 110px),transparent var(--vb,100svh));mask-image:linear-gradient(180deg,#000 calc(var(--vb,100svh) - 110px),transparent var(--vb,100svh))}}