/* ==========================================================================
   The Next Coin Club — Design System
   Single source of truth for the platform. Web and app share these tokens.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --sect:clamp(80px,9.5vw,136px);
  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-pill:980px;
  --spring:cubic-bezier(.34,1.32,.36,1);
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;--t-base:.3s;--t-slow:.45s;
}
[data-theme="light"]{
  --bg:#FFFFFF;--surface:#FAFAFA;--raised:#FFFFFF;--sunk:#F4F5F6;
  --text:#0B0B0C;--dim:#52575E;--mute:#666B73;
  --hair:#E7E9EC;--hair2:#D6D9DE;
  --btn-bg:#0B0B0C;--btn-fg:#FFFFFF;
  --sh-sm:0 1px 2px rgba(11,11,12,.05),0 1px 3px rgba(11,11,12,.03);
  --sh-md:0 4px 14px rgba(11,11,12,.06),0 1px 3px rgba(11,11,12,.04);
  --sh-lg:0 28px 60px rgba(11,11,12,.11),0 3px 10px rgba(11,11,12,.05);
  --glow:rgba(11,11,12,.045);
  --edge:linear-gradient(180deg,rgba(11,11,12,.10),rgba(11,11,12,0) 42%);
  --spot:rgba(11,11,12,.045);
  --grain:.030;--sel:rgba(11,11,12,.12);
  --ok:#087A43;--ok-bg:rgba(8,122,67,.09);--ok-bd:rgba(8,122,67,.28);
  --lightlogo:none;--darklogo:block;
}
[data-theme="dark"]{
  --bg:#0A0A0B;--surface:#101012;--raised:#161719;--sunk:#141416;
  --text:#F5F5F7;--dim:#B4B4B9;--mute:#8A8F98;
  --hair:rgba(255,255,255,.10);--hair2:rgba(255,255,255,.18);
  --btn-bg:#F5F5F7;--btn-fg:#0A0A0B;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px rgba(0,0,0,.5);
  --sh-lg:0 30px 70px rgba(0,0,0,.7);
  --glow:rgba(255,255,255,.07);
  --edge:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%);
  --spot:rgba(255,255,255,.055);
  --grain:.045;--sel:rgba(245,245,247,.18);
  --ok:#30D158;--ok-bg:rgba(48,209,88,.10);--ok-bd:rgba(48,209,88,.32);
  --lightlogo:block;--darklogo:none;
}

/* --- 2. Base ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     font-variant-numeric:tabular-nums;transition:background .4s ease,color .4s ease}
::selection{background:var(--sel)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}

/* film grain — analog depth */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:2;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.measure{max-width:680px;margin-left:auto;margin-right:auto}
.lg-light{display:var(--lightlogo)}.lg-dark{display:var(--darklogo)}

/* --- 3. Motion ----------------------------------------------------------- */
.reveal>*{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--spring);
  transition-delay:calc(var(--i,0) * 70ms);
  animation:reveal-failsafe .01s linear 1.4s forwards}
.reveal.in>*{opacity:1;transform:none}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal>*{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .dot::after{animation:none!important}
}

.skip-link{position:fixed;left:16px;top:12px;z-index:120;transform:translateY(-160%);
  background:var(--btn-bg);color:var(--btn-fg);padding:10px 16px;border-radius:10px;font-weight:600}
.skip-link:focus{transform:none}

/* --- 4. Typography ------------------------------------------------------- */
h1,h2,h3,h4,.d1,.d2{text-wrap:balance}
.d1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.6vw,74px);line-height:1.03;letter-spacing:-.024em}
.d1 em{font-style:italic;color:var(--dim)}
.d2{font-family:var(--serif);font-weight:400;font-size:clamp(29px,4.3vw,50px);line-height:1.1;letter-spacing:-.018em}
.d2 em{font-style:italic}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3vw,31px);line-height:1.18;letter-spacing:-.014em}
.idx{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--mute)}
.kicker{color:var(--mute);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.lede{color:var(--dim);font-size:clamp(16.5px,1.85vw,19px);line-height:1.62;text-wrap:pretty}

/* --- 5. Navigation ------------------------------------------------------- */
nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 80%,transparent);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--hair);transition:box-shadow var(--t-slow) var(--ease)}
nav.stuck{box-shadow:var(--sh-sm)}
.navin{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;
       padding:13px 24px;gap:18px;transition:padding var(--t-slow) var(--ease)}
