@font-face{font-family:CentreDisplay;src:url('assets/AbrilFatface-Regular.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}html{background:#080a0d;color:#ecedf0;scroll-behavior:auto}body{margin:0;font-family:Arial,sans-serif}a{color:inherit}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #8dd1ff;outline-offset:4px}
.journey{height:420vh}.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 74% 72%,#1c2229 0%,#13181e 38%,#0c1015 66%,#080a0d 100%)}canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.poster{position:absolute;width:100%;height:100%;object-fit:contain}.scene-ready .poster{display:none}.hero-copy,.finish-copy{position:absolute;left:6%;top:34%;width:30%;z-index:2}.hero-copy{visibility:hidden}.scene-ready .hero-copy{visibility:visible}h1{font-family:CentreDisplay,Georgia,serif;font-size:clamp(48px,6.4vw,104px);font-weight:400;margin:0 0 38px;line-height:1}p{font-size:clamp(15px,1.35vw,21px);line-height:1.55;max-width:27ch}.support{font-size:13px;color:#9ba2ae;margin:28px 0 40px}.hero-copy a{font-size:13px;text-decoration:none}.hero-copy a span{margin-left:12px}.finish-copy{opacity:0;pointer-events:none}.finish-copy h2{font-size:clamp(32px,4vw,64px);line-height:1.05;letter-spacing:-.045em;font-weight:500}.finish-copy p{color:#aab0bc}.hint{position:absolute;bottom:4%;left:6%;color:#929aa7;font-size:11px;letter-spacing:.1em}.hint span{padding-left:20px}.skip{position:fixed;z-index:20;top:10px;left:10px;padding:12px;background:white;color:black;transform:translateY(-160%)}.skip:focus{transform:none}.live-screen{position:absolute;z-index:3;background:#f8f9f8;color:#19231c;border-radius:14% / 6%;overflow:hidden;padding:5% 1% 1%;display:flex;flex-direction:column}.live-screen[hidden]{display:none}.live-screen h2{font:700 16px/1.2 Arial;margin:8px 0}.status{display:flex;justify-content:space-between;font-size:9px;padding:0 8px}.board-demo{min-height:0;flex:1}.fallback-note{position:absolute;bottom:10px;left:6%;font-size:12px;color:#bcc4cd}.fallback .journey{height:100vh}.fallback .hero-copy,.fallback .finish-copy,.fallback .hint{display:none}
@media(max-width:819px){.hero-copy{top:7%;left:7%;width:86%}h1{font-size:52px;margin-bottom:16px}.hero-copy p{max-width:30ch;font-size:15px}.support{display:none}.hero-copy a{display:inline-block;margin-top:8px}.finish-copy{top:4%;left:7%;width:86%}.finish-copy h2{font-size:25px;margin-bottom:10px}.finish-copy p{font-size:12px;max-width:32ch}.hint{left:7%;bottom:2%}.live-screen{padding-top:4%;border-radius:14% / 6%}}
@media(prefers-reduced-motion:reduce){.journey{height:100svh}.hint{display:none}}
.live-screen{padding:12px 9px 10px}.live-screen::before{content:"";position:absolute;top:2.5%;left:34%;width:32%;height:4%;border-radius:999px;background:#08090b;pointer-events:none}.live-screen .status{margin-bottom:14px}.live-screen .report-panel p{font-size:9px;line-height:1.4;max-width:none;margin:6px 0}.scene-ready.fallback .poster{display:block}.fallback canvas{display:none}

/* Restore the earlier airy desktop copy layout without changing mobile framing. */
@media(min-width:820px){
 .hero-copy{left:4%;top:34%;width:35%;max-width:520px;}
 .hero-copy h1{font-size:clamp(48px,5.3vw,88px);margin-bottom:38px;}
 .hero-copy p{font-size:clamp(16px,1.25vw,20px);line-height:1.65;max-width:32ch;}
 .hero-copy .support{font-size:13px;line-height:1.7;margin:30px 0 46px;}
 .hero-copy a{display:inline-block;padding:8px 0;}
}

.live-screen{padding:0}.live-screen iframe{display:block;border:0;width:100%;height:100%;background:white}.live-screen::before{z-index:1}.finish-copy{pointer-events:auto}.demo-views{display:flex;gap:8px;flex-wrap:wrap}.demo-views button{border:1px solid #5a626b;border-radius:999px;padding:10px 14px;color:#e9edf1;background:transparent;font-size:12px}.demo-views button[aria-pressed="true"]{background:#e9edf1;color:#11161b}

/* Outcome story follows the existing motion span, without retiming the halo. */
.journey{height:720vh}
.outcome-copy{position:absolute;left:6%;top:29%;width:35%;max-width:520px;z-index:2;visibility:hidden;pointer-events:none}
.scene-ready .outcome-copy{visibility:visible}
.outcome-beat{position:absolute;inset:0 auto auto 0;width:100%;opacity:0}
.outcome-beat h2,.outcome-statement{font-size:clamp(28px,3.05vw,49px);line-height:1.17;letter-spacing:-.035em;font-weight:500;margin:0 0 24px;max-width:19ch}
.outcome-beat p:not(.outcome-statement){font-size:clamp(16px,1.2vw,20px);line-height:1.6;max-width:35ch;color:#c2c8d0}
@media(max-width:819px){.outcome-copy{top:5%;left:7%;width:86%;max-width:none}.outcome-beat h2,.outcome-statement{font-size:clamp(25px,5.6vw,34px);max-width:27ch;margin-bottom:14px}.outcome-beat p:not(.outcome-statement){font-size:15px;line-height:1.5;max-width:42ch}}
@media(prefers-reduced-motion:reduce){.journey{height:400vh}}
.fallback .outcome-copy{display:none}