/* ───────── Stage (hero) — name first, then the product ─────────
   Calm (no JS / reduced motion): bar, lockup, tagline, statement, one button,
   then the window in its final state. Pinned: hero.js drives --e (the lockup
   leaves, the window rises) and CSS scrubs the statement word by word from --p. */
.stage { position: relative; background: var(--bg-base); isolation: isolate; overflow: clip; }
.stage__pin { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100svh; padding: 0 var(--pad-x) clamp(56px, 9vh, 112px); }
.stage__bar { align-self: stretch; display: none; align-items: center; justify-content: space-between; gap: 16px; height: clamp(64px, 9vh, 88px); position: relative; z-index: 4; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: var(--r-control); }
.brand .om { width: 30px; height: 30px; }
.brand__name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
html.js:not(.reduce-motion) .brand:hover .om__b--top { animation: om-once-top 750ms linear; }
html.js:not(.reduce-motion) .brand:hover .om__b--bot { animation: om-once-bot 750ms linear; }

.stage__lockup { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: clamp(64px, 12vh, 120px); text-align: center; }
.stage__mark { width: clamp(72px, 9vw, 128px); height: clamp(72px, 9vw, 128px); margin-bottom: clamp(8px, 1.6vw, 20px); }
.stage__name { font-size: clamp(96px, 16vw, 240px); font-weight: 600; letter-spacing: -.06em; line-height: .9; }
/* ShimmerTextEffect port (startup screen): the glyphs are painted by a
   gradient — solid text-1 with a narrow shade band parked off-canvas until
   name-shimmer sweeps it across. The app dims toward the canvas rather than
   brightening — white-on-white would be invisible. inline-block hugs the
   text run so the band is relative to the letters, not the full row. */
.stage__name .l {
    display: inline-block; padding: 0 .04em .06em 0;
    color: transparent;
    --dip: color-mix(in srgb, var(--text-1) 60%, var(--bg-base));
    background-image: linear-gradient(90deg, var(--text-1) 0 45%, var(--dip) 50%, var(--text-1) 55% 100%);
    background-size: 250% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
}
.stage__tag { margin-top: clamp(12px, 2vw, 24px); font-size: clamp(20px, 2vw, 28px); font-weight: 300; letter-spacing: -.02em; color: var(--text-2); }
.stage__statement { position: relative; z-index: 2; max-width: 16em; margin-top: clamp(56px, 8vw, 96px); font-size: clamp(28px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; text-align: center; text-wrap: balance; }
.stage__cta { margin-top: 32px; }
.stage__visual { position: relative; z-index: 1; width: 100%; max-width: 1180px; min-width: 0; margin-top: clamp(44px, 8vh, 72px); }

/* ───────── Simple-mode app mock ───────── */
.app {
    --app-h: 38em;
    font-size: clamp(10px, 2.9vw, 13px);
    height: var(--app-h);
    display: flex; flex-direction: column;
    background: var(--canvas-simple);
    border: 1px solid var(--border-default);
    border-radius: 1.3em;
    box-shadow: var(--float-shadow);
    overflow: hidden;
    color: var(--text-1);
    line-height: 1.45;
    user-select: none;
}
.app .ic { width: 1.25em; height: 1.25em; }
.app__bar { flex: none; position: relative; display: flex; align-items: center; gap: .5em; height: 2.9em; padding: 0 1.1em; border-bottom: 1px solid var(--border-subtle); background: var(--bg-nav); }
.app__bar i { width: .8em; height: .8em; border-radius: 50%; background: var(--border-default); }
.app__title { position: absolute; left: 50%; transform: translateX(-50%); font-size: .95em; font-weight: 500; color: var(--text-3); }
.app__modes { margin-left: auto; --n: 3; --at: 0; }
.app__modes b { font-weight: inherit; }
.app__modes .ic { width: 14px; height: 14px; }
.app__body { flex: 1; min-height: 0; display: flex; }

.app__side { flex: none; width: 14em; display: flex; flex-direction: column; gap: .15em; padding: 1em .8em; border-right: 1px solid var(--border-subtle); overflow: hidden; }
.app__nav, .app__chat { display: flex; align-items: center; gap: .7em; min-height: 2.35em; padding: 0 .75em; border-radius: .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__nav { font-weight: 500; }
.app__nav .ic { color: var(--text-2); }
.app__nav--subtle { color: var(--text-2); font-weight: 400; }
.app__group { margin: 1.1em .75em .35em; font-size: .9em; font-weight: 500; color: var(--text-3); }
.app__chat { display: block; line-height: 2.35em; color: var(--text-2); }
.app__chat.is-on { background: var(--bg-active); color: var(--text-1); font-weight: 500; }

.app__main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 1.4em 1.5em 1.3em; }
.app__hello { position: absolute; inset: 0 0 5.4em; display: none; align-items: center; justify-content: center; gap: 1.2em; }
.app__hello .om { width: 4.3em; height: 4.3em; }
.app__hello-title { display: block; font-size: 3.2em; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.app__hello-sub { display: flex; align-items: center; gap: 2px; margin-top: .5em; font-size: 1.3em; font-weight: 300; color: var(--text-2); letter-spacing: -.01em; }
.app__caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--accent); }
html.js:not(.reduce-motion) .app__caret { animation: blink .8s steps(1) infinite; }

.app__thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1em; max-width: 44em; width: 100%; margin: 0 auto; padding-bottom: 1.4em; }
.app__you { align-self: flex-end; max-width: 80%; padding: .85em 1.15em; border-radius: 1.4em; background: var(--composer); border: 1px solid var(--border-subtle); font-size: 1.05em; }
.app__work { position: relative; display: grid; font-size: .95em; color: var(--text-2); }
.app__work > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .6em; }
.app__work-run { visibility: hidden; }
.app__work-ok .ic { color: var(--ok-fg); }
.app__spin { width: 1em; height: 1em; border-radius: 50%; border: 1.5px solid var(--border-default); border-top-color: var(--text-1); }
html.js:not(.reduce-motion) .app__spin { animation: orbit .8s linear infinite; }
.app__sen { font-size: 1.12em; line-height: 1.55; max-width: 34em; }
.app__card { display: flex; align-items: center; gap: .9em; max-width: 26em; padding: .8em .8em .8em .9em; border-radius: 1.1em; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.app__card-ic { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .8em; background: var(--bg-active); color: var(--text-1); }
.app__card-ic .ic { width: 1.4em; height: 1.4em; }
.app__card-txt { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.app__card-txt b { font-weight: 600; }
.app__card-txt span { font-size: .9em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__card-btn { flex: none; display: inline-flex; align-items: center; height: 2.3em; padding: 0 1.1em; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: .95em; }

.app__composer { flex: none; display: flex; align-items: center; gap: .5em; max-width: 44em; width: 100%; margin: 0 auto; min-height: 3.9em; padding: .5em .55em .5em .6em; border-radius: 1.7em; background: var(--composer); border: 1px solid var(--composer-edge); box-shadow: var(--shadow-subtle); }
.app__plus, .app__mic { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; color: var(--text-2); }
.app__plus { border: 1px solid var(--border-subtle); }
.app__field { position: relative; flex: 1; min-width: 0; display: grid; font-size: 1em; white-space: nowrap; overflow: hidden; }
.app__field > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.app__ph { color: var(--text-4); }
.app__typed { visibility: hidden; }
.app__send { flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--bg-active); color: var(--text-3); transition: background-color 200ms var(--e-out), color 200ms var(--e-out); }

/* ───────── Layout ───────── */
@media (min-width: 700px) and (max-width: 1023px) {
    .app { font-size: 12px; --app-h: 36em; }
}
@media (max-width: 699px) {
    .app__modes b { display: none; }
    .app__modes > span:not(.seg__pill) { padding: 0 9px; }
    .app__side { display: none; }
    .app__main { padding: 1.1em 1.1em 1.1em; }
    .app { --app-h: 30em; border-radius: 1.2em; }
    .app__hello .om { width: 3.4em; height: 3.4em; }
    .app__hello-title { font-size: 2.6em; }
}
@media (min-width: 1024px) {
    .app { font-size: clamp(11px, .98vw, 14px); --app-h: 35em; }
}
@media (min-width: 1600px) {
    .brand .om { width: 34px; height: 34px; }
    .brand__name { font-size: 21px; }
}
@media (max-width: 699px) {
    .stage__name { font-size: clamp(88px, 28vw, 140px); }
}

.stage__seam { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-subtle); z-index: 3; }
.signal { position: absolute; top: 0; left: 0; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--text-1) 30%, var(--text-1) 70%, transparent); opacity: 0; }

