/* The front page. Joocy's own look, from the logo: glossy orange juice, a
   green leaf, a warm glow, on fresh cream. Giant condensed headlines with a
   white die-cut edge, puffy tags slapped on like stickers, the app's own
   animated Noto stickers, and juice that splashes wherever you tap.

   One timeline on load (pour, then the hero), driven by CSS so it plays
   even before the script. Everything further down lights up as it comes
   into view (.in, set by landing.js). */

:root{
  --cream:#FFF2E3; --cream2:#FBE5CD; --orange:#FF6A00; --juice:#FF8A00; --deep:#E85500; --mango:#FFB31A; --sun:#FFD23F;
  --leaf:#3FA535; --leaf2:#2C7A27; --ink:#2A1306; --ink2:rgba(42,19,6,.74);
  --display:"Mouse Memoirs","Arial Narrow",Impact,"Helvetica Neue",sans-serif;
  --puffy:"Modak","Arial Rounded MT Bold",system-ui,sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --snap:cubic-bezier(.68,-.6,.27,1.6);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t0:1.75s;
  color-scheme:light;
}
html.skip{--t0:.1s}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top-height,110px) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
main{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font:400 20px/1.2 var(--display);letter-spacing:.012em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* Pictures keep their own proportions: a width set here never squeezes
   one into the height its markup reserved. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
button,input{font:inherit;color:inherit}
button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.icon-arrow,.icon-check{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.icon-check{stroke-width:2.7}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:10px}

/* ---------- the pour: an orange glass, filling with juice ---------- */
.pour{position:fixed;inset:0;z-index:100;background:var(--orange);display:grid;place-items:center;overflow:hidden;animation:pour-out .5s var(--ease) 1.6s forwards}
html.skip .pour{display:none}
.pour-scene{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;width:min(660px,92vw);padding:20px 12px}
.pour-mark{position:relative;display:grid;place-items:center;width:180px;height:160px}
.pour-copy{display:flex;flex-direction:column;align-items:center;gap:8px;font:400 clamp(1.8rem,6vw,4rem)/1.15 var(--puffy);letter-spacing:0;text-align:center;white-space:nowrap}
.pour-line{display:block;opacity:0}
.pour-line > span{display:inline-block}
.pour-bye{color:var(--ink);animation:intro-word .45s var(--pop) .03s forwards}
.pour-hello{animation:intro-word .5s var(--pop) .15s forwards}
.pour-hello > span{padding:.1em .35em .03em;border-radius:24px 30px 22px 28px;background:var(--cream);color:var(--leaf2);box-shadow:0 0 0 3px #fff,0 8px 0 rgba(120,55,10,.12)}
.pour-hello b{font-weight:400}
.pour-caption{margin-top:6px;font:400 clamp(1rem,2vw,1.25rem)/1.1 var(--display);letter-spacing:.08em;color:var(--ink);opacity:0;animation:intro-word .45s var(--ease) .28s forwards}
@keyframes intro-word{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.pour-glint{position:absolute;width:16px;height:16px;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);animation:intro-glint 1.1s ease-in-out infinite alternate;pointer-events:none}
.glint-a{left:6%;top:44%;background:var(--cream);rotate:12deg}
.glint-b{right:6%;bottom:30%;width:12px;height:12px;background:var(--leaf);rotate:-12deg;animation-delay:-.55s}
@keyframes intro-glint{from{opacity:.35;transform:scale(.65) rotate(-12deg)}to{opacity:.9;transform:scale(1.1) rotate(12deg)}}
.pour .drop{position:relative;width:clamp(76px,24vw,96px);height:clamp(76px,24vw,96px);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 7%,rgba(255,255,255,0) 12%),radial-gradient(circle at 60% 66%,#FFC155 0,#FF9A12 38%,#F06A00 72%,#D94E00 100%);
  box-shadow:inset -8px -10px 18px rgba(170,50,0,.45),inset 6px 8px 14px rgba(255,214,140,.55),0 0 0 6px rgba(255,255,255,.95),0 18px 30px rgba(120,30,0,.3);
  animation:bounce .62s cubic-bezier(.3,0,.4,1) infinite alternate,pop-away .35s var(--ease) 1.45s forwards;z-index:2}
@keyframes pop-away{to{scale:2.4;opacity:0}}
.pour .leaf{position:absolute;top:-35.4%;left:47.9%;width:41.7%;height:27.1%;border-radius:0 100% 0 100%;transform:rotate(-28deg);
  background:linear-gradient(135deg,#7BD45F,#3FA535 55%,#2C7A27);box-shadow:inset 2px 2px 4px rgba(255,255,255,.45),0 0 0 3px #fff}
.pour .rise{position:absolute;left:0;right:0;bottom:0;width:100%;height:0;fill:var(--cream);animation:fill 1.5s cubic-bezier(.6,0,.35,1) .05s forwards}
@keyframes bounce{0%{transform:translateY(-40%) scale(.94,1.06)}85%{transform:translateY(23%) scale(1,1)}100%{transform:translateY(31.25%) scale(1.18,.84)}}
@keyframes fill{to{height:122vh}}
@keyframes pour-out{to{opacity:0;visibility:hidden}}
@media (max-height:520px){
  .pour-scene{gap:10px;padding:12px}
  .pour-mark{height:110px}
  .pour .drop{width:64px;height:64px}
  .pour-copy{font-size:clamp(1.65rem,6vw,2.35rem);gap:5px}
  .pour-caption{font-size:1rem}
}

/* ---------- the top ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top)) calc(2.4vw + env(safe-area-inset-right)) 14px calc(2.4vw + env(safe-area-inset-left));transition:background .3s,box-shadow .3s}
.top.stuck{background:rgba(255,242,227,.92);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(42,19,6,.08)}
.mark{flex:none;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo{height:48px;width:auto;filter:drop-shadow(0 4px 8px rgba(255,106,0,.25));transition:transform .4s var(--pop)}
.brandname{font:400 2rem/1 var(--puffy);color:var(--orange)}
.join{position:relative;display:flex;align-items:center;margin-left:auto;padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 3px var(--orange),0 6px 16px rgba(255,106,0,.18)}
.join input{width:12.5ch;padding:.32em .7em;border:0;background:none;font:400 1.35rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.join input::placeholder{letter-spacing:.04em;text-transform:none;color:rgba(42,19,6,.5)}
.join input:focus{outline:none}
.join button{border:0;border-radius:999px;padding:.38em .95em;background:var(--orange);color:#fff;font:400 1.25rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:transform .25s var(--pop)}
.join .note{position:absolute;top:calc(100% + 10px);right:0;width:max-content;max-width:78vw;padding:.4em .8em;border-radius:12px;background:var(--ink);color:#fff;font-size:1rem}
.join .note:empty{display:none}

/* The speaker: sound on or off. Its waves bob with every sound. */
.speaker{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--orange);cursor:pointer;
  box-shadow:0 0 0 3px var(--orange),0 6px 16px rgba(255,106,0,.18);transition:transform .25s var(--pop)}
.speaker svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.speaker .cone{fill:currentColor}
.speaker .w1,.speaker .w2{transform-origin:11px 12px;transition:transform .14s var(--pop)}
.speaker.bob .w1{transform:scale(1.18)}
.speaker.bob .w2{transform:scale(1.3)}
.speaker[aria-pressed="false"]{color:rgba(42,19,6,.45);box-shadow:0 0 0 3px rgba(42,19,6,.25)}
.speaker[aria-pressed="false"] .w1,.speaker[aria-pressed="false"] .w2,.speaker[aria-pressed="true"] .off{display:none}

.pill{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:.42em 1.1em;background:var(--orange);color:#fff;text-decoration:none;font:400 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;white-space:nowrap;
  box-shadow:0 0 0 3px #fff,0 8px 20px rgba(255,106,0,.35);transition:transform .35s var(--pop),box-shadow .3s}
.pill.big{padding:.5em 1.5em;font-size:2.1rem;border-radius:58% 42% 55% 45%/62% 48% 52% 38%}

/* ---------- giant words, with a white die-cut edge ---------- */
.giant{margin:0;font:400 clamp(4.6rem,15vw,15rem)/.8 var(--display);text-transform:uppercase;color:var(--orange);letter-spacing:.004em;text-align:center}
.giant .mask{display:block;overflow:hidden;padding:.07em .1em .03em;margin:-.05em 0}
.giant .ln{display:inline-block;position:relative;z-index:0;transform:translateY(110%)}
.giant .ln::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:#fff;-webkit-text-stroke:.055em #fff;filter:drop-shadow(0 .035em 0 rgba(42,19,6,.14))}
.tag{display:inline-block;font:400 clamp(1.7rem,3vw,2.6rem)/1 var(--puffy);color:var(--orange);letter-spacing:.02em;rotate:-4deg;transform:scale(0);
  text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,0 6px 10px rgba(42,19,6,.15)}
.lede{max-width:30rem;margin:1.6rem auto 2rem;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.12;opacity:0;transform:translateY(18px)}

/* ---------- the hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;padding:110px 3vw 4vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden}
.hero .giant{margin-top:2vh;font-size:clamp(5rem,15.5vw,15rem);white-space:nowrap;z-index:1}
.hero .giant .ln{animation:up 1s var(--pop) var(--t0) forwards}
.hero .t1,.hero .t2{position:absolute;z-index:4;animation:slap .6s var(--snap) forwards}
.hero .t1{top:calc(104px + 2vh);left:14vw;rotate:-9deg;color:var(--leaf2);animation-delay:calc(var(--t0) + .55s)}
.hero .t2{top:calc(104px + 2vh + 10vw);right:11vw;rotate:-7deg;color:var(--leaf);animation-delay:calc(var(--t0) + .75s)}
@keyframes up{to{transform:none}}
@keyframes slap{0%{transform:scale(2.2);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}

.phone{position:relative;z-index:3;margin-top:0vw;width:clamp(240px,17.5vw,290px);padding:18px 16px 20px;border-radius:42px;background:#1E0F07;rotate:-5deg;
  box-shadow:0 0 0 9px #fff,0 0 0 11px rgba(42,19,6,.08),0 34px 60px rgba(42,19,6,.28);
  transform:translateY(60px) scale(.6);opacity:0;animation:rise-in .9s var(--pop) calc(var(--t0) + .3s) forwards}
@keyframes rise-in{to{transform:none;opacity:1}}
.eyes{position:absolute;top:-30px;left:50%;display:flex;gap:10px;margin-left:-52px;z-index:2}
.eyes i{position:relative;width:46px;height:52px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--ink);overflow:hidden;animation:blink 5s infinite}
.eyes i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:20px;margin:-10px 0 0 -9px;border-radius:50%;background:var(--ink);transform:translate(var(--px,0),var(--py,0));transition:transform .12s ease-out}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.pq{margin:22px 4px 12px;color:#fff;font-size:1.65rem;line-height:1;text-transform:uppercase}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{position:relative;display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:16px;background:rgba(255,255,255,.08);color:#fff;font-size:1.3rem;line-height:1;text-align:left;cursor:pointer;overflow:hidden;transition:transform .25s var(--pop)}
.opt img{position:relative;z-index:1;width:32px;height:32px;flex:none}
.opt span{position:relative;z-index:1;flex:1}
.opt em{position:relative;z-index:1;font-style:normal;color:var(--sun)}
.opt i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:inherit;background:linear-gradient(180deg,#FFB548,#FF8A00 55%,#F06A00);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 6px rgba(160,50,0,.35);transition:width .8s var(--pop)}
.opt span,.opt em{text-shadow:0 1px 2px rgba(60,20,0,.55)}
.opt.mine{box-shadow:inset 0 0 0 2px var(--sun)}
.hint{margin-top:12px;color:rgba(255,255,255,.6);font-size:1.05rem;text-align:center}
.pops{position:absolute;inset:0;pointer-events:none}
.pops > .emoji-depth{position:absolute;left:50%;top:40%;width:64px;height:64px;margin:-32px;
  animation:burst 2.2s var(--ease) forwards}
@keyframes burst{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:0}15%{opacity:1}55%{transform:translate(var(--x),var(--y)) scale(1.1) rotate(var(--r))}100%{transform:translate(calc(var(--x) * 1.2),calc(var(--y) + 80px)) scale(.9) rotate(var(--r));opacity:0}}

/* The tour fits the original poll's footprint; only the screen changes. */
.phone-showcase{height:254px;padding-top:8px;display:grid;grid-template-rows:26px minmax(0,1fr) 30px;gap:6px;min-width:0}
.phone-timeline{display:flex;gap:8px;align-items:center;padding:0 4px}
.phone-feature-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.phone-progress{display:flex;align-items:center;flex:1;gap:4px;height:26px}
.phone-progress button{display:grid;align-items:center;flex:1;min-width:0;height:26px;padding:0;border:0;background:none;cursor:pointer}
.phone-progress button > span{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;transition:background .2s}
.phone-progress button[aria-current="true"] > span{background:rgba(255,106,0,.3)}
.phone-progress i{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.phone-progress button.done i{transform:scaleX(1)}
.phone-tour{display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.65);cursor:pointer}
.phone-tour span{width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.phone-tour.is-paused span{width:0;height:0;border:5px solid transparent;border-right:0;border-left:8px solid currentColor;margin-left:2px}
.phone-panels{position:relative;min-width:0;min-height:0;border-radius:12px}
.phone-panel{display:flex;flex-direction:column;height:100%;color:#fff;text-align:left}
.phone-panel[hidden]{display:none}
.phone-showcase .pq{flex:none;margin:6px 4px 8px;font-size:1.4rem;line-height:1;white-space:nowrap}
.phone-showcase .opts{gap:8px}
.phone-showcase .opt{min-height:40px;padding:7px 10px;gap:8px;border-radius:13px;font-size:1.15rem}
.phone-showcase .opt img{width:26px;height:26px}
.phone-showcase .hint{margin:0 3px;color:rgba(255,255,255,.66);font-size:.94rem;line-height:1.05;align-self:end}
.phone-quiz-answers .opt{width:100%}
.phone-quiz-answers .opt b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.1);font-size:.9rem;font-weight:400}
.phone-score-head{display:flex;justify-content:space-between;align-items:center;margin:0 4px 5px;color:var(--sun);font-size:.85rem;text-transform:uppercase}
.phone-score-head button{display:inline-flex;align-items:center;gap:2px;padding:0;border:0;background:none;color:rgba(255,255,255,.75);font-size:inherit;text-decoration:underline;cursor:pointer}
.phone-score-head .icon-arrow{width:.85em;height:.85em}
.phone-scores{display:grid;gap:4px;margin:0;padding:0;list-style:none;counter-reset:place}
.phone-scores li{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.08);font-size:1.1rem;counter-increment:place}
.phone-scores li::before{content:counter(place);color:rgba(255,255,255,.5);font-size:.85rem}
.phone-scores li.you{background:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.phone-scores li.you::before{color:#fff}
.phone-scores b{margin-left:auto;color:var(--sun);font-weight:400}
.phone-cloud{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:2px 10px;padding:2px 5px;overflow:hidden;line-height:1}
.phone-cloud span{max-width:100%;overflow-wrap:anywhere;color:var(--sun)}
.phone-cloud span:nth-child(3n){color:#FFAA76;rotate:-6deg}
.phone-cloud span:nth-child(3n + 1){color:#FFF2E3;rotate:4deg}
.phone-cloud span.fresh{color:#A7E183}
.phone-word-form{display:flex;flex:none;gap:5px;height:36px;margin-top:6px}
.phone-word-form input{width:0;flex:1;min-width:0;padding:4px 10px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:16px;line-height:1}
.phone-word-form input::placeholder{color:rgba(255,255,255,.55)}
.phone-word-form button{display:grid;place-items:center;flex:none;width:34px;border:0;border-radius:10px;background:var(--orange);color:#fff;font-size:1.3rem;cursor:pointer}
.phone-word-form .icon-arrow{width:20px;height:20px}
.phone-questions{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.phone-questions li{display:flex;align-items:center;gap:8px;min-height:63px;padding:7px 9px;border-radius:12px;background:rgba(255,255,255,.08);font-size:1.1rem;line-height:1.05}
.phone-questions li > span{flex:1}
.phone-questions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:none;width:32px;min-height:38px;padding:3px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:var(--sun);font-size:1rem;line-height:1;cursor:pointer}
.phone-questions button::before{content:"";border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor}
.phone-questions button[aria-pressed="true"]{background:var(--orange);color:#fff}

.bigmark{position:relative;z-index:4;width:clamp(220px,21vw,340px);margin-top:-3vw;rotate:-3deg;filter:drop-shadow(0 14px 24px rgba(255,106,0,.35));transform:scale(0);animation:slap .7s var(--snap) calc(var(--t0) + .95s) forwards}
.film-play{position:relative;z-index:5;display:grid;place-items:center;flex:none;width:54px;height:54px;margin-top:10px;padding:0;border:0;border-radius:50%;background:var(--orange);color:#fff;cursor:pointer;
  box-shadow:0 0 0 4px #fff,0 8px 18px rgba(255,106,0,.25);opacity:0;animation:fade .7s var(--ease) calc(var(--t0) + 1.25s) forwards;transition:transform .25s var(--pop),box-shadow .25s}
.film-play span{width:0;height:0;margin-left:4px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor}
.corner{position:absolute;bottom:3vh;max-width:min(20rem,28vw);font-size:1.35rem;line-height:1.1;opacity:0;animation:fade .8s var(--ease) calc(var(--t0) + 1.2s) forwards}
.corner.l{left:3vw}
.corner.r{right:3vw}
.hero .corner.l{text-align:left;align-self:start}
.hero .corner.r{text-align:right;align-self:end}
@keyframes fade{to{opacity:1}}

/* ---------- sections that light up as they come into view ---------- */
section{position:relative;padding:14vh 4vw;padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right));text-align:center}
section .giant .ln{transition:transform 1s var(--pop) calc(.15s + var(--i,0) * .12s)}
section .tag{transition:transform .55s var(--snap)}
section .lede{transition:opacity .7s var(--ease) .35s,transform .7s var(--ease) .35s}
section > .pill{transform:scale(0);transition:transform .6s var(--snap) .5s}
section.in .giant .ln,section.in .tag,section.in > .pill{transform:none}
section.in .lede{opacity:1;transform:none}

/* A separate, soft ground shadow keeps depth without filtering WebP frames. */
.emoji-depth{position:relative;display:inline-block;aspect-ratio:1;line-height:0;isolation:isolate}
.emoji-depth::before{content:"";position:absolute;z-index:-1;left:-14%;right:-14%;bottom:-15%;height:60%;border-radius:50%;background:radial-gradient(ellipse,rgba(42,19,6,.18),rgba(42,19,6,.06) 42%,transparent 72%);opacity:var(--emoji-depth,1);pointer-events:none}
.emoji-depth > img{display:block;width:100%;height:100%;object-fit:contain}
.sticker{position:absolute;width:clamp(80px,9vw,120px)}
.s-hands{top:12vh;right:8vw;rotate:12deg}
.float{position:absolute;width:clamp(64px,7vw,104px);z-index:2;animation:bob 5s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-16px) rotate(6deg)}}
.hero .float{opacity:0;animation:fade .8s var(--ease) calc(var(--t0) + 1.3s) forwards,bob 5s ease-in-out calc(var(--t0) + 2s) infinite alternate}
.fl-a{left:4vw;top:56%;rotate:-14deg}
.fl-b{right:5vw;top:62%;rotate:10deg;animation-delay:-2s}
.fl-c{left:5vw;top:12%;rotate:-8deg}
.fl-d{right:6vw;top:16%;rotate:12deg;animation-delay:-1.5s}
.fl-e{left:12vw;bottom:12%;rotate:6deg;animation-delay:-3s}

/* The fan: juicy little postcards, each with its own flavour. */
.fan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(20px,2.6vw,38px);max-width:1120px;margin:8vh auto 0;perspective:1200px}
.card{--card-bg:#FFF0DD;--card-rim:#F3CFAB;--card-ink:#B94B00;position:relative;min-width:0;min-height:360px;padding:26px 22px 28px;border:1px solid rgba(255,255,255,.9);border-radius:32px 38px 30px 34px;text-align:left;
  background:radial-gradient(ellipse at 15% 0,rgba(255,255,255,.9),transparent 65%),var(--card-bg);
  box-shadow:0 0 0 5px #fff,0 7px 0 5px var(--card-rim),0 24px 40px -8px rgba(116,55,10,.18),inset 0 2px 0 #fff;transform:translateY(80px) rotate(0) scale(.8);opacity:0;
  transition:transform .9s var(--pop),opacity .5s,box-shadow .3s}
.c2{--card-bg:#F0F5DE;--card-rim:#D5E2B6;--card-ink:var(--leaf2);border-radius:36px 30px 38px 32px}
.c3{--card-bg:#FFF3C5;--card-rim:#EDD494;--card-ink:#925600;border-radius:38px 32px 34px 30px}
.card-head{position:relative;margin-bottom:22px;padding-right:66px}
.card h3{margin:0;font:400 clamp(1.15rem,1.65vw,1.5rem)/1.12 var(--puffy);text-wrap:balance;color:var(--card-ink)}
.card-sticker{--emoji-depth:.6;position:absolute;top:-4px;right:-4px;width:64px;rotate:10deg}
.c2 .card-sticker{rotate:-9deg}
.c3 .card-sticker{rotate:7deg}
.in .c1{transform:rotate(-4deg);opacity:1;transition-delay:.3s}
.in .c2{transform:translateY(22px) rotate(1.5deg);opacity:1;transition-delay:.42s}
.in .c3{transform:rotate(4deg);opacity:1;transition-delay:.54s}
.bars{display:flex;flex-direction:column;gap:18px}
.bar{display:grid;grid-template-columns:46px minmax(0,1fr) 30px;align-items:center;gap:10px;font-size:1.4rem}
.bar .emoji-depth{--emoji-depth:.4;width:46px;height:46px}
.bar s{height:30px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:inset 0 2px 5px rgba(116,55,10,.06);overflow:hidden;text-decoration:none}
.bar s i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:linear-gradient(180deg,#FFB548,var(--orange));box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 5px rgba(160,50,0,.16);transition:width .9s var(--pop)}
.bar b{font-weight:400;font-variant-numeric:tabular-nums;text-align:right;color:var(--card-ink)}
.qa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qa li{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:18px;background:rgba(255,255,255,.7);font-size:1.2rem;line-height:1.15;box-shadow:inset 0 1px 0 #fff}
.qa li.leading{background:#E1EDC4;box-shadow:inset 0 0 0 2px rgba(63,165,53,.28)}
.qa button{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:14px;background:#fff;color:var(--leaf2);font-size:1.15rem;cursor:pointer;box-shadow:0 3px 0 rgba(44,122,39,.1);transition:transform .2s var(--pop),background .2s}
.qa button::before{content:"";border:6px solid transparent;border-bottom:8px solid currentColor;margin-top:-6px}
.qa button.on{background:var(--leaf2);color:#fff}
.words{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px 10px;min-height:210px}
.words span{font:400 1rem/1 var(--puffy);transition:font-size .6s var(--pop)}
.words span:nth-child(4n+1){color:#C44F00;rotate:-3deg}
.words span:nth-child(4n+2){color:var(--leaf2);rotate:3deg}
.words span:nth-child(4n+3){color:#925600;rotate:-2deg}
.words span:nth-child(4n+4){color:#693712;rotate:2deg}
.words span.new{animation:slap .5s var(--snap)}

/* ---------- edges between colours ----------
   Most are waves. Two melt: the colour above drips into the one below,
   and the drips stretch as the edge scrolls through the screen (--melt).
   One splashes: the colour below leaps up as it arrives. landing.js draws
   the melts and the splash at their real width, so drops stay round. */
.wave{display:block;width:100%;height:clamp(50px,8vw,120px);margin:-1px 0;background:var(--cream)}
.to-orange path,.from-orange path{fill:var(--orange)}
.to-mango path,.from-mango path{fill:var(--mango)}
.wave path{animation:sway 9s ease-in-out infinite alternate;transform-origin:center}
.wave.water path{animation:none}
@keyframes sway{to{transform:scaleX(1.08) translateX(-2%)}}

.edge{position:relative;height:clamp(90px,12vw,180px);margin:-1px 0;z-index:2}
.edge svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.melt .drip{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(clamp(.18,calc(var(--melt,0) * var(--s,1)),1));transition:transform .25s ease-out}
.melt .shine{transform-box:view-box;transform:scaleY(clamp(.18,calc(var(--melt,0) * var(--s,1)),1));transition:transform .25s ease-out}
.melt .drop{opacity:0}
.melt.dripping .drop{animation:plop 2.6s cubic-bezier(.55,0,1,.45) infinite;animation-delay:var(--d,0s)}
@keyframes plop{0%{transform:translateY(0) scale(.6);opacity:0}8%{opacity:1}70%{opacity:1}100%{transform:translateY(var(--fall,120px)) scale(.9);opacity:0}}

.splashy{height:clamp(110px,15vw,230px)}
.splashy .jet{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.splashy .bead{opacity:0}
.splashy.go .jet{animation:shoot .9s var(--pop) var(--d,0s) forwards,surge 2.6s ease-in-out calc(var(--d,0s) + .9s) infinite alternate}
.splashy.go .fly{animation:drift 2.4s linear var(--d,0s) infinite}
.splashy.go .bead{animation:leap 2.4s var(--d,0s) infinite}
.splashy.rest .jet,.splashy.rest .fly,.splashy.rest .bead{animation-play-state:paused}
.splashy.still .jet{transform:none}
@keyframes shoot{0%{transform:scaleY(0)}65%{transform:scaleY(1.15)}100%{transform:scaleY(1)}}
@keyframes surge{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes drift{85%,100%{transform:translateX(var(--dx,0px))}}
@keyframes leap{
  0%{transform:translateY(0);opacity:0;animation-timing-function:cubic-bezier(.2,.75,.45,1)}
  8%{opacity:1}
  45%{transform:translateY(calc(var(--up,60px) * -1));animation-timing-function:cubic-bezier(.55,0,.8,.25)}
  85%{transform:translateY(0);opacity:1}
  100%{transform:translateY(0);opacity:0}}

/* ---------- everything, riding a wave ---------- */
.all{position:relative;background:var(--orange);padding:5vh 0 2vh;overflow:hidden;text-align:left}
.allword{position:relative;z-index:3;display:inline-block;margin:0 0 0 4vw;font:400 clamp(3.6rem,9vw,8.5rem)/.9 var(--puffy);color:var(--cream);rotate:-5deg;
  text-shadow:4px 0 var(--deep),-4px 0 var(--deep),0 4px var(--deep),0 -4px var(--deep),3px 3px var(--deep),-3px -3px var(--deep),3px -3px var(--deep),-3px 3px var(--deep),0 10px 18px rgba(120,30,0,.3)}
.ride{position:relative;height:clamp(150px,15vw,200px);margin-top:-2.5vw;cursor:grab;touch-action:pan-y;user-select:none}
.ride .p{position:absolute;left:0;top:50%;flex:none;width:max-content}
.ride .p span{display:inline-flex;align-items:center;width:max-content;gap:.45em;margin-top:-.9em;padding:.32em .95em .32em .4em;border-radius:999px;color:#fff;font:400 clamp(1.4rem,2.2vw,2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 0 0 5px #fff,0 14px 24px rgba(120,30,0,.25);transition:transform .35s var(--pop)}
.ride .p img{flex:none;width:1.9em;height:1.9em;margin:-.3em 0}
.ride .p:nth-child(5n+1) span{background:var(--deep)}
.ride .p:nth-child(5n+2) span{background:var(--leaf)}
.ride .p:nth-child(5n+3) span{background:#7E57C2}
.ride .p:nth-child(5n+4) span{background:#1E88E5}
.ride .p:nth-child(5n+5) span{background:var(--ink)}

/* ---------- the presenter (say) ---------- */
.say .tag{color:var(--leaf);text-shadow:3px 0 var(--leaf2),-3px 0 var(--leaf2),0 3px var(--leaf2),0 -3px var(--leaf2),2px 2px var(--leaf2),-2px -2px var(--leaf2),2px -2px var(--leaf2),-2px 2px var(--leaf2)}

/* ---------- the audience ---------- */
.crowd{background:var(--orange);color:var(--cream);padding-bottom:16vh}
.crowd .giant{color:var(--cream)}
.crowd .giant .ln::before{color:var(--deep);-webkit-text-stroke-color:var(--deep);filter:none}
.crowd .tag{color:var(--sun);text-shadow:3px 0 var(--deep),-3px 0 var(--deep),0 3px var(--deep),0 -3px var(--deep),2px 2px var(--deep),-2px -2px var(--deep),2px -2px var(--deep),-2px 2px var(--deep)}
.cheer{display:flex;align-items:flex-end;justify-content:center;gap:4vw;margin-top:4vh;flex-wrap:wrap}
.jar{position:relative;width:clamp(240px,26vw,340px);height:clamp(260px,28vw,360px);border-radius:26px;background:rgba(255,242,227,.14);box-shadow:inset 0 0 0 6px rgba(255,242,227,.9),0 24px 40px rgba(120,30,0,.25);overflow:hidden}
.jar::before{content:"";position:absolute;top:-6px;left:10%;right:10%;height:22px;border-radius:999px;background:var(--cream);opacity:.9}
.jar .ball{position:absolute;left:0;bottom:0;width:var(--d);height:var(--d);will-change:transform}
.jar .ball i{display:block;width:100%;height:100%}
.jar .ball img{width:100%;height:100%}
.tally{position:absolute;top:28px;left:0;right:0;z-index:2;font-size:1.3rem;color:var(--cream)}
.tally b{font:400 2.4rem/1 var(--puffy);display:block;color:var(--sun);text-shadow:0 3px 0 var(--deep)}
.cheers{display:grid;grid-template-columns:repeat(3,auto);gap:12px}
.cheers button{width:clamp(72px,7vw,96px);height:clamp(72px,7vw,96px);padding:6px;border:0;border-radius:50%;background:var(--cream);cursor:pointer;
  box-shadow:0 0 0 5px #fff,0 12px 20px rgba(120,30,0,.25);transition:transform .3s var(--pop)}
.cheers button img{width:100%;height:100%}
.cheers p{grid-column:1/-1;margin-top:6px;font:400 1.6rem/1 var(--puffy);color:var(--sun)}
.crowd .corner{bottom:6vh;opacity:1;animation:none;color:var(--cream);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;max-width:none}

/* ---------- your deck ---------- */
.deck{min-height:92vh;overflow:hidden}
.file{position:absolute;padding:.5em 1em;border-radius:14px;color:#fff;font:400 clamp(1.3rem,2.2vw,2rem)/1 var(--puffy);letter-spacing:.02em;
  box-shadow:0 0 0 5px #fff,0 16px 26px rgba(42,19,6,.18);transition:rotate .4s var(--pop);will-change:transform}
.f1{left:7vw;top:20vh;background:#E53935;rotate:-12deg}
.f2{right:8vw;top:16vh;background:#1E88E5;rotate:9deg}
.f3{left:10vw;bottom:16vh;background:var(--deep);rotate:7deg}
.f4{right:6vw;bottom:20vh;background:#F9A825;rotate:-8deg}
.f5{left:44vw;bottom:6vh;background:#7E57C2;rotate:-4deg}

.deck .tag{margin-bottom:22px;color:var(--leaf);text-shadow:3px 0 var(--leaf2),-3px 0 var(--leaf2),0 3px var(--leaf2),0 -3px var(--leaf2),2px 2px var(--leaf2),-2px -2px var(--leaf2),2px -2px var(--leaf2),-2px 2px var(--leaf2)}

/* ---------- bring your AI: a chat, a freshly squeezed deck ---------- */
.to-ai path{fill:#E1EDC4}
.wave.ai-to-mango{background:#E1EDC4}
.ai{background:#E1EDC4;padding:10vh 5vw 12vh;overflow:hidden}
.ai-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:6vw;max-width:1280px;margin:0 auto}
.ai-copy{align-self:center;text-align:left}
.ai .tag{font-size:clamp(1.3rem,2.2vw,2rem);color:var(--leaf2);margin-bottom:28px}
.ai .giant{font-size:clamp(5rem,8.8vw,8.5rem);text-align:left}
.ai .giant .mask{margin-left:-.1em}
.ai .lede{max-width:27rem;margin:1.8rem 0 1.4rem;font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.2;text-wrap:pretty}
.ai-inline-spark{display:inline-block;width:.8em;height:.8em;vertical-align:-.06em;fill:currentColor}
.ai-note{font-size:1.15rem;line-height:1.3;color:var(--leaf2);opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) .5s,transform .6s var(--ease) .5s}
.ai-note span{display:inline-block;margin-top:8px;font-size:1.3rem;color:var(--ink)}
.ai.in .ai-note{opacity:1;transform:none}
.ai-studio{min-width:0;opacity:0;transform:translateY(28px) rotate(2deg);transition:opacity .7s var(--ease) .2s,transform .8s var(--pop) .2s}
.ai.in .ai-studio{opacity:1;transform:none}
.ai-controls{position:relative;z-index:2;transform:translateY(108px);transition:transform .85s var(--ease)}
.ai-studio:not([data-phase="idle"]) .ai-controls{transform:none}
.ai-preview-label{margin:0 0 20px;color:var(--leaf2);font-size:1.15rem}
.ai-tools{display:flex;justify-content:center;gap:clamp(16px,3vw,36px);margin-bottom:24px}
.ai-tool{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:60px;padding:0;border:0;background:none;font-size:1.1rem;cursor:pointer}
.ai-tool-mark{display:grid;place-items:center;width:66px;height:66px;border-radius:22px;background:#fff;box-shadow:0 5px 0 rgba(44,122,39,.12),0 10px 20px rgba(44,122,39,.08);rotate:-5deg;transition:transform .3s var(--pop),rotate .3s var(--pop),box-shadow .3s}
.ai-tool:nth-child(even) .ai-tool-mark{rotate:5deg}
.ai-tool-mark img{width:36px;height:36px}
.ai-tool-mark svg{width:36px;height:36px;fill:none;stroke:var(--leaf2);stroke-width:4;stroke-linecap:round}
.ai-tool[aria-pressed="true"] .ai-tool-mark{box-shadow:0 0 0 3px var(--orange),0 0 0 7px #fff,0 10px 20px rgba(44,122,39,.12);rotate:0deg}
.ai-requests{position:relative;z-index:2;display:grid;gap:12px}
.ai-request{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 18px;border:0;border-radius:22px;background:rgba(255,255,255,.65);color:var(--ink);text-align:left;font-size:clamp(1.2rem,1.8vw,1.5rem);cursor:pointer;box-shadow:inset 0 0 0 2px #fff;transition:transform .25s var(--pop),background .25s,box-shadow .25s}
.ai-request-number{flex:none;font-size:1rem;color:var(--leaf2)}
.ai-request-arrow{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:auto;color:var(--leaf2);transition:transform .25s var(--pop)}
.ai-request-arrow .icon-arrow{width:24px;height:24px}
.ai-request[aria-pressed="true"]{background:var(--cream);box-shadow:0 0 0 3px #fff,0 8px 16px rgba(44,122,39,.1)}
.ai-request[aria-pressed="true"] .ai-request-arrow{border-radius:50%;background:var(--orange);color:#fff}
.ai-output{position:relative;width:min(360px,78%);height:280px;margin:58px auto 12px}
/* Hidden output still reserves its space, so juicing never grows the section. */
.ai-output[hidden]{display:block;visibility:hidden}
.ai-result{position:relative;display:flow-root}
.ai-working{position:absolute;inset:58px 0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;opacity:0;visibility:hidden;transform:translateY(-12px) scale(.9);transition:opacity .2s var(--ease),transform .3s var(--pop);pointer-events:none}
.ai-studio[data-phase="working"] .ai-working{opacity:1;visibility:visible;transform:none}
.ai-working-juice{position:relative;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 6%,transparent 13%),radial-gradient(circle at 40% 30%,#FFBE46,var(--orange) 65%,var(--deep));box-shadow:inset -5px -6px 10px rgba(170,50,0,.18),0 0 0 4px #fff,0 12px 20px rgba(44,122,39,.12)}
.ai-working-juice::before{content:"";position:absolute;top:-15px;left:31px;width:27px;height:17px;border-radius:0 100% 0 100%;background:var(--leaf);rotate:-28deg;box-shadow:0 0 0 3px #fff}
.ai-working-drops{display:flex;gap:9px}
.ai-working-drops i{width:8px;height:11px;border-radius:50%;background:var(--orange)}
.ai-studio[data-phase="working"] .ai-working-juice{animation:ai-press .48s ease-in-out infinite}
.ai-studio[data-phase="working"] .ai-working-drops i{animation:ai-dribble .55s ease-in-out infinite}
.ai-working-drops i:nth-child(2){animation-delay:.12s!important}
.ai-working-drops i:nth-child(3){animation-delay:.24s!important}
@keyframes ai-press{50%{transform:translateY(4px) scale(1.12,.82)}}
@keyframes ai-dribble{0%,100%{opacity:.2;transform:translateY(-4px) scale(.7)}50%{opacity:1;transform:translateY(7px) scale(1)}}
.ai-swoop{position:absolute;left:-56px;top:-57px;width:72px;height:78px;fill:none;stroke:var(--leaf2);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ai-slide{position:absolute;inset:12px 0 22px;border-radius:20px;box-shadow:0 0 0 5px #fff,0 14px 26px rgba(44,122,39,.14)}
.ai-slide-back{padding:18px 24px;text-align:right;font-size:1.2rem;background:var(--cream);color:var(--leaf2);transform-origin:50% 90%;transition:transform .55s var(--pop)}
.ai-slide-back i{display:block;width:60%;height:9px;margin-top:14px;border-radius:8px;background:rgba(44,122,39,.15)}
.back-one{transform:rotate(-8deg) translate(-18px,-4px)}
.back-two{background:var(--mango);transform:rotate(9deg) translate(18px,-14px)}
.ai-slide-front{padding:22px 24px 18px;background:var(--orange);color:var(--cream);text-align:left;rotate:-2deg}
.ai-slide-kicker{display:block;position:relative;z-index:1;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.ai-cover strong,.ai-quiz strong{display:block;margin-top:16px;font:400 clamp(2.3rem,3.5vw,3rem)/.95 var(--display);letter-spacing:.01em}
.ai-cover .emoji-depth{--emoji-depth:.35;position:absolute;right:18px;bottom:48px;width:86px;height:86px;rotate:8deg}
.ai .emoji-depth picture,.ai .emoji-depth img{display:block;width:100%;height:100%;object-fit:contain}
.ai-slide-footer{display:block;max-width:calc(100% - 82px);margin-top:36px;font-size:1rem;line-height:1.15}
.ai-quiz{display:none}
.ai-quiz strong{margin:14px 0;font-size:2.1rem}
.ai-quiz-answer{display:flex;align-items:center;gap:10px;margin-top:7px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.65);font-size:.95rem;color:var(--leaf2)}
.ai-quiz-answer b{font-weight:400;color:var(--ink);font-size:1.15rem}
.ai-quiz-answer.correct{background:var(--leaf2);color:#fff}
.ai-quiz-answer.correct b{color:#fff}
.ai-quiz-answer > .icon-check{flex:none;width:1.2em;height:1.2em;margin-left:auto}
.ai-stamp{position:absolute;z-index:1;bottom:4px;right:-22px;display:inline-flex;align-items:center;gap:5px;padding:10px 14px 8px;border-radius:14px;background:var(--leaf2);color:#fff;box-shadow:0 0 0 4px #fff,0 8px 14px rgba(44,122,39,.15);font:400 1.1rem/1 var(--puffy);rotate:-7deg}
.ai-stamp .icon-check{flex:none;width:.9em;height:.9em}
.ai-spark{--emoji-depth:.25;position:absolute;right:-42px;top:-28px;width:72px;height:72px;pointer-events:none}
.ai-output[data-mode="edit"] .ai-slide-front{background:var(--cream);color:var(--ink)}
.ai-output[data-mode="edit"] .ai-cover{display:none}
.ai-output[data-mode="edit"] .ai-quiz{display:block}
.ai-output[data-mode="edit"] .back-one{transform:rotate(-11deg) translate(-22px,-8px)}
.ai-output[data-mode="edit"] .back-two{transform:rotate(12deg) translate(22px,-18px)}
.ai-status{min-height:2.4em;max-width:25rem;margin:20px auto 0;font-size:1.2rem;line-height:1.2;color:var(--leaf2);text-wrap:balance}
@media (prefers-reduced-motion:reduce){.to-ai path,.ai-to-mango path,.ai-working-juice,.ai-working-drops i{animation:none!important}.ai-controls{transition:none!important}}

/* ---------- anywhere ---------- */
.anywhere{background:var(--mango)}
.anywhere .giant{color:var(--cream)}
.anywhere .giant .ln::before{color:var(--deep);-webkit-text-stroke-color:var(--deep);filter:none}
.anywhere .tag{color:#fff;text-shadow:3px 0 var(--deep),-3px 0 var(--deep),0 3px var(--deep),0 -3px var(--deep),2px 2px var(--deep),-2px -2px var(--deep),2px -2px var(--deep),-2px 2px var(--deep)}
.badges{list-style:none;margin:8vh 0 0;padding:0;display:flex;justify-content:center;gap:3vw;flex-wrap:wrap}
.badges li{width:clamp(220px,22vw,280px);aspect-ratio:1;border-radius:50%;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:26px;font-size:1.25rem;line-height:1.05;
  box-shadow:0 0 0 7px #fff,0 22px 36px rgba(120,60,0,.22);transform:scale(0) rotate(-20deg);transition:transform .7s var(--pop)}
.badges li:nth-child(2){transition-delay:.12s}
.badges li:nth-child(3){transition-delay:.24s}
.in .badges li{transform:rotate(-5deg)}
.in .badges li:nth-child(2){transform:rotate(4deg) translateY(20px)}
.in .badges li:nth-child(3){transform:rotate(-3deg)}
.badges img{width:84px;height:84px}
.badges b{font:400 1.75rem/1 var(--display);text-transform:uppercase;color:var(--orange)}

/* ---------- the end ---------- */
.last{padding:18vh 4vw 16vh;overflow:hidden}
.last .pill{margin-top:5vh}
.aside{margin-top:3vh;font-size:1.35rem;color:var(--ink2)}
.foot{position:relative;padding:8vh 3vw env(safe-area-inset-bottom);text-align:center;overflow:hidden}
.foot nav{display:flex;justify-content:center;gap:28px;font-size:1.45rem;text-transform:uppercase;letter-spacing:.04em}
.foot nav a{text-decoration:none}
.foot p{margin:12px 0 16px;color:var(--ink2);font-size:1.15rem}
.foot-orange{display:inline-block;width:1em;height:1em;vertical-align:-.16em}
.foot-orange circle{fill:var(--orange)}
.foot-orange path{fill:var(--leaf)}
.foot-orange .glint{fill:#FFD27A}
.endmark{position:relative;z-index:2;width:min(86vw,1120px);margin:0 auto;filter:drop-shadow(0 0 50px rgba(255,255,255,1)) drop-shadow(0 0 200px rgba(255,255,255,.98)) drop-shadow(0 18px 26px rgba(116,55,10,.06));pointer-events:none}

/* ---------- the footer's pit: everything, to throw about ----------
   The balls roll about behind the logo; the top of the pit is a ceiling
   they bounce off, so nothing slides under the links above. */
.pit{position:relative;display:flex;flex-direction:column;justify-content:flex-end;margin:10px -3vw 0;padding:clamp(28px,4vw,64px) 0 0}
.playground{position:absolute;inset:0;z-index:1;touch-action:pan-y}
.playground .ball{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;cursor:grab;user-select:none;touch-action:none;will-change:transform;
  box-shadow:0 0 0 5px #fff,0 14px 22px rgba(42,19,6,.2)}
.playground .ball img{width:52%;height:52%;pointer-events:none}
.playground .ball b{max-width:86%;margin-top:2%;font:400 1em/.95 var(--display);text-align:center;text-transform:uppercase;letter-spacing:.04em;color:#fff;text-shadow:0 1px 2px rgba(60,20,0,.4);pointer-events:none}
.playground .ball:nth-child(5n+1){background:var(--orange)}
.playground .ball:nth-child(5n+2){background:var(--leaf)}
.playground .ball:nth-child(5n+3){background:#7E57C2}
.playground .ball:nth-child(5n+4){background:#1E88E5}
.playground .ball:nth-child(5n+5){background:var(--ink)}

/* A cheer on its way to the jar. */
.flying{position:fixed;left:0;top:0;z-index:60;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none}

/* ---------- juice, wherever you tap ---------- */
.splash{position:fixed;inset:0;z-index:90;width:100%;height:100%;pointer-events:none}

/* ---------- the hero's film ---------- */
html.film-open,html.early-open{overflow:hidden}
.film{position:fixed;inset:0;width:calc(100vw - clamp(64px,4vw,72px));height:calc(100dvh - clamp(64px,4vh,80px));max-width:none;max-height:none;margin:auto;padding:12px;border:0;border-radius:32px;background:var(--cream);color:var(--ink);box-shadow:0 0 0 6px #fff,0 30px 90px rgba(42,19,6,.3);overflow:visible}
.film[open]{display:flex;flex-direction:column;animation:film-in .32s var(--pop)}
@keyframes film-in{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
.film::backdrop{background:rgba(42,19,6,.78);backdrop-filter:blur(12px)}
.film-close{position:absolute;top:-22px;right:-22px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--orange);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 0 0 3px #fff;transition:transform .2s var(--pop)}
.film-screen{flex:1;min-height:0;overflow:hidden;border-radius:22px;background:var(--ink)}
.film-screen iframe{display:block;width:100%;height:100%;border:0}
.film-native{position:fixed;inset:0;z-index:96;width:100%;height:100%;border:0;background:#000}

/* ---------- early access ---------- */
.modal{position:fixed;inset:0;z-index:95;display:grid;justify-items:center;align-items:center;align-items:safe center;padding:16px;overflow-y:auto;overscroll-behavior:contain;background:rgba(42,19,6,.45);backdrop-filter:blur(6px);animation:fade .25s var(--ease)}
.modal[hidden]{display:none}
.sheet{position:relative;width:min(440px,100%);padding:30px 26px 24px;border-radius:30px;background:var(--cream);text-align:center;box-shadow:0 0 0 7px #fff,0 30px 70px rgba(42,19,6,.35);animation:slap .55s var(--snap)}
.sheet .tag{transform:none;font-size:1.7rem}
.sheet h3{margin:6px 0 8px;font:400 3rem/.9 var(--display);text-transform:uppercase;color:var(--orange)}
.sheet p{margin-bottom:18px;font-size:1.3rem;line-height:1.1;color:var(--ink2)}
.sheet label{display:block;margin-bottom:14px;text-align:left;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em}
.sheet label small{text-transform:none;color:var(--ink2);margin-left:4px}
.sheet input{display:block;width:100%;margin-top:6px;padding:.55em .9em;border:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--cream2);font:400 1.3rem/1 system-ui,sans-serif;letter-spacing:0}
.sheet input:focus{outline:none;box-shadow:inset 0 0 0 3px var(--orange)}
.sheet .pill{width:100%;margin-top:8px}
.sheet .note{min-height:1.2em;margin:10px 0 0;color:var(--deep);font-size:1.15rem}
.sheet [data-done] img{width:96px;height:96px;margin:0 auto}
.sheet .x{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Hover belongs to a mouse; touch keeps its pressed feedback. */
@media (hover:hover) and (pointer:fine){
  .mark:hover .logo{transform:rotate(-4deg) scale(1.05)}
  .join button:hover{transform:scale(1.08) rotate(-3deg)}
  .speaker:hover{transform:rotate(-8deg) scale(1.08)}
  .pill:hover{transform:rotate(-4deg) scale(1.07);box-shadow:0 0 0 3px #fff,0 12px 26px rgba(255,106,0,.45)}
  .phone-progress button:hover > span{background:rgba(255,255,255,.3)}
  .film-play:hover{transform:scale(1.38) rotate(-4deg);box-shadow:0 0 0 4px #fff,0 12px 24px rgba(255,106,0,.35)}
  .in .card:hover{transform:translateY(-8px) rotate(0) scale(1.015);transition-delay:0s}
  .ride .p span:hover{transform:scale(1.14) rotate(-4deg)}
  .cheers button:hover{transform:translateY(-6px) rotate(-8deg) scale(1.06)}
  .file:hover{rotate:0deg!important}
  .ai-tool:hover .ai-tool-mark{transform:translateY(-5px);rotate:0deg}
  .ai-request:hover{transform:translateX(4px);background:#fff}
  .ai-request:hover .ai-request-arrow{transform:rotate(12deg)}
  .in .badges li:hover{transform:scale(1.07) rotate(0);transition-delay:0s}
  .foot nav a:hover{color:var(--orange)}
  .film-close:hover{transform:rotate(-8deg) scale(1.06)}
}

/* Press feedback follows hover for both mouse and touch. */
.speaker:active{transform:scale(.92)}
.pill:active{transform:scale(.94)}
.opt:active{transform:scale(.95)}
.film-play:active{transform:scale(.94)}
.qa button:active{transform:scale(.88)}
.ride:active{cursor:grabbing}
.cheers button:active{transform:scale(.86)}
.ai-tool:active .ai-tool-mark{transform:scale(.93)}
.ai-request:active{transform:scale(.98)}
.foot nav a:active{color:var(--orange)}
.playground .ball:active{cursor:grabbing}
.film-close:active{transform:scale(.94)}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:24px;min-height:0;padding:clamp(64px,10svh,104px) max(6vw,16px)}
  .deck > .tag,.deck > .giant,.deck > .lede{grid-column:1 / -1}
  .deck .tag{justify-self:center;margin:0;font-size:clamp(1.2rem,4.6vw,2.2rem)}
  .deck .lede{margin:8px auto 18px}
  .deck .file{position:static;justify-self:center;align-self:center;width:max-content;max-width:100%;font-size:clamp(.9rem,3.8vw,1.3rem);transform:none!important;will-change:auto}
  .deck .f5{grid-column:1 / -1}
}
@media (max-width:820px){
  .top{flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));gap:8px;transition:background .3s,box-shadow .3s,row-gap .24s ease}
  .logo{height:38px}
  .join{order:3;flex:1 0 100%;min-width:0;min-height:44px;max-height:60px;margin:0;transition:max-height .24s ease,min-height .24s ease,opacity .18s ease,transform .24s ease}
  .top.past-hero{row-gap:0}
  .top.past-hero .join{min-height:0;max-height:0;padding-block:0;opacity:0;transform:translateY(-10px);overflow:hidden;pointer-events:none}
  .join input{flex:1;width:0;min-width:0;min-height:36px}
  .join button{min-height:36px}
  .top .pill{min-height:40px;margin-left:auto;font-size:1.1rem}
  .hero{padding-top:calc(150px + env(safe-area-inset-top));height:auto;min-height:100svh}
  .hero .giant{white-space:normal;font-size:27vw;margin-top:3vh}
  .hero .t1{top:calc(150px + env(safe-area-inset-top));left:4vw}
  .hero .t2{top:calc(150px + env(safe-area-inset-top) + 3vh + 40vw);right:4vw}
  .phone{margin-top:1vh}
  .bigmark{margin-top:-30px;width:min(70vw,340px)}
  .corner{position:static;margin-top:4vh;max-width:280px}
  .fan{grid-template-columns:1fr;max-width:360px;gap:40px}
  .card h3{font-size:1.5rem}
  .in .c1{transform:rotate(-2deg)}
  .in .c2{transform:rotate(1deg)}
  .in .c3{transform:rotate(2deg)}
  .s-hands{top:4vh;right:4vw}
  .ai{padding:7vh 6vw 9vh}
  .ai-layout{grid-template-columns:1fr;gap:40px;max-width:540px}
  .ai-copy{text-align:center}
  .ai .tag{font-size:clamp(1.25rem,4vw,1.7rem);margin-bottom:22px}
  .ai .giant{font-size:clamp(4.6rem,19vw,7.5rem);text-align:center}
  .ai .giant .mask{margin-left:0}
  .ai .lede{margin:1.5rem auto 1rem;max-width:25rem}
  .ai-tools{gap:clamp(14px,5vw,28px)}
  .ai-tool{min-width:0}
  .ai-tool-mark{width:56px;height:56px;border-radius:18px}
  .ai-tool-mark img,.ai-tool-mark svg{width:30px;height:30px}
  .ai-request{gap:10px;padding:12px 14px;font-size:1.3rem}
  .ai-output{width:76%;height:268px;margin-top:52px}
  .ai-working{inset:52px 0 12px}
  .ai-slide-front{padding:20px 18px 16px}
  .ai-slide-kicker{font-size:.9rem;letter-spacing:.04em}
  .ai-cover strong{font-size:clamp(2.15rem,7.8vw,3rem)}
  .ai-cover .emoji-depth{right:10px;bottom:48px;width:72px;height:72px}
  .ai-quiz strong{font-size:clamp(1.8rem,6vw,2.1rem)}
  .ai-quiz-answer b{font-size:1.05rem}
  .ai-stamp{right:-14px;font-size:.95rem;padding:9px 11px 7px}
  .ai-spark{right:-34px;top:-24px;width:58px;height:58px}
  .ai-swoop{left:-38px;width:60px}
  .crowd .corner{position:static;margin:2vh auto 0;text-align:center;align-self:auto}
  .speaker{width:40px;height:40px}
  .pit{min-height:290px}
  .foot nav{flex-wrap:wrap;gap:12px 20px;font-size:1.3rem}
  .foot p{padding-inline:8px;text-wrap:balance}
  .allword{margin-left:6vw}
  .ride{margin-top:2vh}
  .fl-a{top:auto;bottom:24%;width:56px}.fl-b{top:auto;bottom:30%;width:56px}
  .fl-c{top:5%;left:6vw;width:58px}.fl-d{top:4%;right:6vw;width:58px}.fl-e{left:auto;right:5vw;bottom:3%;width:56px}
}

/* Short landscape viewports keep the phone intact and allow natural scrolling. */
@media (max-height:600px) and (min-width:821px){
  .hero{height:auto;min-height:100svh;padding-bottom:120px}
  .hero .giant,.hero .phone,.hero .bigmark{flex-shrink:0}
  .hero .giant{font-size:clamp(5rem,13vw,12rem)}
}

@media (hover:none) and (pointer:coarse){
  .phone-progress button,.phone-tour,.phone-score-head button{position:relative}
  .phone-progress button::before,.phone-tour::before,.phone-score-head button::before{content:"";position:absolute;inset:-9px 0}
  .phone-tour::before{inset:-9px}
  .phone-word-form{height:40px}
  .phone-word-form button{width:40px}
  .phone-questions button{width:40px;min-height:40px}
  .modal{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
}

@media (prefers-reduced-motion:reduce){
  .pour{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---------- Everything, as plain words ----------
   The list the scroller draws, in the page itself for readers without
   JavaScript (most AI crawlers). The scroller replaces it with its pills. */
.ride-list{display:flex;align-items:center;gap:30px;height:100%;margin:0;padding:0 4vw;list-style:none;overflow-x:auto;scrollbar-width:none}
.ride-list li{flex:none;padding:.32em .95em;border-radius:999px;background:var(--deep);color:#fff;font:400 clamp(1.4rem,2.2vw,2rem)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;box-shadow:0 0 0 5px #fff,0 14px 24px rgba(120,30,0,.25)}
.ride-list li:nth-child(5n+2){background:var(--leaf)}
.ride-list li:nth-child(5n+3){background:#7E57C2}
.ride-list li:nth-child(5n+4){background:#1E88E5}
.ride-list li:nth-child(5n+5){background:var(--ink)}

/* ---------- good questions: the answers people look for ----------
   Postcards like the fan's, one per question, opened with a tap. The words
   are in the page whether a card is open or not, and the cards only move as
   they arrive: they never wait, invisible, for the script. */
.faq{padding:12vh 4vw 9vh;overflow:hidden}
.faq .tag{color:var(--leaf);text-shadow:3px 0 var(--leaf2),-3px 0 var(--leaf2),0 3px var(--leaf2),0 -3px var(--leaf2),2px 2px var(--leaf2),-2px -2px var(--leaf2),2px -2px var(--leaf2),-2px 2px var(--leaf2)}
.faq-list{display:grid;gap:24px;max-width:920px;margin:7vh auto 0;text-align:left}
.faq-card{--fq-bg:#FFF0DD;--fq-rim:#F3CFAB;--fq-ink:#B94B00;position:relative;border:1px solid rgba(255,255,255,.9);border-radius:30px 36px 28px 34px;
  background:radial-gradient(ellipse at 15% 0,rgba(255,255,255,.9),transparent 65%),var(--fq-bg);
  box-shadow:0 0 0 5px #fff,0 7px 0 5px var(--fq-rim),0 22px 34px -12px rgba(116,55,10,.2);
  transform:translateY(46px) scale(.96);transition:transform .8s var(--pop)}
.faq-card:nth-child(3n+2){--fq-bg:#F0F5DE;--fq-rim:#D5E2B6;--fq-ink:var(--leaf2);border-radius:34px 28px 36px 30px}
.faq-card:nth-child(3n+3){--fq-bg:#FFF3C5;--fq-rim:#EDD494;--fq-ink:#925600;border-radius:36px 30px 32px 28px}
.in .faq-card{transform:rotate(-.5deg)}
.in .faq-card:nth-child(even){transform:rotate(.45deg)}
.faq-card:nth-child(2){transition-delay:.06s}.faq-card:nth-child(3){transition-delay:.12s}.faq-card:nth-child(4){transition-delay:.18s}.faq-card:nth-child(5){transition-delay:.24s}.faq-card:nth-child(n+6){transition-delay:.3s}
.faq-card summary{display:flex;align-items:center;gap:18px;padding:20px 22px 20px 26px;cursor:pointer;list-style:none;border-radius:inherit}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card summary::after{content:"";flex:none;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(#fff,#fff) center/18px 3.5px no-repeat,linear-gradient(#fff,#fff) center/3.5px 18px no-repeat,var(--orange);
  box-shadow:0 0 0 3px #fff,0 6px 12px rgba(255,106,0,.3);transition:transform .45s var(--pop)}
.faq-card[open] summary::after{transform:rotate(135deg)}
.faq-card h3{flex:1;min-width:0;margin:0;font:400 clamp(1.55rem,2.5vw,2.15rem)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--fq-ink);text-wrap:balance}
.faq-card .answer{padding:0 26px 24px;font-size:clamp(1.3rem,1.8vw,1.5rem);line-height:1.2;color:var(--ink2)}
.faq-card[open] .answer{animation:qa-open .45s var(--ease)}
@keyframes qa-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-card .answer p+p{margin-top:.55em}
.faq-card .answer a,.faq .aside a,.guide .read a{color:var(--deep);text-decoration-thickness:2px;text-underline-offset:3px}
.faq-card .more{text-transform:uppercase;letter-spacing:.04em;font-size:.92em}
.faq .aside{margin-top:6vh}
.fl-q{left:5vw;top:9%;rotate:-10deg}
.fl-r{right:6vw;top:15%;rotate:12deg;animation-delay:-2.5s}
@media (hover:hover) and (pointer:fine){
  .faq-card summary:hover::after{transform:scale(1.12)}
  .faq-card[open] summary:hover::after{transform:rotate(135deg) scale(1.12)}
}

/* ---------- early access: how did you find us ---------- */
.sheet select{display:block;width:100%;margin-top:6px;padding:.55em 2.4em .55em .9em;border:0;border-radius:16px;color:var(--ink);font:400 1.3rem/1.1 system-ui,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23FF6A00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8em center/18px;
  box-shadow:inset 0 0 0 2px var(--cream2)}
.sheet select:focus{outline:none;box-shadow:inset 0 0 0 3px var(--orange)}

/* ---------- guides: long reads in the same juice ----------
   The front page's look for pages people read top to bottom
   (interactive-presentations/, compare/). Everything here is scoped to
   body.guide: the front page's own <html class="intro"> must never match
   a guide rule (it once did, and the page stopped scrolling). Words are
   never hidden waiting for a scroll: only headline type animates in. */
.guide .top{background:rgba(255,242,227,.92);backdrop-filter:blur(10px)}
.guide .guide-hero{padding:calc(var(--top-height,110px) + 9vh) 4vw 8vh;overflow:hidden}
.guide .guide-hero .giant{font-size:clamp(4.2rem,12.5vw,12rem)}
/* The title rises on its own, like the hero's, without waiting for the script. */
.guide .guide-hero .giant .ln{animation:up 1s var(--pop) calc(.15s + var(--i,0) * .12s) forwards}
.guide .watch .film-play{animation-delay:.5s}
.guide .guide-hero .tag{color:var(--leaf);text-shadow:3px 0 var(--leaf2),-3px 0 var(--leaf2),0 3px var(--leaf2),0 -3px var(--leaf2),2px 2px var(--leaf2),-2px -2px var(--leaf2),2px -2px var(--leaf2),-2px 2px var(--leaf2)}
.guide .guide-hero .lede,.guide .guide-hero .tag{opacity:1;transform:none;rotate:-4deg}
.guide .guide-hero .lede{rotate:0deg;max-width:40rem;margin:2.2rem auto 1.4rem;font-size:clamp(1.45rem,2.3vw,1.9rem);line-height:1.15}
.guide .guide-hero .lede strong{font-weight:400;color:var(--deep)}
.guide .crumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:.5em;margin:0 0 3vh;padding:0;list-style:none;font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.guide .crumbs li+li::before{content:"/";margin-right:.5em;color:var(--orange)}
.guide .crumbs a{text-decoration:none}
.guide .stamp{font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.guide .watch{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:3vh;font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em}
.guide .watch .film-play{margin:0}
.guide .read{padding:7vh 4vw;text-align:left}
.guide .read > *{max-width:46rem;margin-left:auto;margin-right:auto}
.guide .read h2{margin-top:0;margin-bottom:.5em;font:400 clamp(2.6rem,5.4vw,4.4rem)/.9 var(--display);text-transform:uppercase;color:var(--orange);text-wrap:balance;
  text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,0 6px 12px rgba(42,19,6,.1)}
.guide .read h3{margin:1.6em auto .35em;font:400 clamp(1.5rem,2.3vw,1.9rem)/1 var(--puffy);letter-spacing:.02em;color:var(--leaf2)}
.guide .read p,.guide .read li{font-size:clamp(1.3rem,1.75vw,1.5rem);line-height:1.25}
.guide .read p{margin-bottom:.8em}
.guide .read p.capsule{font-size:clamp(1.45rem,2vw,1.75rem);line-height:1.18}
.guide .read p.capsule strong{font-weight:400;color:var(--deep)}
.guide .read ul,.guide .read ol{padding-left:0;list-style:none}
.guide .read ul li{position:relative;margin:.45em auto;padding-left:1.3em}
.guide .read ul li::before{content:"";position:absolute;left:.15em;top:.42em;width:.5em;height:.5em;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #fff}
.guide .read ul li b,.guide .read ol li b{font-weight:400;color:var(--deep)}
.guide .steps{counter-reset:step}
.guide .steps li{position:relative;margin:0 auto 1em;padding:.15em 0 0 3.4em;counter-increment:step;min-height:2.6em}
.guide .steps li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:2.25em;height:2.25em;border-radius:50%;background:var(--orange);color:#fff;font:400 1.1em/1 var(--puffy);box-shadow:0 0 0 4px #fff,0 8px 16px rgba(255,106,0,.25)}
.guide .source{font-size:1.1rem!important;color:var(--ink2)}
.guide .moments{width:100%;border-collapse:separate;border-spacing:0;margin:1.2em auto 1em;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 0 0 5px #fff,0 7px 0 5px var(--cream2),0 22px 34px -12px rgba(116,55,10,.18);font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.15}
.guide .moments th,.guide .moments td{padding:.8em 1em;text-align:left;vertical-align:top;border-bottom:2px solid var(--cream)}
.guide .moments thead th{background:var(--orange);color:#fff;font-weight:400;text-transform:uppercase;letter-spacing:.05em}
.guide .moments tbody tr:nth-child(even){background:#FFF8EF}
.guide .moments tbody tr:last-child td{border-bottom:0}
.guide .moments td:first-child{color:var(--deep);text-transform:uppercase;letter-spacing:.03em}
.guide .table-wrap{overflow-x:auto;padding:12px 6px}
.guide .kinds{background:var(--orange);color:var(--cream);padding:9vh 4vw 11vh}
.guide .kinds h2{color:var(--cream);text-shadow:3px 0 var(--deep),-3px 0 var(--deep),0 3px var(--deep),0 -3px var(--deep),2px 2px var(--deep),-2px -2px var(--deep),2px -2px var(--deep),-2px 2px var(--deep),0 10px 18px rgba(120,30,0,.3)}
.guide .kinds .capsule{color:var(--cream)}
.guide .kinds-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px;max-width:1120px!important;margin-top:5vh!important}
.guide .kinds-list li{padding:0!important;margin:0!important}
.guide .kinds-list li::before{display:none}
.guide .kinds-list b{display:inline-flex;align-items:center;gap:.45em;padding:.3em .9em .3em .35em;border-radius:999px;background:var(--deep);color:#fff!important;font:400 clamp(1.35rem,2vw,1.8rem)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;box-shadow:0 0 0 5px #fff,0 14px 24px rgba(120,30,0,.25)}
.guide .kinds-list li:nth-child(5n+2) b{background:var(--leaf)}
.guide .kinds-list li:nth-child(5n+3) b{background:#7E57C2}
.guide .kinds-list li:nth-child(5n+4) b{background:#1E88E5}
.guide .kinds-list li:nth-child(5n+5) b{background:var(--ink)}
.guide .kinds-list img{width:1.9em;height:1.9em;margin:-.3em 0}
.guide .kinds-list span{display:block;margin-top:.75em;color:var(--cream);font-size:clamp(1.2rem,1.6vw,1.4rem);line-height:1.15}
.guide .uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;max-width:980px!important;margin-top:4vh!important}
.guide .use{--card-bg:#FFF0DD;--card-rim:#F3CFAB;--card-ink:#B94B00;padding:24px 24px 18px;border:1px solid rgba(255,255,255,.9);border-radius:32px 38px 30px 34px;
  background:radial-gradient(ellipse at 15% 0,rgba(255,255,255,.9),transparent 65%),var(--card-bg);box-shadow:0 0 0 5px #fff,0 7px 0 5px var(--card-rim),0 24px 40px -10px rgba(116,55,10,.18)}
.guide .use:nth-child(2){--card-bg:#F0F5DE;--card-rim:#D5E2B6;--card-ink:var(--leaf2);rotate:.6deg}
.guide .use:nth-child(3){--card-bg:#FFF3C5;--card-rim:#EDD494;--card-ink:#925600;rotate:-.5deg}
.guide .use:nth-child(4){rotate:.4deg}
.guide .use h3{margin:0 0 .4em!important;color:var(--card-ink)!important}
.guide .use p{font-size:clamp(1.2rem,1.6vw,1.38rem)!important;margin:0!important}
.guide .faq{padding-top:8vh}
.guide .last{padding-top:12vh}
@media (max-width:820px){
  .guide .guide-hero{padding-top:calc(var(--top-height,110px) + 5vh)}
  .guide .kinds-list{grid-template-columns:1fr;gap:26px}
  .guide .uses{grid-template-columns:1fr}
  .guide .use{rotate:0deg!important}
  .guide .read{padding:6vh max(5vw,16px)}
  .fl-q{top:3%;left:4vw;width:56px}.fl-r{top:2%;right:4vw;width:56px}
  .faq-card summary{gap:12px;padding:16px 16px 16px 20px}
  .faq-card summary::after{width:38px;height:38px;background-size:15px 3px,3px 15px,auto}
  .faq-card .answer{padding:0 20px 20px}
}
@media (min-width:821px) and (max-width:1100px){.guide .kinds-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- comparisons: tools side by side ----------
   compare/: the guide's table, with a label on every row. On a phone each
   row becomes a card and every fact sits under the name of its tool (.who,
   hidden on wider screens, where the column heading says it), so nothing
   scrolls sideways. */
.guide .read > .table-wrap.wide{max-width:66rem}
/* A name inside a description stays in its line. */
.guide .kinds-list span span{display:inline;margin:0;font-size:inherit}
.guide .moments.vs tbody th{font-weight:400;text-align:left;color:var(--deep);text-transform:uppercase;letter-spacing:.03em}
.guide .moments.vs tbody tr:last-child th{border-bottom:0}
.guide .moments.vs .who{display:none}
@media (max-width:640px){
  .guide .moments.vs,.guide .moments.vs tbody,.guide .moments.vs tr,.guide .moments.vs th,.guide .moments.vs td{display:block}
  .guide .moments.vs thead{display:none}
  .guide .moments.vs tr{border-bottom:2px solid var(--cream)}
  .guide .moments.vs tr:last-child{border-bottom:0}
  .guide .moments.vs tbody th{padding:.9em 1em .2em;border:0}
  .guide .moments.vs td{padding:.35em 1em .6em;border:0}
  .guide .moments.vs .who{display:block;margin-bottom:.1em;color:var(--orange);font-size:.85em;letter-spacing:.05em;text-transform:uppercase}
}