/* ============================================================
   The Club: a bright sky over three worlds (Social, Business, Golf & Ocean), each one drawn and moving
   ============================================================ */
.club-back{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;padding:16px;background:rgba(8,20,40,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .3s ease}
.club-back.open{opacity:1}
.club{--ink:#13233f;--muted:#5b6b85;--ocean:#1d8fc4;--sea:#0d5f93;--coral:#ff7a6b;--green:#3fa356;--line:rgba(19,35,63,.10);
  position:relative;isolation:isolate;width:min(1040px,100%);max-height:min(92dvh,940px);overflow-y:auto;overscroll-behavior:contain;
  padding:32px 26px 24px;border-radius:30px;color:var(--ink);
  background:linear-gradient(180deg,#bfe6ff 0%,#e7f5ff 34%,#fff8ee 78%,#ffeedd 100%);
  box-shadow:0 40px 120px rgba(5,20,45,.45),inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(26px) scale(.98);transition:transform .45s cubic-bezier(.2,.9,.2,1);scrollbar-width:thin;scrollbar-color:rgba(19,35,63,.25) transparent}
.club-back.open .club{transform:none}
/* The sky: soft clouds drift across, birds glide. */
.club-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.club-cloud{position:absolute;width:180px;height:56px;border-radius:999px;background:#fff;opacity:.75;filter:blur(1px);animation:club-drift linear infinite}
.club-cloud::before,.club-cloud::after{content:"";position:absolute;border-radius:50%;background:#fff}
.club-cloud::before{width:80px;height:80px;left:26px;top:-36px}.club-cloud::after{width:60px;height:60px;left:88px;top:-24px}
.club-cloud.c1{top:40px;animation-duration:60s;animation-delay:-10s}
.club-cloud.c2{top:150px;transform:scale(.7);opacity:.6;animation-duration:80s;animation-delay:-40s}
.club-cloud.c3{top:96px;transform:scale(.5);opacity:.55;animation-duration:95s;animation-delay:-70s}
@keyframes club-drift{from{left:-240px}to{left:110%}}
/* Always on top and always in reach: it rides in the glass bar while the screen scrolls. */
.club-x{position:sticky;top:-20px;z-index:30;margin:-14px -8px -42px auto;display:grid;touch-action:manipulation;-webkit-tap-highlight-color:transparent;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(19,35,63,.14);background:rgba(255,255,255,.75);color:var(--ink);cursor:pointer;box-shadow:0 4px 14px rgba(19,35,63,.12)}
.club-x svg,.club-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.club-head{display:grid;justify-items:center;gap:6px;text-align:center;margin:0 auto 18px;max-width:560px}
.club-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#eef7ff 70%);
  box-shadow:0 0 0 1px rgba(29,143,196,.18),0 0 0 7px rgba(255,255,255,.55),0 14px 36px rgba(29,143,196,.28),0 0 26px rgba(139,92,246,.18);animation:club-mark-in .9s cubic-bezier(.2,.9,.2,1) both}
.club-crown{stroke:none}
.club-mark .club-crown{width:50px;height:50px;overflow:visible}
.club-crown-feather{filter:drop-shadow(0 0 2px rgba(139,92,246,.7)) drop-shadow(0 0 5px rgba(34,211,238,.45));transform-box:fill-box;transform-origin:0% 100%;animation:club-quill 5s ease-in-out infinite}
@keyframes club-quill{50%{transform:rotate(-5deg)}}
@keyframes club-mark-in{from{opacity:0;transform:translateY(-8px) scale(.85)}}
/* The folded header: a glass bar with the crown once the title has scrolled away. */
.club-mini{position:sticky;top:-32px;z-index:5;display:flex;align-items:center;justify-content:center;gap:8px;height:0;margin:-32px -26px 0;overflow:visible;pointer-events:none}
.club-mini::before{content:"";position:absolute;inset:0 0 auto;height:58px;background:rgba(236,247,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(19,35,63,.08);opacity:0;transform:translateY(-100%);transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.2,1)}
.club-mini .club-crown,.club-mini span{position:relative;top:29px;opacity:0;transform:translateY(-10px);transition:opacity .3s .05s,transform .4s .05s cubic-bezier(.2,.9,.2,1)}
.club-mini .club-crown{width:26px;height:26px;overflow:visible}
.club-mini span{font:600 17px/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--ink)}
.club-mini.on::before,.club-mini.on .club-crown,.club-mini.on span{opacity:1;transform:none}
.club-head{will-change:transform,opacity}
.club-card > *{transition:opacity .12s linear}
.club-eyebrow{margin:6px 0 0;color:var(--ocean);font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.32em;text-transform:uppercase}
.club-title{margin:0;font:600 clamp(36px,6vw,54px)/1.05 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;letter-spacing:.01em;color:var(--ink)}
.club-sub{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.club-reason{margin:0 auto 18px;max-width:560px;padding:10px 18px;border-radius:999px;text-align:center;background:#fff;color:var(--ink);font-size:14px;box-shadow:0 6px 20px rgba(19,35,63,.10);border:1px solid rgba(29,143,196,.25)}
.club-reason[hidden]{display:none}
.club-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.club-cards{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
@media (max-width:600px){.club{padding:28px 14px 18px}.club-x{top:-18px;margin:-12px -2px -42px auto}.club-mini{margin:-28px -14px 0;top:-28px}.cn-pin.p1{left:3%;top:120px}.cn-pin.p2{display:none}.cn-club{right:4%;top:210px;transform:scale(.7)}}
/* A card: its world on top, then what it includes. */
.club-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 0 18px;border-radius:24px;overflow:visible;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(19,35,63,.14);
  animation:club-card-in .6s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--i) * 90ms);transition:transform .25s ease,box-shadow .25s ease}
.club-card:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(19,35,63,.2)}
@keyframes club-card-in{from{opacity:0;transform:translateY(18px)}}
.club-card > :not(.club-scene){margin-left:18px;margin-right:18px}
.club-scene{position:relative;height:160px;margin:0;border-radius:24px 24px 0 0;overflow:hidden}
.club-scene svg{display:block;width:100%;height:100%;stroke:none;stroke-width:1;fill:none}
.club-scene text{stroke:none;font-weight:500;letter-spacing:.02em}
.club-scene-name{position:absolute;left:14px;bottom:10px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);font:700 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.club-card h3{margin:0;font:600 23px/1.2 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--ink)}
.club-tagline{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.4}
.club-price{margin:0;display:flex;align-items:baseline;gap:4px}
.club-price strong{font:600 36px/1 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--ink)}
.club-price span{color:var(--muted);font-size:13px}
.club-features{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1}
.club-features li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:start;font-size:13.5px;line-height:1.35}
.club-features li svg{grid-row:span 2;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.club-feature-name{color:var(--muted);font:600 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.club-feature-value{color:var(--ink)}
.club-features li.is-off{opacity:.4}
.club-features li.is-off svg{stroke:#8a96a8}
.club-cta{min-height:50px;padding:12px 16px;border-radius:999px;border:1px solid rgba(19,35,63,.16);background:#fff;color:var(--ink);font:600 15px/1.2 system-ui,sans-serif;cursor:pointer;transition:transform .12s,box-shadow .2s}
.club-cta:disabled{opacity:.6;cursor:default}
.club-cta.is-join{border:0;color:#fff;box-shadow:0 10px 26px rgba(19,35,63,.22)}
.club-cta:active:not(:disabled){transform:scale(.97)}
.club-plan-free .club-cta:not(:disabled){border:0;color:#fff;background:linear-gradient(135deg,#ff8a7a,#f06aa6);box-shadow:0 10px 26px rgba(240,106,166,.3)}
.club-plan-thinker .club-cta.is-join{background:linear-gradient(135deg,#1f3b73,#3f6fb6)}
.club-plan-executive .club-cta.is-join{background:linear-gradient(135deg,#1d8fc4,#3fa356)}
.club-ribbon{position:absolute;z-index:2;top:-11px;right:16px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#1f3b73,#3f6fb6);color:#fff;font:700 10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 16px rgba(31,59,115,.35)}
.club-card.is-current::after{content:"Your plan";position:absolute;z-index:2;top:-11px;left:16px;padding:5px 12px;border-radius:999px;background:#fff;color:var(--ocean);font:700 10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 16px rgba(19,35,63,.18)}
.club-card.is-suggested{box-shadow:0 0 0 2px rgba(29,143,196,.55),0 22px 60px rgba(29,143,196,.25)}
.club-msg{margin:14px 0 0;text-align:center;color:var(--ink);font-size:14px;min-height:1em}
.club-msg.error{color:#d94a4a}
.club-fine{margin:10px 0 0;text-align:center;color:var(--muted);font-size:12px}
.club-loading{grid-column:1/-1;height:260px;border-radius:24px;background:linear-gradient(110deg,rgba(255,255,255,.4) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.4) 70%) 0 0/250% 100%;animation:club-shimmer 1.4s linear infinite}
@keyframes club-shimmer{from{background-position:130% 0}to{background-position:-130% 0}}

/* ---------- the sky's neon golf: light, glowing, never in the way ---------- */
.club-neon{position:absolute;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cn-pin{width:34px;height:90px;stroke:#22d3ee;stroke-width:2;filter:drop-shadow(0 0 3px #22d3ee) drop-shadow(0 0 10px rgba(34,211,238,.55));opacity:.55}
.cn-pin .cn-cloth{fill:rgba(232,121,249,.25);stroke:#e879f9;transform-box:fill-box;transform-origin:left center;animation:sc-flag 2.2s ease-in-out infinite}
.cn-pin.p1{left:9%;top:150px;opacity:.75}
.cn-pin.p2{left:22%;top:96px;transform:scale(.6);opacity:.6;stroke:#a3e635;filter:drop-shadow(0 0 3px #a3e635) drop-shadow(0 0 10px rgba(163,230,53,.5))}
.cn-club{width:44px;height:126px;right:13%;top:66px;stroke:#e879f9;stroke-width:2;opacity:.7;filter:drop-shadow(0 0 3px #e879f9) drop-shadow(0 0 12px rgba(232,121,249,.5));transform-origin:80% 4%;animation:cn-swing 7s ease-in-out infinite}
@keyframes cn-swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.cn-feather{width:26px;height:28px;stroke:#8b5cf6;stroke-width:1.3;opacity:0;filter:drop-shadow(0 0 3px rgba(139,92,246,.8)) drop-shadow(0 0 8px rgba(34,211,238,.45));animation:cn-float 16s ease-in-out infinite}
.cn-feather.f1{left:14%;animation-delay:0s}.cn-feather.f2{left:38%;animation-delay:-4s;stroke:#22d3ee;width:20px}
.cn-feather.f3{left:66%;animation-delay:-8s;stroke:#ec4899}.cn-feather.f4{left:88%;animation-delay:-12s;width:18px}
@keyframes cn-float{0%{top:88%;opacity:0;transform:rotate(-20deg) translateX(0)}12%{opacity:.6}50%{transform:rotate(18deg) translateX(18px)}88%{opacity:.5}100%{top:4%;opacity:0;transform:rotate(-12deg) translateX(-10px)}}
.club-streak{position:absolute;width:150px;height:2.5px;border-radius:3px;opacity:0;transform:rotate(-16deg);
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.15) 30%,#22d3ee 75%,#f0abfc);box-shadow:0 0 8px rgba(34,211,238,.7);animation:cn-streak 9s cubic-bezier(.3,.1,.2,1) infinite}
.club-streak::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 14px #e879f9,0 0 24px #22d3ee}
.club-streak.s1{top:22%;animation-delay:-1s}.club-streak.s2{top:58%;animation-delay:-4s;animation-duration:11s}.club-streak.s3{top:80%;animation-delay:-7s;animation-duration:13s;filter:hue-rotate(60deg)}
@keyframes cn-streak{0%{left:-20%;opacity:0;margin-top:40px}4%{opacity:.85}22%{left:110%;opacity:.85;margin-top:-40px}24%,100%{left:110%;opacity:0;margin-top:-40px}}

/* ---------- the scenes in motion ---------- */
.sc-sun{animation:sc-glow 5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes sc-glow{50%{opacity:1;transform:scale(1.08)}}
/* Free: the organism thinks. The core breathes, nodes light in turn, the files it writes appear and settle. */
.sc-core{animation:sc-breathe 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sc-core-halo{animation:sc-halo 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes sc-breathe{50%{transform:scale(1.14)}}
@keyframes sc-halo{0%,100%{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.sc-orbit{animation:sc-spin 14s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-web{stroke-dasharray:3 4;animation:sc-dash 4s linear infinite}
@keyframes sc-dash{to{stroke-dashoffset:-28}}
.sc-nodes circle{transform-box:fill-box;transform-origin:center;animation:sc-node 3.2s ease-in-out infinite}
.sc-nodes .n1{animation-delay:-.8s}.sc-nodes .n2{animation-delay:-1.6s}.sc-nodes .n3{animation-delay:-2.4s}
@keyframes sc-node{0%,100%{transform:scale(1);fill:#fff}40%{transform:scale(1.45);fill:#e9d5ff}}
.sc-file{transform-box:fill-box;transform-origin:center;opacity:0;animation:sc-file 8s cubic-bezier(.2,.9,.2,1) infinite;filter:drop-shadow(0 3px 6px rgba(124,58,237,.18))}
.sc-file.f2{animation-delay:2s}.sc-file.f3{animation-delay:4s}.sc-file.f4{animation-delay:6s}
@keyframes sc-file{0%{opacity:0;transform:translateY(6px) scale(.85)}8%,62%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-4px)}}
/* Business: windows blink, the water shimmers, the neon chart draws itself, a plane crosses with its contrail. */
.sc-windows rect{animation:sc-blink 3.6s steps(2) infinite}
.sc-windows .w2{animation-delay:-.9s}.sc-windows .w3{animation-delay:-1.8s}.sc-windows .w4{animation-delay:-2.7s}
@keyframes sc-blink{0%,40%{opacity:1}50%,90%{opacity:.15}}
.sc-shimmer path{animation:sc-twinkle 2.4s ease-in-out infinite}
.sc-shimmer path:nth-child(2){animation-delay:-.6s}.sc-shimmer path:nth-child(3){animation-delay:-1.2s}.sc-shimmer path:nth-child(4){animation-delay:-1.8s}
@keyframes sc-twinkle{50%{opacity:.15}}
.sc-chart{stroke-dasharray:420;stroke-dashoffset:420;animation:sc-draw 5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sc-draw{0%{stroke-dashoffset:420}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sc-chart-dot{animation:sc-pop 5s ease infinite;transform-box:fill-box;transform-origin:center}
@keyframes sc-pop{0%,50%{transform:scale(0)}60%{transform:scale(1.6)}70%,85%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
.sc-plane{offset-path:path("M-10 30 C 80 12, 190 36, 340 10");animation:sc-fly 12s linear infinite}
@keyframes sc-fly{from{offset-distance:0%}to{offset-distance:100%}}
/* Golf & Ocean: sun glitter on the sea, waves roll, the boat bobs, the flag waves, a ball streaks in on a neon trail. */
.sc-glitter path{stroke-width:1.4;animation:sc-twinkle 1.8s ease-in-out infinite}
.sc-glitter .g2{animation-delay:-.6s}.sc-glitter .g3{animation-delay:-1.2s}
.sc-wave{animation:sc-roll 6s linear infinite}
.sc-wave.w2{animation-duration:9s;animation-direction:reverse}
@keyframes sc-roll{to{transform:translateX(40px)}}
.sc-boat{animation:sc-bob 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes sc-bob{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(-6px,1.5px) rotate(2deg)}}
.sc-flag-cloth{animation:sc-flag 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
@keyframes sc-flag{50%{transform:scaleX(.82) skewY(6deg)}}
.sc-streak{stroke-dasharray:240;stroke-dashoffset:240;animation:sc-streak 4.8s linear infinite}
@keyframes sc-streak{0%{stroke-dashoffset:240;opacity:1}62%{stroke-dashoffset:0;opacity:1}85%,100%{stroke-dashoffset:0;opacity:0}}

/* Worlds that turn: crossfade with a slow push-in; the name tag and the dots follow. */
.club-slide{position:absolute;inset:0;opacity:0;transform:scale(1.07);transition:opacity 1.1s ease,transform 5.6s cubic-bezier(.2,.6,.2,1)}
.club-slide.on{opacity:1;transform:scale(1)}
.club-scene-name{z-index:2;transition:opacity .26s ease,transform .26s ease}
.club-scene-name.swap{opacity:0;transform:translateY(4px)}
.club-scene-dots{position:absolute;z-index:2;right:14px;bottom:15px;display:flex;gap:5px}
.club-scene-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:width .35s ease,background .35s}
.club-scene-dots i.on{width:16px;background:#fff}
/* Thought Projects: the cards settle, ticks draw, an idea travels between them. */
.sc-card{animation:sc-float 6s ease-in-out infinite;transform-box:fill-box}
.sc-card.c2{animation-delay:-2s}.sc-card.c3{animation-delay:-4s}
@keyframes sc-float{50%{transform:translateY(-3px)}}
.sc-tick{stroke-dasharray:24;stroke-dashoffset:24;animation:sc-tick 4.6s ease infinite}
.sc-tick.t2{animation-delay:.6s}.sc-tick.t3{animation-delay:1.2s}
@keyframes sc-tick{0%,10%{stroke-dashoffset:24}30%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sc-spark{transform-box:fill-box;transform-origin:center;animation:sc-sparkle 2.4s ease-in-out infinite}
@keyframes sc-sparkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
/* Research: a lens glides along the shelves. */
.sc-lens{animation:sc-lens 9s ease-in-out infinite}
@keyframes sc-lens{0%{transform:translate(40px,34px)}25%{transform:translate(150px,74px)}50%{transform:translate(270px,40px)}75%{transform:translate(200px,118px)}100%{transform:translate(40px,34px)}}
/* Salons: the chandelier glitters, conversation comes and goes. */
.sc-crystals circle{animation:sc-twinkle 2s ease-in-out infinite}
.sc-crystals circle:nth-child(2n){animation-delay:-.7s}.sc-crystals circle:nth-child(3n){animation-delay:-1.3s}
.sc-talk > *{transform-box:fill-box;transform-origin:center bottom;animation:sc-talk 4.5s ease-in-out infinite}
.sc-talk .k2{animation-delay:-1.5s}.sc-talk .k3{animation-delay:-.2s}
@keyframes sc-talk{0%,100%{opacity:0;transform:translateY(4px) scale(.9)}20%,70%{opacity:1;transform:none}}
/* Markets: candles rise in turn, the average draws, the tape runs. */
.sc-candle{transform-box:fill-box;transform-origin:center bottom;animation:sc-candle 4.6s cubic-bezier(.2,.9,.2,1) infinite both}
@keyframes sc-candle{0%{transform:scaleY(0);opacity:0}15%,90%{transform:none;opacity:1}100%{opacity:0}}
.sc-ma{stroke-dasharray:320;stroke-dashoffset:320;animation:sc-ma 4.6s ease infinite}
@keyframes sc-ma{0%,20%{stroke-dashoffset:320}70%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sc-ticker{animation:sc-ticker 14s linear infinite}
@keyframes sc-ticker{to{transform:translateX(-50%)}}
/* Fine Dining: candles flicker, glasses lift and clink, pendant lights breathe. */
.sc-flame{transform-box:fill-box;transform-origin:center bottom;animation:sc-flicker 1.3s ease-in-out infinite}
.sc-flame.f2{animation-delay:-.6s}
@keyframes sc-flicker{0%,100%{transform:scale(1,1)}30%{transform:scale(.9,1.12) skewX(3deg)}60%{transform:scale(1.05,.94) skewX(-3deg)}}
.sc-glass{transform-box:fill-box;transform-origin:center bottom;animation:sc-toast 4.6s ease-in-out infinite}
.sc-glass.g-right{animation-name:sc-toast-r}
@keyframes sc-toast{0%,20%,80%,100%{transform:none}45%,55%{transform:translate(34px,-10px) rotate(12deg)}}
@keyframes sc-toast-r{0%,20%,80%,100%{transform:none}45%,55%{transform:translate(-34px,-10px) rotate(-12deg)}}
.sc-clink{transform-box:fill-box;transform-origin:center;opacity:0;animation:sc-clink 4.6s ease infinite}
@keyframes sc-clink{0%,46%{opacity:0;transform:scale(.3)}52%{opacity:1;transform:scale(1.4)}62%,100%{opacity:0;transform:scale(.8)}}
.sc-pendant circle{animation:sc-twinkle 3s ease-in-out infinite}
/* Travel: the route draws, the jet follows it to the pin, the clouds drift at two speeds. */
.sc-route{animation:sc-dash 3s linear infinite}
.sc-dest{transform-box:fill-box;transform-origin:center bottom;animation:sc-dest 2s ease-in-out infinite}
@keyframes sc-dest{50%{transform:translateY(-3px) scale(1.06)}}
.sc-clouds-back{animation:sc-drift-c 30s linear infinite}
.sc-clouds-front{animation:sc-drift-c 16s linear infinite}
@keyframes sc-drift-c{to{transform:translateX(-300px)}}

/* A guest, always reminded: a bright pill under the top bar. */
.club-guest{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 70px);z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100vw - 24px);
  padding:8px 16px;border-radius:999px;border:0;background:linear-gradient(135deg,rgba(29,143,196,.95),rgba(63,163,86,.95));
  color:#fff;font:13px/1.2 system-ui,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:0 8px 24px rgba(29,143,196,.35);animation:club-guest-in .5s ease both}
.club-guest svg{width:14px;height:14px;fill:#fff;flex:none}
.club-guest strong{color:#fff;text-decoration:underline;text-underline-offset:3px}
.club-guest-more{overflow:hidden;text-overflow:ellipsis;opacity:.9}
@media (max-width:520px){.club-guest-more{display:none}}
@keyframes club-guest-in{from{opacity:0;transform:translate(-50%,-6px)}}

/* Intelligence levels outside the plan. */
[data-mode].is-club-locked,[data-boost].is-club-locked{opacity:.45;filter:grayscale(.4);position:relative}
[data-mode].is-club-locked::after{content:"Club";position:absolute;top:8px;right:10px;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,#1d8fc4,#3fa356);color:#fff;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}

/* Back from Stripe. */
.club-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 110px);z-index:2147483200;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  background:linear-gradient(135deg,#1d8fc4,#3fa356);color:#fff;font:600 15px/1.2 system-ui,sans-serif;box-shadow:0 12px 30px rgba(29,143,196,.35);
  transform:translate(-50%,16px);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.2,1)}
.club-toast.open{opacity:1;transform:translate(-50%,0)}
.club-toast svg{width:22px;height:22px;color:#fff}

/* The Club in the drawer. */
.drawer-club{display:flex;align-items:center;gap:10px;width:100%;margin:6px 0 2px;padding:11px 14px;border-radius:14px;border:0;
  background:linear-gradient(120deg,rgba(29,143,196,.85),rgba(63,163,86,.8));color:#fff;font:600 14px/1.2 system-ui,sans-serif;cursor:pointer;text-align:left;box-shadow:0 8px 22px rgba(29,143,196,.25)}
.drawer-club svg{width:22px;height:22px;color:#fff;flex:none}
.drawer-club span{flex:1}
.drawer-club small{color:rgba(255,255,255,.85);font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
@media (prefers-reduced-motion:reduce){.club-field *,.club-field,.club-card,.club-loading,.club-scene *{animation:none!important}.club,.club-back{transition:none}}

/* A higher tier includes the one below; your own tier: cancel (to the end of the period) or keep it. */
.club-features li.club-includes { grid-template-columns: 18px minmax(0, 1fr); padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px dashed rgba(19, 35, 63, .14); }
.club-features li.club-includes span { font: 600 italic 14px/1.3 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: var(--ink); }
.club-features li.club-includes svg { stroke: var(--ocean); }
.club-cta.is-cancel { background: #fff; color: #9a3b3b; border: 1px solid rgba(154, 59, 59, .3); }
.club-cta.is-keep { border: 0; color: #fff; background: linear-gradient(135deg, #1d8fc4, #3fa356); }
.club-ends { margin: -6px 18px 0 !important; text-align: center; color: #9a3b3b; font: 600 12.5px/1.3 system-ui, sans-serif; }
.club-billing { appearance: none; border: 0; background: none; margin: -6px 18px 0 !important; color: var(--muted); font: 600 12.5px/1.3 system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }