/* Motion layer: content is visible without JavaScript. */
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:30;pointer-events:none}
.reading-progress span{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.hero{position:relative;isolation:isolate}
.hero-copy,.hero-facts{position:relative;z-index:1}
.hero h1{font-size:clamp(48px,4.65vw,68px)}
.hero-price{flex-wrap:wrap;max-width:100%;line-height:1.6}
.hero-actions{flex-wrap:wrap;gap:12px 24px}
.hero-actions .button{font-size:14px}
.agent-stage{isolation:isolate;padding-bottom:56px}
.stage-aura{position:absolute;inset:-12% -10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 48% 48%,#b3ef4930,transparent 65%);transform:rotate(-12deg)}
.orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--lime);top:15%;left:15%;box-shadow:0 0 20px #c2f75766;opacity:.6}
.orbit-two::after{top:auto;left:auto;bottom:15%;right:15%;width:4px;height:4px}
.motion-toggle{position:relative;display:block;margin:25px auto -15px;z-index:4;border:1px solid #68755e;border-radius:20px;min-height:36px;padding:6px 14px;background:#202720;color:#ccd6c4;font-size:11px}
.motion-toggle[hidden]{display:none}
.demo-caption{top:27px}
.agent-explainer{margin-top:42px;padding:28px 32px;background:#e9eee1;border:1px solid #d4ddc9;border-radius:18px;display:grid;grid-template-columns:1fr 1.1fr;gap:8px 36px}
.agent-explainer .eyebrow{grid-column:1/-1;margin-bottom:5px;font-size:10px}
.agent-explainer h3{font-size:26px;line-height:1.2;max-width:380px}
.agent-explainer>p:last-child{font-size:14px;line-height:1.8}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:"";position:absolute;inset:auto 0 5px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)}
.button{position:relative;overflow:hidden}
.button .icon{transition:transform .25s}
.button:hover .icon,.button:focus-visible .icon{transform:translateX(3px)}
.material-card{isolation:isolate;transition:transform .25s,border-color .25s,box-shadow .25s}
.material-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(360px circle at var(--spot-x,50%) var(--spot-y,50%),#fff9,transparent 70%);transition:opacity .3s}
.material-card:hover::after{opacity:1}
.material-card:hover{border-color:#97b371;box-shadow:0 14px 32px #31411e12}
.price-card{border:1px solid #d1dcc2}
.price-button{font-size:15px;gap:12px}
.hero-channel-note{font-size:12px!important;margin-top:12px}
/* Visible motion runs only with an enabled, accessible pause control. */
.hero-light{position:absolute;inset:-10% -30% 20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 35%,#a5eb493d,transparent 38%),radial-gradient(ellipse at 76% 56%,#7be6b329,transparent 39%);opacity:.65}
.hero>.container{position:relative}
.agent-float{position:relative;isolation:isolate;z-index:2}
.agent-float::before,.agent-float::after{content:"";position:absolute;inset:8px 0 -8px;border:1px solid #92bc615c;background:#293b28;border-radius:16px;pointer-events:none;transform:perspective(1000px) rotateY(-8deg) rotateX(4deg) rotate(-2deg) translate(13px,10px);z-index:-1}
.agent-float::before{background:#203022;border-color:#73944766;transform:perspective(1000px) rotateY(-8deg) rotateX(4deg) rotate(-2deg) translate(25px,22px);opacity:.6}
.agent-window{transform:perspective(1000px) rotateX(4deg) rotateY(-8deg) rotate(-2deg);box-shadow:20px 35px 55px #0006,inset 0 1px 0 #defca124;border-color:#94bc667a}
.stage-aura{background:radial-gradient(ellipse at 50% 45%,#b3ef4959,transparent 68%)}
.orbit{border-color:#c2f75740;box-shadow:0 0 25px #c2f75708,inset 0 0 25px #c2f75708}
.orbit::after{width:12px;height:12px;opacity:1;box-shadow:0 0 13px #c2f757,0 0 30px #c2f75777}
.orbit-two::after{width:8px;height:8px;background:#a0f0ca;box-shadow:0 0 18px #a0f0ca99}
.motion-toggle{margin:16px 0 0;min-height:44px;font-size:12px;padding:8px 15px;background:#252e21;color:#e0ebd6;line-height:1.4;text-align:left;max-width:100%}
.motion-toggle::before{content:"Ⅱ";display:inline-block;width:16px;margin-right:6px;color:var(--lime);font-weight:700}
.motion-toggle[aria-pressed="false"]::before{content:"▷"}
.motion-toggle:disabled{cursor:default}
.material-card{position:relative}
@media(prefers-reduced-motion:no-preference){
 html[data-motion="on"] .hero.is-in-view .hero-light{animation:hero-glow 9s ease-in-out infinite alternate}
 html[data-motion="on"] .hero.is-in-view .status-dot{animation:status-wave 3s ease-out infinite}
 html[data-motion="on"] .hero-copy>h1{animation:copy-in 1s cubic-bezier(.22,1,.36,1) both}
 html[data-motion="on"] .agent-stage.is-in-view .stage-aura{animation:aura-breathe 6s ease-in-out infinite alternate}
 html[data-motion="on"] .agent-stage.is-in-view .orbit-one{animation:orbit-travel 18s linear infinite}
 html[data-motion="on"] .agent-stage.is-in-view .orbit-two{animation:orbit-travel 13s linear infinite reverse}
 html[data-motion="on"] .agent-stage.is-in-view .agent-float{animation:window-float 5s ease-in-out infinite}
 html[data-motion="on"] .agent-stage.is-in-view .floating-label{animation:label-float 4s ease-in-out infinite}
 html[data-motion="on"] .material-card.is-in-view .video-frame{animation:video-float 5s ease-in-out infinite}
 html[data-motion="on"] .material-card.is-in-view .guide-paper.front{animation:guide-float 5s ease-in-out infinite}
 html[data-motion="on"] .price-orbit.is-in-view::before{animation:price-rotate 18s linear infinite}
 html[data-motion="on"] .agent-window{transform:perspective(1000px) rotateX(calc(4deg + var(--tilt-y,0deg))) rotateY(calc(-8deg + var(--tilt-x,0deg))) rotate(-2deg);transition:transform .25s ease-out}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html[data-motion="on"] .material-card:hover{transform:translateY(-7px)}
 html[data-motion="on"] .agent-stage:hover .agent-float{animation-play-state:paused}
}
html[data-motion="on"] .agent-float:focus-within{animation-play-state:paused}
@keyframes copy-in{from{opacity:.4;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-glow{from{transform:translate(-6%,-4%) scale(.95);opacity:.55}to{transform:translate(9%,5%) scale(1.12);opacity:1}}
@keyframes aura-breathe{from{transform:scale(.86) rotate(-15deg);opacity:.6}to{transform:scale(1.13) rotate(12deg);opacity:1}}
@keyframes orbit-travel{from{transform:translateX(-50%) rotate(-25deg) rotateX(57deg) rotateZ(0)}to{transform:translateX(-50%) rotate(-25deg) rotateX(57deg) rotateZ(360deg)}}
@keyframes window-float{0%,100%{transform:translateY(7px) rotate(-.7deg)}50%{transform:translateY(-12px) rotate(.7deg)}}
@keyframes label-float{0%,100%{translate:0 3px}50%{translate:0 -10px}}
@keyframes status-wave{0%{box-shadow:0 0 0 0 #c2f75760}100%{box-shadow:0 0 0 12px #c2f75700}}
@keyframes video-float{0%,100%{transform:perspective(700px) rotateY(-8deg) rotate(-4deg) translateY(5px)}50%{transform:perspective(700px) rotateY(6deg) rotate(-1deg) translateY(-7px)}}
@keyframes guide-float{0%,100%{transform:rotate(-7deg) translateY(4px)}50%{transform:rotate(-2deg) translateY(-8px)}}
@keyframes price-rotate{to{transform:rotate(390deg)}}
html[data-page-hidden="true"] *,html[data-page-hidden="true"] *::before,html[data-page-hidden="true"] *::after{animation-play-state:paused!important}
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
html[data-motion="off"] .button:hover,html[data-motion="off"] .material-card:hover{transform:none}
html[data-motion="off"] .button .icon{transform:none}
html[data-motion="off"] .material-card::after{display:none}
@media(max-width:1199px){.hero h1{font-size:52px}}
@media(max-width:959px){.hero h1{font-size:66px}}
@media(max-width:699px){
 .hero h1{font-size:clamp(39px,10vw,60px)}
 .hero-description{font-size:15px}
 .hero-price{font-size:11px}
 .agent-explainer{grid-template-columns:1fr;padding:23px;gap:14px;margin-top:25px}
 .agent-explainer h3{font-size:24px}
 .agent-explainer .eyebrow{margin-bottom:0}
 .motion-toggle{margin-top:15px}.agent-window{transform:perspective(1000px) rotateX(4deg) rotateY(-8deg) rotate(-2deg)}
 .price-button{font-size:14px}
 .material-card::after{display:none}
}
@media(max-width:359px){.hero h1{font-size:38px}.hero-price{gap:8px}.tiny-separator{display:none}}
@media(prefers-reduced-motion:reduce){.stage-aura,.orbit,.floating-label,.hero-copy>h1{animation:none!important}.button .icon,.material-card:hover{transform:none!important}.material-card::after{display:none}}
@media print{.reading-progress,.motion-toggle{display:none}}

/* A real CSS 3D object makes depth legible without a mouse. */
.core-shell{position:absolute;left:14px;top:-16px;width:58px;height:58px;perspective:500px;z-index:3;pointer-events:none}
.agent-core{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(32deg) rotateZ(6deg)}
.agent-core i{position:absolute;inset:0;border:1px solid #ddff94;background:linear-gradient(145deg,#c2f75780,#96dc4922);box-shadow:inset 0 0 18px #c2f75740;backface-visibility:visible}
.agent-core i:nth-child(1){transform:translateZ(29px)}
.agent-core i:nth-child(2){transform:rotateY(180deg) translateZ(29px)}
.agent-core i:nth-child(3){transform:rotateY(90deg) translateZ(29px)}
.agent-core i:nth-child(4){transform:rotateY(-90deg) translateZ(29px)}
.agent-core i:nth-child(5){transform:rotateX(90deg) translateZ(29px)}
.agent-core i:nth-child(6){transform:rotateX(-90deg) translateZ(29px)}
@media(prefers-reduced-motion:no-preference){html[data-motion="on"] .agent-stage.is-in-view .agent-core{animation:core-turn 12s linear infinite}}
@keyframes core-turn{from{transform:rotateX(-22deg) rotateY(32deg) rotateZ(6deg)}to{transform:rotateX(338deg) rotateY(392deg) rotateZ(6deg)}}
@media(max-width:699px){.core-shell{scale:.75;transform-origin:left top;left:14px;top:-12px}}

/* Author portrait: show the complete photo, without face cropping. */
.author-visual.author-photo{padding:0;background:#080a08;aspect-ratio:2/3;width:100%;max-width:420px;max-height:none;justify-self:center;border-color:#ccd4c0}
.author-photo img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
@media(max-width:699px){.author-visual.author-photo{max-width:360px}}