/* ───────── Pinned scene ───────── */
html.js:not(.reduce-motion) .stage { height: calc(100svh + 150vh); --t0: 84svh; --t1: 35svh; }
html.js:not(.reduce-motion) .stage__pin { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; display: block; overflow: hidden; }
html.js:not(.reduce-motion) .stage__bar { display: flex; position: absolute; left: var(--pad-x); right: var(--pad-x); top: 0; }
html.js:not(.reduce-motion) .stage__bar .brand { opacity: calc(clamp(0, calc((var(--p, 0) - .2) / .15), 1) * (1 - var(--k, 0))); }
html.js:not(.reduce-motion) .stage__bar-cta { opacity: calc(1 - var(--k, 0)); }
html.js:not(.reduce-motion) .stage__cta { display: none; }
html.js:not(.reduce-motion) .stage__lockup { position: absolute; left: 0; right: 0; top: clamp(64px, 14svh, 150px); margin: 0; padding: 0 var(--pad-x); transform-origin: 50% 40%; translate: 0 calc(var(--e, 1) * -7svh); scale: calc(1 - var(--e, 1) * .4); opacity: clamp(0, calc(1 - var(--e, 1) * 2.4), 1); }
html.js:not(.reduce-motion) .stage__mark { width: clamp(72px, min(9vw, 14svh), 128px); height: clamp(72px, min(9vw, 14svh), 128px); }
html.js:not(.reduce-motion) .stage__name { font-size: clamp(96px, min(16vw, 26svh), 240px); }
html.js:not(.reduce-motion) .stage__statement { --st: clamp(0, calc((var(--p, 0) - .18) / .32), 1); position: absolute; left: var(--pad-x); right: var(--pad-x); top: clamp(72px, 14svh, 150px); margin: 0 auto; opacity: calc(clamp(0, calc((var(--p, 0) - .16) / .04), 1) * var(--sto, 1)); translate: 0 calc(var(--sty, 0) * 1px); }
/* After the hand-off (modes.js) the hero is empty, so it can unpin unseen. */
html.js:not(.reduce-motion) .stage.is-past :is(.stage__statement, .stage__bar) { visibility: hidden; }
/* modes.js flies a copy of the mark into the app window; hide the original meanwhile. */
html.js:not(.reduce-motion) .stage.is-fly .stage__mark { visibility: hidden; }
html.js:not(.reduce-motion) .stage__statement .w { opacity: calc(.12 + .88 * clamp(0, calc(var(--st) * 9 - var(--i)), 1)); }
html.js:not(.reduce-motion) .stage__visual { display: none; }
html.js:not(.reduce-motion) :is(.stage__seam, .signal) { display: none; }
@media (max-width: 699px) {
    html.js:not(.reduce-motion) .stage { --t0: 88svh; --t1: 37svh; }
    html.js:not(.reduce-motion) .stage__statement { top: clamp(64px, 13svh, 120px); }
}
@media (min-width: 700px) and (max-width: 1023px) {
    html.js:not(.reduce-motion) .stage { --t0: 82svh; --t1: 33svh; }
}
@media (min-width: 1024px) and (max-height: 760px) {
    html.js:not(.reduce-motion) .stage { --t0: 82svh; --t1: 36svh; }
}