nav.stuck .navin{padding:8px 24px}
.navin .logo img{height:24px;width:auto;transition:height var(--t-slow) var(--ease)}
nav.stuck .logo img{height:21px}
.prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--text);width:0%;transition:width .1s linear}
.navlinks{display:flex;gap:24px;font-size:13.5px;color:var(--dim)}
.navlinks a{transition:color var(--t-base);position:relative}
.navlinks a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--text);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.navlinks a:hover{color:var(--text)}
.navlinks a:hover::after{transform:scaleX(1)}
.navright{display:flex;gap:10px;align-items:center}

/* --- 6. Controls --------------------------------------------------------- */
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--hair);border-radius:var(--r-pill);padding:2px;gap:1px}
.seg button{border:0;background:transparent;border-radius:var(--r-pill);padding:5px 8px;cursor:pointer;color:var(--mute);
            display:flex;align-items:center;transition:background var(--t-base) var(--ease),color var(--t-base);font-family:inherit}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--raised);color:var(--text);box-shadow:var(--sh-sm)}
.seg svg{width:15px;height:15px;display:block}

.kbd{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hair);background:var(--sunk);
     border-radius:8px;padding:5px 9px;font-size:11.5px;color:var(--mute);cursor:pointer;
     transition:all var(--t-base);font-family:inherit}
.kbd:hover{color:var(--text);border-color:var(--hair2)}

.btn{display:inline-block;border-radius:var(--r-pill);padding:10px 20px;font-size:13.5px;font-weight:500;
     border:1px solid var(--hair2);background:transparent;color:var(--text);white-space:nowrap;cursor:pointer;
     font-family:inherit;text-align:center;
     transition:transform var(--t-fast) var(--spring),box-shadow var(--t-base) var(--ease),border-color var(--t-base),background var(--t-base)}
.btn:hover{border-color:var(--text)}
.btn:active{transform:scale(.975)}
.btn.solid{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);box-shadow:var(--sh-sm)}
.btn.solid:hover{transform:translateY(-1.5px);box-shadow:var(--sh-md)}
.btn.solid:active{transform:scale(.975)}
.btn.lg{padding:14px 28px;font-size:15.5px;font-weight:600}
.btn.full{width:100%;display:block}
.ghost{font-size:13.5px;color:var(--dim);padding:9px 4px;transition:color var(--t-base)}
.ghost:hover{color:var(--text)}

input[type=text],input[type=email],input[type=password],input[type=tel]{
  width:100%;background:var(--sunk);border:1px solid var(--hair);border-radius:14px;padding:14px 17px;
  color:var(--text);font-size:16px;font-family:inherit;outline:none;transition:border-color var(--t-base),background var(--t-base)}
input::placeholder{color:var(--mute)}
input:focus{border-color:var(--hair2);background:var(--raised)}

/* --- 7. Surfaces (edge-light + pointer spotlight) ------------------------- */
.surf{position:relative;background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-lg);
      box-shadow:var(--sh-sm);overflow:hidden;isolation:isolate}
.surf::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.55;z-index:1}
.surf>*{position:relative;z-index:2}
.spot::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none;z-index:0;
  transition:opacity var(--t-slow) var(--ease);
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 42%)}
.spot:hover::after{opacity:1}
.lift{transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.lift:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}

/* --- 8. Sections --------------------------------------------------------- */
section{padding:var(--sect) 0}
section.alt{background:var(--surface)}
.sechead{text-align:center;margin-bottom:clamp(44px,5.5vw,64px)}
.sechead .d2{margin-top:13px}
.sechead .lede{max-width:600px;margin:20px auto 0}

/* --- 9. Rows / lists ----------------------------------------------------- */
.list{max-width:700px;margin:0 auto}
.row{display:flex;gap:18px;align-items:baseline;padding:17px 24px;border-bottom:1px solid var(--hair);
     transition:background var(--t-base) var(--ease)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface)}
.row .n{font-size:11px;color:var(--mute);letter-spacing:.14em;min-width:82px;font-weight:500}
.row .ti{flex:1;font-size:15.5px}
.row .st{font-size:12px;color:var(--mute)}
.row.next .ti{font-weight:600}
.row.next .st{color:var(--ok);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.srow{display:flex;gap:16px;align-items:flex-start;padding:17px 24px;border-bottom:1px solid var(--hair);
      transition:background var(--t-base) var(--ease)}
.srow:last-child{border-bottom:0}
.srow:hover{background:var(--surface)}
.srow .k{font-size:11px;color:var(--mute);letter-spacing:.16em;min-width:32px;padding-top:3px;font-weight:500}
.srow p{font-size:15.5px;color:var(--dim);line-height:1.6}
.srow p strong{color:var(--text);font-weight:500}

.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);position:relative;display:inline-block}
.dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--ok);opacity:.3;
  animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.45}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* --- 10. Badges ---------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:5px 11px;
       font-size:11.5px;font-weight:500;border:1px solid var(--hair);background:var(--sunk);color:var(--dim)}
