/* Vitals-style Tellie homepage mockup. Layout classes are vs-* or plain; the
engine owns sh-* (stagehand-demo.css), which is only re-sized here, scoped. */
:root{
--bg:#ffffff; --bg-soft:#f5f5f7; --bg-soft-hi:#e8e8ed; --text:#1d1d1f; --muted:#6e6e73; --faint:#86868b;
--line:#e5e5e7; --accent:#ff7a00; --accent-dark:#d96400; --plum:#6d3f7d;
--card-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.06);
--glass:linear-gradient(158deg,#cfe3f7 0%,#9dc2e8 42%,#6d9bd4 100%);
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",system-ui,sans-serif;
--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
/* motion: entrance + scroll reveal */
.rise{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
.rise.d1{animation-delay:.12s}.rise.d2{animation-delay:.24s}.rise.d3{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
/* hidden only when scripts run, so crawlers and no-JS visitors always see every section */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* strip + nav */
.strip{background:var(--bg-soft);font-size:13px;color:var(--muted)}
.strip .wrap{display:flex;gap:22px;align-items:center;height:36px;white-space:nowrap;overflow:hidden}
.strip b{color:var(--text);font-weight:500}
.strip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px;vertical-align:1px;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.vs-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s}
.vs-nav.scrolled{border-bottom-color:rgba(0,0,0,.07)}
.vs-nav .wrap{display:flex;align-items:center;height:62px;gap:34px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.2px}
.brand img{width:28px;height:28px;border-radius:7px}
.links{display:flex;gap:28px;font-size:14px;color:#424245}
.links a:hover{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:999px;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-lg{font-size:17px;padding:16px 28px}
.btn-ghost{background:var(--bg-soft);color:var(--text)}
.btn-ghost:hover{background:var(--bg-soft-hi)}
.apple{width:15px;height:15px;fill:currentColor;flex:none}
/* hero */
.hero{text-align:center;padding:96px 32px 56px}
h1{font-size:68px;line-height:1.06;font-weight:600;letter-spacing:-2.2px;margin:0 auto}
h1 .ico{display:inline-block;width:76px;height:76px;border-radius:18px;vertical-align:-12px;margin:0 6px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.lede{font-size:22px;line-height:1.5;color:var(--muted);max-width:800px;margin:28px auto 0}
.ctas{display:flex;justify-content:center;gap:14px;margin-top:40px}
.offer{margin-top:22px;font-size:15px;color:var(--muted)}
.offer .hot{color:var(--accent-dark);font-weight:600}
.fine{margin-top:6px;font-size:14px;color:var(--faint)}
.fine a{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
/* app window + tabs */
.window{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--card-shadow);overflow:hidden}
.titlebar{display:flex;align-items:center;height:56px;padding:0 18px;border-bottom:1px solid var(--line);position:relative}
.lights{display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.tabs{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;background:var(--bg-soft);padding:4px;border-radius:12px;font-size:13px;color:#424245}
.tab{position:relative;padding:6px 14px;border-radius:9px;white-space:nowrap;overflow:hidden;transition:background .25s,color .25s}
.tab:hover{color:var(--text)}
.tab.on{background:#fff;color:var(--text);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tab i{position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.tab.on i{animation:tabprog var(--dur,9s) linear forwards}
.tabs.paused .tab.on i{animation:none;transform:scaleX(0)}
@keyframes tabprog{to{transform:scaleX(1)}}
.win-cap{font-size:14px;color:var(--faint);text-align:center;margin-top:18px}
/* the Mac screen that hosts a mounted engine (notch = absolute, screen = fixed height) */
.vs-screen{position:relative;overflow:hidden;background:var(--glass)}
.hero-screen{height:520px}
.menubar{position:relative;z-index:1;height:30px;background:rgba(248,248,250,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;padding:0 16px;gap:16px;font-size:13px;color:#1f1f22}
.menubar .apple{width:13px;height:13px}
.menubar .r{margin-left:auto;font-variant-numeric:tabular-nums}
.vs-mount{position:absolute;top:0;left:50%;transform:translateX(-50%);width:62%;z-index:3;transition:opacity .6s ease,filter .6s ease}
.vs-mount .sh-demo{margin:0}
.vs-mount .sh-stage{border-radius:0 0 18px 18px;padding-top:18px;box-shadow:0 26px 52px -8px rgba(0,0,0,.5)}
.vs-mount .sh-demo[data-sh-loop] .sh-runway{pointer-events:auto}
.vs-mount .sh-frame{height:236px;padding:0 34px}
.vs-mount .sh-frame::before,.vs-mount .sh-frame::after{content:"";position:absolute;left:0;right:0;height:50px;pointer-events:none;z-index:5}
.vs-mount .sh-frame::before{top:0;background:linear-gradient(to bottom,#22222a,rgba(34,34,42,0))}
.vs-mount .sh-frame::after{bottom:0;background:linear-gradient(to top,#141417,rgba(20,20,23,0))}
.vs-mount .sh-reading{padding:88px 0}
.vs-mount .sh-h{font-size:24px}
.vs-mount .sh-body{font-size:18px;line-height:1.5}
.vs-mount .sh-krow{font-size:13px}
.vs-mount .sh-debrief{z-index:8}
.zoomtile{position:absolute;bottom:22px;right:22px;width:210px;height:128px;border-radius:14px;background:linear-gradient(135deg,#3a3a3c,#1c1c1e);display:flex;align-items:flex-end;padding:10px 12px;font-size:12px;color:#d1d1d6;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.zoomtile .face{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18)}
.zoomtile span{position:relative}
.sharing{position:absolute;top:44px;left:50%;transform:translate(-50%,-8px);z-index:4;background:#34c759;color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;opacity:0;transition:opacity .4s,transform .4s var(--ease);display:flex;gap:8px;align-items:center;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.sharing span{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
.hero-screen.zoomview .sharing{opacity:1;transform:translate(-50%,0)}
.hero-screen.zoomview .vs-mount{opacity:0;filter:blur(6px)}
/* the chip that names what just happened */
.vs-chip{position:absolute;left:24px;bottom:24px;z-index:6;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font-size:15px;font-weight:600;padding:10px 16px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease);max-width:360px}
.vs-chip.on{opacity:1;transform:none}
/* live transcript: what you're saying right now, in step with the cursor */
.vs-live{position:absolute;left:50%;bottom:26px;transform:translate(-50%,10px);z-index:6;width:min(560px,86%);background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;padding:12px 18px 14px;box-shadow:0 18px 40px -12px rgba(20,10,40,.45);opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.vs-live.on{opacity:1;transform:translate(-50%,0)}
.vs-live .who{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:4px}
.vs-live .who:before{content:"";width:8px;height:8px;border-radius:50%;background:#ff3b30;animation:blink 1s infinite}
.vs-live .txt{display:block;font-size:19px;line-height:1.35;font-weight:500;color:#1d1d1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-live .txt b{color:var(--accent-dark);font-weight:700}
.hero-screen .vs-chip{bottom:auto;top:46px}
.zoomtile .rec{color:#ff453a;font-weight:600}
/* ad-lib bubble (same device /pro uses) */
.vs-said{position:absolute;right:24px;top:150px;z-index:6;width:260px;background:#fff;color:#1a1a17;border-radius:16px 16px 16px 4px;padding:12px 15px 13px;box-shadow:0 18px 40px -12px rgba(20,10,40,.45);opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 0;transition:opacity .22s ease,transform .22s var(--ease);pointer-events:none}
.vs-said.on{opacity:1;transform:none}
.vs-said .who{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a8a82;margin-bottom:3px}
.vs-said .txt{display:block;font-size:15px;line-height:1.4;font-weight:500}
/* sections */
section.feat{padding:140px 32px 0}
/* section eyebrows, the /start style (Steve 2026-09-26): plum, uppercase, wide-spaced, no numbers.
Only four sections carry one (Voice follow, More features, Compare, Reviews) plus Stagehand's own. */
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#6b4a86;margin:0 0 14px}
.eyebrow .pro{letter-spacing:.04em;vertical-align:1px}
.pro{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--plum);border-radius:5px;padding:3px 6px;margin-left:8px;vertical-align:2px}
h2{font-size:48px;line-height:1.1;font-weight:600;letter-spacing:-1.4px;margin-top:10px}
.split h2{font-size:40px;letter-spacing:-1.1px;white-space:nowrap}
.body{font-size:19px;line-height:1.6;color:var(--muted);margin-top:18px}
.body + .body{margin-top:14px}
.body strong{color:var(--text);font-weight:600}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.split.flip{grid-template-columns:1fr 1.1fr}
.split.flip .copy{order:2}
.center{text-align:center;max-width:900px;margin:0 auto}
/* 01 duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pane{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--card-shadow)}
.pane-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.pane-h .tag{margin-left:auto;font-weight:500;color:var(--faint)}
.pane-b{background:#131316;height:300px;position:relative;overflow:hidden}
.pane-b.scroller{padding:0 22px;color:#f2ecdd;font-size:16px;line-height:1.55;text-align:center}
.pane-b.scroller .roll{animation:roll 22s linear infinite;padding-top:120px}
@keyframes roll{to{transform:translateY(-62%)}}
.pane-b.scroller::before,.pane-b.scroller::after{content:"";position:absolute;left:0;right:0;height:70px;z-index:2;pointer-events:none}
.pane-b.scroller::before{top:0;background:linear-gradient(#131316,rgba(19,19,22,0))}
.pane-b.scroller::after{bottom:0;background:linear-gradient(rgba(19,19,22,0),#131316)}
.pane-b.tellie .sh-demo{margin:0}
.pane-b.tellie .sh-stage{border-radius:0;border:0;box-shadow:none;padding-bottom:0;height:300px}
.pane-b.tellie .sh-frame{height:300px;padding:0 20px}
.pane-b.tellie .sh-reading{padding:120px 0}
.pane-b.tellie .sh-h{font-size:17px}
.pane-b.tellie .sh-body{font-size:16px}
.pane-b.tellie .sh-bar,.pane-b.tellie .sh-drawer{display:none}
.pane-flag{position:absolute;left:50%;bottom:18px;transform:translate(-50%,8px);z-index:6;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:#3a2a2a;color:#ffb4a8;opacity:0;transition:opacity .3s,transform .3s var(--ease);white-space:nowrap}
.pane-flag.ok{background:#1f3a26;color:#8ee3a4}
.pane-flag.on{opacity:1;transform:translate(-50%,0)}
/* compare table */
.table{margin-top:48px;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--card-shadow)}
.table .row{display:grid;grid-template-columns:1.2fr 1fr 1.3fr;border-top:1px solid var(--line);font-size:15px;transition:background .2s}
.table .row:not(:first-child):hover{background:#fafafa}
.table .row:first-child{border-top:0;background:var(--bg-soft);font-weight:600;font-size:14px}
.table .row > div{padding:17px 24px}
.table .row > div:first-child{font-weight:600}
.table .row > div:nth-child(2){color:var(--faint)}
.table .row > div:nth-child(3):before{content:"✓";color:var(--accent);font-weight:700;margin-right:9px}
.table .row:first-child > div:nth-child(3):before{content:""}
.table .row .th{display:flex;align-items:center;gap:9px}
.table .row .th img{width:22px;height:22px;border-radius:5px}
.table .row .th .gray{width:22px;height:22px;border-radius:5px;background:#d1d1d6}
.askai{margin-top:18px;font-size:13px;color:var(--faint);text-align:center}
.askai span{margin:0 6px}
.askai.left{text-align:left;margin-top:22px}
.askai.left span:first-of-type{margin-left:10px}
/* 03 invisible */
.share{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--card-shadow)}
.mini-h{font-size:13px;font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);background:#fff;display:flex;white-space:nowrap}
.mini-h .rec{margin-left:auto;color:#ff3b30;font-weight:600;animation:blink 1.6s infinite}
.mini-b{height:260px;background:var(--glass);position:relative}
.mini-b .n{position:absolute;top:0;left:50%;transform:translateX(-50%);width:76%;height:92px;background:#131316;border-radius:0 0 14px 14px;padding:16px 16px;color:#f2ecdd;font-size:13px;line-height:1.5;text-align:center;overflow:hidden}
.mini-b .n span{display:block;animation:lines 6s ease-in-out infinite}
.mini-b .n .l2{animation-delay:.2s}
@keyframes lines{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mini-b .n.ghost{background:transparent;border:2px dashed rgba(255,255,255,.55);animation:ghost 3s ease-in-out infinite}
@keyframes ghost{0%,100%{opacity:.15}50%{opacity:.6}}
.mini-b .face{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:118px;height:118px;border-radius:50%;background:rgba(255,255,255,.45)}
/* 04 stagehand */
.sh-win{margin-top:48px;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--card-shadow)}
.take-screen{height:480px}
.take-screen .vs-said{top:160px}
.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.beat{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:relative;overflow:hidden;background:var(--bg-soft);border-radius:18px;padding:22px;transition:background .3s,box-shadow .3s}
.beat:hover{background:var(--bg-soft-hi)}
.beat.on{background:#fff;box-shadow:0 0 0 2px var(--plum),var(--card-shadow)}
.beat .num{width:26px;height:26px;border-radius:50%;background:#c9bccf;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:background .3s}
.beat.on .num,.beat.done .num{background:var(--plum)}
.beat h3{font-size:17px;letter-spacing:-.2px;white-space:nowrap}
.beat p{color:var(--muted);font-size:15px;margin-top:6px}
.beat .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--plum);transform:scaleX(0);transform-origin:left}
.beat.on .bar{animation:tabprog var(--dur,8s) linear forwards}
/* 05 privacy */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.tile{background:var(--bg-soft);border-radius:20px;padding:30px}
.tile h3{font-size:20px;letter-spacing:-.3px;margin-bottom:8px;white-space:nowrap}
.tile p{color:var(--muted);font-size:16px}
.tile .ic{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--accent-dark);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tile .ic svg{width:20px;height:20px}
/* 06 bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.bc{border:1px solid var(--line);border-radius:22px;padding:22px;background:#fff;box-shadow:var(--card-shadow);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.bc:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 50px rgba(0,0,0,.09)}
.bc .demo{height:170px;border-radius:14px;background:var(--bg-soft);margin-bottom:22px;display:flex;align-items:center;justify-content:center;padding:18px;position:relative;overflow:hidden}
.bc .demo.top{align-items:flex-start;padding-top:0}
.bc .demo.dark{background:#1c1c1e;padding:0}
.bc h3{font-size:19px;letter-spacing:-.3px;white-space:nowrap}
.bc p{color:var(--muted);font-size:15px;margin-top:6px}
/* presenter: two slides alternate, notes follow */
.deck-mini{position:relative;width:100%;height:100%}
.deck-mini .n{position:absolute;top:0;left:50%;transform:translateX(-50%);width:84%;height:44px;background:#0c0c0e;color:#f5f5f7;border-radius:0 0 12px 12px;font-size:12px;z-index:2;border:1px solid #2c2c2e;border-top:0}
.deck-mini .slide{position:absolute;inset:56px 18px 16px;background:#fff;border-radius:7px;font-weight:600;font-size:17px;letter-spacing:-.3px}
.deck-mini .a,.deck-mini .b{position:absolute;inset:0;display:flex;align-items:center;padding:0 14px}
.deck-mini .slide .a,.deck-mini .slide .b{padding:0 18px}
.deck-mini .a{animation:swapA 7s infinite}
.deck-mini .b{animation:swapB 7s infinite}
@keyframes swapA{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:translateX(-10px)}100%{opacity:1}}
@keyframes swapB{0%,42%{opacity:0;transform:translateX(10px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
/* take coach: the note arrives */
.coach{background:#fff;border-radius:12px;padding:14px 16px;font-size:14px;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.06);animation:coach 6s var(--ease) infinite}
.coach small{display:block;color:var(--plum);font-weight:600;font-size:12px;margin-bottom:4px}
@keyframes coach{0%{opacity:0;transform:translateY(14px)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
/* companion: the same words light up on each device */
.dev{display:flex;gap:14px;align-items:flex-end}
.dev > div{background:#0c0c0e;border:5px solid #2c2c2e;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px}
.dev .mac{width:150px;height:96px;border-radius:8px}
.dev .ipad{width:70px;height:92px;border-radius:9px;border-width:4px}
.dev .ph{width:38px;height:74px;border-radius:9px;border-width:3px;padding:6px 4px}
.dev i{display:block;height:5px;border-radius:3px;background:#3a3a3c;animation:devline 3s infinite}
.dev i:nth-child(2){animation-delay:.5s;width:80%}.dev i:nth-child(3){animation-delay:1s;width:60%}
@keyframes devline{0%,100%{background:#3a3a3c}30%{background:#ff9500}60%{background:#f2ecdd}}
/* pulse: rows drop under the notch */
.pulse{background:#0c0c0e;color:#f5f5f7;border-radius:0 0 16px 16px;padding:12px 16px;font-size:13px;width:88%;display:flex;flex-direction:column;gap:7px}
.pulse div{display:flex;gap:8px;align-items:center;opacity:0;animation:prow 8s infinite}
.pulse .r2{animation-delay:1.2s}.pulse .r3{animation-delay:2.4s}
@keyframes prow{0%{opacity:0;transform:translateY(-8px)}6%,70%{opacity:1;transform:none}80%,100%{opacity:0}}
.pulse .d{width:7px;height:7px;border-radius:50%;background:#34c759}
.pulse .d.o{background:var(--accent)}
.pulse u{color:#64d2ff;text-decoration:none;margin-left:auto}
/* files hop in turn */
.files{display:flex;gap:9px}
.files div{width:52px;height:66px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:11px;font-weight:600;color:var(--muted);animation:hop 5s var(--ease) infinite}
.files div:nth-child(2){animation-delay:.25s}.files div:nth-child(3){animation-delay:.5s}.files div:nth-child(4){animation-delay:.75s}.files div:nth-child(5){animation-delay:1s}
@keyframes hop{0%,20%,100%{transform:none}10%{transform:translateY(-10px)}}
/* stays where you put it: the notch window hops between displays */
.screens{position:relative;display:flex;gap:14px;align-items:flex-end}
.screens div{border-radius:6px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.screens .a{width:150px;height:92px}.screens .b{width:104px;height:68px}
.screens .nt{position:absolute;top:0;left:47px;width:56px;height:18px;background:#0c0c0e;border-radius:0 0 6px 6px;animation:hopdisp 6s var(--ease) infinite}
@keyframes hopdisp{0%,35%{transform:none}50%,85%{transform:translate(135px,24px) scale(.8)}100%{transform:none}}
/* voices */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.voice{border:1px solid var(--line);border-radius:20px;padding:26px;background:#fff}
.voice blockquote{font-size:17px;line-height:1.55;letter-spacing:-.1px}
.voice figcaption{margin-top:16px;font-size:14px;color:var(--muted)}
.voice figcaption b{color:var(--text);font-weight:600;display:block}
/* pricing */
.price{margin:48px auto 0;max-width:940px;border:1px solid var(--line);border-radius:26px;box-shadow:var(--card-shadow);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.price > div{padding:40px}
.price .pro-col{background:linear-gradient(180deg,#faf5fc,#f3eaf7)}
.price h3{font-size:15px;font-weight:600;color:var(--muted)}
.price .big{font-size:56px;font-weight:600;letter-spacing:-2px;margin:8px 0 2px}
.price .per{color:var(--muted);font-size:15px;display:block}
.price ul{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:11px;font-size:15px}
.price li{white-space:nowrap}
.price li:before{content:"✓";color:var(--accent);font-weight:700;margin-right:10px}
.price .pro-col li:before{color:var(--plum)}
.price .pro-col .big{color:var(--plum)}
.quiet{display:block;margin-top:14px;font-size:14px;color:var(--plum);font-weight:500}
.reqs{text-align:center;margin-top:22px;font-size:14px;color:var(--faint)}
/* FAQ, the Vitals pattern */
.faq{display:grid;grid-template-columns:4fr 7fr;gap:40px 80px;padding:150px 32px 0}
.faq-side{position:sticky;top:110px;align-self:start}
.faq-side h2{font-size:40px;letter-spacing:-1.04px;margin:0;white-space:nowrap}
.faq-side a{color:var(--text);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
.faq-list h3{font-size:15px;font-weight:600;color:var(--muted);margin:34px 0 12px}
.faq-list h3:first-child{margin-top:0}
.faq-list details{background:var(--bg-soft);border-radius:20px;padding:0 24px;margin-bottom:10px;transition:background .2s}
.faq-list details:hover{background:#efeff2}
.faq-list details[open]{padding-bottom:22px}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;font-size:17px;font-weight:600}
.faq-list summary::-webkit-details-marker{display:none}
.pm{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg-soft-hi);position:relative;transition:transform .3s var(--ease)}
.pm:before,.pm:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;border-radius:2px;background:var(--muted);transform:translate(-50%,-50%)}
.pm:after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .pm{transform:rotate(45deg)}
.faq-list details p{font-size:17px;line-height:1.6;color:var(--muted);max-width:60ch}
.faq-list code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:15px;background:#fff;border-radius:5px;padding:1px 5px;color:var(--accent-dark)}
/* final */
.final{margin:150px 0 0;padding:110px 0;background:var(--bg-soft);text-align:center}
.final h2{font-size:56px;letter-spacing:-1.8px}
.final .body{max-width:640px;margin:18px auto 0}
@media (prefers-reduced-motion:reduce){
*,*:before,*:after{animation:none!important;transition:none!important}
.rise,.reveal{opacity:1;transform:none}
}
/* phone */
@media (max-width:860px){
.wrap,section.feat,.hero,.faq{padding-left:16px;padding-right:16px}
.links,.nav-right .meta,.hide-sm{display:none}
h1{font-size:40px;letter-spacing:-1.2px}
h1 .ico{width:44px;height:44px;border-radius:11px;vertical-align:-7px}
.lede{font-size:18px}
.ctas{flex-direction:column;align-items:stretch}
.titlebar{height:auto;padding:10px 12px;flex-wrap:wrap;gap:10px}
.tabs{position:static;transform:none;overflow-x:auto;max-width:100%}
.hero-screen,.take-screen{height:470px}
.vs-mount{width:94%}
.vs-mount .sh-h{font-size:19px}.vs-mount .sh-body{font-size:15px}
.zoomtile{display:none}
.vs-said{right:12px;width:62%;top:120px}
h2,.split h2{font-size:32px;letter-spacing:-.8px}
.split,.split.flip,.duo,.share,.three,.bento,.voices,.price,.faq{grid-template-columns:1fr}
.split.flip .copy{order:0}
.beats{grid-template-columns:1fr 1fr}
.table .row{grid-template-columns:1fr 1fr 1fr;font-size:13px}
.table .row > div{padding:12px 10px}
.faq-side{position:static}.faq-side h2{font-size:32px}
.price li,.bc h3,.tile h3,.beat h3{white-space:normal}
.final h2{font-size:34px}
}
a.inl{color:var(--text);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
/* ---------- Stagehand demo emphasis: glow + push-in on the moments that matter ---------- */
#sh-take .vs-mount{transition:transform .8s var(--ease)}
.vid-glow{position:relative;z-index:9;border-radius:999px;animation:vglow 1s ease-in-out infinite;box-shadow:0 0 0 3px rgba(255,159,10,.95),0 0 22px 7px rgba(255,159,10,.55)}
@keyframes vglow{50%{box-shadow:0 0 0 4px rgba(255,159,10,1),0 0 34px 12px rgba(255,159,10,.7)}}
.vid-glow.g{box-shadow:0 0 0 3px rgba(52,199,89,.95),0 0 22px 7px rgba(52,199,89,.55);animation-name:vglowg}
@keyframes vglowg{50%{box-shadow:0 0 0 4px rgba(52,199,89,1),0 0 34px 12px rgba(52,199,89,.7)}}
.sh-h.vid-glow{width:fit-content;margin-left:auto;margin-right:auto;padding:0 12px;border-radius:10px}
/* ---------- footer ---------- */
footer{padding:80px 0 50px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:0}
.fgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px} /* Tellie, Learn, Compare, Made for, More */
.fcol{display:flex;flex-direction:column;gap:9px}
.fcol p{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.fcol a:hover,.fbar a:hover{color:var(--text)}
.fbar{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
.fbar span:last-child{display:flex;gap:20px}
@media (max-width:860px){
.fgrid{grid-template-columns:1fr 1fr}
.fbar{flex-direction:column}
}
/* ================= round 3 ================= */
/* ---------- Tellie understands: list + live prompter, in sync ---------- */
.und{padding:120px 32px 0}
.und h2{font-size:64px;letter-spacing:-2px;margin:0;text-align:center}
.und h2 .hot{color:var(--accent)}
.und-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;margin-top:52px;align-items:stretch}
.und-list{display:flex;flex-direction:column;gap:14px}
.und-grp{--c:#ff7a00;--t:rgba(255,122,0,.10);background:var(--bg-soft);border-radius:22px;padding:20px 22px 18px}
.und-grp.g2{--c:#28a745;--t:rgba(52,199,89,.12)}
.und-grp.g3{--c:#7b4fd0;--t:rgba(123,79,208,.11)}
.und-grp h3{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.gi{width:28px;height:28px;border-radius:9px;background:var(--c);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.gi svg{width:16px;height:16px}
.und-grp ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.und-grp li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500;color:var(--faint);padding:6px 10px;border-radius:10px;transition:color .4s,background .4s}
.und-grp li .st{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #c7c7cc;position:relative;transition:all .4s}
.und-grp li.now{color:var(--text);background:var(--t)}
.und-grp li.now .st{border-color:var(--c);box-shadow:0 0 0 4px var(--t);animation:stp 1s ease-in-out infinite}
@keyframes stp{50%{box-shadow:0 0 0 7px var(--t)}}
.und-grp li.done{color:var(--text)}
.und-grp li.done .st{background:var(--c);border-color:var(--c)}
.und-grp li.done .st:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.und-stage{position:relative;border-radius:24px;overflow:hidden;background:var(--glass);min-height:520px;box-shadow:var(--card-shadow)}
.und-mount{position:absolute;top:0;left:22px;right:22px}
.und-mount .sh-demo{margin:0}
.und-mount .sh-stage{border-radius:0 0 20px 20px;padding-top:16px;box-shadow:0 26px 52px -8px rgba(0,0,0,.5)}
.und-mount .sh-frame{height:236px}
.und-mount .sh-reading{padding:92px 0}
.und-mount .sh-h{font-size:24px}.und-mount .sh-body{font-size:18px}
.und-mount .sh-debrief{z-index:8}
.und-said{position:absolute;right:22px;bottom:88px;width:300px;z-index:6;background:#fff;border-radius:18px 18px 18px 5px;padding:12px 16px 14px;box-shadow:0 18px 40px -12px rgba(20,10,40,.45);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .25s,transform .3s var(--ease)}
.und-said.on{opacity:1;transform:none}
.und-said small{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6d3f7d;margin-bottom:3px}
.und-said span{font-size:16px;font-weight:600;line-height:1.35}
.und-now{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;z-index:6}
.und-now span{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);font-size:15px;font-weight:700;padding:9px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.14);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.und-now span.on{opacity:1;transform:none}
.und-now span:before{content:"Tellie understands ";color:var(--accent)}
/* ---------- 03 the wipe (from /start) ---------- */
.wscene{position:relative;margin:48px auto 0;max-width:980px;height:540px;border:12px solid #241230;border-radius:28px;overflow:hidden;background:var(--glass);box-shadow:0 30px 80px -26px rgba(36,18,48,.5);cursor:ew-resize;user-select:none;touch-action:none}
.wbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:9px 16px;font-size:13px;color:#55555e;background:#f8f8f9;border-bottom:1px solid #dcdce2}
.wbar .l{display:flex;align-items:center;gap:7px}.wbar .l i{width:10px;height:10px;border-radius:50%;background:#d3d3d8}
.wbar b{margin-left:6px;color:#3a3a42}
.wbar .recs{color:#e0352b;font-weight:600;font-variant-numeric:tabular-nums}
.wbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e0352b;animation:blink 1s infinite}
.wdoc{position:absolute;top:300px;left:7%;right:7%;bottom:26px;background:#fff;border-radius:12px;box-shadow:0 12px 32px -14px rgba(30,30,60,.35);padding:22px 30px}
.wdoc h4{font-size:19px;letter-spacing:-.3px;margin-bottom:8px}
.wdoc ul{padding-left:20px;color:#55554f;font-size:14.5px;line-height:1.8}
.wbars{position:absolute;right:30px;bottom:22px;display:flex;align-items:flex-end;gap:8px;height:80px}
.wbars i{width:18px;border-radius:4px;background:linear-gradient(#ffb454,#ff7a00)}
.wyou{position:absolute;inset:0;z-index:3;clip-path:inset(0 var(--wipe,12%) 0 0)}
.wmount{position:absolute;top:0;left:50%;width:620px;margin-left:-310px;transform-origin:top center;transform:scale(1.05)}
.wmount .sh-demo{margin:0}
.wmount .sh-stage{border-radius:0 0 20px 20px;padding-top:16px;box-shadow:0 26px 52px -8px rgba(0,0,0,.5)}
.wmount .sh-frame{height:170px}.wmount .sh-reading{padding:60px 0}
.wmount .sh-h{font-size:22px}.wmount .sh-body{font-size:18px}
.wmount .sh-drawer{display:none}
.wipe{position:absolute;top:0;bottom:0;left:88%;width:3px;background:#ff7900;z-index:6}
.wipe .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#ff7900;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .15s}
.wipe.grab .knob{transform:translate(-50%,-50%) scale(1.1)}
.wtag{position:absolute;z-index:7;top:54px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:8px;transition:opacity .2s}
.wtag.you{left:16px}.wtag.them{right:16px;background:rgba(224,53,43,.85)}
/* ---------- 06 bento: color, icons, links ---------- */
.bento a.bc{color:inherit;text-decoration:none;--c:#ff7a00;--bg:#fff4ea}
.bento a.bc.c-purple{--c:#8a4fd8;--bg:#f4edfd}.bento a.bc.c-green{--c:#22a049;--bg:#eaf8ee}.bento a.bc.c-blue{--c:#1e7ae6;--bg:#e9f2fe}
.bento a.bc.c-orange{--c:#ff7a00;--bg:#fff2e5}.bento a.bc.c-indigo{--c:#4f55d9;--bg:#eeeffd}.bento a.bc.c-teal{--c:#0a9fa5;--bg:#e5f7f7}
.bento .bc .demo{background:var(--bg);height:180px;padding:0;overflow:hidden}
.bhead{display:flex;align-items:center;gap:12px}
.bi{width:36px;height:36px;border-radius:11px;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 14px -6px var(--c)}
.bi svg{width:19px;height:19px}
.bc h3{display:flex;align-items:center}
.bc .free{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;color:#1a7f3c;background:#dff5e6;border-radius:5px;padding:3px 6px;margin-left:8px}
.bc p{margin-top:10px}
.bc .more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--c)}
.bc .arr{width:14px;height:14px;transition:transform .25s var(--ease)}
.bc:hover .arr{transform:translateX(4px)}
/* presenter */
.deck{position:absolute;inset:0;background:linear-gradient(160deg,#2b1f3d,#1a1426)}
.deck .dn{position:absolute;top:0;left:50%;transform:translateX(-50%);width:82%;height:42px;background:#0c0c0e;color:#f5f5f7;border-radius:0 0 12px 12px;font-size:12px;z-index:2}
.deck .ds{position:absolute;inset:54px 34px 30px;border-radius:9px;background:linear-gradient(135deg,#8a4fd8,#c86dd7);color:#fff;box-shadow:0 10px 24px -8px rgba(138,79,216,.7)}
.deck .a,.deck .b{position:absolute;inset:0;display:flex;align-items:center;padding:0 14px}
.deck .ds .a,.deck .ds .b{flex-direction:column;justify-content:center;align-items:flex-start;padding:0 18px}
.deck .ds b{font-size:26px;letter-spacing:-.6px}.deck .ds small{font-size:12px;opacity:.8}
.deck .a{animation:swapA 7s infinite}.deck .b{animation:swapB 7s infinite}
.deck .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.deck .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}.deck .dots i.on{background:#fff}
/* take coach */
.c-green .demo{display:flex;align-items:center;gap:16px;padding:0 22px!important}
.score{position:relative;width:92px;height:92px;flex:none}
.score svg{width:92px;height:92px;transform:rotate(-90deg)}
.score circle{fill:none;stroke-width:8}.score .bg{stroke:#cfe9d7}.score .fg{stroke:#22a049;stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201;animation:ring 5s var(--ease) infinite}
@keyframes ring{0%{stroke-dashoffset:201}35%,85%{stroke-dashoffset:34}100%{stroke-dashoffset:201}}
.score b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;color:#1d1d1f}
.cnote{background:#fff;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;line-height:1.35;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cnote small{display:block;color:#22a049;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.cnote .fix{display:block;margin-top:6px;font-size:12px;font-weight:500;color:#b4561b;background:#fdeee4;border-radius:7px;padding:5px 8px}
/* companion: the same word lights on every device at once */
.c-blue .demo{display:flex;align-items:center;justify-content:center}
.dev{display:flex;gap:14px;align-items:flex-end}
.dev > div{background:#0c0c0e;border:5px solid #2c2c2e;display:flex;align-items:center;justify-content:center}
.dev .mac{width:160px;height:100px;border-radius:9px}.dev .ipad{width:74px;height:96px;border-radius:10px;border-width:4px}.dev .ph{width:40px;height:78px;border-radius:10px;border-width:3px}
.dev p{display:flex;flex-direction:column;gap:6px;width:76%}
.dev p i{display:block;height:5px;border-radius:3px;background:#3a3a3c}
.dev p i.w{background:#1e7ae6;animation:cword 2.4s ease-in-out infinite}
@keyframes cword{0%,100%{width:30%;background:#ff9500}50%{width:90%;background:#f2ecdd}}
/* pulse */
.pnotch{position:relative;z-index:1;width:110px;height:16px;background:#0c0c0e}
.pulse{position:relative;z-index:1;width:88%;margin-top:0;border-radius:0 0 16px 16px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);background:#0c0c0e;color:#f5f5f7;font-size:13px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.pulse > div{display:flex;align-items:center;gap:9px;opacity:0;animation:prow 8s infinite}
.pulse .r2{animation-delay:1.2s}.pulse .r3{animation-delay:2.4s}
.pulse .ag{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex:none}
.pulse .cl{background:#d97757}.pulse .gh{background:#6e5494}.pulse .ci{background:#2ea44f}
.pulse em{margin-left:auto;font-style:normal;color:#8e8e93;font-size:11px}
.pulse u{margin-left:auto;text-decoration:none;color:#64d2ff}
/* documents */
.c-indigo .demo{display:flex;align-items:center;justify-content:center}
.files{display:flex;gap:10px}
.files .f{width:54px;height:70px;border-radius:9px;color:#fff;font-weight:800;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 8px 16px -8px rgba(0,0,0,.35);animation:hop 5s var(--ease) infinite}
.files .f small{font-size:9px;font-weight:600;opacity:.85}
.files .w{background:#2b579a}.files .p{background:#ff9500;animation-delay:.25s}.files .d{background:#e5322d;animation-delay:.5s;font-size:13px}.files .r{background:#8e8e93;animation-delay:.75s;font-size:13px}.files .m{background:#1d1d1f;animation-delay:1s}
/* displays */
.c-teal .demo{display:flex;align-items:center;justify-content:center}
.bento .screens div{background:#fff;border:3px solid #1d1d1f;border-radius:8px;position:relative;box-shadow:none}
.bento .screens div:after{display:none}
.bento .screens .lbl{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;font-weight:600;color:#6e6e73}
.bento .screens .nt{background:#0c0c0e;top:3px}
@media (max-width:860px){
.und{padding:90px 16px 0}.und h2{font-size:44px}
.und-wrap{grid-template-columns:1fr}
.und-stage{min-height:480px;order:-1}
.und-mount{transform:scale(.58)}
.wscene{height:460px}
.wmount{transform:scale(.56)}
.wdoc{top:230px}
}
/* ================= round 4 ================= */
/* hero REC tile: a real webcam loop */
.zoomtile.cam{background:#111;padding:10px 12px}
.zoomtile.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zoomtile.cam .rec{position:relative;z-index:1;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px;font-weight:600;font-size:12px}
.zoomtile.cam .rec b{font-variant-numeric:tabular-nums}
/* 03: Vitals-sized split */
.split.inv{grid-template-columns:1.15fr 1fr}
.inv .wscene{margin:0;max-width:none;height:390px;border-width:9px;border-radius:22px}
.inv .wmount{transform:scale(.8)}
.inv .wdoc{top:212px;left:6%;right:6%;padding:16px 22px}
.inv .wdoc h4{font-size:16px}.inv .wdoc ul{font-size:12.5px;line-height:1.7}
.inv .wbars{height:56px;right:22px;bottom:16px}.inv .wbars i{width:13px}
.inv .wtag{top:48px;font-size:10.5px}
.inv .win-cap{margin-top:12px}
/* Presenter Magic: full-screen wordless slides, notes in the notch */
.pmg{position:absolute;inset:0;overflow:hidden;background:#111}
.pmg-slides .sl{position:absolute;inset:0;animation:slide 9s cubic-bezier(.7,0,.2,1) infinite both}
.pmg-slides .s2{animation-delay:3s}.pmg-slides .s3{animation-delay:6s}
@keyframes slide{0%{transform:translateX(100%)}5%,33%{transform:none}38%,100%{transform:translateX(-100%)}}
.pmg .s1{background:radial-gradient(circle at 50% 60%,#2a1d4d,#120c24)}
.pmg .s1 .ring{position:absolute;left:50%;top:58%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:16px solid #8a4fd8;border-right-color:#ff9f0a;border-bottom-color:#ff9f0a;transform:rotate(-30deg)}
.pmg .s1 .ring.r2{width:150px;height:150px;margin:-75px 0 0 -75px;border:3px solid rgba(255,255,255,.12)}
.pmg .s2{background:linear-gradient(#ffb36b,#ff7e8a 45%,#7b4fd0)}
.pmg .s2 .sun{position:absolute;left:62%;top:44%;width:44px;height:44px;border-radius:50%;background:#fff3c4;box-shadow:0 0 40px 10px rgba(255,243,196,.6)}
.pmg .s2 .hill{position:absolute;bottom:-40px;border-radius:50%}
.pmg .s2 .h1{left:-20%;width:90%;height:110px;background:#3a2358}.pmg .s2 .h2{right:-25%;width:95%;height:90px;background:#24163a}
.pmg .s3{background:#f5f5f7;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:0 0 24px}
.pmg .s3 i{width:34px;border-radius:6px 6px 0 0;background:#c9bfe0}
.pmg .s3 i:nth-child(1){height:40px}.pmg .s3 i:nth-child(2){height:62px}.pmg .s3 i:nth-child(3){height:84px}.pmg .s3 i:nth-child(4){height:120px;background:linear-gradient(#b27cff,#8a4fd8)}
.pmg-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:76%;height:40px;background:#0c0c0e;border-radius:0 0 14px 14px;z-index:3;color:#f5f5f7;font-size:12.5px;font-weight:500;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.pmg-notch span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 12px;opacity:0;animation:note 9s infinite both}
.pmg-notch .n2{animation-delay:3s}.pmg-notch .n3{animation-delay:6s}
@keyframes note{0%{opacity:0}6%,31%{opacity:1}35%,100%{opacity:0}}
.pmg .kn{position:absolute;right:10px;bottom:10px;width:30px;height:30px;z-index:3;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
/* Companion: a real-looking iPad and iPhone */
.c-blue .demo{display:flex;align-items:center;justify-content:center}
.cmp{position:relative;width:250px;height:150px}
.cmp .ipad{position:absolute;left:0;top:10px;width:196px;height:136px;border-radius:15px;background:#1d1d1f;padding:7px;box-shadow:0 14px 28px -12px rgba(0,0,0,.45),inset 0 0 0 1px #3a3a3c}
.cmp .ipad .cam{position:absolute;top:3px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#3a3a3c}
.cmp .iphone{position:absolute;right:0;top:0;width:74px;height:150px;border-radius:17px;background:#1d1d1f;padding:4px;box-shadow:0 14px 28px -10px rgba(0,0,0,.5),inset 0 0 0 1px #3a3a3c}
.cmp .island{position:absolute;top:8px;left:50%;width:22px;height:6px;margin-left:-11px;border-radius:4px;background:#000;z-index:2}
.cmp .scr{width:100%;height:100%;border-radius:9px;background:#141417;overflow:hidden;display:flex;align-items:center}
.cmp .iphone .scr{border-radius:13px;padding-top:10px}
.cmp .cw{color:#f2ecdd;text-align:center;font-weight:500;padding:0 8px;line-height:1.35}
.cmp .ipad .cw{font-size:12px}.cmp .iphone .cw{font-size:8px;padding:0 5px}
.cmp .cw span{border-radius:2px;padding:0 1px;transition:background .1s}
.cmp .cw span.cur{background:rgba(255,149,0,.7)}
.cmp .cw span.said{color:#8a8a8e}
/* Bring your document: real app icons */
.docs{display:flex;gap:12px;align-items:flex-end}
.docs figure{display:flex;flex-direction:column;align-items:center;gap:6px;animation:hop 5s var(--ease) infinite}
.docs figure:nth-child(2){animation-delay:.25s}.docs figure:nth-child(3){animation-delay:.5s}.docs figure:nth-child(4){animation-delay:.75s}.docs figure:nth-child(5){animation-delay:1s}
.docs img,.docs .word,.docs .md{width:50px;height:50px;border-radius:12px}
.docs img{border-radius:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.docs .word{position:relative;background:linear-gradient(135deg,#41a5ee,#2b7cd3 45%,#185abd 75%,#103f91);box-shadow:0 4px 8px rgba(0,0,0,.18)}
.docs .word:after{content:"";position:absolute;right:8px;top:12px;width:18px;height:26px;background:repeating-linear-gradient(#fff 0 3px,transparent 3px 7px);opacity:.9}
.docs .word b{position:absolute;left:6px;top:13px;width:24px;height:24px;border-radius:4px;background:#185abd;color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.docs .md{background:#1d1d1f;color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px rgba(0,0,0,.18)}
.docs figcaption{font-size:11px;font-weight:600;color:#4f55d9}
/* Stays where you put it: the undocked prompter moving between displays */
.desk{position:absolute;left:50%;top:0;width:316px;height:180px;margin-left:-158px}
.desk .mbp{position:absolute;left:22px;bottom:30px;width:122px;height:78px;border-radius:7px;background:linear-gradient(158deg,#cfe3f7,#9dc2e8,#6d9bd4);border:3px solid #1d1d1f}
.desk .mbp:after{content:"";position:absolute;left:-12px;right:-12px;bottom:-9px;height:6px;border-radius:0 0 6px 6px;background:#c7c7cc}
.desk .mbp .nt{position:absolute;top:-1px;left:50%;width:22px;height:5px;margin-left:-11px;background:#1d1d1f;border-radius:0 0 3px 3px}
.desk .studio{position:absolute;right:16px;top:14px;width:156px;height:100px;border-radius:7px;background:linear-gradient(158deg,#d9e8f8,#a7c7eb,#7aa3d8);border:4px solid #d1d1d6}
.desk .studio .stand{position:absolute;left:50%;bottom:-40px;width:30px;height:36px;margin-left:-15px;background:linear-gradient(#e5e5ea,#c7c7cc);border-radius:0 0 4px 4px}
.ud{position:absolute;left:0;top:0;transform-origin:0 0;animation:udmove 9s cubic-bezier(.6,0,.25,1) infinite}
/* 260x153 at .36 = 94x55: centered inside the Studio Display (148x92) and the MacBook screen (116x72) */
@keyframes udmove{0%,38%{transform:translate(175px,36px) scale(.36)}50%,88%{transform:translate(36px,83px) scale(.36)}100%{transform:translate(175px,36px) scale(.36)}}
.udw{position:relative;width:260px;background:#161618;border-radius:24px;border:1px solid #2c2c30;padding:28px 16px 0;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.udm{position:absolute;left:14px;top:8px;font-size:13px;font-weight:800;color:#fff;letter-spacing:-.3px}.udm b{color:#ff9f0a}
.udg{position:absolute;top:7px;left:50%;width:32px;height:4px;margin-left:-16px;border-radius:3px;background:#5a5a5e}
.udp{position:absolute;right:14px;top:9px;width:10px;height:10px;background:#8e8e93;border-radius:2px 5px 2px 5px}
.udw p{white-space:nowrap;font-size:22px;line-height:1.18;color:#f7dfb8;text-align:center;letter-spacing:-.4px}
.udw p span{color:#5d5244}.udw p em{font-weight:800;font-style:italic}.udw p i{font-style:italic}
.udb{display:flex;align-items:center;gap:8px;margin:14px -16px 0;padding:10px 12px;border-top:1px solid #2c2c30}
.udb .m,.udb .pl{width:22px;height:22px;border-radius:50%;border:1.5px solid #5a5a5e}.udb .pl{width:18px;height:18px}
.udb u{width:54px;height:6px;border-radius:3px;background:#48484a;text-decoration:none}
.udb .lg{width:20px;height:20px;border-radius:5px;background:#8b5a2b;margin-left:auto}
.udb .sp{width:38px;height:14px;border-radius:7px;background:#2c2c2e;margin-left:auto}
.udb .x{width:10px;height:10px;border-radius:2px;background:linear-gradient(45deg,transparent 42%,#8e8e93 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#8e8e93 42% 58%,transparent 58%)}
.udd{width:228px;margin:0 auto;background:#0b0b0d;border-radius:0 0 16px 16px;padding:8px 12px;display:flex;align-items:center;gap:8px}
.udd i{width:11px;height:11px;border-radius:50%;border:2px solid #ff9f0a}
.udd u{width:66px;height:14px;border-radius:5px;background:#222224;margin:0 auto;text-decoration:none}
@media (max-width:860px){.split.inv{grid-template-columns:1fr}.inv .wmount{transform:scale(.62)}.inv .wscene{height:340px}.inv .wdoc{top:180px}}
/* ================= round 6 ================= */
/* cards: no icon badges, PRO/FREE sit far right of the title */
.bento .bc h3{width:100%}
.bento .bc h3 .pro,.bento .bc h3 .free{margin-left:auto}
/* Tellie Pulse, like the real one: the notch widens into a panel flush with the top of the screen, over the menu bar */
.bento .c-orange .demo{display:block;background:none}
.mac{position:absolute;inset:0;background:linear-gradient(180deg,#3aa6db 0%,#69b8e4 38%,#b6cfe3 100%)}
.mbar{height:17px;background:rgba(20,110,160,.55);display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:9px;color:#fff}
.mbar span{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.55)}
.mbar b{font-weight:600}
.pls{position:absolute;top:0;left:50%;width:236px;margin-left:-118px;background:#000;color:#fff;border-radius:0 0 16px 16px;padding:8px 14px 12px;
background-image:linear-gradient(180deg,#000 62%,#3b1d06 86%,#8a4a14);box-shadow:0 12px 26px -10px rgba(0,0,0,.5);
animation:plsopen 8s cubic-bezier(.3,0,.2,1) infinite}
@keyframes plsopen{0%,6%{clip-path:inset(0 30% 88% 30% round 0 0 9px 9px)}16%,82%{clip-path:inset(0 0 0 0 round 0 0 16px 16px)}92%,100%{clip-path:inset(0 30% 88% 30% round 0 0 9px 9px)}}
.pls i{flex:none;display:inline-flex;width:15px;height:15px}
.pls i svg{width:100%;height:100%}
.ph{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#ff9f45;margin-bottom:5px}
.ph b{font-weight:700}.ph em{margin-left:auto;font-style:normal;font-weight:700}
.ph .io{color:#ff9f45}
.pr{display:flex;align-items:center;gap:9px;padding:3px 0;opacity:0;animation:prin 8s infinite}
.pr:nth-of-type(2){animation-delay:.25s}.pr:nth-of-type(3){animation-delay:.5s}.pr:nth-of-type(4){animation-delay:.75s}
@keyframes prin{0%,14%{opacity:0;transform:translateY(-4px)}20%,82%{opacity:1;transform:none}90%,100%{opacity:0}}
.pr p{display:flex;flex-direction:column;font-size:11px;font-weight:600;line-height:1.2}
.pr small{font-size:8.5px;font-weight:700;color:#ff9f45}
.pr time{margin-left:auto;font-size:9.5px;color:#8e8e93;font-variant-numeric:tabular-nums}
.pr .iv{color:#8e9cff}.pr .ip{color:#c49bff}.pr .it{color:#5fd4c4}
.px{position:absolute;right:10px;bottom:9px;width:14px;height:14px;border-radius:50%;background:#6e6e73;color:#1d1d1f;font-size:11px;line-height:14px;text-align:center;font-weight:700}
/* ================= round 7 ================= */
/* hero, a notch quieter (Vitals sizes) */
h1{font-size:60px;letter-spacing:-1.9px}
h1 .ico{width:66px;height:66px;border-radius:15px;vertical-align:-10px}
.lede{font-size:20px;max-width:740px}
@media (max-width:860px){h1{font-size:38px}h1 .ico{width:42px;height:42px}}
/* hero camera: zoom in on what a callout names */
.hero-screen .vs-mount{transition:transform .8s var(--ease),opacity .6s ease,filter .6s ease}
/* callout: parked next to its target, caret pointing at it */
.hero-screen .vs-chip.call{bottom:auto;max-width:300px;transition:opacity .35s,transform .35s var(--ease)}
.vs-chip.call:before{content:"";position:absolute;left:calc(var(--cx,40px) - 8px);top:-7px;border:8px solid transparent;border-top:0;border-bottom:8px solid rgba(255,255,255,.92)}
.vs-chip.call.up:before{top:auto;bottom:-7px;border-bottom:0;border-top:8px solid rgba(255,255,255,.92)}
/* one bubble for everything you say: the take section and Tellie understands use the live look */
.vs-said.vs-live{right:auto;top:auto;left:50%;bottom:26px;width:min(560px,86%);border-radius:18px;padding:12px 18px 14px;transform:translate(-50%,10px);transform-origin:50% 100%}
.vs-said.vs-live.on{transform:translate(-50%,0)}
.und-said.vs-live{right:auto;left:50%;bottom:72px;width:min(460px,90%);border-radius:18px;padding:12px 18px 14px;transform:translate(-50%,10px)}
.und-said.vs-live.on{transform:translate(-50%,0)}
.und-said.vs-live .txt{font-size:17px}
.vs-live .txt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ================= round 8 ================= */
/* tabs: a white pill slides from tab to tab */
.tabs{position:relative}
.tab-pill{position:absolute;left:4px;top:4px;bottom:4px;width:0;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:transform .45s var(--ease),width .45s var(--ease)}
.tab{position:relative;z-index:1}
.tab.on{background:transparent;box-shadow:none}
/* a soft dip between beats */
.hero-screen .vs-mount,.hero-screen .vs-live,.hero-screen .vs-chip{transition:transform .8s var(--ease),opacity .3s ease,filter .6s ease}
.hero-screen.swap .vs-mount,.hero-screen.swap .vs-live,.hero-screen.swap .vs-chip{opacity:0}
.hero-screen.swap .vs-mount{filter:blur(4px)}
/* hero: what you say comes out of YOUR video, as a speech bubble with a tail */
.hero-screen .vs-live{left:auto;right:252px;bottom:26px;width:min(470px,50%);padding:14px 20px 16px;border-radius:22px 22px 6px 22px;background:#fff;
transform:translateY(10px) scale(.96);transform-origin:100% 100%;box-shadow:0 18px 44px -14px rgba(20,10,40,.45)}
.hero-screen .vs-live.on{transform:none}
.hero-screen .vs-live:after{content:"";position:absolute;right:-11px;bottom:14px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:13px solid #fff}
.hero-screen .vs-live .who{color:#86868b;letter-spacing:.12em}
.hero-screen .vs-live .who:before{display:none}
.hero-screen .vs-live .txt{font-size:20px;line-height:1.35}
@media (max-width:860px){.hero-screen .vs-live{right:12px;width:auto;left:12px;border-radius:18px}.hero-screen .vs-live:after{display:none}}
/* iPhone-style typing indicator while you pause */
.typing-dots{display:inline-flex;gap:4px;align-items:center;margin-left:4px;padding:6px 9px;border-radius:12px;background:#e9e9eb;vertical-align:middle}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:#8e8e93;animation:tdot 1.2s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
/* waiting on the last word you said: a faint white pulse on the page */
.sh-w.wait{background:rgba(255,255,255,.16);animation:waitpulse 1.4s ease-in-out infinite}
@keyframes waitpulse{50%{background:rgba(255,255,255,.34)}}
/* the key phrase you just said: lit in your bubble and on the page at once */
.vs-live .txt mark.kw{background:rgba(52,199,89,.2);color:#1a7f3c;font-weight:700;border-radius:5px;padding:0 3px}
.sh-krow b.kw-hit{color:#34c759;background:rgba(52,199,89,.2);border-radius:4px;padding:0 4px;box-shadow:0 0 0 2px rgba(52,199,89,.55),0 0 14px 3px rgba(52,199,89,.45);transition:all .25s}
/* Ask AI: each name opens that assistant with our question already asked, sourced from tellieapp.com + llms.txt */
.askai{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;font-size:13px;color:var(--faint)}
.askai.left{justify-content:flex-start}
.askai .lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-right:4px}
.askai a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;transition:color .2s}
.askai a:hover{color:var(--text)}
.askai a .ai{flex:none;width:15px;height:15px} /* each assistant's own mark, like Vitals (Steve 2026-09-26) */
.askai .sep{color:#c7c7cc;margin:0}
.askai span:not(.lbl):not(.sep){margin:0}
.askai.left{gap:4px 7px;font-size:12.5px;flex-wrap:nowrap;white-space:nowrap}
.askai.left .lbl{margin-right:2px}
/* ================= testimonials ================= */
.vfeat{max-width:880px;margin:44px auto 0;text-align:center}
.vfeat blockquote{position:relative;font-size:30px;line-height:1.35;font-weight:500;letter-spacing:-.6px;color:var(--text)}
.vfeat blockquote:before{content:"\201C";display:block;font-size:84px;line-height:.6;color:var(--accent);font-family:Georgia,serif;margin-bottom:14px}
.vfeat blockquote em{font-style:normal;color:var(--accent)}
.vfeat figcaption{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;color:var(--muted);text-align:left}
.vfeat figcaption b,.vcard figcaption b{display:block;color:var(--text);font-weight:600}
.vmarq{margin-top:52px;display:flex;flex-direction:column;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vrow{overflow:hidden}
.vtrack{display:flex;width:max-content;animation:vdrift 60s linear infinite}
.vrow.rev .vtrack{animation-direction:reverse;animation-duration:52s}
.vmarq:hover .vtrack{animation-play-state:paused}
@keyframes vdrift{to{transform:translateX(-50%)}}
.vdup{display:contents}
.vcard{flex:none;width:360px;margin-right:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.vcard.warm{background:#fff8f0;border-color:#fbe6cf}.vcard.plum{background:#faf5fc;border-color:#eddff3}.vcard.lav{background:#f5f5fd;border-color:#e3e3f7}
.vtop{display:flex;align-items:center;justify-content:space-between}
.stars{color:#ff9f0a;letter-spacing:2px;font-size:14px}
.vsrc{font-size:11px;font-weight:700;color:#ff4500;background:#fff0ea;border-radius:6px;padding:3px 7px}
.vcard blockquote{font-size:16px;line-height:1.5;color:var(--text);flex:1}
.vcard figcaption{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--muted);line-height:1.35}
.av{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
.av-c{background:linear-gradient(135deg,#ff9f0a,#ff6a00)}.av-s{background:linear-gradient(135deg,#8a4fd8,#c86dd7)}.av-g{background:linear-gradient(135deg,#ffb454,#ff7a00)}
.av-m{background:linear-gradient(135deg,#ff6b4a,#ff4500)}.av-j{background:linear-gradient(135deg,#6a78ff,#4f55d9)}.av-a{background:linear-gradient(135deg,#34c759,#1f9e48)}
.av-e{background:linear-gradient(135deg,#1e7ae6,#0a9fa5)}.av-r{background:linear-gradient(135deg,#c86dd7,#8a4fd8)}
@media (max-width:860px){.vfeat blockquote{font-size:22px}.vcard{width:290px}}
@media (prefers-reduced-motion:reduce){.vtrack{animation:none}.vrow{overflow-x:auto}}
/* nav: the section you are in reads dark */
.links a{transition:color .2s}
.links a.on{color:var(--text);font-weight:500}
/* ================= the notch: the prompter grows out of it and folds back in ================= */
.hnotch{position:absolute;top:0;left:50%;width:180px;height:30px;margin-left:-90px;background:#000;border-radius:0 0 13px 13px;z-index:2}
.hero-screen .vs-mount{clip-path:inset(0 -80px -90px -80px round 0 0 20px 20px);
transition:clip-path .95s cubic-bezier(.32,.72,.2,1),transform .8s var(--ease),opacity .3s ease,filter .6s ease}
.hero-screen .vs-mount.shut{clip-path:inset(0 calc(50% - 90px) calc(100% - 30px) calc(50% - 90px) round 0 0 13px 13px);filter:brightness(0);transition:clip-path .85s cubic-bezier(.6,0,.4,1),filter .5s ease .3s,transform .8s var(--ease),opacity .3s ease}
.hero-screen .vs-mount.snap{transition:none!important}
/* Pulse card: nothing shows through the folded notch; the header and the close
button appear only once the panel is open (same clock as plsopen) */
.pls .ph,.pls .px{animation:plsvis 8s infinite}
@keyframes plsvis{0%,13%{opacity:0}18%,80%{opacity:1}85%,100%{opacity:0}}
.pls{background-image:linear-gradient(180deg,#000 62%,#3b1d06 86%,#8a4a14)}
/* ================= homepage port: nav menu, persona bar, credit, egg effects ================= */
/* the easter-egg menu opens from the Tellie icon */
.brand{position:relative;display:flex;align-items:center;gap:10px}
.brand a{font-weight:600;font-size:17px;letter-spacing:-.2px}
.brand-ico{display:flex;padding:0;border-radius:8px;cursor:pointer;transition:transform .15s}
.brand-ico:hover{transform:scale(1.06)}
.brand-ico[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(255,122,0,.25)}
.brand-ico img{width:28px;height:28px;border-radius:7px;display:block}
.brand .apple-menu{top:40px;left:-4px}
/* the persona bar under the testimonials (the use-case pages' switcher, unstuck) */
.uc-bar{display:flex;justify-content:flex-start;margin-top:40px;overflow-x:auto;scrollbar-width:none;padding:2px} /* the nav's margin:0 auto centers it when it fits; justify-content:center cut off the first pills on phones */
.uc-bar::-webkit-scrollbar{display:none}
.uc-bar nav{display:inline-flex;align-items:center;gap:2px;background:rgba(0,0,0,.045);border-radius:999px;padding:4px;margin:0 auto}
.uc-bar nav a{display:inline-flex;align-items:center;gap:7px;flex:none;padding:8px 15px;border-radius:999px;font-size:14.5px;font-weight:500;color:#424245;transition:background .2s,color .2s}
.uc-bar nav a:hover{background:#fff;color:var(--accent-dark);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.uc-bar .uc-icon{width:16px;height:16px;flex:none}
/* footer credit */
.fbar .human{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fbar .human:hover{color:var(--accent-dark)}
/* easter eggs, pointed at this page: Sleep dims everything but the nav, Quit folds the prompter into the notch */
body.ee-asleep main,body.ee-asleep .strip,body.ee-asleep .final,body.ee-asleep footer{filter:brightness(.32);transition:filter 1.2s ease}
main,.strip,.final,footer{transition:filter .6s ease}
body.ee-quit .hero-screen .vs-mount{clip-path:inset(0 calc(50% - 90px) calc(100% - 30px) calc(50% - 90px) round 0 0 13px 13px);filter:brightness(0)}
.ee-app-icon.has-img{background:none!important;box-shadow:none!important;padding:0}
.ee-app-icon.has-img img{width:100%;height:100%;display:block;border-radius:inherit}
/* testimonials: the users bar sits under the heading; Conrad's quote wears real quotation marks */
.uc-bar.top{margin-top:26px}
.vfeat{margin-top:40px}
.vfeat blockquote:before{content:none}
/* ================= production port ================= */
/* shared phone menu (mobile-nav.js + site-nav.css): keep the links inline at the left, not the site-wide centered bar */
header.vs-nav .row{position:relative}
header.vs-nav .row > .site-nav{position:static;transform:none;left:auto;top:auto}
header.vs-nav .site-nav a{font-size:14px;color:#424245;font-weight:400}
header.vs-nav .site-nav a.on{color:var(--text);font-weight:500}
@media (max-width:900px){header.vs-nav .site-nav{display:none}header.vs-nav .navToggle{margin-left:10px}}
/* hero link to the 10-day explainer */
a.hot{color:var(--accent-dark);font-weight:600;text-decoration:none}
a.hot:hover{text-decoration:underline;text-underline-offset:3px}
/* launch badges */
.fbadges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:28px}
.fbadges img{display:block}
/* phones: brand, Download and the hamburger share one tight row */
@media (max-width:900px){header.vs-nav .wrap{gap:10px}header.vs-nav .nav-right{margin-left:auto}header.vs-nav .btn-sm{padding:8px 13px;font-size:13.5px}}
@media (max-width:860px){.askai.left{flex-wrap:wrap;white-space:normal}}
@media (max-width:860px){.split h2{white-space:normal}}
@media (max-width:860px){.bento,.three,.voices,.price,.split,.split.flip,.duo,.share,.faq,.und-wrap{grid-template-columns:minmax(0,1fr)}.bc{min-width:0}}
@media (max-width:400px){.docs{gap:7px}.docs img,.docs .word,.docs .md{width:44px;height:44px}}
.center .body{text-wrap:balance}
.morelink{text-align:center;margin-top:26px;font-size:16px;font-weight:600}
.morelink a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-dark)}
.morelink a:hover .arr{transform:translateX(4px)}
.morelink .arr{width:15px;height:15px;transition:transform .25s var(--ease)}
/* quiet Buy Pro link, same tag as every inner page (nav-buy-pro) */
.vs-nav .links a.nav-buy{color:var(--plum,#6d3f7d);font-weight:600}
.vs-nav .links a.nav-buy:hover{color:#4f2a5c}
/* ---------- Pricing, step 1 of the reframe (approved 2026-09-26): "Try everything" /
"Keep everything". The two cards share ONE row grid (subgrid) so the prices, notes,
lists and actions line up across Free and Pro. Scoped under .pr2 (home.css already
has a .price/.pro-col card from before). The launch-price state is html.promo-live,
set by /promo.js, which also fills the $ amounts, the savings and the countdown. */
.pr2 .pc-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(7,auto);column-gap:18px;max-width:1040px;margin:40px auto 0}
.pr2 .pc{grid-row:1 / span 7;display:grid;grid-template-rows:subgrid;border-radius:28px;padding:34px 36px 28px;text-align:left}
.pr2 .pc-free{border:1px solid var(--line);background:#fff}
.pr2 .pc-pro{background:linear-gradient(180deg,#f6eefa 0%,#fbf8fc 60%,#fff 100%);border:1px solid #eadcf1;box-shadow:0 18px 50px -14px rgba(109,63,125,.2)}
.pr2 .r-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pr2 .r-top h3{font-size:24px;letter-spacing:-.4px}.pr2 .r-top span{font-size:15px;color:var(--muted)}
.pr2 .r-price{display:flex;align-items:flex-end;gap:12px;margin-top:26px}
.pr2 .r-price b{font-size:76px;line-height:.9;font-weight:700;letter-spacing:-3px}
.pr2 .r-price s{font-size:28px;color:#a1a1a6;margin-bottom:8px}
.pr2 .badge{margin-left:auto;align-self:center;font-weight:700;font-size:15px;padding:7px 14px;border-radius:999px}
.pr2 .badge.keep{background:#efe6f4;color:#6d3f7d}.pr2 .badge.save{background:#f7e2d8;color:#c4552a}
.pr2 .r-per{margin-top:10px;font-size:16px;color:var(--muted)}
.pr2 .r-note{margin-top:22px;min-height:20px}
.pr2 .clock .l{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:600}
.pr2 .clock .l span:first-child{color:#c4552a}.pr2 .clock .l span:last-child{color:var(--muted);font-weight:500}
.pr2 .clock .bar{height:8px;border-radius:5px;background:#ece7ef;margin-top:10px;overflow:hidden}
.pr2 .clock .bar i{display:block;height:100%;width:50%;border-radius:5px;background:linear-gradient(90deg,#e07a4a,#c4552a)}
.pr2 .trial{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#d96400}
.pr2 .trial i{width:8px;height:8px;border-radius:50%;background:#ff7a00;flex:none}
.pr2 .r-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px}
.pr2 .r-list li{display:flex;gap:12px;align-items:flex-start}
.pr2 .r-list li:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:no-repeat center/16px var(--tick)}
.pr2 .pc-free .r-list{--tick:url("data:image/svg+xml;utf8,")}
.pr2 .pc-pro .r-list{--tick:url("data:image/svg+xml;utf8,")}
.pr2 .r-act{margin-top:30px;min-height:62px;display:flex;align-items:center;justify-content:center}
.pr2 .r-act .dl{width:100%;height:62px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;background:var(--accent);color:#fff;font-size:19px;font-weight:600}
.pr2 .r-act .dl .apple{width:17px;height:17px;fill:#fff}
.pr2 .r-act .buy{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#6d3f7d}
.pr2 .r-act .buy svg{width:16px;height:16px;transition:transform .2s}.pr2 .r-act .buy:hover svg{transform:translateX(3px)}
.pr2 .r-fine{margin-top:14px;text-align:center;font-size:13.5px;color:#86868b}
.pr2 .after{margin-top:22px;text-align:center;font-size:15px;color:var(--muted)}
.pr2 .after a{color:var(--accent-dark);font-weight:600}
html:not(.promo-live) .pr2 .promo-only{display:none!important}
html.promo-live .pr2 .normal-only{display:none!important}
@media (max-width:860px){
.pr2 .pc-grid{grid-template-columns:1fr;grid-template-rows:none}
.pr2 .pc{grid-row:auto;display:flex;flex-direction:column;margin-bottom:16px;padding:28px 24px 24px}
.pr2 .r-price b{font-size:64px}
.pr2 .r-top{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (max-width:560px){.pr2 .clock .l{flex-direction:column;gap:2px}}
/* The Pulse card carries TWO links (Steve, 2026-09-26: Send to Tellie and For
developers, split), so it is a div, not the whole-card link the other five are.
It borrows their color vars, keeps still on hover, and each arrow moves alone. */
.bento .bc.bc-duo{--c:#ff7a00;--bg:#fff2e5}
.bento .bc.bc-duo:hover{transform:none;box-shadow:var(--card-shadow)}
.bento .bc.bc-duo:hover .arr{transform:none}
.bc .more2{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px 22px}
.bc .more2 a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--c);text-decoration:none}
.bento .bc.bc-duo .more2 a:hover .arr{transform:translateX(4px)}
/* For developers sits right and in plain gray: Send to Tellie is the lead link (Steve 2026-09-26) */
.bc .more2 a:last-child{margin-left:auto;color:var(--muted)}
.bc .more2 a:last-child:hover{color:var(--text)}
/* Tellie understands, last item: Take Coach opens over the prompter (Steve
2026-09-26: "show the take coach when it gets to the last item"). Styled after
the real Take Coach page (landing/take-coach-hero-v1.png); sized in em so the
phone layout just shrinks the font. The list items are clickable. */
.und-grp li{cursor:pointer}
.und-grp li:hover{color:var(--text)}
.und-grp li:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.und-now{z-index:9}
.und-coach{position:absolute;left:18px;right:18px;top:18px;bottom:78px;z-index:8;display:flex;align-items:center;opacity:0;transform:translateY(26px) scale(.98);transition:opacity .45s ease,transform .6s var(--ease);pointer-events:none}
.und-coach.on{opacity:1;transform:none}
.tcx{font-size:16.5px;width:100%;max-height:100%;overflow:hidden;background:#fffdf9;border-radius:18px;padding:1.3em 1.45em;box-shadow:0 24px 60px -14px rgba(40,25,10,.45);color:#1d1d1f;text-align:left}
.tcx-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1em}
.tcx-top b{font-size:1.05em;font-weight:800;letter-spacing:-.02em}.tcx-top b i{font-style:normal;color:var(--accent)}
.tcx-top span{font-size:.72em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a857c}
.tcx-head{display:flex;gap:1.2em;align-items:flex-start}
.tcx-score{flex:none;text-align:center}
.tcx-ring{position:relative;width:5.6em;height:5.6em}
.tcx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.tcx-ring circle{fill:none;stroke-width:7}
.tcx-ring .bg{stroke:#ece7de}
.tcx-ring .fg{stroke:#4f9e5d;stroke-linecap:round;stroke-dasharray:207.3;stroke-dashoffset:207.3;transition:stroke-dashoffset 1.2s var(--ease) .25s}
.und-coach.on .tcx-ring .fg{stroke-dashoffset:29}
.tcx-ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tcx-ring b{font-size:1.7em;line-height:1;font-weight:800;letter-spacing:-.03em}
.tcx-ring small{margin-top:.35em;font-size:.44em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a857c}
.tcx-up{margin-top:.45em;font-size:.66em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4f9e5d;white-space:nowrap}
.tcx-verdict h4{font-size:1.32em;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.tcx-verdict p{margin-top:.4em;font-size:.86em;line-height:1.45;color:#5c5a56}
.tcx-fix{margin-top:1em;background:#fcf1ea;border:1px solid #f1d3bf;border-radius:12px;padding:.6em .9em;font-size:.9em;font-weight:700;line-height:1.35}
.tcx-fix span{font-size:.72em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#c96a2b;margin-right:.7em}
.tcx-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9em;margin-top:.9em;font-size:.74em;color:#8a857c;line-height:1.3}
.tcx-bars b{color:#1d1d1f;font-weight:700}
.tcx-bars i{display:block;height:5px;border-radius:3px;margin-top:.45em;background:linear-gradient(90deg,#4f9e5d var(--w),#ece7de var(--w))}
.tcx-fought{margin-top:1em;border:1px solid #ece7de;border-radius:14px;padding:.8em 1em}
.tcx-fought h5{font-size:.66em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a857c;padding-bottom:.55em;border-bottom:1px solid #ece7de;margin-bottom:.6em}
.tcx-fought .t{font-size:.8em;font-weight:700;color:#c96a2b}
.tcx-fought q{display:block;margin-top:.25em;font-family:Georgia,"Times New Roman",serif;font-size:1.02em;line-height:1.35;quotes:"\201C" "\201D"}
.tcx-fought mark{background:#fbeede;color:inherit;border-radius:4px;padding:0 .15em}
.tcx-row{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin-top:.5em;font-size:.76em;color:#5c5a56}
.tcx-row em{flex:none;font-style:normal;font-weight:700;color:#c96a2b;background:#fcf1ea;border-radius:999px;padding:.45em .9em;white-space:nowrap}
@media (max-width:860px){.und-coach{left:10px;right:10px;top:10px;bottom:88px}.tcx{font-size:11px;padding:1.1em 1.2em}}
/* The /start accent (start/index.html .serifline), shared on the homepage
(Steve 2026-09-26): the hero's "that understands", "Tellie understands" and
the closing "Tellie keeps up." Italic Georgia over an orange highlighter band;
clone keeps the band on every line when it wraps. */
.serifline{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-style:italic;letter-spacing:-.01em;
background:linear-gradient(180deg,transparent 62%,#ff7900 62%,#ff7900 94%,transparent 94%);
-webkit-box-decoration-break:clone;box-decoration-break:clone}
#privacy h2{text-wrap:balance} /* no lone "Mac." on narrow phones */
/* Pricing to the roadmap board: room to breathe, and the board's heading and intro
match every other section's h2 / .body (Steve 2026-09-26). The board's own
styles came from the old homepage at 38px / 17px. */
section.pr2{padding-bottom:96px} /* beats section.feat{padding:140px 32px 0} */
#public h2{font-size:48px;line-height:1.1;font-weight:600;letter-spacing:-1.4px}
#public .lede{font-size:19px;line-height:1.6;max-width:none;text-wrap:balance}
@media (max-width:860px){section.pr2{padding-bottom:64px}#public h2{font-size:32px;letter-spacing:-.8px}}
/* "Also included" reads left, "Tellie understands" reads right (Steve 2026-09-26) */
.center.left{text-align:left;max-width:none;margin:0}
.center.left .body{margin-left:0;margin-right:0}
/* Tellie understands: eyebrow + heading centered over the right-hand panel
(.und-wrap columns are 1fr / 1.15fr with a 28px gap) */
.und-head{width:calc((100% - 28px) * 1.15 / 2.15);margin-left:auto;text-align:center}
.und-head h2{text-align:center}
@media (max-width:860px){.und-head{width:auto;margin-left:0}}
.center h2{text-wrap:balance} /* no lone last word ("say.") on phones */
/* Privacy: Steve's promise beside the photo of Ellie, then the three quiet tiles
(Steve 2026-09-26: the dark band and the live demo were too much; words and a face). */
.promise{display:flex;align-items:center;gap:32px;max-width:900px;margin:44px auto 0}
.promise img{flex:none;width:160px;height:160px;border-radius:24px;object-fit:cover;box-shadow:0 14px 34px -12px rgba(0,0,0,.35)}
.promise blockquote{margin:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:22px;line-height:1.5;color:#3a3a3c}
.promise blockquote strong{font-family:var(--font);font-style:normal;font-weight:650;color:var(--text)}
.promise .by{margin-top:14px;font-size:15px;color:var(--muted)}
.promise .by b{color:var(--text);font-weight:600}
.promise .by i{font-style:normal;color:#c7c7cc;margin:0 6px}
.promise .by a{white-space:nowrap}
@media (max-width:700px){.promise{flex-direction:column;text-align:center;gap:20px;margin-top:32px}.promise img{width:132px;height:132px}.promise blockquote{font-size:18.5px}.promise .by i{display:none}.promise .by a{display:block;margin-top:6px}}
/* Privacy in two columns (Steve 2026-09-26: the row of cards repeated Stagehand's):
heading + promise on the left, the three facts stacked in one soft sage panel. */
.pv-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:64px;align-items:center}
#privacy .pv-left h2{text-align:left;margin:0}
#privacy .promise{margin:30px 0 0;max-width:none;align-items:flex-start;gap:24px}
#privacy .promise img{width:124px;height:124px;border-radius:22px}
#privacy .promise blockquote{font-size:20.5px}
.pv-facts{list-style:none;margin:0;padding:6px 30px;border-radius:26px;background:linear-gradient(160deg,#f2f8f3,#eaf3ec)}
.pv-facts li{display:flex;gap:18px;align-items:flex-start;padding:24px 0}
.pv-facts li + li{border-top:1px solid rgba(31,122,66,.14)}
.pv-facts .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#1f8a4c;box-shadow:0 1px 3px rgba(31,122,66,.12)}
.pv-facts .ic svg{width:20px;height:20px}
.pv-facts h3{font-size:18px;letter-spacing:-.2px;margin:0 0 4px}
.pv-facts p{font-size:15.5px;line-height:1.5;color:var(--muted);margin:0;text-wrap:pretty}
@media (max-width:980px){.pv-grid{grid-template-columns:minmax(0,1fr);gap:40px}#privacy .pv-left h2{text-align:center}}
@media (max-width:700px){#privacy .promise{align-items:center}.pv-facts{padding:4px 22px}}
/* Head-to-head links under the comparison table (Steve 2026-09-26: the compare pages were impossible to find) */
.h2h{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:26px;font-size:15px}
.h2h .lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-right:4px}
.h2h a{color:var(--accent-dark);font-weight:600}
.h2h a:hover{color:var(--text)}
.h2h .sep{color:#c7c7cc}
.h2h a.all{display:inline-flex;align-items:center;gap:6px;margin-left:14px}
.h2h .arr{width:14px;height:14px;transition:transform .25s var(--ease)}.h2h a.all:hover .arr{transform:translateX(4px)}
@media (max-width:860px){.h2h a.all{flex-basis:100%;justify-content:center;margin:6px 0 0}}
#compare .askai{margin-top:22px} /* breathing room under the head-to-head row */
.strip-off .strip{display:none} /* returning to home from inside the site: no top strip (see the script) */
/* Mobile: the page must not slide sideways (Steve 2026-09-26: "slippery").
iOS lets a page pan by any overhang, even a few pixels. clip (not hidden)
keeps position:sticky working on the header. */
html,body{overflow-x:clip}
/* ---------- Phones (Steve 2026-09-26) ---------- */
@media (max-width:700px){
/* Testimonials: five cards, standing still, instead of two rows drifting in
from the sides (they took too long to come into view on a phone). */
.vmarq{-webkit-mask-image:none;mask-image:none;gap:12px;margin-top:30px}
.vrow{overflow:visible}
.vtrack{animation:none;width:auto;flex-direction:column;gap:12px}
.vdup{display:none}
.vcard{width:auto;margin-right:0}
.vrow:first-child .vtrack > .vcard:nth-child(3),
.vrow.rev .vtrack > .vcard:nth-child(3){display:none} /* Mark Santos and Raj S. stay on desktop */
}
@media (max-width:860px){
/* Tellie understands: the demo was a shrunken prompter floating in the blue,
far from its checklist. Now the prompter docks full width at the top of the
panel, the panel pins under the header while you read the list, and the
list is tight enough that most of it sits right under the demo. */
.und-wrap{gap:14px;margin-top:26px}
.und-stage{position:sticky;top:63px;z-index:4;min-height:0;height:clamp(340px,44svh,390px)}
.und-mount{left:8px;right:8px;transform:none}
#understands .und-mount .sh-stage{padding-top:10px}
#understands .und-mount .sh-frame{height:96px;padding:0 16px}
#understands .und-mount .sh-reading{padding:34px 0}
#understands .und-mount .sh-count,#understands .und-mount .sh-time{font-size:10.5px}#understands .und-mount .sh-time{min-width:0}
#understands .und-mount .sh-drawer{margin-left:10px;margin-right:10px}
#understands .und-mount .sh-h{font-size:16px;margin-bottom:4px}#understands .und-mount .sh-body{font-size:14px;line-height:1.45}
#understands .und-mount .sh-krow{font-size:10.5px;margin-bottom:4px}
#understands .und-mount .sh-speed,#understands .und-mount .sh-aa,#understands .und-mount .sh-mark{display:none}
.und-now{bottom:12px}
.und-now span{font-size:13px;padding:7px 12px;max-width:calc(100% - 24px);white-space:normal;text-align:center}
.und-said.vs-live{bottom:58px;width:calc(100% - 24px)}
.und-said.vs-live .txt{font-size:15px}
.und-coach{top:8px;bottom:62px;left:8px;right:8px;align-items:stretch}
.und-coach .tcx{max-height:none}
#understands .und-mount .sh-nav{white-space:nowrap;font-size:11px}
.und-coach .tcx-fought{display:none}
.und-list{gap:8px}
.und-grp{padding:12px 14px 10px;border-radius:16px}
.und-grp h3{font-size:11px;margin-bottom:4px}
.und-grp h3 .gi{width:22px;height:22px}
.und-grp li{font-size:14.5px;padding:3px 8px;gap:10px}
.und-grp li .st{width:14px;height:14px}
/* the heads-up banner: one tidy block above the caption */
#understands .und-mount .sh-runway.on{padding:9px 12px;gap:8px;margin-top:8px}
#understands .und-mount .sh-runway .msg{font-size:11px;line-height:1.3}
#understands .und-mount .sh-runway .needs{display:none}
#understands .und-mount .sh-runway .jump{font-size:11.5px;padding:6px 10px}
#understands .und-mount .sh-well{gap:7px}
#understands .und-mount .sh-nav{padding:4px 8px;gap:5px}
#understands .und-mount .sh-pips{gap:5px}
}
/* "It starts as a beautiful teleprompter that becomes magical." (Steve 2026-09-27, mocked in
mockups/inner-v2/). A calm prompter with no Stagehand marks plays Tellie Free: it grows out of
the notch, play is pressed, the script scrolls in ALL CAPS (the app's own setting) on app-like
glass over a Pages document, then tucks back in. Driven by the calm block at the end of home.js.
When the engine's notch options land (PR #1277: data-sh-notch, data-sh-glass, grow/tuck), switch
to those and drop the .calm-notch / glass / corner rules here. */
/* ---------- "simple and beautiful": a calm prompter with no Stagehand marks ----------
One heading and no marks, so the real app shows the words, one row of controls
and the section name, with no tally (PrompterState: the tally needs marks). */
.sh-win.calm{margin-top:44px}
.sh-win.calm .take-screen{height:440px}
.calm .vs-mount{width:58%}
.calm .vs-mount .sh-frame{height:250px}
.calm .vs-mount .sh-reading{padding:78px 0}
.calm .vs-mount .sh-h{font-size:26px}
.calm .vs-mount .sh-body{font-size:21px;line-height:1.5}
.calm .sh-count,.calm .sh-pips{visibility:hidden}
.madeby{margin-top:26px;text-align:center;font-size:15.5px;color:var(--muted)}
.madeby b{color:var(--text);font-weight:600}
@media (max-width:600px){.sh-win.calm .menubar span:not(.r){display:none}}
.sh-win.calm .menubar .r{white-space:nowrap}
@media (max-width:860px){.calm-notch{width:112px;margin-left:-56px;height:24px}.sh-win.calm .take-screen{height:360px}.calm .vs-mount{width:88%}.calm .vs-mount .sh-frame{height:210px}.calm .vs-mount .sh-reading{padding:60px 0}.calm .vs-mount .sh-body{font-size:17px}.calm .vs-mount .sh-h{font-size:21px}}
/* Glass: the app's translucent prompter (a dark scrim over a heavy blur, about 80%: what's behind
becomes a soft glow, its details don't show through; Steve 2026-09-27 against the real app),
instead of the engine's solid black. Page-level only; the shared engine is untouched.
The engine's top/bottom fades are solid colors, so on glass they become a mask. */
.sh-win.calm .vs-mount .sh-stage{background:rgba(22,23,27,.8);-webkit-backdrop-filter:blur(40px) saturate(1.3);backdrop-filter:blur(40px) saturate(1.3);box-shadow:0 26px 52px -12px rgba(10,20,40,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.sh-win.calm .vs-mount .sh-frame::before,.sh-win.calm .vs-mount .sh-frame::after{display:none}
.sh-win.calm .vs-mount .sh-frame{-webkit-mask-image:linear-gradient(transparent,#000 46px,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(transparent,#000 46px,#000 calc(100% - 46px),transparent)}
.sh-win.calm .vs-mount .sh-drawer{background:rgba(9,9,11,.94);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.sh-win.calm .sh-nav{white-space:nowrap}
/* Tellie Free: mic off, play pressed (the engine dims its pause button for voice mode) */
.sh-win.calm .sh-bic.pause{opacity:1;transition:box-shadow .2s,background .2s}
.sh-win.calm .sh-bic.pressed{background:rgba(255,255,255,.22);box-shadow:0 0 0 5px rgba(255,255,255,.14)}
.sh-win.calm .sh-bic.off{color:#c7c7cc}
/* the script in ALL CAPS: the app's "Display document in ALL CAPS" setting (whole document) */
.sh-win.calm .sh-reading{text-transform:uppercase}
.sh-win.calm .para-gap{display:block;height:.7em}
.sh-win.calm .vs-mount .sh-body{letter-spacing:.01em}
/* play/pause works: the engine turns off clicks on looping demos' bars, so re-enable just this button */
.sh-win.calm .sh-demo .sh-bic.pause{pointer-events:auto;cursor:pointer}
.sh-win.calm .sh-demo .sh-bic.pause:hover{background:rgba(255,255,255,.14)}
/* the notch, with its "turned corners": concave shoulders into the top edge of the screen */
.calm-notch{position:absolute;z-index:6;top:0;left:50%;width:172px;height:30px;margin-left:-86px;background:#000;border-radius:0 0 13px 13px}
.calm-notch{transition:opacity .45s ease}
.calm-open .calm-notch{opacity:0}
.calm-notch::before,.calm-notch::after{content:"";position:absolute;top:0;width:9px;height:9px}
.calm-notch::before{left:-9px;background:radial-gradient(circle at 0 100%,transparent 8.5px,#000 9px)}
.calm-notch::after{right:-9px;background:radial-gradient(circle at 100% 100%,transparent 8.5px,#000 9px)}
/* the prompter hangs from the top edge the same way: its top corners turn out into the screen edge */
.sh-win.calm .vs-mount::before,.sh-win.calm .vs-mount::after{content:"";position:absolute;z-index:4;top:0;width:16px;height:16px;background:rgba(22,23,27,.8);-webkit-backdrop-filter:blur(40px) saturate(1.3);backdrop-filter:blur(40px) saturate(1.3)}
.sh-win.calm .vs-mount::before{left:-16px;-webkit-mask:radial-gradient(circle at 0 100%,transparent 15.5px,#000 16px);mask:radial-gradient(circle at 0 100%,transparent 15.5px,#000 16px)}
.sh-win.calm .vs-mount::after{right:-16px;-webkit-mask:radial-gradient(circle at 100% 100%,transparent 15.5px,#000 16px);mask:radial-gradient(circle at 100% 100%,transparent 15.5px,#000 16px)}
.sh-win.calm .vs-mount .sh-stage{border-radius:0 0 22px 22px}
.sh-win.calm .vs-mount .sh-reading{padding-top:92px}
.sh-win.calm .vs-mount .sh-body{color:#fff}
/* the document you're reading from, behind the glass */
.calm-doc{position:absolute;z-index:2;left:50%;top:64px;width:84%;height:360px;transform:translateX(-50%);background:#fff;border-radius:12px;box-shadow:0 18px 40px -16px rgba(20,40,80,.35);padding:34px 46px 0;overflow:hidden}
.calm-doc h4{font-size:22px;letter-spacing:-.3px;color:#1d1d1f;margin:0 0 16px}
.calm-doc i{display:block;height:9px;border-radius:5px;background:#d9dde3;margin:0 0 12px}
.calm-doc i:nth-child(3n){width:93%}.calm-doc i:nth-child(4n){width:97%}.calm-doc i:nth-child(5n){width:78%}.calm-doc i:nth-child(7n){width:60%}
.calm-doc .hl{background:#ffcf8a}
@media (max-width:860px){.calm-doc{width:96%;top:52px;padding:22px 18px 0}.calm-doc h4{font-size:16px}}