:root{
  --ink:#17283c; --muted:rgba(23,40,60,.64); --faint:rgba(23,40,60,.42); --line:rgba(23,40,60,.14);
  --paper:#f4ecd9; --secondary:#e3bc91; --accent:#2f727a; --sunset:#e86a2c; --neutral:#efe2c8;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;position:relative;min-height:100vh;overflow-x:hidden;background:var(--paper)}
a{color:inherit}
img{max-width:100%;display:block}
.display{font-family:'Luckiest Guy',cursive;font-weight:400}
#about,#shop,#newsletter{scroll-margin-top:96px}

/* ---- scroll reveal. One shared class, IntersectionObserver below adds .in once. ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(20px,5vw,48px)}

/* ---- nav: a floating liquid-glass pill, inset from the edges, not a flat bar.
   White-on-glass while the hero is behind it, flips to ink-on-paper once scrolled
   past the hero via the .scrolled class (JS toggles it). ---- */
nav.top{position:fixed;top:16px;left:50%;z-index:50;height:60px;
  width:min(1120px,calc(100% - 28px));transform:translateX(-50%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 18px;border-radius:980px;overflow:hidden;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 18px 40px -22px rgba(23,40,60,.55),inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background .4s var(--ease),border-color .4s var(--ease),top .35s var(--ease),
    box-shadow .4s var(--ease)}
nav.top::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 72%,rgba(255,255,255,.15) 100%)}
.wm{position:relative;display:block;width:110px;height:16px;z-index:1;flex:none}
.wm img{position:absolute;top:0;left:0;height:16px;width:auto;transition:opacity .3s var(--ease)}
.wm .logo-dark{opacity:0}
.wm .logo-light{opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
nav.top .links{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,2.6vw,26px)}
nav.top .links a{font-size:13px;color:#fff;text-decoration:none;opacity:.88;transition:opacity .2s var(--ease),color .3s var(--ease);
  text-shadow:0 1px 3px rgba(0,0,0,.3)}
nav.top .links a:hover{opacity:1}
@media (max-width:640px){nav.top .links a.hide-s{display:none}}

nav.top.scrolled{top:10px;background:rgba(244,236,217,.55);border-color:rgba(255,255,255,.5)}
nav.top.scrolled .wm .logo-dark{opacity:1}
nav.top.scrolled .wm .logo-light{opacity:0}
nav.top.scrolled .links a{color:var(--ink);text-shadow:none}
nav.top.scrolled .bag-btn{background:rgba(23,40,60,.08);color:var(--ink);border-color:rgba(23,40,60,.16)}
nav.top.scrolled .bag-btn:hover{background:rgba(23,40,60,.14)}

.bag-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;
  padding:9px 16px;border-radius:980px;background:rgba(255,255,255,.22);color:#fff;
  border:1px solid rgba(255,255,255,.45);cursor:pointer;backdrop-filter:blur(8px);
  transition:background .2s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bag-btn:hover{background:rgba(255,255,255,.34)}
.bag-count{font-variant-numeric:tabular-nums}

/* ---- hero. No photo or AI art: a CSS sky that rises up from the bottom edge on load.
   Muted, neutral stops (slate to warm stone) rather than a saturated cartoon sunset,
   closer to the quiet gradients on lifetime.life than a kids'-app sky. ---- */
.hero{position:relative;overflow:hidden;min-height:94svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:140px 20px 60px;
  background:#2c3440}

.hero-sky{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#2c3440 0%,#59626c 46%,#8c8478 76%,#cabfae 94%,var(--paper) 100%);
  clip-path:inset(100% 0 0 0);
  animation:skyRise 1.4s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes skyRise{to{clip-path:inset(0 0 0 0)}}

.hero-glow{position:absolute;left:50%;bottom:-10%;z-index:0;width:min(900px,120vw);aspect-ratio:1/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(214,203,186,.45) 0%,rgba(214,203,186,0) 72%);
  opacity:0;animation:glowIn 1.6s var(--ease) 1.1s forwards,glowPulse 7s ease-in-out 2.8s infinite}
@keyframes glowIn{to{opacity:1}}
@keyframes glowPulse{0%,100%{opacity:.82;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.05)}}

