/* Strona produktu: blok <style> z web/projekt/index.html (Claude Design). */
/* scena: pierwszy ekran */
.scena{position:relative; overflow:hidden; background:var(--zielen); color:var(--papier)}
.scena::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 60% at 88% 18%, rgba(245,208,70,.10), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(255,255,255,.05), transparent 60%)}
.scena > .wrap{position:relative}
.scena-siatka{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"kartka meta" "tekst tekst"; column-gap:26px; row-gap:26px; padding-block:14px 30px}
.scena-kartka{grid-area:kartka; padding:6px 0 0 6px}
.metryczka{grid-area:meta; display:grid; align-content:center; gap:4px}
.metryczka > div{display:grid; gap:1px; min-height:44px; align-content:center}
.metryczka dt{font:500 13px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--zielen-tekst)}
.metryczka dd{font:500 17px/1.3 var(--f-bez); color:var(--papier)}
.metryczka dd a{display:inline-flex; align-items:center; min-height:44px; color:var(--papier); text-decoration:underline dotted; text-underline-offset:4px}
.metryczka dd small{display:block; font-size:14px; color:var(--zielen-tekst)}
.scena-tekst{grid-area:tekst; display:grid; gap:14px}
.scena-lead{font-size:var(--t-tresc); line-height:1.5; color:var(--zielen-tekst); max-width:44ch}
.scena-pytanie{margin-top:6px; font:500 var(--t-drobny)/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--zielen-tekst)}
.scena-przyciski{display:grid; gap:10px}
.scena-przyciski .btn{width:100%}
@media (min-width:960px){
  .scena-siatka{grid-template-columns:minmax(0,1fr) 420px; grid-template-areas:"tekst kartka" "meta kartka"; column-gap:64px; row-gap:40px; align-items:center; min-height:min(calc(100svh - 96px), 780px); padding-block:40px 72px}
  .scena-kartka{display:flex; justify-content:center; align-self:center; padding:0}
  .scena .kartka-stos{--k-szer:330px}
  .scena-tekst{gap:22px; align-self:end}
  .scena-lead{font-size:var(--t-wiekszy)}
  .scena-przyciski{grid-template-columns:repeat(2, max-content); gap:14px}
  .scena-przyciski .btn{width:auto; min-width:270px}
  .metryczka{align-self:start; grid-template-columns:repeat(3, max-content); column-gap:48px; padding-top:22px; border-top:1px solid rgba(197,214,204,.28)}
}

/* co dostajesz */
.dostajesz-siatka{display:grid; gap:40px}
@media (min-width:960px){ .dostajesz-siatka{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:80px} .dostajesz-siatka .sekcja-glowka{position:sticky; top:40px; align-self:start} }
.pieczatka-blok{display:flex; align-items:center; gap:20px; margin-top:14px}
.pieczatka-blok .maly{max-width:26ch}
.spis{border-top:2px solid var(--atrament)}
.spis li{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:16px; padding:14px 0 13px; border-bottom:1px solid var(--linia)}
.spis-nazwa{font:500 20px/1.3 var(--f-szeryf); font-variation-settings:"opsz" 24}
.spis-kropki{display:none}
.spis-rola{font:500 var(--t-drobny)/1.3 var(--f-mono); color:var(--atrament-2); text-align:right; max-width:13ch}
@media (min-width:960px){
  .spis li{grid-template-columns:minmax(0,max-content) minmax(18px,1fr) auto; column-gap:10px; padding:15px 0 14px}
  .spis-kropki{display:block; align-self:end; margin-bottom:.45em; border-bottom:2px dotted var(--linia-mocna)}
  .spis-rola{max-width:none; white-space:nowrap}
}

/* termin */
.termin-siatka{display:grid; gap:40px}
.termin-lewa{display:grid; gap:36px; align-content:start}
.os{display:grid; gap:10px; padding:22px 18px 18px; border-radius:var(--r-3); background:var(--karta); box-shadow:var(--cien-2)}
.os-skala{position:relative; height:36px}
.os-linia{position:absolute; left:0; right:0; top:22px; height:2px; background:var(--atrament)}
.os-mies{position:absolute; top:0; transform:translateX(-50%); display:grid; justify-items:center; gap:6px; font:500 13px/1 var(--f-mono); color:var(--atrament-2)}
.os-mies::after{content:""; width:2px; height:10px; margin-top:2px; background:var(--atrament-2)}
.os-konce{display:flex; justify-content:space-between; gap:12px}
.os-koniec{display:grid; gap:2px; font:500 13px/1.3 var(--f-mono); color:var(--atrament-2)}
.os-koniec strong{font:600 22px/1.1 var(--f-szeryf); color:var(--atrament)}
.os-koniec:last-child{text-align:right}
.os-koniec:last-child strong{color:var(--cynober)}
.os-proporcje{display:grid; gap:8px; margin-top:4px; padding-top:14px; border-top:1px dashed var(--linia)}
.os-proporcje p{font:500 13px/1.3 var(--f-mono); color:var(--atrament-2); text-transform:uppercase; letter-spacing:.06em}
.os-pas{display:grid; grid-template-columns:calc(30 / 180 * 100%) calc(14 / 180 * 100%) 1fr; gap:3px; height:26px}
.os-pas span{border-radius:4px}
.os-pas .p30{background:var(--zielen)}
.os-pas .p14{background:var(--zakreslacz); box-shadow:inset 0 0 0 1.5px var(--atrament)}
.os-pas .reszta{background:repeating-linear-gradient(90deg, var(--papier-2) 0 2px, transparent 2px 8px)}
.os-legenda{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:var(--t-maly); color:var(--atrament-2)}
.os-legenda span{display:inline-flex; align-items:center; gap:8px}
.os-legenda i{width:14px; height:14px; border-radius:3px}
.fakty{display:grid; border-top:2px solid var(--atrament)}
.fakt{display:grid; gap:2px; padding:16px 0 4px; border-bottom:1px solid var(--linia)}
.fakt-liczba{font:600 26px/1.1 var(--f-szeryf); font-variation-settings:"opsz" 40; letter-spacing:-.01em}
.fakt-tresc{display:grid; align-content:start}
.fakt-tresc p{padding-top:3px}
.fakt:last-child .fakt-tresc{padding-bottom:12px}
.fakt-bez-ref .fakt-tresc{padding-bottom:12px}
@media (min-width:960px){
  .termin-siatka{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:80px; align-items:start}
  .os{padding:30px 28px 24px}
  .fakt{grid-template-columns:172px minmax(0,1fr); column-gap:16px}
  .fakt-liczba{font-size:30px}
}

