/* TechMMA - the app chrome shared by checkout and the members area. */

body.app{min-height:100svh;display:flex;flex-direction:column}
body.app main{flex:1}


/* ───────────── the bar ───────────── */
.appbar{
  position:sticky;top:0;z-index:20;
  background:rgba(241,244,250,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.appbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.85rem;
}
.brandmark{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--text-primary);
}
.brandmark svg{width:28px;height:28px;color:var(--text-primary)}
.brandmark span{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:1.04rem;letter-spacing:-.01em;text-transform:uppercase;
}
.brandmark i{font-style:normal;color:var(--accent)}
.appbar-note{
  margin:0;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}

.appfoot{border-top:1px solid var(--line);padding-block:1.4rem;margin-top:auto}
.appfoot .wrap{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:baseline}
.appfoot p{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--line-strong)}
.appfoot a{color:var(--text-secondary);text-decoration:none}
.appfoot a:hover{color:var(--accent)}

/* ───────────── checkout ───────────── */
.checkout{padding-block:clamp(40px,7vw,86px)}
.co-grid{display:grid;gap:clamp(30px,5vw,68px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.co-grid{grid-template-columns:minmax(0,1fr) minmax(0,400px)}}
.co-left h1{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:1.1rem}
.co-gets{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.8rem}
.co-gets li{
  display:flex;gap:.7rem;align-items:baseline;
  font-size:.97rem;color:var(--text-secondary);
}
.co-gets .ico-xs{color:var(--accent)}

.co-narrow{max-width:460px;margin-inline:auto}
.co-card{padding:clamp(1.3rem,2.4vw,1.9rem)}
.co-center{text-align:center}
.co-center h2{margin-top:.6rem}

.co-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.7rem;font-size:.97rem;
}
.co-line-muted{color:var(--accent);font-size:.9rem}
.co-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--line);padding-top:.9rem;margin-bottom:1.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.co-total strong{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:1.9rem;letter-spacing:-.02em;color:var(--text-primary);
  text-transform:none;
}
#co-form{display:grid;gap:.9rem}
#co-form .btn{width:100%}
.co-sec{
  display:flex;gap:.5rem;align-items:baseline;
  margin:1rem 0 0;font-size:.82rem;color:var(--text-secondary);
}
.co-sec .ico-xs{color:var(--line-strong)}
.co-sec-quiet{font-size:.78rem;opacity:.8;margin-top:.4rem}
.co-switch{margin:1rem 0 0;font-size:.9rem;color:var(--text-secondary);text-align:center}

.co-err{
  margin-top:1rem;padding:.85rem 1rem;border-radius:3px;font-size:.9rem;
  background:#FDEDEE;border:1px solid #F3C4C8;color:#8E2A32;
}
.co-err[hidden]{display:none}

.co-tick{
  width:56px;height:56px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--accent-muted);color:var(--accent-hover);margin-bottom:.4rem;
}
.co-tick svg{width:26px;height:26px}