.hero-cloud{position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(18px);
  background:radial-gradient(closest-side,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);
  opacity:0;animation:cloudIn 1.8s var(--ease) forwards,cloudDrift 34s ease-in-out infinite alternate}
.hero-cloud.c1{width:420px;height:140px;top:22%;left:-8%;animation-delay:1.3s,1.3s}
.hero-cloud.c2{width:320px;height:110px;top:38%;right:-6%;animation-delay:1.5s,1.5s}
.hero-cloud.c3{width:260px;height:90px;top:14%;left:38%;animation-delay:1.7s,1.7s}
@keyframes cloudIn{to{opacity:.7}}
@keyframes cloudDrift{to{transform:translateX(26px)}}

/* ---- the liquid horizon: two wavy bands sitting at the sky/glow seam, bobbing on
   slightly different rhythms so the whole scene reads as fluid rather than a static
   gradient, the way layered water does rather than one flat line. ---- */
.hero-wave{position:absolute;left:-5%;right:-5%;bottom:14%;z-index:0;height:140px;pointer-events:none;
  opacity:0;animation:waveIn 1.4s var(--ease) 1s forwards,waveBob 9s ease-in-out infinite;
  animation-delay:1s,1s}
.hero-wave svg{width:100%;height:100%;display:block}
@keyframes waveIn{to{opacity:.55}}
@keyframes waveBob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-10px) scaleY(1.06)}}
.hero-wave-2{bottom:9%;height:120px;opacity:0;
  animation:wave2In 1.4s var(--ease) 1.25s forwards,wave2Bob 12s ease-in-out .4s infinite}
.hero-wave-2 svg path{fill:rgba(255,255,255,.7)}
@keyframes wave2In{to{opacity:.3}}
@keyframes wave2Bob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(8px) scaleY(1.08)}}
.hero-parallax{position:absolute;inset:0;z-index:0;will-change:transform}

/* ---- planes flying by, on real CSS motion paths (offset-path / offset-rotate)
   instead of a straight translate. Each plane's nose actually tracks the curve it's
   flying, banking into every bend, so jets drift and settle on a gentle cruise line,
   GA traffic climbs out on a diagonal, and the aerobatic plane genuinely loops instead
   of just spinning in place. Paths are authored in a fixed 1440x640 canvas that sits
   over the hero; off either edge is fine, it's meant to run past the frame. ---- */
.plane-fly{position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;transform-origin:center;
  offset-anchor:center;opacity:0}
.plane-fly svg{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.plane-fly .trail{width:120px;height:2px;margin-right:-4px;border-radius:2px;flex:none;
  background:linear-gradient(to left,rgba(255,255,255,.65),rgba(255,255,255,0))}
@keyframes planeFade{
  0%{opacity:0} 6%{opacity:.9} 94%{opacity:.9} 100%{opacity:0}
}
@keyframes flyOffset{to{offset-distance:100%}}
.plane-fly{animation:flyOffset linear infinite,planeFade linear infinite}

/* jets: a long, nearly level cruise line with just enough roll to feel aerodynamic,
   bigger and faster than the GA traffic, twin contrail via a box-shadow second line */
.plane-fly.jet .trail{box-shadow:0 7px 0 -1px rgba(255,255,255,.35)}
.plane-fly.j1{offset-path:path('M -140,120 C 220,78 560,150 900,96 C 1180,54 1420,92 1600,70');
  offset-rotate:auto 2deg;animation-duration:16s;animation-delay:1s}
.plane-fly.j1 svg{width:36px;height:17px}
.plane-fly.j1 .trail{width:170px}
.plane-fly.j2{offset-path:path('M -140,470 C 160,430 480,500 760,440 C 1040,380 1320,430 1600,400');
  offset-rotate:auto -1deg;animation-duration:20s;animation-delay:13s}
.plane-fly.j2 svg{width:27px;height:13px}
.plane-fly.j2 .trail{width:130px;opacity:.8}

/* GA cruise traffic: a steadier diagonal climb-out, smaller and slower, nose pitched
   a touch above the path tangent so it reads as climbing rather than coasting */
.plane-fly.ga1{offset-path:path('M -120,330 C 140,280 360,340 560,260 C 780,172 1020,230 1260,150 C 1420,100 1520,120 1600,96');
  offset-rotate:auto 10deg;animation-duration:30s;animation-delay:6s}
.plane-fly.ga1 svg{width:21px;height:12px}
.plane-fly.ga1 .trail{width:75px}
.plane-fly.ga2{offset-path:path('M -120,560 C 120,520 320,580 520,520 C 760,450 960,500 1180,430 C 1380,368 1500,390 1600,360');
  offset-rotate:auto 10deg;animation-duration:36s;animation-delay:22s}
.plane-fly.ga2 svg{width:16px;height:9px}
.plane-fly.ga2 .trail{width:55px;opacity:.7}

/* the aerobatic GA plane: one real loop (climb, over the top, dive, pull out) built
   into the path itself, so offset-rotate:auto banks and inverts it through the loop
   instead of faking it with an independent spin. */
.plane-fly.aero .trail{width:44px;opacity:.55}
.plane-fly.aero svg{width:22px;height:12px}
.plane-fly.aero{offset-path:path('M -120,420 C 120,380 280,330 380,270 C 460,222 460,150 390,128 C 322,106 262,150 270,210 C 278,270 350,296 410,268 C 470,240 500,178 580,160 C 760,120 980,260 1180,230 C 1360,204 1480,250 1600,230');
  offset-rotate:auto;animation-duration:22s;animation-delay:4s}

/* ---- the wordmark floats gently once it has settled in, so it keeps feeling alive
   instead of sitting dead still. The float lives on the wrapper so it never fights
   the entrance animation on the image itself. ---- */
.wordmark-wrap{position:relative;z-index:1;animation:wordFloat 7s ease-in-out 2s infinite}
@keyframes wordFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero img.wordmark{position:relative;width:min(480px,58vw);
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));
  opacity:0;transform:translateY(22px);animation:heroIn 1.1s var(--ease) .75s forwards}
.hero p{margin:22px 0 0;font-size:clamp(1rem,2vw,1.2rem);line-height:1.55;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.4);max-width:44ch}
.hero .cue{position:relative;z-index:1;margin-top:40px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.75);text-shadow:0 1px 4px rgba(0,0,0,.4);
  opacity:0;animation:heroIn .9s var(--ease) 1.3s forwards}

/* ---- top tagline, pinned under the nav regardless of where the wordmark centers ---- */
.hero-tag{position:absolute;top:clamp(96px,16vh,150px);left:0;right:0;z-index:1;text-align:center;
  font-size:clamp(13px,1.6vw,15px);font-weight:650;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4);
  opacity:0;animation:heroIn .9s var(--ease) .35s forwards}

@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .hero img.wordmark,.hero .cue,.hero-tag{animation:none;opacity:1;transform:none}
  .hero-sky{animation:none;clip-path:inset(0 0 0 0)}
  .hero-glow{animation:none;opacity:1}
  .hero-cloud{animation:none;opacity:.7}
  .hero-wave{animation:none;opacity:.55}
  .hero-wave-2{animation:none;opacity:.3}
  .wordmark-wrap{animation:none}
  .plane-fly{animation:none;opacity:.9;offset-path:none;offset-distance:0;left:30%;top:40%}
}