.badge.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}

/* --- 11. Progress -------------------------------------------------------- */
.bar{background:var(--sunk);border-radius:var(--r-pill);height:6px;overflow:hidden;border:1px solid var(--hair)}
.bar i{display:block;background:var(--text);height:100%;border-radius:var(--r-pill);
       transition:width .9s var(--ease)}

/* --- 12. Footer ---------------------------------------------------------- */
footer{padding:clamp(50px,6.5vw,72px) 24px calc(clamp(50px,6.5vw,72px) + 62px);
       border-top:1px solid var(--hair);background:var(--surface)}
.fgrid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:42px}
.fgrid h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;font-weight:600}
.fgrid a{display:block;color:var(--dim);font-size:14px;padding:5px 0;
         transition:color var(--t-base),transform var(--t-base) var(--ease)}
.fgrid a:hover{color:var(--text);transform:translateX(2px)}
.fbrand img{height:22px;margin-bottom:14px}
.fbrand p{color:var(--mute);font-size:13px;line-height:1.6;max-width:250px}
.disc{max-width:840px;margin:0 auto 18px;color:var(--mute);font-size:11.5px;line-height:1.75;text-align:center}
.cr{color:var(--mute);font-size:12px;text-align:center}

.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--hair);padding:11px 16px;display:none}

/* --- 13. Command palette ------------------------------------------------- */
.cmdk{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
      padding:14vh 20px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px)}
.cmdk.open{display:flex;animation:cfade .22s var(--ease)}
@keyframes cfade{from{opacity:0}to{opacity:1}}
.cmdbox{width:100%;max-width:520px;background:var(--raised);border:1px solid var(--hair2);border-radius:18px;
        box-shadow:var(--sh-lg);overflow:hidden;animation:cpop .28s var(--spring)}
@keyframes cpop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.cmdbox input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-family:inherit;
              font-size:16px;padding:17px 20px;border-bottom:1px solid var(--hair);border-radius:0}
.cmdlist{max-height:320px;overflow-y:auto;padding:7px}
.cmditem{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:11px;
         cursor:pointer;font:inherit;font-size:14.5px;text-align:left;width:100%;border:0;background:transparent;color:var(--text);
         transition:background var(--t-fast)}
.cmditem span.s{color:var(--mute);font-size:12px}
.cmditem.sel,.cmditem:hover{background:var(--sunk)}
.cmdfoot{padding:9px 14px;border-top:1px solid var(--hair);color:var(--mute);font-size:11.5px;display:flex;gap:14px}

/* --- 14. Member shell ---------------------------------------------------- */
.appshell{max-width:1180px;margin:0 auto;padding:clamp(24px,3.4vw,38px) 22px 0;
          display:grid;grid-template-columns:206px 1fr;gap:40px}
.side{display:none;flex-direction:column;gap:2px;position:sticky;top:78px;align-self:start}
.side a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;font-size:14.5px;color:var(--dim);
        transition:background var(--t-base),color var(--t-base)}
.side a:hover{background:var(--sunk);color:var(--text)}
.side a.on{background:var(--sunk);color:var(--text);font-weight:500}
.side .sect{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
            margin:22px 0 8px;padding-left:13px;font-weight:600}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;
      background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);border-top:1px solid var(--hair);display:flex;padding:8px 6px 13px}
.tabs a{flex:1;text-align:center;color:var(--mute);font-size:10px;letter-spacing:.03em;
        transition:color var(--t-base)}
.tabs a .i{font-size:17px;display:block;margin-bottom:3px}
.tabs a.on{color:var(--text)}
.av{width:30px;height:30px;border-radius:50%;background:var(--sunk);border:1px solid var(--hair2);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text)}

/* --- 15. Responsive ------------------------------------------------------ */
@media(min-width:900px){ .side{display:flex} .tabs{display:none} }
@media(max-width:899px){ .appshell{grid-template-columns:1fr;gap:0;padding-bottom:0} body.member{padding-bottom:84px} }
@media(max-width:920px){
  .navlinks,.kbd{display:none}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:640px){
  .stickybar{display:block}
}

