/* Twój Plan – style strony (dieta.html) */
:root{--bg:#150a14;--bg2:#1f1020;--fg:#ffc21a;--dim:#6e4d1c;--line:#ffc21a;--cream:#f6ecd6;--d:'Unbounded','Arial Black',sans-serif;--n:'Archivo Narrow','Arial Narrow',sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:90px}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--n);font-weight:500;font-size:18px;line-height:1.4;overflow-x:hidden;overflow-x:clip}
html{overflow-x:clip}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wrap{padding:0 clamp(20px,5vw,72px)}
h1,h2,h3,.big{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:.92;margin:0;letter-spacing:-.02em}
.h{font-size:clamp(44px,11vw,180px)}
.xl{font-size:clamp(80px,22vw,380px)}
p{max-width:34em;margin:0 0 1em}
.btn{display:inline-block;font-family:var(--d);font-weight:900;text-transform:uppercase;text-decoration:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:0;font-size:clamp(26px,5vw,80px);line-height:1}
.btn:hover{color:#fff}
.btn.sm{font-size:clamp(18px,2.6vw,36px)}
.pill{font:700 18px var(--n);text-transform:uppercase;background:none;border:2px solid var(--fg);color:var(--fg);padding:10px 18px;border-radius:40px;cursor:pointer}
.pill[aria-pressed=true],.pill:hover{background:var(--fg);color:var(--bg)}
.pill:disabled{opacity:.3;cursor:not-allowed;background:none;color:var(--fg)}
.note{font-size:15px;opacity:.8}

/* nav */
nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(20px,5vw,72px);background:rgba(21,10,20,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.logo{font-family:var(--n);font-weight:700;font-size:28px;text-decoration:none;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.logo i{display:block;width:40px;height:40px;background:var(--fg);border-radius:50% 50% 50% 4px;position:relative}
.logo i::after{content:"";position:absolute;right:-4px;top:-6px;width:16px;height:10px;background:#5cbf5a;border-radius:10px 0}
nav ul{display:flex;gap:clamp(12px,2vw,26px);list-style:none;margin:0;padding:0;text-transform:uppercase;font-weight:700}
nav ul a{text-decoration:none}nav ul a:hover{text-decoration:underline wavy}


/* hero */
.hero{min-height:100svh;padding-top:120px;padding-bottom:60px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero .plate{position:absolute;right:-10vw;top:50%;width:min(48vw,660px);aspect-ratio:1;transform:translateY(-46%);animation:spin 80s linear infinite}
@keyframes spin{to{transform:translateY(-46%) rotate(360deg)}}
.hero h1{position:relative;font-size:clamp(34px,5.8vw,110px)}
.hero p{position:relative;margin-top:28px;font-size:20px}
.hero .cta{position:relative;align-self:flex-start;margin-top:26px}
.meta{position:relative;margin-top:22px;font:700 17px var(--n);text-transform:uppercase;letter-spacing:.04em}
.meta span+span::before{content:"•";margin:0 .6em}
.apple{position:absolute;right:5%;bottom:12%;width:clamp(70px,9vw,130px);animation:wob 3s ease-in-out infinite alternate}
@keyframes wob{to{transform:rotate(12deg) translateY(-10px)}}
@keyframes spin2{to{transform:rotate(360deg)}}
@media(max-width:720px){.hero h1{font-size:11vw}.hero{padding-top:90px;justify-content:flex-start}.hero .plate{position:relative;right:auto;top:auto;width:78vw;margin:0 -14vw 10px auto;transform:none;animation-name:spin2}.apple{right:auto;left:4%;bottom:auto;top:120px;width:70px}}

/* stats */
.stats{padding-block:110px}
.row{display:flex;align-items:center;gap:clamp(16px,4vw,60px);margin-bottom:40px;flex-wrap:wrap}
.row b{font-family:var(--d);font-weight:900;font-size:clamp(100px,20vw,320px);line-height:.8}
.row span{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(22px,4.6vw,76px);line-height:1}
.star{position:relative;width:min(56vw,360px);aspect-ratio:1;background:var(--fg);clip-path:polygon(50% 0,61% 20%,84% 10%,80% 34%,100% 42%,84% 58%,96% 80%,72% 78%,62% 100%,50% 82%,36% 98%,30% 76%,6% 82%,16% 58%,0 44%,20% 34%,16% 10%,38% 20%);display:grid;place-items:center;margin-left:auto;transform:rotate(-8deg);text-decoration:none}
.star em{font-family:var(--d);font-weight:900;font-style:normal;color:var(--bg);text-transform:uppercase;text-align:center;font-size:clamp(14px,2.4vw,28px);line-height:1.1;transform:rotate(-12deg)}

/* diet list */
.diets{padding-block:100px}
.dl{margin-top:60px;border-top:2px solid var(--line)}
.dr{padding-inline:0;display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:20px;padding-block:22px;border-bottom:2px solid var(--line);text-decoration:none;cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;color:inherit;width:100%;text-align:left;font:inherit;transition:padding .2s}
.dr .no{font-family:var(--d);font-weight:900;font-size:clamp(36px,5vw,64px);line-height:1}
.dr .nm{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(24px,4.6vw,68px);line-height:1;display:block}
.dr .mt{display:block;margin-top:8px;font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:.03em}
.dr .go{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2.2vw,30px);opacity:0;transition:opacity .2s;white-space:nowrap}
.dr .ico{display:none;width:64px;height:64px}
.dr:hover .go,.dr:focus-visible .go{opacity:1}
.dr:hover{background:var(--fg);color:var(--bg);padding-left:16px}
/* kolorowe pozycje "Wybierz swoją drogę" */
.dr:nth-child(1){--c:#ff5a5f}.dr:nth-child(2){--c:#4ade80}.dr:nth-child(3){--c:#60a5fa}.dr:nth-child(4){--c:#fb923c}.dr:nth-child(5){--c:#c084fc}.dr:nth-child(6){--c:#22d3ee}.dr:nth-child(7){--c:#f472b6}.dr:nth-child(8){--c:#a3e635}.dr:nth-child(9){--c:#fde047}.dr:nth-child(10){--c:#2dd4bf}.dr:nth-child(11){--c:#fca5a5}.dr:nth-child(12){--c:#93c5fd}
.dr{color:var(--c,inherit)}
.dr:hover{background:var(--c,var(--fg));color:var(--bg)}
@media(max-width:640px){.dr{grid-template-columns:52px 1fr 56px}.dr .go{display:none}.dr .ico{display:block}}
#pv{position:fixed;left:0;top:0;width:280px;height:280px;margin:-140px 0 0 40px;border-radius:50%;background:var(--cream);pointer-events:none;z-index:40;display:none;padding:26px;box-shadow:0 0 0 10px var(--bg)}
#pv.on{display:block}

/* needs */
.needs{padding-block:100px}
.ng{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 60px;margin-top:60px}
.need{border-top:2px solid var(--line);padding:26px 0 34px}
.need h3{font-size:clamp(22px,3.2vw,44px);line-height:1;margin-bottom:18px}
.need div{display:flex;flex-wrap:wrap;gap:10px}
/* kolorowe grupy "Czego potrzebujesz?" */
.need:nth-child(1){--c:#ff5a5f}.need:nth-child(2){--c:#4ade80}.need:nth-child(3){--c:#60a5fa}.need:nth-child(4){--c:#fb923c}.need:nth-child(5){--c:#c084fc}.need:nth-child(6){--c:#22d3ee}
.need h3{color:var(--c)}
.need .pill{border-color:var(--c);color:var(--c)}
.need .pill:hover{background:var(--c);color:var(--bg)}

/* free day */
.free{position:relative;background:var(--fg);color:var(--bg);padding-block:110px;overflow:hidden}
.free h2{font-size:clamp(38px,8vw,130px);max-width:11em;position:relative}
.free .pill{border-color:var(--bg);color:var(--bg)}
.free .pill[aria-pressed=true],.free .pill:hover{background:var(--bg);color:var(--fg)}
.free .bag{position:absolute;right:-4vw;top:40px;width:min(40vw,440px);opacity:.95;transform:rotate(10deg)}
.pl{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;position:relative;max-width:900px}
.fld{display:flex;gap:16px;margin:36px 0 16px;flex-wrap:wrap;align-items:flex-end;position:relative;max-width:900px}
.fld input[type=email]{flex:1 1 260px;background:none;border:0;border-bottom:3px solid currentColor;color:inherit;font:700 26px var(--n);padding-block:10px;border-radius:0}
.fld input::placeholder{color:inherit;opacity:.5}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;max-width:40em;position:relative}
.chk input{accent-color:currentColor;margin-top:4px}
.status{font-family:var(--d);font-weight:900;text-transform:uppercase;margin-top:24px;min-height:1.2em;position:relative}
.free .btn{color:var(--bg)}.free .btn:hover{color:#fff}
@media(max-width:720px){.free .bag{opacity:.25}}

/* configurator */
.conf{padding-block:120px}
.steps{display:grid;gap:0;margin-top:60px}
.step{display:grid;grid-template-columns:minmax(160px,300px) 1fr;gap:24px;border-top:2px solid var(--line);padding-block:26px}
.step h3{font-size:clamp(18px,2.2vw,28px);line-height:1.1}
.step h3 small{display:block;font-size:.55em;color:var(--dim);margin-bottom:6px}
.step .opts{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:720px){.step{grid-template-columns:1fr}}
.sum{margin-top:40px;border-top:2px solid var(--line);padding-top:40px;display:grid;grid-template-columns:1fr;gap:30px;align-items:end}
.sum>.btn{justify-self:start}
.sum .nums{display:flex;gap:clamp(20px,5vw,80px);flex-wrap:wrap}
.sum .nums div{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:.85}
.sum .nums b{display:block;font-size:clamp(70px,12vw,220px)}
.sum .nums span{font-size:clamp(20px,3vw,44px)}
.sum .plus{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(20px,3vw,40px);margin-top:20px}
.sum .ready{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2vw,24px);margin-top:14px;color:#fff}
@media(max-width:900px){.sum{grid-template-columns:1fr}}

/* not sure */
.unsure{position:relative;min-height:90vh;overflow:hidden;display:grid;place-items:center;text-align:center;padding:100px 20px}
.unsure::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 75%,#fff2c4,transparent 38%),linear-gradient(160deg,#ffc21a,#ff7b2c 70%)}
.unsure .tape{position:absolute;inset:auto -5% 6% -5%;width:110%;opacity:.9}
.unsure h2{position:relative;color:var(--bg);font-size:clamp(50px,12vw,200px);mix-blend-mode:multiply}
.unsure .bb{position:relative;display:flex;gap:clamp(12px,3vw,40px);justify-content:center;flex-wrap:wrap;margin-top:40px}
.unsure .bb a{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(18px,4vw,64px);color:var(--bg);text-decoration:none;border:4px solid var(--bg);border-radius:90px;padding:.15em .6em}
.unsure .bb a:hover{background:var(--bg);color:var(--fg)}

/* calculators */
.calc{padding-block:110px;border-bottom:2px solid var(--line)}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:50px;align-items:start}
@media(max-width:860px){.cg{grid-template-columns:1fr}.res b{font-size:18vw}}
.form{display:grid;gap:22px}
.form label{display:grid;gap:6px;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.04em}
.form input,.form select{background:none;border:0;border-bottom:3px solid var(--fg);color:var(--fg);font:700 28px var(--n);padding-block:6px;border-radius:0;width:100%}
.form select option{background:var(--bg)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.seg{display:flex;flex-wrap:wrap;gap:10px}
.res{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:.85}
.res b{display:block;font-size:clamp(60px,8.5vw,190px);letter-spacing:-.04em}
.res span{font-size:clamp(20px,3vw,44px)}
.res p{font-family:var(--n);font-weight:500;text-transform:none;font-size:18px;line-height:1.4;margin-top:24px}
.res .btn{margin-top:24px}
.scale{position:relative;height:18px;margin-top:30px;border-radius:18px;background:linear-gradient(90deg,#7fc6ff 0 18%,#5cbf5a 18% 45%,#ffc21a 45% 70%,#ff5a3c 70%)}
.scale i{position:absolute;top:-10px;width:6px;height:38px;background:#fff;border-radius:3px;transition:left .6s}
.calc .ill{width:min(100%,300px);margin-top:30px}

/* diet presenter */
.pres{padding-block:120px}
.ptabs{display:flex;gap:28px;overflow-x:auto;margin-top:50px;border-bottom:2px solid var(--line);scrollbar-width:thin}
.ptab{background:none;border:0;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2vw,26px);color:var(--dim);cursor:pointer;padding:0 0 10px;border-bottom:6px solid transparent;margin-bottom:-2px;white-space:nowrap}
.ptab[aria-selected=true]{color:var(--fg);border-color:var(--fg)}
/* kolorowe zakładki "Poznaj swoją dietę" (te same kolory co 12 diet) */
.ptab:nth-child(1){--c:#ff5a5f}.ptab:nth-child(2){--c:#4ade80}.ptab:nth-child(3){--c:#60a5fa}.ptab:nth-child(4){--c:#fb923c}.ptab:nth-child(5){--c:#c084fc}.ptab:nth-child(6){--c:#22d3ee}.ptab:nth-child(7){--c:#f472b6}.ptab:nth-child(8){--c:#a3e635}.ptab:nth-child(9){--c:#fde047}.ptab:nth-child(10){--c:#2dd4bf}.ptab:nth-child(11){--c:#fca5a5}.ptab:nth-child(12){--c:#93c5fd}
.ptab{color:var(--c)}
.ptab[aria-selected=true]{color:var(--c);border-color:var(--c)}
.pbody{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(30px,5vw,80px);margin-top:60px;align-items:start}
@media(max-width:860px){.pbody{grid-template-columns:1fr}}
.pimg{aspect-ratio:1;border-radius:50%;background:var(--cream);padding:9%;position:sticky;top:110px}
.pbody h2{font-size:clamp(40px,7vw,110px)}
.pmeta{display:flex;flex-wrap:wrap;gap:12px 40px;margin:30px 0;padding-block:20px;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.pmeta div{font-weight:700;text-transform:uppercase;font-size:15px}
.pmeta b{display:block;font-family:var(--d);font-size:clamp(18px,2.2vw,28px);margin-top:4px}
details{border-bottom:2px solid var(--line)}
summary{list-style:none;cursor:pointer;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(17px,2vw,26px);padding:20px 40px 20px 0;position:relative;line-height:1.1}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.4em}
details[open] summary::after{content:"–"}
details>div{padding:0 0 24px;color:#fff3cf}
.day{list-style:none;padding:0;margin:0}
.day li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding-block:10px;border-top:1px solid var(--dim)}
.day li b{text-transform:uppercase;color:var(--fg)}
@media(max-width:520px){.day li{grid-template-columns:1fr;gap:2px}}
.warn{border-left:4px solid var(--fg);padding:10px 16px;margin:20px 0;font-size:16px;color:#fff3cf}

/* training */
.train{padding-block:110px}
.tg{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}
@media(max-width:860px){.tg{grid-template-columns:1fr}}
.tm{border:3px solid var(--fg);padding:clamp(24px,4vw,50px);position:relative;overflow:hidden;min-height:440px;display:flex;flex-direction:column;cursor:pointer;background:none;color:inherit;text-align:left;font:inherit}
.tm:hover,.tm[aria-expanded=true]{background:var(--fg);color:var(--bg)}
.tm h3{font-size:clamp(34px,5.4vw,84px);position:relative}
.tm .sub{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(14px,1.6vw,20px);margin-top:12px;position:relative}
.tm svg{position:absolute;right:-20px;bottom:-20px;width:46%}
.tm .open{margin-top:auto;font-family:var(--d);font-weight:900;text-transform:uppercase;position:relative}
.tplan{margin-top:24px;border-top:2px solid var(--line);display:none}
.tplan.on{display:block}
.tplan ol{margin:20px 0 0;padding-left:1.4em;columns:2 280px;column-gap:40px}
.tplan li{margin-bottom:10px;break-inside:avoid}
.tplan li b{text-transform:uppercase}

/* plate grid */
.comm{padding-block:100px;position:relative}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-.4em}
.tile{aspect-ratio:3/4;background:var(--bg2);position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;overflow:hidden}
.tile:nth-child(2n){aspect-ratio:1;margin-top:60px}
.tile:nth-child(3n){background:#2c1428}
.tile:nth-child(4n+1){background:#241424}
.tile svg{position:absolute;inset:12% 10% 22%;width:80%;height:auto;transition:transform .4s}
.tile:hover svg{transform:rotate(-8deg) scale(1.06)}
.tile span{position:relative;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(13px,1.4vw,18px)}
.cstage{position:relative}
.cstage h2{position:absolute;left:0;right:0;top:50px;z-index:2;pointer-events:none;opacity:.55;text-shadow:0 0 30px rgba(21,10,20,.5)}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}

/* knowledge */
.know{padding-block:100px;overflow:hidden}
.know h2{margin-bottom:40px}
.mq{display:flex;width:max-content;gap:.5em;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(28px,5.5vw,84px);line-height:1.2;animation:mq 50s linear infinite;white-space:nowrap}
.mq:nth-child(odd of .mq){}
.mq.r{animation-direction:reverse;animation-duration:65s;color:var(--dim)}
.mq:hover{animation-play-state:paused}
.mq a{text-decoration:none;color:var(--c,inherit)}.mq a:hover{color:#fff}
.mq a::after{content:" •";color:var(--fg)}
@keyframes mq{to{transform:translateX(-50%)}}

/* faq */
.faq{padding-block:110px}
.faq .list{margin-top:50px;border-top:2px solid var(--line);max-width:1100px}
.faq summary{font-size:clamp(18px,2.6vw,36px)}

/* final */
.final{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:120px;overflow:hidden}
.final .img{position:absolute;right:4vw;top:50%;transform:translateY(-50%);width:min(64vw,780px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a1a34,#1f1020 70%)}
.final .img svg{width:100%;height:100%}
.final h2{position:relative;font-size:clamp(56px,13vw,220px)}
.final p{position:relative;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2vw,26px);margin-top:30px;background:var(--bg);padding:10px 16px 10px 0;display:inline-block;max-width:none}
.final .btn{position:relative;margin-top:30px;align-self:flex-start}
@media(max-width:720px){.final .img{opacity:.45;width:110vw;right:-40vw}}

footer{padding-block:60px 80px;border-top:2px solid var(--line)}
footer h3{font-size:clamp(20px,4.6vw,70px);overflow-wrap:anywhere;line-height:1;margin:0 0 30px}
footer ul{display:flex;gap:24px;list-style:none;padding:0;margin:0 0 30px;font-weight:700;text-transform:uppercase;flex-wrap:wrap}
footer .note{max-width:48em}

/* cookies */
#ck{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;max-width:380px;background:var(--bg);border:2px solid var(--fg);padding:16px;font-size:15px}
#ck button{background:none;border:0;color:var(--fg);font:700 16px var(--n);text-transform:uppercase;cursor:pointer;margin-right:14px;padding-block:6px}
#ck button:hover{text-decoration:underline}

/* cursor */
#cur{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,194,26,.35);pointer-events:none;z-index:100;display:none;transition:width .2s,height .2s,margin .2s}
@media(pointer:fine){#cur{display:block}}
#cur.on{width:90px;height:90px;margin:-45px 0 0 -45px}


/* dopasowanie długich słów */
.unsure>div{width:100%;min-width:0}
.dr>span,.tm,.pbody>div,.cg>div,.ng>div{min-width:0}
h1,h2,h3{overflow-wrap:normal}
/* ===== ZDJĘCIA: talerze ===== */
.disc{border-radius:50%;overflow:hidden;background:var(--cream);box-shadow:0 0 0 var(--rim,12px) var(--cream),0 0 0 calc(var(--rim,12px) + 3px) #e6d9b8}
.disc>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.disc>svg{display:block;width:100%;height:100%;padding:10%}
.disc>svg.alt{display:none}.disc.err>img{display:none}.disc.err>svg.alt{display:block}
.hero .plate{--rim:clamp(10px,1.6vw,22px)}
#pv{padding:0;--rim:8px}
.dr .ico{border-radius:50%;overflow:hidden;background:var(--cream)}
.dr .ico img,.dr .ico svg{display:block;width:100%;height:100%;object-fit:cover}
.pside{position:sticky;top:110px}
.pimg{position:static;padding:0;--rim:14px}
.pimg>img{transition:opacity .25s,transform .25s}
.pimg.sw>img{opacity:0;transform:scale(.96)}
.pnav{display:flex;justify-content:space-between;gap:10px;margin-top:40px}
.pcount{align-self:center;font-weight:700;text-transform:uppercase;font-size:15px}
@media(max-width:860px){.pside{position:static;max-width:440px;width:100%;margin-inline:auto}}
.sum{grid-template-columns:minmax(120px,240px) 1fr;column-gap:clamp(24px,5vw,70px)}
.simg{grid-row:span 2;align-self:center;aspect-ratio:1;--rim:10px}
@media(max-width:600px){.sum{grid-template-columns:1fr}.simg{width:150px;grid-row:auto}}
.free .bag{aspect-ratio:1;--rim:12px;box-shadow:0 0 0 12px var(--cream),0 0 0 15px var(--bg)}
.tm .tph svg{position:static;width:100%;height:100%}
.tm .tph{position:absolute;right:-34px;bottom:-34px;width:50%;aspect-ratio:1;--rim:8px;transition:transform .4s}
.tm:hover .tph,.tm[aria-expanded=true] .tph{transform:rotate(-6deg) scale(1.04)}
.tm h3,.tm .sub,.tm .open{z-index:1}
.final .img{--rim:18px}
/* siatka zdjęć */
.tile{border:0;color:var(--cream);font:inherit;text-align:left;cursor:pointer;width:100%}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(21,10,20,.9))}
.tile span,.tile small{position:relative;z-index:1}
.tile small{display:block;font:700 15px var(--n);text-transform:uppercase;letter-spacing:.03em;color:var(--fg);margin-top:6px}
.tile:hover>img,.tile:focus-visible>img{transform:scale(1.07)}
.tile>svg.fb{inset:14% 12% 26%}
/* nawigacja */
.burger{display:none;background:none;border:2px solid var(--fg);color:var(--fg);border-radius:40px;font:700 16px var(--n);text-transform:uppercase;padding:8px 18px;cursor:pointer}
.burger[aria-expanded=true]{background:var(--fg);color:var(--bg)}
nav ul a[aria-current=true]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:3px}
#prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}
@media(max-width:860px){.burger{display:block}nav ul{display:none}
 nav.open ul{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;height:calc(100svh - 70px);background:var(--bg);padding:24px clamp(20px,5vw,72px);gap:0;overflow:auto}
 nav.open ul a{display:block;font-family:var(--d);font-weight:900;font-size:clamp(26px,8vw,44px);padding:14px 0;border-bottom:2px solid var(--line)}}
/* pasek planu i komunikaty */
#bar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:center;gap:14px;background:var(--bg);border:2px solid var(--fg);border-radius:60px;padding:8px;max-width:min(580px,calc(100% - 32px));transform:translateY(170%);visibility:hidden;transition:transform .35s,visibility 0s .35s}
#bar.on{transform:none;visibility:visible;transition:transform .35s}
#bar .bt{width:52px;height:52px;flex:none;--rim:0px}
#bar p{margin:0;font-weight:700;font-size:15px;line-height:1.25;text-transform:uppercase;min-width:0;flex:1}
#bar p b{display:block;font-family:var(--d);font-size:15px}
#bar a{flex:none;text-decoration:none;font:900 13px var(--d);text-transform:uppercase;padding:14px 16px;border-radius:40px}
#bar a.go{background:var(--fg);color:var(--bg)}#bar a.go:hover{background:#fff}
#bar a.ch{border:2px solid var(--fg)}
@media(max-width:560px){#bar{left:10px;right:10px;max-width:none;gap:8px}#bar a.ch{display:none}#bar p{font-size:13px}}
#toast{position:fixed;left:50%;top:calc(86px + env(safe-area-inset-top,0px));z-index:70;transform:translate(-50%,-16px);opacity:0;pointer-events:none;background:var(--fg);color:var(--bg);font:700 17px var(--n);padding:12px 22px;border-radius:40px;transition:opacity .3s,transform .3s;width:max-content;max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.hint{display:block;font-weight:700;text-transform:uppercase;font-size:15px;margin-top:18px;color:var(--cream);opacity:.8}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ===== kolor diety wszędzie ===== */
#ng [data-i="0"],#freePills [data-i="0"],#cDiet [data-v="0"],.tile[data-i="0"]{--c:#ff5a5f}#ng [data-i="1"],#freePills [data-i="1"],#cDiet [data-v="1"],.tile[data-i="1"]{--c:#4ade80}#ng [data-i="2"],#freePills [data-i="2"],#cDiet [data-v="2"],.tile[data-i="2"]{--c:#60a5fa}#ng [data-i="3"],#freePills [data-i="3"],#cDiet [data-v="3"],.tile[data-i="3"]{--c:#fb923c}#ng [data-i="4"],#freePills [data-i="4"],#cDiet [data-v="4"],.tile[data-i="4"]{--c:#c084fc}#ng [data-i="5"],#freePills [data-i="5"],#cDiet [data-v="5"],.tile[data-i="5"]{--c:#22d3ee}#ng [data-i="6"],#freePills [data-i="6"],#cDiet [data-v="6"],.tile[data-i="6"]{--c:#f472b6}#ng [data-i="7"],#freePills [data-i="7"],#cDiet [data-v="7"],.tile[data-i="7"]{--c:#a3e635}#ng [data-i="8"],#freePills [data-i="8"],#cDiet [data-v="8"],.tile[data-i="8"]{--c:#fde047}#ng [data-i="9"],#freePills [data-i="9"],#cDiet [data-v="9"],.tile[data-i="9"]{--c:#2dd4bf}#ng [data-i="10"],#freePills [data-i="10"],#cDiet [data-v="10"],.tile[data-i="10"]{--c:#fca5a5}#ng [data-i="11"],#freePills [data-i="11"],#cDiet [data-v="11"],.tile[data-i="11"]{--c:#93c5fd}
#konfigurator .pill{border-color:var(--c,var(--fg));color:var(--c,var(--fg))}
#konfigurator .pill[aria-pressed=true],#konfigurator .pill:hover{background:var(--c,var(--fg));color:var(--bg)}
#konfigurator .pill:disabled{background:none;color:var(--c,var(--fg))}
#konfigurator .step h3 small,#konfigurator .sum .nums b,#konfigurator #sReady{color:var(--c,var(--fg))}
#freePills .pill{background:var(--c);border-color:var(--bg);color:var(--bg)}
#freePills .pill[aria-pressed=true],#freePills .pill:hover{background:var(--bg);color:var(--c);border-color:var(--bg)}
#dieta #pHead,#dieta .pmeta b{color:var(--c,var(--fg))}
#dieta #pPick{color:var(--c,var(--fg))}#dieta #pPick:hover{color:#fff}
.tile small{color:var(--c,var(--fg))}
#bar{border-color:var(--c,var(--fg))}#bar p b{color:var(--c,var(--fg))}
/* ===== prowadzenie po krokach ===== */
.kstep{font:700 clamp(15px,1.4vw,19px) var(--n);text-transform:uppercase;letter-spacing:.1em;color:var(--fg);opacity:.7;margin:0 0 16px}
.unsure .kstep{position:relative;color:var(--bg);opacity:.8;text-align:center}
.unsure .nextl{position:relative;color:var(--bg)}.unsure .nextl:hover{color:#fff}
.lead{font-size:clamp(18px,1.8vw,24px);line-height:1.35;max-width:34em;margin-top:26px}
.nextl{display:inline-block;margin-top:34px;font:700 clamp(16px,1.6vw,20px) var(--n);text-transform:uppercase;letter-spacing:.03em;color:var(--fg);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.nextl:hover{color:#fff}
#pSkip{display:block;margin-top:18px}
.res .btn{margin-top:24px}
/* dni treningowe */
.dtabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.dtab{font:700 18px var(--n);text-transform:uppercase;background:none;border:2px solid var(--c);color:var(--c);padding:10px 20px;border-radius:40px;cursor:pointer}
.dtab[aria-selected=true],.dtab:hover{background:var(--c);color:var(--bg)}
.dday{margin-top:24px;border-left:4px solid var(--c);padding-left:20px}
.dday h4{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(18px,2.2vw,28px);color:var(--c);margin:0}
.dday ol{margin-top:14px}
/* ===== ćwiczenia: podgląd, okno „jak wykonać”, odtwarzacz treningu ===== */
.howto{display:inline-block;margin-left:8px;background:none;border:0;padding:0;font:700 14px var(--n);text-transform:uppercase;letter-spacing:.03em;color:var(--c,var(--fg));text-decoration:underline;text-underline-offset:4px;cursor:zoom-in;white-space:nowrap}
.howto:hover,.howto:focus-visible{color:#fff}
.dday li small{display:block;font-size:14px;opacity:.7;margin-top:2px}
.dday .circ{list-style:none;margin:10px 0 4px;padding-left:16px;border-left:2px dashed var(--c)}
.dday .circ li{margin-bottom:8px}
#hv{position:fixed;left:0;top:0;width:240px;height:240px;margin:-120px 0 0 36px;pointer-events:none;z-index:45;display:none;--rim:8px}
#hv.on{display:block}
#hv svg,#hv video{width:100%;height:100%;padding:0;transform:scale(1.12)}
#hv video{object-fit:cover;border-radius:50%;transform:none}
.ov{position:fixed;inset:0;z-index:90;background:var(--bg);overflow-y:auto;display:none;padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,4vw,48px) calc(24px + env(safe-area-inset-bottom,0px))}
.ov.on{display:block}
body.lock{overflow:hidden}
.hbox{max-width:980px;margin:6vh auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;border:3px solid var(--c,var(--fg));padding:clamp(20px,4vw,48px)}
@media(max-width:760px){.hbox{grid-template-columns:1fr;margin:2vh auto}}
.hfig{aspect-ratio:1;--rim:10px;max-width:420px;width:100%;justify-self:center}
.hfig video,.wfig video{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hbox h3{font-size:clamp(26px,3.6vw,48px);line-height:1;color:var(--c,var(--fg));margin:8px 0 0}
.hbox ol{margin:20px 0 26px;padding-left:1.3em}.hbox li{margin-bottom:10px;font-size:18px;line-height:1.35}
.wph{font:700 16px var(--n);text-transform:uppercase;letter-spacing:.08em;opacity:.75;margin:0}
.wtop{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.wtop>div:first-child{flex:1;min-width:220px}
#woT{display:block;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);color:var(--c);line-height:1.1}
#woSub{font-size:15px;opacity:.75}
.wclock{text-align:right;margin-right:6px}.wclock span{display:block;font-size:13px;text-transform:uppercase;opacity:.7}
.wclock b{font-family:var(--d);font-size:clamp(20px,2.4vw,30px);font-variant-numeric:tabular-nums}
.wic{background:none;border:2px solid var(--fg);color:var(--fg);border-radius:40px;padding:8px 16px;font:700 15px var(--n);text-transform:uppercase;cursor:pointer}
.wic:hover{background:var(--fg);color:var(--bg)}
.wic.warn{border-color:#ff5a5f;color:#ff5a5f}.wic.warn:hover{background:#ff5a5f;color:var(--bg)}
.wprog{height:6px;background:rgba(255,255,255,.12);margin-top:16px;border-radius:6px;overflow:hidden}
.wprog i{display:block;height:100%;width:0;background:var(--c);transition:width .3s}
.wbody{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,4vw,56px);margin-top:clamp(20px,3vw,40px)}
.wbody[hidden]{display:none}
@media(max-width:900px){.wbody{grid-template-columns:1fr}}
#woName{font-size:clamp(30px,5vw,72px);line-height:1;margin:10px 0 0;color:var(--c)}
.wo[data-ph=rest] #woName,.wo[data-ph=prep] #woName{color:var(--cream)}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,3vw,40px);align-items:center;margin-top:clamp(18px,3vw,32px);max-width:720px}
.wfig{aspect-ratio:1;--rim:8px;width:100%}
.wfig svg{padding:4%}
.wo[data-ph=rest] .wfig{opacity:.75}
.wtimer{position:relative;aspect-ratio:1;width:100%}
.ring{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:8}
.ring .rb{stroke:rgba(255,255,255,.12)}
.ring .rf{stroke:var(--c);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:0}
.wo[data-ph=rest] .ring .rf,.wo[data-ph=prep] .ring .rf{stroke:var(--cream)}
.wo[data-mode=reps][data-ph=work] .ring .rf{stroke-dasharray:4 6}
.wt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12%}
.wt b{font-family:var(--d);font-weight:900;font-size:clamp(38px,8vw,104px);line-height:1;font-variant-numeric:tabular-nums}
.wt span{font:700 clamp(13px,1.5vw,18px) var(--n);text-transform:uppercase;margin-top:8px}
.wt small{font-size:14px;opacity:.7;margin-top:6px;font-variant-numeric:tabular-nums;min-height:1.2em}
.wo.paused .wt b{opacity:.45}
.wtips{margin:22px 0 0;padding-left:1.2em;max-width:40em;font-size:17px;line-height:1.35}
.wtips li{margin-bottom:6px}
.wctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}
.wctl [hidden]{display:none}
.wctl .pill:disabled{opacity:.35;cursor:default}
.wgo,.wstart{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(16px,2vw,24px);background:var(--c);color:var(--bg);border:0;border-radius:60px;padding:16px 30px;cursor:pointer}
.wgo:hover,.wstart:hover{background:#fff}
.wstart{display:inline-block;margin-top:26px}
.wnext{margin-top:18px;font-size:17px;opacity:.85;min-height:1.3em}
.wkeys{margin-top:8px}
@media(pointer:coarse){.wkeys{display:none}}
.wlist h3{font-size:clamp(18px,2vw,24px);margin:0 0 12px}
.wlist ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--line);position:relative}
@media(min-width:901px){.wlist ol{max-height:calc(100vh - 230px);overflow-y:auto}}
.wlist li button{display:grid;grid-template-columns:28px 1fr;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,194,26,.25);color:var(--fg);padding:12px 6px;font:inherit;cursor:pointer}
.wlist li b{display:block;text-transform:uppercase;font-size:15px;line-height:1.2}
.wlist li small{font-size:14px;opacity:.7}
.wlist li i{font-style:normal;font-weight:700;opacity:.6}
.wlist li.done{opacity:.45}.wlist li.done i{font-size:0}.wlist li.done i::before{content:"✓";font-size:16px}
.wlist li.cur button{color:var(--c);background:rgba(255,255,255,.05);box-shadow:inset 4px 0 0 var(--c)}
.wend{max-width:760px;margin:8vh auto;text-align:center}
.wend[hidden]{display:none}
.wend h2{font-size:clamp(40px,8vw,110px);line-height:.95;color:var(--c);margin-top:10px}
.wstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:36px 0 24px}
.wstats div{border:2px solid var(--line);padding:18px;font-size:15px;text-transform:uppercase}
.wstats b{display:block;font-family:var(--d);font-size:clamp(26px,4vw,44px);color:var(--c);text-transform:none}
/* lista ćwiczeń: nazwa, opis, „zobacz, jak wykonać” zawsze pod spodem */
.dday ol{columns:2 300px;column-gap:48px;padding-left:1.5em}
.dday h4 .dmin{font:700 clamp(14px,1.4vw,18px) var(--n);color:var(--fg);opacity:.75;margin-left:10px;white-space:nowrap}
.dday ol.one{columns:1;max-width:760px}
.dday li.exi{break-inside:avoid;margin:0 0 18px;padding-left:4px;line-height:1.3}
.dday li.exi::marker{font-weight:700}
.dday .exn{display:block}
.dday .exn b{text-transform:uppercase}
.dday li.exi small{display:block;font-size:14px;opacity:.7;margin-top:4px}
.dday li.exi .howto{display:block;margin:6px 0 0;width:max-content;max-width:100%}
.dday .circ{list-style:none;margin:12px 0 0;padding-left:16px;border-left:2px dashed var(--c)}
.dday .circ li.exi{margin-bottom:14px}
.dday .circ li.exi:last-child{margin-bottom:0}
/* ===== zespół: dietetycy i trenerzy ===== */
.team{padding-block:110px;border-top:2px solid var(--line)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:56px}
.person{border:3px solid var(--c);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column}
.ava{width:132px;aspect-ratio:1;border-radius:50%;background:var(--c);color:var(--bg);display:grid;place-items:center;font-family:var(--d);font-weight:900;font-size:44px;box-shadow:0 0 0 8px var(--bg),0 0 0 11px var(--c)}
.person h3{font-size:clamp(24px,2.6vw,34px);line-height:1.05;margin:26px 0 0;color:var(--c)}
.person .role{font-weight:700;text-transform:uppercase;font-size:15px;margin-top:8px;letter-spacing:.02em}
.person .exp{font-size:15px;opacity:.75;margin-top:4px}
.person p.bio{margin:16px 0 0;font-size:17px;line-height:1.4}
.person .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.person .tags span{font:700 13px var(--n);text-transform:uppercase;border:2px solid var(--tc,var(--fg));color:var(--tc,var(--fg));border-radius:30px;padding:5px 12px}
.person .tags button{font:700 13px var(--n);text-transform:uppercase;border:2px solid var(--tc);color:var(--tc);background:none;border-radius:30px;padding:5px 12px;cursor:pointer}
.person .tags button:hover{background:var(--tc);color:var(--bg)}
.person .go{margin-top:auto;padding-top:24px}
.person .go .nextl{margin-top:0;color:var(--c);text-align:left}
.person .go .nextl:hover{color:#fff}
.tcta{margin-top:40px}.tcta .wstart{margin-top:0;--c:var(--fg)}.tcta .note{margin-top:12px}
.pkh{font-size:clamp(24px,3vw,40px);margin-top:70px}
.pkg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;margin-top:24px;border-top:2px solid var(--line)}
.pk{padding:26px 24px 28px 0;border-bottom:2px solid var(--line);display:flex;flex-direction:column}
.pk h4{font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(20px,2vw,26px);margin:0;color:var(--c)}
.pk .pr{font-family:var(--d);font-weight:900;font-size:clamp(34px,4vw,52px);margin-top:14px;line-height:1}
.pk .pr small{font:700 15px var(--n);opacity:.75;margin-left:6px}
.pk ul{margin:16px 0 22px;padding-left:1.1em;font-size:16px}.pk li{margin-bottom:6px}
.pk .wstart{margin-top:auto;align-self:flex-start;font-size:clamp(15px,1.6vw,19px);padding:13px 24px}
.pauth{display:flex;align-items:center;gap:14px;margin:0 0 24px;font-size:16px}
.pauth .ava{width:52px;font-size:18px;box-shadow:none;flex:none}
.pauth b{display:block;text-transform:uppercase;font-size:15px}
.pauth .nextl{margin:4px 0 0;font-size:14px;color:var(--c,var(--fg))}
.chelp{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline}
.chelp .nextl{margin-top:0}
.cbox{max-width:680px;margin:6vh auto;border:3px solid var(--c,var(--fg));padding:clamp(22px,4vw,44px)}
.cbox h3{font-size:clamp(26px,3.6vw,44px);line-height:1.05;color:var(--c,var(--fg));margin-top:8px}
.cform{display:grid;gap:18px;margin-top:24px}
.cform label{display:block;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.03em}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:6px;background:none;border:0;border-bottom:3px solid var(--fg);color:var(--fg);font:700 20px var(--n);padding:8px 0;border-radius:0}
.cform textarea{min-height:90px;resize:vertical;border:3px solid var(--fg);padding:10px;font-weight:400;font-size:18px}
.cform select option{background:var(--bg)}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.cform .two{grid-template-columns:1fr}}
.cbox .status{margin-top:14px;font-weight:700;min-height:1.2em}

/* =====================================================================
   TELEFONY: Android i iPhone
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(90px + env(safe-area-inset-top,0px))}
body{-webkit-tap-highlight-color:rgba(255,194,26,.18)}
a,button,summary,input,select,textarea,label{touch-action:manipulation}
input,select,textarea{font-size:max(16px,1em)} /* iOS nie powiększa strony przy wpisywaniu */
/* notch i zaokrąglone rogi w poziomie */
.wrap{padding-left:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,5vw,72px),env(safe-area-inset-right,0px))}
nav{padding-left:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,5vw,72px),env(safe-area-inset-right,0px))}
.ov{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-left:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,48px),env(safe-area-inset-right,0px))}
.ptabs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ptab{scroll-snap-align:center}
.unsure{min-height:90svh}
body.has-bar{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.hero .cta,.btn{overflow-wrap:anywhere}

/* dotyk: bez „przyklejonego” najechania po stuknięciu */
@media(hover:none){
 .pill:hover{background:none;color:var(--fg)}
 .pill[aria-pressed=true]{background:var(--fg);color:var(--bg)}
 .free .pill:hover{background:none;color:var(--bg)}
 #konfigurator .pill:hover{background:none;color:var(--c,var(--fg))}
 #konfigurator .pill[aria-pressed=true]{background:var(--c,var(--fg));color:var(--bg)}
 #freePills .pill:hover{background:var(--c);color:var(--bg)}
 #freePills .pill[aria-pressed=true]{background:var(--bg);color:var(--c)}
 .need .pill:hover{background:none;color:var(--c)}
 .dtab:hover{background:none;color:var(--c)}
 .dtab[aria-selected=true]{background:var(--c);color:var(--bg)}
 .dr:hover{background:none;color:var(--c,inherit);padding-left:0}
 .tm:hover{background:none;color:inherit}
 .tm[aria-expanded=true]{background:var(--fg);color:var(--bg)}
 .btn:hover{color:var(--fg)}.free .btn:hover{color:var(--bg)}
 .wgo:hover,.wstart:hover{background:var(--c)}
 .person .tags button:hover{background:none;color:var(--tc)}
 .mq a:hover{color:var(--c,inherit)}
 .unsure .bb a:hover{background:none;color:var(--bg)}
 .wic:hover{background:none;color:var(--fg)}
 .nextl:hover{color:var(--fg)}.unsure .nextl:hover{color:var(--bg)}
 .person .go .nextl:hover,.pauth .nextl:hover{color:var(--c)}
 .howto:hover{color:var(--c,var(--fg))}
 .tile:hover>img{transform:none}
 a:active,button:active,summary:active{opacity:.7}
}

/* dotyk: przyciski i linki min. ok. 44 px wysokości */
@media(pointer:coarse){
 .burger{min-height:44px;padding-inline:20px}
 .nextl{padding-block:10px;margin-top:22px}
 #pSkip{margin-top:8px}
 .chelp .nextl,.person .go .nextl,.tcta .nextl{padding-block:12px}
 .howto{padding-block:10px;margin-top:0!important}
 .pauth .nextl{padding-block:10px;margin-top:0}
 .ptab{padding-top:10px}
 .person .tags button{padding:10px 14px}
 .btn.sm{padding-block:8px}
 .pill{min-height:44px}
 #ck button{min-height:44px;padding-inline:4px}
 .unsure .bb a{min-height:48px;display:inline-flex;align-items:center}
 details summary{min-height:48px}
}

@media(max-width:640px){
 /* formularze w kalkulatorach */
 .form input,.form select{font-size:22px}
 .form .two:has(select){grid-template-columns:1fr}
 .calc .ill{display:none}
 .fld input[type=email]{flex:1 1 100%;min-width:0;font-size:22px}
 /* prezentacja diety */
 .pnav{gap:8px}
 .pnav .pill{padding:10px 14px;font-size:15px;white-space:nowrap}
 /* trening */
 .tm{min-height:300px}
 .tm .tph{width:44%}
 /* kafelki „Na talerzu” */
 .tile{padding:12px}
 .tile span{font-size:13px}
 .tile small{font-size:12px;overflow-wrap:anywhere;letter-spacing:0}
 /* zespół */
 .team{padding-block:80px}
 .ava{width:104px;font-size:34px}
 .pk{padding-right:0}
 /* finał i stopka */
 .final{min-height:auto;padding-block:100px}
 #ck{left:10px;right:10px;max-width:none;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
 /* okna */
 .hbox,.cbox{margin:0 auto;padding:22px 18px}
 .hfig{max-width:280px}
 .hbox li{font-size:17px}
 /* odtwarzacz treningu */
 #woSub,.wclock span{display:none}
 .wtop{gap:8px}
 .wtop>div:first-child{min-width:0;flex:1 1 100%}
 .wclock{margin-right:auto;text-align:left}
 .wic{padding:8px 12px;font-size:14px;min-height:40px}
 .wprog{margin-top:12px}
 .wbody{margin-top:16px}
 #woName{font-size:clamp(26px,8vw,40px)}
 .wrow{gap:12px;margin-top:14px}
 .wt b{font-size:clamp(34px,12vw,56px)}
 .wt span{font-size:12px}
 .wtips{font-size:16px;margin-top:16px}
 .wctl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .wctl .wgo{grid-column:1/-1;width:100%;padding:16px}
 .wctl .pill{padding:10px 6px;font-size:15px}
 .wend .wctl{grid-template-columns:1fr}
 .wstats{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
 .btn{font-size:24px}
 .hero .cta{font-size:24px}
 .logo{font-size:22px}
 .dtab{padding:10px 14px;font-size:16px}
 .dday{padding-left:14px}
}
/* telefon w poziomie */
@media(max-height:500px) and (orientation:landscape){
 .hero{min-height:auto;padding-top:100px}
 .unsure{min-height:auto;padding-block:80px}
 .wrow{grid-template-columns:200px 200px}
}
@media(pointer:coarse){
 .btn{padding-block:10px}
 footer ul a{display:inline-block;padding-block:12px}
 .pauth .nextl{min-height:44px}
}
@media(max-width:380px){.pnav{gap:6px}.pnav .pill{padding:10px;font-size:14px}.pcount{font-size:13px}}
.nextl{text-align:left}
@media(max-width:640px){.tile small{font-size:11px;overflow-wrap:normal}}
@media(max-width:380px){.tile small{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}}

/* Wiedza: hasła układają się w wiersze i zawijają, nic nie jest ucinane */
.kw{display:block;font-family:var(--d);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3.6vw,54px);line-height:1.15}
.kw a{text-decoration:none;color:var(--c,var(--fg));transition:color .2s}
.kwi{display:inline;margin-right:.35em}
.kw .kd{white-space:nowrap}
.kw a:hover,.kw a:focus-visible{color:#fff}
.kw .kd{color:var(--fg);font-size:.6em}
@media(hover:none){.kw a:hover{color:var(--c,var(--fg))}}
@media(max-width:640px){.kw{font-size:clamp(18px,5.8vw,28px);line-height:1.25}}
.kwi{white-space:nowrap}.kwi.kwl{white-space:normal}

/* ===== opinie: karuzela przewijana w bok podczas przewijania strony ===== */
.op{position:relative;border-top:2px solid var(--line)}
.op-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:calc(76px + env(safe-area-inset-top,0px))}
.op-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap}
.op-head h2{font-size:clamp(40px,7vw,110px);line-height:.9}
.op-sub{max-width:22em;font-size:clamp(16px,1.5vw,20px);margin:0 0 .4em;opacity:.85}
.op-track{display:flex;align-items:center;gap:clamp(26px,4vw,60px);width:max-content;padding:clamp(34px,5vh,60px) clamp(20px,5vw,72px);will-change:transform}
.opc{flex:none;width:clamp(272px,30vw,420px);margin:0;background:var(--bg2);border:3px solid var(--c);padding:clamp(20px,2.4vw,32px);transform:translateY(var(--y)) rotate(var(--r));box-shadow:9px 9px 0 var(--c);display:flex;flex-direction:column;min-height:clamp(250px,34vh,340px)}
.opst{color:var(--c);font-size:20px;letter-spacing:.12em}.opst span{opacity:.25}
.opc blockquote{margin:14px 0 22px;font-size:clamp(16px,1.35vw,19px);line-height:1.45;color:var(--cream)}
.opc blockquote::before{content:"”";display:block;font-family:var(--d);font-weight:900;font-size:64px;line-height:1;height:.5em;color:var(--c);margin:0 0 10px}
.opc figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.opa{width:42px;height:42px;border-radius:50%;background:var(--c);color:var(--bg);display:grid;place-items:center;font-family:var(--d);font-weight:900;font-size:18px;flex:none}
.opc figcaption>span:nth-child(2){font-size:14px;opacity:.8;line-height:1.25;flex:1;min-width:0}
.opc figcaption b{display:block;font-size:17px;text-transform:uppercase;opacity:1;color:var(--fg)}
.opd{font:700 13px var(--n);text-transform:uppercase;border:2px solid var(--c);color:var(--c);background:none;border-radius:30px;padding:6px 12px;cursor:pointer}
.opd:hover{background:var(--c);color:var(--bg)}
.op-prog{height:4px;margin-top:4px}.op-prog i{display:block;height:4px;background:var(--fg);transform:scaleX(0);transform-origin:left;border-radius:4px}
/* bez animacji (ustawienie systemu): zwykła przewijana palcem lista */
.op.static .op-pin{position:static;height:auto;padding-block:100px}
.op.static .op-track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.op.static .opc{scroll-snap-align:center}
.op.static .op-prog{display:none}
@media(hover:none){.opd:hover{background:none;color:var(--c)}}
@media(pointer:coarse){.opd{min-height:40px}}
@media(max-width:640px){
 .op-head h2{font-size:clamp(34px,11vw,52px)}
 .op-sub{font-size:15px;margin:0}
 .opc{width:min(80vw,320px);min-height:0}
 .opc blockquote{font-size:16px;margin:10px 0 16px}
 .opc blockquote::before{font-size:50px}
 .op-track{padding-block:26px 34px}
}
@media(max-height:560px){.op-head .kstep,.op-sub{display:none}.opc blockquote{font-size:15px}}

/* zdjęcia dietetyków i wideo trenerów */
.ava{position:relative;overflow:hidden}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;border-radius:50%;z-index:1}
.ava span{position:relative}
.person .ava{width:156px}
.pauth .ava{width:56px}
.tvid{position:relative;aspect-ratio:16/10;margin:calc(-1 * clamp(22px,3vw,36px)) calc(-1 * clamp(22px,3vw,36px)) 4px;border-bottom:3px solid var(--c);background:var(--bg2);overflow:hidden}
.tvid video{display:block;width:100%;height:100%;object-fit:cover}
.tvl{position:absolute;left:12px;bottom:12px;font:700 13px var(--n);text-transform:uppercase;letter-spacing:.03em;background:var(--c);color:var(--bg);padding:6px 10px;border-radius:30px}
.person.trainer h3{margin-top:22px}
@media(max-width:640px){.person .ava{width:120px}}

/* ===== cennik i płatność (atrapa) ===== */
.sprice{margin-top:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sprice b{font-family:var(--d);font-weight:900;font-size:clamp(40px,6vw,88px);line-height:1;color:var(--c,var(--fg))}
.sprice span{font-size:16px;opacity:.8}
.pnote{margin-top:22px;max-width:46em}
.svcs{margin-top:24px;border-top:2px solid var(--c)}
.svcs h4{font:700 14px var(--n);letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin:14px 0 4px}
.svc{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;background:none;border:0;border-bottom:1px solid rgba(255,194,26,.3);color:var(--fg);font:700 16px var(--n);text-align:left;padding:12px 0;min-height:44px;cursor:pointer}
.svc b{font-family:var(--d);font-weight:900;color:var(--c);white-space:nowrap;font-size:15px}
.svc:hover span,.svc:focus-visible span{text-decoration:underline}
.demo{display:inline-block;margin:14px 0 0;padding:6px 12px;border:2px dashed var(--c,var(--fg));font:700 13px var(--n);text-transform:uppercase;letter-spacing:.06em}
.osum{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--line)}
.osum li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,194,26,.3);font-size:17px}
.osum li b{text-align:right}
.otot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px;font-family:var(--d);font-weight:900;text-transform:uppercase}
.otot b{font-size:clamp(28px,4vw,44px);color:var(--c,var(--fg))}
.pm{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pmf{margin-top:20px;min-height:64px}
.pbox .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:18px}
.wgo:disabled{opacity:.55;cursor:wait}

/* demo obiegu zamówienia */
.dmx{margin:10px 0 0;padding:14px;border:1px dashed var(--line,#888);font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
#od .cbox{margin-top:3vh}

/* ===== MOTYWY SEKCJI: każda sekcja ma własne tło i dobrany do niego kolor tekstu, linii i kart ===== */
.stats,#potrzeby,#diety,#dieta,#dietetycy,#bmi,#bmr,#spalanie,#trening,#trenerzy,#konfigurator,.comm,#faq{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.stats,#potrzeby,#diety,#dieta,#dietetycy,#bmi,#bmr,#spalanie,#trening,#trenerzy,#konfigurator,.comm,#faq,#opinie,#wiedza{background:var(--bg);color:var(--fg)}
/* ciemne: teal, burgund, zieleń, granat, fiolet, brąz, indygo, rdza, wino, łupek, oliwka */
#opinie{--bg:#0a2f33;--bg2:#0f4147;--fg:#ffe08a;--line:#2dd4bf;--dim:#7fb8b4}
.stats{--bg:#3a0f1f;--bg2:#521a2e;--fg:#ffd6a5;--line:#ff8a8c;--dim:#c58a8f}
#potrzeby{--bg:#0f2d1c;--bg2:#17452b;--fg:#e6f5b8;--line:#8fd07a;--dim:#86a983}
#diety{--bg:#0d1f45;--bg2:#15306b;--fg:#ffe3a0;--line:#60a5fa;--dim:#8ca6d4}
#dieta{--bg:#2d1250;--bg2:#421c73;--fg:#ffdff0;--line:#c084fc;--dim:#a98dcb}
#dietetycy{--bg:#3a2410;--bg2:#53341a;--fg:#ffe2b8;--line:#fb923c;--dim:#c19a72}
#trening{--bg:#1d1a4a;--bg2:#2b2770;--fg:#dfe6ff;--line:#93c5fd;--dim:#9aa3d6}
#trenerzy{--bg:#4a1c0c;--bg2:#652a14;--fg:#ffe1c8;--line:#ff7b2c;--dim:#cf9a80}
#konfigurator{--bg:#3d0c2e;--bg2:#571546;--fg:#ffd9ef;--line:#f472b6;--dim:#c98db0}
.comm{--bg:#12303f;--bg2:#1a465b;--fg:#ffefc2;--line:#22d3ee;--dim:#86aebd}
#wiedza{--bg:#2c2f0c;--bg2:#3f4413;--fg:#f3f0b0;--line:#a3e635;--dim:#a9ab78}
/* jasne (kalkulatory i FAQ): kremowe, brzoskwiniowe, miętowe, lawendowe */
#bmi{--bg:#f6ecd6;--bg2:#ece0c2;--fg:#2a1233;--line:#2a1233;--dim:#7a6a80}
#bmr{--bg:#ffd9bf;--bg2:#ffc8a3;--fg:#4a1b0e;--line:#4a1b0e;--dim:#8a5a48}
#spalanie{--bg:#d4f0dd;--bg2:#bfe6cd;--fg:#0e3320;--line:#0e3320;--dim:#4f7a62}
#faq{--bg:#e4dcf7;--bg2:#d5caf0;--fg:#2a1450;--line:#2a1450;--dim:#6f5f96}
/* stopka mniej ciężka niż reszta */
footer{background:#0d0810}
/* jasne sekcje: hover i wskaźnik BMI nie mogą być białe */
#bmi .btn:hover,#bmr .btn:hover,#spalanie .btn:hover,#faq .btn:hover,#bmi .nextl:hover,#bmr .nextl:hover,#spalanie .nextl:hover,#faq .nextl:hover{color:var(--line);opacity:.7}
#bmi .scale i{background:var(--fg);box-shadow:0 0 0 3px var(--bg)}
#trenerzy .wstart:hover,#dietetycy .wstart:hover,#konfigurator .wgo:hover{background:var(--fg);color:var(--bg)}

/* ========= REGULAMIN / POLITYKA PRYWATNOŚCI ========= */
#lg{z-index:95;padding-top:0}
.lbox{max-width:860px;margin:0 auto 8vh}
.lhead{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;background:var(--bg);padding:calc(16px + env(safe-area-inset-top,0px)) 0 16px;border-bottom:2px solid var(--line)}
.ltabs{display:flex;flex-wrap:wrap;gap:10px}
.ltabs .pill{font-size:16px;padding:9px 16px}
.lact{display:flex;gap:18px}
.lbtn{background:none;border:0;padding:6px 0;color:var(--fg);font:700 16px var(--n);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.lbtn:hover{color:#fff}
.ldoc{padding-top:clamp(30px,5vw,56px);color:var(--cream);font-size:17px;line-height:1.6}
.ldoc h3{font-size:clamp(28px,4.6vw,56px);line-height:1;color:var(--fg);margin:10px 0 28px}
.ldoc h4{font:900 clamp(16px,1.8vw,20px)/1.2 var(--d);text-transform:uppercase;color:var(--fg);margin:44px 0 14px;padding-top:18px;border-top:1px solid var(--dim)}
.ldoc p{max-width:none}
.ldoc ol{margin:0;padding-left:1.5em}
.ldoc ol>li{margin-bottom:.6em;padding-left:.2em}
.ldoc ol>li::marker{color:var(--fg);font-weight:700}
.ldoc ul{margin:.5em 0;padding-left:1.2em}
.ldoc ul>li{margin-bottom:.3em}
.ldoc ul>li::marker{color:var(--fg)}
.ldoc b{color:#fff;font-weight:700}
.ldoc a{color:var(--fg);text-underline-offset:3px}
.ldoc .wph{color:var(--fg)}
.ph{background:rgba(255,194,26,.14);border:1px dashed var(--fg);color:var(--fg);padding:0 .3em;border-radius:3px;font-weight:700}
.lform{border:2px dashed var(--dim);padding:clamp(16px,3vw,28px)}
.lform p{margin:0 0 .8em}
.ltw{overflow-x:auto;margin:14px 0 6px}
.ltab{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.ltab th,.ltab td{text-align:left;vertical-align:top;padding:10px 12px;border:1px solid var(--dim)}
.ltab th{color:var(--fg);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.03em}
.ltab td:first-child{font-family:monospace;color:var(--fg);white-space:nowrap}
footer a[data-legal],.chk a[data-legal],#ck a[data-legal]{color:inherit;text-underline-offset:3px}
@media print{
 body.lgp{overflow:visible!important;background:#fff!important;color:#000!important}
 body.lgp>*:not(#lg){display:none!important}
 body.lgp #lg{position:static!important;display:block!important;overflow:visible!important;background:#fff!important;padding:0!important}
 body.lgp .lhead{display:none!important}
 body.lgp .ldoc,body.lgp .ldoc h3,body.lgp .ldoc h4,body.lgp .ldoc b,body.lgp .ldoc a,body.lgp .ldoc .wph,body.lgp .ph,body.lgp .ltab th,body.lgp .ltab td:first-child{color:#000!important}
 body.lgp .ldoc{font-size:11pt;padding-top:0}
 body.lgp .ldoc h4{border-color:#999;break-after:avoid}
 body.lgp .ph{background:none;border-color:#000}
 body.lgp .ltab th,body.lgp .ltab td,body.lgp .lform{border-color:#999}
}
@media(max-width:560px){
 .lhead{gap:10px;padding-bottom:12px}
 .ltabs{gap:8px;flex-wrap:nowrap}
 .ltabs .pill{font-size:13px;padding:7px 11px;white-space:nowrap}
 .lact{width:100%;justify-content:space-between}
 .lbtn{font-size:14px;padding:2px 0}
 .ldoc{font-size:16px}
}

/* ========= BLOG: sekcja na stronie głównej + lista w stopce ========= */
.blog{padding-block:110px;border-top:2px solid var(--line)}
.blog .lead{margin:30px 0 44px;max-width:38em;font-size:clamp(18px,1.6vw,22px);color:var(--cream)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px}
.bc{--ink:#150a14;display:flex;flex-direction:column;background:var(--c);color:var(--ink);text-decoration:none;padding:22px 22px 20px;min-height:280px;border:3px solid var(--c);border-radius:4px 40px 4px 4px}
.bc:hover{background:var(--bg);color:var(--c)}
.bci{display:block;width:78px;height:78px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 4px var(--ink);margin:4px 0 22px 4px}
.bc:hover .bci{box-shadow:0 0 0 4px var(--c)}
.bci svg{display:block;width:100%;height:100%;padding:8%}
.bct{font:900 clamp(18px,1.5vw,21px)/1.08 var(--d);text-transform:uppercase;margin:0;letter-spacing:-.02em;hyphens:manual;overflow-wrap:anywhere}
.bce{font-size:17px;line-height:1.35;margin:10px 0 18px}
.bcm{margin-top:auto;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.04em;opacity:.75}
.fblog{margin:0 0 36px;padding-top:26px;border-top:1px solid var(--dim)}
.fblog h4{font:900 16px var(--d);text-transform:uppercase;margin:0 0 16px}
.fblog ul{display:block;list-style:none;padding:0;margin:0;columns:4 200px;column-gap:28px;text-transform:none}
.fblog li{break-inside:avoid;margin-bottom:8px}
.fblog a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px}
.fblog a::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.fblog a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* ========= NA TALERZU: przepisy ========= */
.clead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,70px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.cbig{font:900 clamp(30px,4.4vw,72px)/.95 var(--d);text-transform:uppercase;letter-spacing:-.02em;margin:0;max-width:none}
.ctxt p{color:var(--cream);font-size:clamp(18px,1.4vw,21px);line-height:1.5;max-width:30em}
.ctxt p:last-child{margin-bottom:0}
a.tile{text-decoration:none}
.tile .tt{position:absolute;top:12px;left:12px;z-index:1;font:700 13px/1.25 var(--n);font-style:normal;text-transform:uppercase;letter-spacing:.03em;background:var(--bg);color:var(--c,var(--fg));padding:7px 11px;border-radius:14px}
@media(max-width:860px){.clead{grid-template-columns:1fr}}
@media(max-width:640px){.tile .tt{top:8px;left:8px;font-size:11px;padding:5px 8px}.cstage h2{top:30px}}