@font-face{font-family:Schoolbell;
src:url('assets/Schoolbell-Regular.ttf') format('truetype');
font-weight:400;
font-display:swap}

:root{--paper:#f5f0e6;
--forest:#2d634d;
--ink:#24332c;
--sage:#d7dfc9;
--lilac:#d9c5ee;
--muted:#626b5d;
--grid:rgba(79,103,70,.085);
--ease:cubic-bezier(.16,1,.3,1)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:105px}
body{margin:0;
background:var(--paper);
color:var(--forest);
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:Schoolbell,sans-serif;
font-weight:400;
letter-spacing:-.025em}
h2{font-size:clamp(64px,7.8vw,112px);
line-height:.98}
p{line-height:1.6}
a{color:inherit;
text-decoration:none}
button{font:inherit;
cursor:pointer;
color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #bf7b41;
outline-offset:6px}
button:disabled{cursor:wait}
img{display:block;
max-width:100%;
height:auto}
svg{width:24px;
height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
stroke-linecap:round;
stroke-linejoin:round}
.svg-defs{position:absolute;
width:0;
height:0;
overflow:hidden}
.skip{position:fixed;
top:-100px;
left:20px;
background:white;
color:var(--forest);
padding:15px;
z-index:100}
.skip:focus{top:20px}
.navigation{position:fixed;
top:0;
left:0;
right:0;
z-index:30;
display:flex;
align-items:center;
justify-content:space-between;
padding:22px 32px;
pointer-events:none;
transition:background .4s var(--ease),transform 320ms var(--ease),visibility 0s linear}
.navigation>*{pointer-events:auto}
.menu-button{display:flex;
align-items:center;
gap:12px;
border:0;
background:var(--paper);
border-radius:50px;
padding:0 20px 0 0;
min-height:50px;
font-size:12px}
.menu-dots{width:50px;
height:50px;
border-radius:50%;
background:var(--forest);
display:grid;
grid-template-columns:5px 5px;
grid-template-rows:5px 5px;
gap:4px;
place-content:center;
transition:transform .5s var(--ease)}
.menu-dots i{background:var(--paper);
border-radius:50%}
.menu-button:hover .menu-dots{transform:rotate(90deg)}
.menu-open .menu-dots{transform:rotate(45deg)}
.nav-brand{position:fixed;
top:22px;
left:50%;
z-index:30;
transform:translate(-50%,-90px);
padding:16px 20px;
mix-blend-mode:difference;
transition:transform .6s var(--ease)}
/* Inverted brand ink blends back to green on paper and light on forest. */
.nav-brand img{filter:invert(1)}
.scrolled .nav-brand{transform:translate(-50%,0)}
.round-link{display:inline-flex;
align-items:center;
gap:0;
font-size:12px}
.round-link>span:first-child{background:var(--forest);
color:var(--paper);
padding:18px 26px;
border-radius:50px;
min-height:52px;
display:flex;
align-items:center}
.arrow-circle{height:52px;
width:52px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--forest);
color:var(--paper);
transition:transform .5s var(--ease)}
.round-link:hover .arrow-circle{transform:rotate(45deg)}
.launch-link>span:first-child{background:var(--forest);
color:var(--paper)}
.launch-link .arrow-circle{background:var(--sage);
color:var(--forest)}
.navigation-menu{position:fixed;
inset:0;
background:var(--sage);
z-index:25;
display:flex;
flex-direction:column;
justify-content:center;
padding:110px max(7vw,30px) 50px;
animation:menu-in .7s var(--ease)}
.navigation-menu[hidden]{display:none}
.navigation-menu nav{display:flex;
flex-direction:column}
.navigation-menu nav a{display:flex;
align-items:center;
justify-content:space-between;
font:clamp(36px,6vw,88px)/1.35 Schoolbell;
border-bottom:1px solid #2d634d30;
transition:transform .3s}
.navigation-menu nav a:hover{transform:translateX(10px)}
.navigation-menu nav a span{font:12px -apple-system,sans-serif}
.navigation-menu>p{margin-top:40px;
font-size:12px}
.hero{position:relative;
min-height:980px;
height:108svh;
max-height:1200px;
padding:104px 5vw 0;
background-color:var(--paper);
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:36px 36px;
overflow:hidden;
isolation:isolate}
.hero-wordmark{position:relative;
width:89%;
margin:auto;
transform-origin:center top}
.hero-wordmark img{width:100%}
.hero-scene{position:absolute;
top:24%;
left:0;
right:0;
height:43%;
perspective:1400px;
pointer-events:none}
.hero-item{position:absolute;
left:50%;
top:0;
width:clamp(260px,27vw,390px);
aspect-ratio:1;
border-radius:28px;
overflow:hidden;
box-shadow:0 28px 60px #253c2726;
transform-style:preserve-3d;
backface-visibility:hidden}
.hero-item>img{width:100%;
height:100%;
object-fit:cover}
.item-photo{z-index:1;
transform:translate(-129%,12%) rotate(-13deg);
animation:photo-enter 1.3s var(--ease) both}
.tiny-caption{position:absolute;
bottom:18px;
left:20px;
color:var(--paper);
font:22px Schoolbell;
text-shadow:0 2px 7px #0009}
.item-note{background:var(--sage);
z-index:3;
padding:32px;
transform:translate(-50%,-4%) rotate(4deg);
animation:note-enter 1.4s var(--ease) both;
display:flex;
flex-direction:column;
align-items:center;
text-align:center}
.note-small{font:19px Schoolbell}
.item-note p{font:64px/.98 Schoolbell;
margin-top:26px;
letter-spacing:-.025em}
.item-note p>span{font-size:44px}
.note-line{width:88%;
height:90px;
margin-top:15px;
stroke-width:3}
.note-sign{font:16px Schoolbell;
margin-top:auto;
align-self:flex-end;
transform:rotate(-6deg)}
.item-ghost{z-index:2;
transform:translate(29%,13%) rotate(12deg);
animation:ghost-enter 1.5s var(--ease) both;
overflow:visible}
.item-ghost>img{border-radius:28px}
.sticker-label{position:absolute;
right:-35px;
bottom:-25px;
padding:18px 22px;
border-radius:50%;
background:var(--forest);
color:var(--paper);
font:24px/1.05 Schoolbell;
transform:rotate(-23deg);
text-align:center}
.scene-annotation{position:absolute;
left:calc(50% + 260px);
top:-42px;
font:25px Schoolbell;
transform:rotate(7deg)}
.scene-arrow{position:absolute;
left:calc(50% + 470px);
top:-15px;
width:65px;
height:90px;
transform:rotate(-15deg)}
.hero-bottom{position:absolute;
left:5vw;
right:5vw;
bottom:112px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:50px}
.hero h1{font-size:clamp(62px,6.8vw,100px);
line-height:.97;
max-width:760px}
.word-circle{display:inline-block;
position:relative}
.word-circle svg{position:absolute;
left:-15%;
top:-6%;
width:130%;
height:120%;
transform:rotate(-8deg);
stroke-width:1.6;
stroke-dasharray:550;
animation:circle-in 1.5s .5s var(--ease) both}
.hero-description{padding-bottom:5px;
min-width:265px}
.hero-description p{font-size:14px;
line-height:1.6;
color:var(--ink);
margin-bottom:22px}
.scroll-note{position:absolute;
bottom:28px;
left:5vw;
right:5vw;
display:flex;
align-items:center;
justify-content:space-between;
border-top:1px solid #2d634d30;
padding-top:20px;
font-size:11px}
.scroll-note svg{width:16px;
height:25px}
.journey{height:265vh;
position:relative;
background:var(--sage)}
.journey-stage{height:100svh;
min-height:740px;
position:sticky;
top:0;
overflow:hidden;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
padding:90px 7vw;
isolation:isolate}
.journey-copy{position:relative;
z-index:5;
align-self:center}
.journey h2{font-size:clamp(62px,6.8vw,98px);
line-height:1.02}
.journey h2>span{color:#66825c}
.journey-texts{position:relative;
margin-top:55px;
min-height:140px}
.journey-text{position:absolute;
inset:0;
opacity:0;
transform:translateY(20px);
transition:opacity .45s,transform .65s var(--ease);
pointer-events:none}
.journey-text.active{opacity:1;
transform:none}
.journey-text h3{font-size:34px}
.journey-text p{font-size:14px;
margin-top:15px;
color:var(--ink)}
.journey-progress{display:flex;
gap:8px;
margin-top:25px}
.journey-progress span{width:25px;
height:3px;
background:#2d634d30;
transition:background .4s}
.journey-progress span.active{width:70px;
background:var(--forest)}
.delivery-scene{height:620px;
position:relative;
perspective:1000px;
display:flex;
align-items:center;
justify-content:center}
.phone{position:relative;
background:#dae3cd;
width:266px;
height:552px;
border:7px solid #263b2d;
border-radius:49px;
box-shadow:8px 25px 45px #28433030;
flex-shrink:0;
overflow:hidden;
transform:rotate(9deg) translateX(15px);
z-index:3}
.phone-island{position:absolute;
top:11px;
width:78px;
height:22px;
left:50%;
transform:translateX(-50%);
background:#263b2d;
border-radius:50px}
.phone-bar{display:flex;
justify-content:space-between;
padding:18px 20px;
font-size:10px;
font-weight:600}
.phone-signal{font-size:8px;
letter-spacing:1px}
.phone-date{text-align:center;
font-size:12px;
margin-top:34px}
.phone-time{font-size:61px;
text-align:center;
font-weight:400;
letter-spacing:-.04em;
line-height:1.1;
margin-top:3px}
.phone-widget{position:relative;
margin:27px auto 7px;
width:198px;
height:198px;
border-radius:24px;
overflow:hidden;
box-shadow:0 8px 20px #24332c15}
.phone-widget img{position:absolute;
inset:0;
object-fit:cover;
width:100%;
height:100%}
.widget-second{opacity:0}
.phone-widget-label{display:block;
text-align:center;
font-size:10px}
.phone-apps{display:flex;
gap:14px;
padding:30px 22px}
.phone-apps span{width:39px;
height:39px;
border-radius:11px;
background:#2d634d2e}
.phone-apps span:nth-child(2){background:#bd9a664a}
.phone-apps span:nth-child(3){background:#798cad4a}
.phone-apps span:nth-child(4){background:#c1a6ce8a}
.phone-home{position:absolute;
bottom:10px;
left:34%;
width:32%;
height:4px;
border-radius:5px;
background:#263b2d}
.orbit-card{position:absolute;
top:220px;
width:220px;
height:220px;
overflow:hidden;
border-radius:23px;
box-shadow:0 18px 35px #24332c20;
z-index:2}
.orbit-card img{height:100%;
width:100%;
object-fit:cover}
.orbit-photo{left:-35px;
transform:rotate(-18deg)}
.orbit-ghost{right:-40px;
top:70px;
transform:rotate(15deg);
width:175px;
height:175px}
.delivery-caption{position:absolute;
bottom:-10px;
right:-5px;
font:24px Schoolbell;
transform:rotate(-6deg);
z-index:4}
.journey-count{position:absolute;
bottom:28px;
left:7vw;
font-size:11px}
.manifesto{background:var(--paper);
padding:150px 7vw 125px;
position:relative;
overflow:hidden}
.manifesto>p{font:clamp(46px,6.9vw,100px)/1.13 Schoolbell;
letter-spacing:-.025em}
.manifesto-image{display:inline-block;
width:115px;
height:85px;
vertical-align:middle;
transform:rotate(-13deg)}
.manifesto-image img{width:100%;
height:100%;
object-fit:contain}
.hand-accent{color:#71836a}
.manifesto-star{position:absolute;
right:8%;
bottom:45px;
width:65px;
height:65px;
transform:rotate(12deg);
stroke-width:2}
.collection{padding:50px 0 85px;
background:var(--paper);
overflow:hidden}
.collection-heading{padding:0 7vw;
display:grid;
grid-template-columns:1.4fr 1fr auto;
align-items:end;
gap:45px}
.collection-heading h2{font-size:clamp(60px,6.6vw,96px);
line-height:1.02}
.collection-heading h2>span{color:#71836a}
.collection-heading p{font-size:13px;
color:var(--ink);
padding-bottom:10px}
.gallery-controls{display:flex;
gap:7px;
padding-bottom:10px}
.gallery-controls button{border:1px solid #2d634d50;
background:none;
border-radius:50%;
width:49px;
height:49px;
display:grid;
place-items:center;
transition:color .3s,background .3s}
.gallery-controls button:hover{background:var(--forest);
color:var(--paper)}
.gallery-controls button:first-child svg{transform:rotate(-135deg)}
.gallery-controls button:last-child svg{transform:rotate(45deg)}
.gallery-track{display:flex;
gap:35px;
overflow-x:auto;
overscroll-behavior-x:contain;
scrollbar-width:none;
scroll-snap-type:x mandatory;
padding:70px 7vw 35px;
scroll-behavior:smooth}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-piece{width:37vw;
min-width:37vw;
scroll-snap-align:center}
.piece-art{position:relative;
aspect-ratio:1;
border-radius:24px;
overflow:hidden;
transform:rotate(-3deg);
transition:transform .75s var(--ease)}
.gallery-piece:nth-child(even) .piece-art{transform:rotate(3deg)}
.gallery-piece:hover .piece-art{transform:rotate(0) scale(.98)}
.piece-art>img{width:100%;
height:100%;
object-fit:cover}
.cat-art{background:#dfb98f}
.cat-art>img{object-fit:contain;
padding:35px}
.cat-art>span{position:absolute;
bottom:20px;
right:25px;
font:40px Schoolbell;
color:var(--ink);
transform:rotate(-8deg)}
.piece-info{padding-top:27px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px}
.piece-info h3{font-size:30px}
.piece-info>span{font-size:10px;
white-space:nowrap}
.museum-note{margin:65px 7vw 0;
padding-top:28px;
border-top:1px solid #2d634d30;
display:flex;
align-items:center;
justify-content:flex-end;
gap:20px}
.museum-note svg{width:35px;
height:35px}
.museum-note p{font-size:12px;
color:var(--muted)}
.museum-note strong{font-weight:500;
color:var(--forest)}
.studio-section{background:var(--forest);
color:var(--paper);
padding:100px 7vw 45px;
border-radius:38px 38px 0 0;
position:relative;
overflow:hidden}
.studio-heading{position:relative;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:40px}
.studio-heading h2{font-size:clamp(70px,8vw,115px);
line-height:.98}
.studio-heading h2 span{color:var(--sage)}
.studio-heading p{font-size:13px;
margin-bottom:15px;
color:#e1e5d5}
.studio-heading>svg{position:absolute;
width:74px;
height:74px;
right:36%;
top:5px;
transform:rotate(15deg)}
.studio-layout{display:grid;
grid-template-columns:1.15fr 1fr;
gap:100px;
align-items:center;
max-width:1050px;
margin:65px auto 0}
.studio-board{background:#faf8f1;
color:var(--forest);
padding:19px;
border-radius:22px;
transform:rotate(-2deg);
box-shadow:0 25px 55px #142b2940}
.board-top{display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
font-size:11px}
.text-button{display:flex;
gap:7px;
align-items:center;
border:0;
background:none;
min-height:30px;
font-size:10px}
.text-button svg{width:17px;
height:17px}
.canvas-wrap{position:relative;
aspect-ratio:1;
background:var(--paper);
border-radius:12px;
overflow:hidden}
.canvas-wrap canvas{width:100%;
height:100%;
display:block;
touch-action:none;
cursor:crosshair}
#canvas-hint{position:absolute;
top:37%;
left:10%;
right:10%;
font:38px/1.15 Schoolbell;
text-align:center;
color:#74806b;
pointer-events:none;
transition:opacity .3s}
#canvas-hint svg{display:block;
margin:15px auto 0;
width:90px;
height:45px}
#canvas-hint.hidden{opacity:0}
.board-bottom{margin-top:17px;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px}
.palette{display:flex;
gap:5px}
.color{border:7px solid #faf8f1;
box-shadow:0 0 0 1px transparent;
background:var(--swatch);
border-radius:50%;
width:32px;
height:32px;
transition:box-shadow .2s,transform .3s}
.color.selected{box-shadow:0 0 0 1px var(--swatch)}
.color:hover{transform:scale(1.1)}
.send-button{border:0;
border-radius:50px;
background:var(--forest);
color:var(--paper);
padding:14px 20px;
display:flex;
align-items:center;
gap:18px;
font-size:12px;
transition:background .3s,transform .3s}
.send-button svg{width:19px;
height:19px}
.send-button:hover{background:#204d3a;
transform:translateY(-2px)}
.keyboard-draw{background:none;
border:0;
font-size:10px;
padding:0;
text-decoration:underline;
display:block;
margin:13px 0 1px 5px;
min-height:24px;
color:var(--muted)}
.studio-destination{position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center}
.destination-label{font-size:11px;
margin-bottom:22px}
.preview-widget{background:var(--paper);
width:280px;
height:280px;
border-radius:35px;
overflow:hidden;
transform:rotate(7deg);
box-shadow:0 24px 55px #102f2c4d}
.preview-widget img{width:100%;
height:100%;
object-fit:cover}
.widget-wordmark{width:100px;
margin-top:28px}
.studio-destination>p{font:25px/1.2 Schoolbell;
max-width:300px;
margin-top:30px;
min-height:60px}
.destination-arrow{position:absolute;
top:80px;
left:-70px;
width:95px;
height:70px;
transform:rotate(-5deg)}
.demo-footnote{font-size:10px;
color:#c8d6c2;
text-align:center;
margin-top:50px}
.flying-wijetto{transform-origin:top left;
position:fixed;
z-index:50;
pointer-events:none;
border-radius:22px;
object-fit:cover;
box-shadow:0 20px 50px #122d3540}
.faq{padding:120px 7vw 130px;
display:grid;
grid-template-columns:1fr 1.1fr;
gap:85px}
.faq h2{font-size:clamp(55px,5.5vw,80px);
line-height:1.05}
.faq-list details{border-bottom:1px solid #2d634d40;
padding:24px 0}
.faq-list details:first-child{padding-top:0}
.faq summary{list-style:none;
font-size:14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
cursor:pointer;
min-height:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{font-size:24px;
font-weight:300;
transition:transform .3s}
.faq details[open] summary>span{transform:rotate(45deg)}
.faq details p{font-size:13px;
line-height:1.7;
color:var(--muted);
margin-top:18px;
max-width:52ch}
footer{background:var(--forest);
color:var(--paper);
display:flex;
flex-direction:column;
min-height:100svh;
padding:85px 5vw 25px;
overflow:hidden}
.footer-top{display:flex;
align-items:flex-end;
justify-content:space-between;
gap:50px;
padding:0 2vw 85px}
.footer-top h2{font-size:clamp(32px,3.4vw,50px);
line-height:1.15}
.footer-download{position:relative;flex-shrink:0;margin-right:80px}
.footer-download-arrows{position:absolute;left:50%;top:50%;width:460px;height:276px;max-width:none;translate:-50% -50%;pointer-events:none;overflow:visible}
.footer-download .round-link{position:relative;white-space:nowrap}
.footer-arrow-caption{display:none;position:absolute;left:50%;top:50%;width:460px;height:276px;translate:-50% -50%;pointer-events:none;font:18px/1.25 Schoolbell,sans-serif}
.footer-arrow-caption>span{position:absolute;top:var(--caption-y);left:var(--caption-x);width:180px;translate:-50% -50%;text-align:center;text-wrap:balance;text-shadow:-2px -2px var(--forest),0 -2px var(--forest),2px -2px var(--forest),-2px 0 var(--forest),2px 0 var(--forest),-2px 2px var(--forest),0 2px var(--forest),2px 2px var(--forest)}
.footer-arrow-caption>span:nth-child(3){width:120px}
.footer-top>div>p{font-size:15px;
margin-bottom:20px}
.availability{display:flex;
align-items:center;
gap:8px;
font-size:10px;
color:#d3dfc8;
margin-bottom:25px}
.availability>span{width:6px;
height:6px;
background:var(--sage);
border-radius:50%}
.light>span:first-child{background:var(--paper);
color:var(--forest)}
.light .arrow-circle{background:var(--sage);
color:var(--forest)}
.footer-logo{display:block;
flex-shrink:0;
margin-top:auto}
.footer-logo img{width:100%}
.footer-bottom{display:flex;
flex-shrink:0;
justify-content:space-between;
align-items:center;
font-size:10px;
margin-top:45px;
padding-top:22px;
border-top:1px solid #f5f0e640}
.footer-bottom{gap:24px}
.footer-links{display:flex;
justify-content:flex-end;
flex-wrap:wrap;
gap:12px 28px;
text-align:right}

@keyframes photo-enter{from{opacity:0;
transform:translate(-90%,40%) rotate(-3deg)}
to{opacity:1;
transform:translate(-129%,12%) rotate(-13deg)}
}
@keyframes note-enter{from{opacity:0;
transform:translate(-50%,35%) rotate(-8deg)}
to{opacity:1;
transform:translate(-50%,-4%) rotate(4deg)}
}
@keyframes ghost-enter{from{opacity:0;
transform:translate(-20%,40%) rotate(0)}
to{opacity:1;
transform:translate(29%,13%) rotate(12deg)}
}
@keyframes circle-in{from{stroke-dashoffset:550}
to{stroke-dashoffset:0}
}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0 round 0 0 60px 60px)}
to{clip-path:inset(0 round 0)}
}

@media(min-width:1600px){.hero{min-height:1080px}
.hero-scene{top:25%}
.hero-bottom{bottom:120px}
.hero-item{width:390px}
}

@media(max-width:1100px){.hero{min-height:940px}
.hero-scene{top:28%}
.hero-item{width:29vw}
.item-note{padding:24px}
.item-note p{font-size:53px;
margin-top:18px}
.item-note p>span{font-size:34px}
.note-line{height:65px}
.note-sign{font-size:13px}
.scene-annotation{left:auto;
right:12%;
font-size:21px}
.scene-arrow{left:auto;
right:7%}
.hero-bottom{bottom:118px}
.hero h1{font-size:74px}
.journey-stage{padding:100px 5vw}
.journey h2{font-size:67px}
.journey-text p{font-size:12px}
.delivery-scene{transform:scale(.88)}
.journey-texts{margin-top:35px}
.collection-heading{grid-template-columns:1.5fr 1fr;
gap:30px}
.gallery-controls{grid-column:2;
justify-self:end;
margin-top:-70px}
.collection-heading p{padding-bottom:70px}
.gallery-piece{min-width:44vw;
width:44vw}
.piece-info{display:block}
.piece-info>span{display:block;
margin-top:9px}
.studio-layout{gap:60px}
.preview-widget{width:240px;
height:240px}
.destination-arrow{left:-45px;
width:70px}
.studio-heading>svg{right:35%;
width:55px}
.faq{gap:50px}
}

@media(max-width:760px){html{scroll-padding-top:80px}
.navigation{padding:15px 16px}
.menu-button{min-height:43px;
padding-right:13px;
gap:7px;
font-size:10px}
.menu-dots{width:43px;
height:43px}
.launch-link>span:first-child{font-size:10px;
padding:13px 15px;
min-height:43px}
.launch-link .arrow-circle{width:43px;
height:43px}
.nav-brand{
  display:flex;
  align-items:center;
  top:15px;
  left:16px;
  width:116px;
  min-height:43px;
  padding:10px 0;
  transform:translateY(-90px);
  visibility:hidden;
  transition:transform .6s var(--ease),visibility 0s .6s;
}
.scrolled .nav-brand{transform:translateY(0);visibility:visible;transition-delay:0s}
.hero{min-height:900px;
height:106svh;
max-height:1050px;
padding:103px 5vw 0;
background-size:28px 28px}
.hero-wordmark{width:100%}
.hero-scene{top:27%;
height:35%}
.hero-item{width:51vw;
max-width:280px;
border-radius:22px}
.item-photo{transform:translate(-118%,22%) rotate(-16deg)}
.item-note{transform:translate(-50%,-10%) rotate(3deg);
padding:20px 14px}
.item-ghost{transform:translate(18%,24%) rotate(15deg)}
.item-ghost>img{border-radius:22px}
.note-small{font-size:13px}
.item-note p{font-size:43px;
margin-top:15px}
.item-note p>span{font-size:27px}
.note-line{height:52px;
margin-top:6px}
.note-sign{font-size:11px}
.tiny-caption{font-size:13px;
left:12px;
bottom:15px;
max-width:100px}
.sticker-label{font-size:16px;
right:0;
bottom:-25px;
padding:13px 17px}
.scene-annotation{right:8%;
top:-38px;
font-size:17px;
transform:rotate(-6deg)}
.scene-arrow{display:none}
.hero-bottom{left:6vw;
right:6vw;
bottom:95px;
display:block}
.hero h1{font-size:clamp(53px,10vw,76px);
line-height:.98}
.word-circle svg{stroke-width:1.4}
.hero-description{display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-top:24px;
min-width:0}
.hero-description p{font-size:11px;
margin:0;
max-width:185px}
.hero-description .round-link>span:first-child{max-width:105px;
padding:12px 16px;
min-height:47px;
font-size:10px;
line-height:1.35}
.hero-description .arrow-circle{width:43px;
height:47px}
.hero-description .arrow-circle svg{width:21px}
.scroll-note{font-size:9px;
bottom:25px;
padding-top:15px}
.journey{height:230svh}
.journey-stage{min-height:780px;
height:100svh;
grid-template-columns:1fr;
padding:95px 7vw 40px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:stretch}
.journey-copy{align-self:stretch}
.journey h2{font-size:51px;
line-height:1}
.journey-texts{margin-top:22px;
min-height:100px}
.journey-text h3{font-size:27px}
.journey-text p{font-size:11px;
margin-top:8px}
.journey-progress{margin-top:10px;
gap:5px}
.journey-progress span{width:15px;
height:2px}
.journey-progress span.active{width:40px}
.delivery-scene{height:395px;
flex-shrink:0;
transform:none;
margin-top:20px}
.phone{width:180px;
height:370px;
border-radius:34px;
border-width:5px;
transform:rotate(7deg)}
.phone-island{width:56px;
height:16px;
top:8px}
.phone-bar{padding:12px 14px;
font-size:7px}
.phone-date{font-size:9px;
margin-top:22px}
.phone-time{font-size:43px}
.phone-widget{width:136px;
height:136px;
margin-top:17px;
border-radius:18px}
.phone-widget-label{font-size:8px}
.phone-apps{padding:20px 16px;
gap:10px}
.phone-apps span{width:25px;
height:25px;
border-radius:7px}
.phone-home{bottom:7px;
height:3px}
.orbit-card{width:130px;
height:130px;
border-radius:16px;
top:150px}
.orbit-photo{left:-12px}
.orbit-ghost{width:110px;
height:110px;
right:-12px;
top:55px}
.delivery-caption{font-size:17px;
right:0;
bottom:-13px}
.journey-count{display:none}
.manifesto{padding:85px 7vw 90px}
.manifesto>p{font-size:clamp(33px,7.5vw,54px);
line-height:1.2}
.manifesto-image{width:54px;
height:45px}
.manifesto-star{width:40px;
height:40px;
bottom:27px}
.collection{padding:30px 0 60px}
.collection-heading{padding:0 7vw;
display:block;
position:relative}
.collection-heading h2{font-size:54px;
line-height:1}
.collection-heading p{font-size:12px;
margin-top:22px;
padding-bottom:0}
.gallery-controls{position:absolute;
right:7vw;
bottom:0;
margin:0;
padding:0;
gap:5px}
.gallery-controls button{width:38px;
height:38px}
.gallery-controls button svg{width:18px;
height:18px}
.gallery-track{padding:45px 9vw 20px;
gap:28px}
.gallery-piece{min-width:77vw;
width:77vw}
.piece-art{border-radius:20px}
.piece-info{padding-top:23px}
.piece-info h3{font-size:26px}
.piece-info>span{font-size:10px}
.museum-note{margin:35px 7vw 0;
gap:14px;
padding-top:23px;
justify-content:flex-start}
.museum-note p{font-size:10px}
.museum-note svg{width:28px;
height:28px;
flex-shrink:0}
.studio-section{padding:65px 7vw 30px;
border-radius:25px 25px 0 0}
.studio-heading{display:block}
.studio-heading h2{font-size:63px;
line-height:1}
.studio-heading p{font-size:12px;
margin-top:23px}
.studio-heading>svg{right:0;
top:5px;
width:42px;
height:42px}
.studio-layout{display:flex;
flex-direction:column;
gap:50px;
margin-top:35px}
.studio-board{width:100%;
max-width:450px;
padding:14px;
border-radius:18px}
.board-top{font-size:10px;
margin-bottom:11px}
.text-button{font-size:9px}
.text-button svg{width:15px}
.board-bottom{gap:5px;
margin-top:14px}
.palette{gap:3px}
.color{width:29px;
height:29px;
border-width:6px}
.send-button{font-size:11px;
padding:13px 16px;
gap:10px}
.send-button svg{width:17px;
height:17px}
#canvas-hint{font-size:29px}
.keyboard-draw{font-size:9px}
.studio-destination{width:100%}
.destination-label{font-size:10px;
margin-bottom:20px}
.preview-widget{width:200px;
height:200px;
border-radius:27px;
transform:rotate(6deg)}
.widget-wordmark{width:85px;
margin-top:23px}
.studio-destination>p{font-size:22px;
margin-top:22px;
min-height:36px}
.destination-arrow{left:2%;
top:80px;
width:60px;
transform:rotate(35deg)}
.demo-footnote{font-size:9px;
margin-top:30px}
.faq{padding:75px 7vw;
display:block}
.faq h2{font-size:54px}
.faq-list{margin-top:38px}
.faq summary{font-size:12px;
gap:12px}
.faq details p{font-size:12px}
.faq-list details{padding-block:19px}
.footer-top{display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto minmax(0,1fr);
align-items:stretch;
min-height:0;
gap:12px;
padding:0 2vw 12px}
.footer-top h2{font-size:clamp(22px,6.2vw,30px);
line-height:1.15}
.footer-top>.footer-copy{margin:0}
.footer-top>.footer-download{display:grid;
place-items:center;
align-self:stretch;
width:100%;
min-height:0;
margin:0}
.footer-download-arrows{width:100%;height:100%;max-height:240px}
.footer-download .footer-qr-surface{display:none}
.footer-arrow-caption{display:none}
/* Gentle single curves and varied lengths keep the gesture relaxed. */
.footer-download-arrows path:nth-child(1){stroke-width:6.5px;d:path("M586 185 Q523 201 450 180 M472 167 Q459 174 450 180 Q459 191 471 197")}
.footer-download-arrows path:nth-child(2){stroke-width:6.1px;d:path("M550 290 Q488 275 450 225 M473 229 Q460 226 450 225 Q454 239 458 249")}
.footer-download-arrows path:nth-child(3){stroke-width:7.2px;d:path("M439 328 Q422 287 390 260 M413 270 Q399 265 390 260 Q394 275 397 285")}
.footer-download-arrows path:nth-child(4){stroke-width:6.4px;d:path("M310 345 Q294 303 300 265 M287 286 Q296 274 300 265 Q305 276 315 284")}
.footer-download-arrows path:nth-child(5){stroke-width:6.8px;d:path("M112 328 Q166 309 210 260 M188 267 Q201 265 210 260 Q209 275 211 286")}
.footer-download-arrows path:nth-child(6){stroke-width:7px;d:path("M20 170 Q83 163 150 180 M129 163 Q142 173 150 180 Q136 186 128 196")}
.footer-download-arrows path:nth-child(7){stroke-width:6.2px;d:path("M63 66 Q108 94 150 135 M129 123 Q141 130 150 135 Q147 122 144 110")}
.footer-download-arrows path:nth-child(8){stroke-width:6.8px;d:path("M170 30 Q182 70 210 100 M189 90 Q202 96 210 100 Q210 87 213 78")}
.footer-download-arrows path:nth-child(9){stroke-width:6.4px;d:path("M298 18 Q310 58 300 95 M286 75 Q295 86 300 95 Q308 84 315 78")}
.footer-download-arrows path:nth-child(10){stroke-width:6px;d:path("M455 28 Q431 78 390 100 M397 77 Q395 92 390 100 Q406 94 418 89")}
.footer-download-arrows path:nth-child(11){stroke-width:7.1px;d:path("M552 87 Q496 104 450 135 M465 115 Q458 127 450 135 Q465 136 475 142")}
.footer-download-arrows path.footer-long-arrow{stroke-width:6.3px;d:path("M22 303 Q64 251 150 225 M126 226 Q141 226 150 225 Q141 237 135 247")}
footer{display:grid;
grid-template-rows:minmax(0,1fr) auto auto;
height:100dvh;
min-height:560px;
padding:24px 5vw max(16px,env(safe-area-inset-bottom))}
.footer-logo{width:100%;margin:0}
.footer-bottom{flex-direction:column-reverse;
align-items:center;
gap:16px;
margin-top:16px;
padding-top:12px;
text-align:center;
font-size:11px}
.footer-links{flex-direction:column;
align-items:center;
gap:0;
text-align:center;
font-size:14px}
.footer-links a{display:flex;
align-items:center;
justify-content:center;
min-height:44px}
@keyframes photo-enter{from{opacity:0;
transform:translate(-90%,45%) rotate(-5deg)}
to{opacity:1;
transform:translate(-118%,22%) rotate(-16deg)}
}
@keyframes note-enter{from{opacity:0;
transform:translate(-50%,30%) rotate(-8deg)}
to{opacity:1;
transform:translate(-50%,-10%) rotate(3deg)}
}
@keyframes ghost-enter{from{opacity:0;
transform:translate(-20%,45%) rotate(0)}
to{opacity:1;
transform:translate(18%,24%) rotate(15deg)}
}
}

@media(max-width:380px){.hero{min-height:860px}
.hero-scene{top:26%}
.hero h1{font-size:51px}
.hero-description p{font-size:10px}
.item-note{padding:16px 12px}
.item-note p{font-size:37px}
.item-note p>span{font-size:24px}
.note-small{font-size:12px}
.note-line{height:44px}
.gallery-controls{position:static;
margin-top:20px}
.journey h2{font-size:46px}
.journey-stage{padding-top:85px}
.studio-section{padding-inline:6vw}
.color{width:26px;
height:26px}
.palette{gap:2px}
.send-button{padding:12px 13px}
.board-top{font-size:9px}
.hero-description .round-link>span:first-child{max-width:100px}
.manifesto>p{font-size:31px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
.journey{height:auto}
.journey-stage{position:relative;
height:auto;
min-height:0;
padding-block:90px}
.journey-texts{min-height:0}
.journey-text{position:relative;
opacity:1;
transform:none;
margin-top:25px}
.journey-progress{display:none}
.delivery-scene{margin-top:35px}
.hero-wordmark,.hero-item,.phone,.orbit-card{will-change:auto}
}


@media(min-width:761px) and (max-height:800px){.hero{min-height:850px;
height:118svh}
.hero-scene{top:23%}
.hero-item{width:26vw;
max-width:335px}
.hero h1{font-size:78px}
.hero-bottom{bottom:100px}
.item-note p{font-size:54px}
.item-note p>span{font-size:36px}
.note-line{height:65px}
.scene-annotation{font-size:21px}
}

/* Breathing room: keep the brand, examples and pitch in separate flow rows. */
.hero {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 128px 7vw 32px;
}
.hero-wordmark {
  width: min(72%, 820px);
  margin: 0 auto;
}
.hero-scene {
  position: relative;
  inset: auto;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 56px;
  max-width: 1000px;
  margin: 88px auto 0;
  perspective: none;
}
.hero-item {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 270px;
  border-radius: 22px;
  animation: spaced-arrival .8s var(--ease) both;
  box-shadow: 0 18px 38px #253c271a;
}
.item-photo { transform: rotate(-4deg); }
.item-note { transform: none; padding: 22px; }
.item-ghost { transform: rotate(4deg); }
.item-ghost > img { border-radius: 22px; }
.note-small { font-size: 15px; }
.item-note p { font-size: 48px; margin-top: 20px; }
.item-note p > span { font-size: 34px; }
.note-line { height: 56px; margin-top: 12px; }
.note-sign { font-size: 12px; }
.tiny-caption, .sticker-label, .scene-annotation, .scene-arrow { display: none; }
.hero-bottom {
  position: relative;
  inset: auto;
  max-width: 1120px;
  margin: 96px auto 0;
  gap: 80px;
  align-items: center;
}
.hero h1 { font-size: clamp(60px, 5.8vw, 84px); line-height: 1.06; }
.hero-description { min-width: 0; flex-shrink: 0; }
.hero-description p { font-size: 15px; line-height: 1.75; margin-bottom: 28px; }
.scroll-note {
  position: relative;
  inset: auto;
  max-width: 1120px;
  margin: 64px auto 0;
  padding-top: 24px;
}
.journey-stage { column-gap: 72px; }
.journey h2 { font-size: clamp(58px, 5.4vw, 80px); line-height: 1.12; }
.journey-texts { margin-top: 48px; }
.journey-text p { line-height: 1.8; }
.delivery-caption { bottom: -25px; font-size: 21px; }
.manifesto { padding-block: 144px; }
.manifesto > p { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.25; }
.manifesto-star, .studio-heading > svg, .destination-arrow { display: none; }
.collection { padding-top: 40px; padding-bottom: 104px; }
.collection-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
.collection-heading h2 { grid-column: 1 / -1; font-size: clamp(54px, 5.4vw, 80px); line-height: 1.12; }
.collection-heading p { grid-column: 1; padding: 0; font-size: 14px; }
.gallery-controls { position: static; grid-column: 2; grid-row: 2; margin: 0; padding: 0; }
.gallery-track { padding-top: 64px; gap: 48px; }
.gallery-piece { width: 33vw; min-width: 33vw; }
.piece-art, .gallery-piece:nth-child(even) .piece-art { transform: none; }
.piece-info { display: block; padding-top: 28px; }
.piece-info h3 { font-size: 28px; line-height: 1.3; }
.piece-info > span { display: block; margin-top: 12px; }
.studio-section { padding-top: 112px; }
.studio-heading { gap: 64px; }
.studio-heading h2 { font-size: clamp(64px, 6.2vw, 88px); line-height: 1.1; }
.studio-heading p { font-size: 14px; line-height: 1.8; }
.studio-layout { margin-top: 88px; }
@keyframes spaced-arrival {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
@media (max-width: 1100px) {
  .hero { padding-top: 120px; }
  .hero-scene { gap: 36px; margin-top: 72px; }
  .hero-item { max-width: 240px; }
  .item-note { padding: 18px; }
  .item-note p { font-size: 42px; margin-top: 16px; }
  .item-note p > span { font-size: 29px; }
  .note-line { height: 44px; }
  .hero-bottom { gap: 48px; margin-top: 80px; }
  .hero h1 { font-size: 64px; }
  .hero-description p { font-size: 13px; }
  .journey-stage { column-gap: 36px; }
  .journey h2 { font-size: 58px; }
  .gallery-piece { width: 43vw; min-width: 43vw; }
}
@media (max-width: 760px) {
  .hero { padding: 104px 7vw 30px; }
  .hero-wordmark { width: 90%; }
  .hero-scene { display: flex; justify-content: center; margin-top: 52px; }
  .hero-item { width: 230px; max-width: 100%; }
  .item-photo, .item-ghost { display: none; }
  .item-note { padding: 20px; }
  .item-note p { font-size: 44px; }
  .item-note p > span { font-size: 32px; }
  .note-line { height: 48px; }
  .hero-bottom { display: block; margin-top: 56px; }
  .hero h1 { font-size: 58px; line-height: 1.05; }
  .hero-description { display: block; margin-top: 28px; }
  .hero-description p { max-width: none; font-size: 14px; margin-bottom: 24px; }
  .hero-description .round-link > span:first-child { max-width: none; font-size: 12px; padding: 16px 22px; min-height: 50px; }
  .hero-description .arrow-circle { width: 50px; height: 50px; }
  .scroll-note { margin-top: 40px; padding-top: 22px; font-size: 10px; }
  .journey h2 { font-size: 49px; }
  .journey-texts { margin-top: 28px; }
  .journey-text p { font-size: 12px; }
  .delivery-caption { bottom: -12px; font-size: 17px; }
  .manifesto { padding-block: 88px; }
  .manifesto > p { font-size: 35px; line-height: 1.3; }
  .collection { padding-block: 32px 72px; }
  .collection-heading { display: grid; gap: 28px 16px; }
  .collection-heading h2 { font-size: 48px; }
  .collection-heading p { margin: 0; font-size: 12px; }
  .gallery-controls { margin: 0; }
  .gallery-track { padding-top: 44px; gap: 28px; }
  .gallery-piece { width: 77vw; min-width: 77vw; }
  .piece-info h3 { font-size: 26px; }
  .studio-section { padding-top: 72px; }
  .studio-heading h2 { font-size: 58px; }
  .studio-heading p { font-size: 13px; margin-top: 28px; }
  .studio-layout { margin-top: 48px; gap: 64px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 51px; }
  .journey h2 { font-size: 43px; }
  .collection-heading h2 { font-size: 43px; }
  .manifesto > p { font-size: 31px; }
}
/* A clear central brand, with examples orbiting its reserved reading area. */
.hero.constellation {
  min-height: 0;
  height: 100vh;
  max-height: none;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-core {
  position: relative;
  z-index: 3;
  width: min(44vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.constellation-logo { width: 100%; }
.constellation h1 {
  font-size: clamp(32px, 3.1vw, 46px);
  line-height: 1.2;
  margin-top: 32px;
  max-width: none;
}
.hero-copy > p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  margin-top: 16px;
}
.hero-copy > .round-link { margin-top: 28px; }
.hero-orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit-example {
  position: absolute;
  margin: 0;
  transform: rotate(var(--tilt, 0deg));
  animation: orbit-drift var(--duration, 8s) ease-in-out var(--delay, 0s) infinite alternate;
  animation-play-state: paused;
}
.hero-in-view .orbit-example { animation-play-state: running; }
.orbit-example > img { width: 100%; height: 100%; object-fit: cover; }
.example-tea, .example-ghost, .example-selfie, .example-note {
  border-radius: 24px;
  box-shadow: 0 16px 34px #253c271a;
  overflow: hidden;
  aspect-ratio: 1;
}
.example-tea { width: clamp(140px, 14vw, 205px); top: 15%; left: 9%; }
.example-ghost { width: clamp(140px, 13vw, 190px); top: 19%; right: 7%; }
.example-selfie { width: clamp(140px, 12vw, 175px); bottom: 13%; right: 8%; }
.example-note {
  width: clamp(150px, 14vw, 195px);
  left: 6%; bottom: 15%;
  background: var(--sage);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-family: Schoolbell, sans-serif;
}
.example-note > span { font-size: 13px; }
.example-note > p { font-size: 34px; line-height: 1.1; }
.example-note > small { font-size: 11px; }
.example-cat { width: clamp(95px, 9vw, 130px); top: 12%; left: 63%; }
.example-cat img { object-fit: contain; filter: drop-shadow(0 10px 13px #253c271c); }
.example-stamp {
  left: 29%; bottom: 9%; padding: 13px 19px;
  background: var(--forest); color: var(--paper);
  border: 5px solid #fffdf7;
  border-radius: 38% 43% 35% 42%;
  box-shadow: 0 10px 22px #253c2712;
  font: 25px/1.05 Schoolbell, sans-serif;
  text-align: center;
}
.example-sun { width: 90px; height: 90px; left: 34%; top: 12%; color: #b17e24; stroke-width: 3; }
.example-blue { width: 115px; height: 100px; right: 29%; bottom: 8%; color: #3159c7; stroke-width: 5; }
.constellation-scroll {
  position: absolute; bottom: 27px; left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 44px; height: 44px;
}
.constellation-scroll svg { width: 27px; height: 27px; }
@keyframes orbit-drift {
  from { translate: 0 -6px; }
  to { translate: 0 6px; }
}
@media (min-width: 1800px) {
  .example-tea { left: 13%; }
  .example-ghost { right: 12%; }
  .example-note { left: 12%; }
  .example-selfie { right: 13%; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-core { width: 46vw; }
  .example-tea { left: 5%; top: 17%; width: 140px; }
  .example-ghost { right: 4%; top: 20%; width: 135px; }
  .example-note { left: 4%; bottom: 14%; width: 150px; }
  .example-selfie { right: 4%; bottom: 14%; width: 140px; }
  .example-sun { left: 33%; width: 65px; height: 65px; }
  .example-cat { width: 100px; top: 14%; }
  .example-stamp { left: 31%; font-size: 20px; }
  .example-blue { right: 26%; width: 90px; }
}
@media (max-width: 760px) {
  .hero.constellation { min-height: 0; max-height: none; height: 100vh; padding: 0 24px; }
  .hero-core { width: min(100%, 420px); }
  .constellation-logo { width: min(100%, 340px); }
  .constellation h1 { font-size: 34px; margin-top: 24px; }
  .hero-copy > p { font-size: 12px; line-height: 1.8; margin-top: 14px; }
  .hero-copy > .round-link { margin-top: 24px; }
  .hero-core .round-link > span:first-child { padding: 16px 22px; min-height: 50px; }
  .hero-core .arrow-circle { width: 50px; height: 50px; }
  .example-tea { width: 95px; top: 14%; left: 5%; border-radius: 17px; }
  .example-ghost { width: 95px; top: 17%; right: 5%; border-radius: 17px; }
  .example-note { width: 115px; left: 6%; bottom: 10%; padding: 12px 8px; border-radius: 17px; }
  .example-note > span { font-size: 10px; }
  .example-note > p { font-size: 24px; }
  .example-note > small { font-size: 9px; }
  .example-cat { width: 108px; top: auto; left: auto; right: 7%; bottom: 10%; }
  .example-selfie, .example-stamp, .example-blue { display: none; }
  .example-sun { width: 48px; height: 48px; top: 13%; left: 45%; stroke-width: 3; }
  .constellation-scroll { bottom: 17px; }
}
@media (max-width: 380px) {
  .hero.constellation { min-height: 0; padding-inline: 20px; }
  .constellation h1 { font-size: 30px; }
  .hero-copy > p { font-size: 11px; }
  .example-tea, .example-ghost { width: 85px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-example { animation: none; translate: none; }
}
/* Real photographic die-cut stickers retain their alpha and original white rims. */
.example-cat img,
.example-cat-cry img,
.example-cat-smile img,
.example-pizza img,
.example-matcha img {
  object-fit: contain;
  filter: drop-shadow(0 10px 12px #253c2720);
}
.example-cat-cry { width: 125px; left: 29%; bottom: 10%; }
.example-cat-smile { width: 130px; right: 9%; bottom: 14%; }
.example-pizza { width: 110px; height: auto; right: 29%; bottom: 8%; }
.example-matcha { width: 110px; height: auto; left: 34%; top: 10%; }
.cat-art > .collection-cat { position: absolute; width: 45%; height: auto; padding: 0; object-fit: contain; }
.collection-cat-one { left: 5%; top: 13%; rotate: -12deg; }
.collection-cat-two { right: 6%; top: 8%; rotate: 10deg; }
.collection-cat-three { left: 30%; bottom: 12%; rotate: -5deg; }
@media (max-width: 1100px) and (min-width: 761px) {
  .example-cat-cry { width: 105px; left: 30%; }
  .example-cat-smile { width: 110px; right: 5%; }
  .example-pizza { width: 95px; right: 26%; }
  .example-matcha { width: 85px; left: 34%; top: 11%; }
}
@media (min-width: 1800px) { .example-cat-smile { right: 13%; } }
@media (max-width: 760px) {
  .example-cat-cry, .example-cat-smile { display: none; }
  .example-pizza { display: block; width: 65px; right: auto; left: calc(50% - 30px); bottom: 10%; }
  .example-matcha { display: block; width: 55px; top: 12%; left: calc(50% - 25px); }
}
/* Clean white vinyl edges: no dark perimeter or shadow around photo stickers. */
.example-cat img,
.example-cat-cry img,
.example-cat-smile img,
.cat-art > .collection-cat { filter: none; }
.example-harold img {
  scale: 1.2;
}
.example-harold img {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
          drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.example-multipla img {
  scale: 1.2;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
          drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.example-landscape {
  aspect-ratio: 1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 28px #253c271a;
}
.example-matcha img,
.example-pizza img {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
          drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* Keep the surrounding examples outside the complete centered block on short screens. */
@media (min-width: 761px) and (max-height: 800px) {
  .example-cat { width: 95px; top: 7%; }
  .example-matcha { width: 75px; top: 8%; }
  .example-cat-cry { width: 90px; bottom: 8%; }
  .example-cat-smile { width: 95px; bottom: 8%; }
  .example-pizza { width: 80px; bottom: 6%; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .example-tea, .example-ghost { width: 65px; top: 15%; }
  .example-matcha { width: 40px; top: 14%; }
  .example-note { width: 85px; bottom: 9%; padding: 9px 6px; }
  .example-note > span, .example-note > small { font-size: 8px; }
  .example-note > p { font-size: 18px; }
  .example-cat { width: 80px; bottom: 9%; }
  .example-pizza { width: 45px; bottom: 8%; }
  .constellation-scroll { bottom: 6px; }
}
/* Larger photo stickers, with the central reading area kept clear. */
.example-cat { width: 190px; top: 7%; }
.example-cat-cry { width: 185px; bottom: 5%; }
.example-cat-smile { width: 195px; bottom: 9%; }
.example-pizza { width: 170px; bottom: 3%; }
.example-matcha { width: 180px; top: 3%; }
@media (min-width: 761px) and (max-width: 1100px) {
  .example-cat { width: 150px; top: 8%; }
  .example-cat-cry { width: 145px; bottom: 5%; }
  .example-cat-smile { width: 155px; bottom: 9%; }
  .example-pizza { width: 135px; bottom: 3%; }
  .example-matcha { width: 140px; top: 4%; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .example-cat { width: 140px; top: 5%; }
  .example-cat-cry { width: 140px; bottom: 4%; }
  .example-cat-smile { width: 145px; bottom: 8%; }
  .example-pizza { width: 125px; bottom: 2%; }
  .example-matcha { width: 130px; top: 2%; }
}
@media (max-width: 760px) {
  .example-cat { width: 125px; top: auto; right: 3%; bottom: 6%; }
  .example-pizza { width: 85px; left: calc(50% - 48px); bottom: 6%; }
  .example-matcha { width: 80px; left: calc(50% - 36px); top: 11%; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .example-cat { width: 95px; bottom: 6%; }
  .example-pizza { width: 60px; left: calc(50% - 32px); bottom: 6%; }
  .example-matcha { width: 55px; left: calc(50% - 25px); top: 13%; }
}
/* An offhand scribble rather than a centered typographic composition. */
.example-note > .fries-heading {
  align-self: flex-start;
  translate: -2px 2px;
  rotate: 7deg;
  letter-spacing: .02em;
}
.example-note > p {
  width: 100%;
  text-align: left;
  padding-left: 2px;
}
.fries-line { display: block; width: max-content; max-width: 100%; }
.fries-line-first {
  rotate: -6deg;
  translate: -3px 0;
  font-size: 1.06em;
  letter-spacing: -.025em;
}
.fries-line-second {
  rotate: 4deg;
  translate: 5px 1px;
  margin-top: .12em;
  font-size: .96em;
  letter-spacing: .015em;
}
.fries-small-word { font-size: .84em; vertical-align: .06em; }
.example-note > .fries-signature {
  align-self: flex-end;
  rotate: -5deg;
  translate: 2px -2px;
}

/* Keep the entire message and its sticker inside the square Wijetto. */
.example-note {
  container-type: inline-size;
  overflow: hidden;
  padding: 0;
  background: #f6dfb5;
  color: #852d32;
}
.example-note > .fries-heading {
  position: absolute;
  top: 12%;
  left: 8%;
  max-width: 54%;
  font-size: 6.7cqw;
  text-align: left;
  translate: none;
}
.example-note > p {
  position: absolute;
  top: 40%;
  left: 8%;
  width: 84%;
  margin: 0;
  padding: 0;
  font-size: 18cqw;
  line-height: 1.1;
}
.example-note > .fries-signature {
  position: absolute;
  right: 8%;
  bottom: 9%;
  font-size: 6cqw;
  translate: none;
}
.example-note > .fries-sticker {
  position: absolute;
  top: 7%;
  right: 8%;
  width: 30%;
  height: auto;
  object-fit: contain;
  rotate: 12deg;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
          drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* First-load sequence: native app pen gestures, then the message and scattered creations. */
.constellation-logo { display: block; height: auto; flex: none; overflow: visible; stroke: none; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.logo-writing { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .logo-writing { display: inline; }
  .logo-pen {
    stroke-dasharray: 1 1;
    animation: logo-ink var(--pen-duration) linear var(--pen-delay) both;
  }
  .logo-finished { animation: logo-complete 1ms step-end 980ms both; }
  .hero-copy { animation: hero-copy-in 650ms cubic-bezier(.16,1,.3,1) 650ms both; }
  .hero-orbit > .orbit-example {
    animation: orbit-arrive 700ms cubic-bezier(.16,1,.3,1) var(--arrival, 300ms) both,
      orbit-drift var(--duration,8s) ease-in-out var(--delay,0s) infinite alternate;
    animation-play-state: running, paused;
  }
  .hero-in-view .hero-orbit > .orbit-example { animation-play-state: running, running; }
  .hero-orbit > :nth-child(1) { --arrival: 300ms; }
  .hero-orbit > :nth-child(2) { --arrival: 410ms; }
  .hero-orbit > :nth-child(3) { --arrival: 520ms; }
  .hero-orbit > :nth-child(4) { --arrival: 465ms; }
  .hero-orbit > :nth-child(5) { --arrival: 355ms; }
  .hero-orbit > :nth-child(6) { --arrival: 575ms; }
  .hero-orbit > :nth-child(7) { --arrival: 630ms; }
  .hero-orbit > :nth-child(8) { --arrival: 685ms; }
}
@keyframes logo-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logo-complete { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbit-arrive {
  from { opacity: 0; transform: translateY(20px) rotate(calc(var(--tilt,0deg) - 5deg)) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotate(var(--tilt,0deg)) scale(1); }
}

/* Keep the download action at the right edge without the Explorer menu. */
.navigation > .launch-link { margin-left: auto; }

/* The sentence stays put while handwritten recipient labels pile up inside it. */
.buddy-section { position: relative; background: var(--paper); }
.buddy-stage { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 110px 6vw 80px; }
.buddy-sentence { width: 100%; max-width: 1200px; text-align: center; font-size: clamp(38px,4.3vw,64px); line-height: 1.4; letter-spacing: -.025em; }
.buddy-punchline { color: var(--muted); }
.buddy-words { position: relative; display: inline-grid; vertical-align: middle; width: 10.1em; margin: 1em .12em .35em; font-size: .78em; line-height: 1.2; isolation: isolate; }
.buddy-word { grid-area: 1 / 1; width: 100%; padding: .2em .3em .25em; color: var(--forest); background: var(--label-color); border-radius: 16px; transform: rotate(var(--label-angle)); box-shadow: 0 6px 12px #24332c12; white-space: nowrap; }
.buddy-word + .buddy-word { display: none; }
.buddy-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .buddy-enhanced { height: 440svh; }
  .buddy-enhanced .buddy-stage { position: sticky; top: 0; height: 100svh; }
  .buddy-enhanced .buddy-word { display: block; }
  .buddy-enhanced .buddy-word + .buddy-word { opacity: 0; }
}
@media (max-width: 760px) {
  .buddy-stage { padding: 90px 22px 60px; }
  .buddy-sentence { font-size: clamp(30px,6.8vw,46px); line-height: 1.6; }
  .buddy-words { font-size: .86em; margin: 1.25em .1em .7em; }
  .buddy-word { border-radius: 12px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .buddy-sentence { font-size: clamp(36px,4.4vw,58px); line-height: 1.35; }
}

/* One graph-paper texture across every section, with lighter ink on forest surfaces. */
:root {
  --grid-step: 36px;
  --page-grid: linear-gradient(var(--grid-ink, var(--grid)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-ink, var(--grid)) 1px, transparent 1px);
}
body, .hero.constellation, .buddy-section, .journey, .manifesto, .collection, .studio-section, .faq, footer {
  background-image: var(--page-grid);
  background-size: var(--grid-step) var(--grid-step);
}
.studio-section, footer { --grid-ink: rgba(245,240,230,.075); }
@media (max-width: 760px) { :root { --grid-step: 28px; } }

/* Draw the grid on the pinned panels so it stays still throughout their scroll sequence. */
.buddy-section, .journey { background-image: none; }
.buddy-stage, .journey-stage {
  background-color: inherit;
  background-image: var(--page-grid);
  background-size: var(--grid-step) var(--grid-step);
}

/* How it works: one continuous studio → send → home-screen composition. */
.journey { height: auto; }
.journey-stage { min-height: 0; height: auto; min-height: 100svh; padding: 100px 7vw 65px; gap: 6vw; grid-template-columns: 1fr 1.05fr; }
.journey h2 { font-size: clamp(44px,4.7vw,68px); line-height: 1.06; }
.journey-texts { margin-top: 38px; min-height: 150px; }
.journey-text { position: relative; opacity: 1; transform: none; margin-top: 25px; transition: none; }
.journey-text h3 { font-size: clamp(28px,2.7vw,38px); line-height: 1.2; }
.journey-text p { font-size: 14px; line-height: 1.8; margin-top: 16px; }
.journey-progress { margin-top: 20px; }
.delivery-scene { height: min(70svh,620px); min-height: 0; margin: 0; perspective: none; }
.how-scene-inner { position: absolute; left: 50%; top: 50%; width: 520px; height: 600px; transform: translate(-50%,-50%) scale(var(--scene-scale, .8)); transform-origin: center; }
.how-studio { position: absolute; width: 410px; left: 55px; top: 44px; padding: 20px 20px 16px; border-radius: 28px; background: #faf8f1; box-shadow: 0 22px 50px #253c2720; }
.how-studio-header { height: 38px; display: flex; justify-content: space-between; align-items: flex-start; font: 22px Schoolbell,sans-serif; }
.how-undo { font: 28px/1 sans-serif; }
.how-canvas { aspect-ratio: 1; width: 100%; border-radius: 18px; overflow: hidden; }
.how-art { width: 100%; height: 100%; position: relative; background: #d9c5ee; overflow: hidden; color: var(--forest); container-type: inline-size; }
.how-note { position: absolute; left: 7%; top: 7%; font: 12cqw/1.06 Schoolbell,sans-serif; rotate: -4deg; }
.how-art img { position: absolute; width: 54%; height: auto; right: 5%; bottom: 13%; rotate: 9deg; }
.how-art .how-heart { position: absolute; width: 24%; height: 22%; left: 9%; bottom: 25%; rotate: -12deg; stroke-width: 4; }
.how-art-signature { position: absolute; font: 6cqw/1 Schoolbell,sans-serif; left: 8%; bottom: 6%; rotate: 2deg; }
.how-tools { display: flex; align-items: center; gap: 15px; padding-top: 17px; }
.how-tool { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; }
.how-tool.selected { background: var(--sage); }
.how-tool svg { width: 19px; height: 19px; }
.how-swatch { width: 21px; height: 21px; background: var(--forest); border-radius: 50%; }
.how-send { display: flex; gap: 8px; align-items: center; margin-left: auto; background: var(--forest); color: var(--paper); padding: 11px 15px; border-radius: 30px; font-size: 12px; }
.how-send svg { width: 17px; height: 17px; }
.how-send.is-sending { background: #204d3a; }
.how-phone { position: absolute; left: 127px; top: 24px; width: 266px; height: 552px; border-radius: 49px; border-width: 7px; transform: none; opacity: 0; }
.how-phone .phone-island { width: 78px; height: 22px; top: 11px; }
.how-phone .phone-bar { padding: 18px 20px; font-size: 10px; }
.how-phone .phone-date { font-size: 12px; margin-top: 34px; }
.how-phone .phone-time { font-size: 61px; margin-top: 3px; }
.how-phone .phone-widget { width: 198px; height: 198px; margin: 27px auto 7px; border-radius: 24px; }
.how-phone .phone-widget img { inset: auto 5% 13% auto; width: 54%; height: auto; object-fit: contain; }
.how-phone .phone-widget-label { font-size: 10px; }
.how-phone .phone-apps { padding: 30px 22px; gap: 14px; }
.how-phone .phone-apps span { width: 39px; height: 39px; border-radius: 11px; }
.how-phone .phone-home { bottom: 10px; height: 4px; }
.how-flight { display: none; position: absolute; left: 0; top: 0; transform-origin: top left; z-index: 6; border-radius: 18px; overflow: hidden; box-shadow: none; }
.how-received { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; font: 22px Schoolbell,sans-serif; opacity: 0; white-space: nowrap; }
.how-received svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .journey-motion { height: 520svh; }
  .journey-motion .journey-stage { height: 100svh; min-height: 0; }
  .journey-motion .journey-text { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .18s ease, transform .35s var(--ease); }
  .journey-motion .journey-text.active { opacity: 1; visibility: visible; transform: none; }
  .journey-motion .how-flight { display: block; }
}
@media (max-width: 760px) {
  .journey-stage { padding: 85px 24px 30px; display: flex; flex-direction: column; gap: 0; justify-content: flex-start; }
  .journey-copy { width: 100%; }
  .journey h2 { font-size: 34px; line-height: 1.1; }
  .journey h2 br { display: none; }
  .journey h2 span::before { content: ' '; }
  .journey-texts { margin-top: 22px; min-height: 104px; }
  .journey-text h3 { font-size: 27px; }
  .journey-text p { font-size: 12px; line-height: 1.7; margin-top: 10px; }
  .journey-progress { margin-top: 10px; }
  .delivery-scene { width: 100%; flex: 1; height: auto; min-height: 0; margin-top: 12px; }
  .journey:not(.journey-motion) .delivery-scene { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-stage { position: relative; height: auto; }
  .journey-text { position: relative; opacity: 1; visibility: visible; }
  .journey-texts { min-height: 0; }
  .journey-progress { display: none; }
  .how-phone, .how-received { opacity: 1; }
  .how-studio { display: none; }
}

/* Give the explanation more presence, with a tighter relationship to the visual. */
@media (min-width: 761px) {
  .journey-stage { padding: 100px 5vw 65px; column-gap: 2vw; grid-template-columns: .9fr 1.1fr; }
  .journey h2 { font-size: clamp(60px,6.3vw,96px); line-height: 1.02; }
  .journey-texts { margin-top: 36px; min-height: 180px; }
  .journey-text h3 { font-size: clamp(35px,3.5vw,52px); line-height: 1.12; }
  .journey-text p { font-size: clamp(16px,1.35vw,21px); line-height: 1.65; margin-top: 20px; }
  .journey-progress { margin-top: 22px; }
  .delivery-scene { height: min(calc(100svh - 170px),720px); }
}
.how-studio { width: 450px; left: 35px; top: 24px; }
/* A home screen, with the received widget occupying its top-left two-by-two space. */
.how-phone { background: #f7f6f2; }
.home-grid { display: grid; grid-template-columns: repeat(4,44px); grid-auto-rows: 60px; gap: 10px 12px; padding: 14px 0 0; width: 212px; margin: 0 auto; }
.home-widget-tile { grid-column: span 2; grid-row: span 2; }
.how-phone .phone-widget { width: 100px; height: 100px; margin: 0; border-radius: 16px; box-shadow: none; }
.how-phone .phone-widget-label { font-size: 8px; margin-top: 6px; }
.home-app { width: 44px; text-align: center; }
.home-app-icon { width: 44px; height: 44px; display: grid; place-items: center; background: #bacac1; border-radius: 12px; color: #fffdf5; }
.home-app:first-of-type .home-app-icon { color: var(--forest); }
.home-app-icon svg { width: 26px; height: 26px; stroke-width: 1.7; }
.home-app-name { display: block; margin-top: 4px; font-size: 6px; line-height: 1.2; white-space: nowrap; color: var(--ink); }
.home-dock { position: absolute; bottom: 28px; left: 11px; right: 11px; padding: 10px 8px; border-radius: 24px; background: #ecede7; display: flex; justify-content: space-between; gap: 10px; }
.home-dock .home-app { flex: none; }
@media (max-width: 760px) {
  .journey h2 { font-size: 38px; }
  .journey-text h3 { font-size: 31px; }
  .journey-text p { font-size: 14px; line-height: 1.6; }
  .journey-texts { min-height: 120px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .journey h2 { font-size: 62px; }
  .journey-text h3 { font-size: 34px; }
  .journey-texts { margin-top: 26px; min-height: 150px; }
  .journey-text p { font-size: 16px; }
}

.home-grid > .home-app:nth-child(2) .home-app-icon { color: var(--forest); }
@media (min-width: 761px) {
  .delivery-scene .how-scene-inner { left: 0; transform: translateY(-50%) scale(var(--scene-scale, .8)); transform-origin: left center; }
  .how-phone { left: 55px; }
  .how-received { left: 188px; }
}

/* Build the creation with the visitor's scroll, then send the finished composition. */
.how-art .how-handwriting { position: absolute; left: 7%; top: 6%; width: 80%; height: auto; overflow: visible; rotate: -4deg; fill: none; stroke: var(--forest); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.how-handwriting path, .how-heart path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.how-art img { transform-origin: 35% 85%; }
.how-art-signature { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .journey-motion { height: 520svh; } }

/* Keep the same rounded-square silhouette from the studio through to the widget. */
.how-canvas, .how-flight, .how-phone .phone-widget { border-radius: 16%; }

/* Neutral app paper keeps the received Wijetto in focus. */
.journey { background-color: var(--paper); }


/* Center the story as a pair, with readable copy inset from the edge. */
@media (min-width: 761px) {
  .journey-stage {
    padding-inline: max(7vw, calc((100vw - 1180px) / 2));
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px,3vw,48px);
  }
  .journey h2 { font-size: clamp(68px,6.4vw,96px); }
  .journey-texts { margin-top: 32px; min-height: 210px; }
  .journey-text h3 { font-size: clamp(42px,4.1vw,60px); line-height: 1.12; }
  .journey-text p { font-size: clamp(21px,1.7vw,26px); line-height: 1.55; margin-top: 22px; }
  .journey-progress { margin-top: 20px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .journey-texts { min-height: 260px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .journey-stage { padding-top: 85px; padding-bottom: 40px; }
  .journey h2 { font-size: 64px; }
  .journey-texts { margin-top: 26px; min-height: 230px; }
  .journey-text h3 { font-size: 40px; }
  .journey-text p { font-size: 19px; }
}

/* Two clear steps: the changing headline is the main title, with sending between them. */
.journey-texts { margin-top: 0; min-height: 350px; }
.journey-text h3 { font-size: clamp(52px,5.2vw,80px); line-height: 1.06; max-width: 12ch; }
.journey-text p { max-width: 34ch; }
@media (min-width: 761px) and (max-width: 1100px) {
  .journey-texts { min-height: 380px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .journey-texts { margin-top: 0; min-height: 335px; }
  .journey-text h3 { font-size: 54px; }
}
@media (max-width: 760px) {
  .journey-texts { margin-top: 0; min-height: 236px; }
  .journey-text h3 { font-size: clamp(34px,9.3vw,44px); line-height: 1.08; max-width: 12ch; }
  .journey-text p { font-size: 16px; line-height: 1.55; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-texts { min-height: 0; }
  .journey-text + .journey-text { margin-top: 40px; }
}

/* A quiet section heading, while each changing step remains the focal title. */
.journey .how-section-title { font: 400 24px/1.3 Schoolbell,sans-serif; letter-spacing: 0; color: var(--muted); margin-bottom: 24px; }
@media (max-width: 760px) { .journey .how-section-title { font-size: 20px; margin-bottom: 16px; } }

/* A birthday composition: hand lettering, confetti, then two photographic stickers. */
.how-birthday-art { background-color: #f3dfa5; }
.how-birthday-art .how-handwriting { width: 86%; left: 8%; top: 6%; rotate: -3deg; }
.how-art img.how-birthday-sticker { position: absolute; width: 45%; height: 48%; object-fit: contain; transform-origin: 35% 85%; }
.how-art img.how-birthday-hamster { inset: auto auto 10% 5%; rotate: -7deg; }
.how-art img.how-birthday-dog { inset: auto 5% 10% auto; rotate: 8deg; }
/* Reserve the upper-right corner, clear of both language versions of the lettering. */
.how-birthday-art .how-party-sparkles { left: 75%; bottom: auto; top: 3%; width: 22%; height: 18%; rotate: 10deg; stroke-width: 2.5; }
.how-birthday-art .how-art-signature { left: 12%; bottom: 5%; font-size: 5.2cqw; rotate: 1deg; }

/* Three green composition cards rise over a large, pinned statement. */
.collection.possibilities { padding: 0; overflow: visible; background-color: var(--paper); background-image: none; }
/* Fade only the graph-paper background, underneath the cards and heading. */
.possibilities-stage { position: relative; padding: 100px 5vw 80px; background-color: inherit; background-image: linear-gradient(to bottom, transparent calc(100% - 180px), var(--paper)), var(--page-grid); background-size: 100% 100%, var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step); }
.possibilities-stage > h2 { text-align: center; font-size: clamp(60px,8.2vw,118px); line-height: 1.02; max-width: 1100px; margin: 0 auto; }
.possibilities-cards { display: flex; align-items: center; justify-content: center; gap: 28px; max-width: 1240px; margin: 70px auto 0; }
.possibility-card { background: var(--forest); color: var(--paper); border-radius: 24px; padding: 24px 22px 30px; width: calc((100% - 56px)/3); flex: none; text-align: center; }
.possibility-card h3 { font-size: clamp(30px,3vw,44px); line-height: 1.08; margin-top: 24px; }
.possibility-card p { font-size: clamp(13px,1.15vw,16px); line-height: 1.6; margin-top: 14px; color: var(--paper); }
.possibility-image { position: relative; aspect-ratio: 1; width: 100%; max-width: 310px; margin: 0 auto; }
.possibility-image > img { width: 100%; height: 100%; object-fit: cover; border-radius: 16%; }
.possibility-sticker-board { background: transparent; border-radius: 0; overflow: visible; transform: translateY(5%) scale(.88); transform-origin: center; }
.possibility-sticker-board > .cat-stack-sticker { position: absolute; left: var(--x); top: var(--y); width: 60%; height: 60%; object-fit: contain; border-radius: 0; rotate: var(--tilt); }
@media (prefers-reduced-motion: no-preference) {
 .possibilities.features-enhanced { height: 340svh; }
 .features-enhanced .possibilities-stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; padding: 90px 5vw 45px; }
 .features-enhanced .possibilities-stage > h2 { grid-area: 1/1; }
 .features-enhanced .possibilities-cards { grid-area: 1/1; width: 100%; margin: 0; position: relative; }
 .features-enhanced .possibility-image { max-width: min(310px,33svh); }
}
@media (max-width: 760px) {
 .possibilities-stage { padding: 90px 24px 60px; }
 .possibilities-stage > h2 { font-size: clamp(44px,10vw,70px); }
 .possibilities-cards { flex-direction: column; gap: 28px; margin-top: 48px; }
 .possibility-card { width: 100%; max-width: 350px; padding: 20px 20px 24px; }
 .possibility-card h3 { font-size: 34px; margin-top: 20px; }
 .possibility-card p { font-size: 14px; margin-top: 12px; }
 .features-enhanced .possibilities-stage { padding: 85px 24px 35px; }
 .features-enhanced .possibilities-cards { display: grid; place-items: center; }
 .features-enhanced .possibility-card { grid-area: 1/1; width: min(100%,330px); }
 .features-enhanced .possibility-image { max-width: min(280px,34svh); }
 .possibilities.features-enhanced { height: 400svh; }
}
@media (max-height: 650px) and (min-width: 761px) {
 .possibility-card { padding: 18px 20px 22px; }
 .possibility-card h3 { margin-top: 18px; font-size: 32px; }
 .possibility-card p { margin-top: 10px; font-size: 13px; }
}

/* Museum: a private collection in a drawn, scroll-driven perspective. */
.museum { position: relative; background: var(--paper); }
.museum-stage { position: relative; padding: 110px 7vw 90px; background: var(--paper); }
.museum-viewport { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.museum-viewport canvas { display: block; width: 100%; height: 100%; }
.museum-intro { position: relative; z-index: 1; max-width: 680px; margin: 0 auto 64px; text-align: center; }
.museum-intro h2 { font-size: clamp(52px,6vw,86px); line-height: 1.02; }
.museum-intro p { color: var(--ink); font-size: clamp(17px,1.5vw,21px); line-height: 1.6; margin-top: 24px; }
.museum-caption { display: none; }
.museum-fallback { position: relative; display: flex; gap: 60px; justify-content: center; }
.museum-fallback figure { width: min(36vw,340px); text-align: center; }
.museum-fallback img { display: block; width: 100%; border: 6px solid var(--forest); padding: 8px; background: #e5d4b1; }
.museum-fallback figcaption { font-family: Schoolbell,cursive; font-size: 23px; line-height: 1.25; margin-top: 20px; }
.museum-route,.museum-skip { display: none; }
@media (prefers-reduced-motion: no-preference) {
 .museum.museum-ready { height: 760svh; }
 .museum-ready .museum-stage { height: 100svh; position: sticky; top: 0; padding: 0; overflow: clip; }
 .museum-ready .museum-viewport { visibility: visible; }
 .museum-ready .museum-intro { position: absolute; top: 100px; left: 0; right: 0; text-align: center; width: min(680px,85vw); margin: 0 auto; pointer-events: none; }
 .museum-ready .museum-intro h2 { font-size: clamp(48px,4.8vw,64px); }
 .museum-ready .museum-intro p { max-width: none; font-size: 17px; }
 .museum-ready .museum-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
 .museum-ready .museum-caption { display: block; position: absolute; bottom: 87px; left: 5vw; max-width: 270px; padding: 0; background: transparent; pointer-events: none; opacity: 0; }
 .museum-caption h3 { font-size: 32px; line-height: 1.1; paint-order: stroke fill; -webkit-text-stroke: 3px var(--paper); }
 .museum-caption p:empty { display: none; }
 .museum-caption p { font-size: 15px; line-height: 1.55; margin-top: 12px; color: var(--ink); max-width: 31ch; }
 .museum-ready .museum-route { display: flex; position: absolute; z-index: 2; bottom: 25px; right: 5vw; gap: 8px; padding: 5px; background: var(--paper); border-radius: 30px; }
 .museum-route button { padding: 9px 15px; border-radius: 24px; border: 0; color: var(--forest); background: transparent; font: inherit; font-size: 12px; cursor: pointer; transition: background .2s,color .2s; }
 .museum-route button[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
 .museum-route button:hover { background: var(--sage); color: var(--forest); }
 .museum-ready .museum-skip { display: block; position: absolute; z-index: 2; bottom: 37px; left: 5vw; font-size: 12px; padding: 4px 0; }
}
@media (max-width: 760px) {
 .museum-stage { padding: 90px 24px 60px; }
 .museum-intro { margin-bottom: 46px; }
 .museum-intro h2 { font-size: 54px; }
 .museum-intro p { font-size: 16px; }
 .museum-fallback { flex-direction: column; align-items: center; gap: 44px; }
 .museum-fallback figure { width: min(100%,320px); }
 .museum-ready .museum-intro { top: 95px; left: 24px; right: 24px; width: auto; text-align: center; }
 .museum-ready .museum-intro h2 { font-size: 48px; }
 .museum-ready .museum-intro p { font-size: 15px; max-width: 28ch; margin: 16px auto 0; }
 .museum-ready .museum-caption { top: 95px; bottom: auto; left: 24px; max-width: calc(100% - 48px); padding: 0; }
 .museum-caption h3 { font-size: 27px; }
 .museum-caption p { font-size: 13px; margin-top: 7px; max-width: 31ch; }
 .museum-ready .museum-route { bottom: 58px; left: 24px; right: auto; gap: 2px; }
 .museum-route button { padding: 9px 11px; font-size: 11px; }
 .museum-ready .museum-skip { bottom: 23px; left: 29px; }
 .museum.museum-ready { height: 820svh; }
}

/* Text has a narrow paper outline; the perspective remains continuous. */
@media (prefers-reduced-motion: no-preference) {
 .museum-ready .museum-intro { top: 102px; bottom: auto; left: 0; right: 0; width: min(800px,78vw); max-width: none; margin: 0 auto; padding: 0; text-align: center; isolation: isolate; }
 .museum-ready .museum-intro h2 { font-size: clamp(42px,4.3vw,62px); line-height: 1.06; text-wrap: balance; }
 .museum-ready .museum-intro p { font-size: clamp(16px,1.4vw,19px); line-height: 1.5; max-width: 48ch; margin: 18px auto 0; text-wrap: balance; }
}
@media (max-width: 760px) {
 .museum-ready .museum-intro { top: 95px; width: calc(100% - 48px); }
 .museum-ready .museum-intro h2 { font-size: clamp(33px,8.5vw,43px); }
 .museum-ready .museum-intro h2 br { display: none; }
 .museum-ready .museum-intro p { max-width: 30ch; margin-top: 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: no-preference) { .museum-ready .museum-intro p { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
 .museum-ready .museum-intro h2,.museum-ready .museum-intro p { paint-order: stroke fill; -webkit-text-stroke: 5px var(--paper); }
 .museum-ready .museum-intro p { -webkit-text-stroke-width: 3px; }
}


.museum-cheesus-art { border: 6px solid var(--forest); padding: 8px; background: #e5d4b1; container-type: inline-size; }
.museum-cheesus-crop { position: relative; aspect-ratio: 1; overflow: hidden; }
.museum-fallback .museum-cheesus-crop img { width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; padding: 0; background: transparent; }
.museum-cheesus-crop span { position: absolute; top: 10%; left: 0; right: 0; font: 11.8cqw/1.2 Schoolbell,sans-serif; color: var(--paper); rotate: -7deg; transform-origin: center; }

/* The final green frame becomes the footer without a panel sliding into view. */
.footer-wordmark { display: block; width: 100%; height: auto; overflow: visible; stroke: none; }
.footer-wordmark .logo-writing { display: none; }
.footer-wordmark .logo-finished { animation: none; }
body:has(.finale-visible) .nav-brand,
body.footer-in-view:not(:has(.finale-ready)) .nav-brand {
 transform: translate(-50%,-90px);
 visibility: hidden;
 pointer-events: none;
}
body:has(.finale-visible) .navigation,
body.footer-in-view:not(:has(.finale-ready)) .navigation {
 transform: translateY(-100%);
 visibility: hidden;
 transition-delay: 0s,0s,320ms;
}
body:has(.finale-visible) .navigation > *,
body.footer-in-view:not(:has(.finale-ready)) .navigation > * { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
 .navigation { transition: none; }
 body:has(.finale-visible) .navigation,
 body.footer-in-view:not(:has(.finale-ready)) .navigation { transform: none; transition-delay: 0s; }
}
footer .round-link:hover .arrow-circle { transform: none; }
@media (prefers-reduced-motion: no-preference) {
 /* This spacer overlaps the pinned museum: it must not paint over the zoom. */
 .museum-finale.finale-ready { position: relative; margin-top: -100svh; pointer-events: none; }
 .finale-ready footer { position: relative; z-index: 3; min-height: 100svh; visibility: hidden; background: var(--forest); }
 .finale-visible footer { visibility: visible; pointer-events: auto; }
 .finale-pinned footer { position: fixed; inset: 0 0 auto; width: 100%; }
 .finale-ready .footer-wordmark .logo-writing { display: inline; }
 .finale-ready .footer-wordmark .logo-pen { animation: none; opacity: 0; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
 .finale-ready .footer-wordmark .logo-finished { opacity: 0; }
 .finale-ready .footer-arrival { opacity: 0; transform: translateY(8px); }
 .finale-ready .footer-bottom { border-top-color: transparent; }
 .finale-visible .footer-wordmark .logo-pen { animation: footer-logo-ink var(--pen-duration) linear var(--pen-delay) both; }
 .finale-visible .footer-wordmark .logo-finished { animation: logo-complete 1ms step-end 980ms both; }
 .finale-visible .footer-arrival { animation: footer-arrive 600ms var(--ease) var(--footer-delay) both; }
 .finale-ready .footer-download-arrows path { opacity: 0; }
 .finale-visible .footer-download-arrows path { animation: footer-arrows-in 400ms var(--ease) var(--arrow-delay) both; }
 .finale-ready .footer-arrow-caption { display:block; }
 .finale-ready .footer-arrow-caption>span { opacity:0; }
 .finale-visible .footer-arrow-caption>span { animation: footer-caption-in 2000ms linear var(--arrow-delay) both; }
 .finale-visible .footer-bottom { animation: footer-divider 600ms var(--ease) 950ms both; }
 .finale-ready:focus-within .footer-arrival { opacity: 1; transform: none; animation: none; }
}
/* Rounded mask caps can paint dots even at zero dash length. Hide each pen
   completely during its delay, then reveal it only as that stroke starts. */
@keyframes footer-logo-ink {
 0% { opacity: 0; stroke-dashoffset: 1; }
 .1% { opacity: 1; }
 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes footer-arrive {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes footer-arrows-in {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes footer-caption-in {
 0%,100% { opacity:0; }
 10%,85% { opacity:1; }
}
@keyframes footer-divider {
 from { border-top-color: transparent; }
 to { border-top-color: #f5f0e640; }
}

/* The final aside uses the original caption position and stays clear of the perspective. */
@media (prefers-reduced-motion: no-preference) {
 .museum-caption.museum-caption-punchline p { font-size: 16px; line-height: 1.5; margin-top: 10px; paint-order: stroke fill; -webkit-text-stroke: 3px var(--paper); }
}

/* The button and QR share one continuous surface; the layout never shifts. */
[data-download-placeholder] { position: relative; isolation: isolate; }
[data-download-placeholder].qr-open { z-index: 10; }
[data-download-placeholder]::before,
.download-qr {
 position: absolute;
 left: calc(50% - 116px);
 top: 0;
 width: 232px;
 height: 260px;
}
[data-download-placeholder]::before {
 content: "";
 z-index: -1;
 pointer-events: none;
 background: var(--forest);
 clip-path: inset(var(--qr-cut-top, 0px) var(--qr-cut-right, 41px) var(--qr-cut-bottom, 208px) var(--qr-cut-left, 41px) round 26px);
 transition: clip-path 560ms var(--ease);
}
[data-download-placeholder].light::before { background: var(--paper); }
[data-download-placeholder] > span:first-child { background: transparent; transition: opacity 160ms ease, transform 400ms var(--ease); }
.qr-open > span:first-child { opacity: 0; transform: scale(.92); }
[data-download-placeholder].qr-open::before {
 clip-path: inset(0 round 16px);
}
.download-qr {
 padding: 14px 14px 17px;
 color: var(--paper);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: scale(.94);
 transform-origin: 50% 0;
 transition: opacity 140ms ease, transform 300ms var(--ease), visibility 0s 300ms;
}
.download-qr img { width: 100%; height: auto; aspect-ratio: 1; }
.download-qr-caption { display: block; margin-top: 8px; text-align: center; font: 400 18px/1.4 Schoolbell, sans-serif; white-space: nowrap; }
.qr-open > .download-qr {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: scale(1);
 transition: opacity 280ms ease 100ms, transform 560ms var(--ease), visibility 0s;
}
.navigation [data-download-placeholder]::before,
.navigation .download-qr { left: auto; right: 0; }
[data-download-placeholder].qr-above::before,
.qr-above > .download-qr { top: auto; bottom: 0; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) {
 [data-download-placeholder]::before,
 [data-download-placeholder] > span { transition: none; }
}

.light > .download-qr { color: var(--forest); }

/* Re-anchoring is instantaneous while closed; only the reveal is animated. */
[data-download-placeholder].qr-positioning::before,
.qr-positioning > .download-qr { transition: none; }

/* Touch devices and tablet layouts keep a plain link to /get. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
 [data-download-placeholder]::before { display: none; }
 [data-download-placeholder] > .download-qr { display: none; }
 [data-download-placeholder] > span:first-child { background: var(--forest); opacity: 1; transform: none; }
 [data-download-placeholder].light > span:first-child { background: var(--paper); }
}

/* The desktop hero carries its own QR sticker; touch layouts keep the link. */
.hero-download-qr { display: none; }
.hero-download-mobile > span:first-child { background: var(--forest); }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 .hero-copy > .hero-download-mobile { display: none; }
 .hero-download-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 164px;
  margin-top: 0;
  padding: 9px 9px 12px;
  background: var(--forest);
  color: var(--paper);
  border-radius: 16px;
  box-shadow: 0 10px 24px #24332c1a;
  transform: rotate(var(--tilt, 10deg));
  aspect-ratio: auto;
  pointer-events: auto;
 }
 .hero-download-qr img { width: 100%; height: auto; aspect-ratio: 1; }
 .hero-download-qr span { margin-top: 5px; font: 400 15px/1.4 Schoolbell, sans-serif; white-space: nowrap; }
}

/* Navigation arrives together after the hero and stays absent on its opening. */
.navigation { transform: translateY(-100%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; }
.scrolled .navigation { transform: translateY(0); visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .navigation { transition: none; } }

/* Swap the desktop QR with the smiling cat across the right side. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 .hero-orbit > .hero-download-qr { width: 200px; top: auto; right: 9%; bottom: 9%; }
 .hero-orbit > .example-cat-smile { top: 19%; right: 7%; bottom: auto; }
 .hero-orbit > .example-multipla { bottom: 15%; }
 .hero-orbit > .example-pizza { bottom: 13%; }
}
@media (min-width: 1800px) and (hover: hover) and (pointer: fine) {
 .hero-orbit > .hero-download-qr { right: 13%; }
 .hero-orbit > .example-cat-smile { right: 12%; }
}

/* A permanent QR on computers leaves the arrow sequence visible while scanning. */
.footer-download-qr,.footer-copy-desktop,.footer-narration { display: none; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 .footer-download-mobile,.footer-copy-mobile { display: none; }
 .footer-copy-desktop { display: inline; }
 footer { padding-top: 150px; }
 .footer-top { align-items: center; padding-bottom: 150px; }
 .footer-download { margin-right: 125px; }
 .footer-download-qr { display: flex; flex-direction: column; align-items: center; width: 220px; padding: 10px 10px 13px; border-radius: 16px; background: var(--paper); color: var(--forest); }
 .footer-download-qr img { width: 100%; height: auto; aspect-ratio: 1; }
 .footer-download-qr span { margin-top: 5px; font: 400 18px/1.4 Schoolbell,sans-serif; white-space: nowrap; }
 .footer-download-arrows,.footer-arrow-caption { width: 570px; height: 437px; }
 .footer-download-arrows { /* Keep desktop geometry independent from the mobile pill. */
  aspect-ratio: 600 / 460;
 }
 .footer-download-arrows path { vector-effect: non-scaling-stroke; stroke-width: 5px; }
 .footer-download-arrows path:nth-child(1) { d: path("M565 210 Q510 245 430 230 M453 215 L430 230 L454 248"); }
 .footer-download-arrows path:nth-child(2) { d: path("M550 365 Q480 350 435 310 M460 313 L435 310 L442 337"); }
 .footer-download-arrows path:nth-child(3) { d: path("M440 450 Q425 410 405 370 M429 388 L405 370 L405 399"); }
 .footer-download-arrows path:nth-child(4) { d: path("M290 465 Q280 420 300 375 M310 400 L300 375 L279 397"); }
 .footer-download-arrows path:nth-child(5) { d: path("M100 425 Q150 415 195 365 M193 392 L195 365 L166 375"); }
 .footer-download-arrows path:nth-child(6) { d: path("M20 225 Q90 245 170 230 M147 211 L170 230 L143 245"); }
 .footer-download-arrows path:nth-child(7) { d: path("M120 95 Q142 120 170 150 M143 145 L170 150 L162 124"); }
 .footer-download-arrows path:nth-child(8) { d: path("M175 30 Q180 65 200 90 M177 80 L200 90 L200 64"); }
 .footer-download-arrows path:nth-child(9) { d: path("M310 15 Q320 50 300 85 M289 61 L300 85 L320 65"); }
 .footer-download-arrows path:nth-child(10) { d: path("M450 35 Q430 65 405 95 M408 67 L405 95 L433 85"); }
 .footer-download-arrows path:nth-child(11) { d: path("M540 100 Q490 115 430 155 M442 128 L430 155 L457 153"); }
 .footer-download-arrows path.footer-long-arrow { d: path("M-300 420 C-200 560 -30 480 160 330 M133 331 L160 330 L149 355"); }
 .footer-arrow-caption>span { left: var(--desktop-caption-x); top: var(--desktop-caption-y); width: 145px; }
 .footer-arrow-caption>span:nth-child(3) { width: 120px; }
 .footer-arrow-caption>span:nth-child(12) { width: 240px; }
}

/* The footer's last joke runs on the same clock as the twelve arrows. */
.footer-top>.footer-copy { margin-top: 0; }
.footer-scroll-ready :is(.footer-arrival,.footer-bottom,.footer-wordmark .logo-pen,.footer-wordmark .logo-finished,.footer-narration p,.footer-download-arrows path,.footer-arrow-caption>span,.footer-qr-surface) { animation-play-state: paused !important; }
.footer-scroll-ready.finale-visible .footer-arrival { animation-duration: 450ms; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 .footer-copy { flex: 1; min-width: 0; }
 .footer-top { gap: 65px; align-items: flex-start; }
 .footer-download { margin-top: 75px; }
 .footer-narration { display: grid; gap: 14px; margin-top: 30px; font: 400 clamp(22px,2.1vw,30px)/1.3 Schoolbell,sans-serif; }
 .footer-narration p { margin: 0; line-height: inherit; }
 .footer-narration-grow,.footer-narration-done { display: none; grid-column: 1; grid-row: 3; }
 .footer-arrow-caption>span:nth-child(1),
 .footer-arrow-caption>span:nth-child(2),
 .footer-arrow-caption>span:nth-child(11) { translate: -65% -50%; }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .finale-ready .footer-narration-grow,.finale-ready .footer-narration-done { display: block; }
 .finale-ready .footer-narration p { opacity: 0; }
 .finale-visible .footer-narration p { animation: footer-arrive 450ms var(--ease) var(--line-delay) both; }
 .footer-narration-intro { --line-delay: 1800ms; }
 .footer-narration-scan { --line-delay: 3400ms; }
 .footer-narration-grow { --line-delay: var(--footer-grow-copy-delay); }
 .footer-narration-done { --line-delay: var(--footer-done-delay); }
 .finale-visible .footer-narration .footer-narration-grow,
 .finale-visible .footer-narration .footer-narration-done { animation: footer-aside 2600ms ease var(--line-delay) both; }
 .finale-visible .footer-download-arrows path {
  animation: footer-arrows-in 400ms var(--ease) var(--desktop-arrow-delay) both, footer-arrows-spread 800ms var(--ease) var(--footer-grow-delay) both;
 }
 .finale-visible .footer-arrow-caption>span {
  animation: footer-caption-in 2000ms linear var(--desktop-arrow-delay) both, footer-arrows-spread 800ms var(--ease) var(--footer-grow-delay) both;
 }
 .finale-visible .footer-qr-surface { animation: footer-qr-enlarge 800ms var(--ease) var(--footer-grow-delay) both; }
}
@keyframes footer-qr-enlarge {
 from { transform: scale(1); }
 to { transform: scale(1.20); }
}
@keyframes footer-arrows-spread {
 from { transform: translate(0,0); }
 to { transform: translate(var(--arrow-spread-x),var(--arrow-spread-y)); }
}
@keyframes footer-aside {
 0% { opacity: 0; transform: translateY(6px); }
 15%,80% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-3px); }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
 .footer-narration-grow,.footer-narration-done { display: none; }
 .footer-qr-surface { transform: scale(1.20); }
 .footer-download-arrows path,.footer-arrow-caption>span { transform: translate(var(--arrow-spread-x),var(--arrow-spread-y)); }
}

/* Keep the entire desktop finale in one viewport, including short laptops. */
.footer-scene { display: contents; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 footer,.finale-ready footer {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto auto;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  padding: 20px 5vw 16px;
 }
 .footer-scene { display: block; position: relative; min-height: 0; }
 .footer-scene .footer-top {
  position: absolute;
  inset: 0 0 auto;
  height: 640px;
  padding: 110px 2vw 0;
  transform: scale(var(--footer-scene-scale,1));
  transform-origin: top center;
 }
 .footer-logo { width: 100%; height: auto; min-height: 0; margin: 0; aspect-ratio: 1289 / 238; }
 .footer-logo img,.footer-wordmark { width: 100%; height: 100%; object-fit: contain; }
 .footer-bottom { margin-top: clamp(24px,4.5dvh,45px); padding-top: 12px; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
 .footer-download-arrows path.footer-long-arrow { d: path("M-600 420 C-450 560 -60 480 160 330 M133 331 L160 330 L149 355"); }
}

/* Native scroll scrubs the finale; its visible surface stays one screen high. */
@media (prefers-reduced-motion: no-preference) {
 .footer-scroll-ready footer { position: sticky; top: 0; }
 .footer-scroll-ready.finale-pinned footer { position: fixed; }
 .footer-scroll-ready.footer-scroll-standalone { margin-top: 0; }
}

/* Give the initial download scene its full width and a substantial QR card. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 footer { --footer-qr-size: min(clamp(200px,18vw,280px),calc((var(--footer-scene-height,640px) - 100px) / 1.5)); }
 .footer-scene .footer-top {
  inset: 0 auto auto 50%;
  width: calc(100% / var(--footer-scene-scale,1));
  translate: -50% 0;
  padding-top: calc(clamp(60px,10dvh,100px) / var(--footer-scene-scale,1));
 }
 .footer-top h2 { font-size: calc(clamp(34px,3.5vw,64px) / var(--footer-scene-scale,1)); }
 .footer-download { margin-top: calc(8px / var(--footer-scene-scale,1)); }
 .footer-download-qr { width: calc(var(--footer-qr-size) / var(--footer-scene-scale,1)); padding: calc(10px / var(--footer-scene-scale,1)); border-radius: calc(16px / var(--footer-scene-scale,1)); }
 .footer-download-qr span { font-size: calc(clamp(12px,1.15vw,16px) / var(--footer-scene-scale,1)); }
 .footer-download-arrows path { translate: var(--arrow-base-x,0px) var(--arrow-base-y,0px); }
 .footer-arrow-caption>span { left: calc(var(--desktop-caption-x) + var(--caption-base-x,0px)); top: calc(var(--desktop-caption-y) + var(--caption-base-y,0px)); }
}

/* Final desktop aside: a real two-second timer, independent of scroll. */
.footer-scroll-hint,.footer-narration .footer-narration-legal { display: none; }
.finale-visible .footer-narration .footer-narration-done { animation: none; opacity: 0; transition: opacity 200ms ease; }
.finale-visible .footer-narration .footer-narration-done.is-visible { opacity: 1; }

/* Touch finale: download first, wordmark and legal links at the end. */
@media not all and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
 footer { padding-top: max(clamp(48px,7dvh,72px),env(safe-area-inset-top)); }
 .footer-download { --footer-arrow-height: clamp(140px,26dvh,220px); }
 .footer-download-arrows { height: var(--footer-arrow-height); }
 .footer-copy-desktop { display: none; }
 .footer-copy-mobile { display: inline; }
 .footer-narration { display: grid; gap: 10px; margin-top: 20px; font: 400 clamp(20px,5.3vw,26px)/1.25 Schoolbell,sans-serif; }
 .footer-narration { min-height: 64px; }
 .footer-narration p { margin: 0; }
 .footer-narration-grow,.footer-narration-done,.finale-ready .footer-narration-grow,.finale-ready .footer-narration-done { display: none; }
 .footer-narration .footer-narration-legal { display: none; grid-column: 1; grid-row: 3; align-self: center; }
 @media (prefers-reduced-motion: no-preference) {
  .finale-ready .footer-arrow-caption { display: block; width: 100%; height: var(--footer-arrow-height); font-size: 18px; line-height: 1.2; }
  .footer-arrow-caption>span { left: var(--mobile-caption-x); top: calc(50% + var(--mobile-caption-side) * (var(--footer-arrow-height) / 2 + 12px)); width: var(--mobile-caption-width); translate: -50% var(--mobile-caption-shift); }
  .footer-arrow-caption>span:is(:nth-child(1),:nth-child(6)) {
   left: var(--mobile-caption-x);
   top: calc(50% - 34px);
   width: var(--mobile-caption-width);
   translate: -50% -100%;
  }
  .finale-visible .footer-arrow-caption>span { animation: footer-caption-in 2000ms linear calc(var(--arrow-delay) + 3500ms) both; }
  .finale-ready .footer-narration p { opacity: 0; }
  .finale-ready .footer-narration .footer-narration-legal { display: block; }
  .finale-visible .footer-narration .footer-narration-legal { animation: none; opacity: 0; transition: opacity 200ms ease; }
  .finale-visible .footer-narration .footer-narration-legal.is-visible { opacity: 1; }
  .finale-visible .footer-narration-intro { animation: footer-arrive 450ms var(--ease) 1800ms both; }
  .finale-visible .footer-narration-scan { animation: footer-arrive 450ms var(--ease) 3400ms both; grid-column: 1; grid-row: 2; }
  .footer-narration-intro { grid-column: 1; grid-row: 1; }
  .finale-visible .footer-download-arrows path { animation: footer-arrows-in 400ms var(--ease) calc(var(--arrow-delay) + 3500ms) both; }
  .finale-ready .footer-logo { opacity: var(--footer-legal-progress,0); pointer-events: none; }
  .finale-ready .footer-wordmark :is(.logo-pen,.logo-finished),
  .finale-ready .footer-bottom,
  .finale-ready .footer-bottom>.footer-arrival { animation: none; }
  .footer-mobile-ending .footer-wordmark .logo-pen {
   animation: footer-logo-ink var(--pen-duration) linear calc(var(--pen-delay) + 1000ms) both;
   animation-play-state: running !important;
  }
  .footer-mobile-ending .footer-wordmark .logo-finished {
   animation: logo-complete 1ms step-end 1980ms both;
   animation-play-state: running !important;
  }
  .finale-ready .footer-bottom { position: relative; }
  .finale-ready .footer-bottom::before {
   content: "";
   position: absolute;
   top: -1px;
   left: 0;
   width: 100%;
   height: 1px;
   background: #f5f0e640;
   transform: scaleX(0);
   transform-origin: left center;
   pointer-events: none;
  }
  .footer-mobile-ending .footer-bottom::before {
   animation: footer-divider-draw 600ms var(--ease) 1000ms both;
  }
  .footer-mobile-ending .footer-bottom>.footer-arrival {
   animation: footer-arrive 600ms var(--ease) 1000ms both;
   animation-play-state: running !important;
  }
  .footer-mobile-ending .footer-logo { pointer-events: auto; }
  .finale-ready .footer-bottom { opacity: var(--footer-legal-progress,0); }
  .finale-ready .footer-scroll-hint { display: flex; position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); left: 0; right: 0; justify-content: center; align-items: center; gap: 12px; margin: 0; font: 18px/1.3 Schoolbell,sans-serif; opacity: var(--footer-hint-opacity,1); pointer-events: none; }
  .footer-scroll-hint span { font-size: 26px; }
 }
}
/* Short phones keep arrow captions below the persistent narration. */
@media (max-height: 740px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
 footer,.finale-ready footer { min-height: 780px; }
 .footer-arrow-caption { top: 50%; }
 .footer-arrow-caption>span { left: 50%; top: calc(100% + 8px); width: min(270px,82vw); translate: -50% 0; }
}

@keyframes footer-divider-draw {
 from { transform: scaleX(0); }
 to { transform: scaleX(1); }
}

/* Mobile hero: two staggered collages frame a clear, stable reading area. */
@media (max-width: 760px) {
  .hero.constellation {
    height: max(780px, 100svh);
    padding: 0 24px;
  }
  .hero-core { width: min(100%, 420px); }
  .constellation-logo { width: min(100%, 360px); }
  .constellation h1 { margin-top: 24px; font-size: clamp(30px, 7.8vw, 38px); }
  .hero-copy > p { margin-top: 16px; font-size: clamp(12px, 3.2vw, 14px); line-height: 1.75; }
  .hero-copy > .round-link { margin-top: 24px; }

  .hero-orbit > .example-tea {
    width: clamp(108px, 31vw, 150px);
    top: auto; bottom: calc(50% + 170px); left: calc(50% - 155px);
    border-radius: 20px;
    --tilt: -13deg !important;
  }
  .hero-orbit > .example-matcha {
    width: clamp(76px, 22vw, 104px);
    top: calc(50% + 252px); bottom: auto; left: auto;
    right: max(16px, calc(50% - 178px));
    --tilt: -8deg !important;
  }
  .hero-orbit > .example-note {
    width: clamp(118px, 33vw, 156px);
    top: calc(50% + 192px); bottom: auto; left: calc(50% - clamp(59px, 16.5vw, 78px));
    padding: 0; border-radius: 20px;
    --tilt: 7deg !important;
  }
  .hero-orbit > .example-landscape {
    width: clamp(124px, 35vw, 164px);
    top: auto; bottom: calc(50% + 180px); right: calc(50% - 160px);
    border-radius: 20px;
    --tilt: 10deg !important;
  }
  .hero-orbit > .example-pizza { display: none; }
  .hero-orbit > .example-harold {
    display: block;
    z-index: 1;
    width: clamp(86px, 24vw, 112px);
    top: auto; bottom: calc(50% + 315px);
    left: calc(50% - 68px); right: auto;
    --tilt: 8deg !important;
  }
  .hero-orbit > .example-multipla {
    display: block;
    z-index: 1;
    width: clamp(84px, 24vw, 110px);
    top: calc(50% + 178px); bottom: auto; left: max(18px, calc(50% - 178px));
    --tilt: -17deg !important;
  }
  .constellation-scroll { bottom: 12px; }
}
@media (max-width: 360px) {
  .hero-orbit > .example-tea { left: 22px; }
  .hero-orbit > .example-landscape { right: 20px; }
}

/* Keep phrases together and give the animated recipient its own composed line. */
.buddy-intro, .buddy-recipient, .buddy-punchline { display: block; }
.buddy-intro-de { display: none; }
@media (max-width: 760px) {
  .buddy-sentence {
    font-size: clamp(30px, 6.8vw, 46px);
    line-height: 1.6;
    letter-spacing: -.025em;
  }
  .buddy-intro { max-width: 19ch; margin-inline: auto; text-wrap: balance; }
  .buddy-recipient {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .12em;
    margin: 32px auto 38px;
    white-space: nowrap;
  }
  .buddy-intro-de { display: inline; }
  .buddy-recipient-de { display: none; }
  .buddy-words { flex: none; font-size: .86em; margin: 0 .12em; }
  .buddy-punchline {
    max-width: 24ch;
    margin-inline: auto;
    font-size: 1em;
    line-height: 1.6;
    text-wrap: balance;
  }
  .buddy-desktop-break { display: none; }
}