/* ---- section shell, flat paper below the hero, no background art ---- */
section{padding:clamp(60px,10vh,120px) 0}
.head{text-align:center;margin:0 0 clamp(36px,6vh,56px)}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
h2.h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(2.6rem,7vw,4.6rem);
  letter-spacing:.01em;line-height:1.05;margin:0;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}

/* ---- glass recipe, reused by cards, the newsletter panel, and the drawer. Opacity is
   higher than a true blur-glass needs because there is no art behind it to blur, just
   flat paper, so the tint itself has to carry the contrast. ---- */
.glass{position:relative;background:rgba(255,255,255,.6);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 50px -24px rgba(23,40,60,.45),inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -30px 40px -30px rgba(255,255,255,.2)}
.glass::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 32%,
    rgba(255,255,255,0) 68%,rgba(255,255,255,.18) 100%)}
/* ---- a slow light sweep across the glass, so it catches the eye like real liquid
   glass does rather than sitting as a flat tint. ---- */
.glass::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 49%,transparent 63%);
  background-size:260% 260%;background-position:-70% -70%;opacity:.8;
  animation:glassSheen 7s ease-in-out infinite}
@keyframes glassSheen{0%,100%{background-position:-70% -70%}50%{background-position:70% 70%}}
@media (prefers-reduced-motion:reduce){.glass::after{animation:none;opacity:.3}}

/* ---- about / brand story panel ---- */
.about-shell{border-radius:26px;padding:clamp(32px,6vw,56px);text-align:center}
.about-copy{font-size:clamp(1rem,2vw,1.15rem);line-height:1.6;color:var(--muted);
  max-width:56ch;margin:18px auto 0}
.about-credit{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin:22px 0 0}

/* ---- product row, liquid-glass cards in a smooth snap-scroll track like the
   location-card rows on lifetime.life, instead of a static grid ---- */
.grid-wrap{position:relative;margin:0 calc(-1 * clamp(20px,5vw,48px));padding:0 clamp(20px,5vw,48px)}
.grid-wrap::after{content:'';position:absolute;top:0;right:0;bottom:8px;width:64px;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,236,217,0),var(--paper) 120%)}
.grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.grid::-webkit-scrollbar{display:none}
.card{flex:0 0 min(80vw,320px);scroll-snap-align:start;border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.grid .card:nth-child(1){transition-delay:0s}
.grid .card:nth-child(2){transition-delay:.09s}
.grid .card:nth-child(3){transition-delay:.18s}
.grid .card:nth-child(4){transition-delay:.27s}
.card .shot{position:relative;aspect-ratio:1/1;background:rgba(23,40,60,.3);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.3)}
.card .shot .soon{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.card .shot img{width:68%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
.card .info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0}
.name{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:24px;letter-spacing:.01em;margin:0;color:var(--ink)}
.price{font-size:15px;color:var(--muted);margin:0}
.buy{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:650;font-size:14px;
  padding:13px 18px;border-radius:12px;border:none;cursor:not-allowed;opacity:.6}
.buy:not([disabled]){cursor:pointer;opacity:1}
.buy:not([disabled]):hover{filter:brightness(1.08)}
.size-pick{font-size:14px;color:var(--ink);padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.5);width:100%}

/* ---- product detail page: image left, info right on desktop, stacked on mobile ---- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);
  align-items:start;padding-top:clamp(120px,16vh,160px)}
@media (max-width:760px){.pdp{grid-template-columns:1fr}}
.pdp-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);
  text-decoration:none;margin-bottom:18px}
.pdp-back:hover{color:var(--ink)}
.pdp-shot{border-radius:26px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.5)}
.pdp-shot img{width:88%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 28px rgba(0,0,0,.2))}
.pdp-tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.pdp-name{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(2rem,5vw,2.8rem);
  margin:0 0 12px;color:var(--ink)}
.pdp-price{font-size:19px;color:var(--ink);font-weight:650;margin:0 0 20px}
.pdp-copy{font-size:15px;line-height:1.65;color:var(--muted);max-width:52ch;margin:0 0 28px}
.pdp-buy{display:flex;flex-direction:column;gap:14px;max-width:360px}
.pdp .size-pick{padding:12px 14px}
.pdp .buy{padding:15px 20px;font-size:15px}

/* ---- newsletter, liquid-glass panel tinted with the accent, on the clear ground ---- */
.news-shell{border-radius:22px;background:rgba(47,114,122,.38);
  padding:clamp(28px,5vw,48px);text-align:center;overflow:hidden}
