/* JOGO Fuel site. Same family as JOGO's skin B: Barlow Condensed for big words,
   Inter for reading, JetBrains Mono for labels, round tiles, one hero colour
   (ember where JOGO is yellow). Light by default for reading, dark follows the
   device. */
:root{
  --bg:#F4F3EF; --s1:#FFFFFF; --s2:#ECEAE3; --line:#DEDCD3;
  --ink:#141416; --ink2:#55565E; --muted:#6C6D75;
  --ember:#FF7A1A; --ember-ink:#B84700; --on-ember:#141416;
  --prot:#0A8F54; --carb:#1F6FC0; --fat:#7A4FD6;
  --display:'Barlow Condensed',ui-sans-serif,'Arial Narrow',sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --r:22px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0B0D; --s1:#141418; --s2:#1C1C22; --line:#26262E;
    --ink:#EDEDED; --ink2:#A2A4AD; --muted:#878994;
    --ember-ink:#FF8C3A;
    --prot:#2FD488; --carb:#5AAEFF; --fat:#B39BFF;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body)}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}

/* header / footer */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;text-decoration:none;color:var(--ink)}
/* JOGO + FUEL lockup (final settings, Oct 17): FUEL is 0.99 x JOGO's height,
   sits 0.055 higher so the baselines meet, with a 0.23 gap */
