/* ==========================================================================
   Maxxed — design system
   One palette (blue → violet → pink) on a quiet neutral base, used the same
   way on every section. Motion is transform + opacity only, eased with the
   same curve everywhere, so it stays smooth on phones.
   ========================================================================== */

:root{
  /* brand */
  --blue:#5B7CFA; --violet:#7C5CF6; --pink:#E879C9;
  --blue-rgb:91,124,250; --violet-rgb:124,92,246; --pink-rgb:232,121,201;
  --grad:linear-gradient(100deg,var(--blue) 0%,var(--violet) 50%,var(--pink) 100%);

  /* dark base (default; light overrides below) */
  --bg:#0A0B10; --bg-2:#12131B;
  --ink:#F3F4F8; --ink-70:rgba(243,244,248,.70); --ink-45:rgba(243,244,248,.46); --ink-20:rgba(243,244,248,.2);
  --w:243,244,248; --k:10,11,16;
  --line:rgba(var(--w),.08); --line-2:rgba(var(--w),.14);
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(var(--w),.05) inset,0 24px 50px -36px rgba(0,0,0,.9);
  --shadow-hover:0 1px 0 rgba(var(--w),.08) inset,0 30px 60px -40px rgba(0,0,0,.95);
  --btn-bg:#F3F4F8; --btn-ink:#0A0B10;
  --wash:.5;

  /* aliases used by older markup/scripts */
  --ivory:var(--ink); --ivory-70:var(--ink-70); --ivory-45:var(--ink-45); --ivory-20:var(--ink-20);

  --r:22px; --r-lg:30px; --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.22,1,.36,1);
  --serif:"Instrument Serif","Bodoni 72",Didot,Georgia,serif;
  --font:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
}
html[data-theme=light]{
  --bg:#FAFAFC; --bg-2:#FFFFFF;
  --ink:#0E1220; --ink-70:rgba(14,18,32,.68); --ink-45:rgba(14,18,32,.46); --ink-20:rgba(14,18,32,.2);
  --w:14,18,32; --k:255,255,255;
  --line:rgba(14,18,32,.08); --line-2:rgba(14,18,32,.14);
  --glass:rgba(255,255,255,.78); --glass-2:rgba(255,255,255,.96);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(14,18,32,.04),0 24px 50px -36px rgba(14,18,32,.22);
  --shadow-hover:0 1px 0 rgba(255,255,255,1) inset,0 2px 4px rgba(14,18,32,.04),0 30px 60px -40px rgba(14,18,32,.28);
  --btn-bg:#0E1220; --btn-ink:#FFFFFF;
  --wash:.6;
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark;-webkit-text-size-adjust:100%}
html[data-theme=light]{color-scheme:light}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;font-weight:400;transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--violet);color:#fff}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.grain{display:none}

/* --------------------------------------------------------------------------
   background — one continuous wash at the top of the page, fading into the
   base. Soft radial gradients, no blur filter: cheap to composite.
   -------------------------------------------------------------------------- */
.bg{position:absolute;left:0;right:0;top:0;height:min(120vh,1100px);z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);mask:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%)}
.bg i{position:absolute;border-radius:50%;opacity:var(--wash);animation:drift 28s var(--ease) infinite alternate}
body.modal-open .bg i{animation-play-state:paused}
body.modal-open{overflow:hidden}
.bg i:nth-child(1){width:70vw;height:70vw;left:-18vw;top:-34vw;background:radial-gradient(circle,rgba(var(--blue-rgb),.9) 0%,rgba(var(--blue-rgb),.35) 30%,transparent 68%)}
.bg i:nth-child(2){width:66vw;height:66vw;right:-20vw;top:-30vw;background:radial-gradient(circle,rgba(var(--pink-rgb),.85) 0%,rgba(var(--pink-rgb),.3) 30%,transparent 68%);animation-delay:-9s}
.bg i:nth-child(3){width:56vw;height:56vw;left:24vw;top:-10vw;background:radial-gradient(circle,rgba(var(--violet-rgb),.8) 0%,rgba(var(--violet-rgb),.28) 30%,transparent 68%);animation-delay:-17s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vw,0) scale(1.08)}}
@media(max-width:640px){.bg i{animation:none}.bg i:nth-child(1),.bg i:nth-child(2),.bg i:nth-child(3){width:130vw;height:130vw}.bg i:nth-child(1){left:-50vw;top:-70vw}.bg i:nth-child(2){right:-50vw;top:-60vw}.bg i:nth-child(3){left:-10vw;top:-30vw}}

/* faint ambient glow behind later sections so the page never goes flat */
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 50% 40%,rgba(var(--violet-rgb),.10),transparent 70%)}
html[data-theme=light] .glow::after{background:radial-gradient(60% 50% at 50% 40%,rgba(var(--violet-rgb),.08),transparent 70%)}

/* --------------------------------------------------------------------------
   surfaces. Real backdrop blur only where something scrolls behind it
   (nav, modals, sticky bars) — cards are opaque enough without it.
   -------------------------------------------------------------------------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);transition:background-color .6s var(--ease),border-color .6s var(--ease),box-shadow 1s var(--ease)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(var(--w),.06),transparent 60%);opacity:0;transition:opacity .8s var(--ease)}
.glass:hover::before{opacity:1}
.nav,.memberbar,.mcta,.peek-lock,.badge,.filters,.tabs{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.card{border-radius:var(--r);transition:transform 1s var(--ease),background-color .6s var(--ease),border-color .6s var(--ease),box-shadow 1s var(--ease)}
.card:hover{background:var(--glass-2);border-color:var(--line-2);box-shadow:var(--shadow-hover);transform:translateY(-4px)}
/* a thin light on the card edge that follows the cursor */
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(var(--violet-rgb),.7),rgba(var(--pink-rgb),.25) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .9s var(--ease)}
.card:hover::after{opacity:1}

/* --------------------------------------------------------------------------
   text shine — on hover the text eases up in size while a blue→violet→pink
   glint sweeps through the letters.
   -------------------------------------------------------------------------- */
