/* GymStarterGuide – home page */
.hero{padding:56px 0 72px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 16px)}
.hero .wrap{display:grid;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.7rem,7vw,4.6rem);max-width:12ch}
.hero .lead{color:var(--mute);margin:18px 0 28px;max-width:36ch;font-size:1.1rem}
.trust{list-style:none;padding:0;margin-top:26px;display:grid;gap:6px;color:var(--mute);font-size:.95rem}
.trust li::before{content:"✓";color:var(--green);margin-right:10px;font-weight:700}
.rig{background:var(--iron);border:1px solid var(--line);border-radius:16px;padding:22px}
.rig h2{font-size:1.7rem}
.rig p.s{color:var(--mute);font-size:.95rem;margin:4px 0 10px}
#bar{width:100%;height:auto;display:block}
.pop{transform-box:fill-box;transform-origin:center;animation:pop .28s ease-out}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.tot{display:flex;align-items:baseline;gap:8px;margin:4px 0 14px}
.tot strong{font:800 3rem/1 var(--display)}
.pls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pl{width:54px;height:54px;border-radius:50%;border:3px solid rgba(0,0,0,.35);background:var(--c);color:var(--t,#111);font:700 .95rem system-ui,sans-serif;cursor:pointer;transition:transform .12s}
.pl:hover{transform:scale(1.08)}
.pl:active{transform:scale(.94)}
.rig .hint{color:var(--mute);font-size:.9rem;margin-top:14px}
.ctl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:8px 0 6px}
.ctl label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mute)}
.ctl select,.ctl input{width:100%;background:var(--floor);color:var(--chalk);border:1px solid var(--line);border-radius:8px;padding:9px 8px;font:inherit;font-size:.95rem}
.lvl{min-height:3.4em;margin:-4px 0 14px}
.lvl strong{display:block;font-size:1.05rem}
.lvl span{color:var(--mute);font-size:.92rem}
.move{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:center;background:var(--floor);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0}
.move svg{width:100%;height:auto;display:block}
.move h3{font-size:1.3rem;margin-bottom:2px}
.move p{font-size:.88rem;color:var(--mute);line-height:1.4}
.move .mm{margin-top:4px;color:var(--chalk)}
@media(max-width:520px){.ctl{grid-template-columns:1fr 1fr}.ctl label:last-child{grid-column:1/3}}
@media(min-width:860px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.belt{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:12px 0;color:var(--mute)}
.belt div{display:inline-block;animation:belt 28s linear infinite}
@keyframes belt{to{transform:translateX(-50%)}}
section{padding:72px 0}
h2.t{font-size:clamp(2rem,5vw,3rem);margin-bottom:10px}
.sub{color:var(--mute);max-width:56ch;margin-bottom:28px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:22px}
.seg button{background:none;border:0;color:var(--mute);padding:11px 22px;font:inherit;font-weight:700;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--btn);color:#fff}
.note{color:var(--mute);font-size:.92rem;margin-top:16px;max-width:70ch}
.note a{color:#7ea2ff;text-underline-offset:3px}

/* start tiles */
.start{padding:60px 0 20px}
.trio{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:22px}
.tile{display:flex;flex-direction:column;background:var(--iron);border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px;text-decoration:none;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--blue);transform:translateY(-3px)}
.tile>svg{width:100%;height:150px;background:var(--floor);border-radius:12px;margin-bottom:12px}
.tile .mini{height:150px;background:var(--floor);border-radius:12px;margin-bottom:12px;display:grid;place-items:center;position:relative}
.tile .mini svg{height:120px;width:120px}
.tile .mini b{position:absolute;font:800 1.3rem var(--display);color:var(--chalk)}
.tile h3{font-size:1.5rem;margin-bottom:4px}
.tile p{color:var(--mute);font-size:.95rem;flex:1}
.tile span{margin-top:12px;color:#7ea2ff;font-weight:700;font-size:.95rem}

/* weekly plan */
#days{list-style:none;padding:0;border-top:1px solid var(--line)}
#days.swap{animation:fade .3s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.day{display:flex;align-items:center;gap:16px;width:100%;padding:18px 12px;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.day:hover{background:var(--iron)}
.day b{flex:0 0 52px;color:var(--blue);font-size:1.1rem}
.day .dm{flex:1}
.day .t{display:block;font:800 1.5rem/1.1 var(--display);margin-bottom:2px}
.day .l{display:block;color:var(--mute);font-size:.95rem}
.day .go{color:var(--mute);font-size:.85rem;border:1px solid var(--line);border-radius:99px;padding:4px 12px;white-space:nowrap}
dialog{width:min(660px,calc(100% - 24px));max-height:88vh;overflow:auto;background:var(--iron);color:var(--chalk);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:auto}
dialog::backdrop{background:rgba(0,0,0,.7)}
.dh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.dh h2{font-size:1.9rem}
.dnote{color:var(--mute);font-size:.9rem;margin-bottom:10px}
.ex{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.ex svg{width:100%;height:auto;display:block;background:var(--floor);border-radius:10px}
.ex h3{font-size:1.4rem;margin-bottom:2px}
.ex .sr{font-weight:700;color:var(--blue);margin-bottom:2px}
.ex p{color:var(--mute);font-size:.92rem;line-height:1.45}
@media(max-width:520px){.ex{grid-template-columns:104px 1fr;gap:12px}.day .go{display:none}}

/* sugar cubes */
.sugarsec{background:linear-gradient(180deg,transparent,rgba(77,130,255,.05) 40%,transparent)}
.cubebox{display:grid;gap:26px;align-items:center;background:var(--iron);border:1px solid var(--line);border-radius:16px;padding:24px}
@media(min-width:760px){.cubebox{grid-template-columns:1.1fr .9fr}}
.sc{display:flex;flex-wrap:wrap;gap:10px;min-height:64px;align-content:flex-start}
.sc i{display:block;width:52px;height:52px;border-radius:10px;background:linear-gradient(145deg,#f4f1ea,#cfcabd);box-shadow:inset 0 -5px 0 rgba(0,0,0,.12),0 3px 0 rgba(0,0,0,.35);animation:drop .35s ease-out both}
@keyframes drop{from{transform:translateY(-14px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.sctext strong{display:block;font:800 clamp(2.4rem,6vw,3.4rem)/1 var(--display)}
.sctext .sk{display:block;color:var(--chalk);font-weight:700;margin-top:6px}
.sctext p{color:var(--mute);margin:8px 0 12px}
.sctext a{color:#7ea2ff;text-underline-offset:3px;font-weight:700}
@media(max-width:520px){.sc i{width:42px;height:42px}}