@media (max-aspect-ratio: 4/5) {
    html.js:not(.reduce-motion) .stage { --t0: 64svh; }
    html.js:not(.reduce-motion) .stage__lockup { top: 0; height: calc(var(--t0) - 16px); justify-content: center; padding-top: clamp(64px, 9svh, 88px); }
}

/* ───────── Entrance — StartupConnectingView port ───────── */
/* The mark builds itself: the two strokes travel in along the diagonal the S
   descends — upper first, lower trailing a beat — gliding to a stop on the
   app's arrive curve while the tile settles out of a slight counter-rotation
   and undersize. The float/breathe clocks already run, so it lands alive. */
html.js:not(.reduce-motion) .stage__mark .om__tile { animation: om-in-tile 1400ms cubic-bezier(.16, 1, .3, 1) both; transform-box: view-box; transform-origin: 627px 627px; }
html.js:not(.reduce-motion) .stage__mark .om__b--top { animation: om-in-top 1040ms cubic-bezier(.16, 1, .3, 1) 80ms both; }
html.js:not(.reduce-motion) .stage__mark .om__b--bot { animation: om-in-bot 1040ms cubic-bezier(.16, 1, .3, 1) 440ms both; }
@keyframes om-in-tile { 0% { opacity: 0; transform: scale(.88) rotate(-4deg); } 35% { opacity: 1; } }
@keyframes om-in-top { 0% { opacity: 0; transform: translate(-376px, -276px) scale(.86); } 45% { opacity: 1; } }
@keyframes om-in-bot { 0% { opacity: 0; transform: translate(376px, 276px) scale(.86); } 45% { opacity: 1; } }
/* The name resolves like a focus pull once the mark has nearly landed. */
html.js:not(.reduce-motion) .stage__name .l { animation: focus-in 850ms var(--e-out) 1050ms both, name-shimmer 2400ms linear 300ms infinite; }
@keyframes focus-in { from { opacity: 0; transform: translateY(18px); filter: blur(16px); } }
@keyframes name-shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* Ambient mark life: the app's 3.2s glint clock — a 3D lean on two
   out-of-phase sines plus a vertical drift — with a separate 3.6s breathe. */
html.js:not(.reduce-motion) .stage__mark { animation: mark-float 3200ms var(--e-io) infinite, mark-breathe 3600ms var(--e-io) infinite alternate; transform-origin: 50% 50%; }
@keyframes mark-float {
    0%, 100% { transform: perspective(700px) rotateY(0deg) rotateX(6deg) translateY(5px); }
    25% { transform: perspective(700px) rotateY(11.5deg) rotateX(3.4deg) translateY(0); }
    50% { transform: perspective(700px) rotateY(0deg) rotateX(-6deg) translateY(-5px); }
    75% { transform: perspective(700px) rotateY(-11.5deg) rotateX(-3.4deg) translateY(0); }
}
@keyframes mark-breathe { to { scale: 1.02; } }
html.js:not(.reduce-motion) .stage__tag .w { display: inline-block; animation: rise-in 420ms var(--e-out) calc(1500ms + var(--i, 0) * 80ms) both; }
html.js:not(.reduce-motion) .stage__bar { animation: fade-in 400ms var(--e-out) 1650ms both; }
@keyframes visual-in { from { opacity: 0; transform: translateY(40px); } }
html.js:not(.reduce-motion) .stage[data-fired] .signal { animation: signal-run 900ms linear both; }
@keyframes signal-run { 0% { opacity: 0; transform: translateX(-120px); } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(100vw); } }
@media (max-width: 640px) {
    .stage__seam .signal { display: none; }
}