.news-shell h3{margin:0 0 10px;font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(1.8rem,4vw,2.4rem);color:#fff}
.news-shell p{margin:0 0 22px;font-size:14px;color:rgba(255,255,255,.85);max-width:42ch;margin-inline:auto}
.news-form{display:flex;gap:10px;max-width:420px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news-form input{flex:1;min-width:200px;padding:13px 16px;border-radius:980px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);color:#fff;font-size:14px;outline:none}
.news-form input::placeholder{color:rgba(255,255,255,.6)}
.news-form input:focus{border-color:rgba(255,255,255,.85)}
.news-form button{padding:13px 22px;border-radius:980px;border:none;background:#fff;color:var(--ink);
  font-weight:650;font-size:14px;cursor:pointer}
.news-status{margin:12px 0 0;font-size:13px;min-height:18px;color:#fff}

footer{border-top:1px solid var(--line);padding:28px 0 40px;text-align:center}
footer p{margin:0;font-size:13px;color:var(--muted)}

/* ---- cart drawer ---- */
.scrim{position:fixed;inset:0;background:rgba(10,12,16,.4);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:95;
  background:rgba(246,243,236,.86);backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-left:1px solid rgba(255,255,255,.5);transform:translateX(100%);
  transition:transform .35s var(--ease);display:flex;flex-direction:column}
.drawer.is-open{transform:translateX(0)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;
  border-bottom:1px solid var(--line)}
.drawer-top span{font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.drawer-top .x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:12px 22px}
.drawer-empty{font-size:14px;color:var(--muted);padding:30px 0;text-align:center}
.line{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line-name{font-size:14px;font-weight:650;color:var(--ink)}
.line-sub{font-size:12px;color:var(--faint)}
.qty{display:flex;align-items:center;gap:10px;margin-top:6px}
.qty button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer}
.line-price{margin-left:auto;font-size:14px;font-weight:650;color:var(--ink)}
.drawer-foot{padding:18px 22px 24px;border-top:1px solid var(--line)}
.drawer-total{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);margin-bottom:6px}
.drawer-note{font-size:12px;color:var(--faint);margin:0 0 14px}
.pill.solid.wide{width:100%;background:var(--accent);color:#fff;border:none;padding:14px;border-radius:12px;
  font-size:15px;font-weight:650;cursor:pointer}
.pill.solid.wide:disabled{opacity:.45;cursor:default}

.co{position:fixed;inset:0;z-index:98;background:var(--paper);transform:translateY(100%);
  transition:transform .35s var(--ease);display:flex;flex-direction:column}
.co.on{transform:translateY(0)}
.co-top{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.co-top .x{background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink)}
.co-mount{flex:1;overflow-y:auto}
.co-err{text-align:center;color:#b3261e;font-size:14px;padding:16px}

/* ---- floating finder pill, the lifetime.life "find your club" pattern ---- */
.find-pill{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:980px;background:rgba(23,40,60,.84);color:#fff;text-decoration:none;
  font-size:13px;font-weight:650;letter-spacing:.02em;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 16px 34px -16px rgba(23,40,60,.65);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.find-pill.show{opacity:1;transform:translateY(0);pointer-events:auto}
.find-pill svg{width:14px;height:14px;flex:none}
@media (prefers-reduced-motion:reduce){.find-pill{transition:opacity .2s linear}}