/* Brand assets remain unchanged; the SVG viewport removes export whitespace only. */
.product-stage { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.5fr); gap:48px; align-items:center; padding:36px; background:#f8f7f2; border-radius:24px; }
.product-copy { min-width:0; }
.product-copy h3 { font-size:clamp(28px,3vw,42px); line-height:1.15; white-space:pre-line; margin:20px 0; }
.product-copy > p:not(.eyebrow) { font-size:16px; line-height:1.7; color:var(--muted); }
.product-copy .screen-arrows { margin-top:32px; }
.product-stage .screen-stage { height:540px; background:transparent; border-radius:12px; align-items:center; }
.product-stage .screen-stage img { width:100%; height:auto; max-height:100%; object-fit:contain; border-radius:12px; }
.product-stage .screen-stage.portrait { background:#101c1b; }
@media(max-width:760px) {
 .product-stage { grid-template-columns:minmax(0,1fr); gap:24px; padding:22px 16px; border-radius:18px; }
 .product-copy h3 { font-size:30px; margin:12px 0; }
 .product-copy .screen-arrows { margin-top:20px; }
 .product-stage .screen-stage { height:380px; }
}
.mascot video {
 display:block; width:100%; height:100%; object-fit:contain; border-radius:0;
 /* Feather the canvas margins only, not the mascot's fur silhouette. */
 -webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
 mask-composite:intersect;
}
.scene .mascot { width:auto; aspect-ratio:9/16; overflow:visible; border-radius:0; }
.scene .mascot-shadow, .scene .orbit { display:none; }
.video-toggle { min-height:44px; padding:8px 16px; border:1px solid #ccc1d2; border-radius:24px; background:var(--paper, #f8f7f2); color:var(--ink); font:inherit; cursor:pointer; }
.video-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.brand { display:block; width:144px; flex-shrink:0; }
.brand img { width:100%; height:auto; }
.hero h1 { font-weight:600; letter-spacing:-.035em; line-height:1.1; }
.hero h1 em, h2 em { font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; }
h2 { font-weight:600; letter-spacing:-.025em; line-height:1.15; }
h3 { font-weight:600; letter-spacing:-.015em; }
.eyebrow { font-size:12px; letter-spacing:.07em; }
.intro { letter-spacing:0; }
.features p, .steps p, .founder p:not(.eyebrow), details p { font-size:16px; }
.micro, .caption, .index, .scene-hint, footer p, footer>a:last-child { font-size:12px; }
.index { letter-spacing:.06em; }
.nav nav, .text-link, .socials { font-size:14px; }
.scene {
 min-height:650px; padding:65px 0 125px;
 /* Match the original video's warm-gray studio backdrop at its center. */
 background:radial-gradient(ellipse at 50% 43%,#ebe9e8 0%,#ebe9e8 34%,#eeecea 49%,transparent 73%);
}
.mascot { height:450px; width:76%; align-self:start; }
.scene-kicker { display:none; }
.bubble { top:10px; right:auto; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:14px; border-radius:14px; box-shadow:none; }
.task { top:auto; bottom:38px; padding:13px 15px; transform:none; box-shadow:none; border:1px solid #e5dce8; }
.task-one { left:0; }
.task-two { left:auto; right:0; }
.task-three { display:none; }
.task b { font-size:12px; }
.task small { font-size:12px; }
.scene.happy .task-one, .scene.happy .task-two { transform:translateY(-4px); }
.mascot-shadow { bottom:145px; }
.scene-hint { bottom:-5px; }
.orbit { width:94%; height:65%; top:75px; }
.orbit-two { width:72%; height:72%; top:42px; }
.ticker { letter-spacing:.06em; font-size:12px; }
.ticker i, .closing-star { display:none; }
.showcase { margin-top:32px; }
.screen-controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.screen-tab { background:transparent; color:var(--muted); padding:13px 20px; border-radius:100px; font-size:14px; border:1px solid #ccc1d2; min-height:46px; }
.screen-tab[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:white; }
.screen-stage { margin:0; height:620px; background:#f8f7f2; border-radius:18px; overflow:hidden; display:flex; justify-content:center; }
.screen-stage img { width:100%; height:100%; object-fit:contain; }
.screen-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; }
.screen-bottom>p { font-size:16px; margin:0; line-height:1.5; }
.screen-arrows { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.screen-arrows button { width:44px; height:44px; border-radius:50%; background:transparent; border:1px solid #bcb0c3; font-size:21px; color:var(--ink); }
.screen-arrows span { font-size:13px; font-variant-numeric:tabular-nums; }
.steps article>span { font-family:inherit; font-style:normal; font-size:28px; }
@media(max-width:1100px) and (min-width:761px) {
 .hero { grid-template-columns:1fr 1fr; gap:22px; }
 .scene { min-height:640px; padding-top:80px; }
 .mascot { height:380px; }
 .task { padding:10px; }
 .task-one { bottom:89px; left:0; }
 .task-two { bottom:23px; right:0; }
 .scene-hint { bottom:-17px; }
 .mascot-shadow { bottom:160px; }
 .screen-stage { height:540px; }
}
@media(max-width:760px) {
 .brand { width:112px; }
 .nav { height:88px; }
 .nav .button.small { font-size:12px; }
 .hero h1 { font-size:clamp(40px,10vw,64px); letter-spacing:-.035em; }
 .hero h1 em, h2 em { letter-spacing:inherit; }
 .hero .eyebrow, .founder .eyebrow, .closing .eyebrow { font-size:12px; letter-spacing:.04em; }
 .scene { min-height:550px; padding:68px 0 125px; margin-top:30px; }
 .mascot { height:350px; }
 .bubble { top:5px; right:auto; font-size:14px; }
 .task { bottom:40px; padding:10px; gap:7px; }
 .task b, .task small { font-size:12px; }
 .task-one { left:0; }
 .task-two { right:0; }
 .task-two .task-symbol, .task-two .avatar { display:none; }
 .mascot-shadow { bottom:140px; }
 .scene-hint { bottom:0; font-size:12px; }
 .features { grid-template-columns:1fr; gap:30px; }
 .features article { display:grid; grid-template-columns:44px 1fr; column-gap:16px; }
 .feature-icon { grid-row:1 / 4; margin-top:0; }
 .features h3 { margin:0; font-size:21px; }
 .features h3 br { display:none; }
 .features p { margin:12px 0; }
 .index { margin-top:0; }
 .screen-controls { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; gap:6px; }
 .screen-tab { padding:12px 16px; flex-shrink:0; }
 .screen-stage { height:420px; border-radius:12px; }
 .screen-bottom { align-items:start; }
 .screen-bottom>p { font-size:14px; }
 .screen-arrows { gap:8px; }
 .screen-arrows button { width:40px; height:40px; }
 .caption, .micro, footer p { font-size:12px; }
}
@media(max-width:360px) {
 .nav .button.small { gap:8px; padding-inline:10px; }
 .brand { width:96px; }
 .task { padding:9px 7px; }
 .task-one .check { display:none; }
 .screen-stage { height:360px; }
}

/* Staggered task cards flank the body, leaving the face unobstructed. */
.scene .task .check, .scene .task .task-symbol {
 flex:0 0 28px; width:28px; height:28px; aspect-ratio:1; line-height:1;
}
.scene .task .avatar { flex:0 0 24px; width:24px; height:24px; aspect-ratio:1; }
.scene .task > div { min-width:0; }
.scene .task b { white-space:normal; overflow-wrap:break-word; line-height:1.35; }
.scene .task small { line-height:1.4; }
.scene .task .spark { flex-shrink:0; margin-left:0; }
.scene { min-height:590px; padding-bottom:65px; }
.scene .task { bottom:auto; z-index:3; max-width:48%; box-shadow:0 8px 28px #28202f0b; }
.scene .task-one { top:55%; left:0; transform:rotate(-4deg); }
.scene .task-two { top:72%; right:0; transform:rotate(3deg); }
.scene .task-three { display:flex; top:88%; left:12%; right:auto; transform:rotate(-2deg); }
.scene .mascot:focus-visible { outline:2px solid var(--ink); outline-offset:6px; }
@media(max-width:760px) {
 .scene { min-height:490px; padding-bottom:45px; }
 .scene .task { max-width:58%; padding:10px; }
 .scene .task-one { top:57%; }
 .scene .task-two { top:76%; }
 .scene .task-three { top:92%; left:7%; }
 .scene .task-three .spark { display:none; }
 .hero > *, .showcase, .screen-bottom > p { min-width:0; }
}