.links a,.signin,.brand span,.fgrid a,h2,.faq summary,.feat h3,.crypto h3,.cost .nm,.step h4,.coach h4,.vend .cmp,.th span,.mb h3,.peek-lock h3{
  color:transparent;
  background-image:linear-gradient(110deg,var(--ink) 0%,var(--ink) 36%,var(--blue) 45%,var(--violet) 50%,var(--pink) 55%,var(--ink) 64%,var(--ink) 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  transition:background-position 1.6s var(--ease),transform 1s var(--ease),opacity .7s var(--ease),padding-left .9s var(--ease)}
.links a:hover,.signin:hover,.brand:hover span,.fgrid a:hover,h2:hover,.faq details:hover summary,.feat:hover h3,.crypto:hover h3,.cost:hover .nm,.step:hover h4,.coach:hover h4,.vend:hover .cmp,.th:hover span,.peek-lock:hover h3{background-position:0 0}

/* --------------------------------------------------------------------------
   buttons — solid pill, soft lift, a light sweep across the surface on hover
   -------------------------------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--pill);font-weight:500;font-size:14px;letter-spacing:-.005em;line-height:1.2;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform 1s var(--ease),box-shadow 1s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.15s}
.btn::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);
  transform:skewX(-18deg) translateX(0);opacity:0;transition:opacity .25s}
.btn:hover::after{opacity:1;transform:skewX(-18deg) translateX(380%);transition:transform 1.3s var(--ease),opacity .25s}
.btn svg{width:15px;height:15px;flex:none;transition:transform 1s var(--ease)}.btn:hover svg{transform:translateX(3px)}
.btn-ivory{color:var(--btn-ink);background-color:var(--btn-bg);background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px rgba(14,18,32,.05),0 10px 28px -12px rgba(14,18,32,.45)}
.btn-ivory:hover{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 0 0 1px rgba(14,18,32,.05),0 20px 44px -14px rgba(var(--violet-rgb),.55)}
html[data-theme=dark] .btn-ivory{background-image:linear-gradient(180deg,#FFFFFF,rgba(255,255,255,.86));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 28px -12px rgba(0,0,0,.7)}
html[data-theme=dark] .btn-ivory:hover{box-shadow:0 1px 0 #fff inset,0 20px 48px -14px rgba(var(--violet-rgb),.6)}
html[data-theme=dark] .btn-ivory::after{background:linear-gradient(100deg,transparent 0%,rgba(var(--violet-rgb),.22) 50%,transparent 100%)}
.btn-ivory .price{display:inline-flex;align-items:baseline;gap:2px;margin-left:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.22);font-weight:600}
html[data-theme=dark] .btn-ivory .price{border-left-color:rgba(0,0,0,.16)}
.btn .price small{font-size:11px;font-weight:500;opacity:.6}
.btn-glass{background:var(--glass);border:1px solid var(--line-2);color:var(--ink);box-shadow:0 1px 0 rgba(var(--k),.5) inset}
.btn-glass:hover{background:var(--glass-2);border-color:rgba(var(--w),.26);box-shadow:0 1px 0 rgba(var(--k),.6) inset,0 14px 32px -16px rgba(var(--violet-rgb),.35)}
.btn-glass::after{background:linear-gradient(100deg,transparent 0%,rgba(var(--violet-rgb),.16) 50%,transparent 100%)}
.btn-lg{padding:15px 26px;font-size:15px}

/* --------------------------------------------------------------------------
   nav
   -------------------------------------------------------------------------- */
.nav{position:fixed;top:16px;left:0;right:0;margin:0 auto;z-index:60;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px;padding:8px;border-radius:var(--pill);width:min(960px,calc(100% - 28px));transition:top .5s var(--ease),background-color .5s var(--ease),box-shadow .8s var(--ease),border-color .5s;
  opacity:0;transform:translateY(-14px);animation:rise .9s var(--ease) .1s forwards}
.nav.scrolled{top:10px;background:rgba(var(--k),.72);box-shadow:var(--shadow),0 10px 30px -20px rgba(0,0,0,.4)}
html[data-theme=light] .nav{background:rgba(255,255,255,.66)}html[data-theme=light] .nav.scrolled{background:rgba(255,255,255,.86)}
.brand{display:flex;align-items:center;gap:10px;justify-self:start;padding-left:8px}
.brand img{height:22px;width:auto;transition:transform 1.2s var(--ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}
html[data-theme=light] .brand img{filter:invert(1) brightness(.2)}
.brand span{font-weight:600;letter-spacing:.22em;font-size:12px;text-transform:uppercase}
.links{display:flex;gap:2px;justify-self:center}
.links a{display:inline-block;padding:8px 14px;font-size:13.5px;opacity:.72}
.links a:hover{opacity:1;transform:scale(1.14)}
.nav .actions{display:flex;align-items:center;gap:4px;justify-self:end}
.nav .btn{padding:9px 16px;font-size:13px}
.theme{height:32px;padding:0 12px;border-radius:var(--pill);border:1px solid var(--line);background:var(--glass);color:var(--ink-70);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-right:4px;transition:border-color .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),transform 1s var(--ease)}
.theme:hover{border-color:var(--line-2);background:var(--glass-2);color:var(--ink);transform:scale(1.06)}
.signin{display:inline-block;padding:9px 14px;font-size:13.5px;opacity:.72;white-space:nowrap}.signin:hover{opacity:1;transform:scale(1.1)}

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.hero{position:relative;padding:176px 0 40px;text-align:center}
.hero .wrap{transform-origin:top center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:var(--pill);font-size:12.5px;color:var(--ink-70)}
.badge b{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--pill);background:var(--btn-bg);color:var(--btn-ink);font-weight:600;font-size:11px;letter-spacing:.06em}
.badge b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-weight:500;font-size:clamp(42px,6.6vw,92px);line-height:.98;letter-spacing:-.045em;margin:30px auto 26px;max-width:21ch}
h1 .w{display:inline-block;opacity:0;transform:translateY(18px);animation:rise 1s var(--ease) both;animation-delay:calc(.25s + var(--i) * .06s)}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:-.01em;line-height:.9;padding-right:.04em;color:transparent;
  background-image:linear-gradient(100deg,var(--blue) 0%,var(--violet) 22%,var(--pink) 40%,#F4F1FF 50%,var(--pink) 60%,var(--violet) 78%,var(--blue) 100%);
  background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  transition:background-position 2.2s var(--ease)}
h1 em.w{animation:rise 1s var(--ease) both,glint 2.6s var(--ease) 1 forwards;animation-delay:calc(.25s + var(--i) * .06s),1.7s}
h1 em.w.swept{animation:rise 1s var(--ease) both;background-position:0 0}
h1 em.w.swept:hover{background-position:100% 0}
@keyframes glint{to{background-position:0 0}}
h1 .dim{color:var(--ink-45)}
@keyframes rise{to{opacity:1;transform:none}}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-70);max-width:56ch;margin:0 auto 30px;font-weight:300;line-height:1.6}
.lede em{font-family:var(--serif);font-style:italic;font-size:1.12em;color:var(--ink)}
.cta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sub{font-size:12.5px;color:var(--ink-45);letter-spacing:.02em;margin-bottom:0}
.sub i{font-style:normal;margin:0 8px;opacity:.5}
/* hero load-in (time-based, not scroll-based) */
.hero .reveal{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards;animation-delay:var(--d,.15s)}
.hero .reveal.d1{--d:.75s}.hero .reveal.d2{--d:.9s}.hero .reveal.d3{--d:1.1s}

/* category marquee */
.marquee{margin:44px 0 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:8px;width:max-content;padding:4px 0;animation:scroll 48s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.chip{font-size:12.5px;padding:8px 14px;border-radius:var(--pill);border:1px solid var(--line);background:var(--glass);color:var(--ink-70);white-space:nowrap;transition:border-color .6s var(--ease),color .6s var(--ease),background-color .6s var(--ease),transform 1s var(--ease)}
.chip:hover{color:var(--ink);border-color:var(--line-2);background:var(--glass-2);transform:translateY(-3px) scale(1.04)}

/* --------------------------------------------------------------------------
   sections / headings
   -------------------------------------------------------------------------- */
section{padding:120px 0}
.head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:48px;flex-wrap:wrap}
.kicker{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:var(--grad)}
h2{font-weight:500;font-size:clamp(32px,4.3vw,56px);letter-spacing:-.04em;line-height:1.02;max-width:18ch}
h2 .w{display:inline-block;transition:opacity .9s var(--ease),transform .9s var(--ease)}
h2 .w:not(.on){opacity:0;transform:translateY(.45em)}
.head p{color:var(--ink-70);max-width:42ch;font-size:15.5px;font-weight:300}
.coachprod,#membership,#faq,#cost{position:relative}
.coachprod::before,#membership::before,#faq::before,#cost::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* --------------------------------------------------------------------------
   locked preview of the database
   -------------------------------------------------------------------------- */
.peek{padding-top:56px}
.peek-wrap{position:relative;border-radius:var(--r-lg)}
.peek-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;filter:blur(4px);opacity:.8;pointer-events:none;user-select:none;
  -webkit-mask:linear-gradient(180deg,#000 35%,rgba(0,0,0,.25) 100%);mask:linear-gradient(180deg,#000 35%,rgba(0,0,0,.25) 100%)}
.peek-grid .card{transition:none}
.peek-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px}
.peek-lock{width:min(520px,100%);padding:36px 34px;border-radius:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--glass-2);box-shadow:var(--shadow-hover)}
.lock-tag,.feat .lock,.lockbar,.src .seal{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--pill);border:1px solid rgba(var(--violet-rgb),.35);background:rgba(var(--violet-rgb),.08);color:var(--ink-70)}
.lock-tag{display:inline-flex;align-items:center;gap:6px}
.lock-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad)}
.peek-lock h3{font-weight:500;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;line-height:1.05;margin-top:6px}
.peek-lock p{font-size:14.5px;color:var(--ink-70);line-height:1.6;max-width:40ch;font-weight:300}
.peek-lock .btn{margin-top:8px}
.peek-lock .fine{font-size:12px;color:var(--ink-45)}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}

/* --------------------------------------------------------------------------
   features
   -------------------------------------------------------------------------- */
.feat-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;margin-bottom:22px}
.feat{padding:30px;display:flex;flex-direction:column;gap:14px}
.feat.big{grid-row:span 2}
.feat.wide{grid-column:1/-1}
.wide-in{display:flex;justify-content:space-between;align-items:center;gap:28px}
.wide-in p{max-width:60ch}
.feat .ft{display:flex;justify-content:space-between;align-items:center}
.feat .num{font-size:12px;letter-spacing:.12em;color:var(--ink-45)}
.feat h3{font-weight:500;font-size:26px;letter-spacing:-.03em}
.feat p{font-size:14.5px;line-height:1.6;color:var(--ink-70)}
.feat .mini{margin-top:auto;padding:22px;border-radius:18px;display:flex;flex-direction:column;gap:16px}
.feat .mini .wk b{font-size:12.5px}.feat .mini .tr{margin-bottom:0}
.cats{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cats li{font-size:12px;padding:6px 11px;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink-70);transition:border-color .6s var(--ease),color .6s var(--ease),background-color .6s var(--ease),transform .9s var(--ease)}
.card:hover .cats li{border-color:var(--line-2);color:var(--ink)}
.cats li:hover{background:var(--glass-2);transform:translateY(-2px)}
.disc{margin-top:18px;font-size:12.5px;color:var(--ink-45);max-width:72ch;font-weight:300}

/* week bars — always the brand gradient family */
.wk b{display:block;font-weight:500;font-size:14px;margin-bottom:8px}
.wk .tr{height:8px;border-radius:99px;background:rgba(var(--w),.08);overflow:hidden;margin-bottom:7px}
.wk .tr i{display:block;height:100%;border-radius:99px;background:var(--grad);transform-origin:left;transition:transform 1.4s var(--ease)}
.wk .tr.b1 i{background:linear-gradient(90deg,var(--blue),var(--violet))}
.wk .tr.b2 i{background:linear-gradient(90deg,var(--violet),var(--pink))}
.wk .tr.b3 i{background:linear-gradient(90deg,var(--pink),var(--blue))}
.wk span{font-size:12.5px;color:var(--ink-45)}

/* --------------------------------------------------------------------------
   the math — guessing vs Maxxed
   -------------------------------------------------------------------------- */
.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cost{padding:32px;display:flex;flex-direction:column;gap:22px}
.cost-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cost .nm{font-weight:500;font-size:24px;letter-spacing:-.03em}
.cost .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.cost ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--ink-70)}
.cost li{display:flex;gap:12px;align-items:start;transition:color .4s var(--ease)}.cost:hover li{color:var(--ink)}
.cost li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;background-size:9px;background-repeat:no-repeat;background-position:center}
.cost.no li::before{border:1px solid var(--line-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239096A8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.cost.yes li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--blue),var(--pink));background-size:9px,100%}
.cost.no{opacity:.92}
.cost.yes{background:var(--glass-2);border-color:var(--line-2)}
.cost-b{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.cost-b strong{font-weight:500;font-size:26px;letter-spacing:-.035em}
.cost-b strong small{font-size:14px;color:var(--ink-45);letter-spacing:0}
.cost-b span{font-size:12.5px;color:var(--ink-45)}
.cost .btn{align-self:flex-start}

/* --------------------------------------------------------------------------
   pricing + crypto
   -------------------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:880px;margin:0 auto}
.tiers.one{grid-template-columns:1fr;max-width:640px}
.tier{padding:30px;display:flex;flex-direction:column}
.tier.hi{background:var(--glass-2);border-color:var(--line-2)}
.badge-hi{position:absolute;top:18px;right:18px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:var(--pill);background:var(--grad);color:#fff;font-weight:600}
.tier .nm{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70)}
.tier .pr{font-size:52px;font-weight:500;letter-spacing:-.05em;line-height:1;margin-top:16px}
.tier .pr small{font-size:15px;letter-spacing:0;color:var(--ink-45);font-weight:400;margin-left:4px}
.tier .d{font-size:14px;color:var(--ink-70);margin-top:8px;font-weight:300;min-height:42px}
.tier ul{list-style:none;margin:24px 0 28px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-70)}
.tier ul.two{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.tier li{display:flex;gap:10px;align-items:start;transition:color .4s var(--ease)}.tier:hover li{color:var(--ink)}
.tier li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;margin-top:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--blue),var(--pink));background-size:9px,100%;background-repeat:no-repeat;background-position:center}
.tier .btn{margin-top:auto;justify-content:center}
.tier .fine{font-size:12px;color:var(--ink-45);text-align:center;margin-top:12px}
.crypto{max-width:640px;margin:14px auto 0;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.crypto h3{font-weight:500;font-size:22px;letter-spacing:-.025em;margin:6px 0 8px}
.crypto p{font-size:14px;line-height:1.6;color:var(--ink-70)}
.coins{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none}
.coins span{width:64px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line-2);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink);transition:border-color .6s var(--ease),background-color .6s var(--ease),transform .9s var(--ease)}
.coins span:hover{border-color:rgba(var(--violet-rgb),.5);background:rgba(var(--violet-rgb),.08);transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   coaching product
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.split .card{padding:38px}
.split.cp{grid-template-columns:.9fr 1.1fr;align-items:start}
.cp-left{padding:32px;display:flex;flex-direction:column;gap:20px}
.cp-left .kicker{margin-bottom:4px}
.step{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0;padding-top:0}
.step b{font-size:12px;color:var(--ink-45);font-weight:500;padding-top:4px;width:26px;flex:none;letter-spacing:.06em}
.step h4{font-weight:500;font-size:17px;letter-spacing:-.02em}
.step p{font-size:14px;color:var(--ink-70);margin-top:4px;font-weight:300}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:2px 6px;border-radius:6px;background:rgba(var(--w),.06);border:1px solid var(--line)}
.fee{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.fee div{padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--w),.03);transition:border-color .6s var(--ease),background-color .6s var(--ease),transform .9s var(--ease)}
.fee div:hover{border-color:var(--line-2);background:var(--glass-2);transform:translateY(-2px)}
.fee strong{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em;transition:transform .9s var(--ease)}.fee div:hover strong{transform:scale(1.05)}.fee span{font-size:12px;color:var(--ink-45)}
.filters{display:flex;gap:4px;padding:5px;border-radius:var(--pill);width:max-content;max-width:100%;overflow:auto;margin-bottom:28px}
.filters button{padding:8px 16px;border-radius:var(--pill);font-size:13px;color:var(--ink-70);white-space:nowrap;transition:color .6s var(--ease),background-color .6s var(--ease),transform .9s var(--ease)}
.filters button:hover{color:var(--ink);transform:scale(1.06)}
.filters button.on{background:var(--btn-bg);color:var(--btn-ink);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
.coach{padding:12px;display:flex;flex-direction:column;cursor:pointer}
.coach.hide{display:none}
.av{aspect-ratio:4/5;border-radius:16px;position:relative;overflow:hidden;display:grid;place-items:center;font-size:52px;font-weight:600;letter-spacing:-.05em;color:#fff;transition:transform 1.2s var(--ease),border-radius 1.2s var(--ease)}
.coach:hover .av{transform:scale(1.02);border-radius:20px}
.av::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 0%,rgba(255,255,255,.28),transparent 50%),linear-gradient(180deg,transparent 55%,rgba(10,11,16,.35))}
.av .tag{position:absolute;top:12px;left:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--pill);background:rgba(10,11,16,.35);border:1px solid rgba(255,255,255,.18)}
.av .ver{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:#fff;color:#0E1220;display:grid;place-items:center;font-size:12px;font-weight:700}
.coach .meta{padding:14px 6px 6px}
.coach h4{font-weight:500;font-size:16.5px;letter-spacing:-.02em}
.coach .h{font-size:12.5px;color:var(--ink-45)}
.coach .r{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px}
.coach .r b{font-weight:500}.coach .r span{color:var(--ink-45)}
.coach .stars{color:var(--violet);font-size:11px;letter-spacing:1px}

/* --------------------------------------------------------------------------
   faq
   -------------------------------------------------------------------------- */
.faq{max-width:760px;margin:0 auto}
.faq details{border-top:1px solid var(--line);padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:17px;font-weight:500;letter-spacing:-.02em}
.faq details:hover summary{padding-left:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:16px;font-weight:300;color:var(--ink);transition:transform 1s var(--ease),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.faq details:hover summary i{border-color:rgba(var(--violet-rgb),.5);transform:scale(1.08)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--btn-bg);color:var(--btn-ink);border-color:transparent}
.faq details[open]:hover summary i{transform:rotate(45deg) scale(1.08)}
.faq .a{padding:0 0 22px;color:var(--ink-70);font-size:15px;font-weight:300;max-width:60ch}
.faq details[open] .a{animation:fadeUp .8s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   closing call to action
   -------------------------------------------------------------------------- */
.final{padding:0 0 120px}
.final-card{padding:96px 40px;text-align:center;border-radius:36px;overflow:hidden;background:var(--glass-2)}
.final-card::before,.final-card:hover::before{content:"";position:absolute;inset:-30%;pointer-events:none;opacity:1;
  background:radial-gradient(40% 40% at 28% 30%,rgba(var(--blue-rgb),.34),transparent 70%),radial-gradient(40% 40% at 72% 65%,rgba(var(--pink-rgb),.3),transparent 70%),radial-gradient(36% 36% at 55% 40%,rgba(var(--violet-rgb),.28),transparent 70%);
  animation:drift 30s var(--ease) infinite alternate}
html[data-theme=light] .final-card::before,html[data-theme=light] .final-card:hover::before{opacity:.8}
.final-card>*{position:relative}
.final-card h2{margin:0 auto 16px;max-width:16ch}
.final-card p{color:var(--ink-70);max-width:46ch;margin:0 auto 30px;font-weight:300;font-size:16px}
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.final-card .sub{display:block}
.final-card:hover{transform:none}

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
footer{padding:60px 0 44px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:50px}
.fgrid h6{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px;font-weight:500}
.fgrid a{display:block;width:max-content;font-size:14px;padding:4px 0;opacity:.7;transform-origin:left center}.fgrid a:hover{opacity:1;transform:scale(1.08) translateX(2px)}
.fgrid p{font-size:14px;color:var(--ink-70);max-width:34ch;font-weight:300;margin:14px 0 18px}
.news{display:flex;padding:4px 4px 4px 14px;border-radius:var(--pill);max-width:360px}
.news input{flex:1;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:13.5px;min-width:0}
.news input::placeholder{color:var(--ink-45)}
.news .btn{padding:8px 14px;font-size:12.5px}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-45)}

/* --------------------------------------------------------------------------
   mobile sticky call to action (appears once the hero scrolls away)
   -------------------------------------------------------------------------- */
.mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:58;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:var(--pill);background:rgba(var(--k),.86);
  transform:translateY(120%);transition:transform .9s var(--ease)}
.mcta>div{display:flex;flex-direction:column;line-height:1.2}
.mcta b{font-weight:600;font-size:16px;letter-spacing:-.02em}.mcta b small{font-size:11px;font-weight:500;color:var(--ink-45)}
.mcta span{font-size:11px;color:var(--ink-45)}
.mcta .btn{padding:11px 20px}
body.past-hero .mcta{transform:none}

/* --------------------------------------------------------------------------
   members area
   -------------------------------------------------------------------------- */
.memberbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:59;display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:var(--pill);font-size:12.5px;color:var(--ink-70)}
.memberbar .dot,.psrc .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}.memberbar .sep{opacity:.4}
.memberbar[hidden],#members[hidden],#signout[hidden]{display:none}
.links a[data-member]{display:none}body.member .links a[data-member]{display:inline-block}body.member .links a[data-public]{display:none}
body.member #preview,body.member #features,body.member #cost,body.member #membership,body.member .final,body.member .mcta,body.member .hero .cta,body.member .hero .sub,body.member .hero .badge{display:none}
body.member .hero{padding-bottom:20px}

.vend{padding:20px;display:flex;flex-direction:column;gap:14px;cursor:pointer}
.vend.hide{display:none}
.vend .vt{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.vend .cmp{font-weight:500;font-size:18px;letter-spacing:-.02em}
.vend .cat{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-45);margin-top:4px}
.gr{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:17px;font-weight:600;letter-spacing:-.03em;border:1px solid var(--line-2);background:rgba(var(--w),.04);transition:transform 1s var(--ease),box-shadow 1s var(--ease)}
.vend:hover .gr{transform:scale(1.08) rotate(-3deg);box-shadow:0 10px 24px -12px rgba(var(--violet-rgb),.5)}
.gr.a{background:linear-gradient(150deg,rgba(var(--blue-rgb),.22),rgba(var(--violet-rgb),.22));border-color:rgba(var(--violet-rgb),.45)}
.gr.b{background:linear-gradient(150deg,rgba(var(--violet-rgb),.12),rgba(var(--pink-rgb),.12));border-color:rgba(var(--pink-rgb),.35)}
.vend .rows{display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.vend .rows div{display:flex;justify-content:space-between;color:var(--ink-45)}
.vend .rows b{font-weight:500;color:var(--ink-70)}
.vend .foot{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.vend .foot span{font-size:11px;padding:4px 9px;border-radius:var(--pill);border:1px solid var(--line);background:rgba(var(--w),.03);color:var(--ink-70);transition:border-color .6s var(--ease),transform .9s var(--ease)}
.vend:hover .foot span{border-color:var(--line-2);transform:translateY(-2px)}
.vend:hover .foot span:nth-child(2){transition-delay:.05s}.vend:hover .foot span:nth-child(3){transition-delay:.1s}
.vend .foot span.rare{border-color:rgba(var(--pink-rgb),.5);color:var(--pink)}
.dbstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.ds{padding:22px;text-align:center}
.ds strong{display:block;font-size:34px;font-weight:500;letter-spacing:-.04em;transition:transform 1s var(--ease)}.ds:hover strong{transform:scale(1.06)}
.ds span{font-size:12.5px;color:var(--ink-45)}

.planner-ui{padding:30px;display:flex;flex-direction:column;gap:22px}
.pfield label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:10px}
.segs{display:flex;flex-wrap:wrap;gap:7px}
.segs button{font-size:13px;padding:9px 14px;border-radius:var(--pill);border:1px solid var(--line-2);background:rgba(var(--w),.03);color:var(--ink-70);transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),transform .9s var(--ease)}
.segs button:hover{background:rgba(var(--w),.07);color:var(--ink);transform:translateY(-2px)}
.segs button.on{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent}
.ptags{display:flex;flex-wrap:wrap;gap:7px}
.ptags span{font-size:13px;padding:9px 13px;border-radius:var(--pill);border:1px solid var(--line-2);background:rgba(var(--w),.04);transition:border-color .6s var(--ease),transform .9s var(--ease)}
.ptags span:hover{border-color:rgba(var(--violet-rgb),.5);transform:translateY(-2px)}
.ptags span i{font-style:normal;color:var(--ink-45);margin-left:5px;cursor:pointer}
.ptags span.add{border-style:dashed;color:var(--ink-45);cursor:pointer}
.planner-out{padding:30px;display:flex;flex-direction:column;gap:20px;position:relative}
.lockbar{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11.5px;letter-spacing:.07em;padding:7px 13px}
.weeks{display:flex;flex-direction:column;gap:16px}
.pnote{padding:16px;border-radius:16px;border:1px solid rgba(var(--pink-rgb),.35);background:rgba(var(--pink-rgb),.07)}
.pnote b{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink);margin-bottom:6px}
.pnote p{font-size:13.5px;color:var(--ink-70);line-height:1.5}
.psrc b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:10px}
.psrc .line{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.psrc .line:first-of-type{border-top:0}
.psrc .line em{font-style:normal;margin-left:auto;color:var(--ink-45);font-size:12px}

.chatdemo{padding:26px;display:flex;flex-direction:column;gap:12px;max-width:720px;margin:0 auto}
.msg{max-width:78%;padding:13px 17px;border-radius:20px;font-size:14.5px;line-height:1.5;transition:transform 1s var(--ease)}
.msg:hover{transform:translateY(-2px) scale(1.01)}
.msg.them{align-self:flex-end;background:var(--btn-bg);color:var(--btn-ink);border-bottom-right-radius:7px}
.msg.us{align-self:flex-start;background:rgba(var(--w),.05);border:1px solid var(--line);border-bottom-left-radius:7px}
.chatbar{display:flex;gap:9px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.chatbar input{flex:1;background:rgba(var(--w),.04);border:1px solid var(--line-2);border-radius:var(--pill);padding:12px 18px;color:var(--ink);font:inherit;font-size:14px}
.forum{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:720px;margin:14px auto 0}
.th{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.th b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);font-weight:500}
.th span{font-size:14.5px}.th em{font-style:normal;font-size:12px;color:var(--ink-45)}

/* --------------------------------------------------------------------------
   modals
   -------------------------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,11,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .22s var(--ease);will-change:opacity;contain:layout paint}
html[data-theme=light] .modal{background:rgba(250,250,252,.6)}
.modal.open{opacity:1;pointer-events:auto}
.modal .box{width:min(760px,100%);padding:14px;border-radius:var(--r-lg);transform:translateY(16px) scale(.98);transition:transform .34s var(--spring);background:var(--bg-2);will-change:transform;contain:layout paint}
html[data-theme=dark] .modal .box{background:#12131B}
.modal.open .box{transform:none}
.close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(var(--w),.06);border:1px solid var(--line-2);display:grid;place-items:center;font-size:18px;font-weight:300;z-index:2;transition:background-color .5s var(--ease),transform 1s var(--ease)}
.close:hover{background:rgba(var(--w),.12);transform:rotate(90deg) scale(1.06)}
.mb{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.mb .av{aspect-ratio:1/1;border-radius:22px}
.mb .info{padding:14px 10px 10px}
.mb h3{font-weight:500;font-size:28px;letter-spacing:-.035em}
.mb .h{color:var(--ink-45);font-size:14px}
.mb .bio{font-size:14.5px;color:var(--ink-70);margin-top:16px;font-weight:300;line-height:1.55}
.mb .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.mb .kv div{padding:12px;border-radius:14px;background:rgba(var(--w),.04);border:1px solid var(--line)}
.mb .kv b{display:block;font-weight:500;font-size:18px;letter-spacing:-.03em}
.mb .kv span{font-size:11.5px;color:var(--ink-45)}
.mb .acts{display:flex;gap:8px;margin-top:22px}
.auth .box{width:min(440px,100%);padding:36px 32px 28px}
.ab{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.alogo{height:26px;width:auto;align-self:center;margin-bottom:4px}
html[data-theme=light] .alogo{filter:invert(1) brightness(.2)}
.tabs{display:flex;padding:4px;border-radius:var(--pill);gap:2px;align-self:center}
.tabs button{padding:8px 18px;border-radius:var(--pill);font-size:13.5px;color:var(--ink-70);transition:color .5s var(--ease),background-color .5s var(--ease),transform .9s var(--ease)}
.tabs button:hover{color:var(--ink);transform:scale(1.05)}
.tabs button.on{background:var(--btn-bg);color:var(--btn-ink);font-weight:500}
#authform{display:flex;flex-direction:column;gap:12px}
#authform label{display:flex;flex-direction:column;gap:7px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
#authform input{-webkit-appearance:none;appearance:none;font:inherit;font-size:15px;letter-spacing:0;text-transform:none;padding:13px 16px;border-radius:14px;border:1px solid var(--line-2);background-color:var(--bg-2);color:var(--ink);outline:none;transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}
html[data-theme=dark] #authform input{background-color:#171923}
#authform input::placeholder{color:var(--ink-45)}
#authform input:hover{border-color:rgba(var(--w),.24)}
#authform input:focus{border-color:rgba(var(--violet-rgb),.6);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.12)}
#authform .btn{justify-content:center;margin-top:6px}
.aerr{font-size:13px;color:var(--pink)}.aerr:empty{display:none}
.auth .fine{text-align:center;font-size:12px;color:var(--ink-45);line-height:1.5}

/* ==========================================================================
   CYCLE PLANNER (/planner.html)
   ========================================================================== */
.planner-page{padding:150px 0 110px}
.planner-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:12px;align-items:start}
.planner-split>*{min-width:0}
.planner-ui{padding:28px;display:flex;flex-direction:column;gap:20px;position:sticky;top:86px;min-width:0}
.planner-out{padding:28px;display:flex;flex-direction:column;gap:20px;min-width:0}
.pfield,.picker,.ptabs,.plist,.tl,.tl .row,.tl .trk,.tl .lab,.cinfo{min-width:0}
.planner-ui:hover,.planner-out:hover{transform:none}
.pfield label{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:10px}
.pfield label .cnt{letter-spacing:.02em;text-transform:none;font-size:11.5px;color:var(--violet)}

/* compound picker */
.picker{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(var(--w),.02)}
#csearch{-webkit-appearance:none;appearance:none;width:100%;font:inherit;font-size:14.5px;padding:13px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);outline:none}
#csearch::placeholder{color:var(--ink-45)}
#csearch:focus{background:rgba(var(--violet-rgb),.05)}
.ptabs{display:flex;gap:4px;padding:8px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:none;padding:6px 12px;border-radius:var(--pill);font-size:12px;color:var(--ink-45);white-space:nowrap;transition:color .5s var(--ease),background-color .5s var(--ease),transform .8s var(--ease)}
.ptabs button:hover{color:var(--ink);transform:scale(1.05)}
.ptabs button.on{background:var(--btn-bg);color:var(--btn-ink);font-weight:500}
.plist{max-height:300px;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.plist::-webkit-scrollbar{width:8px}.plist::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.plist .hint{padding:16px;font-size:13px;color:var(--ink-45)}
.pitem{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:11px;border:1px solid transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease)}
.pitem:hover{background:var(--glass-2);border-color:var(--line);transform:translateX(3px)}
.pitem.on{background:rgba(var(--violet-rgb),.1);border-color:rgba(var(--violet-rgb),.4)}
.pitem.on .pn{font-weight:500}
.pitem .pn{font-size:14px;display:flex;flex-direction:column;gap:1px;min-width:0}
.pitem .pn,.pitem .pn em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .pn em{font-style:normal;font-size:11.5px;color:var(--ink-45)}
.tl .lab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ptier{flex:none;font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:var(--pill);border:1px solid var(--line-2);color:var(--ink-45)}
.ptier.t1{border-color:rgba(var(--blue-rgb),.45);color:var(--blue)}
.ptier.t2{border-color:rgba(var(--violet-rgb),.45);color:var(--violet)}
.ptier.t3{border-color:rgba(var(--pink-rgb),.5);color:var(--pink)}
.ptags span{cursor:default}
.ptags span i{cursor:pointer;transition:color .3s}
.ptags span i:hover{color:var(--pink)}

/* compound info panel */
.cinfo{border-top:1px solid var(--line);padding-top:18px;min-height:150px}
.cinfo .hint{font-size:13.5px;color:var(--ink-45);font-weight:300;line-height:1.6}
.ci{display:flex;flex-direction:column;gap:9px;animation:fadeUp .5s var(--ease) both}
.ci-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ci-h b{font-weight:500;font-size:17px;letter-spacing:-.02em}
.ci-m{font-size:12px;color:var(--ink-45);letter-spacing:.01em}
.ci-t{display:flex;flex-wrap:wrap;gap:5px}
.ci-t span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:rgba(var(--violet-rgb),.09);border:1px solid rgba(var(--violet-rgb),.28);color:var(--ink-70)}
.ci p{font-size:13.5px;line-height:1.65;color:var(--ink-70);font-weight:300}
.ci-r{font-size:12.5px;color:var(--ink-70);padding-top:2px}
.ci-r b{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);margin-bottom:3px;font-weight:500}
.ci-r.bad b{color:var(--pink)}
.prow{display:flex;gap:8px;flex-wrap:wrap}
.prow .btn{font-size:12.5px;padding:10px 16px}

/* plan output */
.pout-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pout-top .btn{font-size:12.5px;padding:9px 16px}
.psum{font-size:14px;color:var(--ink-70);line-height:1.6;padding:14px 16px;border-radius:14px;background:rgba(var(--violet-rgb),.06);border:1px solid rgba(var(--violet-rgb),.2)}
.psum b{color:var(--ink);font-weight:500}

/* timeline */
.tl{display:flex;flex-direction:column;gap:9px}
.tl-scale{position:relative;height:16px;margin-left:196px;font-size:10.5px;color:var(--ink-45)}
.tl-scale span{position:absolute;transform:translateX(-50%)}
.tl .row{display:grid;grid-template-columns:186px 1fr;align-items:center;gap:10px}
.tl .lab{font-size:12.5px;display:flex;flex-direction:column;gap:1px;min-width:0}
.tl .lab small{font-size:10.5px;color:var(--ink-45);line-height:1.35}
.tl .trk{position:relative;height:16px;border-radius:99px;background:rgba(var(--w),.06);overflow:hidden}
.tl .bar{position:absolute;top:0;bottom:0;border-radius:99px;transform-origin:left;animation:barIn .9s var(--ease) both}
@keyframes barIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.tl .bar.base{background:linear-gradient(90deg,var(--blue),#7C8CF8)}
.tl .bar.inj{background:linear-gradient(90deg,#7C8CF8,var(--violet))}
.tl .bar.oral{background:linear-gradient(90deg,var(--violet),var(--pink))}
.tl .bar.gh{background:linear-gradient(90deg,#4FB8D8,var(--blue))}
.tl .bar.anc{background:rgba(var(--w),.22)}
.tl .bar.pct{background:linear-gradient(90deg,var(--pink),#F0A9D8)}
.tl .bar.clear{background:repeating-linear-gradient(115deg,rgba(var(--w),.16) 0 6px,transparent 6px 12px);border:1px solid var(--line-2)}
.tl .bar.dash{background:repeating-linear-gradient(115deg,rgba(var(--violet-rgb),.5) 0 5px,transparent 5px 10px)}
.tl .bar.none{background:rgba(var(--w),.05);border:1px dashed var(--line-2)}
.tl .mark{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--bg);border:2px solid var(--violet)}
.tl .row[data-id]{cursor:default;transition:transform .6s var(--ease)}
.tl .row[data-id]:hover{transform:translateX(3px)}

/* flags */
.flags{display:flex;flex-direction:column;gap:8px}
.flag{padding:14px 16px;border-radius:14px;font-size:13px;line-height:1.6;color:var(--ink-70);border:1px solid var(--line);background:rgba(var(--w),.03);animation:fadeUp .6s var(--ease) both}
.flag b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px;font-weight:600}
.flag.stop{border-color:rgba(var(--pink-rgb),.5);background:rgba(var(--pink-rgb),.08)}.flag.stop b{color:var(--pink)}
.flag.warn{border-color:rgba(var(--violet-rgb),.42);background:rgba(var(--violet-rgb),.07)}.flag.warn b{color:var(--violet)}
.flag.note{border-color:rgba(var(--blue-rgb),.35)}.flag.note b{color:var(--blue)}
.flag.ok b,.flag.hint b{color:var(--ink-45)}
.pdisc{font-size:11.5px;color:var(--ink-45);line-height:1.6;font-weight:300;border-top:1px solid var(--line);padding-top:16px}
.psrc .btn{margin-top:12px;font-size:12.5px;padding:9px 16px}

/* planner card on the members home page */
.golink{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px;flex-wrap:wrap}
.golink h3{font-weight:500;font-size:26px;letter-spacing:-.03em;margin:4px 0 8px}
.golink p{font-size:14.5px;color:var(--ink-70);max-width:56ch;font-weight:300;line-height:1.6}
.links a.cur{opacity:1}
.links a.cur::after{content:"";display:block;height:1px;margin-top:3px;background:var(--grad)}
.peek-grid.one{grid-template-columns:1fr}

@media (max-width:1000px){
  .planner-split{grid-template-columns:1fr}
  .planner-ui{position:static}
}
@media (max-width:820px){
  /* the nav already carries Sign out on small screens; the floating bar just covers content */
  .memberbar{display:none}
}
@media (max-width:640px){
  .planner-page{padding:120px 0 90px}
  .planner-ui,.planner-out{padding:22px}
  .pitem .pn{font-size:13.5px}
  .tl .row{grid-template-columns:1fr;gap:4px}
  .tl-scale{margin-left:0}
  .tl .lab{flex-direction:row;align-items:baseline;gap:8px}
  .plist{max-height:250px}
  .golink{padding:24px}
}

/* ==========================================================================
   COURSES (/courses.html) — a Skool-style space
   ========================================================================== */
.courses-page{padding:150px 0 110px}
.sp-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;margin-bottom:26px}
.sp-id{display:flex;gap:18px;align-items:flex-start;min-width:0}
.sp-mark{flex:none;width:58px;height:58px;border-radius:18px;background:var(--grad);box-shadow:0 10px 26px -12px rgba(var(--violet-rgb),.6)}
.sp-idt{min-width:0}
.sp-idt h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:8px}
.sp-idt p{font-size:14.5px;color:var(--ink-70);max-width:64ch;font-weight:300;line-height:1.6}
.sp-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.5px;color:var(--ink-45)}
.sp-meta b{color:var(--ink);font-weight:500}
.sp-meta .onl{display:inline-flex;align-items:center;gap:6px}
.sp-meta .onl i{width:7px;height:7px;border-radius:50%;background:var(--grad)}
.sp-you{flex:none;width:250px;padding:18px;display:flex;flex-direction:column;gap:10px}
.sp-you:hover{transform:none}
.you-h{display:flex;align-items:center;gap:11px}
.you-h b{display:block;font-weight:500;font-size:15px}
.you-h span{font-size:12px;color:var(--ink-45)}
.you-bar,.cw-bar,.bbar{height:7px;border-radius:99px;background:rgba(var(--w),.08);overflow:hidden}
.you-bar i,.cw-bar i,.bbar i{display:block;height:100%;border-radius:99px;background:var(--grad);transform-origin:left;animation:barIn .9s var(--ease) both}
.you-n{font-size:11.5px;color:var(--ink-45)}
.ava{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
.ava.big{width:46px;height:46px;font-size:15px}

/* tab bar */
.sp-tabs{display:flex;gap:4px;padding:5px;border-radius:var(--pill);width:max-content;max-width:100%;overflow-x:auto;margin-bottom:18px;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tabs button{flex:none;padding:9px 18px;border-radius:var(--pill);font-size:13.5px;color:var(--ink-70);white-space:nowrap;transition:color .5s var(--ease),background-color .5s var(--ease),transform .8s var(--ease)}
.sp-tabs button:hover{color:var(--ink);transform:scale(1.05)}
.sp-tabs button.on{background:var(--btn-bg);color:var(--btn-ink);font-weight:500}
.sp-body.swap{animation:fadeUp .5s var(--ease) both}
.sp-cols{display:grid;grid-template-columns:1fr 320px;gap:12px;align-items:start}
.sp-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.sp-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:86px}

/* composer + feed */
.composer{display:flex;align-items:center;gap:12px;padding:14px 16px}
.composer:hover{transform:none}
.composer input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;font-size:14.5px;color:var(--ink)}
.composer input::placeholder{color:var(--ink-45)}
.composer .btn{padding:9px 18px;font-size:13px}
.post{padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.p-tags{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pin{font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:rgba(var(--violet-rgb),.12);border:1px solid rgba(var(--violet-rgb),.35);color:var(--violet);font-weight:600}
.p-h{display:flex;align-items:center;gap:11px}
.p-h b{display:block;font-weight:500;font-size:14px}
.p-h span{font-size:12px;color:var(--ink-45)}
.p-cat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);padding:4px 10px;border-radius:var(--pill);border:1px solid var(--line)}
.post h3{font-weight:500;font-size:19px;letter-spacing:-.025em;line-height:1.25}
.post p{font-size:14.5px;line-height:1.65;color:var(--ink-70);font-weight:300}
.p-f{display:flex;gap:8px;padding-top:6px}
.pact{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--pill);border:1px solid var(--line);font-size:12.5px;color:var(--ink-45);transition:border-color .5s var(--ease),color .5s var(--ease),background-color .5s var(--ease),transform .8s var(--ease)}
.pact:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px)}
.pact svg{width:15px;height:15px}
.pact b{font-weight:500}
.pact.like.on{color:var(--pink);border-color:rgba(var(--pink-rgb),.5);background:rgba(var(--pink-rgb),.08)}
.pact.like.on svg{fill:var(--pink);stroke:var(--pink)}