.spin{width:42px;height:42px;color:var(--accent);margin-inline:auto}
.spin circle{transform-origin:50% 50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────────── the members shell ───────────── */
.mnav{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.mnav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;padding:.5em .7em;border-radius:3px;
  transition:color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.mnav a:hover{color:var(--text-primary);background:var(--panel-2)}
.mnav a[aria-current="page"]{color:var(--accent);background:var(--accent-muted)}

.mview{padding-block:clamp(30px,5vw,58px);animation:viewin .5s var(--ease-out) both}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mhead{margin-bottom:clamp(26px,4vw,44px)}
.mhead h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.mhead p{margin:.8rem 0 0;color:var(--text-secondary);max-width:62ch}

.back{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;
}
.back:hover{color:var(--accent)}

/* the dashboard grid */
.dash{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.tile{
  display:flex;flex-direction:column;gap:.55rem;padding:clamp(1.15rem,2vw,1.5rem);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
}
.tile .ico{
  width:40px;height:40px;border-radius:3px;display:grid;place-items:center;
  background:var(--accent-muted);color:var(--accent-hover);margin-bottom:.4rem;
  transition:background var(--t-mid) var(--ease-out),color var(--t-mid) var(--ease-out);
}
.tile .ico svg{width:20px;height:20px}
.tile:hover .ico{background:var(--accent);color:#fff}
.tile h3{font-size:1rem}
.tile p{font-size:.89rem;color:var(--text-secondary);margin:0}
.tile .pill{
  position:absolute;right:12px;top:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);
}

/* progress bars */
.bar{height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:.7rem}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;
       width:var(--p,0%);transition:width .7s var(--ease-out)}

/* generic tool layout */
.tool{display:grid;gap:clamp(20px,3vw,38px);grid-template-columns:1fr;align-items:start}
@media (min-width:980px){.tool.split{grid-template-columns:minmax(0,370px) minmax(0,1fr)}}
.panel{padding:clamp(1.2rem,2.2vw,1.7rem)}
.panel h2{font-size:1.15rem;margin-bottom:1rem}
.panel .field + .field{margin-top:.85rem}
.panel .btn{width:100%;margin-top:1.1rem}

.out{
  padding:clamp(1.2rem,2.4vw,1.9rem);min-height:260px;
  font-size:.98rem;line-height:1.72;
}
.out h2,.out h3{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
                text-transform:uppercase;letter-spacing:-.01em;margin:1.5rem 0 .6rem}
.out h2{font-size:1.3rem}
.out h3{font-size:1.02rem}
.out h2:first-child,.out h3:first-child{margin-top:0}
.out ul,.out ol{margin:0 0 1.1em;padding-left:1.3em}
.out li{margin-bottom:.4em}
.out table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.9rem}
.out th,.out td{text-align:left;padding:.55em .7em;border-bottom:1px solid var(--line)}
.out th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
        color:var(--text-secondary);font-weight:500}
.out strong{color:var(--text-primary)}
.out .ph{color:var(--text-secondary);font-style:italic}

/* the empty / not-connected state, told honestly */
.empty{
  display:grid;place-items:center;gap:.8rem;text-align:center;
  padding:clamp(2rem,5vw,3.4rem) 1.2rem;color:var(--text-secondary);
}
.empty .ico{
  width:46px;height:46px;border-radius:3px;display:grid;place-items:center;
  background:var(--panel-2);color:var(--line-strong);
}
.empty .ico svg{width:22px;height:22px}
.empty h3{color:var(--text-primary)}
.empty p{max-width:46ch;margin:0;font-size:.93rem}

/* notices */
.notice{
  display:flex;gap:.8rem;padding:.95rem 1.1rem;border-radius:3px;font-size:.89rem;
  background:#FFF8E6;border:1px solid #F0DCA8;color:#6B5312;margin-bottom:1.3rem;
}
.notice.info{background:var(--accent-muted);border-color:rgba(27,71,224,.22);color:var(--accent-hover)}
.notice b{display:block;margin-bottom:.2rem}

/* chat */
.chat{display:flex;flex-direction:column;min-height:min(62vh,580px)}
.chat-log{flex:1;overflow-y:auto;display:grid;gap:.95rem;align-content:start;padding-bottom:1rem}
.msg{max-width:78%;padding:.8rem 1rem;border-radius:4px;font-size:.95rem;line-height:1.6}
.msg.me{justify-self:end;background:var(--accent);color:#fff}
.msg.ai{justify-self:start;background:var(--panel-2);color:var(--text-primary)}
.msg.ai em{color:var(--text-secondary)}
.chat-form{display:flex;gap:.6rem;border-top:1px solid var(--line);padding-top:1rem}
.chat-form input{flex:1}
.chat-form .btn{margin:0;width:auto;flex:none}

/* the reader */
.reader{display:grid;gap:clamp(20px,3vw,38px);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.reader{grid-template-columns:minmax(0,260px) minmax(0,1fr)}}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;position:sticky;top:76px}
.toc button{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.65em .8em;border-radius:3px;font:inherit;font-size:.92rem;color:var(--text-secondary);
  display:flex;gap:.7rem;align-items:baseline;
  transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.toc button:hover{background:var(--panel-2);color:var(--text-primary)}
.toc button[aria-current="true"]{background:var(--accent-muted);color:var(--accent-hover);font-weight:600}
.toc .n{font-family:var(--mono);font-size:.68rem;color:var(--line-strong);flex:none}
.toc .done{color:var(--accent)}
.chapter{padding:clamp(1.4rem,3vw,2.6rem)}
.chapter p,.chapter li{max-width:68ch}
.chapter-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;
             border-top:1px solid var(--line);padding-top:1.4rem;flex-wrap:wrap}

