/* ==========================================================================
   The animal cast: fox, panda, axolotl, penguin, owl and frog.
   One shared SVG rig (assets/js/buddies.js) animated with CSS only.
   data-mood = face, data-pose = what the paws hold, data-act = body language.
   ========================================================================== */

.cr{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 10px 14px #4b2f6a1c)}
.cr *{transform-box:view-box}
.cr-rig{transform-origin:100px 206px}
.cr-body{transform-origin:100px 196px}
.cr-head{transform-origin:100px 140px;transition:rotate .6s var(--ease-out),translate .6s var(--ease-out)}
.cr-leg--l{transform-origin:84px 174px}
.cr-leg--r{transform-origin:116px 174px}
.cr-arm{transition:rotate .55s var(--ease-spring)}
.cr-arm--l{transform-origin:74px 150px;rotate:var(--la,0deg)}
.cr-arm--r{transform-origin:126px 150px;rotate:var(--ra,0deg)}
.cr-prop{transform-origin:141px 181px;rotate:calc(var(--ra,0deg) * -1);transition:rotate .55s var(--ease-spring)}
.cr-look{translate:var(--lx,0px) var(--ly,0px);transition:translate .35s var(--ease-out)}
.cr-heart,.cr-float,.cr-tear,.cr-sweat,.cr-anger,.cr-heye{transform-box:fill-box;transform-origin:center}
.cr-crown{transform-box:fill-box;transform-origin:50% 100%}
.cr-shadow{transform-origin:100px 207px}

/* Faces: only the variants for the current mood are drawn. */
.cr .v{display:none}
.cr[data-mood="idle"] [data-on~="idle"],
.cr[data-mood="happy"] [data-on~="happy"],
.cr[data-mood="love"] [data-on~="love"],
.cr[data-mood="sad"] [data-on~="sad"],
.cr[data-mood="nervous"] [data-on~="nervous"],
.cr[data-mood="shock"] [data-on~="shock"],
.cr[data-mood="angry"] [data-on~="angry"],
.cr[data-mood="huff"] [data-on~="huff"]{display:inline}
.cr[data-mood="shock"] .cr-eyes{transform:scale(1.14)}
.cr[data-act="talk"] .cr-mouth .v{display:none}
.cr[data-act="talk"] .cr-mouth .v-grin{display:inline}

/* Poses: arm angles (props counter-rotate so they stay upright) and where the eyes look. */
.cr[data-pose="phone"]{--ra:-55deg;--lx:2.5px;--ly:-.5px}
.cr[data-pose="write"]{--ra:35deg;--ly:2.5px}
.cr[data-pose="find"]{--ra:-100deg;--lx:2.5px}
.cr:is([data-pose="love"],[data-pose="trophy"],[data-pose="mail"],[data-pose="book"]){--la:-40deg;--ra:40deg}
.cr[data-pose="book"]{--ly:2.5px}
.cr[data-pose="wave"]{--la:100deg}

/* Acts override the pose's arms. */
.cr[data-act="cheer"],.cr[data-act="dance"]{--la:122deg;--ra:-122deg}
.cr[data-act="reach"]{--la:62deg;--ra:-62deg}
.cr[data-act="hugr"]{--la:-30deg;--ra:-74deg}
.cr[data-act="hugl"]{--la:74deg;--ra:30deg}
.cr[data-act="huff"]{--la:-60deg;--ra:60deg}
.cr[data-act="sad"]{--la:-12deg;--ra:12deg;--ly:3px}
.cr[data-act="huff"] .cr-head{rotate:-9deg}
.cr[data-act="sad"] .cr-head{rotate:6deg;translate:0 5px}

@media (prefers-reduced-motion:no-preference){
  /* Idle life for everyone. */
  .cr-eyes{animation:crBlink 5.4s ease-in-out infinite}
  .cr-body{animation:crBreathe 3.6s ease-in-out infinite}
  .cr-head{animation:crHead 4.8s ease-in-out infinite}
  .cr-tail{animation:crTail 2.6s ease-in-out infinite}
  .cr-ear--l{animation:crEarL 6s ease-in-out infinite}
  .cr-ear--r{animation:crEarR 6s ease-in-out -2.4s infinite}
  .cr-gill--l{animation:crGillL 1.8s ease-in-out infinite}
  .cr-gill--r{animation:crGillR 1.8s ease-in-out -.4s infinite}
  .cr-scarf{animation:crScarf 2.6s ease-in-out infinite}
  .cr-sprout{animation:crSprout 3.4s ease-in-out infinite}
  .cr-heart{animation:crPulse 1.5s ease-in-out infinite}
  .cr-heye{animation:crPulse .7s ease-in-out infinite}
  .cr-float{animation:crFloat 2.6s ease-in-out infinite}
  .cr-float--2{animation-delay:-.9s}.cr-float--3{animation-delay:-1.7s}
  .cr-tear{animation:crTear 1.3s ease-in infinite}.cr-tear--2{animation-delay:-.65s}
  .cr-sweat{animation:crSweat 1.7s ease-in infinite}
  .cr-anger{animation:crThrob .5s ease-in-out infinite alternate}

  /* A different personality per animal while idle. */
  .cr--fox[data-act="idle"] .cr-rig{animation:crBounce 2.8s ease-in-out infinite}
  .cr--fox .cr-tail{animation-duration:1.9s}
  .cr--panda[data-act="idle"] .cr-rig{animation:crSway 4.4s ease-in-out infinite}
  .cr--axolotl[data-act="idle"] .cr-rig{animation:crDrift 3.6s ease-in-out infinite}
  .cr--penguin[data-act="idle"] .cr-rig{animation:crWaddle 1.7s ease-in-out infinite}
  .cr--owl .cr-head{animation:crOwl 6s ease-in-out infinite}
  .cr--owl .cr-eyes{animation-duration:4.2s}
  .cr--frog[data-act="idle"] .cr-rig{animation:crHop 3.8s cubic-bezier(.3,.7,.4,1) infinite}
  .cr--frog .cr-eyes{animation-duration:3.6s}

  /* Pose gestures. */
  .cr[data-pose="wave"] .cr-arm--l{animation:crWave 1.5s ease-in-out infinite}
  .cr[data-pose="write"] .cr-arm--r{animation:crScribble .45s ease-in-out infinite alternate}
  .cr[data-pose="phone"] .cr-arm--r{animation:crTap 2.6s ease-in-out infinite}
  .cr[data-pose="find"] .cr-arm--r{animation:crSearch 3.2s ease-in-out infinite}
  .cr[data-pose="book"] .cr-head{animation:crRead 4s ease-in-out infinite}

  /* Scene acts. */
  .cr[data-act="walk"] .cr-rig{animation:crWalk .34s ease-in-out infinite alternate}
  .cr[data-act="walk"] .cr-leg--l{animation:crLeg .34s ease-in-out infinite alternate}
  .cr[data-act="walk"] .cr-leg--r{animation:crLeg .34s ease-in-out infinite alternate-reverse}
  .cr[data-act="walk"] .cr-arm--l{animation:crSwing .34s ease-in-out infinite alternate-reverse}
  .cr[data-act="walk"] .cr-arm--r{animation:crSwing .34s ease-in-out infinite alternate}
  .cr[data-act="talk"] .cr-mouth{animation:crTalk .17s ease-in-out infinite alternate}
  .cr[data-act="talk"] .cr-head{animation:crNod .6s ease-in-out infinite alternate}
  .cr[data-act="cheer"] .cr-rig{animation:crJump .6s cubic-bezier(.3,.7,.4,1) infinite}
  .cr[data-act="cheer"] .cr-arm{animation:crFlap .3s ease-in-out infinite alternate}
  .cr[data-act="dance"] .cr-rig{animation:crDance 1s ease-in-out infinite}
  .cr[data-act="dance"] .cr-arm{animation:crFlap .5s ease-in-out infinite alternate}
  .cr:is([data-act="hugr"],[data-act="hugl"]) .cr-rig{animation:crSnuggle 1.4s ease-in-out infinite}
  .cr[data-act="hugl"] .cr-rig{animation-direction:reverse}
  .cr[data-act="huff"] .cr-rig{animation:crHuff 1.2s ease-in-out infinite}
  .cr[data-act="sad"] .cr-rig{animation:crSlump 3.2s ease-in-out infinite}
  .cr[data-act="shiver"] .cr-rig{animation:crShiver .08s linear infinite alternate}
  .cr[data-act="tremble"] .cr-rig{animation:crTremble .15s linear infinite alternate}
  .cr[data-act="reach"] .cr-rig{animation:crLean .5s var(--ease-out) both}
}

.cr.is-off,.cr.is-off *{animation-play-state:paused!important}

@keyframes crBlink{0%,44%,48%,100%{scale:1 1}46%{scale:1 .08}}
@keyframes crBreathe{50%{transform:scale(1.035,.975)}}
@keyframes crHead{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.2deg) translateY(-1.5px)}}
@keyframes crTail{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes crEarL{0%,78%,90%,100%{transform:none}84%{transform:rotate(-13deg)}}
@keyframes crEarR{0%,78%,90%,100%{transform:none}84%{transform:rotate(13deg)}}
@keyframes crGillL{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(9deg) scale(1.04)}}
@keyframes crGillR{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-9deg) scale(1.04)}}
@keyframes crScarf{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(9deg)}}
@keyframes crSprout{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(10deg)}}
@keyframes crPulse{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.16)}90%{transform:scale(1.04)}}
@keyframes crFloat{0%{transform:translateY(8px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translateY(-22px) scale(1.05);opacity:0}}
@keyframes crTear{0%{transform:translateY(-4px) scale(.5);opacity:0}20%{opacity:1;transform:translateY(0) scale(1)}100%{transform:translateY(26px) scale(.8);opacity:0}}
@keyframes crSweat{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}100%{transform:translateY(16px);opacity:0}}
@keyframes crThrob{to{transform:scale(1.25) rotate(8deg)}}
@keyframes crBounce{0%,62%,100%{transform:none}70%{transform:translateY(-9px) scale(.98,1.03)}80%{transform:translateY(0) scale(1.04,.96)}88%{transform:translateY(-3px)}}
@keyframes crSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-2px)}}
@keyframes crDrift{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes crWaddle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes crOwl{0%,30%,100%{transform:rotate(0)}38%,52%{transform:rotate(-11deg)}60%,74%{transform:rotate(9deg)}}
@keyframes crHop{0%,70%,100%{transform:none}76%{transform:scale(1.06,.92)}84%{transform:translateY(-16px) scale(.95,1.06)}92%{transform:scale(1.05,.95)}}
@keyframes crWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-26deg)}50%{transform:rotate(4deg)}75%{transform:rotate(-22deg)}}
@keyframes crScribble{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes crTap{0%,70%,100%{transform:none}76%,88%{transform:rotate(-6deg)}82%{transform:rotate(2deg)}}
@keyframes crSearch{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}70%{transform:rotate(8deg)}}
@keyframes crRead{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes crWalk{from{transform:translateY(0) rotate(-3.5deg)}to{transform:translateY(-7px) rotate(3.5deg)}}
@keyframes crLeg{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes crSwing{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes crTalk{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
@keyframes crNod{from{transform:rotate(-2deg)}to{transform:rotate(2deg) translateY(1px)}}
@keyframes crJump{0%,100%{transform:scale(1.08,.9)}35%{transform:translateY(-30px) scale(.94,1.08)}55%{transform:translateY(-34px) scale(1)}85%{transform:translateY(0) scale(1)}}
@keyframes crFlap{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes crDance{0%,100%{transform:rotate(-8deg) translateX(-5px)}25%{transform:translateY(-10px)}50%{transform:rotate(8deg) translateX(5px)}75%{transform:translateY(-10px)}}
@keyframes crSnuggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes crHuff{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) scale(1.02)}}
@keyframes crSlump{0%,100%{transform:scale(1,.97)}50%{transform:scale(1.01,.95)}}
@keyframes crShiver{from{transform:translateX(-1.8px)}to{transform:translateX(1.8px)}}
@keyframes crTremble{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes crLean{to{transform:translateY(-4px) rotate(2deg)}}
@keyframes crArrive{0%{opacity:0;transform:translateY(26px) scale(.7,.6)}55%{opacity:1;transform:translateY(-8px) scale(.94,1.08)}75%{transform:translateY(0) scale(1.06,.94)}100%{opacity:1;transform:none}}

/* ------------------------------------------------------------------ where they live on pages */
.page-character{width:150px;margin:-8px auto 4px}
.page-character--small{width:116px;margin:0 auto}
.step-character{width:138px;margin:-14px auto 6px}
.page-character .cr,.step-character .cr{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .page-character .cr{animation:crArrive .9s var(--ease-out) .1s both}
}

/* Home hero */
body[data-view="home"]{background:linear-gradient(180deg,#e8f5ff 0,#f6efff 850px,#fff6f8 1800px,#f3f8ff 100%)}
body[data-view="home"] .bg-sky{background:transparent}
body[data-view="home"] .bg-clouds{opacity:.4}
body[data-view="home"] .topbar{background:#f6fbffb3;backdrop-filter:blur(16px);box-shadow:0 1px 0 #a4bad526}
body[data-view="home"] .icon-btn{border-width:2px;box-shadow:0 3px 0 #24173f33}
[data-view="home"] .hero--club{position:relative;display:grid;grid-template-columns:1fr;gap:4px;max-width:880px;margin:22px auto 0;padding:24px 32px 28px;border:1px solid #fff;background:linear-gradient(155deg,#ffffffed,#ffffffbb);border-radius:40px;box-shadow:0 18px 65px #6c83aa17;isolation:isolate;text-align:center}
[data-view="home"] .hero-copy{grid-row:2;position:relative;z-index:3}
[data-view="home"] .hero--club h1{font-size:clamp(38px,6vw,62px);line-height:1.08;letter-spacing:-.035em;max-width:none;margin:9px auto 0;text-wrap:balance}
[data-view="home"] .hero--club h1 .p{color:#d63f87}
[data-view="home"] .hero--club h1 .b{color:#6c51bb}
[data-view="home"] .hero--club .hero-chips{justify-content:center!important;margin-bottom:2px}
[data-view="home"] .hero--club .kicker{font-size:11px;letter-spacing:.09em;background:#fff5cf;border:1px solid #eac876;color:#7d5923;box-shadow:none;padding:5px 11px}
[data-view="home"] .hero--club .lead{font-size:16px;margin:11px auto 0;max-width:48ch;line-height:1.5}
[data-view="home"] .hero--club .hero-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;max-width:none;margin:20px auto 0}
[data-view="home"] .hero--club .hero-cta .btn--pink{max-width:300px;box-shadow:0 5px 0 #a12a69,0 10px 24px #ff4f9a22;border:2px solid #a12a69;background:linear-gradient(135deg,#f65aa6,#df3d8f);border-radius:18px;padding:14px 28px;font-size:19px;animation:none}
[data-view="home"] .hero--club .hero-cta .btn--ghost{width:auto;padding:11px 8px;color:#6d5c91;font-size:14px}
[data-view="home"] .hero--club .hero-art{grid-row:1;width:100%;max-width:560px;height:320px;margin:0 auto;isolation:isolate}
[data-view="home"] .hero--club .hero-art::before{inset:5% 10% 0;filter:blur(18px);background:radial-gradient(ellipse,#fde1eea8,#d9ddff66 50%,transparent 70%)}
[data-view="home"] .hero--club .art-phone{width:151px;height:280px;padding:7px;border-radius:29px;top:10px;background:#443351;box-shadow:0 8px 0 #b6a8c044,0 20px 38px #67497624;z-index:2}
[data-view="home"] .hero--club .phone-screen{border-radius:23px;padding:28px 9px 11px;background:linear-gradient(180deg,#fff,#fff2fa)}
[data-view="home"] .hero--club .phone-screen::before{width:49px;height:11px;top:8px;background:#443351}
[data-view="home"] .hero--club .phone-screen .av-ring{width:66px;height:66px;border-width:2px;box-shadow:0 3px 0 #b89ca43b}
[data-view="home"] .hero--club .phone-name{font-size:15px;margin-top:6px}
[data-view="home"] .hero--club .phone-sub{font-size:10px;line-height:1.3;max-width:100%;text-align:center}
[data-view="home"] .hero--club .pbtn{font-size:12px;border-width:2px;border-radius:11px;padding:8px 3px;box-shadow:0 2px 0 #443351}
[data-view="home"] .hero--club .art-av{width:196px;z-index:3;animation:none;top:auto;bottom:0;filter:none}
[data-view="home"] .hero--club .art-av--a{left:0}
[data-view="home"] .hero--club .art-av--b{right:0}
[data-view="home"] .hero--club .art-bubble{font-size:13px;padding:8px 12px;border:1.5px solid #cbb8d7;background:#ffffffeb;box-shadow:0 6px 20px #6c4d8212;max-width:46%;border-radius:16px;z-index:5}
[data-view="home"] .hero--club .art-bubble--a{left:0;top:42px}
[data-view="home"] .hero--club .art-bubble--b{right:0;top:20px}
[data-view="home"] .hero--club .finger{font-size:40px;z-index:6}
[data-view="home"] .hero--club .art-stamp{top:151px;max-width:70%;font-size:22px;border-width:3px;padding:8px 12px;background:#fffffff2;box-shadow:0 8px 20px #67497616;border-radius:12px}
[data-view="home"] .hero--club .art-orbit{inset:0 15% 9%;border-color:#c7b8e640}
[data-view="home"] .hero--club .art-orbit--two{inset:15% 0 20%;border-color:#dcb4cc44}
[data-view="home"] .hero--club .art-spark--one{top:7px;right:20%;font-size:28px;color:#d7a33e}
[data-view="home"] .hero--club .art-spark--two{left:18%;bottom:8px;font-size:24px;color:#9b82c8}
[data-view="home"] .hero-art[data-verdict="block"] .art-av--b .cr{filter:saturate(.55) drop-shadow(0 10px 14px #4b2f6a1c)}
.scene-cloud{position:absolute;z-index:-1;height:72px;width:155px;background:#fff8;border-radius:100px;filter:drop-shadow(0 10px 10px #9a88ba08)}
.scene-cloud::before,.scene-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.scene-cloud::before{width:79px;height:79px;left:21px;top:-28px}.scene-cloud::after{width:64px;height:64px;right:16px;top:-14px}
.scene-cloud--back{left:45px;top:120px;transform:rotate(-5deg)}.scene-cloud--front{right:20px;bottom:10px;width:195px;opacity:.6}
[data-view="home"] .home-intro{max-width:880px;margin:38px auto 0;background:#ffffff8c;border-color:#ffffffab;box-shadow:none;padding:30px 35px}
[data-view="home"] .home-intro h2{font-size:clamp(25px,4vw,34px);max-width:29ch;margin:auto}
[data-view="home"] .home-intro>p{font-size:16px}
[data-view="home"] .intro-pills .kicker{font-size:13px;letter-spacing:normal;margin:0;background:#fff;border:1px solid #e6d8f0;box-shadow:none}
[data-view="home"] .steps .step{padding-top:26px;background:#ffffffbd;border-color:#a596b366;box-shadow:0 6px 0 #b8a8c033,0 16px 28px #8f7ca012}
[data-view="home"] .step .num{width:33px;height:33px;top:-16px;border-width:1px;border-color:#dfb959;box-shadow:none;font-size:16px;background:#ffeab3}
[data-view="home"] .step h3{font-size:21px}
.av-stage .av,.invite-scene>.av-ring .av{filter:drop-shadow(0 3px 3px #49324f14)}

/* Share page: two friends cheer around the creator's portrait */
.share-cast{max-width:420px;margin:auto;isolation:isolate}
.share-buddy{position:absolute;width:118px;bottom:-6px;z-index:2}
.share-buddy--a{left:-4px}.share-buddy--b{right:-4px}

/* Invite page: the animals flank the creator's portrait */
.invite-scene .invite-buddy{position:absolute;bottom:-4px;width:118px;z-index:2}
.invite-scene .invite-buddy--a{left:-6px}
.invite-scene .invite-buddy--b{right:-6px}

/* Result hero: the same two actors as the reveal scene */
.rf-cast{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:-6px auto 0;max-width:340px}
.rf-actor{position:relative;width:118px;flex:none}
.rf-actor .rf-tag{position:absolute;left:50%;bottom:-6px;translate:-50% 0;margin:0;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff;color:var(--ink);font-size:12px;padding:2px 10px}
.rf-cast .rf-link{align-self:center;margin-bottom:34px}

/* Game screen: the quiz mascot peeks over the question card and reacts to every answer */
.qwrap{position:relative;display:flow-root}
.qwrap .qstage{z-index:1}
.play-mascot{position:absolute;z-index:0;inset-inline-end:14px;top:-22px;width:66px;pointer-events:none}
.play-mascot .cr{--ly:2.5px;filter:drop-shadow(0 4px 6px #24173f26)}
@media (min-width:600px){.play-mascot{width:80px;top:-32px;inset-inline-end:26px}}
@media (prefers-reduced-motion:no-preference){.play-mascot .cr{animation:crPeek .7s var(--ease-spring) .3s both}}
@keyframes crPeek{from{transform:translateY(46px)}to{transform:none}}

/* Countdown: the mascot cheers 3, 2, 1, GO! */
.countdown-cast{position:absolute;left:50%;bottom:9vh;width:min(38vw,170px);translate:-50% 0}
@media (prefers-reduced-motion:no-preference){.countdown-cast{animation:crArrive .6s var(--ease-out) both}}

/* Wipe between the last answer and the results */
.wipe-art{width:150px}
.wipe-art .cr{filter:drop-shadow(0 14px 18px #24173f55)}
.wipe-dots{display:flex;gap:7px}
.wipe-dots i{width:10px;height:10px;border-radius:50%;background:#fff;animation:dot 1s ease-in-out infinite}
.wipe-dots i:nth-child(2){animation-delay:.15s}.wipe-dots i:nth-child(3){animation-delay:.3s}

@media (prefers-reduced-motion:no-preference){
  .scene-cloud--back{animation:crCloud 8s ease-in-out infinite}.scene-cloud--front{animation:crCloud 9s -3s ease-in-out infinite reverse}
  .av-stage .av,.phone-screen .av{animation:avatarBreathe 5s ease-in-out infinite;transform-origin:50% 80%}
}
@keyframes crCloud{50%{transform:translateX(14px) translateY(-6px)}}
@keyframes avatarBreathe{50%{transform:translateY(-1px) rotate(1deg)}}

@media(max-width:600px){
 [data-view="home"] .hero--club{margin-top:12px;padding:18px 14px 22px;border-radius:30px;gap:1px}
 [data-view="home"] .hero--club .hero-art{height:262px;max-width:370px}
 [data-view="home"] .hero--club .art-phone{width:130px;height:243px;top:0;border-radius:27px}
 [data-view="home"] .hero--club .phone-screen{padding-top:25px;border-radius:21px}
 [data-view="home"] .hero--club .phone-screen .av-ring{width:52px;height:52px}
 [data-view="home"] .hero--club .phone-name{font-size:13px}.phone-sub{overflow-wrap:anywhere}
 [data-view="home"] .hero--club .art-av{width:140px;bottom:0}
 [data-view="home"] .hero--club .art-av--a{left:-14px}
 [data-view="home"] .hero--club .art-av--b{right:-14px}
 [data-view="home"] .hero--club .art-bubble{font-size:11px;padding:6px 8px;max-width:44%;top:18px}
 [data-view="home"] .hero--club .art-bubble--b{top:58px}
 [data-view="home"] .hero--club .art-stamp{top:126px;font-size:18px}
 [data-view="home"] .hero--club h1{font-size:clamp(32px,9vw,43px);margin-top:9px;max-width:none}
 [data-view="home"] .hero--club .lead{font-size:14px;max-width:28ch;margin-top:10px}
 [data-view="home"] .hero--club .hero-cta{display:grid;gap:4px;margin-top:17px}
 [data-view="home"] .hero--club .hero-cta .btn--pink{max-width:290px;width:100%;font-size:17px;padding:13px 20px}
 [data-view="home"] .hero--club .hero-cta .btn--ghost{font-size:12px;padding:12px 5px 0;justify-self:center}
 [data-view="home"] .home-intro{margin-top:30px;padding:27px 20px;border-radius:25px}
 .scene-cloud--back{left:0;top:100px;width:120px}.scene-cloud--front{right:0;width:130px}
 .share-buddy,.invite-scene .invite-buddy{width:100px}
}
@media(max-width:350px){[data-view="home"] .hero--club .art-av{width:122px}[data-view="home"] .hero--club .art-phone{width:122px;height:237px}[data-view="home"] .hero--club .hero-art{height:250px}[data-view="home"] .hero--club .art-bubble{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cr *,.cr,.scene-cloud,.av-stage .av,.phone-screen .av{animation:none!important;transition:none!important}[data-view="home"] .finger{display:none}}