/* side cards */
.side{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.side:hover{transform:none}
.side h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);font-weight:500}
.srow{display:flex;align-items:center;gap:10px;font-size:13px}
.srow b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow>span:last-child{margin-left:auto;color:var(--ink-45);font-size:12px;flex:none}
.srow.ev-s{align-items:flex-start;gap:12px}
.srow.ev-s b{display:block;font-size:13px;white-space:normal}
.srow.ev-s span{display:block;font-size:11.5px;color:var(--ink-45);margin-left:0}
.rank{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;border:1px solid var(--line-2);color:var(--ink-45)}
.rank.r1{background:var(--grad);color:#fff;border-color:transparent}
.rank.r2,.rank.r3{border-color:rgba(var(--violet-rgb),.5);color:var(--violet)}
.linkbtn{align-self:flex-start;margin-top:2px;font-size:12.5px;color:var(--violet);transition:transform .8s var(--ease)}
.linkbtn:hover{transform:translateX(3px)}

/* classroom */
.cw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cw{padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.cw-cover{aspect-ratio:16/8;position:relative;display:grid;place-items:center;transition:transform 1.2s var(--ease)}
.cw:hover .cw-cover{transform:scale(1.03)}
.cw-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.3),transparent 55%)}
.cw-mods,.cw-done{position:absolute;top:12px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:var(--pill);background:rgba(10,11,16,.4);border:1px solid rgba(255,255,255,.22);color:#fff}
.cw-mods{left:12px}.cw-done{right:12px;background:rgba(255,255,255,.92);color:#0E1220;border-color:transparent;font-weight:600}
.cw-b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.cw-b>b{font-weight:500;font-size:17px;letter-spacing:-.025em}
.cw-b>span{font-size:12px;color:var(--ink-45)}
.cw-b p{font-size:13.5px;color:var(--ink-70);line-height:1.6;font-weight:300;margin:2px 0 6px}
.cw-bar{margin-top:auto}
.cw-p{font-size:11.5px;color:var(--ink-45)}

/* course modal */
.cm{display:grid;grid-template-columns:1fr;gap:0}
.cm-cover{padding:34px 28px;border-radius:22px;position:relative;overflow:hidden;color:#fff}
.cm-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 25% 0%,rgba(255,255,255,.28),transparent 55%)}
.cm-cover b{position:relative;display:block;font-weight:500;font-size:26px;letter-spacing:-.03em}
.cm-cover span{position:relative;font-size:13px;opacity:.85}
.cm-b{padding:22px 10px 8px;display:flex;flex-direction:column;gap:12px}
.cm-d{font-size:14.5px;color:var(--ink-70);line-height:1.6;font-weight:300}
.cm-s{display:flex;gap:20px;font-size:12.5px;color:var(--ink-45)}
.cm-s b{color:var(--ink);font-weight:500}
.cm-l{list-style:none;counter-reset:l;display:flex;flex-direction:column;gap:2px;margin-top:4px}
.cm-l li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-size:14px;color:var(--ink-70);transition:background-color .4s var(--ease)}
.cm-l li:hover{background:var(--glass-2)}
.cm-l li.fin{color:var(--ink)}
.lz{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;border:1px solid var(--line-2);color:var(--ink-45)}
.cm-l li.fin .lz{background:var(--grad);color:#fff;border-color:transparent}
.cm-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* calendar */
.ev{display:flex;align-items:center;gap:18px;padding:18px 20px}
.ev-d{flex:none;width:54px;text-align:center;padding:8px 0;border-radius:14px;border:1px solid var(--line-2);background:rgba(var(--w),.03)}
.ev-d b{display:block;font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1}
.ev-d span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.ev-d.sm{width:40px;padding:5px 0}.ev-d.sm b{font-size:15px}.ev-d.sm span{font-size:9.5px}
.ev-b{flex:1;min-width:0}
.ev-b b{display:block;font-weight:500;font-size:15.5px;letter-spacing:-.02em}
.ev-b span{display:block;font-size:12.5px;color:var(--ink-45)}
.ev-by{margin-top:2px}
.ev .btn{flex:none;font-size:12.5px;padding:9px 16px}

/* leaderboard + members */
.board{padding:10px 14px}
.board:hover{transform:none}
.brow{display:flex;align-items:center;gap:12px;padding:13px 6px;border-top:1px solid var(--line)}
.brow:first-child{border-top:0}
.bn{flex:none;width:150px;min-width:0}
.bn b{display:block;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn span{font-size:11.5px;color:var(--ink-45)}
.bbar{flex:1;min-width:40px}
.bp{flex:none;width:58px;text-align:right;font-weight:500;font-size:13.5px}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mem{padding:24px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mem b{font-weight:500;font-size:15px;margin-top:6px}
.mem span{font-size:12px;color:var(--ink-45)}
.mem .btn{margin-top:10px;font-size:12.5px;padding:8px 18px}

/* locked preview grid */
.sp-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

@media (max-width:1000px){
  .sp-cols{grid-template-columns:1fr}
  .sp-side{position:static;flex-direction:row;flex-wrap:wrap}
  .sp-side>*{flex:1;min-width:250px}
  .cw-grid{grid-template-columns:repeat(2,1fr)}
  .mem-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .sp-head{grid-template-columns:1fr}
  .sp-you{width:100%}
}
@media (max-width:640px){
  .courses-page{padding:120px 0 90px}
  .cw-grid,.mem-grid,.sp-preview{grid-template-columns:1fr}
  .post{padding:20px}
  .ev{flex-wrap:wrap}
  .ev .btn{width:100%;justify-content:center}
  .bn{width:auto;flex:1}
  .bbar{display:none}
}

/* ==========================================================================
   AUTH FLOW — credentials → emailed code → payment → done
   ========================================================================== */
.astep{display:flex;flex-direction:column;gap:16px;animation:fadeUp .45s var(--ease) both}
.astep[hidden]{display:none}
.ah{font-weight:500;font-size:22px;letter-spacing:-.03em;text-align:center}
.asub{font-size:14px;color:var(--ink-70);text-align:center;line-height:1.6;font-weight:300;margin-top:-6px}
.asub b{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
#aconfirm-w[hidden]{display:none}
.match{font-size:11.5px;letter-spacing:0;text-transform:none;margin-top:-2px}
.match.ok{color:var(--blue)}
.match.no{color:var(--pink)}
.aerr.note{color:var(--ink-70)}

/* six-digit code */
.codes{display:flex;gap:8px;justify-content:center}
.codes input{-webkit-appearance:none;appearance:none;width:46px;height:56px;text-align:center;font:inherit;font-size:22px;font-weight:500;
  border-radius:14px;border:1px solid var(--line-2);background-color:var(--bg-2);color:var(--ink);outline:none;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease)}
html[data-theme=dark] .codes input{background-color:#171923}
.codes input:focus{border-color:rgba(var(--violet-rgb),.7);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.14);transform:translateY(-2px)}
.codes input:not(:placeholder-shown){border-color:rgba(var(--violet-rgb),.45)}
#vresend:disabled{opacity:.45;cursor:default;transform:none}
.linkbtn.back{align-self:center;color:var(--ink-45);font-size:12.5px}
.auth .fine .linkbtn{display:inline;font-size:inherit}
#vtimer{color:var(--ink-45)}

/* plan summary on the payment step */
.plan{padding:20px;border-radius:18px;display:flex;flex-direction:column;gap:12px}
.plan-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-h b{font-weight:500;font-size:15px}
.plan-h .badge-hi{position:static;font-size:9.5px}
.plan-p{display:flex;align-items:baseline;gap:8px}
.plan-p b{font-size:36px;font-weight:500;letter-spacing:-.04em;line-height:1}
.plan-p span{font-size:12.5px;color:var(--ink-45)}
.plan-l{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--ink-70)}
.plan-l li{display:flex;gap:9px;align-items:flex-start}
.plan-l li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--blue),var(--pink));
  background-size:8px,100%;background-repeat:no-repeat;background-position:center}