/* the library */
.lib{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.vid{overflow:hidden;display:flex;flex-direction:column}
.vid-thumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;
           border-bottom:1px solid var(--line)}
.vid-thumb .play{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:var(--accent);
  box-shadow:0 8px 24px -12px rgba(12,18,34,.6);
  transition:transform var(--t-mid) var(--ease-out);
}
.vid:hover .vid-thumb .play{transform:scale(1.08)}
.vid-body{padding:1rem 1.1rem}
.vid h3{font-size:.95rem;margin-bottom:.3rem}
.vid p{font-size:.85rem;color:var(--text-secondary);margin:0}
.vid .len{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--line-strong)}

/* the physique uploader */
.drop{
  border:2px dashed var(--line-strong);border-radius:4px;
  padding:clamp(1.6rem,4vw,2.6rem);text-align:center;cursor:pointer;
  background:var(--panel);
  transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-muted)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop .big{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;
           text-transform:uppercase;font-size:1rem;display:block;margin-bottom:.4rem}
.drop small{color:var(--text-secondary);font-size:.85rem}
.preview{margin-top:1rem;border-radius:4px;overflow:hidden;border:1px solid var(--line);display:none}
.preview.on{display:block}
.preview img{width:100%;display:block}
.reqs{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.reqs li{display:flex;gap:.65rem;align-items:baseline;font-size:.89rem;color:var(--text-secondary)}
.reqs .ico-xs{color:var(--accent)}

/* the tracker */
.logs{display:grid;gap:.6rem}
.log{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.85rem 1.05rem;background:var(--panel);border:1px solid var(--line);border-radius:3px;
  font-size:.93rem;
}
.log .when{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--line-strong)}
.log .val{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;font-size:1.05rem}

.stats{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));margin-bottom:1.6rem}
.stat{padding:1.1rem 1.2rem}
.stat .n{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
         font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--accent);display:block}
.stat span.l{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--text-secondary);display:block;margin-top:.45rem}

.row{display:flex;gap:.7rem;flex-wrap:wrap}
.row .field{flex:1;min-width:140px}
.row .btn{margin-top:0;align-self:end;width:auto}

/* the gate when someone lands here without access */
.gate{display:grid;place-items:center;min-height:62svh;text-align:center;padding:2rem var(--gutter)}
.gate .inner{max-width:430px}
.gate svg.mk{width:54px;color:var(--text-primary);margin-inline:auto 0;margin-bottom:1.2rem}
.gate h1{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.9rem}
.gate p{color:var(--text-secondary);margin-bottom:1.7rem}
.gate .btn + .btn{margin-left:.6rem}

@media (prefers-reduced-motion:reduce){
  .mview{animation:none}
  .spin circle{animation:none}
}

/* ───────────── legal pages ───────────── */
.legal{padding-block:clamp(40px,6vw,80px)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:.9rem}
.legal .updated{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:clamp(28px,4vw,48px);display:block;
}
.legal h2{
  font-size:1.18rem;margin:clamp(30px,4vw,48px) 0 .8rem;
  padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:.95rem;margin:1.6rem 0 .5rem}
.legal p,.legal li{color:var(--text-secondary);max-width:70ch}
.legal strong{color:var(--text-primary)}
.legal ul{padding-left:1.2em;margin:0 0 1.1em}
.legal li{margin-bottom:.5em}
.legal .fill{
  background:#FFF4D6;border-bottom:2px solid #E0B43A;color:#6B5312;
  padding:0 .25em;border-radius:2px;font-weight:600;
}
.legal .box{
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:3px;padding:1.1rem 1.3rem;margin:1.4rem 0;
}
.legal .box p{margin:0;color:var(--text-primary);font-size:.95rem}
.legal .toc-links{
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-bottom:clamp(28px,4vw,44px);
  padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line);
}
.legal .toc-links a{font-size:.9rem;text-decoration:none}
.legal .toc-links a:hover{text-decoration:underline}

