/* Character stage: decorative labels occupy their own row outside the art. */
.character-visual{padding:0 0 10px;min-width:0;max-width:700px;width:100%;justify-self:center;align-self:center}
.prendo-stage{--discover:0;position:relative;width:100%;aspect-ratio:1000/900;isolation:isolate}
.character-glow{position:absolute;inset:12% 4% 2%;z-index:-2;background:radial-gradient(ellipse at 55% 53%,#b6eeea75 0,#d9f7ef50 36%,#f1fbfa20 59%,transparent 73%)}
.character-orbit{position:absolute;inset:22% 7% 12%;border:1px solid #91c8c225;border-radius:50%;z-index:-1}
.character-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;z-index:2}
.character-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none!important}
.is-ready .character-canvas{opacity:1}.is-ready .character-fallback{display:none}
.character-laptop{visibility:hidden;position:absolute;left:15%;top:58%;width:52%;height:48%;z-index:5;perspective:1000px;transform:translateY(calc(var(--discover)*-10px))}
.is-ready .character-laptop{visibility:visible}
/* Every physical part shares this rotation, including the keyboard deck.
   No grouping filters/opacity on the 3D hierarchy: they flatten its faces. */
.laptop-turn{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 74%;transform:rotateX(calc(-9deg + var(--look-y,0)*2deg)) rotateY(calc(154deg - var(--discover)*168deg + var(--look-x,0)*3deg)) rotateZ(calc(-4deg + var(--discover)*7deg))}
.laptop-lid{position:absolute;inset:0 0 26%;transform-style:preserve-3d;transform-origin:center bottom;transform:rotateX(-8deg)}
.laptop-face{position:absolute;inset:0;border-radius:12px 12px 7px 7px;border:3px solid #082632;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.laptop-back{display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#0f6171,#084151 50%,#063240);box-shadow:inset 0 0 0 2px #6bcab67c;transform:rotateY(180deg) translateZ(3px)}
.laptop-back img{width:20%;height:34%;object-fit:contain;filter:none!important}
.laptop-back>span{color:#d1e9e9;font-size:clamp(7px,.65vw,10px);letter-spacing:.03em;margin-top:8px}
.laptop-shine{position:absolute;inset:0;background:linear-gradient(125deg,#ffffff15,transparent 45%)}
.laptop-front{transform:translateZ(3px);background:#082632;padding:8px;box-shadow:inset 0 0 0 1px #7da8a9}
.laptop-camera{position:absolute;top:4px;left:50%;height:2px;width:2px;background:#6c8c91;border-radius:50%}
.laptop-display{height:100%;border-radius:4px;background:radial-gradient(ellipse at 100% 0,#2e6465,#123c45 48%,#0b2e3b);padding:10px 14px;display:grid;grid-template-columns:1fr;grid-template-rows:25px 1fr auto;gap:4px 12px;overflow:hidden}
.screen-top{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #ffffff17;margin-bottom:2px}
.screen-top img{width:63px;height:21px;object-fit:contain;object-position:left top;filter:none!important}
.screen-top>span{font-size:5px;letter-spacing:.1em;color:#b9d3d2;display:flex;align-items:center;gap:4px;padding-top:3px;font-weight:650}
.screen-top i{height:3px;width:3px;background:#93caa0;border-radius:50%}
.screen-title{align-self:center;color:#fff;font-family:Montserrat,Arial,sans-serif;font-weight:700;font-size:clamp(15px,1.5vw,25px);line-height:1.18;letter-spacing:-.045em;white-space:nowrap}
.screen-title em{font-style:normal;color:#a6e6ba}
.screen-route{display:flex;justify-content:stretch;flex-direction:row;gap:4px;align-self:end}
.screen-route>span{display:flex;flex:1;min-width:0;align-items:center;gap:4px;padding:4px 6px;background:#e7ffff0a;border:1px solid #daffff17;border-radius:4px;color:#dceceb;font-size:clamp(5px,.54vw,9px)}
.screen-route b{font-weight:450;color:#97c9c4;font-size:.8em}.screen-route i{font-style:normal;margin-left:auto;color:#93caa0}
.laptop-deck{position:absolute;left:0;right:0;top:74%;height:34%;transform-style:preserve-3d;transform-origin:center top;transform:rotateX(70deg)}
.deck-top,.deck-bottom{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #082632;border-radius:3px 3px 10px 10px}
.deck-top{transform:translateZ(2px);background:linear-gradient(#8cbbbe,#d7e6e5 80%,#9dc4c4);padding:7px 9px}
.keyboard{position:absolute;left:7%;right:7%;top:8%;height:48%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(4,1fr);gap:2px}
.keyboard i{display:block;border-radius:2px;background:#1a3c47;box-shadow:inset 0 1px 0 #649299}
.keyboard i:nth-last-child(-n+6){background:#284c56}
.trackpad{position:absolute;left:35%;right:35%;top:66%;bottom:9%;border:1px solid #65979b;border-radius:4px;background:#b4d0d0}
.deck-bottom{transform:rotateX(180deg) translateZ(2px);background:linear-gradient(#113f4b,#082632)}
.deck-lip{position:absolute;left:0;right:0;bottom:0;height:5px;background:#749da2;border:1px solid #082632;transform-origin:center bottom;transform:rotateX(-90deg);border-radius:0 0 5px 5px}
.laptop-shadow{position:absolute;left:-5%;right:-5%;height:20%;bottom:-4%;border-radius:50%;background:radial-gradient(ellipse,#08263220,transparent 68%);transform:rotate(-3deg);z-index:-1}
.character-caption{position:relative;display:block;min-height:24px;margin:8% 0 0;text-align:center;font-size:12px;line-height:1.5;color:#41696d;font-weight:550;padding:4px 10px 0;visibility:hidden}
.character-visual:has(.is-ready) .character-caption{visibility:visible}
.character-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 5% 0;gap:15px;visibility:hidden}
.character-visual:has(.is-ready) .character-toolbar{visibility:visible}
.character-scroll{display:flex;gap:9px;align-items:center;font-size:9px;letter-spacing:.03em;color:#587778}
.character-scroll>span{font-size:15px;color:#2a909c}
.character-controls{display:flex;align-items:center;gap:6px}
.character-controls button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:34px;min-height:34px;background:white;border:1px solid #e0eceb;border-radius:50px;color:#467073;font-size:9px;cursor:pointer;padding:6px 9px}
.character-controls button:hover{background:#edf8f5;border-color:#93caa0}
.character-controls svg{width:16px;height:16px;flex-shrink:0}
.character-controls .icon-play{display:none}
.character-controls [aria-pressed=true] .icon-play{display:block}
.character-controls [aria-pressed=true] .icon-pause{display:none}
.character-reduced .character-controls{display:none}
.character-paused .character-caption *{transition:none!important}
@media(min-width:1500px){.character-visual{padding-top:0}}
@media(max-width:1050px){.laptop-display{padding:7px 9px;grid-template-rows:18px 1fr auto;gap:2px 8px}.screen-top img{width:48px;height:16px}.screen-top>span{font-size:4px}.screen-route{gap:3px}.screen-route>span{padding:3px 4px}.screen-title{font-size:18px}.character-caption{font-size:11px}}
@media(min-width:561px) and (max-width:800px){.character-toolbar{padding-inline:0;gap:5px}.character-scroll{font-size:8px;gap:4px}.character-controls button{padding:5px}.character-controls button>span{display:none}.screen-title{font-size:13px}.laptop-display{padding:5px;grid-template-rows:14px 1fr auto}.screen-top img{width:36px;height:13px}.screen-route>span{font-size:5px;padding:2px 3px;gap:3px}.screen-top>span{font-size:3px}.laptop-face{border-width:2px;border-radius:8px 8px 4px 4px}.laptop-front{padding:4px}.laptop-back>span{font-size:5px;margin-top:5px}.character-caption{font-size:10px}.keyboard{gap:1px}}
@media(max-width:560px){.character-visual{max-width:430px;width:100%;margin:5px auto 0;padding:0 0 14px}.character-visual img{max-height:none}.screen-title{font-size:15px}.laptop-display{padding:5px 7px;grid-template-rows:16px 1fr auto;gap:2px 6px}.screen-top img{width:42px;height:14px}.screen-top>span{font-size:3px}.screen-route>span{font-size:5px;gap:4px;padding:2px 3px}.screen-route{gap:3px}.laptop-front{padding:5px}.laptop-face{border-width:2px;border-radius:8px 8px 4px 4px}.laptop-back>span{font-size:5px;margin-top:6px}.character-caption{font-size:11px;min-height:25px}.character-toolbar{padding-top:5px;padding-inline:3%}.keyboard{gap:1px}.deck-top{border-width:1px}}

.character-route-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid #b6d8d2;background:#eef8f4;border-radius:30px;min-height:38px;padding:8px 13px;font-size:11px;font-weight:650;color:#185d61;cursor:pointer}
.character-route-button:hover{background:#dff0e7;border-color:#77afa2}
.impact-burst{position:absolute;left:19%;top:47.5%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:7;pointer-events:none;color:#57bca6;opacity:0}
.impact-burst svg{width:100%;height:100%}
.is-impact .impact-burst{animation:palm-impact .65s ease-out both}
.character-paused .impact-burst{animation-play-state:paused}
@keyframes palm-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
.prendo-companion[hidden],.route-result[hidden]{display:none!important}
.prendo-companion{position:fixed;right:24px;bottom:22px;z-index:60;animation:companion-enter .45s cubic-bezier(.16,1,.3,1) both}
@keyframes companion-enter{from{opacity:0;transform:translateY(25px) rotate(4deg)}to{opacity:1;transform:none}}
.companion-open{display:flex;align-items:center;gap:10px;max-width:270px;min-height:72px;padding:5px 16px 5px 5px;background:#fff;border:1px solid #bfded5;border-radius:60px;box-shadow:0 8px 35px #08263219;color:var(--ink);cursor:pointer;text-align:left}
.companion-open:hover{border-color:#539e8d;box-shadow:0 8px 35px #08263224}
.companion-open canvas{display:block;width:62px;height:62px;border-radius:50%;background:#eaf7f2;flex-shrink:0}
.companion-open small{display:block;font-size:8px;letter-spacing:.12em;color:#4f8179;line-height:1.5;margin-bottom:3px}
.companion-open b{font-size:12px;line-height:1.4;display:block;font-weight:600}
.companion-arrow{font-size:19px;color:#4b8b7d;margin-left:3px}
.companion-dismiss{position:absolute;right:-7px;top:-8px;width:28px;height:28px;border:1px solid #c7dfd8;border-radius:50%;background:#fff;color:#5d7a77;cursor:pointer;font-size:18px;line-height:1}
.route-dialog{border:1px solid #d9ebe5;padding:0;border-radius:24px;width:min(820px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:#fcfffd;color:var(--ink);box-shadow:0 25px 100px #08263236;overflow:auto}
.route-dialog::backdrop{background:#082632aa;backdrop-filter:blur(8px)}
.route-dialog-inner{padding:34px;position:relative}
.route-close{position:absolute;right:17px;top:15px;width:34px;height:34px;display:grid;place-items:center;border:1px solid #dbe9e4;background:#fff;border-radius:50%;font-size:24px;cursor:pointer;color:#416966}
.route-heading{display:flex;align-items:center;gap:18px;margin:0 32px 26px 0}
.route-heading img{width:78px;height:78px;object-fit:contain;flex-shrink:0}
.route-heading .eyebrow{font-size:9px;margin-bottom:6px}
.route-heading h2{font-size:32px;margin:0 0 8px;letter-spacing:-.04em}
.route-heading p:last-child{font-size:13px;margin:0;line-height:1.55}
.route-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.route-goals button{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;border:1px solid #d4e6df;background:white;padding:19px 16px;border-radius:14px;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.route-goals button:hover{transform:translateY(-3px);border-color:#8ebbad}
.route-goals button[aria-pressed=true]{background:#edf8f1;border-color:#6aa88c;box-shadow:0 0 0 1px #6aa88c}
.route-goals button[data-route=mkt][aria-pressed=true]{background:#eef2fb;border-color:#607fca;box-shadow:0 0 0 1px #607fca}
.route-goals button[data-route=ads][aria-pressed=true]{background:#f8f0fb;border-color:#ae79bf;box-shadow:0 0 0 1px #ae79bf}
.goal-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#e9f6ef;color:#297767;font-size:23px;margin-bottom:3px}
[data-route=mkt] .goal-icon{background:#eef2fb;color:#385fc0}[data-route=ads] .goal-icon{background:#f7eef9;color:#8a3c9d}
.route-goals b{font-size:13px;font-weight:650;line-height:1.4}
.route-goals button>span:last-of-type{font-size:11px;color:#5f7774;line-height:1.55;max-width:170px}
.route-goals i{position:absolute;right:14px;top:15px;font-size:16px;color:#8bab9e;font-style:normal}
.route-answer{min-height:161px;display:grid;align-items:center;margin-top:20px;border-top:1px solid #deebe5;border-bottom:1px solid #deebe5;padding:20px 0}
.route-empty{color:#66857a;font-size:13px;margin:0;text-align:center}
.route-result{display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px}
.route-result .eyebrow{font-size:9px;margin:0 0 8px;color:var(--route-accent,#2a909c)}
.route-result h3{font-size:23px;margin-bottom:8px}
.route-result p:last-child{font-size:12px;line-height:1.65;margin:0;max-width:420px}
.route-result .button{font-size:11px;padding:12px 17px;gap:12px;background:var(--route-accent,#082632);border-color:var(--route-accent,#082632)}
.route-dialog-footer{display:flex;justify-content:space-between;gap:15px;padding-top:20px}
.route-dialog-footer a{font-size:11px;color:#3a7871;font-weight:550}
.course.route-selected{box-shadow:0 0 0 3px var(--accent),0 15px 40px #08263212}
@media(max-width:800px){.character-route-button{font-size:10px;padding:7px 10px;gap:7px}.character-controls button{font-size:9px;padding:5px 6px;min-width:32px;min-height:34px}.character-controls{gap:4px}.character-toolbar{gap:8px}.character-controls button[data-character-five]>span{display:inline}.route-dialog-inner{padding:28px}.route-result{grid-template-columns:1fr;gap:14px}.route-result .button{justify-self:start}.route-answer{min-height:200px}}
@media(max-width:560px){.prendo-companion{right:16px;bottom:16px}.companion-open{gap:7px;min-height:60px;padding:3px 12px 3px 3px;max-width:235px}.companion-open canvas{width:52px;height:52px}.companion-open small{font-size:7px}.companion-open b{font-size:11px}.companion-dismiss{width:30px;height:30px;top:-12px}.route-dialog{width:calc(100% - 24px);border-radius:20px;max-height:calc(100dvh - 24px)}.route-dialog-inner{padding:23px 18px}.route-heading{gap:10px;margin-bottom:22px;margin-right:25px}.route-heading img{width:54px;height:54px}.route-heading h2{font-size:25px}.route-heading .eyebrow{font-size:7px;letter-spacing:.09em}.route-heading p:last-child{font-size:11px}.route-close{right:11px;top:11px;width:30px;height:30px}.route-goals{grid-template-columns:1fr;gap:9px}.route-goals button{display:grid;grid-template-columns:32px 1fr;gap:2px 11px;padding:12px 15px}.goal-icon{grid-row:1/3;margin:0;align-self:center}.route-goals b{font-size:12px}.route-goals button>span:last-of-type{font-size:11px;max-width:none;grid-column:2}.route-goals i{top:14px}.route-answer{margin-top:18px;min-height:182px;padding:17px 0}.route-result{gap:12px}.route-result h3{font-size:21px}.route-result p:last-child{font-size:12px}.route-dialog-footer{gap:10px;flex-direction:column;padding-top:17px}.route-dialog-footer a{font-size:10px}.character-toolbar{display:grid;grid-template-columns:1fr auto}.character-route-button{padding-inline:8px;gap:5px;font-size:10px}.character-controls button[data-character-five]{font-size:9px;gap:3px}}

/* Portrait phones only. Keep the complete illustration ahead of the longer
   supporting paragraph; keyboard order of links and controls stays the same.
   svh uses the space available with mobile browser controls expanded. */
@media(max-width:560px){
 .hero{padding-top:24px;row-gap:0}
 .hero-copy{display:contents}
 .hero-copy>.eyebrow{order:0;margin-bottom:10px}
 .hero-copy>h1{order:1;font-size:clamp(32px,9vw,40px);margin-bottom:14px}
 .hero-copy>.hero-lead{order:2;font-size:18px;line-height:1.45;margin-bottom:12px}
 .hero-copy>.actions{order:3;margin-top:4px}
 .hero-copy>.start{order:4;margin:14px 0 8px}
 .hero>.character-visual{order:5;align-self:center;width:min(100%,300px);width:clamp(250px,calc(85svh - 330px),330px);max-width:100%;margin:0 auto;padding-bottom:10px}
 .hero-copy>p:not(.eyebrow):not(.hero-lead):not(.start){order:6;margin:12px 0 20px}
 .hero>.hero-facts{order:7}
 .hero .character-caption{font-size:10px;min-height:18px;padding:0;margin-top:8%}
 .hero .character-toolbar{padding:4px 0 0;min-height:42px}
 .prendo-companion{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:560px) and (max-height:740px){
 .hero{padding-top:18px}
 .hero-copy>.eyebrow{font-size:9px;margin-bottom:8px}
 .hero-copy>h1{font-size:clamp(32px,8.7vw,38px);margin-bottom:12px}
 .hero-copy>.hero-lead{font-size:17px;margin-bottom:10px}
 .hero-copy>.actions{margin-top:2px}
 .hero-copy>.start{margin-top:10px}
}