/* nowa definicja */
.definicja{background:var(--zielen); color:var(--papier)}
.definicja-siatka{display:grid; gap:28px}
.def{display:grid; gap:10px; padding:20px; border-radius:var(--r-3)}
.def-bylo{border:1.5px solid rgba(197,214,204,.35)}
.def-jest{background:var(--karta); color:var(--atrament); box-shadow:var(--cien-kartki)}
.def-etykieta{font:600 13px/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase}
.def-bylo .def-etykieta{color:var(--zielen-tekst)}
.def-jest .def-etykieta{color:var(--cynober)}
.def blockquote{font:italic 400 21px/1.42 var(--f-szeryf); text-wrap:pretty}
.def-bylo blockquote{color:var(--zielen-tekst)}
.def-jest blockquote{font-size:25px; line-height:1.32; font-weight:500}
.def del{text-decoration:line-through 2.5px var(--zakreslacz); color:var(--papier)}
.definicja .def-jest .ref{color:var(--atrament-2)}
.definicja-cta{display:grid; gap:16px; justify-items:start}
@media (min-width:960px){
  .definicja-siatka{grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:80px; align-items:center}
  .definicja .sekcja-glowka{grid-row:span 2}
  .def-jest blockquote{font-size:32px}
}

/* zakres i cena */
.zakres-siatka{display:grid; gap:40px}
.zakres-lista{display:grid; border-top:2px solid var(--atrament)}
.zakres-lista li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--linia)}
.znak-tak, .znak-nie{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font:700 16px/1 var(--f-bez)}
.znak-tak{background:var(--zielen); color:var(--papier)}
.znak-nie{background:var(--cynober-jasny); color:var(--cynober-ciemny)}
.zakres-lista strong{display:block; font-weight:600}
.zakres-lista p{color:var(--atrament-2); font-size:var(--t-maly)}
.cena{position:relative; display:grid; gap:16px; padding:28px 24px 26px; border-radius:var(--r-3); background:var(--karta); box-shadow:var(--cien-2)}
/* po decyzji o cenie wraca tu .cena-kwota (kwota netto) i .cena-vat z E1 */
.cena-kwota{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px}
.cena-kwota strong{font:600 72px/0.9 var(--f-szeryf); font-variation-settings:"opsz" 72; letter-spacing:-.03em}
.cena-kwota span{font:500 18px/1.2 var(--f-bez)}
.cena-vat{font:500 var(--t-maly)/1.4 var(--f-mono); color:var(--atrament-2)}
.cena-pusta{display:grid; place-items:center; align-content:center; gap:6px; min-height:104px; padding:12px; border:2px dashed var(--linia-mocna); border-radius:var(--r-2); text-align:center; color:var(--atrament-2)}
.cena-pusta small{font:500 13px/1.35 var(--f-mono)}
.cena ul{display:grid; gap:8px; padding-top:14px; border-top:1px dashed var(--linia)}
.cena li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:var(--t-maly); color:var(--atrament-2)}
.cena li::before{content:"\2022"; color:var(--zielen); font-weight:700; text-align:center}
.cena .btn{width:100%}
.cena-propozycja{position:absolute; top:-12px; right:16px}
@media (min-width:960px){
  .zakres-siatka{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:80px; align-items:start}
  .cena{padding:36px 36px 32px}
}

/* przepisy */
.przepisy-siatka{display:grid; gap:28px}
.przepisy{border-top:2px solid var(--atrament)}
.przepis{display:grid; gap:6px; padding:18px 12px 18px 0; border-bottom:1px solid var(--linia); scroll-margin-top:12px; transition:background-color .3s}
.przepis:target{background:var(--bursztyn-jasny); padding-left:12px}
.przepis h3{font:600 14px/1.3 var(--f-mono); letter-spacing:.02em}
.przepis blockquote{font:italic 400 18px/1.5 var(--f-szeryf); text-wrap:pretty}
.przepis p{font-size:var(--t-maly); color:var(--atrament-2)}
@media (min-width:960px){ .przepisy-siatka{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:80px} .przepis{grid-template-columns:190px minmax(0,1fr); column-gap:32px} .przepis > :not(h3){grid-column:2} .przepis h3{grid-row:1 / span 3} }

/* bez stylu w atrybutach (CSP style-src 'self'): pozycje miesięcy na osi i kolory legendy jako klasy */
.os-gru{left:14.4%} .os-sty{left:31.7%} .os-lut{left:48.9%} .os-mar{left:64.4%} .os-kwi{left:81.7%} .os-maj{left:98.3%}
.os-legenda .l30{background:var(--zielen)}
.os-legenda .l14{background:var(--zakreslacz); box-shadow:inset 0 0 0 1.5px var(--atrament)}