/* ═══════════════ CHECKOUT, REBUILT ═══════════════
   The old one was a thin card with a small field. Money pages need to feel
   substantial: bigger surfaces, a real order summary, and an email field you
   cannot miss. */

.checkout{padding-block:clamp(32px,5vw,70px)}
.co-grid{
  display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:1000px){
  .co-grid{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
}

/* ───────── left: what you are buying ───────── */
.co-left h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.9rem}
.co-left .lede{font-size:1.02rem}

.co-gets{
  list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.95rem;
}
.co-gets li{display:flex;gap:.8rem;align-items:baseline;font-size:1rem;color:var(--text-secondary)}
.co-gets .ico-xs{color:var(--accent);width:16px;height:16px}

.co-assure{
  margin-top:2rem;padding-top:1.7rem;border-top:1px solid var(--line);
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.co-assure .bit{display:flex;gap:.75rem;align-items:flex-start}
.co-assure .bit svg{width:19px;height:19px;flex:none;color:var(--accent);margin-top:.15em}
.co-assure h4{font-size:.88rem;margin-bottom:.22rem}
.co-assure p{font-size:.85rem;color:var(--text-secondary);margin:0;max-width:34ch}

/* ───────── right: the order box ───────── */
.co-card{
  padding:clamp(1.5rem,2.6vw,2.2rem);
  box-shadow:0 44px 90px -60px rgba(12,18,34,.55);
  position:sticky;top:calc(var(--headerh,58px) + 18px);
}
@media (max-width:999px){.co-card{position:static}}
.co-card > .kicker{margin-bottom:1.1rem}

#co-lines{display:grid;gap:.1rem;margin-bottom:.2rem}
.co-line{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.98rem;
}
.co-line:first-child{padding-top:0}
.co-line .what{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.co-line .what b{font-weight:600;color:var(--text-primary)}
.co-line .what small{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--line-strong);
}
.co-line .amt{white-space:nowrap;font-weight:600}
/* a real reference price: the components genuinely sell at this */
.co-line .amt s{color:var(--line-strong);font-weight:400;margin-right:.45rem;text-decoration-thickness:1px}
.co-line-muted{color:var(--accent);border-bottom-color:var(--line)}
.co-line-muted .amt{color:var(--accent);font-weight:600}

.co-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:2px solid var(--text-primary);padding-top:1.1rem;margin:.3rem 0 1.5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}
.co-total strong{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(2rem,3.4vw,2.5rem);letter-spacing:-.025em;color:var(--text-primary);
  text-transform:none;line-height:1;
}

/* the field people actually have to type in */
#co-form{display:grid;gap:1rem}
#co-form .field label{font-size:.72rem;color:var(--text-primary)}
#co-form .field input{
  font-size:1.08rem;padding:1.05em 1.1em;border-radius:4px;
  border-width:2px;
}
#co-form .field input::placeholder{color:var(--line-strong)}
#co-form .btn{width:100%;padding:1.15em 1.6em;font-size:1.05rem}
.co-field-note{
  font-size:.82rem;color:var(--text-secondary);margin:.1rem 0 0;
}

.co-pay-row{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--line-strong);flex-wrap:wrap;
}
.co-pay-row svg{width:14px;height:14px}
.co-cards{display:flex;gap:.3rem;align-items:center}
.co-cards i{
  width:30px;height:20px;border-radius:3px;border:1px solid var(--line);
  background:var(--panel-2);display:grid;place-items:center;
  font-family:var(--mono);font-size:.46rem;font-style:normal;letter-spacing:0;
  color:var(--text-secondary);
}
.co-switch{margin:1.2rem 0 0;font-size:.92rem;color:var(--text-secondary);text-align:center}
.co-narrow{max-width:520px;margin-inline:auto}

@media (pointer:coarse){
  #co-form .field input{min-height:52px}
}