/* Homepage feature animation, styled against the native Interview window. */
.moon-hero{padding-top:142px}.hero-layout{max-width:1480px;width:calc(100% - 80px);display:grid;grid-template-columns:minmax(285px,.75fr) minmax(0,1.65fr);align-items:center;gap:42px;padding-bottom:32px}.hero-layout .hero-intro{width:100%;margin:0}.hero-layout .hero-intro h1{font-size:clamp(38px,4vw,61px)}.hero-layout .hero-intro p{font-size:16px;margin:22px 0;max-width:350px}.hero-layout .eyebrow{font-size:10px;letter-spacing:.13em}.hero-layout .actions{flex-wrap:wrap}.hero-layout .platform-note{font-size:12px;flex-wrap:wrap}.hero-layout .btn{font-size:14px;padding:12px 18px;gap:15px;min-height:46px}.hero-motion{min-width:0;--motion-progress:0;--scene-progress:0}.motion-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 15px;font-size:15px;color:#e6ecfa}.motion-chapter{display:flex;gap:12px;align-items:center}.motion-chapter b{font-size:11px;border:1px solid #ffffff35;color:#f4d799;padding:5px 7px;border-radius:6px;font-weight:500}.motion-duration{font-size:11px;color:#bac8e1}.motion-stage{aspect-ratio:960/700;position:relative;overflow:hidden;border-radius:17px;border:1px solid #c9d9ff30;background:radial-gradient(ellipse at 60% 20%,#3b536e66,transparent 70%),linear-gradient(150deg,#142338,#091222);box-shadow:0 24px 70px #0005}.motion-canvas{width:960px;height:700px;position:absolute;left:0;top:0;transform-origin:top left;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;color:#28303c;overflow:hidden}.native-window{position:absolute;left:110px;top:38px;width:740px;height:624px;border-radius:15px;overflow:hidden;background:linear-gradient(130deg,#eeeaf4ee,#dcd6e8ee);border:1px solid #cfc9d6;box-shadow:0 18px 45px #03091466;transition:left .4s ease,width .4s ease,top .4s ease,height .4s ease}.native-title{height:41px;background:linear-gradient(#ece8f2,#d2ccdf);position:relative;display:flex;align-items:center;justify-content:center}.native-lights{position:absolute;left:17px;display:flex;gap:9px}.native-lights i,.coding-browser i{width:12px;height:12px;background:#fa615d;border:1px solid #0002;border-radius:50%}.native-lights i:nth-child(2),.coding-browser i:nth-child(2){background:#f6c04c}.native-lights i:nth-child(3),.coding-browser i:nth-child(3){background:#35c768}.native-mode{display:flex;align-items:center;gap:8px;font:19px ui-monospace,Menlo,monospace;letter-spacing:1.2px;color:#5e477e}.native-mode svg{width:27px;height:27px;fill:none;stroke:#64508b;stroke-width:1.5;stroke-linecap:round}.native-tools{height:58px;display:flex;gap:18px;align-items:center;padding:0 15px;background:linear-gradient(#e0dbe8,#d2ccdf);border-bottom:1px solid #afa6be66}.native-tools>svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}.native-tool{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #adb1bb;background:linear-gradient(#fff,#e1e7eb);border-radius:10px;font-size:21px;padding:4px 13px;min-width:110px;box-shadow:0 1px 2px #0002;line-height:1.2}.native-tool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.native-listen,.is-coding.clip-active .native-clip{background:linear-gradient(#ef645e,#d92d31);border-color:#b7282d;color:white;box-shadow:inset 0 2px 3px #a8142340}.native-tool-spacer,.native-status-spacer{flex:1}.native-gear{font-size:31px;line-height:1}.native-status{display:flex;align-items:center;gap:12px;font-size:14px;height:37px;padding:0 15px;background:linear-gradient(#e8e2ef,#d5cce2);white-space:nowrap}.native-meters{color:#448456;font-size:15px}.native-meters span{color:#343944}.native-content{padding:19px 19px 0;height:calc(100% - 217px);overflow:hidden}.native-time{color:#697889;font-size:13px;margin-bottom:12px}.native-caption{background:#fcf8f8;border:1px solid #ded9df;border-radius:14px;overflow:hidden}.caption-top{display:flex;align-items:center;justify-content:space-between;padding:15px 17px 2px;color:#b34a2e;font-size:16px;font-weight:550}.answer-this{font-size:16px;color:#333a45;border:1px solid #bfc2cb;border-radius:7px;padding:4px 12px;background:linear-gradient(#f6f4f8,#dfdbe6);font-weight:400;transition:background .1s,transform .1s}.spoken-question{font-size:24px!important;line-height:1.4!important;color:#b84b30!important;padding:8px 17px 17px!important;margin:0!important;min-height:92px;font-weight:450}.native-response{background:#f7f5fc;padding:15px 17px 19px;color:#6434af;opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s}.answer-visible .spoken-scene .native-response{opacity:1;transform:none}.native-response-title{font-size:17px;font-weight:550;margin-bottom:11px}.native-response p{color:inherit;font-size:21px;line-height:1.43;margin:0 0 10px}.native-response strong{font-weight:550}.answer-last{font-size:18px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}.answer-finished .answer-last{opacity:1;transform:none}.native-composer{position:absolute;left:15px;right:15px;bottom:12px;height:57px;border-radius:14px;background:#f8f6fc;border:1px solid #ddd9e4;display:flex;align-items:center;justify-content:flex-end;padding:0 18px;font-size:33px;color:#a8a7ae}.coding-page{position:absolute;left:24px;top:62px;width:630px;height:586px;background:#fff;border:1px solid #d7dfea;border-radius:13px;opacity:0;transform:translateX(-25px);transition:opacity .3s,transform .4s;overflow:hidden;box-shadow:0 15px 40px #0004}.coding-browser{height:38px;background:#e9ecf1;display:flex;align-items:center;padding:0 13px;gap:7px;font-size:13px;color:#58647a}.coding-browser i{width:10px;height:10px}.coding-browser span{margin-left:70px}.coding-paper{padding:20px;width:452px}.coding-tabs{font-size:14px;padding-bottom:16px;border-bottom:1px solid #e2e6ed;margin-bottom:17px}.coding-tabs span{margin-left:24px;color:#98a1ae}.coding-paper h3{font:600 27px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.5px;margin:10px 0 17px}.coding-difficulty{color:#167447;background:#edf7f0;border-radius:12px;font-size:12px;padding:3px 9px}.coding-paper p{color:#445268;font-size:17px;line-height:1.5;margin-bottom:15px}.coding-example{border-left:3px solid #d8dfe9;padding:0 13px;font-size:15px;line-height:1.5}.coding-example b{display:block;font-size:14px;margin-bottom:5px}.coding-example code{display:block;margin-bottom:7px;color:#293a50}.coding-paper .coding-note{font-size:13px;margin-top:14px}.coding-editor{border-top:1px solid #dfe4ec;padding-top:13px;font-size:13px;margin-top:16px}.coding-editor>span{color:#758196}.coding-editor code{display:block;margin-top:10px;line-height:1.5}.coding-editor b{color:#8466ad}.is-coding .coding-page{opacity:1;transform:none}.is-coding .native-window{left:487px;top:38px;width:450px;height:624px}.is-coding .native-tools{gap:12px;padding:0 10px}.is-coding .native-tool{min-width:88px;font-size:18px;padding:4px 8px;gap:5px}.is-coding .native-tools>svg{width:20px;height:20px}.is-coding .native-status{font-size:11px;gap:8px;padding:0 10px}.is-coding .native-meters{font-size:12px}.is-coding .native-content{padding:14px 12px 0}.code-scene{display:none}.is-coding .spoken-scene{display:none}.is-coding .code-scene{display:block}.code-scene .native-caption{opacity:0;transition:opacity .2s}.code-visible .code-scene .native-caption{opacity:1}.code-question{font-size:14px;color:#c3472a;padding:12px 14px 4px;font-weight:600}.code-scene .native-caption>p{color:#bf442a;font-size:18px;line-height:1.3;margin:0;padding:0 14px 10px}.code-response{opacity:1;transform:none;padding:10px 13px}.code-response .native-response-title{font-size:14px;margin-bottom:6px}.code-response p.code-approach{font-size:16px;margin:0 0 9px}.native-code{background:#edf0f7;color:#334456;border:1px solid #dadfe8;border-radius:7px;overflow:hidden}.native-code>div{font-size:11px;border-bottom:1px solid #d9e0e8;padding:5px 9px;color:#5f6d82}.native-code>div span{float:right}.native-code pre{margin:8px;font:12.5px/1.52 ui-monospace,Menlo,Consolas,monospace;white-space:pre}.native-code pre span{color:#8451b0}.code-complexity{display:flex;gap:20px;font-size:14px;margin-top:10px;opacity:0;transition:opacity .2s}.code-finished .code-complexity{opacity:1}.clip-region{position:absolute;left:38px;top:162px;width:421px;height:312px;border:2px solid #3d95f9;border-radius:2px;z-index:2;opacity:0;clip-path:inset(0 100% 100% 0)}.clip-selecting .clip-region,.clip-selected .clip-region{opacity:1}.clip-selected .clip-region{clip-path:inset(-4px)}.clip-corner{position:absolute;width:7px;height:7px;background:white;border:1px solid #398bea}.c1{top:-4px;left:-4px}.c2{top:-4px;right:-4px}.c3{bottom:-4px;left:-4px}.c4{bottom:-4px;right:-4px}.clip-actions{position:absolute;top:8px;right:13px;display:flex;gap:6px;opacity:0;font-size:11px;white-space:nowrap}.clip-actions>span{background:linear-gradient(#fff,#e5e5ee);border:1px solid #bcb9c8;padding:4px 11px;border-radius:5px}.clip-selected .clip-actions{opacity:1}.motion-pointer{position:absolute;width:29px;height:37px;z-index:4;filter:drop-shadow(0 2px 3px #0004);opacity:0;pointer-events:none}.motion-click{position:absolute;width:44px;height:44px;border:3px solid #548ce8;border-radius:50%;z-index:3;opacity:0;pointer-events:none}.answer-pressed .answer-this,.generate-pressed .clip-generate{background:#c9bde0;transform:translateY(1px)}.motion-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:15px}.motion-progress{display:flex;gap:6px;flex:1}.motion-progress span{height:3px;background:#ffffff22;flex:1;border-radius:3px;position:relative;overflow:hidden}.motion-progress span:after{content:'';position:absolute;inset:0;background:#eed49a;transform-origin:left;transform:scaleX(0)}.hero-motion:not(.is-coding) .motion-progress span:first-child:after,.hero-motion.is-coding .motion-progress span:last-child:after{transform:scaleX(var(--scene-progress))}.hero-motion.is-coding .motion-progress span:first-child:after{transform:scaleX(1)}.motion-controls{display:flex;gap:6px}.motion-controls button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:34px;height:34px;padding:0 8px;border:1px solid #ffffff25;border-radius:7px;background:#17243a;color:#d8e4f5;font-size:19px}.motion-controls button:hover{background:#293a55}.motion-controls button span{font-size:11px}.motion-controls svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}.motion-note{font-size:10px;color:#8f9fb8;margin:9px 0 0;text-align:right;line-height:1.4}.hero-motion.is-paused *{transition:none!important}
@media(min-width:1700px){.hero-layout{gap:60px}.moon-hero{padding-top:165px}}
@media(max-width:1000px){.hero-layout{width:calc(100% - 48px);gap:25px;grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr)}.hero-layout .hero-intro h1{font-size:38px}.motion-duration{display:none}.motion-heading{font-size:13px}.hero-layout .hero-intro p{font-size:14px}.hero-layout .hero-intro .eyebrow{font-size:9px}}
@media(max-width:760px){.moon-hero{padding-top:100px}.hero-layout{width:calc(100% - 32px);display:flex;flex-direction:column;gap:24px;align-items:stretch}.hero-layout .hero-intro h1{font-size:36px}.hero-layout .hero-intro h1 br{display:none}.hero-layout .hero-intro .eyebrow{margin-bottom:9px;max-width:none}.hero-layout .hero-intro p{margin:12px 0;font-size:14px;max-width:none;line-height:1.5}.hero-layout .hero-intro .actions{gap:10px}.hero-layout .platform-note{margin-top:10px;font-size:11px}.motion-heading{margin-bottom:10px}.motion-controls button{height:36px;min-width:36px}.motion-note{font-size:9px}.hero-layout .btn{font-size:12px;padding:10px 13px;min-height:39px}.motion-footer{margin-top:10px}}
@media(min-width:761px){.hero-motion{width:100%;max-width:calc((100svh - 265px)*1.3714);justify-self:end}}
.native-status svg{width:14px;height:14px;vertical-align:-2px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.native-meters svg{width:16px;height:16px}.native-status>span{white-space:nowrap}

/* Revision: match the 505 × 690 native restore baseline; both scenes keep the same window size. */
.motion-stage{aspect-ratio:900/760}.motion-canvas{width:900px;height:760px}.native-window{left:197px;top:34px;width:505px;height:690px}.is-coding .native-window{left:374px;top:34px;width:505px;height:690px}.native-tools,.is-coding .native-tools{gap:15px;padding:0 12px}.native-tool,.is-coding .native-tool{min-width:84px;font-size:17px;padding:4px 9px;gap:6px}.native-tools>svg,.is-coding .native-tools>svg{width:23px;height:23px}.native-tools>img{width:29px;height:29px;object-fit:contain;flex:none}.native-title .stealth-eye{width:27px;height:27px;object-fit:contain}.native-status,.is-coding .native-status{font-size:12px;gap:8px;padding:0 12px}.native-status>span>img{width:19px;height:19px;display:inline-block;vertical-align:-5px}.native-meters{display:flex;gap:4px;align-items:center}.native-status .native-meters img{width:32px;height:22px}.native-content,.is-coding .native-content{padding:17px 15px 0;overflow:hidden;scrollbar-width:thin}.spoken-question{font-size:19px!important;min-height:90px;line-height:1.4!important}.caption-top{font-size:15px;padding:13px 14px 2px}.answer-this{font-size:13px;min-width:101px;text-align:center}.answer-this.is-generating{background:repeating-linear-gradient(100deg,#c6b4dd 0,#faf7ff 35px,#c6b4dd 72px);background-size:144px 100%;background-position-x:var(--wave-position,0px);color:#49385e}.native-response{padding:14px}.native-response-title{font-size:15px}.native-response p{font-size:17px;line-height:1.45;margin:0 0 12px}.native-response h4{font:600 17px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;color:#633ba7;margin:13px 0 5px}.answer-detail{opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}.answer-detail.visible{opacity:1;transform:none}.answer-last{font-size:17px;line-height:1.5;padding-top:5px}.native-content:after{content:'';display:block;height:8px}.code-response .native-response-title{font-size:15px}.code-analysis h4{font-size:17px}.code-analysis p{font-size:17px;line-height:1.45}.native-code pre{font-size:13.7px;line-height:1.65;margin:10px}.native-code>div{font-size:12px}.code-complexity{font-size:15px;justify-content:space-between;gap:10px;line-height:1.4}.code-response p.code-edge{font-size:14px;line-height:1.4;margin:9px 0 0}.coding-page{left:18px;top:82px;width:620px;height:608px}.coding-paper{width:351px;padding:18px}.coding-paper h3{font-size:24px;line-height:1.2}.coding-paper p{font-size:17px;line-height:1.5}.coding-difficulty{background:#fff3dc;color:#9b6a12}.coding-example code{font-size:15px}.coding-paper .coding-note{font-size:14px}.clip-region{left:29px;top:184px;width:320px;height:332px}.clip-actions{font-size:11px}.clip-actions>span{padding:0}.code-response{padding:13px}.code-question{font-size:15px}.code-scene .native-caption>p{font-size:19px}
@media(min-width:761px){.hero-motion{max-width:calc((100svh - 265px)*1.1842)}}
@media(max-width:760px){.hero-motion{max-width:none}.motion-stage{aspect-ratio:900/760}}

/* Circular pause/replay control; reduced-motion visitors get a still initial frame. */
.motion-stage{position:relative}.motion-play-overlay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:linear-gradient(#14233812,#08122155);display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;cursor:pointer;z-index:6;color:white}.motion-play-disc{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#f7dca0;box-shadow:0 8px 35px #09132760,0 0 0 8px #fff2;border:1px solid #fff8}.motion-play-disc svg{width:32px;height:32px;fill:#1d3550}.motion-play-caption{font-size:14px;font-weight:550;color:white;text-shadow:0 1px 8px #000;background:#102137de;border:1px solid #ffffff35;padding:8px 14px;border-radius:20px}.motion-play-overlay:hover .motion-play-disc{background:#ffe9bc;transform:scale(1.04)}.hero-motion.has-started .motion-play-overlay{inset:10px 10px auto auto;width:40px;height:40px;background:none;gap:0}.hero-motion.has-started .motion-play-disc{width:34px;height:34px;box-shadow:0 2px 10px #09132740;border:1px solid #fff8;background:#f7dca0eb}.hero-motion.has-started .motion-play-disc svg{width:18px;height:18px}.hero-motion.has-started .motion-play-caption{display:none}.hero-motion:not(.has-started) .motion-pointer,.hero-motion:not(.has-started) .motion-click{display:none}.hero-motion:not(.has-started) .motion-progress span:after{transform:scaleX(0)}
@media(max-width:760px){.motion-play-disc{width:62px;height:62px}.motion-play-disc svg{width:25px;height:25px}.motion-play-caption{font-size:12px}.motion-play-overlay{gap:12px}}

/* Brief spoken introduction, followed by the actual feature scenes. */
.motion-intro{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at center,#1c304bde,#101e31f5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;color:#f5f7fc}.is-intro .motion-intro{opacity:1;visibility:visible}.motion-intro img{width:82px;height:82px;border-radius:22px;box-shadow:0 5px 36px #0003;margin-bottom:26px}.motion-intro h3{font:600 47px/1.15 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-1.5px;margin:0 0 20px;color:#f8dfaa}.motion-intro p{font:400 25px/1.55 -apple-system,BlinkMacSystemFont,sans-serif;margin:0;color:#e8eef9}.is-intro .motion-pointer,.is-intro .motion-click{display:none}

/* Match RegionReadingIndicatorView: 44-point internal header, status at left, actions at top right. */
.clip-region{border:3px solid #8c949ef2;border-radius:8px;background:#00000029}
.clip-region:before{content:'';position:absolute;left:0;right:0;top:0;height:41px;background:#0000001a}
.clip-corner{width:8px;height:8px;background:transparent;border:0;border-color:#ffffffe6;border-style:solid}
.c1{left:3px;top:3px;border-width:2px 0 0 2px}.c2{right:3px;top:3px;border-width:2px 2px 0 0}.c3{left:3px;bottom:3px;border-width:0 0 2px 2px}.c4{right:3px;bottom:3px;border-width:0 2px 2px 0}
.clip-actions>span{display:flex;align-items:center;justify-content:center;height:24px;font-size:11px;font-weight:600;line-height:1;border:1px solid #bcb9c8;border-radius:5px;box-shadow:0 1px 2px #0002}
.clip-actions .clip-generate{width:116px}.clip-actions>span:last-child{width:54px}
.clip-generate.is-generating{opacity:.55;background:linear-gradient(#fff,#e5e5ee)}
.clip-badge{position:absolute;top:7px;left:5px;width:104px;height:26px;border-radius:13px;background:#000000ad;color:white;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;font-weight:600;opacity:0}
.clip-badge i{width:9px;height:9px;flex:none;border-radius:50%;background:#0a84ff}.clip-badge span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clip-selected .clip-badge{opacity:1}.clip-is-reading .clip-badge i{background:#30b0c7}.code-visible .clip-badge i{background:#30d158}

/* Reuse the established blue moonlit mountains-and-water brand artwork. */
.brand-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,#83bce852,#659ac42e),url('assets/moonlight.webp') 70% center/cover no-repeat}
.motion-intro{background:linear-gradient(150deg,#10274a8c,#10274a59)}
.native-window{background:linear-gradient(130deg,#eeeaf4ba,#dcd6e8ba)}
.native-title{background:linear-gradient(#ece8f2dc,#d2ccdfdc)}
.native-tools{background:linear-gradient(#e0dbe8d4,#d2ccdfd4)}
.native-status{background:linear-gradient(#e8e2efd6,#d5cce2d6)}
.native-caption{background:#fcf8f8dc}.native-response{background:#f7f5fce0}.native-composer{background:#f8f6fce0}

/* Lighter blue around the preview, retaining the established moonlit artwork. */
.hero-art{background-image:linear-gradient(0deg,var(--navy) 0%,transparent 38%),linear-gradient(90deg,#24486755,transparent 65%),linear-gradient(#78afdf20,#4e84b20d),url('assets/moonlight.webp')}

/* Left-aligned slogan with the animation centered on the page. */
.moon-hero{padding-top:132px}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) min(46vw,calc((100svh - 245px)*1.1842),720px) minmax(0,1fr);align-items:center;gap:24px;width:calc(100% - 80px);max-width:1600px}
.hero-layout .hero-intro{grid-column:1;text-align:left;max-width:350px}
.hero-layout .hero-intro h1{font-size:clamp(32px,3vw,48px)}
.hero-layout .hero-intro p{max-width:320px;margin:20px 0;font-size:15px;line-height:1.7}
.hero-layout .actions,.hero-layout .platform-note{justify-content:flex-start}
.hero-motion{grid-column:2;width:100%;max-width:none;margin:0;justify-self:center}
.motion-stage{background:transparent;border:0;box-shadow:none;border-radius:0}
.brand-backdrop{display:none}
.motion-intro,.motion-play-overlay{background:transparent}
.is-intro .native-window,.is-intro .coding-page{visibility:hidden}
.motion-intro h3,.motion-intro p{text-shadow:0 2px 16px #081629}
@media(max-width:1100px) and (min-width:761px){
 .hero-layout{width:calc(100% - 40px);gap:16px}
 .hero-layout .hero-intro h1{font-size:30px}
 .hero-layout .hero-intro p{font-size:14px}
 .hero-layout .btn{font-size:12px;padding:10px 12px;min-height:38px}
}
@media(max-width:760px){
 .moon-hero{padding-top:96px}
 .hero-layout{display:flex;flex-direction:column;align-items:stretch;width:calc(100% - 32px);gap:20px}
 .hero-layout .hero-intro{max-width:none}
 .hero-layout .hero-intro h1{font-size:36px}
 .hero-layout .hero-intro p{max-width:none;font-size:14px}
 .hero-motion{width:100%}
}

/* A quiet closing line after the coding result, before the next play. */
.motion-outro{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;visibility:hidden;opacity:0;transition:opacity .3s;background:transparent;pointer-events:none}
.motion-outro img{width:82px;height:82px;border-radius:22px;margin-bottom:26px}
.motion-outro h3{font:600 47px/1.15 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-1.5px;color:#f8dfaa;margin:0 0 20px}
.motion-outro p{font:400 30px/1.55 -apple-system,BlinkMacSystemFont,sans-serif;color:#e8eef9;margin:0;text-shadow:0 2px 16px #081629}
.is-outro .motion-outro{visibility:visible;opacity:1}
.is-outro .native-window,.is-outro .coding-page,.is-outro .clip-region,.is-outro .motion-pointer,.is-outro .motion-click{visibility:hidden}
.hero-motion.is-outro .motion-progress span:after{transform:scaleX(1)}

/* A larger closing message and one centered play control when paused. */
.motion-outro h3{font-size:60px}
.motion-outro p{font-size:38px;line-height:1.45}
.hero-motion .motion-play-overlay,.hero-motion.has-started .motion-play-overlay{inset:50% auto auto 50%;width:82px;height:82px;transform:translate(-50%,-50%);background:none;gap:0}
.hero-motion .motion-play-overlay[hidden]{display:none}
.hero-motion .motion-play-disc,.hero-motion.has-started .motion-play-disc{width:82px;height:82px;background:#f7dca0;box-shadow:0 8px 35px #09132760,0 0 0 8px #fff2}
.hero-motion .motion-play-disc svg,.hero-motion.has-started .motion-play-disc svg{width:32px;height:32px;fill:#1d3550}
@media(max-width:760px){
 .hero-motion .motion-play-overlay,.hero-motion.has-started .motion-play-overlay,.hero-motion .motion-play-disc,.hero-motion.has-started .motion-play-disc{width:56px;height:56px}
 .hero-motion .motion-play-disc svg,.hero-motion.has-started .motion-play-disc svg{width:24px;height:24px}
}

/* Match the native question action at the bottom-right of its paragraph. */
.spoken-scene .spoken-question{padding-bottom:8px!important}

.motion-stage{cursor:pointer}.motion-stage:focus-visible{outline:2px solid #f7dca0;outline-offset:5px}

.motion-end-actions{position:absolute;left:50%;top:75%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:14px;white-space:nowrap}
.motion-end-actions[hidden]{display:none}
.motion-end-actions button{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid #fff5;background:#213957;color:#f7dca0}
.motion-end-actions button:hover{background:#304e70}
.motion-end-actions svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#interview,#meeting,#plans{scroll-margin-top:0}
.home-plans{border-top:1px solid #ffffff18}
.home-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin:auto}
.home-plan{border:1px solid #8da7cd45;background:linear-gradient(145deg,#1c304b,#101c33);border-radius:20px;padding:36px;display:flex;flex-direction:column;align-items:flex-start}
.home-plan h3{font-size:28px;margin:0 0 12px}.home-plan>p{font-size:16px}
.home-plan .home-plan-price{font-size:42px;font-weight:600;color:#f5dba3;margin:10px 0}.home-plan-price small{font-size:15px;font-weight:400;color:#b5c5dd}
.home-plan ul{padding-left:20px;color:#c6d3e6;line-height:1.8;margin:16px 0 28px}.home-plan .btn{margin-top:auto}
@media(max-width:760px){.home-plan-grid{grid-template-columns:1fr}.home-plan{padding:26px}.motion-end-actions{gap:10px}.motion-end-actions button{width:40px;height:40px}.motion-end-actions .btn{font-size:12px}}

/* Local preview: a large moon reveal followed by imagined reactions. */
.motion-intro .intro-brand,.motion-intro .intro-reaction{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;will-change:opacity,transform}
.motion-intro .intro-moon{width:210px;height:210px;overflow:visible;filter:drop-shadow(0 0 24px #f7cf7659);margin-bottom:28px;flex:none}
.motion-intro .intro-brand h3{font-size:76px;line-height:1.12;margin:0 0 22px;color:#ffe0a0;letter-spacing:-2px}
.motion-intro .intro-brand p{font-size:35px;line-height:1.45;color:#f1f5ff}
.motion-intro .intro-reaction>span{font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:#efdaa9;margin-bottom:24px}
.motion-intro .intro-reaction p{font-size:78px;font-weight:550;line-height:1.2;letter-spacing:-2px;color:#f2f6ff;text-shadow:0 3px 28px #08182c}
.motion-intro .intro-reaction em{font-style:normal;color:#ffe1a6}
/* Let each new transcript line push the following action down naturally. */
.spoken-scene .spoken-question{min-height:0!important}

/* Three typographic voices; the shared playback clock controls their crossfades. */
.motion-intro [data-intro-beat="thanks"] p{font-family:Georgia,'Times New Roman',serif;font-size:78px;font-weight:400;font-style:italic;letter-spacing:-1.5px;line-height:1.2}
.motion-intro [data-intro-beat="thanks"] em{font-style:inherit}
.motion-intro [data-intro-beat="fantastic"] p{font-family:'Helvetica Neue',Arial,sans-serif;font-size:78px;font-weight:650;letter-spacing:-2.4px;line-height:1.2}
.motion-intro [data-intro-beat="partner"] p{font-family:'Trebuchet MS',Verdana,sans-serif;font-size:74px;font-weight:400;letter-spacing:-1.4px;line-height:1.25}

/* Float from the end of the transcript: share its last line when space allows. */
.spoken-scene .spoken-question{display:flow-root}
.spoken-question .answer-this{float:right;white-space:nowrap;margin-left:8px;line-height:1.2}

/* Two-fifths copy, three-fifths animation, leaving the moonlit right edge open. */
@media(min-width:761px){
 .hero-layout{width:auto;max-width:1380px;margin-left:clamp(32px,5.5vw,110px);margin-right:clamp(200px,22vw,420px);grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,2.4vw,46px)}
 .hero-layout .hero-intro{max-width:420px}
 .hero-layout .hero-intro h1{font-size:clamp(34px,3.1vw,54px)}
 .hero-layout .hero-intro p{max-width:360px;font-size:16px}
 .hero-layout .hero-motion{width:100%;max-width:none}
 .hero-layout .actions{gap:12px}
 .hero-layout .btn{font-size:14px;padding:12px 16px;min-height:46px}
}
@media(min-width:761px) and (max-width:1100px){
 .hero-layout{margin-left:32px;margin-right:32px;gap:24px}
 .hero-layout .hero-intro h1{font-size:clamp(32px,3.6vw,40px)}
 .hero-layout .hero-intro p{font-size:14px}
}

/* Keep the moonlit landscape across the entire first viewport. */
.moon-hero{min-height:100vh;min-height:100svh}
.hero-art{inset:0;height:100%;background-image:linear-gradient(0deg,#080f2529,transparent 42%),linear-gradient(90deg,#24486755,transparent 65%),linear-gradient(#78afdf20,#4e84b20d),url('assets/moonlight.webp')}

/* A compact sound toggle below the picture; no text or caption obstruction. */
.motion-sound-slot{height:70px;display:flex;align-items:center;justify-content:center;position:relative;z-index:8}
.motion-enable-sound{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid #b9d9ef;border-radius:50%;background:linear-gradient(145deg,#f5faff,#cce3f4);color:#234d6e;box-shadow:0 5px 18px #08172b45,0 0 0 4px #b8dcf518;cursor:pointer;transition:box-shadow .2s,transform .2s}
.motion-enable-sound[hidden]{display:none}
.motion-enable-sound:hover{box-shadow:0 7px 22px #08172b55,0 0 0 5px #b8dcf530;transform:scale(1.06)}
.motion-enable-sound:focus-visible{outline:3px solid #fff;outline-offset:5px}
.motion-enable-sound svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.motion-enable-sound.is-muted{color:#c33736}
.motion-enable-sound .sound-slash{display:none;stroke-width:2.4}
.motion-enable-sound.is-muted .sound-slash{display:block}
.motion-enable-sound.is-muted .sound-waves{display:none}
@media(prefers-reduced-motion:reduce){.motion-enable-sound{transition:none}.motion-enable-sound:hover{transform:none}}

/* Align the closing title and actions with the existing left-hand hero content. */
@media(min-width:761px){
 .motion-outro{justify-content:flex-start;padding-top:var(--outro-top,220px)}
 .motion-end-actions{top:var(--end-actions-top,75%)}
}

/* Balance the desktop columns: raise the animation and lower the copy slightly. */
.hero-layout .hero-motion{position:relative;top:-12px}
@media(min-width:761px){.hero-layout .hero-intro{position:relative;top:16px}}
@media(max-width:760px){.hero-layout .hero-motion{top:0}}

/* Separate the returning-user entrance from the main product navigation. */
.site-header .header-signin{flex-shrink:0;min-height:54px;padding:14px 22px;gap:10px;font-size:18px;font-weight:700;border-radius:12px;box-shadow:0 4px 22px #080f2533}
.header-signin svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1101px){.site-header .nav{max-width:none;width:auto;margin-left:clamp(32px,5.5vw,110px);margin-right:24px}}
@media(max-width:760px){.site-header .header-signin{min-height:44px;padding:10px 14px;font-size:16px;gap:8px}.header-signin svg{width:18px;height:18px}}

/* The replay control shares the central play position; the demo link centers independently. */
.hero-motion .motion-replay-overlay .motion-play-disc svg{fill:none;stroke:#1d3550;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Give both complexity measures their own readable explanation. */
.code-complexity{display:grid;grid-template-columns:1fr;gap:10px}
.code-complexity strong{display:block;font-size:16px}
.code-complexity p{font-size:15px;line-height:1.4;margin:3px 0 0}
/* Keep the closing message visible through the centered replay control. */
.hero-motion .motion-replay-overlay .motion-play-disc{background:#f7dca033;border-color:#f7dca088;box-shadow:0 3px 14px #09132720}
.hero-motion .motion-replay-overlay:hover .motion-play-disc{background:#f7dca055}
.hero-motion .motion-replay-overlay .motion-play-disc svg{stroke:#ffe1a6}

/* Keep the resting closing message and primary navigation easy to read. */
.motion-outro h3{font-size:72px}
.motion-outro p{font-size:44px;line-height:1.4}
.site-header .nav nav{font-size:17px;gap:28px}
@media(min-width:961px) and (max-width:1100px){.site-header .nav nav{font-size:16px;gap:16px}}
@media(max-width:960px){.site-header .nav nav{gap:4px}}

/* Approved slogan layout A: explore first, followed by a compact inline signup. */
.hero-layout .hero-intro .eyebrow{font-size:15px;line-height:1.6;letter-spacing:1.1px;margin-bottom:30px;max-width:none}
.hero-layout .hero-intro>p{font-size:17px;line-height:1.8;margin:28px 0 27px}
.hero-layout .hero-explore{min-height:46px;padding:11px 18px;gap:22px;font-size:16px;border-color:#d6e5f073;background:#ffffff07}
.hero-layout .hero-start{margin-top:28px;gap:16px;flex-wrap:nowrap}
.hero-start>span{font-size:17px;line-height:1.4;color:#e6eef8;white-space:nowrap}
.hero-layout .hero-start .btn{min-height:46px;padding:11px 18px;font-size:17px;gap:16px;border-radius:9px;flex:none}
.hero-explore svg,.hero-start svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){.hero-layout .hero-intro .eyebrow{font-size:14px}.hero-layout .hero-intro>p{font-size:16px}}
/* Closing actions may extend below the canvas to align with the signup row. */
@media(min-width:761px){.hero-layout .motion-stage{overflow:visible}}

/* Selected study D holds the established final size while revealing words. */
.outro-message{width:100%;transform:scale(1.12);transform-origin:center top}
@media(prefers-reduced-motion:reduce){.outro-message{transform:scale(1.12)}}

/* Reserve the company line throughout playback; reveal it after the words. */
.outro-company{display:block;margin-top:22px;font:500 34px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1px;color:#f8dfaa;opacity:var(--company-opacity,0)}
.site-header .brand{flex-direction:column;align-items:flex-start;gap:5px;flex-shrink:0}
.site-header .brand-line{display:flex;align-items:center;gap:10px}
.site-header .brand-company{margin-left:44px;font:500 12px/1.2 'Manrope',sans-serif;letter-spacing:.6px;color:#e4cfaa}
@media(max-width:760px){.site-header .brand{gap:4px}.site-header .brand-company{margin-left:40px;font-size:11px;letter-spacing:.4px}}
@media(max-width:760px){.motion-end-actions{top:80%}}

/* Approved compact C icon and a short ice-blue seek bar, centered together. */
.motion-sound-slot{gap:12px}
.motion-enable-sound,.motion-enable-sound.is-muted{position:relative;width:32px;height:32px;overflow:visible;color:#456780;border-color:#b5d1e3;background:linear-gradient(145deg,#f0f8ff,#cee3f2);box-shadow:0 3px 9px #081b3026}
.motion-enable-sound:after{content:"";position:absolute;inset:-6px;border-radius:50%}
.motion-enable-sound svg{width:16px;height:16px;stroke-width:1.55}
.motion-enable-sound .option-off{display:none}
.motion-enable-sound.is-muted .option-off{display:block}
.motion-enable-sound.is-muted .option-on{display:none}
.motion-seek{appearance:none;-webkit-appearance:none;width:120px;height:32px;padding:0;margin:0;border:0;outline:none;cursor:pointer;background:transparent;--seek-progress:0%;flex:none;touch-action:none}
.motion-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#c9e7fb var(--seek-progress),#b9d9ed40 var(--seek-progress))}
.motion-seek::-moz-range-track{height:3px;border-radius:3px;background:#b9d9ed40}
.motion-seek::-moz-range-progress{height:3px;border-radius:3px;background:#c9e7fb}
.motion-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-3px;border:1px solid #e8f6ff;border-radius:50%;background:#c9e7fb;box-shadow:0 1px 5px #06172e55}
.motion-seek::-moz-range-thumb{width:9px;height:9px;border:1px solid #e8f6ff;border-radius:50%;background:#c9e7fb;box-shadow:0 1px 5px #06172e55}
.motion-seek:focus-visible{outline:2px solid #b9ddf2;outline-offset:3px;border-radius:6px}

/* Owner refinement: a bare ice-blue speaker, with an invisible generous hit area. */
.motion-enable-sound,.motion-enable-sound.is-muted,.motion-enable-sound:hover{width:24px;height:32px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;color:#c9e7fb}
.motion-enable-sound:hover{color:#f1f9ff}
.motion-enable-sound:after{inset:-6px -10px;border-radius:0}
.motion-enable-sound:focus-visible{outline:2px solid #b9ddf2;outline-offset:3px;border-radius:4px}

/* Keep final action and playback controls in separate, stable rows. */
.motion-end-slot{height:48px;display:flex;align-items:flex-end;justify-content:center}
.hero-motion .motion-end-actions{position:static;transform:translateY(-36px);gap:0}
.hero-motion .motion-sound-slot{height:52px}

@media(max-width:760px){.hero-motion .motion-end-actions{transform:translateY(-12px)}}

.outro-word{display:inline-block;will-change:opacity,transform}

/* Local clean hero study: one-line introduction and a direct path to actions. */
.hero-layout .hero-intro{container-type:inline-size}
.hero-layout .hero-intro .eyebrow{white-space:nowrap;font-size:clamp(13px,4.2cqw,17px);letter-spacing:.025em;line-height:1.4;margin-bottom:24px}
.hero-layout .hero-intro h1{margin-top:0;margin-bottom:28px}
.hero-layout .hero-start{margin-top:22px}
@media(min-width:761px){.hero-layout .hero-intro{align-self:start;top:0;padding-top:16px}}
@media(max-width:760px){.hero-layout .hero-intro h1{margin-bottom:24px}.hero-layout .hero-intro .eyebrow{margin-bottom:20px}}

/* Keep primary navigation horizontal at the top, including narrow previews. */
@media(max-width:1100px){
 .site-header .nav{display:flex;flex-wrap:wrap;height:auto;gap:12px 20px;padding:14px 0 0}
 .site-header .nav .brand{order:0}
 .site-header .nav .header-signin{order:1;margin-left:auto}
 .site-header .nav .menu-toggle{display:none}
 .site-header .nav nav{order:2;display:flex;position:static;flex-direction:row;flex-wrap:nowrap;flex:0 0 100%;width:100%;min-width:0;gap:24px;overflow-x:auto;justify-content:safe center;background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 8px;scrollbar-width:thin}
 .site-header .nav nav a{flex:0 0 auto;white-space:nowrap;padding:10px 0;font-size:15px}
 .moon-hero{padding-top:166px}
}

/* Center the animation on the desktop viewport, independently of left copy. */
@media(min-width:1101px){
 .moon-hero{min-height:max(100svh,760px)}
 .hero-layout{position:static;margin-right:0;display:block}
 .hero-layout .hero-intro{width:28vw;max-width:420px;position:relative;z-index:2}
 .hero-layout .hero-motion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(420px,40vw,650px);margin:0}
}
@media(min-width:1101px){
 .hero-layout .hero-motion{top:calc(50% + 50px)}
 .hero-motion .motion-outro{justify-content:center;padding-top:0}
}

/* End-of-preview choices, with sign-up remaining beside the slogan. */
.hero-motion .motion-end-actions{display:flex;align-items:center;justify-content:center;gap:16px;white-space:nowrap}
.hero-motion .motion-end-actions[hidden]{display:none}
.hero-motion .motion-end-actions .hero-explore{font-size:14px;min-height:48px;padding:12px 16px;gap:12px}
@media(max-width:760px){
 .hero-motion .motion-end-actions{gap:10px}
 .hero-motion .motion-end-actions .btn{font-size:12px;min-height:44px;padding:10px 12px;gap:8px}
 .hero-motion .motion-end-actions .hero-explore svg{width:16px;height:16px}
}

/* Shared product description above both hero columns. */
.hero-layout > .hero-overline{grid-column:1 / -1;display:block;margin:0;color:#f4dfb3;font-size:clamp(20px,1.7vw,28px);font-weight:700;letter-spacing:.012em;line-height:1.4;white-space:nowrap}
@media(min-width:1101px){
 .moon-hero{padding-top:130px;min-height:max(100svh,calc(310px + clamp(420px,40vw,650px)*.844444))}
 .hero-layout > .hero-overline{margin-bottom:36px}
 .hero-layout .hero-intro{padding-top:0}
 .hero-layout .hero-motion{top:max(162px,calc(50% - clamp(420px,40vw,650px)*.422222 - 48px));transform:translateX(-50%)}
}
@media(min-width:761px) and (max-width:1100px){.hero-layout{row-gap:30px}.hero-layout .hero-intro{padding-top:0}}
@media(max-width:760px){.hero-layout > .hero-overline{font-size:clamp(13px,3.65vw,22px);letter-spacing:0}.hero-layout{gap:26px}}

/* Lighter, rounded product heading; lift independently of the hero content. */
.hero-layout > .hero-overline{position:relative;top:-30px;font-family:ui-rounded,"Arial Rounded MT Bold","Avenir Next",sans-serif;font-size:clamp(16px,1.3vw,21px);font-weight:650;letter-spacing:.018em}
@media(max-width:760px){.hero-layout > .hero-overline{top:-20px;font-size:clamp(11px,3.1vw,18px);letter-spacing:0}}

@media(min-width:761px) and (max-width:1100px){.hero-layout .hero-motion{top:-24px}}
@media(max-width:760px){.hero-layout .hero-motion{top:-16px}}

/* Align the two action rows; a brief, finite highlight invites sign-up. */
.hero-action-group{width:max-content;max-width:100%}
.hero-layout .hero-action-group > .hero-explore{display:flex;width:100%;justify-content:space-between}
.hero-layout .hero-action-group .hero-start{justify-content:space-between}
.hero-action-group .hero-start .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.hero-action-group .hero-start .btn::after{content:"";position:absolute;inset:-30% -60%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#ffffff70 50%,transparent 58%);transform:translateX(-85%);animation:signup-shimmer 4s ease-in-out 3}
.hero-action-group .hero-start .btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #f4d79930}
.hero-action-group .hero-start .btn:active{transform:translateY(0)}
@keyframes signup-shimmer{0%,60%{transform:translateX(-85%)}90%,100%{transform:translateX(85%)}}
@media(prefers-reduced-motion:reduce){.hero-action-group .hero-start .btn::after{animation:none;display:none}.hero-action-group .hero-start .btn:hover{transform:none}}

/* Fixed product line belongs to the masthead, beside the MoonSay identity. */
.site-header .header-tagline{font-family:ui-rounded,"Arial Rounded MT Bold","Avenir Next",sans-serif;font-size:13px;line-height:1.5;font-weight:600;letter-spacing:.01em;color:#ead9b5;flex-shrink:0;padding-left:18px;border-left:1px solid #ead9b530}
@media(min-width:1101px){
 .site-header .nav{gap:20px}
 .site-header .nav nav{margin-left:auto;gap:20px;font-size:16px}
 .moon-hero{padding-top:128px}
 .hero-layout .hero-motion{top:max(134px,calc(50% - clamp(420px,40vw,650px)*.422222 - 76px))}
}
@media(min-width:1101px) and (max-width:1270px){
 .site-header .nav{gap:14px;margin-left:32px}
 .site-header .nav nav{gap:14px;font-size:15px}
 .site-header .header-tagline{font-size:11px;padding-left:12px}
 .site-header .header-signin{font-size:16px;padding:12px 16px}
}
@media(max-width:1100px){
 .site-header .header-tagline{order:0;margin-right:auto}
 .hero-layout .hero-intro{grid-column:1}
}
@media(max-width:600px){
 .site-header .header-tagline{order:2;flex:0 0 100%;border:0;padding:0;font-size:12px;line-height:1.3;margin-top:0}
 .site-header .header-tagline .tagline-break{display:none}
 .site-header .nav nav{order:3}
 .site-header .nav{row-gap:8px}
 .moon-hero{padding-top:166px}
}

/* Two-line descriptor below the brand; centered desktop navigation. */
.site-header .brand .header-tagline{display:block;border:0;padding:0;margin:5px 0 0 44px;font-size:11px;line-height:1.35;letter-spacing:.015em;color:#ead9b5;flex:none}
.site-header .brand .tagline-break{display:initial}
@media(min-width:1101px){
 .site-header .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:22px}
 .site-header .nav .brand{justify-self:start}
 .site-header .nav nav{margin:0;justify-self:center}
 .site-header .header-signin{justify-self:end}
}
@media(max-width:760px){.site-header .brand .header-tagline{margin-left:40px;margin-top:4px;font-size:10px}}

/* Keep the fixed product description unbroken below the logo. */
.site-header .brand .header-tagline{white-space:nowrap;font-size:10px}
@media(min-width:1101px) and (max-width:1270px){.site-header .brand .header-tagline{font-size:9px;margin-left:0}}
@media(max-width:760px){.site-header .brand .header-tagline{font-size:8px;margin-left:0;letter-spacing:0}}

/* Product description above the left slogan; company restored in the brand. */
.hero-layout .hero-intro .restored-description{display:block;position:static;white-space:nowrap;max-width:none;font-family:ui-rounded,"Arial Rounded MT Bold","Avenir Next",sans-serif;font-size:clamp(12px,1.05vw,17px);font-weight:650;line-height:1.4;letter-spacing:0;color:#ead9b5;margin:0 0 20px}
@media(max-width:760px){.hero-layout .hero-intro .restored-description{font-size:clamp(11px,3.1vw,16px);margin-bottom:18px}}

/* Match the description's text width to the second slogan line. */
@media(min-width:1101px){.hero-layout .hero-intro .restored-description{font-size:clamp(12.2px,1.1125vw,19.38px)}}
@media(min-width:761px) and (max-width:1100px){.hero-layout .hero-intro .restored-description{font-size:clamp(11.48px,1.292vw,14.36px)}}
@media(max-width:760px){.hero-layout .hero-intro .restored-description{font-size:12.92px}}

/* Selected option F: light sweep followed by the leading arrow's invitation. */
.hero-action-group .hero-start .btn::after{animation:signup-f-shimmer 3.8s ease-in-out infinite}
.hero-action-group .hero-start .btn svg{animation:signup-f-arrow 3.8s ease-in-out .6s infinite}
@keyframes signup-f-shimmer{0%,15%{transform:translateX(-85%)}45%,100%{transform:translateX(85%)}}
@keyframes signup-f-arrow{0%,15%,60%,100%{transform:translate(0,0)}36%{transform:translate(4px,-4px)}}
@media(prefers-reduced-motion:reduce){.hero-action-group .hero-start .btn svg{animation:none}}

/* Give the hero a little more breathing room and emphasize the primary action. */
@media(min-width:1101px){
 .moon-hero{padding-top:148px;min-height:max(100svh,calc(330px + clamp(420px,40vw,650px)*.844444))}
 .hero-layout .hero-motion{top:max(154px,calc(50% - clamp(420px,40vw,650px)*.422222 - 56px))}
}
@media(max-width:1100px){.moon-hero{padding-top:182px}}
.hero-layout .hero-action-group .hero-start .btn{background:linear-gradient(135deg,#ffe8b3,#f4cf78);border:1px solid #ffefc8;font-weight:750;min-height:50px;padding:12px 21px;box-shadow:0 4px 18px #f4d79938,inset 0 1px 0 #fff6;animation:signup-emphasis 4.8s ease-in-out infinite}
.hero-action-group .hero-start .btn::after{background:linear-gradient(110deg,transparent 39%,#ffffffa0 50%,transparent 61%)}
.hero-layout .hero-action-group .hero-start .btn:hover{background:linear-gradient(135deg,#fff0cc,#ffdb8a);box-shadow:0 6px 24px #f4d79955}
@keyframes signup-emphasis{0%,15%,65%,100%{transform:scale(1)}36%{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.hero-layout .hero-action-group .hero-start .btn{animation:none}}

/* Keep the compact speaker; communicate sound state with vivid color. */
.motion-enable-sound,.motion-enable-sound:hover{color:#59df95}
.motion-enable-sound.is-muted,.motion-enable-sound.is-muted:hover{color:#ff7079}

/* Keep playback controls close to the animation, with room for the ending CTA. */
.hero-motion .motion-end-slot{height:32px}
.hero-motion .motion-sound-slot{height:32px}

/* Separate face and edge, following the layered push-button construction.
   Reference: https://www.joshwcomeau.com/animation/3d-button/ */
.hero-layout .hero-action-group .hero-start .btn,.site-header .header-signin{
 padding:0;border:0;border-radius:9px;overflow:visible;isolation:isolate;position:relative;animation:none;
 background:#bb8d45;box-shadow:0 4px 9px #03101c45;text-shadow:none;
 translate:0 0;transition:translate .2s ease,box-shadow .2s ease;
}
.hero-layout .hero-action-group .hero-start .btn .raised-face,.site-header .header-signin .raised-face{
 display:inline-flex;align-items:center;justify-content:center;gap:inherit;
 position:relative;overflow:hidden;border-radius:9px;font:inherit;
 padding:13px 22px;min-height:50px;
 background:linear-gradient(180deg,#ffe9b1,#f4ce7d);
 transform:translateY(-2px);transition:background .2s ease;
}
.site-header .header-signin .raised-face{padding:15px 23px;min-height:54px}
@media(max-width:760px){.site-header .header-signin .raised-face{padding:11px 15px;min-height:44px}}
.hero-action-group .hero-start .btn::after{content:none;animation:none}
.hero-action-group .hero-start .raised-face::after{
 content:"";position:absolute;inset:-30% -60%;pointer-events:none;
 background:linear-gradient(110deg,transparent 39%,#ffffffa0 50%,transparent 61%);
 transform:translateX(-85%);animation:signup-f-shimmer 3.8s ease-in-out infinite;
}
.site-header .header-signin,.site-header .header-signin:hover{animation:none;transform:none}
.hero-layout .hero-action-group .hero-start .btn:hover,.site-header .header-signin:hover{
 background:#bb8d45;box-shadow:0 4px 9px #03101c45;
}
@media(hover:hover) and (pointer:fine){
 .hero-layout .hero-action-group .hero-start .btn:hover,.site-header .header-signin:hover{translate:0 -2px;box-shadow:0 7px 13px #03101c50}
 .hero-start .btn:hover .raised-face,.header-signin:hover .raised-face{background:linear-gradient(180deg,#ffedbf,#f7d58d)}
 .hero-layout .hero-action-group .hero-start .btn:active,.site-header .header-signin:active{translate:0 0}
}
@media(prefers-reduced-motion:reduce){
 .hero-layout .hero-action-group .hero-start .btn,.site-header .header-signin,.raised-face{transition:none}
 .hero-layout .hero-action-group .hero-start .btn:hover,.site-header .header-signin:hover{translate:0 0}
 .hero-action-group .hero-start .raised-face::after{animation:none;display:none}
}

/* Larger bare speaker, centered precisely on the progress track. */
.motion-enable-sound svg{display:block;width:24px;height:24px;stroke-width:1.8}
.motion-enable-sound .option-off,.motion-enable-sound .option-on{line-height:0}