.activation-page { min-height:100svh; display:flex; flex-direction:column; overflow-x:hidden; }
.activation-header { width:min(90%,1320px); margin:0 auto; padding:28px 0; }
.activation-scene { position:relative; flex:1; width:min(90%,1120px); margin:0 auto; display:flex; align-items:center; padding:40px 0 55px; isolation:isolate; contain:paint; }
.activation-content { width:560px; max-width:100%; }
.activation-content h1 { font-size:clamp(48px,6.8vw,86px); line-height:1.04; letter-spacing:-.035em; margin:0 0 25px; font-weight:800; }
.activation-promise { font-size:21px; color:var(--ink); line-height:1.5; margin:0 0 25px; }
.activation-action { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:60px; max-width:100%; padding:16px 25px; border:0; border-radius:100px; background:linear-gradient(110deg,#0074df,#0067e8); color:#fff; font-size:16px; font-weight:750; text-align:left; }
.activation-action svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none; }
.activation-action:hover:not(:disabled) { background:#006bd4; }
.activation-action:focus-visible { outline:3px solid #a1dcff; outline-offset:5px; }
.activation-action:disabled { cursor:not-allowed; background:#123d70; color:#c8d5e5; }
.activation-next { font-size:15px; line-height:1.6; color:var(--muted); margin:18px 0 0; }
.activation-boundary { font-size:12px; line-height:1.5; color:var(--muted); margin:13px 0 0; max-width:42ch; }
.activation-reassurance { border-top:1px solid var(--line); margin-top:35px; padding-top:22px; max-width:480px; }
.activation-reassurance h2 { text-transform:uppercase; font-size:12px; letter-spacing:.09em; margin:0 0 9px; }
.activation-reassurance p { font-size:14px; line-height:1.65; color:var(--muted); margin:0; }
.activation-footer { width:min(90%,1320px); margin:0 auto; padding:20px 0 24px; font-size:12px; color:var(--muted); }
.activation-footer a { text-decoration:underline; text-underline-offset:4px; }
.activation-handoff { margin-top:22px; max-width:380px; }
.activation-handoff label { display:block; font-size:12px; margin-bottom:8px; }
.activation-handoff input { width:100%; border:1px solid var(--line); border-radius:8px; padding:14px 16px; min-height:50px; font:inherit; font-size:15px; background:#080f1a; color:var(--muted); }
.activation-handoff .activation-action { width:100%; margin-top:12px; }
.activation-page [hidden] { display:none !important; }
@media(max-width:700px) {
 .activation-header { padding:20px 0; }
 .activation-header .brand { font-size:21px; }
 .activation-scene { padding:40px 0 30px; align-items:flex-start; }
 .activation-content h1 { font-size:clamp(43px,10.6vw,65px); margin-bottom:22px; }
 .activation-promise { font-size:17px; max-width:28ch; }
 .activation-action { font-size:14px; min-height:54px; }
 .activation-reassurance { margin-top:28px; }
 .activation-reassurance p { font-size:12px; }
 .activation-footer { padding-top:12px; }
}
/* Product preview: actual extension proportions, one authored message-to-Abyss sequence. */
.activation-scene { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:50px; contain:none; }
.activation-content { width:auto; }
.activation-product { margin:0; width:420px; max-width:100%; }
.demo-stage { position:relative; height:540px; isolation:isolate; }
.demo-stage:before { content:""; position:absolute; inset:65px 0 25px; z-index:-1; background:radial-gradient(ellipse at 50% 45%,#078ff51a,transparent 65%); opacity:1; transition:opacity 700ms ease-out; }
.demo-toolbar { position:absolute; top:0; left:10px; right:10px; height:43px; display:flex; align-items:center; gap:20px; border-bottom:1px solid #253341; color:#8194a8; font-size:11px; }
.demo-toolbar img { margin-left:0; padding:2px; background:#0b2239; border-radius:5px; outline:1px solid #2c82c0; }
.demo-toolbar-dots { margin-left:auto; letter-spacing:3px; }
.demo-popup { position:absolute; top:59px; left:30px; width:360px; height:448px; border-radius:12px; overflow:hidden; box-shadow:0 20px 45px #0008; }
.demo-popup iframe { display:block; width:360px; height:448px; border:0; }
.demo-message { position:absolute; z-index:2; top:123px; left:-25px; width:209px; padding:13px 16px; border:1px solid #395166; border-radius:8px; background:#0c1724; color:#eff6ff; box-shadow:0 10px 24px #0006; pointer-events:none; animation:message-to-abyss 1550ms both; }
.demo-message>span { font-size:13px; font-weight:700; }
.demo-message p { font-size:11px; color:#b3c2d0; margin:3px 0 7px; }
.demo-message small { font-size:9px; color:#75c9ff; }
.demo-message.is-stream { width:174px; padding:9px 12px; --pull-x:148px; }
.demo-message.is-stream>span { font-size:11px; }
.demo-message.is-stream p { font-size:10px; }
[data-paused="true"] .demo-message { animation-play-state:paused; }
@keyframes message-to-abyss {
  0% { opacity:0; transform:translate(-45px,calc(-35px + var(--lane,0px))) scale(.95); filter:blur(3px); }
  23% { opacity:1; transform:translate(0,var(--lane,0px)) scale(1); filter:blur(0); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  48% { opacity:1; transform:translate(8px,var(--lane,0px)) scale(1); filter:blur(0); animation-timing-function:cubic-bezier(.6,0,.95,.55); }
  100% { opacity:0; transform:translate(var(--pull-x,132px),45px) scale(.04) rotate(-18deg); filter:blur(3px); }
}
.activation-product figcaption { display:flex; justify-content:space-between; align-items:center; padding:0 28px; font-size:10px; color:#9cacc0; margin:0; }
.demo-pause { padding:6px 0; border:0; background:none; color:#a7c1db; text-decoration:underline; text-underline-offset:4px; font-size:10px; cursor:pointer; }
.demo-pause:focus-visible { outline:2px solid #91d6ff; outline-offset:4px; }
.demo-description { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:1000px) {
 .activation-scene { grid-template-columns:minmax(0,1fr) 360px; gap:20px; }
 .activation-content h1 { font-size:clamp(43px,6.4vw,72px); }
 .activation-product { width:360px; }
 .demo-popup { left:0; }
 .demo-message { left:-15px; }
}
@media(max-width:760px) {
 .activation-scene { display:flex; flex-direction:column; gap:36px; align-items:stretch; }
 .activation-product { width:330px; align-self:center; }
 .demo-stage { height:420px; }
 .demo-toolbar { left:6px; right:6px; }
 .demo-popup { left:calc(50% - 180px); transform:scale(.78); transform-origin:50% 0; }
 .demo-message { display:none; }
 .activation-product figcaption { justify-content:center; padding:0; }
 .activation-product figcaption button { display:none; }
}
@media(prefers-reduced-motion:reduce) { .demo-message { display:none; } .demo-stage * { animation:none !important; transition:none !important; } }

.demo-stage[data-phase="off"]:before { opacity:0; }