#paybtn{justify-content:center}
.paylogos{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.paylogos span{font-size:10.5px;letter-spacing:.04em;padding:5px 11px;border-radius:8px;border:1px solid var(--line-2);color:var(--ink-45);font-weight:500}

/* done */
.tick{width:58px;height:58px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:26px;color:#fff;
  background:var(--grad);box-shadow:0 12px 30px -12px rgba(var(--violet-rgb),.7);animation:pop .6s var(--ease) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
#donebtn{justify-content:center}

@media (max-width:420px){
  .codes{gap:6px}
  .codes input{width:100%;min-width:0;height:52px;font-size:19px}
}

/* --------------------------------------------------------------------------
   scroll reveal — the same move everywhere: 28px up, fade, 0.9s, staggered.
   Runs regardless of the OS "reduce motion" setting — the motion is the
   point of the page.
   -------------------------------------------------------------------------- */
.rv,.io{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),background-color .6s var(--ease),border-color .6s var(--ease),box-shadow 1s var(--ease)}
.rv.in,.io.in{opacity:1;transform:none}
.rv-group>*{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-group.in>*{opacity:1;transform:none}
.card.in:hover{transform:translateY(-4px)}
/* progress bars grow in with their card */
.rv:not(.in) .tr i,.io:not(.in) .tr i{transform:scaleX(0)}
.rv.in .tr i,.io.in .tr i{transition-delay:.35s}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){.links a{padding:8px 10px;font-size:13px}.signin{display:none}}
@media (max-width:1000px){
  .links,.signin{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr}
  .peek-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .split.cp{grid-template-columns:1fr}.feat-grid,.forum,.tier ul.two,.cost-grid{grid-template-columns:1fr}.feat.big{grid-row:auto}.crypto{flex-direction:column;align-items:flex-start}.dbstats,.proof{grid-template-columns:repeat(2,1fr)}
  .wide-in{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:820px){
  .nav{grid-template-columns:1fr auto}.links{display:none}
  .mcta{display:flex}
}
@media (max-width:480px){.brand span{display:none}.theme{padding:0 10px;margin-right:2px}}
@media (max-width:640px){
  .hero{padding-top:124px}section{padding:84px 0}.peek{padding-top:36px}.final{padding-bottom:84px}
  .grid,.tiers,.dbstats,.proof,.grid.two{grid-template-columns:1fr}
  .peek-grid{grid-template-columns:1fr;max-height:420px;overflow:hidden}
  .peek-lock{padding:28px 22px}
  .split .card,.tier,.cp-left,.cost,.final-card{padding:26px}.mb{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}
  .final-card{padding:64px 22px}
  .btn-lg{padding:14px 20px;font-size:14px}
  .nav .btn{padding:8px 13px;font-size:12.5px}
  body{padding-bottom:76px}
}

/* ---- age / research-use gate over the sourcing database ---- */
.gate-wrap{position:relative}
.gate-wrap.locked .grid{filter:blur(7px);opacity:.5;pointer-events:none;user-select:none}
.gate{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:3}
.gate-in{max-width:620px;width:100%;padding:32px 30px;border-radius:var(--r-lg);
  background:var(--bg-2);border:1px solid var(--line);box-shadow:0 24px 70px rgba(10,11,16,.28);
  position:sticky;top:96px}
html[data-theme=dark] .gate-in{background:#12131B}
.gate-tag{display:inline-block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--violet);font-weight:600;margin-bottom:12px}
.gate-in h3{font-size:clamp(21px,2.4vw,27px);line-height:1.22;margin:0 0 14px;letter-spacing:-.02em}
.gate-in p{font-size:14px;line-height:1.72;color:var(--ink-2);margin:0 0 12px}
.gate-check{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;cursor:pointer;
  font-size:13.5px;line-height:1.62;color:var(--ink);transition:color .2s var(--ease)}
.gate-check:hover{color:var(--violet)}
.gate-check input{appearance:none;-webkit-appearance:none;flex:0 0 19px;width:19px;height:19px;margin:1px 0 0;
  border:1.5px solid var(--line-2);border-radius:6px;background:transparent;cursor:pointer;position:relative;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.gate-check input:hover{border-color:var(--violet)}
.gate-check input:checked{background:var(--violet);border-color:var(--violet)}
.gate-check input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.gate-check input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.gate-in .btn{margin:22px 0 10px;width:100%;justify-content:center}
.gate-in .btn[disabled]{opacity:.42;pointer-events:none}
.gate-in .fine{display:block;font-size:12px;color:var(--ink-3)}
@media(max-width:640px){.gate{padding:14px}.gate-in{padding:24px 20px;top:76px}}