/* Weida — a paper-collage village. Torn paper, tape, stickers and handwriting; the app's teal underneath. */
@font-face{font-family:Manrope;src:url('assets/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Caveat;src:url('assets/fonts/Caveat_700.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('assets/fonts/Archivo_Black_400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Special Elite';src:url('assets/fonts/Special_Elite_400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
 --teal:#2E7D73;--teal-dk:#1D5A52;--mint:#8AD4C5;--lime:#A7F36D;--ink:#0F1F1D;--ink2:#24312F;--cream:#F4EBDD;--paper:#FBF6EC;--kraft:#C9A77C;--kraft-dk:#A8865C;--coral:#F07A55;--sky:#DCEBE6;--night:#0F1F1D;--night2:#15302B;
 --hand:Caveat,'Bradley Hand','Segoe Print',cursive;--label:'Archivo Black','Arial Black',Impact,sans-serif;--type:'Special Elite','Courier New',monospace;--body:Manrope,'Avenir Next',system-ui,sans-serif;
 --gutter:clamp(20px,5vw,72px);--bar-h:72px;--muted:#4a5c57;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 18px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--lime);color:var(--ink);padding:10px 16px;z-index:999;font-weight:700;border-radius:8px}
.skip:focus{top:12px}
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;background:url(assets/paper/grain.webp) 0 0/384px;mix-blend-mode:multiply;opacity:.7}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto;position:relative}
.wrap.narrow{width:min(820px,100% - var(--gutter)*2)}
.center{text-align:center}
.fine{font-size:14px;color:var(--muted);margin-top:18px}
.center .fine,.fine.center{text-align:center}

/* ── paper primitives ───────────────────────────────────────────────────── */
.sec{position:relative;padding:clamp(88px,11vw,150px) 0 clamp(96px,11vw,150px)}
.sec-sky{background:#dcebe6 radial-gradient(rgba(15,31,29,.07) 1px,transparent 1.4px) 0 0/7px 7px}
.sec-paper{background:var(--paper)}
.sec-kraft{background:var(--kraft) url(assets/paper/kraft.webp) center/cover}
.sec-night{background:radial-gradient(120% 90% at 50% 0,#1b3b35 0,var(--night) 70%);color:var(--cream)}
.sec-teal{background:var(--teal);color:var(--cream)}
.sec-tealdk{background:var(--teal-dk);color:var(--cream)}
.sec-mint{background:var(--mint)}
.tear{position:absolute;left:0;right:0;top:calc(100% - 2px);height:44px;z-index:4;pointer-events:none;background-repeat:repeat-x;background-size:1600px 44px;background-position:center top}
.tear-paper{background-image:url(assets/tear/tear-paper.svg)}.tear-sky{background-image:url(assets/tear/tear-sky.svg)}.tear-kraft{background-image:url(assets/tear/tear-kraft.svg)}.tear-teal{background-image:url(assets/tear/tear-teal.svg)}.tear-tealdk{background-image:url(assets/tear/tear-tealdk.svg)}.tear-night{background-image:url(assets/tear/tear-night.svg)}.tear-mint{background-image:url(assets/tear/tear-mint.svg)}
.tape{display:inline-block;padding:.5em 1.05em .45em;background:var(--mint);color:var(--ink);font:12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-1.6deg);clip-path:polygon(2% 0,98% 0,100% 12%,98% 24%,100% 36%,98% 48%,100% 60%,98% 72%,100% 84%,98% 100%,2% 100%,0 88%,2% 76%,0 64%,2% 52%,0 40%,2% 28%,0 16%);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.tape.lime{background:var(--lime)}.tape.coral{background:var(--coral);color:var(--paper)}
.sticker{display:block;height:auto;filter:drop-shadow(0 6px 7px rgba(15,31,29,.28));user-select:none;-webkit-user-drag:none;pointer-events:none}
.pin{position:absolute;top:-9px;left:50%;width:15px;height:15px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f9a48b,var(--coral) 55%,#b64a2c);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.ransom{display:inline-flex;gap:.06em;font:400 1em/1 var(--type);filter:drop-shadow(0 2px 2px rgba(15,31,29,.3));vertical-align:middle}
.ransom i{position:relative;isolation:isolate;display:inline-grid;place-items:center;width:1.02em;height:1.24em;font-style:normal;transform:translateY(var(--y)) rotate(var(--r))}
.ransom i::before,.ransom i::after{content:'';position:absolute;z-index:-1;clip-path:var(--torn1)}
.ransom i::before{inset:-.05em;background:#fffaf0}
.ransom i::after{inset:0;background:var(--tile)}
.ransom .t-mint{--tile:var(--mint);color:var(--ink)}.ransom .t-teal{--tile:var(--teal);color:var(--cream)}.ransom .t-cream{--tile:var(--cream);color:var(--coral)}.ransom .t-coral{--tile:var(--coral);color:var(--paper)}.ransom .t-lime{--tile:var(--lime);color:var(--ink)}
.ransom.sm{font-size:19px}.ransom.xl{font-size:clamp(64px,11vw,140px)}
.scribble{position:absolute;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.scribble path{stroke-dasharray:1;stroke-dashoffset:0}

/* ── type ───────────────────────────────────────────────────────────────── */
h2{font:400 clamp(34px,4.9vw,66px)/1.03 var(--label);letter-spacing:-.012em;text-wrap:balance}
h3{font:400 clamp(24px,2.6vw,36px)/1.1 var(--label);letter-spacing:-.005em}
.eyebrow{margin-bottom:22px}
.head{max-width:680px}.head.center{margin-inline:auto;text-align:center}
.head .lede{margin-top:22px}
.lede{font-size:clamp(17px,1.5vw,20.5px);line-height:1.62;color:var(--ink2);max-width:60ch}
.center .lede,.head.center .lede{margin-inline:auto}
.sec-night .lede,.sec-teal .lede,.sec-tealdk .lede{color:#e6efe9}
.sec-night .fine,.sec-teal .fine,.sec-tealdk .fine{color:#b9cfc7}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:.95em 1.5em;border:0;border-radius:14px 10px 15px 9px/10px 15px 9px 14px;font:700 16px/1.2 var(--body);cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;box-shadow:0 3px 0 rgba(15,31,29,.3),0 10px 18px -8px rgba(15,31,29,.4);text-align:left}
.btn:hover{transform:translateY(-2px) rotate(-.6deg)}.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(15,31,29,.3)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-teal{background:var(--teal);color:var(--cream)}
.btn-ghost{background:var(--paper);color:var(--ink);border:2px dashed rgba(15,31,29,.45)}
.btn-ghost-light{background:transparent;color:var(--cream);border:2px dashed rgba(244,235,221,.6);box-shadow:none}
.btn-play{background:var(--paper);color:var(--ink);padding:.6em 1.4em .6em .7em}
.btn-play small{display:block;font-weight:600;font-size:12.5px;opacity:.65;margin-top:2px}
.play-dot{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--coral);flex:none}
.play-dot svg{width:22px;height:22px;fill:var(--paper);margin-left:3px}
.btn-arrow{position:static;width:34px;height:auto;flex:none}

/* ── header ─────────────────────────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;top:0;z-index:100;background:rgba(251,246,236,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(15,31,29,.08)}
.bar-in{width:min(1360px,100% - var(--gutter)*1.4);margin-inline:auto;height:var(--bar-h);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-w{width:40px;filter:none}
.bar-nav{display:flex;gap:clamp(14px,2.2vw,32px);margin-inline:auto;font:700 14px var(--body)}
.bar-nav a{position:relative;padding:8px 2px}
.bar-nav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--lime);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.bar-nav a:hover::after,.bar-nav a[aria-current]::after{transform:scaleX(1)}
.bar-r{display:flex;align-items:center;gap:18px;flex:none}
.langs{display:flex;gap:6px;font:800 13px var(--body);letter-spacing:.06em;color:var(--muted)}
.langs a{padding:4px 2px}.langs a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:5px}
.soon{background:var(--ink);color:var(--cream);font:700 13px var(--body);padding:.7em 1.15em;border-radius:99px;white-space:nowrap}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:5px}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:24px;height:3px;background:var(--ink);border-radius:2px;transition:transform .2s}
.menu[open] summary span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu[open] summary span:nth-child(2){opacity:0}.menu[open] summary span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu nav{position:absolute;right:0;top:54px;display:flex;flex-direction:column;min-width:230px;background:var(--paper);border-radius:16px;padding:10px;box-shadow:0 20px 50px -10px rgba(15,31,29,.35),0 0 0 2px var(--cream)}
.menu nav a{padding:13px 14px;font:700 16px var(--body);border-radius:10px}.menu nav a:hover{background:var(--sky)}
.trail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:-1px;height:2px;pointer-events:none}
.trail-line{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--teal) 0 8px,transparent 8px 15px);opacity:.35}
.trail-runner{position:absolute;bottom:-4px;left:calc(var(--p,0) * (100% - 24px));width:24px}
.trail-runner .trail-img{width:100%;animation:bob .5s steps(1,end) infinite}
.trail-flag{position:absolute;right:-4px;bottom:-4px;width:20px}
.trail-img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:0;position:relative;min-height:max(780px,min(100svh,1000px));overflow:hidden;--p:0}
.hero-copy{position:relative;z-index:6;padding:calc(var(--bar-h) + clamp(28px,5vw,64px)) var(--gutter) 0;width:min(1360px,100%);margin-inline:auto}
.place{display:flex;align-items:baseline;gap:10px;font-family:var(--hand);color:var(--teal-dk);transform:rotate(-2deg);margin-bottom:6px}
.place-name{font-size:clamp(30px,3.2vw,44px);font-weight:700;border-bottom:3px solid var(--lime)}.place-small{font-size:clamp(20px,2vw,26px);font-weight:500}
.hero h1{font:700 clamp(96px,12.6vw,190px)/.78 var(--hand);letter-spacing:-.01em;color:var(--ink);display:flex;flex-wrap:wrap;column-gap:.18em;row-gap:0;margin:0 0 .12em -.03em}
.h1-b{position:relative;display:inline-block;padding:0 .08em}
.h1-mark{position:absolute;left:-.02em;right:-.04em;bottom:.02em;height:.42em;background:var(--lime);transform:rotate(-1.4deg) skewX(-6deg);z-index:-1;clip-path:polygon(0 12%,3% 0,100% 8%,98% 100%,4% 90%);animation:mark 1s .5s both cubic-bezier(.2,.8,.2,1)}
.h1-swash{position:absolute;left:0;bottom:-.13em;width:100%;height:.2em;fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round;overflow:visible}
.h1-swash path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s 1.3s forwards ease-out}
@keyframes mark{from{transform:scaleX(0) rotate(-1.4deg) skewX(-6deg);transform-origin:left}to{transform:scaleX(1) rotate(-1.4deg) skewX(-6deg);transform-origin:left}}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-sub{font:800 clamp(21px,2.3vw,30px)/1.25 var(--body);letter-spacing:-.01em;max-width:18em;margin-top:.5em}
.hero-intro{margin-top:14px;font-size:clamp(16px,1.35vw,19px);max-width:min(34em,42vw);color:var(--ink2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;align-items:center}
.hero-fine{margin-top:18px;font-size:13.5px;color:var(--muted);font-weight:600}
.scene{position:absolute;left:0;right:0;bottom:0;container-type:inline-size;width:100%;aspect-ratio:1600/760;z-index:1}
.scene>*{position:absolute}
.scene img{display:block;height:auto}
.scene .hill{left:0;width:100%;overflow:visible;transform:translateY(calc(var(--p) * var(--par,0px)))}
.h-far{bottom:0;height:70%;--par:-28px}.h-mid{bottom:0;height:56%;--par:-16px}.h-river{bottom:0;height:40%;--par:-8px}.h-near{bottom:0;height:26%;--par:0px}.h-base{bottom:-1px;height:10%}
.sun-wrap{right:9%;top:2%;width:10.5cqw;animation:wob 3.2s steps(1,end) infinite}
.sun-wrap img{width:100%}
.wal{left:50%;bottom:56%;width:37cqw}.wal img{width:100%}
.wal-note{position:absolute;left:8cqw;top:-6.4cqw;font:700 clamp(18px,2.4cqw,32px)/1 var(--hand);color:var(--teal-dk);white-space:nowrap;transform:rotate(-4deg)}
.wal-arrow{position:absolute;left:105%;top:20%;width:4.2cqw;color:var(--teal-dk);transform:rotate(20deg)}
.castle{right:2%;bottom:56%;width:8cqw}.castle img{width:100%}
.house{left:0;bottom:2%;width:16cqw}.house img{width:100%}
.sam{left:16.5%;bottom:2%;width:5cqw}.sam img{width:100%}
.hops{right:0;bottom:6%;width:5cqw}.hops img{width:100%}
.runners img{position:absolute;bottom:0}
.runners{left:56%;bottom:42%;width:20cqw;height:8cqw}
.run{animation:bob .55s steps(1,end) infinite}
.r1{left:0;width:6.3cqw}.r2{left:7.5cqw;width:6cqw;animation-delay:-.2s}.r3{left:14cqw;width:6.3cqw;animation-delay:-.35s}
.rider{left:0;bottom:8%;width:8cqw;animation:ride 26s linear infinite}
.rider img{width:100%;animation:bob .42s steps(1,end) infinite}
.swim{left:58%;bottom:22%;width:10cqw;animation:paddle 7s ease-in-out infinite}
.swim img{width:100%;animation:bob .9s steps(1,end) infinite}
.pretzel-fly{right:33%;top:6%;width:4cqw;animation:fly 9s ease-in-out infinite}
@keyframes bob{0%{transform:translateY(0) rotate(-2.2deg)}50%{transform:translateY(-.9cqw) rotate(2.2deg)}}
@keyframes wob{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg) scale(1.02)}}
@keyframes ride{0%{transform:translateX(-14cqw)}100%{transform:translateX(112cqw)}}
@keyframes paddle{0%,100%{transform:translateX(0)}50%{transform:translateX(9cqw)}}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(-2cqw,1.6cqw) rotate(12deg)}}
.ticker{position:relative;z-index:5;margin:-26px 0 -30px;transform:rotate(-1.1deg);background:var(--lime);border-block:3px solid var(--ink);overflow:hidden;box-shadow:0 8px 0 -3px rgba(15,31,29,.12)}
.ticker-track{display:flex;width:max-content;gap:0;animation:tick 40s linear infinite;padding:13px 0}
.ticker span{font:400 clamp(18px,2vw,26px)/1 var(--label);text-transform:uppercase;letter-spacing:.02em;padding:0 clamp(16px,2vw,28px);white-space:nowrap}
.ticker i{font-style:normal;color:var(--coral);font-size:20px;align-self:center}
@keyframes tick{to{transform:translateX(-25%)}}

/* ── meet ───────────────────────────────────────────────────────────────── */
.meet{padding-top:clamp(110px,13vw,170px)}
.meet-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(48px,6vw,80px)}
.note-card,.also-card{position:relative;background:var(--cream);padding:clamp(26px,3vw,38px);border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 26px -14px rgba(15,31,29,.45),0 2px 4px rgba(15,31,29,.1);transform:rotate(var(--tilt,0));transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.note-card:hover,.also-card:hover{transform:rotate(0) translateY(-6px) scale(1.01)}
.note-card::before{content:'';position:absolute;inset:0;background:var(--c,var(--mint));opacity:.33;border-radius:inherit;pointer-events:none}
.tone-mint{--c:var(--mint)}.tone-coral{--c:#f7b6a0}.tone-lime{--c:var(--lime)}.tone-sky{--c:var(--sky)}.tone-teal{--c:#7cc0b3}
.nc-img{width:110px;margin:-8px 0 14px -6px;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.note-card:hover .nc-img{transform:rotate(-8deg) scale(1.08)}
.note-card h3{font-size:clamp(22px,2vw,28px);margin-bottom:10px;position:relative}.note-card p{position:relative;color:var(--ink2);font-size:16px}

/* ── films ──────────────────────────────────────────────────────────────── */
.films{padding-bottom:clamp(110px,12vw,170px)}
.films .head{max-width:760px}
.reels{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5vw,70px);align-items:start}
.reels:has(.reel-big:only-child){grid-template-columns:minmax(0,1fr);max-width:980px;margin-inline:auto}
.reels-side{display:grid;gap:clamp(20px,3vw,32px)}
.reel-btn{all:unset;display:block;cursor:pointer;width:100%}
.reel-btn:focus-visible{outline:3px solid var(--lime);outline-offset:6px}
.reel-frame{position:relative;display:block;border-radius:6px;background:#000;padding:clamp(10px,1.4vw,16px) clamp(22px,3vw,34px);box-shadow:0 30px 60px -20px #000;transform:rotate(var(--tilt,-.6deg));transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.reel-frame::before,.reel-frame::after{content:'';position:absolute;top:0;bottom:0;width:clamp(12px,1.8vw,20px);background:repeating-linear-gradient(0deg,transparent 0 9px,#f4ebdd 9px 17px,transparent 17px 26px);background-size:100% 26px;-webkit-mask:linear-gradient(90deg,transparent 30%,#000 30% 70%,transparent 70%);mask:linear-gradient(90deg,transparent 30%,#000 30% 70%,transparent 70%);opacity:.75}
.reel-frame::before{left:clamp(4px,.7vw,8px)}.reel-frame::after{right:clamp(4px,.7vw,8px)}
.reel-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:3px;transition:transform .5s,filter .3s}
.reel-btn:hover .reel-frame,.reel-btn:focus-visible .reel-frame{transform:rotate(0) scale(1.012)}
.reel-btn:hover .reel-frame img{filter:brightness(1.06) saturate(1.06)}
.reel-play{position:absolute;left:50%;top:50%;width:clamp(64px,8vw,104px);aspect-ratio:1;margin:calc(clamp(64px,8vw,104px) / -2) 0 0 calc(clamp(64px,8vw,104px) / -2);display:grid;place-items:center;border-radius:50%;background:var(--paper);box-shadow:0 0 0 6px rgba(251,246,236,.28),0 14px 30px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.reel-play svg{width:42%;fill:var(--coral);margin-left:6%}
.reel-btn:hover .reel-play{transform:scale(1.12) rotate(-6deg)}
.reel-len{position:absolute;right:clamp(28px,3.6vw,42px);bottom:clamp(14px,1.6vw,20px);background:rgba(15,31,29,.86);padding:3px 9px;border-radius:5px;font:700 13px var(--body);color:var(--cream)}
.reel-cap{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:22px;text-align:left}
.reel-cap strong{font:400 clamp(24px,2.4vw,34px)/1.1 var(--label);color:var(--cream)}.reel-cap span:last-child{color:#c9dcd4;font-size:16px;max-width:52ch}
.reel:not(.reel-big) .reel-cap strong{font-size:clamp(20px,1.8vw,25px)}
.films-clap{position:absolute;right:4%;top:-30px;width:clamp(80px,10vw,150px);transform:rotate(9deg)}
.films-mugs{position:absolute;left:1%;bottom:clamp(30px,5vw,70px);width:clamp(90px,10vw,150px);transform:rotate(-7deg);opacity:.95}
.cinema{border:0;padding:0;background:transparent;width:min(1120px,96vw);max-height:96vh;overflow:visible;color:var(--cream)}
.cinema::backdrop{background:rgba(6,14,12,.86);backdrop-filter:blur(6px)}
.cinema-in{background:var(--night);padding:clamp(14px,2vw,26px);border-radius:10px;box-shadow:0 40px 100px #000,0 0 0 3px #f4ebdd33}
.cinema-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.cinema-top h2{font:400 clamp(20px,2.4vw,30px)/1 var(--label)}
.cinema-close{width:44px;height:44px;border-radius:50%;border:2px solid #f4ebdd66;background:transparent;color:var(--cream);font-size:28px;line-height:1}
.cinema video{display:block;width:100%;max-height:74vh;background:#000;border-radius:4px}
.cinema-note{margin-top:12px;font:500 24px var(--hand);color:#9fbdb3;text-align:center}

/* ── change lab ─────────────────────────────────────────────────────────── */
.change-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chip{border:0;background:var(--paper);padding:.7em 1.25em;border-radius:99px 80px 99px 90px;font:700 15px var(--body);box-shadow:0 3px 0 rgba(15,31,29,.3);transition:transform .2s cubic-bezier(.3,1.7,.5,1),background .2s}
.chip:hover{transform:translateY(-2px) rotate(-1.5deg)}
.chip[aria-selected=true]{background:var(--ink);color:var(--lime);transform:rotate(-1.5deg)}
.lab{position:relative;display:grid;gap:18px}
.chat{display:grid;gap:12px}
.bubble{position:relative;max-width:88%;padding:14px 18px;border-radius:22px;font-size:16.5px;line-height:1.5;box-shadow:0 8px 16px -8px rgba(15,31,29,.4);min-height:52px}
.bubble.me{justify-self:end;background:var(--ink);color:var(--paper);border-bottom-right-radius:6px;font-weight:600}
.bubble.coach{background:var(--paper);border-bottom-left-radius:6px;padding-left:64px}
.bubble-sticker{position:absolute;left:-14px;top:-18px;width:66px;transform:rotate(-8deg)}
.dots{display:inline-flex;gap:5px;padding:6px 0}.dots i{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:dot .9s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
[data-answer]{transition:opacity .4s}
.card-session{position:relative;background:var(--cream);border-radius:8px;padding:clamp(20px,2.4vw,28px);box-shadow:0 22px 40px -18px rgba(15,31,29,.6),0 2px 4px rgba(15,31,29,.12);transform:rotate(.7deg)}
.cs-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}
.cs-top strong{display:block;font:400 22px/1.1 var(--label)}.cs-top span{font-size:14px;color:var(--muted);font-weight:600}
.cs-badge{font:400 12px var(--label);letter-spacing:.08em;text-transform:uppercase;background:var(--mint);padding:.5em .8em;border-radius:6px;white-space:nowrap}
.cs-label{display:block;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.strip{display:flex;align-items:flex-end;gap:3px;height:96px}
.strip .b{flex:var(--g) 1 0;min-width:0;border-radius:4px 4px 2px 2px;background:var(--mint);height:34%;transition:flex-grow .8s cubic-bezier(.5,0,.2,1),opacity .5s,height .6s;position:relative;opacity:1;overflow:hidden}
.strip .b.t{background:var(--coral);height:100%}.strip .b.r{background:#f6c9a0;height:26%}.strip .b.c,.strip .b.w{background:var(--mint);height:34%}
.strip .b.gone{flex-grow:0;opacity:0;margin-inline:-1.5px}
.strip .b span{position:absolute;bottom:4px;left:0;right:0;text-align:center;font:700 11px var(--body);color:var(--ink);opacity:.8}
.strip.week{gap:6px;height:auto;align-items:stretch}
.strip.week .d{flex:1;min-width:0;background:var(--sky);border-radius:6px;padding:8px 4px 10px;text-align:center;transition:background .5s,transform .5s;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.15;font-weight:700}
.strip.week .d small{font-size:11px;font-weight:600;opacity:.65}
.strip.week .d b{font:400 12.5px var(--label);letter-spacing:.01em;min-height:2.4em;display:grid;place-items:center;word-break:break-word}
.strip.week .d.run{background:#b9e6a1}.strip.week .d.swim{background:#9adbe0}.strip.week .d.ride{background:#fbd08d}.strip.week .d.lift{background:#e2b7ee}.strip.week .d.rest{background:#e7e2d6;color:#6d6a60}
.strip.week .d.changed{animation:flip .9s}
@keyframes flip{40%{transform:rotateX(90deg) scale(.9)}100%{transform:none}}
.cs-proposed{margin-top:14px;padding-top:14px;border-top:2px dashed rgba(15,31,29,.25);transition:opacity .5s,max-height .6s,margin .5s,padding .5s;max-height:200px;overflow:hidden}
.cs-proposed.off{opacity:0;max-height:0;margin:0;padding:0;border:0}
.cs-env{display:flex;align-items:center;gap:14px;margin-top:14px;font-weight:700;font-size:14px}.cs-env[hidden]{display:none}
.env{display:flex;align-items:center;gap:8px}.env-img{width:46px}.env em{font-style:normal}.env-arrow{font-size:22px;color:var(--coral)}
.cs-note{margin-top:14px;font:600 26px/1.1 var(--hand);color:var(--teal-dk);min-height:1.2em}
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;transition:opacity .4s}
.cs-actions .btn{padding:.7em 1.2em;font-size:15px}.reviewed{font-size:13px;color:var(--muted);font-weight:600}
.lab[data-state=applied] .cs-actions .btn-teal{visibility:hidden}
.stamp{position:absolute;right:20px;bottom:22px;font:400 28px/1 var(--label);text-transform:uppercase;color:var(--teal);border:4px double var(--teal);padding:.2em .5em;border-radius:6px;transform:rotate(-9deg) scale(2.2);opacity:0;pointer-events:none;letter-spacing:.06em}
.lab[data-state=applied] .stamp{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{to{transform:rotate(-9deg) scale(1);opacity:.92}}

/* ── features ───────────────────────────────────────────────────────────── */
.features{padding-top:clamp(100px,12vw,160px)}
.chap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(30px,6vw,100px);margin-top:clamp(70px,9vw,140px)}
.chap.flip .chap-text{order:2}
.chap-text{max-width:560px}.chap-text .kicker{margin-bottom:18px}.chap-text h3{margin-bottom:18px;text-wrap:balance}
.chap-text>p:not(.kicker){color:var(--ink2);font-size:clamp(16px,1.3vw,18.5px)}
.ticks{margin-top:24px;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:16px}
.ticks svg{flex:none;width:26px;height:26px;margin-top:0;background:var(--lime);border-radius:50% 45% 55% 48%;padding:5px;fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.ticks path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s .3s}
.in .ticks path,.ticks .in path{stroke-dashoffset:0}
.no-js .ticks path{stroke-dashoffset:0}
.chap-art{position:relative;min-height:clamp(430px,44vw,640px);display:grid;place-items:center}
.chap-art::before{content:'';position:absolute;inset:6% 4%;background:var(--c,var(--mint));opacity:.55;border-radius:46% 54% 50% 50%/56% 46% 54% 44%;transform:rotate(-4deg)}
.chap.flip .chap-art::before{transform:rotate(5deg);border-radius:52% 48% 46% 54%/46% 56% 44% 54%}
.chap-art .phone{position:absolute}
.ph-a{--pw:clamp(190px,21vw,300px);left:50%;top:50%;transform:translate(-78%,-50%) rotate(-5deg);z-index:2}
.ph-b{--pw:clamp(170px,19vw,270px);left:50%;top:50%;transform:translate(-14%,-44%) rotate(5deg);z-index:1}
.chap.flip .ph-a{transform:translate(-14%,-50%) rotate(5deg)}.chap.flip .ph-b{transform:translate(-86%,-44%) rotate(-5deg)}
.chap-art .phone{transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.chap-art:hover .ph-a{transform:translate(-84%,-52%) rotate(-7deg)}.chap-art:hover .ph-b{transform:translate(-8%,-42%) rotate(7deg)}
.chap.flip .chap-art:hover .ph-a{transform:translate(-8%,-52%) rotate(7deg)}.chap.flip .chap-art:hover .ph-b{transform:translate(-92%,-42%) rotate(-7deg)}
.chap-sticker{position:absolute;z-index:3;width:clamp(90px,11vw,160px);right:-2%;bottom:1%;transform:rotate(8deg)}
.chap.flip .chap-sticker{right:auto;left:-2%;transform:rotate(-9deg)}
.also{margin-top:clamp(90px,10vw,150px)}
.also-title{font:700 clamp(38px,4.4vw,60px)/1 var(--hand);text-align:center;margin-bottom:46px;color:var(--teal-dk)}
.also-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px)}
.also-card{padding:26px 22px 24px}.also-card h4{font:400 19px/1.15 var(--label);margin:12px 0 8px}.also-card p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.also-img{width:78px;height:72px;object-fit:contain;object-position:left center}

/* ── phone ──────────────────────────────────────────────────────────────── */
.phone{--pw:clamp(190px,20vw,280px);width:var(--pw);aspect-ratio:1206/2622;container-type:inline-size;position:relative;flex:none;border-radius:calc(var(--pw) * .155);background:#0d2521;padding:calc(var(--pw) * .026);box-shadow:0 0 0 clamp(4px,.5vw,7px) var(--paper),0 0 0 clamp(5px,.6vw,8px) rgba(15,31,29,.12),0 30px 44px -14px rgba(15,31,29,.55)}
.phone-in{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .13);overflow:hidden;background:#fff}
.phone-in::before{content:'';position:absolute;z-index:3;top:2.4%;left:50%;width:27%;height:2.7%;transform:translateX(-50%);border-radius:99px;background:#040807}
.phone-in img{display:block;width:100%;height:100%;object-fit:cover}
.sec-teal .phone,.sec-tealdk .phone{box-shadow:0 0 0 clamp(4px,.5vw,7px) var(--paper),0 30px 44px -14px rgba(0,0,0,.6)}

/* ── course ─────────────────────────────────────────────────────────────── */
.course .head{max-width:760px}
.profs{display:grid;gap:clamp(26px,3vw,40px);margin-top:clamp(44px,5vw,70px)}
.prof{position:relative;background:var(--paper);border-radius:6px;padding:clamp(20px,2.6vw,34px) clamp(20px,2.6vw,34px) 0;box-shadow:0 20px 34px -18px rgba(15,31,29,.5);overflow:hidden;transform:rotate(var(--tilt,0))}
.prof-road{--tilt:-.4deg}.prof-trail{--tilt:.5deg}
.prof figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:8px}
.prof figcaption span{font:400 clamp(20px,2vw,28px) var(--label)}.prof figcaption strong{font:700 clamp(28px,3vw,42px) var(--hand);color:var(--teal-dk)}.prof figcaption em{font-style:normal;color:var(--muted);font-weight:600;margin-left:auto}
.prof svg{display:block;width:100%;height:auto;overflow:visible}
.prof-road svg{max-height:110px}
.prof-area{fill:var(--mint);opacity:.7}.prof-trail .prof-area{fill:var(--lime)}
.prof-svg{position:relative}
.prof-line{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.js .prof-line{stroke-dashoffset:1}
.prof-dot{position:absolute;left:0;top:100%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--coral);border:4px solid var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.35);opacity:0}
.course-village{position:absolute;left:-1%;bottom:-2%;width:clamp(150px,20vw,290px);opacity:.96;z-index:2}
.course-wal{position:absolute;right:0;top:4%;width:clamp(130px,17vw,240px);transform:rotate(3deg);z-index:0;opacity:.9}
.course .wrap{z-index:1}

/* ── gallery ────────────────────────────────────────────────────────────── */
.gallery{padding-bottom:clamp(90px,10vw,140px)}
.head-wrap{margin-bottom:34px}
.rail{overflow-x:auto;padding:30px var(--gutter) 60px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--lime) transparent;cursor:grab}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail-track{display:flex;gap:clamp(26px,3.5vw,54px);width:max-content;padding-inline:max(0px,calc((100vw - 1240px)/2 - var(--gutter)))}
.rail-item{scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;width:clamp(210px,21vw,280px);transform:rotate(var(--tilt));transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.rail-item:hover{transform:rotate(0) translateY(-8px)}
.rail-item .phone{--pw:clamp(210px,21vw,280px)}
.rail-item figcaption{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%}
.rail-item figcaption span:last-child{font-size:15px;line-height:1.5;color:#dcebe6}
.rail-hint{display:flex;align-items:center;gap:8px;justify-content:center;font:600 26px var(--hand);color:var(--lime);position:relative}
.hint-arrow{position:static;width:48px;height:auto}
.rail img{-webkit-user-drag:none}

/* ── start teaser + signpost ────────────────────────────────────────────── */
.startteaser{padding-bottom:clamp(110px,12vw,160px)}
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,6vw,90px);align-items:center}
.st-art,.sh-art{position:relative;min-height:clamp(420px,42vw,600px)}
.st-phone{--pw:clamp(140px,14vw,200px);position:absolute;right:-3%;top:50%;transform:translateY(-50%) rotate(4deg)}
.st-walk{position:absolute;right:-1%;bottom:-3%;width:clamp(90px,11vw,150px);z-index:3;animation:bob 1s steps(1,end) infinite}
.st-pencil{position:absolute;left:2%;bottom:0;width:clamp(100px,11vw,160px);transform:rotate(-14deg)}
.signpost{position:absolute;left:12%;top:0;width:min(46%,360px);height:100%}
.post{position:absolute;left:46%;top:2%;bottom:-2%;width:26px;background:linear-gradient(90deg,#8a5a2c,#b98550 40%,#8f5f30);border-radius:4px 4px 0 0;box-shadow:0 0 0 3px rgba(255,250,240,.9),0 8px 14px rgba(0,0,0,.25)}
.plank{position:absolute;height:clamp(40px,4.4vw,58px);filter:drop-shadow(0 0 1.5px #fffaf0) drop-shadow(0 0 1.5px #fffaf0) drop-shadow(0 6px 7px rgba(0,0,0,.3));transform-origin:46% 50%;animation:swing 1.2s calc(var(--i,0) * .16s + .3s) both cubic-bezier(.2,1.8,.4,1)}
.plank-in{display:flex;align-items:center;gap:10px;height:100%;padding:0 24px 0 12px;background:linear-gradient(180deg,#c99259,#b07a45 60%,#a06c3a);color:#3a2410;font:700 clamp(18px,2.1vw,26px) var(--hand);white-space:nowrap;overflow:hidden}
.plank b{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--coral);color:#fff;font:400 .8em var(--label);flex:none;box-shadow:0 0 0 2px rgba(255,250,240,.9)}
.plank.right{left:46%;width:80%}.plank.right .plank-in{clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%);padding-left:40px;padding-right:30px}
.plank.left{left:-20%;width:66%;--dir:-1}.plank.left .plank-in{clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);justify-content:flex-end;padding-right:44px;flex-direction:row-reverse}
.p1{top:6%;--i:0}.p2{top:24%}.p3{top:42%}.p4{top:60%}.p5{top:78%}
.plank.top{top:-2%;width:auto;height:34px}.plank.top .plank-in{background:linear-gradient(180deg,#5fa08f,#3f8072);color:#eaf6f0;font-size:clamp(15px,1.5vw,19px);padding-right:36px;clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);padding-left:26px}
@keyframes swing{from{transform:rotate(calc(28deg * var(--dir,1))) translateY(-6px);opacity:0}to{transform:none;opacity:1}}

/* ── connect ────────────────────────────────────────────────────────────── */
.conn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(44px,5vw,70px)}
.conn{text-align:center;padding:24px 18px}.conn-img{display:grid;place-items:center;height:130px;margin-bottom:8px}
.conn-sticker{max-height:124px;width:auto;max-width:130px;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.conn:hover .conn-sticker{transform:rotate(-7deg) scale(1.08)}
.conn h3{font-size:20px;margin-bottom:10px}.conn p{font-size:15px;color:var(--ink2)}

/* ── Franconia ──────────────────────────────────────────────────────────── */
.fr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
.say{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:30px;padding:16px 20px;background:var(--paper);border-radius:6px;box-shadow:0 10px 18px -12px rgba(15,31,29,.5);transform:rotate(-1deg);max-width:520px}
.say-word{font:700 clamp(40px,5vw,60px) var(--hand);color:var(--teal-dk)}.say-ipa{font:600 22px var(--type)}.say-note{flex-basis:100%;font-size:14.5px;color:var(--muted)}
.fr-art{position:relative;min-height:400px;display:grid;place-items:center;padding-bottom:40px}
.postcard{position:relative;width:min(100%,540px);background:var(--paper);padding:14px 14px 20px;border-radius:4px;box-shadow:0 26px 40px -18px rgba(15,31,29,.6);transform:rotate(var(--tilt));border:1px solid rgba(15,31,29,.08)}
.pc-pic{position:relative;height:250px;background:var(--mint);overflow:hidden;border-radius:2px;display:grid;place-items:end center}
.pc-pic>img:first-child{width:78%;margin-bottom:-2%}.pc-sun{position:absolute;right:6%;top:6%;width:22%;animation:wob 3s steps(1,end) infinite}
.pc-text{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 4px 0}.pc-title{font:700 clamp(30px,3.4vw,42px) var(--hand);color:var(--teal-dk)}.pc-by{font:500 22px var(--hand);color:var(--muted)}
.pc-stamp{position:absolute;right:26px;top:26px;width:74px;padding:6px;background:var(--paper);border:3px dotted var(--coral);transform:rotate(5deg)}.pc-logo{width:100%;filter:none}
.pc-mark{position:absolute;right:88px;top:40px;width:80px;height:48px;opacity:.5;transform:rotate(-8deg)}
.pc-mark i{display:block;height:2px;background:var(--ink);margin:9px 0;border-radius:2px}.pc-mark i:nth-child(2){width:80%}.pc-mark i:nth-child(3){width:60%}
.fr-cherries{position:absolute;left:-4%;bottom:-12%;width:clamp(80px,9vw,120px);transform:rotate(-10deg);z-index:2}
.fr-weggla{position:absolute;right:-4%;bottom:-16%;width:clamp(110px,12vw,170px);transform:rotate(6deg);z-index:2}
.phrases{margin-top:clamp(60px,7vw,100px);text-align:center}
.phrases h3{font:700 clamp(36px,4vw,54px)/1 var(--hand);margin-bottom:30px;color:var(--teal-dk)}
.phrase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);text-align:left}
.phrase{position:relative;background:var(--paper);padding:22px 20px 20px;border-radius:4px;box-shadow:0 12px 20px -12px rgba(15,31,29,.5);transform:rotate(var(--tilt));display:flex;flex-direction:column;gap:8px}
.phrase::before{content:'';position:absolute;top:-11px;left:24%;width:76px;height:22px;background:rgba(167,243,109,.75);transform:rotate(-3deg)}
.phrase strong{font:700 clamp(28px,2.6vw,36px)/1.05 var(--hand);color:var(--teal-dk)}.phrase span{font-size:15px;color:var(--ink2)}
.wal-line{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:64px;font:600 clamp(24px,2.5vw,32px)/1.15 var(--hand);color:var(--teal-dk);text-align:left}
.wal-boots{width:96px;flex:none;transform:rotate(-6deg)}
.franconia{padding-bottom:clamp(120px,12vw,170px)}

/* ── privacy ────────────────────────────────────────────────────────────── */
.pv-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:center}
.pv-art{position:relative;min-height:340px}.pv-chest{position:absolute;left:4%;top:8%;width:min(76%,380px);transform:rotate(-4deg)}.pv-lock{position:absolute;right:2%;bottom:0;width:min(34%,170px);transform:rotate(9deg)}
.pv-points{display:grid;gap:14px;margin:28px 0 34px}.pv-points li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.pv-points svg{flex:none;width:26px;height:26px;background:var(--lime);border-radius:50%;padding:5px;fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.pv-points path{stroke-dasharray:none}
.pv-points strong{color:var(--lime)}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq{padding-top:clamp(90px,10vw,130px)}
.qa{background:var(--cream);border-radius:6px;margin-bottom:14px;box-shadow:0 8px 14px -10px rgba(15,31,29,.5);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font:400 clamp(17px,1.6vw,21px)/1.25 var(--label)}
.qa summary::-webkit-details-marker{display:none}
.qa-x{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:var(--lime)}.qa-x::before,.qa-x::after{content:'';position:absolute;left:8px;right:8px;top:14px;height:3px;background:var(--ink);border-radius:2px;transition:transform .3s}.qa-x::after{transform:rotate(90deg)}
.qa[open] .qa-x::after{transform:rotate(0)}
.qa p{padding:0 24px 22px;color:var(--ink2);animation:fadeup .4s}
@keyframes fadeup{from{opacity:0;transform:translateY(-6px)}}

/* ── final ──────────────────────────────────────────────────────────────── */
.final{padding-top:clamp(100px,11vw,150px);padding-bottom:clamp(90px,10vw,140px);overflow:hidden;text-align:center}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.final .wrap{z-index:2}
.final-sun{position:absolute;right:2%;top:-40px;width:clamp(100px,13vw,190px);animation:wob 3s steps(1,end) infinite}
.final-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin:8px 0 56px}.final-w{width:clamp(110px,14vw,190px);filter:none}
.final h2{color:var(--cream);margin-bottom:16px}.final .lede{margin-inline:auto}
.ticket{position:relative;display:inline-flex;margin-top:38px;text-align:left;transform:rotate(-2deg);filter:drop-shadow(0 18px 20px rgba(0,0,0,.5))}
.ticket-main,.ticket-stub{background:var(--lime);color:var(--ink);padding:22px 30px}
.ticket-main{border-radius:12px 0 0 12px;-webkit-mask:radial-gradient(circle 12px at 100% 50%,#0000 98%,#000);mask:radial-gradient(circle 12px at 100% 50%,#0000 98%,#000);padding-right:38px}
.ticket-stub{border-radius:0 12px 12px 0;border-left:3px dashed rgba(15,31,29,.5);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:150px;-webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000);mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000);padding-left:38px}
.ticket small{display:block;font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;opacity:.7}.ticket strong{display:block;font:400 clamp(24px,3vw,36px)/1.1 var(--label)}.ticket-main span{font:600 24px var(--hand)}
.ticket-stub b{font:400 24px var(--label)}.ticket-stub span{font-size:12px;font-weight:700;opacity:.7;text-align:center}
.back{display:table;margin:56px auto 0;font:700 15px var(--body);color:#b9cfc7;border-bottom:2px dashed #b9cfc766;padding-bottom:3px}
.final-medal{position:absolute;left:5%;bottom:6%;width:clamp(70px,8vw,120px);transform:rotate(-12deg);z-index:2}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--night);color:var(--cream);padding:70px 0 44px}
.foot-in{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto;display:grid;gap:22px;justify-items:center;text-align:center}
.foot .ransom{font-size:38px}
.foot-origin{display:flex;align-items:center;gap:12px;color:#c9dcd4;font-size:15px;flex-wrap:wrap;justify-content:center}.foot-origin span{font-family:var(--hand);font-size:22px;color:var(--lime)}
.foot-pretzel{width:44px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;font-weight:700;font-size:14.5px}.foot-links a{padding:8px 2px;border-bottom:2px solid transparent}.foot-links a:hover{border-bottom-color:var(--lime)}
.foot-line{font-size:13px;color:#8fa9a0}

/* ── reveal ─────────────────────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(34px) rotate(var(--rot,1.2deg)) scale(1.03);transition:opacity .7s,transform .8s cubic-bezier(.2,1.2,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.js .also-card.reveal.in{transform:rotate(var(--tilt,0))}
.js .also-card.reveal:nth-child(2n){transition-delay:.08s}.js .also-card.reveal:nth-child(3n){transition-delay:.16s}

/* ── start page ─────────────────────────────────────────────────────────── */
.start-hero{padding-top:calc(var(--bar-h) + clamp(50px,7vw,100px));padding-bottom:clamp(100px,11vw,150px)}
.sh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center}
.start-hero h1{font:700 clamp(84px,12vw,170px)/.82 var(--hand);color:var(--ink);margin:0 0 .12em -.02em}
.start-hero .hero-sub{font-size:clamp(22px,2.4vw,32px)}
.sh-art{min-height:clamp(380px,36vw,520px)}.sh-art .signpost{left:18%;width:min(50%,380px)}
.sh-you{position:absolute;right:0;bottom:0;width:clamp(80px,10vw,130px);z-index:2;animation:bob 1.2s steps(1,end) infinite}
.sh-house{position:absolute;right:-2%;top:-4%;width:clamp(120px,15vw,210px);z-index:0}
.tutorial{background:var(--paper);position:relative;padding:clamp(70px,8vw,110px) 0 clamp(40px,5vw,70px)}
.tutorial-in{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.path{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:sticky;top:calc(var(--bar-h) + 6px);z-index:20;padding:10px 0;margin:0 auto clamp(30px,4vw,60px);background:linear-gradient(var(--paper) 70%,transparent)}
.path a{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--cream);font:700 13.5px var(--body);color:var(--muted);box-shadow:0 2px 0 rgba(15,31,29,.15);transition:background .3s,color .3s,transform .3s}
.path a b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--kraft);color:var(--ink);font:400 13px var(--label);transition:background .3s}
.path a.on{background:var(--ink);color:var(--paper);transform:translateY(-2px) rotate(-1deg)}.path a.on b{background:var(--lime)}
.path a.done b{background:var(--mint)}
.tut-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(30px,6vw,110px);align-items:start}
.tut-stage{position:sticky;top:calc(var(--bar-h) + 78px);height:calc(100svh - var(--bar-h) - 100px);display:grid;place-items:center;order:2}
.stage{position:relative;height:100%;max-height:820px;aspect-ratio:1206/2622;max-width:100%}
.stage-phone{position:relative;height:100%;display:grid;place-items:center}
.tphone{--pw:min(100%,calc((100svh - var(--bar-h) - 130px) * .46));height:auto;width:var(--pw);transform:rotate(1.4deg)}
.tphone .phone-in img[data-stage-shot]{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.tphone .phone-in img[data-stage-shot].on{opacity:1}
.ring-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.ring{fill:none;stroke:var(--coral);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ring.show{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.5,0,.2,1)}
.tap-hand{position:absolute;z-index:6;width:clamp(70px,7vw,110px);left:60%;top:60%;opacity:0;transform-origin:20% 10%;pointer-events:none;transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .4s}
.tap-hand.show{opacity:1;animation:tapping 1.5s .8s infinite}
@keyframes tapping{0%,55%,100%{transform:rotate(-6deg) scale(1)}70%{transform:rotate(-2deg) scale(.9) translate(-4px,-6px)}}
.stage-walker{position:absolute;left:-14%;bottom:-2%;width:22%;z-index:5;pointer-events:none;animation:bob 1s steps(1,end) infinite}
.stage-label{position:absolute;right:-6%;top:2%;z-index:7;font:400 13px var(--label);letter-spacing:.08em;text-transform:uppercase;background:var(--lime);padding:.55em 1em;transform:rotate(4deg);clip-path:polygon(2% 0,98% 0,100% 20%,98% 40%,100% 60%,98% 80%,100% 100%,2% 100%,0 80%,2% 60%,0 40%,2% 20%);box-shadow:0 2px 0 rgba(0,0,0,.1)}
.tut-text{order:1}
.tchap{padding:clamp(20px,3vw,40px) 0 clamp(50px,7vw,90px);border-top:0}
.tchap-head{display:flex;gap:clamp(16px,2.4vw,30px);align-items:flex-start;margin-bottom:clamp(26px,3vw,44px)}
.step-wrap{flex:none;width:clamp(72px,8vw,104px);filter:drop-shadow(0 6px 5px rgba(15,31,29,.28)) drop-shadow(0 0 0 #fffaf0)}
.step-tile{width:100%;aspect-ratio:.86;display:grid;place-items:center;align-content:center;background:var(--cream);clip-path:var(--torn2);transform:rotate(-4deg);position:relative;text-align:center}
.step-tile small{font:600 clamp(15px,1.4vw,19px)/1 var(--hand);color:var(--teal)}.step-tile b{font:400 clamp(44px,5vw,66px)/1 var(--label);color:var(--teal)}
.step-tile.step-extra b{color:var(--coral)}
.tchap .kicker{font:700 clamp(20px,2vw,26px)/1 var(--hand);color:var(--coral);margin-bottom:4px}
.tchap h2{font-size:clamp(34px,4vw,54px)}.tchap .lede{margin-top:12px}
.beats{display:grid;gap:clamp(70px,13svh,140px);padding-block:clamp(10px,4svh,40px)}
.beat{min-height:34svh;display:flex;align-items:center}
.beat-card{position:relative;background:var(--cream);padding:clamp(20px,2.2vw,28px);border-radius:6px;box-shadow:0 14px 24px -14px rgba(15,31,29,.5),0 2px 3px rgba(15,31,29,.1);font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .4s,background .4s,opacity .4s;transform:rotate(-.6deg);opacity:.55}
.beat:nth-child(even) .beat-card{transform:rotate(.5deg)}
.beat.on .beat-card{opacity:1;background:#fff8e6;transform:rotate(0) translateX(8px) scale(1.015);box-shadow:0 22px 34px -16px rgba(15,31,29,.55),0 0 0 3px var(--lime)}
.beat-n{position:absolute;top:-13px;left:18px;font:400 12px var(--label);letter-spacing:.1em;background:var(--mint);padding:.35em .8em;transform:rotate(-2deg)}
.beat-card strong{background:linear-gradient(transparent 62%,rgba(167,243,109,.7) 62%);font-weight:800}
.tip{display:flex;gap:14px;align-items:center;margin-top:clamp(20px,3vw,36px);font:600 clamp(21px,2vw,26px)/1.2 var(--hand);color:var(--teal-dk)}
.tip-pencil{width:64px;flex:none;transform:rotate(-20deg)}
.outro{padding-bottom:clamp(120px,12vw,160px)}.outro-you{width:clamp(110px,13vw,170px);margin:0 auto 26px;animation:bob 1s steps(1,end) infinite}
.outro h2{margin-bottom:14px}.outro .btn{margin-top:30px}
.nf-main{min-height:100svh;display:grid;place-items:center;padding:60px 0}.nf h1{font:700 clamp(60px,10vw,120px)/.9 var(--hand);margin-bottom:12px}.nf-you{width:120px;margin:28px auto}

/* ── privacy page (shared Markdown notice) ──────────────────────────────── */
.policy-main{width:min(1240px,100% - var(--gutter)*2);margin:0 auto;padding:calc(var(--bar-h) + 70px) 0 110px}
.policy-heading{max-width:870px;padding-bottom:60px}
.policy-heading .eyebrow{margin-bottom:26px}
.policy-heading h1{font:400 clamp(44px,6.6vw,88px)/1.04 var(--label);overflow-wrap:normal;text-wrap:balance}
.policy-intro{font-size:clamp(17px,2vw,22px);line-height:1.6;max-width:640px;margin-top:28px;color:var(--ink2)}
.policy-date{font-size:13px;margin-top:24px;color:var(--muted);font-weight:600}
.policy-layout{display:grid;grid-template-columns:minmax(210px,280px) minmax(0,720px);gap:clamp(36px,7vw,112px);align-items:start;border-top:3px dashed rgba(15,31,29,.2);padding-top:42px}
.policy-sidebar{position:sticky;top:calc(var(--bar-h) + 20px);max-height:calc(100svh - var(--bar-h) - 40px);overflow-y:auto;padding-right:10px}
.policy-contents summary{font:400 13px var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-bottom:18px;min-height:28px;list-style:none;display:flex;justify-content:space-between}
.policy-contents summary::-webkit-details-marker{display:none}
.policy-contents summary::after{content:'+';font-size:18px;color:var(--teal)}.policy-contents[open] summary::after{content:'−'}
.policy-contents nav{display:flex;flex-direction:column;gap:2px}
.policy-contents nav a{font-size:13.5px;line-height:1.45;padding:7px 0;color:var(--muted)}
.policy-contents nav a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.policy-contact{display:block;margin-top:28px;padding-top:24px;border-top:2px dashed rgba(15,31,29,.2);font-size:13.5px;font-weight:700}
.policy-contact span{display:block;font-size:12.5px;color:var(--teal);margin-top:8px;overflow-wrap:anywhere}
.policy-download{display:block;font-size:12.5px;margin-top:20px;text-decoration:underline;text-underline-offset:4px;font-weight:600}
.policy-body{font-size:16px;line-height:1.85;overflow-wrap:anywhere}
.policy-body p{margin-bottom:22px}.policy-body h2{font:400 clamp(24px,2.4vw,30px)/1.2 var(--label);margin:54px 0 24px;scroll-margin-top:calc(var(--bar-h) + 20px)}.policy-body h2:first-of-type{margin-top:26px}
.policy-body h3{font:400 19px/1.4 var(--label);margin:32px 0 16px;scroll-margin-top:calc(var(--bar-h) + 20px)}
.policy-body strong{font-weight:800}.policy-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.policy-body hr{border:0;border-top:3px dashed rgba(15,31,29,.2);margin:40px 0}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1080px){
 .bar-nav{display:none}.menu{display:block}.soon{display:none}.bar-r{margin-left:auto}
 .change-grid,.st-grid,.fr-grid,.pv-grid,.sh-grid{grid-template-columns:1fr}
 .reels{grid-template-columns:1fr}.reels-side{grid-template-columns:1fr 1fr}
 .also-grid,.conn-grid,.phrase-grid{grid-template-columns:repeat(2,1fr)}
 .chap{grid-template-columns:1fr;gap:34px}.chap.flip .chap-text{order:0}.chap-text{max-width:none}
 .chap-art{min-height:clamp(430px,78vw,620px)}
 .pv-art{min-height:280px;order:2}
}
@media(max-width:1080px){
 .tut-cols{grid-template-columns:1fr}
 .tut-stage{display:none}
 .beat{min-height:0;flex-direction:column;align-items:stretch;gap:26px}
 .beats{gap:clamp(56px,10svh,90px)}
 .beat-card{opacity:1}
 .beat-shot{display:block;margin:6px auto 0}
 .beat-shot .phone{--pw:min(64vw,250px);margin-inline:auto}
}
@media(max-width:760px){
 :root{--bar-h:64px;--gutter:20px}
 body{font-size:16px}
 .brand-w{width:34px}.ransom.sm{font-size:16px}
 .hero{min-height:0}
 .hero-copy{padding-top:calc(var(--bar-h) + 30px)}
 .hero-intro{max-width:none}
 .scene{position:relative;aspect-ratio:1600/1000;margin-top:-24px;min-height:300px}
 .wal{left:28%;width:52cqw;bottom:34%}.castle{width:11cqw}.house{width:33cqw}.sam{left:32%;width:9cqw}.sun-wrap{width:17cqw;right:4%}.runners{left:42%}
 .r1{width:8.6cqw}.r2{left:10cqw;width:8.2cqw}.r3{left:19cqw;width:8.6cqw}.rider{width:12cqw}.swim{width:15cqw}.hops{width:8cqw}
 .wal-note{display:none}
 .meet-cards,.also-grid,.conn-grid,.phrase-grid,.reels-side{grid-template-columns:1fr}
 .reel-cap span:last-child{max-width:none}
 .strip{height:84px}
 .ph-a{--pw:clamp(150px,44vw,220px);transform:translate(-80%,-50%) rotate(-5deg)}.ph-b{--pw:clamp(140px,40vw,200px);transform:translate(-12%,-44%) rotate(5deg)}
 .chap.flip .ph-a{transform:translate(-12%,-50%) rotate(5deg)}.chap.flip .ph-b{transform:translate(-88%,-44%) rotate(-5deg)}
 .chap-art:hover .ph-a,.chap-art:hover .ph-b,.chap.flip .chap-art:hover .ph-a,.chap.flip .chap-art:hover .ph-b{transform:none}
 .signpost{width:50%!important;left:24%!important}
 .st-phone{--pw:150px}
 .path{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding-inline:4px}.path a{flex:none}
 .step-tile{width:64px}
 .ticket{flex-direction:column}.ticket-main{border-radius:12px 12px 0 0;-webkit-mask:none;mask:none;padding-right:30px}.ticket-stub{border-radius:0 0 12px 12px;border-left:0;border-top:3px dashed rgba(15,31,29,.5);-webkit-mask:none;mask:none;padding-left:30px}
 .wal-line{flex-direction:column;text-align:center}
 .foot-in{gap:18px}
 .policy-layout{grid-template-columns:1fr;gap:38px;padding-top:28px}.policy-sidebar{position:static;max-height:none;padding-right:0}.policy-contents nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
}
@media(max-width:420px){.policy-contents nav{grid-template-columns:1fr}.hero h1{font-size:92px}.bar-in{gap:10px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
 .ticker-track{animation:none}.js .reveal{opacity:1;transform:none}
}
@media print{.bar,.grain,.tear,.ticker,.scene{display:none}}

/* the crossroads: plan out, activities back */
.cross{margin-top:clamp(20px,3vw,40px);background:var(--cream);padding:clamp(18px,2.4vw,30px);border-radius:8px;box-shadow:0 14px 24px -14px rgba(15,31,29,.5);transform:rotate(-.5deg)}
.cx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(40px,.9fr) minmax(0,1.1fr) minmax(40px,.9fr) minmax(0,1.2fr);align-items:center;gap:6px}
.cx-node{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:13px;line-height:1.25}
.cx-node b{font:400 13px/1.2 var(--label)}
.cx-node .sticker{width:auto;max-height:78px;max-width:100%}
.cx-logo{max-height:46px!important}
.cx-lane{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 20px/1 var(--hand);color:var(--teal-dk);text-align:center}
.cx-line{display:block;width:100%;height:14px;position:relative;background:repeating-linear-gradient(90deg,var(--teal) 0 10px,transparent 10px 20px);background-size:20px 4px;background-repeat:repeat-x;background-position:0 center}
.cx-line::after{content:'';position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-top:4px solid var(--teal);border-right:4px solid var(--teal)}
.cx-go{animation:march 1s linear infinite}.cx-go::after{right:-2px;transform:rotate(45deg)}
.cx-return{animation:march 1s linear infinite reverse}.cx-return::after{left:-2px;transform:rotate(-135deg)}
@keyframes march{to{background-position:20px center}}
.cx-back{margin-top:4px}.cx-back .cx-lane{flex-direction:column}.cx-back .cx-line{background-image:repeating-linear-gradient(90deg,var(--coral) 0 10px,transparent 10px 20px)}.cx-back .cx-line::after{border-color:var(--coral)}.cx-back .cx-lane{color:var(--coral)}
.cx-node.ghost{visibility:hidden;height:0}
@media(max-width:560px){.cx-row{grid-template-columns:1fr .8fr 1fr .8fr 1fr}.cx-lane{font-size:16px}.cx-node b{font-size:11px}}
.change-grid>*,.st-grid>*,.fr-grid>*,.pv-grid>*,.sh-grid>*,.chap>*,.reels>*,.tut-cols>*,.lab>*,.card-session>*{min-width:0}
.strip.week .d b{overflow-wrap:anywhere;hyphens:auto}
html{overflow-x:clip}

.beat-shot{display:none}
.beat-shot .ring{opacity:1;stroke-dashoffset:1}
.beat-shot.in .ring{stroke-dashoffset:0;transition:stroke-dashoffset 1s .5s cubic-bezier(.5,0,.2,1)}
@media(max-width:1080px){.beat-shot{display:block}}
.path{scrollbar-width:none}.path::-webkit-scrollbar{display:none}

/* ?og renders the hero alone at 1200x630 for the social preview image (scripts/og.sh) */
.og .bar,.og .ticker,.og .grain.x,.og .hero-fine,.og .skip{display:none}
.og .hero{min-height:630px;height:630px}
.og .hero-copy{padding-top:38px}
.og .hero h1{font-size:150px}
.og .hero-intro,.og .hero-actions,.og .pretzel-fly{display:none}
.og .hero-sub{font-size:34px;max-width:15em}
.og .h1-swash path{stroke-dashoffset:0}
.og .scene *{animation:none!important}

.legal{display:grid;gap:34px;max-width:720px;border-top:3px dashed rgba(15,31,29,.2);padding-top:40px}
.legal h2{font:400 22px/1.2 var(--label);margin-bottom:10px}.legal p{line-height:1.8}.legal a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
html[lang=de] .hero h1{font-size:clamp(84px,10.6vw,164px)}
.wal-note{left:14cqw;top:-7.6cqw}

:root{--torn1:polygon(0% 1.3%,7.1% 1.7%,14.3% 0%,21.4% 1%,28.6% 0%,35.7% 0.8%,42.9% 1.5%,50% 0.2%,57.1% 2.3%,64.3% 0%,71.4% 1.7%,78.6% 1.6%,85.7% 1.2%,92.9% 0%,99.9% 0%,100% 12.5%,97.8% 25%,100% 37.5%,98.5% 50%,98.6% 62.5%,100% 75%,100% 87.5%,100% 98.2%,92.9% 100%,85.7% 100%,78.6% 100%,71.4% 99.7%,64.3% 97.2%,57.1% 100%,50% 100%,42.9% 97.9%,35.7% 100%,28.6% 100%,21.4% 97.3%,14.3% 100%,7.1% 100%,0% 100%,2.1% 87.5%,1.4% 75%,2.1% 62.5%,0.4% 50%,1.8% 37.5%,1% 25%,0% 12.5%);--torn2:polygon(0% 0%,4.5% 1.5%,9.1% 0%,13.6% 1.4%,18.2% 1.1%,22.7% 1%,27.3% 0%,31.8% 1.7%,36.4% 0%,40.9% 0.8%,45.5% 1%,50% 0.7%,54.5% 0%,59.1% 1.8%,63.6% 0%,68.2% 1.1%,72.7% 0.9%,77.3% 0%,81.8% 0.5%,86.4% 1.7%,90.9% 1.6%,95.5% 0.3%,98.5% 0%,100% 7.7%,99.1% 15.4%,100% 23.1%,100% 30.8%,98.5% 38.5%,100% 46.2%,99.6% 53.8%,99.7% 61.5%,100% 69.2%,98.6% 76.9%,99% 84.6%,100% 92.3%,100% 100%,95.5% 99.6%,90.9% 100%,86.4% 99.1%,81.8% 100%,77.3% 99.4%,72.7% 98.1%,68.2% 99.4%,63.6% 100%,59.1% 99.5%,54.5% 100%,50% 99.5%,45.5% 98.6%,40.9% 99.4%,36.4% 99.2%,31.8% 99.5%,27.3% 99.1%,22.7% 99.6%,18.2% 100%,13.6% 98.2%,9.1% 99.3%,4.5% 99.1%,0.5% 100%,0.8% 92.3%,1.8% 84.6%,1.6% 76.9%,0% 69.2%,1% 61.5%,0% 53.8%,0.8% 46.2%,0.7% 38.5%,1.8% 30.8%,1.1% 23.1%,1.6% 15.4%,1.2% 7.7%)}