/* ==========================================================================
   16. HEADER REFINEMENT
   Larger logo lockup, generous spacing, and a single cycling theme control.
   The theme control reuses the existing 3-button markup: only the button
   matching the active mode is shown, so it reads as one control, and the
   click handler advances light -> dark -> system.
   ========================================================================== */

/* Logo presence — header and footer */
.navin .logo img,
nav .navin > a img{height:34px;width:auto;transition:height var(--t-slow) var(--ease)}
nav.stuck .navin .logo img,
nav.stuck .navin > a img{height:28px}
.fbrand img{height:32px;margin-bottom:16px}
.topbar img{height:32px}

/* Spacing */
.navin{gap:22px;padding:14px 24px}
.navright{gap:14px;align-items:center}
.navlinks{gap:26px}

/* Single cycling theme control */
.seg{width:38px;height:38px;padding:0;gap:0;border-radius:50%;
     background:transparent;border:1px solid var(--hair2);
     display:flex;align-items:center;justify-content:center;overflow:hidden;
     transition:border-color var(--t-base),background var(--t-base),transform var(--t-fast) var(--spring)}
.seg:hover{border-color:var(--text);background:var(--sunk)}
.seg:active{transform:scale(.92)}
.seg button{display:none;width:38px;height:38px;padding:0;border-radius:50%;
            align-items:center;justify-content:center;color:var(--dim);
            background:transparent;box-shadow:none}
.seg button.on{display:flex;animation:tswap .34s var(--spring)}
.seg:hover button.on{background:transparent;box-shadow:none;color:var(--text)}
.seg button svg{width:17px;height:17px;stroke-width:1.9}
@keyframes tswap{from{opacity:0;transform:rotate(-40deg) scale(.72)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.seg button.on{animation:none}}

@media(max-width:820px){
  .navin{gap:16px;padding:13px 20px}
  .navin .logo img,nav .navin > a img{height:31px}
  .navright{gap:12px}
}
@media(max-width:600px){
  .navin{gap:14px;padding:12px 17px}
  .navin .logo img,nav .navin > a img{height:29px}
  nav.stuck .navin .logo img{height:25px}
  .ghost{display:none}
  .navright{gap:12px}
  .navright .btn.solid{padding:10px 18px;font-size:13px}
  .fbrand img{height:30px}
}
@media(max-width:380px){
  .navin{padding:11px 14px;gap:11px}
  .navin .logo img,nav .navin > a img{height:26px}
  .seg{width:36px;height:36px}
  .seg button{width:36px;height:36px}
  .navright .btn.solid{padding:9px 15px;font-size:12.5px}
}

/* ==========================================================================
   17. AUTH FORMS
   Inline validation messaging for signup / signin / verify. Errors are
   announced via role="alert" in the markup; these styles only carry the
   visual weight. Colour is never the sole signal — every error also has
   text, so this reads correctly for colour-blind members.
   ========================================================================== */
.err{
  color:var(--bad,#B42318);
  font-size:13px;
  line-height:1.5;
  margin-top:7px;
  display:flex;
  gap:7px;
  align-items:flex-start;
  animation:errIn .22s var(--ease,cubic-bezier(.16,1,.3,1));
}
.err::before{
  content:"";
  width:15px;height:15px;flex-shrink:0;margin-top:1px;
  border-radius:50%;
  background:currentColor;
  -webkit-mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.01'/%3E%3C/svg%3E");
          mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.01'/%3E%3C/svg%3E");
}
/* The hidden attribute must beat the display rule above. Without this,
   author display:flex outranks the UA [hidden] rule and every error message
   renders permanently. */
.err[hidden]{ display:none !important; }
.err[role="status"]{ color:var(--dim); }
.err[role="status"]::before{ display:none; }
@keyframes errIn{ from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .err{animation:none} }

/* Input paired with a visible error */
input[aria-invalid="true"]{ border-color:var(--bad,#B42318) }

/* Disabled submit while a request is in flight */
.btn[disabled]{ opacity:.55; cursor:progress; pointer-events:none }

/* Fallback error colour if the token is absent in either theme */
:root{ --bad:#B42318 }
[data-theme="dark"]{ --bad:#FF6B60 }

/* Lesson horizontal rule — the closing line of every lesson sits below one. */
.lhr{ border:0; height:1px; background:var(--hair); margin:34px 0 26px; }