.lockup{--h:24px;display:inline-flex;align-items:flex-start;gap:calc(var(--h) * .23);line-height:0}
.lockup svg{display:block;width:auto}
.lockup .lj svg{height:var(--h)}
.lockup .lf{color:var(--ember)}
.lockup .lf svg{height:calc(var(--h) * .9907);margin-top:calc(var(--h) * -.0547)}
.lockup.lg{--h:clamp(48px,10vw,104px)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{white-space:nowrap;text-decoration:none;font:700 13px var(--body);padding:8px 12px;border-radius:999px;color:var(--ink2)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--s2);color:var(--ink)}
.nav{flex-wrap:nowrap}
.nav a.lang{border:1px solid var(--line);font:600 12px var(--mono);letter-spacing:1px;padding:7px 10px}
@media (max-width:440px){.nav a.hide-xs{display:none}}
.prose .card ul{margin:8px 0 0;padding-left:20px}
.prose .grid2{margin:14px 0}
@media (max-width:640px){
  .nav a.hide-s{display:none}
  .nav a{padding:8px 9px;font-size:13px}
  .top .wrap{gap:10px}
  .lockup.sm{--h:19px}
}
footer{margin-top:72px;border-top:1px solid var(--line);padding-block:32px 48px;color:var(--muted);font-size:14px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
footer b{display:block;color:var(--ink);font:700 12px var(--mono);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}
footer a{display:block;text-decoration:none;padding:3px 0}
footer a:hover{color:var(--ink)}
footer .fine{margin-top:26px;font-size:12.5px;max-width:70ch}

/* type */
.eyebrow{font:500 12px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.3px;line-height:1;text-wrap:balance;margin:0}
h1{font-size:clamp(40px,7vw,72px)}
h2{font-size:clamp(28px,4vw,38px);margin:48px 0 14px}
h3{font-size:22px;margin:0 0 6px}
p{margin:0 0 14px}
.lede{font-size:18px;color:var(--ink2);max-width:62ch}
.muted{color:var(--muted)}
.prose{max-width:70ch}
.prose ul,.prose ol{padding-left:22px;margin:0 0 14px}
.prose li{margin:4px 0}

/* buttons, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;border:0;background:var(--ember);color:var(--on-ember);font:900 16px var(--display);letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn.ghost{background:var(--s2);color:var(--ink)}
label{display:block;font:600 13px var(--body);color:var(--ink2);margin-bottom:6px}
input,select{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--line);background:var(--s1);color:var(--ink);font:500 16px var(--body);padding:0 14px}
.seg{display:flex;background:var(--s2);border-radius:999px;padding:4px;gap:2px}
.seg label{flex:1;margin:0;text-align:center;border-radius:999px;padding:9px 6px;cursor:pointer;font:800 14px var(--display);letter-spacing:.8px;text-transform:uppercase;color:var(--ink2)}
.seg input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.seg input:checked + span{color:var(--ink)}
.seg label:has(input:checked){background:var(--s1);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.seg label:has(input:focus-visible){outline:2px solid var(--ember)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* blocks */
.hero{padding-block:56px 24px}
.hero .wm{color:var(--ember);height:clamp(70px,13vw,128px);width:auto;display:block;margin-bottom:22px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tile{display:block;text-decoration:none;background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile b{display:block;font:900 24px/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.tile span{color:var(--ink2);font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{text-decoration:none;background:var(--s1);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px}
.chip:hover{border-color:var(--ember)}
.bridge{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:#141416;color:#EDEDED;border-radius:var(--r);padding:22px;margin-top:40px}
.bridge b{font:900 24px var(--display);text-transform:uppercase;display:block}
.bridge p{margin:0;color:#B8BAC2;max-width:56ch}
.bridge .btn{margin-left:auto;background:#FCD00F;color:#141416}

/* numbers */
.big{font:900 64px/1 var(--display);font-variant-numeric:tabular-nums}
.unit{font:500 12px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{background:var(--s2);border-radius:18px;padding:14px 16px}
.stat b{display:block;font:900 30px/1 var(--display);font-variant-numeric:tabular-nums}
.stat.p b{color:var(--prot)} .stat.c b{color:var(--carb)} .stat.f b{color:var(--fat)}
.bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--s2);margin:14px 0 6px}
.bar i{display:block;height:100%}
.legend{display:flex;gap:16px;flex-wrap:wrap;font:500 12px var(--mono);color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
table.nut{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.nut th,table.nut td{text-align:left;padding:9px 4px;border-bottom:1px solid var(--line)}
table.nut td:last-child,table.nut th:last-child{text-align:right}
table.nut th{font:600 12px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.tablewrap{overflow-x:auto}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
.calc form{display:grid;gap:14px}
.result{position:sticky;top:80px}
.result[hidden]{display:none}
.note{font-size:13.5px;color:var(--muted);margin-top:10px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:10px 0 0;color:var(--ink2)}
.sources{font-size:13.5px;color:var(--muted)}
.sources li{margin:4px 0}

/* waitlist */
.wl{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.wl input[type=email]{flex:1 1 240px}
.wl .hp{position:absolute;left:-9999px}
.wl-msg{font-size:14px;margin-top:8px;min-height:1.4em}

/* breadcrumb */
.crumbs{font-size:13.5px;color:var(--muted);margin:22px 0 10px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* ---------- home ----------
   A dark hero (same look as the share images) with the app on a phone, then
   light sections: featured calculators, sport tiles with JOGO's icons, foods
   with numbers, and a dark "coming soon" band with the waitlist. */
.home .top{background:rgba(11,11,13,.86);border-bottom-color:#22222A}
.home .top .lj{color:#EDEDED}
.home .top .nav a{color:#A2A4AD}
.home .top .nav a:hover{background:#1C1C22;color:#EDEDED}
.home .top .nav a.lang{border-color:#2E2E36}
.h-hero{background:#0B0B0D;color:#EDEDED;position:relative;overflow:hidden;padding:56px 0 64px}
.h-hero:before{content:"";position:absolute;right:-12%;top:-30%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.30),transparent 62%);pointer-events:none}
.h-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;position:relative}
.h-kick{font:600 12px var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:#FF8C3A;margin:0 0 14px}
.h-hero h1{font-size:clamp(56px,9vw,112px);line-height:.88;letter-spacing:.2px}
.h-acc{color:#FF7A1A}
.h-lede{font-size:18px;color:#A2A4AD;max-width:52ch;margin:20px 0 26px}
.h-wl .wl{max-width:500px}
.h-wl input[type=email]{background:#141418;border-color:#2E2E36;color:#EDEDED}
.h-wl input[type=email]::placeholder{color:#6C6D75}
.h-wl .wl-msg{color:#EDEDED}
.h-note{font-size:12.5px;color:#878994;margin:2px 0 0}
.h-note a{color:#A2A4AD}
.h-or{margin:22px 0 0;font-size:15px;color:#A2A4AD}
.h-or a{color:#EDEDED;font-weight:700;text-underline-offset:3px;text-decoration-color:#FF7A1A}
/* the phone (picture of the app; always the app's dark screen) */
.h-phone{position:relative;justify-self:center;width:290px;max-width:100%}
.h-phone .phone{aspect-ratio:300/620;background:#0A0A0C;border-radius:44px;border:8px solid #1E1E24;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px #2A2A32;transform:rotate(2.5deg);font-family:var(--body)}
.h-phone .notch{width:92px;height:22px;background:#1E1E24;border-radius:0 0 16px 16px;margin:0 auto 6px;flex-shrink:0}
.h-phone .scr{flex:1;padding:6px 13px 0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.h-phone .th{display:flex;align-items:flex-end;justify-content:space-between;margin:2px 2px 10px}
.h-phone .th h3{margin:0;font:900 25px/1 var(--display);text-transform:uppercase}
.h-phone .th span{font:500 8.5px var(--mono);color:#74767F;text-transform:uppercase;letter-spacing:.6px}
.h-phone .th em{white-space:nowrap;font:900 11px var(--display);font-style:normal;letter-spacing:.6px;text-transform:uppercase;background:#FF7A1A;color:#111214;border-radius:999px;padding:4px 8px}
.h-phone .cd{background:#141418;border-radius:20px;padding:12px;margin-bottom:7px}
.h-phone .ring{position:relative;width:124px;height:124px;margin:0 auto 4px}
.h-phone .ring svg{transform:rotate(-90deg);display:block}
.h-phone .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.h-phone .mid b{font:900 34px/1 var(--display)}
.h-phone .mid span{font:500 8px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:#74767F}
.h-phone .mac{display:grid;gap:6px;margin-top:4px}
.h-phone .mac div{font-size:10px;color:#9A9CA6;display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center}
.h-phone .mac b{font:900 11.5px var(--display);color:#EDEDED;text-transform:uppercase;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis}
.h-phone .mac i{display:block;height:6px;border-radius:9px;background:#1C1C22;overflow:hidden}
.h-phone .mac s{display:block;height:100%;border-radius:9px;text-decoration:none}
.h-phone .mac em{font:600 9px var(--mono);font-style:normal;color:#74767F}
.h-phone .fj{border:1px solid #2A2A30;border-radius:20px;padding:10px 12px;margin-bottom:7px}
.h-phone .fjt{display:flex;align-items:center;gap:7px;font:500 8px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:#9A9CA6;margin-bottom:4px}
.h-phone .fjt .jd{width:13px;height:13px;border-radius:4px;background:#FCD00F}
.h-phone .fjt a{margin-left:auto;color:#FCD00F;font-weight:700}
.h-phone .r{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;padding:4px 0;border-top:1px solid #222228;color:#C9CAD0}
.h-phone .r b{font:900 13px var(--display);color:#EDEDED}
.h-phone .ml{display:flex;align-items:center;gap:8px;background:#141418;border-radius:15px;padding:7px 9px 7px 13px;margin-bottom:5px}
.h-phone .ml b{flex:1;font:900 13px var(--display);text-transform:uppercase;letter-spacing:.4px}
.h-phone .ml em{font:600 9px var(--mono);font-style:normal;color:#74767F}
.h-phone .ml i{width:24px;height:24px;border-radius:50%;background:#FF7A1A;color:#111214;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700}
.h-phone .tb{display:grid;grid-template-columns:repeat(5,1fr);background:#141418;padding:7px 0 11px;border-top:1px solid #26262E;flex-shrink:0}
.h-phone .tb div{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 7.5px var(--mono);letter-spacing:.3px;text-transform:uppercase;color:#74767F}
.h-phone .tb div.on{color:#EDEDED}
.h-phone .tb div.on svg{color:#FF7A1A}
.h-phone .tb .plus{width:36px;height:36px;border-radius:50%;background:#FF7A1A;color:#111214;display:flex;align-items:center;justify-content:center;margin-top:-3px}
.h-badge{position:absolute;left:-46px;bottom:96px;display:flex;align-items:center;gap:10px;background:#EDEDED;color:#111214;border-radius:18px;padding:10px 16px 10px 10px;box-shadow:0 16px 40px rgba(0,0,0,.45);transform:rotate(-3deg)}
.h-bi{width:38px;height:38px;border-radius:12px;background:#FCD00F;display:flex;align-items:center;justify-content:center}
.h-bi svg{width:22px;height:22px}
.h-badge small{display:block;font:600 9.5px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#55565E}
.h-badge b{font:900 22px/1 var(--display)}
/* numbers strip */
.h-stats{border-bottom:1px solid var(--line);background:var(--s1)}
.h-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.h-stats .wrap div{padding:20px 0;display:flex;align-items:baseline;gap:10px}
.h-stats b{font:900 40px/1 var(--display);color:var(--ember-ink)}
.h-stats span{font:500 11.5px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
/* sections */
.h-sec{margin-top:72px}
.h-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.h-head h2{margin:0;font-size:clamp(34px,5vw,52px)}
.h-head p{margin:0;color:var(--ink2);max-width:46ch}
.h-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.h-fc{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);padding:22px 22px 20px;min-height:220px;background:var(--s1);border:1px solid var(--line);overflow:hidden;transition:transform .15s,border-color .15s}
.h-fc:hover{transform:translateY(-3px);border-color:var(--ember)}
.h-fc:before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--ember)}
.h-fc-macros:before{background:linear-gradient(90deg,var(--prot) 0 33%,var(--carb) 33% 70%,var(--fat) 70%)}
.h-fc-protein:before{background:var(--prot)}
.h-fn{font:900 24px/1 var(--display);text-transform:uppercase;margin-bottom:auto}
.h-fc b{font:900 clamp(40px,4.4vw,54px)/1 var(--display);font-variant-numeric:tabular-nums;margin-top:26px;white-space:nowrap}
.h-fc-macros b{font-size:clamp(34px,3.5vw,44px);margin-top:32px}
.h-fc .unit{margin-top:6px}
.h-eg{font-size:12.5px;color:var(--muted);margin-top:10px}
.h-fc i{position:absolute;right:20px;top:20px;width:36px;height:36px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.h-fc:hover i{background:var(--ember);color:#141416}
.h-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin-top:10px}
.h-list a{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;text-decoration:none;padding:16px 4px;border-bottom:1px solid var(--line)}
.h-list b{font:900 20px/1 var(--display);text-transform:uppercase}
.h-list span{color:var(--muted);font-size:14px;grid-column:1 / 3}
.h-list i{grid-row:1 / 3;grid-column:3;color:var(--muted)}
.h-list a:hover i{color:var(--ember-ink)}
.h-list a:hover b{color:var(--ember-ink)}
.h-sports{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.h-sports a{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:16px;transition:transform .15s,border-color .15s}
.h-sports a:hover{transform:translateY(-2px);border-color:var(--ember)}
.h-ic{width:44px;height:44px;border-radius:14px;background:#141416;color:#FCD00F;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.h-sports b{font:900 19px/1.05 var(--display);text-transform:uppercase}
.h-sports em{font:500 11px var(--mono);font-style:normal;letter-spacing:.6px;color:var(--muted)}
.h-foods{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.h-foods a{display:flex;flex-direction:column;text-decoration:none;background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:14px 16px;transition:border-color .15s}
.h-foods a:hover{border-color:var(--ember)}
.h-foods b{font-weight:700;font-size:15px;line-height:1.25;margin-bottom:10px}
.h-k{font:900 30px/1 var(--display);margin-top:auto}
.h-k small{font:500 11px var(--mono);color:var(--muted);margin-left:4px;letter-spacing:.6px}
.h-p{font-size:12.5px;color:var(--prot);font-weight:600;margin-top:4px}
.h-allf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.h-allf .muted{font:500 11.5px var(--mono);letter-spacing:1px;text-transform:uppercase}
.h-fuel{background:#0B0B0D;color:#EDEDED;margin-top:80px;padding:70px 0;position:relative;overflow:hidden}
.h-fuel:before{content:"";position:absolute;left:-10%;bottom:-60%;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.22),transparent 62%);pointer-events:none}
.h-fuel .wrap{position:relative}
.h-fuel h2{margin:0;font-size:clamp(40px,6vw,72px)}
.h-fuel .h-lede{margin-bottom:34px}
.h-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.h-steps div{background:#141418;border:1px solid #22222A;border-radius:var(--r);padding:20px}
.h-steps span{font:600 12px var(--mono);color:#FF8C3A;letter-spacing:1px}
.h-steps b{display:block;font:900 24px/1.05 var(--display);text-transform:uppercase;margin:10px 0 6px}
.h-steps p{margin:0;color:#A2A4AD;font-size:14.5px}
.home footer{margin-top:40px}
@media (max-width:860px){
  .h-grid{grid-template-columns:1fr;gap:44px}
  .h-hero{padding:40px 0 56px}
  .h-phone{width:250px}
  .h-badge{left:-34px;bottom:14px}
  .h-feat,.h-steps{grid-template-columns:1fr}
  .h-fc{min-height:0}
  .h-list{grid-template-columns:1fr}
  .h-stats .wrap{grid-template-columns:repeat(2,1fr)}
  .h-stats .wrap div{padding:14px 0}
}
@media (max-width:440px){
  .h-sports{grid-template-columns:repeat(2,1fr)}
  .h-foods{grid-template-columns:repeat(2,1fr)}
  .h-stats b{font-size:32px}
  .h-badge{left:-20px}
}

/* ---------- accounts: header link, sign-in, My Fuel ---------- */
.nav a.acct{background:var(--ember);color:#141416}
.nav a.acct:hover,.nav a.acct[aria-current="page"]{background:var(--ember);color:#141416;filter:brightness(1.05)}
.home .top .nav a.acct{color:#141416}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.save-row{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.save-row .note{margin:0}
.acct-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:start;margin-top:18px}
.acct-card{display:grid;gap:14px}
.acct-card form{display:grid;gap:14px}
.acct-google{width:100%;gap:10px;background:var(--s1);border:1px solid var(--line)}
.acct-or{display:flex;align-items:center;gap:12px;margin:0;color:var(--muted);font:500 11px var(--mono);text-transform:uppercase;letter-spacing:1px}
.acct-or:before,.acct-or:after{content:"";flex:1;height:1px;background:var(--line)}
.acct-check{display:flex;gap:10px;align-items:flex-start;font:500 13.5px var(--body);color:var(--ink2)}
.acct-check input{width:18px;height:18px;min-height:0;margin-top:2px;flex-shrink:0}
.acct-msg{min-height:1.4em;margin:0;font-size:14px}
.acct-why{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.acct-why li{border-left:3px solid var(--ember);padding-left:16px}
.acct-why b{display:block;font:900 24px/1.05 var(--display);text-transform:uppercase;margin-bottom:4px}
.acct-why span{color:var(--ink2)}
.ob{display:grid;gap:18px;max-width:760px}
.ob h2{margin:0}
.ob-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ob-goal,.ob-act{position:relative;display:flex;flex-direction:column;gap:4px;margin:0;padding:16px;border:1.5px solid var(--line);border-radius:18px;background:var(--s1);cursor:pointer}
.ob-goal input,.ob-act input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.ob-goal b{font:900 21px/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.ob-goal span,.ob-act span{font:500 14px var(--body);color:var(--ink2)}
.ob-goal:has(input:checked),.ob-act:has(input:checked){border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 22%,transparent)}
.ob-goal:has(input:focus-visible),.ob-act:has(input:focus-visible){outline:2px solid var(--ember)}
.ob-acts{display:grid;gap:8px}
.ob-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ob-hft{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-msg{min-height:1.4em;margin:0;color:var(--ember-ink);font-weight:600;font-size:14px}
.ob-nav{display:flex;gap:10px;justify-content:flex-end}
.me-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:16px}
.me-head .muted{margin:10px 0 0;font-size:14px}
.me-flash{margin:0;background:var(--s2);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px}
.me-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.me-goal{margin:16px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.me-checkin{display:grid;gap:14px;align-content:start}
.me-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.me-file{padding:10px 12px;min-height:0;font-size:14px}
.me-msg{min-height:1.2em;margin:0;font-size:14px}
.me-progress{margin-top:14px}
.me-progress .stats b small{font:500 12px var(--mono);color:var(--muted)}
.me-chart{width:100%;height:auto;margin-top:16px;display:block}
.me-chart text{font:500 11px var(--mono);fill:var(--muted)}
.me-chart .g{stroke:var(--line);stroke-width:1}
.me-chart .goal{stroke:var(--prot);stroke-width:1.5;stroke-dasharray:6 5}
.me-chart .dot{fill:var(--s2);stroke:var(--muted);stroke-width:1.2}
.me-chart .tr{fill:none;stroke:var(--ember);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.me-tip{margin:16px 0 0;padding:14px 16px;border-radius:16px;background:var(--s2);font-weight:500}
.me-hist,.me-calcs{list-style:none;margin:0;padding:0}
.me-hist li{display:grid;grid-template-columns:120px 90px 1fr 54px auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.me-calcs li{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.me-d{font:500 12px var(--mono);color:var(--muted)}
.me-n{color:var(--ink2);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-ph img{width:46px;height:46px;border-radius:10px;object-fit:cover;display:block;background:var(--s2)}
.me-today{margin-bottom:28px}
.me-plan,.me-coach{margin-bottom:28px}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pl-head h2,.me-coach h2{margin:0;font-size:clamp(30px,4vw,40px)}
.pl-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.pl-top h3{margin:0 0 4px;font-size:26px}
.pl-top .muted{margin:0;font-size:14px}
.pl-game{margin:0;background:#141416;color:#FCD00F;border-radius:999px;padding:8px 14px;font-size:13.5px}
.pl-game b{color:#EDEDED}
.pl-slots{list-style:none;margin:16px 0 0;padding:0}
.pl-slots li{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.pl-slots time{font:600 14px var(--mono);color:var(--ink2)}
.pl-slots b{display:block;font:900 18px/1.1 var(--display);text-transform:uppercase}
.pl-slots span{font-size:13.5px;color:var(--muted)}
.pl-slots em{font:900 20px/1 var(--display);font-style:normal;text-align:right}
.pl-slots em small{display:block;font:500 11px var(--mono);color:var(--prot);margin-top:3px}
.pl-slots .pl-pregame b,.pl-slots .pl-pregame_snack b{color:var(--carb)}
.pl-slots .pl-recovery b{color:var(--prot)}
.pl-picker{margin-top:14px;display:grid;gap:14px}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pl-opt{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--s1);border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;cursor:pointer;color:var(--ink);font:inherit}
.pl-opt:hover:not([disabled]){border-color:var(--ember)}
.pl-opt.on{border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 22%,transparent)}
.pl-opt[disabled]{opacity:.45;cursor:not-allowed}
.pl-opt b{font:900 20px/1.05 var(--display);text-transform:uppercase}
.pl-opt span{font-size:14px;color:var(--ink2)}
.pl-opt small{font-size:12.5px;color:var(--muted)}
.pl-opt small i{font-style:normal;font-weight:700;color:var(--ink2)}
.pl-sf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pl-w{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pl-msg,.co-msg{margin:0;min-height:1.2em;font-size:14px;font-weight:600}
.pl-hc{display:grid;gap:12px;max-width:640px}
.pl-hc h3{margin:0}
.co-lede{margin:6px 0 14px}
.co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.co-s,.co-e,.co-ci{display:grid;gap:8px;align-content:start;margin-bottom:14px}
.co-s h3,.co-e h3,.co-ci h3{margin:0;font-size:22px}
.co-s p,.co-e p,.co-ci p{margin:0;font-size:14.5px}
.co-s p b{color:var(--ink)}
.co-s .btn,.co-ci .btn{justify-self:start;margin-top:6px}
.co-e.due{border-color:var(--ember)}
.co-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-ba div{background:var(--s2);border-radius:14px;padding:10px 12px}
.co-ba b{display:block;font-weight:700;margin-top:2px}
.co-ci{border-left:4px solid var(--ember)}
@media (max-width:820px){.pl-sf{grid-template-columns:1fr}.pl-slots li{grid-template-columns:54px 1fr auto;gap:10px}}
.td-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.td-head h2{margin:0;font-size:clamp(30px,4vw,40px);min-width:0}
.td-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--s1);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.td-nav[disabled]{opacity:.35;cursor:default}
.td-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.td-sum{display:flex;gap:22px;align-items:center}
.td-ring{--p:0;flex-shrink:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--ember) calc(var(--p) * 1%),var(--s2) 0);display:flex;align-items:center;justify-content:center}
.td-ring>div{width:118px;height:118px;border-radius:50%;background:var(--s1);display:flex;flex-direction:column;align-items:center;justify-content:center}
.td-ring b{font:900 34px/1 var(--display)}
.td-ring span{font:500 9.5px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:4px}
.td-nums{flex:1;min-width:0;display:grid;gap:8px}
.td-nums>p{margin:0;display:flex;justify-content:space-between;align-items:baseline}
.td-nums>p b{font:900 24px/1 var(--display)}
.td-mac{display:grid;grid-template-columns:104px 1fr auto;gap:8px;align-items:center;font-size:12.5px}
.td-mac span{font-weight:700}
.td-mac i{display:block;height:7px;border-radius:9px;background:var(--s2);overflow:hidden}
.td-mac s{display:block;height:100%;border-radius:9px;text-decoration:none;background:currentColor}
.td-mac.p i{color:var(--prot)}.td-mac.c i{color:var(--carb)}.td-mac.f i{color:var(--fat)}
.td-mac em{font:500 11px var(--mono);font-style:normal;color:var(--muted)}
.td-burn ul{list-style:none;margin:0;padding:0}
.td-burn li{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:baseline}
.td-burn li span{font-weight:600}
.td-burn li em{font:500 11px var(--mono);font-style:normal;color:var(--muted)}
.td-bt{display:flex;justify-content:space-between;margin:10px 0 0}
.td-bt b{font:900 22px/1 var(--display);color:var(--ember-ink)}
.td-burn .btn{margin-top:8px}
.td-meals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.td-meal{padding:18px}
.td-mh{display:flex;align-items:center;gap:10px}
.td-mh h3{margin:0;flex:1}
.td-mh>span{font:500 12px var(--mono);color:var(--muted)}
.td-add{min-height:36px;padding:0 14px;font-size:13px}
.td-meal ul{list-style:none;margin:10px 0 0;padding:0}
.td-meal li{display:grid;grid-template-columns:1fr auto 28px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.td-meal li b{display:block;font-weight:600;font-size:14.5px;line-height:1.3}
.td-meal li small{color:var(--muted);font-size:12.5px}
.td-meal li>span{font:900 18px var(--display)}
.td-x{width:28px;height:28px;border-radius:50%;border:0;background:var(--s2);color:var(--ink2);cursor:pointer;font-size:16px;line-height:1}
.td-picker{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:grid;gap:12px}
.td-tabs{max-width:320px}
.td-rl{margin:10px 0 6px;font:500 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.td-recent .chip{cursor:pointer;font:inherit;font-size:13px}
.td-res{list-style:none;margin:10px 0 0;padding:0;max-height:320px;overflow:auto}
.td-res li button{width:100%;text-align:left;display:flex;justify-content:space-between;gap:12px;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 4px;cursor:pointer;color:var(--ink);font:inherit}
.td-res li button:hover{background:var(--s2)}
.td-res li b{font-weight:600;font-size:14px}
.td-res li span{font:500 11.5px var(--mono);color:var(--muted);white-space:nowrap}
.td-res li.muted{padding:10px 4px;font-size:14px}
.td-one{display:grid;gap:12px;margin-top:12px}
.td-fn{margin:0;font-weight:700}
.td-row{display:grid;grid-template-columns:1fr 110px;gap:10px}
.td-prev{margin:0;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.td-prev b{font:900 22px var(--display)}
.td-prev .p{color:var(--prot)}.td-prev .c{color:var(--carb)}.td-prev .f{color:var(--fat)}
.td-quick{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.td-quick input[name=protein],.td-quick input[name=carbs],.td-quick input[name=fat]{grid-column:auto}
.td-quick .btn,.td-quick .td-msg{grid-column:1 / -1}
.td-msg{margin:0;min-height:1.2em;font-size:13.5px}
@media (max-width:820px){.td-top,.td-meals{grid-template-columns:1fr}.td-sum{flex-direction:column;align-items:stretch}.td-ring{align-self:center}}
.me-danger{margin-top:40px}
.me-dbtns{display:flex;gap:10px;flex-wrap:wrap}
.me-settings{margin-top:40px}
.me-switch{display:flex;gap:12px;align-items:flex-start;margin:0;cursor:pointer}
.me-switch input{width:20px;height:20px;min-height:0;margin-top:2px;flex-shrink:0;accent-color:var(--ember)}
.me-switch b{display:block;color:var(--ink);font-size:15px}
.me-switch small{display:block;color:var(--muted);font-size:13.5px;font-weight:500;margin-top:2px}
.ob-goal2{margin-top:4px;max-width:520px}
@media (max-width:820px){
  .acct-grid,.me-grid{grid-template-columns:1fr}
  .ob-fields{grid-template-columns:1fr}
  .me-hist li{grid-template-columns:1fr auto auto;grid-template-areas:"d k del" "n n ph"}
  .me-hist .me-d{grid-area:d}.me-hist b{grid-area:k}.me-hist .linkbtn{grid-area:del}.me-hist .me-n{grid-area:n}.me-hist .me-ph,.me-hist li>span:not([class]){grid-area:ph}
  .me-calcs li{grid-template-columns:1fr auto}
  .me-calcs .me-d{grid-column:1 / -1}
}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* language menu on the dark home header: the button stays dark, the open list stays light and readable */
.home .top .nav .langs summary{border-color:#2E2E36;color:#A2A4AD}
.home .top .nav .langs[open] summary,.home .top .nav .langs summary:hover{background:#1C1C22;color:#EDEDED}
.home .top .nav .langs a{color:var(--ink);background:none}
.home .top .nav .langs a:hover,.home .top .nav .langs a[aria-current]{background:var(--s2);color:var(--ink)}

/* pace picker (onboarding) and the strength line (My plan) */
.pc-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.pc-opt{position:relative;display:flex;flex-direction:column;gap:3px;margin:0;padding:14px;border:1.5px solid var(--line);border-radius:18px;background:var(--s1);cursor:pointer}
.pc-opt input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.pc-opt b{font:900 24px/1 var(--display)}
.pc-opt span{font-size:12.5px;color:var(--muted)}
.pc-opt em{font:600 11px var(--mono);font-style:normal;letter-spacing:1px;text-transform:uppercase;margin-top:4px}
.pc-opt small{font-size:12.5px;color:var(--ink2)}
.pc-opt.pc-steady em{color:var(--prot)}.pc-opt.pc-aggressive em{color:#C98A00}.pc-opt.pc-extreme em{color:#D03A2B}
.pc-opt:has(input:checked){border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 22%,transparent)}
.pc-opt:has(input:focus-visible){outline:2px solid var(--ember)}
.pc-sum{display:grid;gap:8px;margin-top:14px;border-left:4px solid var(--prot)}
.pc-sum.pc-aggressive{border-left-color:#C98A00}.pc-sum.pc-extreme{border-left-color:#D03A2B}
.pc-sum p{margin:0}
.pl-str{display:grid;grid-template-columns:auto auto 1fr;gap:4px 14px;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pl-str b{font:900 20px var(--display)}
.pl-str .muted{font-size:13.5px}
@media (max-width:640px){.pl-str{grid-template-columns:1fr}}

/* macro calculator: compare, make your own, limits */
.mc-cmp,.mc-own,.mc-lim{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.mc-cmp table td:first-child{font-weight:600}
.mc-cmp tr.on td{color:var(--ember-ink);font-weight:700}
.mc-own label{display:flex;justify-content:space-between;margin:10px 0 4px}
.mc-own input[type=range]{width:100%;min-height:0;padding:0;border:0;background:none;accent-color:var(--ember)}
.mc-own [data-own]{margin-top:10px}
.mc-lim ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink2)}