/* Three changeable places, with the original pointing hand kept in the hero. */
.collection-sticker{width:210px;height:210px;--angle:5deg;filter:drop-shadow(0 4px 2px #142d2015)}
.collection-sticker[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.collection-sticker .sticker-art{width:100%;height:100%;animation:none;overflow:hidden;display:block;border-radius:24px;background:var(--cream)}
.sticker-reel{display:block;width:100%;will-change:transform}
.sticker-sprite{display:grid;place-items:center;width:100%;aspect-ratio:1;background:var(--cream)}
.sticker-window{display:block;background-repeat:no-repeat}
.collection-sticker:disabled{cursor:default;opacity:1}
.hero-collection{right:6%;top:410px}
.return-collection{position:relative;inset:auto;--angle:-7deg;justify-self:center;width:190px;height:190px}
.closing-collection{right:12%;top:150px;--angle:8deg;width:235px;height:235px}
.shuffle-stickers{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 17px;border:1px solid var(--green);border-radius:99px;background:var(--yellow);font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 3px 0 var(--green);transition:box-shadow .15s,translate .15s}
.shuffle-stickers:hover{translate:0 -2px;box-shadow:0 5px 0 var(--green)}
.shuffle-stickers:active{translate:0 2px;box-shadow:0 1px 0 var(--green)}
.shuffle-stickers:disabled,.shuffle-stickers[aria-disabled=true]{cursor:wait}
.shuffle-icon{width:25px;height:21px;display:flex;gap:2px;overflow:hidden;border:1px solid currentColor;padding:3px;border-radius:4px}
.shuffle-icon i{flex:1;background:currentColor;border-radius:1px;transform-origin:center}
.is-shuffling .shuffle-icon i{animation:shuffle-reel .3s ease-in-out infinite}
.is-shuffling .shuffle-icon i:nth-child(2){animation-delay:.08s}
.is-shuffling .shuffle-icon i:nth-child(3){animation-delay:.16s}
.sticker-controls{display:flex;align-items:center;gap:16px}
.sticker-controls .handwriting{font-size:18px}
.hero-bottom{gap:24px;height:auto;min-height:84px;position:relative;z-index:5;padding-block:15px}
.return-strip{grid-template-columns:.7fr 1.3fr;gap:60px}
@keyframes shuffle-reel{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@media(min-width:1600px){.hero-collection{right:12%;top:425px}}
@media(max-width:1150px){.hero-collection{right:3%;top:445px;width:180px;height:180px}.sticker-controls .handwriting{display:none}.closing-collection{right:6%;top:190px;width:190px;height:190px}}
@media(max-width:900px) and (min-width:761px){.hero-collection{top:470px;width:175px;height:175px}.closing-collection{position:relative;inset:auto;display:block;margin:30px 0 0 auto}}
@media(max-width:760px){
 .hero-collection{right:6%;top:auto;bottom:128px;width:166px;height:166px}
 .hero .hand-sticker{bottom:143px}
 .hero-bottom{margin-top:250px;display:flex;flex-direction:column;gap:15px;padding-bottom:25px;min-height:112px}
 .sticker-controls{justify-content:center}
 .hero-bottom .experience-controls{justify-content:center;flex-wrap:wrap}
 .return-strip{grid-template-columns:1fr;gap:22px}
 .return-collection{width:175px;height:175px;justify-self:start;margin-left:8px}
 .closing-collection{position:relative;inset:auto;width:185px;height:185px;display:block;margin:24px 0 0 auto}
 .closing-arrow{left:6%;right:auto;bottom:20px}
}
@media(max-width:380px){.hero-collection{right:3%;width:151px;height:151px}.hero .hand-sticker{left:7%;width:105px}.hero-bottom{margin-top:240px}}
@media(prefers-reduced-motion:reduce){.is-shuffling .shuffle-icon i{animation:none}.shuffle-stickers{transition:none}}

/* One looping gesture connects the page back to the mark's meaning. */
.section-arrow.loop-trail{stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.hero-arrow.loop-trail{width:120px;height:225px;bottom:-120px;left:43%;opacity:.85}
.how-arrow.loop-trail{width:150px;height:235px;bottom:-115px;right:5%}
.philosophy-arrow.loop-trail{width:285px;height:145px;bottom:-30px}
.closing>.loop-trail{width:240px;height:590px;right:1%;left:auto;top:-30px;bottom:auto;stroke-width:9;opacity:.9;pointer-events:none}
.closing-collection{right:17%;top:225px}
.logo-story{position:relative;z-index:1;margin-top:100px;padding-top:65px;border-top:1px solid #ffffff24;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:100px;text-align:left}
.logo-story-art{color:var(--yellow);min-width:0}
.logo-meaning-mark{display:block;width:100%;height:auto;overflow:visible}
.logo-story-art>.handwriting{display:block;text-align:center;font-size:25px;margin-top:15px;rotate:-3deg}
.logo-story-copy>.eyebrow{color:#c9d0bd}
.logo-story-copy h3{font-size:clamp(34px,4vw,57px);line-height:1.06;letter-spacing:-1.8px;margin:22px 0}
.closing .logo-story-copy p{font-size:17px;line-height:1.65;max-width:350px;margin-bottom:0}
.logo-story.ink-visible .mark-loop{animation:mark-loop-in 1.4s ease both}
.logo-story.ink-visible .mark-human{animation:mark-human-in 1.4s ease both}
@keyframes mark-loop-in{from{opacity:.12}to{opacity:1}}
@keyframes mark-human-in{0%,35%{opacity:.12}100%{opacity:1}}
@media(max-width:1150px){.closing-collection{right:12%;top:280px}.logo-story{gap:60px}}
@media(max-width:900px) and (min-width:761px){.closing-collection{inset:auto;margin-right:110px}}
@media(max-width:760px){
 .hero-arrow.loop-trail{width:75px;height:145px;bottom:-85px;left:45%}
 .how-arrow.loop-trail{width:85px;height:150px;bottom:-80px;right:6%}
 .philosophy-arrow.loop-trail{width:165px;height:95px;bottom:-5px}
 .closing>.loop-trail{width:120px;height:370px;top:240px;right:-15px;stroke-width:8}
 .closing-collection{inset:auto;margin:25px 60px 0 auto}
 .logo-story{grid-template-columns:1fr;gap:45px;margin-top:65px;padding-top:55px}
 .logo-story-art{width:min(100%,370px);margin:auto}
 .logo-story-art>.handwriting{font-size:22px}
 .logo-story-copy h3{font-size:43px}
 .closing .logo-story-copy p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.logo-story path{animation:none!important;opacity:1!important}}
.motion-paused .logo-story path{animation:none!important;opacity:1!important}

/* A centered hero with the movable artwork framing the message. */
.hero{
 display:flex;flex-direction:column;align-items:center;
 min-height:max(760px,calc(100svh - 100px));
 padding:110px 5% 24px;
}
.hero>.eyebrow{max-width:100%;line-height:1.6}
.hero h1{
 width:min(100%,900px);max-width:none;
 font-size:clamp(64px,6.5vw,104px);line-height:1.08;
 margin:38px auto 32px;padding:18px 0 22px;
}
.hero .hero-copy{max-width:610px;font-size:18px;line-height:1.65;text-wrap:pretty}
.hero .actions{margin-top:32px;gap:28px;flex-wrap:wrap}
.hero .hand-sticker{right:4%;left:auto;top:58px;bottom:auto;width:145px;--angle:-10deg}
.hero .hero-collection{left:5%;right:auto;top:62px;bottom:auto;width:170px;height:170px;--angle:5deg}
.hero .hero-bottom{
 width:100%;max-width:1440px;margin-top:auto;padding-top:80px;padding-bottom:8px;
 min-height:0;gap:24px;flex-direction:row;flex-wrap:wrap;
}
.hero .sticker-controls{gap:16px;flex-wrap:wrap}
.hero .sticker-controls .handwriting{display:block;font-size:18px}
.hero .experience-controls{width:auto;gap:24px}
.hero .hero-arrow.loop-trail{left:calc(50% - 45px);width:90px;height:170px;bottom:-105px}
@media(max-width:1100px){
 .hero{padding-top:96px;min-height:740px}
 .hero h1{width:min(100%,760px);font-size:clamp(58px,7.4vw,80px)}
 .hero .hand-sticker{right:3%;top:20px;width:105px}
 .hero .hero-collection{left:5%;top:18px;width:120px;height:120px}
 .hero .hero-bottom{padding-top:70px}
}
@media(max-width:760px){
 .hero{padding:54px 6% 24px;min-height:0}
 .hero>.eyebrow{max-width:290px;font-size:11px}
 .hero h1{width:100%;font-size:clamp(38px,9.8vw,70px);margin:36px auto 24px;padding:14px 0 18px}
 .hero .hero-copy{max-width:480px;font-size:16px}
 .hero .actions{margin-top:26px;gap:20px}
 .hero .sticker-stage{position:relative;inset:auto;width:100%;max-width:440px;height:200px;margin-top:30px;flex-shrink:0}
 .hero .hand-sticker{right:4%;top:24px;bottom:auto;width:120px}
 .hero .hero-collection{left:6%;top:24px;bottom:auto;width:140px;height:140px}
 .hero .hero-bottom{margin-top:0;padding-top:12px;flex-direction:column;gap:26px}
 .hero .sticker-controls{justify-content:center;gap:12px}
 .hero .sticker-controls .handwriting{font-size:17px}
 .hero .experience-controls{justify-content:center;gap:24px}
 .hero .hero-arrow.loop-trail{width:70px;height:135px;left:calc(50% - 35px);bottom:-90px}
}

/* Fan the cards apart so the artwork reads, rather than just the edges. */
.hero .hero-collection{left:8%;top:155px;width:140px;height:140px;--angle:0deg}
.hero .hero-collection{transform:translate(0,42%) rotate(-4deg);z-index:3}
.hero .hero-collection.fan-left{transform:translate(-45%,-48%) rotate(-17deg);z-index:1}
.hero .hero-collection.fan-right{transform:translate(48%,-24%) rotate(12deg);z-index:2}
.hero .hero-collection:focus-visible,.hero .hero-collection.dragging{z-index:6}
.hero-collection>.sticker-art{box-shadow:0 3px 10px #142d2026}
.is-shuffling .shuffle-icon i{animation:none}
.is-shuffling .shuffle-icon{transform:rotate(-8deg)}
@media(max-width:1100px) and (min-width:761px){
 .hero .hero-collection{left:7%;top:78px;width:105px;height:105px}
 .hero{padding-top:155px}
}
@media(max-width:760px){
 .hero .sticker-stage{height:260px;margin-top:45px}
 .hero .hero-collection{left:18%;top:70px;width:115px;height:115px}
 .hero .hand-sticker{right:0;top:82px;width:100px}
}
@media(max-width:380px){
 .hero .hero-collection{left:17%;width:100px;height:100px}
 .hero .hand-sticker{width:85px}
}

/* Forest opening: matching hero and navigation. */
.hero{background:var(--hero-bg);color:var(--hero-ink);--guide:var(--hero-guide)}
.hero{--hero-bg:#142d20;--hero-ink:#faf7e9;--hero-guide:#faf7e940;--hero-muted:#c7d4c5;--hero-accent:#f8e650}
.hero>.eyebrow,.hero .hero-copy{color:var(--hero-muted)}
.hero .selection-frame,.hero .selection-frame>i{border-color:var(--hero-guide)}
.hero .selection-frame>i,.hero .selection-frame>span{background:var(--hero-bg);color:var(--hero-muted);border-color:var(--hero-guide)}
.hero .natural path,.hero .hero-arrow{stroke:var(--hero-accent)}
.hero .text-link,.hero .motion-toggle,.hero .sound-toggle{color:var(--hero-ink);border-color:var(--hero-guide)}
.hero .actions .button{background:#f8e650;color:#142d20}
.hero .shuffle-stickers{box-shadow:0 3px 0 #faf7e955;border-color:#f8e650;color:#142d20}
.hero :is(button,a):focus-visible{outline-color:#f8e650}
.hero .hand-sticker .handwriting{color:#faf7e9}
header{background:var(--green);color:var(--cream);--guide:#faf7e940;border-bottom-color:var(--guide)}
header .button{background:var(--yellow);color:var(--green)}
header a:focus-visible{outline-color:var(--yellow)}

/* Drafting canvas, without the hero editing frame or gutter hatches. */
.hero{isolation:isolate}
.hero>.canvas-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.canvas-pattern{position:absolute;inset:0;mask-image:radial-gradient(ellipse 40% 42% at 50% 42%,transparent 15%,#000 100%)}
.hero .canvas-pattern{background-image:linear-gradient(#e8efcf19 1px,transparent 1px),linear-gradient(90deg,#e8efcf19 1px,transparent 1px),linear-gradient(#e8efcf12 1px,transparent 1px),linear-gradient(90deg,#e8efcf12 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px}
.canvas-decor::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 12% 32%,#44836426,transparent 40%),radial-gradient(ellipse at 90% 85%,#7c8b2720,transparent 40%)}
main>.hero::before,main>.hero::after{display:none}
@media(max-width:760px){.hero .canvas-pattern{mask-image:linear-gradient(#000,transparent 18%,transparent 42%,#000 62%)}}

/* A continuous feedback ribbon carries the story into the why section. */
.feedback-ribbon{overflow:hidden;background:var(--cream);padding:30px 0 55px}
.feedback-ribbon svg{display:block;width:100%;height:auto;overflow:visible}
.ribbon-band{fill:none;stroke:var(--yellow);stroke-width:72;stroke-linecap:round}
.ribbon-shadow{fill:none;stroke:#142d2020;stroke-width:74;transform:translateY(6px)}
.feedback-ribbon text{font-family:var(--font);font-size:29px;font-weight:700;letter-spacing:-.5px;fill:var(--green)}
@media(max-width:760px){.feedback-ribbon{padding:15px 0 35px}.feedback-ribbon svg{width:900px;max-width:none;position:relative;left:50%;transform:translateX(-50%)}}

/* Preserve word wrapping and nested hand-drawn emphasis during text reveals. */
.type-word{display:inline-block}
@media(prefers-reduced-motion:reduce){.type-word{opacity:1!important;transform:none!important}}
.motion-paused .type-word{opacity:1!important;transform:none!important}

/* Armed only by JavaScript for text that is still outside the viewport. */
.type-pending{opacity:0}
@media(prefers-reduced-motion:reduce){.type-pending{opacity:1}}
.motion-paused .type-pending{opacity:1}

/* Refinement: keep decorative gestures inside the page and controls legible. */
main{overflow-x:clip}
::selection{background:var(--yellow);color:var(--green)}
a{text-underline-offset:.22em}
.hero h1,h2,.logo-story-copy h3{letter-spacing:-.035em;text-wrap:balance}
.bug-hint{opacity:0;transition:opacity .16s ease-out}
.flying-bug:hover .bug-hint,.flying-bug:focus-visible .bug-hint{opacity:1}
.hero .shuffle-stickers{box-shadow:0 2px 5px #0003}
.hero .shuffle-stickers:hover{box-shadow:0 4px 8px #0003}
.hero .shuffle-stickers:active{box-shadow:0 1px 3px #0003}
@media(max-width:420px){
 header{padding-inline:16px;gap:10px}
 header .wordmark{font-size:15px;max-width:none;letter-spacing:-.025em;gap:7px}
 header .wordmark>span{white-space:nowrap;max-width:none}
 header .wordmark>img{width:28px;height:28px}
 header nav .button.small{padding-inline:9px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.bug-hint{transition:none}}

/* Review refinements: one continuous gesture, quieter controls, clearer audiences. */
.beta-tag{font:600 11px/1 var(--font);letter-spacing:.02em;border:1px solid #faf7e95c;border-radius:4px;padding:5px 7px;margin-left:2px;color:var(--cream)}
.hero{overflow:visible;z-index:2;min-height: min(900px, max(760px,calc(100svh - 100px)))}
.hero .hero-arrow.loop-trail{z-index:4;pointer-events:none;bottom:-95px}
.hero .actions{position:relative}
.hero .actions .hand-sticker{left:calc(100% + 32px);right:auto;top:-12px;width:105px;--angle:-12deg}
.hero .hand-sticker .handwriting{right:auto;left:15px;top:100%;bottom:auto;white-space:nowrap;rotate:0deg}
.hero .hero-bottom{justify-content:flex-end}
.hero .sticker-controls{position:absolute;left:8%;top:390px;z-index:8;pointer-events:auto}
.hero .shuffle-stickers{font-size:12px;min-height:36px;padding:5px 12px;background:transparent;color:var(--cream);border:1px solid #faf7e960;border-radius:5px;box-shadow:none;opacity:0;transition:opacity .15s ease-out}
.hero .shuffle-stickers:hover,.hero .shuffle-stickers:active{box-shadow:none;translate:none}
.sticker-stage:has(.hero-collection:hover) .shuffle-stickers,.sticker-stage:focus-within .shuffle-stickers,.hero .sticker-controls:hover .shuffle-stickers,.hero .shuffle-stickers:focus-visible{opacity:1}
.feedback-ribbon{padding:65px 0;background:var(--cream)}
.feedback-ribbon svg{width:100%;max-width:1440px;margin:auto;left:auto;transform:none}
.feedback-ribbon text{font-size:26px;letter-spacing:0}
.ribbon-band{stroke-width:58}.ribbon-shadow{stroke-width:60}
.philosophy-copy h2{font-size:clamp(40px,4.7vw,68px)}
.philosophy-copy p{max-width:52ch}
.use-cases{background:var(--cream);border-top:1px solid var(--line)}
.use-cases h2{font-size:clamp(38px,4.8vw,64px);margin:0 0 50px}
.use-case-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.use-case-list article{border-top:1px solid var(--line);padding-top:24px}
.use-case-list h3{font-size:26px;letter-spacing:-.03em;margin:0 0 16px}
.use-case-list p{font-size:17px;line-height:1.65;max-width:34ch;color:var(--muted,var(--green))}
.plan-features{padding-left:19px;margin:0 0 32px;flex:1;font-size:16px;line-height:1.6}
.plan-features li{padding-left:3px;margin-bottom:9px}
.free-plan .plan-features{color:#c9d0bd}
@media(max-width:1100px) and (min-width:761px){.hero .sticker-controls{left:7%;top:250px}.hero .actions .hand-sticker{left:calc(100% + 20px);width:80px}}
@media(max-width:760px){
 .hero{min-height:0}.hero .actions{margin-bottom:40px}
 .hero .actions .hand-sticker{left:auto;right:0;top:calc(100% + 12px);width:62px}
 .hero .hand-sticker .handwriting{font-size:15px;left:0}
 .hero .sticker-stage{height:250px;margin-top:35px}
 .hero .sticker-controls{left:18%;top:224px}
 .hero .hero-bottom{padding-top:35px}
 .hero .hero-arrow.loop-trail{bottom:-75px}
 .use-case-list{grid-template-columns:1fr;gap:26px}.use-cases h2{margin-bottom:30px}
 .use-case-list p{max-width:100%}.feedback-ribbon{padding:35px 0}
 .feedback-ribbon svg{width:100%;max-width:100%;position:static;transform:none}
 .beta-tag{font-size:9px;padding:4px;margin-left:0}
 header .wordmark{gap:5px;font-size:14px}header{padding-inline:12px}
}
@media(hover:none){.hero .shuffle-stickers{opacity:1;min-height:44px}}

/* Equal-weight plans with complete edges and aligned actions. */
.plan-grid{gap:20px;border:0;align-items:stretch}
.plan-grid article,.plan-grid article.pro-plan,.plan-grid article:first-child,.plan-grid article:last-child{padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--green);min-width:0;display:flex;flex-direction:column}
.plan-grid .free-plan .plan-features,.plan-grid .free-plan small,.plan-grid .free-plan .plan-top span{color:var(--green)}
.plan-grid .plan-top{gap:12px;flex-wrap:wrap;align-items:center}
.plan-grid .button{background:transparent;color:var(--green);border:1px solid var(--green)}
.plan-grid .button:hover{background:var(--green);color:var(--cream)}
.plan-grid small{min-height:72px;line-height:1.6}
.feedback-ribbon .loop-caption{font-size:28px;letter-spacing:0;font-weight:600}
/* The loop supplies the motion; its message stays upright and readable. */
.feedback-ribbon{padding-block:40px}
.closing{overflow:visible;position:relative;z-index:2;padding:70px 7%;display:grid;grid-template-columns:minmax(0,1fr) 240px;column-gap:70px;align-content:center;min-height:360px}
.closing.section-wrap>h2{font-size:clamp(30px,3vw,42px);line-height:1.15;max-width:540px;margin:0 0 20px;grid-column:1}
.closing.section-wrap>p{font-size:17px;max-width:460px;margin:0 0 24px;grid-column:1}
.closing>.button{grid-column:1;justify-self:start}
.closing .logo-story{grid-column:2;grid-row:1/4;align-self:center;display:block;margin:0;padding:0;border:0}
.closing .logo-story-art{width:100%;min-width:0}
.closing .closing-collection{position:relative;grid-column:2;inset:auto;justify-self:center;width:85px;height:85px;margin:20px 0 0;}
.closing>.loop-trail{right:1%;left:auto;top:-100px;bottom:auto;width:65px;height:calc(100% + 125px);stroke-width:5;z-index:3;overflow:visible;pointer-events:none}
.logo-story.ink-visible .mark-loop{transform-box:view-box;transform-origin:259px 260px;animation:logo-wing 4s ease-in-out infinite}
.logo-story.ink-visible .mark-loop:nth-child(2){animation-direction:reverse}
.logo-story.ink-visible .mark-human{animation:none}
.mark-eyes{transform-box:fill-box;transform-origin:center;animation:logo-blink 6s ease-in-out infinite}
.mark-smile{animation:logo-smile 6s ease-in-out infinite}
@keyframes logo-wing{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.88) rotate(4deg)}}
@keyframes logo-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes logo-smile{0%,60%,100%{transform:translateY(0)}70%,85%{transform:translateY(-2px)}}
.motion-paused .mark-eyes,.motion-paused .mark-smile{animation:none}
@media(prefers-reduced-motion:reduce){.mark-eyes,.mark-smile{animation:none}}
@media(max-width:760px){
 .plan-grid{gap:16px}.plan-grid small{min-height:0}
 .closing{grid-template-columns:1fr;gap:0;padding:50px 8% 35px;min-height:0}
 .closing.section-wrap>h2{font-size:32px}.closing.section-wrap>p{font-size:16px}
 .closing .logo-story{grid-column:1;grid-row:auto;max-width:180px;margin:40px auto 0}
 .closing .closing-collection{grid-column:1;width:70px;height:70px;margin:12px 0 0;justify-self:end}
 .closing>.loop-trail{right:0;width:28px;top:-55px;height:calc(100% + 80px);stroke-width:6}
 .feedback-ribbon .loop-caption{font-size:34px}
}

/* An oversized signature, with a quiet invitation and the living mark below. */
.closing.section-wrap{display:flex;flex-direction:column;align-items:center;gap:0;padding:56px 3% 24px;min-height:0;text-align:center}
.closing.section-wrap>h2{font-size:20px;line-height:1.4;max-width:none;margin:0 0 18px;letter-spacing:-.02em}
.closing.section-wrap>.button{font-size:13px;min-height:44px;padding:12px 18px}
.closing .footer-display{width:100%;margin:76px 0 0;white-space:nowrap;font-size:11.75vw;font-weight:400;line-height:1.1;letter-spacing:-.055em;color:var(--cream);mask-image:linear-gradient(to bottom,#000 35%,#0009 72%,#0000 100%);-webkit-mask-image:linear-gradient(to bottom,#000 35%,#0009 72%,#0000 100%)}
.closing.section-wrap .logo-story{width:130px;max-width:none;margin:28px auto 0;align-self:center}
.closing.section-wrap .closing-collection{position:absolute;top:46px;right:8%;left:auto;width:65px;height:65px;margin:0}
.closing.section-wrap>.loop-trail{width:36px;right:.7%;top:-70px;height:120px;opacity:.65}
footer.site-footer{background:var(--green);color:var(--cream);border-top:0;padding:20px 5% 28px;gap:24px;font-size:12px}
footer.site-footer .motion-toggle{color:var(--cream);border-color:#faf7e940}
@media(max-width:760px){
 .closing.section-wrap{padding:40px 3% 16px}
 .closing.section-wrap>h2{font-size:17px;max-width:230px}
 .closing .footer-display{margin-top:60px}
 .closing.section-wrap .logo-story{width:100px;margin-top:24px}
 .closing.section-wrap .closing-collection{top:112px;right:7%;width:42px;height:42px}
 footer.site-footer{justify-content:center;gap:16px;font-size:11px}
 footer.site-footer>span{width:100%;text-align:center}
}
/* Centered section introductions and illustrated review scenarios. */
.section-wrap .section-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-bottom:44px}
.section-wrap .section-top h2,.section-wrap .section-top .eyebrow{margin-left:auto;margin-right:auto}
.section-wrap .section-top>p,.section-wrap .section-top>.handwriting{max-width:620px;margin:0;text-align:center;rotate:0deg}
.plans-heading,.use-cases>h2,.philosophy-copy>h2,.philosophy-copy>.eyebrow,.return-strip h2{text-align:center}
.use-cases>h2{max-width:760px;margin-inline:auto}
.use-case-list article{border:0;padding-top:0}
.use-case-art{display:block;width:100%;height:auto;margin-bottom:28px}
.use-case-list article:nth-child(2) .use-case-art{rotate:2deg}
.use-case-list article:first-child .use-case-art{rotate:-2deg}
.closing.section-wrap{padding-bottom:0}
.closing.section-wrap .logo-story{order:3;width:clamp(200px,25vw,340px);margin:44px auto 28px}
.closing .footer-display{order:4;margin:0;line-height:1;transform:translateY(.06em)}
header{gap:22px}
header nav{margin-left:auto}
header .experience-controls{display:flex;gap:4px;flex-shrink:0}
header .experience-controls button{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:9px;border:1px solid #faf7e92b;border-radius:50%;color:var(--cream);background:transparent}
header .experience-controls button:hover{background:#faf7e917}
header .experience-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
header .sound-label,header .motion-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sound-on-icon,.play-icon{display:none}
.sound-toggle[aria-pressed="true"] .sound-on-icon,.motion-toggle[aria-pressed="true"] .play-icon{display:block}
.sound-toggle[aria-pressed="true"] .sound-off-icon,.motion-toggle[aria-pressed="true"] .pause-icon{display:none}
@media(max-width:760px){
 header{flex-wrap:wrap;height:auto;min-height:100px;padding-block:12px;gap:8px}
 header nav{margin-left:auto}header .experience-controls{width:100%;justify-content:center}
 header .experience-controls button{width:36px;height:36px;min-height:36px;padding:8px}
 .closing.section-wrap .logo-story{width:180px;margin:35px auto 24px}
 .section-wrap .section-top{gap:16px}
 .use-case-art{max-width:420px;margin-inline:auto}
}
/* Sink the signature into the page edge; prevent trailing live-region line boxes. */
#bug-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body{background:var(--green)}
.closing.section-wrap{overflow:hidden;padding-bottom:0;border-bottom:0}
.closing .footer-display{line-height:.85;transform:translateY(.22em);margin-bottom:-.04em;mask-image:linear-gradient(#000 0%,#000b 22%,#0004 52%,transparent 78%);-webkit-mask-image:linear-gradient(#000 0%,#000b 22%,#0004 52%,transparent 78%)}
.closing.section-wrap .logo-story{width:clamp(240px,30vw,400px);margin-top:48px;margin-bottom:44px}
.logo-story.ink-visible .mark-loop{animation:loop-flap 1.1s cubic-bezier(.45,0,.3,1) infinite;transform-origin:259px 260px}
.logo-story.ink-visible .mark-loop:nth-child(2){animation-name:loop-flap-left;animation-direction:normal}
.reaction-head{transform-origin:259px 163px;animation:reaction-bounce .85s cubic-bezier(.2,.8,.3,1) infinite}
.reaction{opacity:0;animation:reaction-switch 4.25s steps(1,end) infinite}
.reaction-wow{animation-delay:.85s}.reaction-love{animation-delay:1.7s}.reaction-wink{animation-delay:2.55s}.reaction-cool{animation-delay:3.4s}
@keyframes reaction-switch{0%,19.99%{opacity:1}20%,100%{opacity:0}}
@keyframes reaction-bounce{0%{transform:translateY(4px) scale(.85)}25%{transform:translateY(-7px) scale(1.12) rotate(-7deg)}60%{transform:translateY(0) scale(1) rotate(5deg)}100%{transform:translateY(4px) scale(.85)}}
@keyframes loop-flap{0%,100%{transform:scaleX(1) rotate(0)}35%{transform:scaleX(.55) rotate(-18deg)}65%{transform:scaleX(1.08) rotate(8deg)}}
@keyframes loop-flap-left{0%,100%{transform:scaleX(1) rotate(0)}35%{transform:scaleX(.55) rotate(18deg)}65%{transform:scaleX(1.08) rotate(-8deg)}}
.motion-paused .reaction-head,.motion-paused .reaction{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.reaction-head,.reaction{animation:none!important}.reaction{opacity:0!important}.reaction-happy{opacity:1!important}}