@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
/* Tokeny serwisu (znanytrener.pl): te same co na stronie glownej (THEME w zt-catalog/site). */
:root {
  --bg: #f5f5f3; --paper: #ffffff; --soft: #ededea; --line: #e3e3de;
  --ink: #17181c; --muted: #5b5e66; --green: #111513; --green-d: #3a403c;
  --amber: #0f766e; --amber-bg: #e3f2f0; --dark: #17181c;
  --serif: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-bottom: 120px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; }
p { margin: 0 0 .8em; } a { color: var(--green); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; top: 8px; left: 8px; background: #fff; padding: 8px 12px; z-index: 99; }

/* ================= STRONA PUBLICZNA ================= */
.pub { container-type: inline-size; background: var(--bg); position: relative; }
.pub.plain { background: none; }
.pub h1 { font-size: 1.9rem; margin-bottom: .25em; }
.pub .line { color: var(--muted); margin: 0 0 10px; font-size: 1.05rem; }
.pub .badge { display: table; font-size: .8rem; font-weight: 700; color: var(--green); background: #eff8c8; border-radius: 999px; padding: 3px 10px; margin: 0 0 8px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .chips li { font-size: .8rem; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--muted); background: var(--paper); }
.over { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--amber); margin-bottom: 6px; }
.ph { flex: none; display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--soft); }
.ph.mono { display: grid; place-items: center; background: var(--green); color: #fff; font: 600 1.3rem var(--serif); }
.ph.mini { width: 36px; height: 36px; font-size: .85rem; }
.ph.big { width: 120px; height: 120px; font-size: 2.4rem; }
.say { font-family: var(--serif); font-size: 1.45rem; line-height: 1.3; font-style: italic; }
.ticks { list-style: none; padding: 0; margin: 0 0 .8em; } .ticks li { padding: 0 0 8px 26px; position: relative; } .ticks li::before { content: "—"; position: absolute; left: 0; color: var(--amber); }

/* otwarcia */
.open { margin: 0 0 20px; padding: 0; font: italic 500 1.6rem/1.3 var(--serif); text-wrap: balance; color: var(--green-d); }
.open::before { content: "„"; } .open::after { content: "”"; }
.strip { list-style: none; padding: 0; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); overflow: hidden; }
.strip li + li { border-top: 1px solid var(--line); }
.strip a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 16px; text-decoration: none; color: inherit; min-height: 44px; } .strip a:hover { background: var(--soft); }
.strip b { font: 600 1.1rem/1.25 var(--serif); color: var(--green-d); white-space: nowrap; } .strip span { font-size: .8rem; line-height: 1.3; color: var(--muted); text-align: right; }
@container (min-width: 520px) {
  .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip li + li { border-top: 0; border-left: 1px solid var(--line); }
  .strip a { display: block; height: 100%; text-align: center; padding: 14px 8px; } .strip b { display: block; white-space: normal; } .strip span { display: block; text-align: center; margin-top: 3px; }
}

.fact { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0 0 14px; scroll-margin-top: 70px; }
.fact h3 { font: 700 .75rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.fact .src { font-size: .75rem; margin: 10px 0 0; }
.offers { list-style: none; padding: 0; margin: 0; }
.offers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.offers small { display: block; color: var(--muted); } .offers b { font: 600 1.25rem var(--serif); white-space: nowrap; }
.policy { font-size: .88rem; color: var(--muted); margin: 10px 0 0; }
.day h4 { font: 600 .95rem var(--sans); margin: 8px 0 6px; } .day h4::first-letter { text-transform: uppercase; }
.times { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; } .times li { min-width: 64px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 600; text-align: center; }

/* przycisk rezerwacji: pełny pasek na dole, nie pływająca pigułka — nie zasłania tekstu w środku ekranu */
.ctabar { position: sticky; bottom: 0; z-index: 3; text-align: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.cta { display: inline-block; min-width: min(100%, 320px); background: var(--green); color: #fff; font-weight: 700; text-decoration: none; padding: 12px 26px; border-radius: 999px; }
.cta:hover { background: var(--green-d); }

/* — Pytania i odpowiedzi — */
.f-rozmowa .hero { display: flex; gap: 16px; align-items: center; padding: 28px 16px 20px; max-width: 680px; margin: 0 auto; }
.f-rozmowa.t-twarz .hero { flex-direction: column; align-items: flex-start; }
.talk { max-width: 680px; margin: 0 auto; padding: 0 16px 32px; }
.talk-intro { font-size: .85rem; color: var(--muted); text-align: center; border-top: 1px solid var(--line); padding-top: 14px; }
.ask { margin: 30px 0 10px; }
.ask h2 { margin: 0; font: 600 1.3rem/1.3 var(--serif); color: var(--dark); border-left: 3px solid var(--amber); padding-left: 14px; text-wrap: balance; }
.ans { display: block; } .ans > .ph { display: none; }
.ans > div { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; padding-left: 17px; }
.ans > div > :last-child { margin-bottom: 0; }
.ans.data { padding-left: 17px; } .ans.data .fact { flex: 1; margin: 0; background: var(--soft); }

/* — List — */
.f-list { background: var(--soft); padding-bottom: 8px; }
.letter { background: var(--paper); margin: 0 auto; padding: 28px 22px 36px; max-width: 720px; font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; box-shadow: 0 1px 0 var(--line), 0 12px 40px rgb(23 24 28 / .08); position: relative; }
.letter .head { display: flex; gap: 14px; align-items: center; font-family: var(--sans); line-height: 1.4; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 8px; }
.letter .head h1 { font-size: 1.45rem; } .letter .head .line { font-size: .95rem; margin-bottom: 8px; } .letter .head .badge { margin: 0; }
.letter .clip { float: right; margin: -6px -4px 10px 14px; padding: 6px 6px 18px; background: #fff; box-shadow: 0 2px 10px rgb(23 24 28 / .25); transform: rotate(2.5deg); position: relative; z-index: 1; }
.letter .clip .ph { width: 96px; height: 120px; border-radius: 2px; font-size: 2rem; }
.letter.has-photo .head { display: block; min-height: 150px; }
.letter .strip { font-family: var(--sans); margin: 16px 0 0; clear: both; }
.letter .date { text-align: right; font-style: italic; color: var(--muted); margin: 18px 0 22px; clear: both; }
.letter .open { border-left: 3px solid var(--amber); padding-left: 16px; font-size: 1.4rem; margin-bottom: 28px; }
.letter .greet { font-size: 2.1rem; font-weight: 400; font-style: italic; margin-bottom: .7em; line-height: 1.2; }
.letter .note { font: 700 .72rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--amber); margin: 1.8em 0 .5em; }
.letter .first > p:first-of-type::first-letter { font-size: 3.2em; float: left; line-height: .85; padding: .06em .08em 0 0; color: var(--green); }
.letter .bye { margin-top: 2em; font-style: italic; } .letter .sign { font-size: 1.7rem; font-style: italic; color: var(--green); margin: 0; }
.letter .chips { font-family: var(--sans); margin-top: 18px; }
.attach { max-width: 720px; margin: 0 auto; padding: 28px 16px 12px; } .attach > h2 { font-style: italic; font-weight: 400; font-size: 1.4rem; margin-bottom: 14px; }

/* — Droga — */
.road-hero { background: var(--green); color: #fff; padding: 28px 16px 20px; }
.road-hero > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.rh { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; } .rh > div { min-width: 0; }
.rh .ph { border: 3px solid rgb(255 255 255 / .85); } .rh .ph.mono { background: rgb(255 255 255 / .16); }
.rh .ph.big { width: 104px; height: 130px; border-radius: 18px; }
.road-hero .over { color: #fdba74; } .road-hero .line { color: rgb(255 255 255 / .88); font-size: 1.1rem; }
.road-hero h1 { font-weight: 500; }
.road-hero .badge { background: rgb(255 255 255 / .16); color: #fff; }
.road-hero .chips li { background: transparent; color: #fff; border-color: rgb(255 255 255 / .45); }
.road-hero .open { color: #fff; margin: 22px auto 0; } .road-hero .strip { margin: 22px auto 0; background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .35); }
.road-hero .strip li + li { border-color: rgb(255 255 255 / .35); } .index-hero .strip { text-align: left; } .road-hero .strip b { color: #fff; } .road-hero .strip span { color: rgb(255 255 255 / .85); } .road-hero .strip a:hover { background: rgb(255 255 255 / .12); }
.road-hero nav ol { list-style: none; counter-reset: n; padding: 0; margin: 22px 0 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.road-hero nav li { counter-increment: n; flex: none; } .road-hero nav a { display: block; color: #fff; text-decoration: none; font-size: .85rem; border-top: 2px solid rgb(255 255 255 / .5); padding: 8px 12px 8px 0; min-height: 44px; }
.road-hero nav a::before { content: counter(n) ". "; font-weight: 700; } .road-hero nav a:hover { border-color: #fff; }
.road { max-width: 720px; margin: 0 auto; padding: 28px 16px 12px 16px; }
.station { position: relative; padding: 0 0 28px 48px; scroll-margin-top: 56px; }
.station::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
.station:last-child::before { display: none; }
.station .num { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; font: 700 1rem var(--serif); }
.station h2 { font-size: 1.5rem; padding-top: 3px; margin-bottom: 16px; }
.qa { margin-bottom: 20px; } .qa h3 { font-size: 1.1rem; font-style: italic; color: var(--green); margin-bottom: 6px; }

/* — Spis pytań — */
.index-hero { text-align: center; padding: 32px 16px 8px; max-width: 720px; margin: 0 auto; }
.index-hero .ph { margin: 0 auto 14px; } .index-hero .ph.big { width: 148px; height: 148px; }
.index-hero .badge { margin: 0 auto 10px; } .index-hero .chips { justify-content: center; margin-bottom: 22px; } .index-hero .line { margin-bottom: 12px; }
.index-hero .strip, .index-hero .open { margin-top: 8px; }
.index { max-width: 720px; margin: 0 auto; padding: 8px 16px 32px; }
.index-intro { text-align: center; font-size: .9rem; color: var(--muted); }
.index details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 8px; scroll-margin-top: 60px; }
.index details.data { background: var(--soft); }
.index summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 14px 44px 14px 14px; position: relative; font: 600 1.1rem/1.3 var(--serif); min-height: 56px; border-radius: 16px; }
.index summary::-webkit-details-marker { display: none; }
.index summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.index details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.index summary .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font: 700 .8rem var(--sans); color: var(--muted); }
.index details.data .n { background: var(--paper); } .index details[open] .n { background: var(--green); color: #fff; }
.index summary small { display: block; font: 600 .78rem var(--sans); color: var(--muted); margin-top: 3px; }
.index .body { padding: 0 16px 16px 54px; } .index .body > :last-child { margin-bottom: 0; } .index .data .body { padding-left: 16px; } .index .body .fact { border: 0; padding: 0; background: none; }
.slots, #terminy { scroll-margin-top: 80px; }

@container (min-width: 900px) {
  .pub h1 { font-size: 2.4rem; }
  .open { font-size: 2rem; }
  .strip b { font-size: 1.3rem; } .strip span { font-size: .8rem; } .strip a { padding: 16px 12px; }
  .f-rozmowa { display: grid; grid-template-columns: 340px minmax(0, 680px); justify-content: center; gap: 0 56px; align-items: start; }
  .f-rozmowa .hero { position: sticky; top: 56px; flex-direction: column; align-items: flex-start; padding-top: 56px; margin: 0; }
  .f-rozmowa .ph.big { width: 220px; height: 220px; font-size: 4rem; }
  .f-rozmowa .talk { padding-top: 56px; margin: 0; } .talk-intro { border: 0; text-align: left; padding-top: 0; }
  /* What follows the page (relations, others nearby, the footer) lines up with the page's own column. */
  .f-droga ~ * { --col: 932px; } .f-rozmowa ~ * { --col: 1076px; } .f-list ~ * { --col: 1160px; }
  .f-list { display: grid; grid-template-columns: minmax(0, 760px) 360px; justify-content: center; gap: 0 40px; align-items: start; padding-top: 48px; }
  .letter { padding: 56px 64px 64px 56px; max-width: none; margin: 0 0 48px; }
  .letter .clip { margin: -24px -28px 16px 24px; } .letter .clip .ph { width: 150px; height: 188px; }
  .letter .para { display: grid; grid-template-columns: 150px 1fr; gap: 0 28px; margin-top: 1.4em; } .letter .para > * { grid-column: 2; }
  .letter .para .note { grid-column: 1; grid-row: 1 / span 9; margin: .5em 0 0; text-align: right; }
  .letter .greet, .letter .bye, .letter .sign, .letter .chips, .letter .open { margin-left: 178px; }
  .attach { position: sticky; top: 56px; padding: 0; margin: 0; }
  .road-hero { padding: 56px 16px 28px; } .road-hero h1 { font-size: 3rem; } .road-hero > * { max-width: 932px; } .road-hero .line { font-size: 1.3rem; }
  .rh .ph.big { width: 200px; height: 250px; border-radius: 24px; } .rh .ph { width: 96px; height: 96px; }
  .road { max-width: 964px; padding-top: 48px; } .station { padding-left: 72px; } .station .num { width: 44px; height: 44px; font-size: 1.2rem; } .station::before { left: 21px; top: 48px; }
  .station h2 { font-size: 1.9rem; }
  /* dwie kolumny o stałych rolach: po lewej słowa, po prawej dane — kolejność czytania zostaje jasna */
  .station.both { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 48px; align-items: start; } .station.both h2 { grid-column: 1 / -1; }
  .station:not(.both) .st-text, .station:not(.both) .st-facts { max-width: 600px; }
  .index-hero { padding-top: 56px; } .index-hero .ph.big { width: 180px; height: 180px; }
  .index summary { font-size: 1.25rem; padding-top: 18px; padding-bottom: 18px; } .index .body { font-size: 1.05rem; }
}

.book { font-weight: 600; }
/* Her pages' bar: stays on top, the same items on every page of hers, the one being read marked. */
.top { position: sticky; top: 0; z-index: 6; display: flex; gap: 12px 20px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: .92rem; }
.top nav { display: flex; gap: 4px 18px; flex: 0 1 auto; margin-left: auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.top nav a { padding: 6px 0; border-bottom: 2px solid transparent; color: var(--ink); }
.top nav a[aria-current="page"] { border-bottom-color: currentColor; }
.top .brand { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.top .brand img { width: 30px; height: 30px; border-radius: 8px; }
.top .top-cta { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: #17181c; color: #fff; font-size: .8rem; font-weight: 700; }
.top .top-cta:hover { background: #dfff45; color: #0f1110; }
@media (max-width: 560px) { .top .brand span { display: none; } }
.others { max-width: calc(var(--col, 720px) + 32px); margin: 40px auto 24px; padding: 0 16px; }
.others h2 { font-size: 1.15rem; margin: 0 0 12px; }
.others ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.others li a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--paper); min-height: 44px; }
.others li a:hover { border-color: currentColor; }
.others span { font-size: .88rem; opacity: .75; }
.others p { margin: 12px 0 0; }
.top a { text-decoration: none; font-weight: 600; } .top .brand { font-family: var(--serif); color: var(--ink); }
/* A free time is a link to /rezerwacja/<slug>/<start>, the whole tile clickable. */
.times li { padding: 0; } .times a { display: block; padding: 9px 10px; text-decoration: none; color: var(--ink); border-radius: 10px; } .times a:hover { background: var(--soft); color: var(--green-d); }
/* Facts of templated pages (studia, relations, blog) in the same language as the cards above. */
.ph.logo { object-fit: contain; object-position: 50% 50%; background: #fff; border-radius: 16px; }
.pic { margin: 4px 0 1em; } .pic img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
/* "wizytowka" - a practice's main page as a practice's website: light, airy, sans, pastel cards. */
.f-wizytowka { --wz-bg: #f7f7f5; --wz-sage: #ededea; --wz-ink: #17181c; --wz-soft: #4a4d55; --wz-mint: #d5eeea; --wz-lime: #fde3d3; --wz-lav: #e6e6ec; --wz-sun: #f6ead8; --wz-stick: #fdba74;
  background: var(--wz-bg); color: var(--wz-ink); }
.f-wizytowka h1, .f-wizytowka h2, .f-wizytowka h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -.02em; color: var(--wz-ink); }
.f-wizytowka ~ .ctabar { display: none; }
body:has(.f-wizytowka) > .top { display: none; }
.wz-barwrap { position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--wz-bg) 92%, transparent); backdrop-filter: blur(10px); }
.f-wizytowka { --wz-in: 20px; }
.wz-bar { display: flex; align-items: center; gap: 12px 24px; max-width: 1120px; margin: 0 auto; padding: 14px var(--wz-in); }
.wz-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--wz-ink); text-decoration: none; flex: none; }
.wz-brand.site { font-family: var(--serif); font-weight: 500; } .wz-brand.site img { background: none; padding: 0; }
.wz-brand span { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-wizytowka .say { font: inherit; font-size: 1.05rem; font-style: normal; color: var(--wz-soft); }
.wz-place { font-size: .95rem; color: var(--wz-soft); margin: 0; }
.wz-brand img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; }
.wz-bar nav { display: flex; gap: 4px 22px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: 1; justify-content: center; min-width: 0; }
.wz-bar nav a { color: var(--wz-soft); font-size: .9rem; text-decoration: none; padding: 6px 0; } .wz-bar nav a:hover { color: var(--wz-ink); }
.wz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 12px; font-weight: 600; font-size: .95rem; text-decoration: none; flex: none; }
.wz-btn.dark { background: var(--wz-ink); color: #fff; } .wz-btn.dark:hover { background: #dfff45; color: #0f1110; }
.wz-btn.ghost { border: 1.5px solid var(--wz-ink); color: var(--wz-ink); } .wz-btn.ghost:hover { background: rgb(23 24 28 / .06); }
.wz-bar .wz-btn { min-height: 38px; padding: 7px 16px; font-size: .85rem; }
.wz-hero { display: grid; gap: 32px; align-items: center; max-width: 1120px; margin: 24px auto 0; padding: 40px var(--wz-in) 56px; background: var(--wz-sage); border-radius: 28px; }
.wz-hero h1 { font-size: 2.6rem; line-height: 1.05; margin: 0 0 16px; }
.wz-eyebrow { display: table; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wz-soft); background: rgb(255 255 255 / .7); border-radius: 999px; padding: 5px 12px; margin-bottom: 18px; }
.wz-lead { font-size: 1.1rem; line-height: 1.55; color: var(--wz-soft); max-width: 520px; margin: 0 0 24px; }
.wz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.wz-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.wz-facts b { display: block; font-weight: 600; font-size: 1.05rem; } .wz-facts span { font-size: .82rem; color: var(--wz-soft); }
.wz-hero-pic { position: relative; }
.wz-hero-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.wz-sticker { position: absolute; left: -14px; bottom: -22px; display: block; min-width: 190px; padding: 14px 18px; background: var(--wz-stick); color: var(--wz-ink); border-radius: 16px; text-decoration: none; box-shadow: 0 12px 30px rgb(23 24 28 / .14); }
.wz-hero-pic:not(:has(img)) .wz-sticker { position: static; }
.wz-sticker small { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.wz-sticker b { display: block; font-size: 1.05rem; font-weight: 600; margin-top: 4px; } .wz-sticker b::first-letter { text-transform: uppercase; }
.wz-sticker span { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.wz { max-width: 1120px; margin: 0 auto; padding: 0 var(--wz-in) 48px; }
.wz-sec { padding: 72px 0 0; scroll-margin-top: 88px; }
.wz-sec h2 { font-size: 2rem; line-height: 1.15; margin: 0 0 16px; } .wz-sec h3 { font-size: 1.15rem; margin: 24px 0 8px; }
.wz-sec p, .wz-sec li { color: var(--wz-soft); font-size: 1.05rem; line-height: 1.65; }
.wz-head { display: grid; gap: 4px 56px; align-items: start; margin: 0 0 28px; } .wz-head h2 { margin: 0; } .wz-head p { margin: 0; max-width: 560px; }
.wz-split { display: grid; gap: 32px; align-items: center; }
.wz-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; } .wz-pic { margin: 0; }
.wz-faq { margin-top: 20px; border-top: 1px solid rgb(23 24 28 / .1); }
.wz-faq details { border-bottom: 1px solid rgb(23 24 28 / .1); }
.wz-faq summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 14px 0; font-weight: 500; color: var(--wz-ink); }
.wz-faq summary::-webkit-details-marker { display: none; }
.wz-faq summary::before { content: "+"; flex: none; width: 18px; font-weight: 400; color: var(--wz-soft); } .wz-faq details[open] summary::before { content: "−"; }
.wz-faq details > div { padding: 0 0 14px 30px; }
.wz-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.wz-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; padding: 24px 22px 0; }
.wz-card.mint { background: var(--wz-mint); } .wz-card.lime { background: var(--wz-lime); } .wz-card.lav { background: var(--wz-lav); } .wz-card.sun { background: var(--wz-sun); }
.wz-card h3 { margin: 0 0 12px; font-size: 1.2rem; }
.wz-card .wz-price { font-size: 2.2rem; font-weight: 600; letter-spacing: -.03em; color: var(--wz-ink); margin: 0 0 14px; } .wz-price small { font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--wz-soft); }
.wz-checks { list-style: none; padding: 0; margin: 0 0 22px; } .wz-checks li { padding: 3px 0 3px 24px; position: relative; font-size: .92rem; }
.wz-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--wz-ink); font-weight: 600; }
.wz-card-cta { margin: auto -22px 0; padding: 14px; text-align: center; font-weight: 600; color: var(--wz-ink); text-decoration: none; background: rgb(23 24 28 / .07); } .wz-card-cta:hover { background: rgb(23 24 28 / .14); }
.wz-team { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.wz-pic.portrait img { aspect-ratio: 4 / 5; object-position: 50% 25%; max-height: 520px; }
.wz-sec .wz-kicker { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.wz-one h2 { font-size: 2.4rem; margin-bottom: 8px; }
.wz-team a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--wz-ink); }
.wz-team img, .wz-mono { display: block; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 20%; border-radius: 20px; background: var(--wz-sage); }
.wz-mono { display: grid; place-items: center; font: 500 3rem var(--sans); color: var(--wz-ink); }
.wz-team strong { font-weight: 600; font-size: 1.1rem; margin: 14px 0 2px; } .wz-team small { color: var(--wz-soft); font-size: .88rem; }
.wz-more { margin-top: 10px; font-size: .9rem; font-weight: 600; } .wz-team a:hover .wz-more { text-decoration: underline; }
.wz-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wz-cols { display: grid; gap: 8px 56px; } .wz-cols > div > :first-child { margin-top: 0; } .wz-cols h2 { margin: 0; }
.wz-cols .wz-where { margin-top: 24px; }
.wz-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.wz-slots { padding: 24px; background: #fff; border-radius: 22px; }
.wz-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.wz-day { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wz-sec .wz-date { display: grid; justify-items: center; gap: 0; padding: 12px 6px; margin: 0; background: var(--wz-sage); border-radius: 14px; text-align: center; line-height: 1.15; }
.wz-date span { font-size: .78rem; color: var(--wz-soft); text-transform: uppercase; letter-spacing: .05em; }
.wz-date span:last-child { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.wz-date b { font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; color: var(--wz-ink); margin: 2px 0; }
.wz-day ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.wz-day li { padding: 0; }
.wz-day a { display: grid; justify-items: center; padding: 10px 6px; border: 1.5px solid rgb(23 24 28 / .18); border-radius: 12px; color: var(--wz-ink); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.wz-day a small { font-weight: 400; font-size: .75rem; color: var(--wz-soft); }
.wz-day a:hover { background: var(--wz-ink); border-color: var(--wz-ink); color: #fff; } .wz-day a:hover small { color: rgb(255 255 255 / .8); }
.wz-sec .wz-calnote { margin: 18px 0 0; font-size: .9rem; }
.wz-sec .wz-empty { margin: 0; }
.wz-where { margin-top: 24px; }
.wz-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.wz-slots { padding: 28px; background: #fff; border-radius: 22px; }
/* An event: when / how often / where / kind as a list; without a photo, a date card opens the page. */
.wz-when { display: grid; gap: 14px; margin: 0; } .wz-when div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; }
.wz-when dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wz-soft); padding-top: 3px; }
.wz-when dd { margin: 0; font-weight: 500; }
.wz-status { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--wz-stick); color: var(--wz-ink); vertical-align: 2px; }
.wz-status.past { background: #e3e3de; color: var(--wz-soft); }
.wz-datecard { display: grid; gap: 8px; align-content: center; min-height: 280px; padding: 36px; background: var(--wz-stick); border-radius: 22px; box-shadow: 0 12px 30px rgb(23 24 28 / .12); }
.wz-datecard small { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.wz-datecard b { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.wz-datecard span { font-size: 1.05rem; } .wz-datecard .wz-by { font-size: .9rem; opacity: .8; margin-top: 8px; }
.wz-sticker .wz-rhythm { display: block; font-size: .9rem; font-weight: 500; letter-spacing: 0; }
.wz-where { padding: 24px; background: var(--wz-sage); border-radius: 22px; } .wz-where .addr { font-family: var(--sans); font-weight: 600; }
/* A studio without photos still opens like a gym's site: a dark board with the name, and the price list beside it. */
.wz-hero.bare { background: var(--wz-ink); color: #fff; }
.wz-hero.bare h1, .wz-hero.bare .wz-facts b { color: #fff; }
.wz-hero.bare .wz-lead, .wz-hero.bare .wz-facts span { color: rgb(255 255 255 / .72); }
.wz-hero.bare .wz-eyebrow { background: #dfff45; color: var(--wz-ink); }
.f-wizytowka .wz-hero.bare .wz-btn.ghost { background: transparent; border: 1.5px solid rgb(255 255 255 / .6); box-shadow: none; color: #fff; }
.f-wizytowka .wz-hero.bare .wz-btn.ghost:hover { background: rgb(255 255 255 / .1); transform: none; }
.wz-hero.bare .wz-hero-pic { display: grid; gap: 14px; }
.wz-hero.bare .wz-sticker { position: static; box-shadow: none; }
.wz-board { background: #fff; color: var(--wz-ink); border-radius: 20px; padding: 22px 24px 8px; box-shadow: 0 3px 0 #dfff45; }
.wz-board .wz-board-h { margin: 0 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wz-soft); }
.wz-board ul { list-style: none; padding: 0; margin: 0; }
.wz-board li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid rgb(23 24 28 / .1); }
.wz-board li:first-child { border-top: 0; }
.wz-board li span { font-weight: 500; line-height: 1.3; } .wz-board li small { display: block; font-size: .8rem; font-weight: 400; color: var(--wz-soft); }
.wz-board li b { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.wz-board-cta { display: block; margin: 4px -24px 0; padding: 14px 24px; border-top: 1px solid rgb(23 24 28 / .1); font-weight: 600; color: var(--wz-ink); text-decoration: none; }
.wz-board-cta:hover { background: rgb(23 24 28 / .05); }
/* What one trains here: a tile per line of "how to choose". */
.wz-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.wz-tile { border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.wz-tile.mint { background: var(--wz-mint); } .wz-tile.lime { background: var(--wz-lime); } .wz-tile.lav { background: var(--wz-lav); } .wz-tile.sun { background: var(--wz-sun); }
.wz-tile .ti { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: #fff; stroke-width: 1.75; margin-bottom: 8px; }
.wz-tile h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.wz-sec .wz-tile p { margin: 0; font-size: .95rem; line-height: 1.5; }
/* Packages and passes, by the prices. */
.wz-pack { margin-top: 18px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1.5px dashed rgb(23 24 28 / .25); }
.wz-pack h3 { margin: 0 0 6px; } .wz-pack h3 ~ h3 { margin-top: 18px; } .wz-sec .wz-pack p { margin: 0; }
@media (min-width: 760px) {
  .f-wizytowka { --wz-in: 56px; }
  .wz-hero.ev h1 { font-size: 2.8rem; }
  .wz-hero { grid-template-columns: 1fr 1fr; padding-top: 64px; padding-bottom: 72px; gap: 56px; } .wz-hero h1 { font-size: 3.6rem; }
  .wz-split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .wz-cols, .wz-head { grid-template-columns: 5fr 7fr; }
  .wz-one { grid-template-columns: 5fr 7fr; }
  .wz-sec { padding-top: 104px; } .wz-sec h2 { font-size: 2.4rem; }
}
@media (max-width: 759px) {
  .wz-bar nav { display: none; } .wz-bar { justify-content: space-between; }
  .wz-hero { margin: 12px 12px 0; border-radius: 24px; } .wz-sticker { left: 12px; }
  .f-wizytowka ~ .ctabar { display: block; }
}
.addr { font-style: normal; font: 600 1.1rem/1.45 var(--serif); margin: 0 0 8px; }
.people, .pages, .posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.people a { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); min-height: 44px; }
.people a:hover { border-color: currentColor; } .people span { min-width: 0; } .people strong { display: block; font-weight: 600; }
.people small { display: block; font-size: .85rem; color: var(--muted); }
.pages a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; min-height: 44px; }
.pages a span { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.posts li { padding: 8px 0; border-bottom: 1px solid var(--line); } .posts li:last-child, .pages li:last-child a { border-bottom: 0; }
.posts a { text-decoration: none; font-family: var(--serif); font-size: 1.1rem; } .posts time { display: block; font-size: .8rem; color: var(--muted); } .posts p { margin: 4px 0 0; font-size: .92rem; }
.times.who a small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); line-height: 1.2; }
.related { max-width: calc(var(--col, 720px) + 32px); margin: 32px auto 8px; padding: 0 16px; }
.preview-bar { margin: 0; padding: 10px 16px; text-align: center; font-weight: 700; background: var(--amber-bg); color: var(--amber); border-bottom: 2px solid var(--amber); }
.demo-note { font-size: .75rem; opacity: .6; max-width: var(--col, 720px); margin: 18px auto 0; padding: 0 16px; }
/* The site's footer (layout.ts siteFooter), the same as on every portal page: links, who runs it. */
footer.site { border-top: 0; background: #111513; padding: 48px 0 28px; margin-top: 32px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #c9cfc8; }
footer.site .wrap { max-width: calc(var(--col, 720px) + 32px); margin: 0 auto; padding: 0 16px; display: grid; gap: 2rem; }
footer.site h2 { font-family: inherit; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li + li { margin-top: .45rem; }
footer.site a { color: #c9cfc8; font-size: .86rem; text-decoration: none; }
footer.site a:hover { color: #dfff45; text-decoration: underline; }
footer.site .brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-family: var(--serif); font-size: 1.06rem; font-weight: 550; letter-spacing: -.025em; }
footer.site .brand img { width: 2.55rem; height: 2.55rem; border-radius: 10px; }
footer.site .brand span { color: #fff; font-size: 1.06rem; }
footer.site .footer-brand p { color: #c9cfc8; margin: 1rem 0 0; max-width: 38ch; font-size: .9rem; }
footer.site .footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 24rem; }
footer.site .footer-links h2 { margin: 0 0 .8rem; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
footer.site .footer-legal { display: grid; gap: .8rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); }
footer.site .footer-legal p { color: #9aa39a; font-size: .76rem; line-height: 1.55; margin: 0; }
@container (min-width: 900px) {
  footer.site .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); gap: 2.5rem 4rem; }
  footer.site .footer-legal { grid-column: 1 / -1; }
  footer.site .footer-legal { display: flex; justify-content: space-between; gap: 2rem; }
  footer.site .footer-legal p:first-child { max-width: 80ch; }
}

/* A practice's website: its footer and note stand on the same 1120px grid as the page, not the 720px column. */
.pub:has(> .f-wizytowka) { background: #f7f7f5; }
.f-wizytowka ~ footer.site { background: #111513; border-top: 0; margin-top: 72px; }
.f-wizytowka ~ footer.site .wrap, .f-wizytowka ~ .demo-note { max-width: 1120px; padding: 0 20px; }
@media (min-width: 760px) { .f-wizytowka ~ footer.site .wrap, .f-wizytowka ~ .demo-note { padding: 0 56px; } }

/* An event's "Termin i miejsce" and status badges. */
.ev-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ev-facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 2px; }
.ev-facts dd { margin: 0; }
.pages a .ev-status { display: inline-block; }
.ev-status { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #eff8c8; color: #111513; vertical-align: middle; }
.ev-status.ev-past { background: #ebebe7; color: var(--muted); }

/* contain: the grid takes its column's width, however many days it holds (they scroll), never widens the page. */
.wk, .bk, .bk-dlg { --wk-line: var(--line, var(--border, #e2e5d8)); --wk-muted: var(--muted, var(--text-muted, #5b6151)); --wk-green: #2f5d1f; }
.wk { contain: inline-size; }
.wk-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, 1fr); gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.wk-day { scroll-snap-align: start; min-width: 0; }
.wk-h { margin: 0 0 6px; text-align: center; line-height: 1.15; } .wk-h b { display: block; font-size: .82rem; text-transform: capitalize; } .wk-h span { font-size: .75rem; color: var(--wk-muted); }
.wk-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wk-day a { display: block; white-space: nowrap; padding: 6px 2px; border: 1px solid var(--wk-line); border-radius: 8px; background: #fff; text-align: center; font-weight: 600; font-size: .88rem; text-decoration: none; color: inherit; }
.wk-day a:hover, .wk-day a:focus-visible { border-color: currentColor; }
.wk-day a small { display: block; font-size: .7rem; font-weight: 500; color: var(--wk-muted); }
.wk-plus a { font-weight: 500; color: var(--wk-muted); }
.wk-dash { margin: 0; text-align: center; color: var(--wk-muted); }
.wk-more { margin: 6px 0 0; font-size: .75rem; color: var(--wk-muted); text-align: right; }
.wk-next { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: #2f5d1f; color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.wk-empty { margin: 0; font-size: .88rem; color: var(--wk-muted, #5b6151); }
.wk .ti, .bk .ti { width: .95em; height: .95em; vertical-align: -.12em; }
/* The widget: a price list, "Umów" opens a line's times under it. */
.bk { container-type: inline-size; --bk-soft: var(--soft, #f2f3e9); --bk-green: var(--green-d, #2f4f20); }
.bk .offers { list-style: none; padding: 0; margin: 0; }
.bk .offers > li { display: grid; grid-template-columns: 1fr auto 5.6em; align-items: center; gap: 4px 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--wk-line); font-size: inherit; }
.bk .offers.bare > li { grid-template-columns: 1fr auto; }
.bk .offers > li.fold { display: block; }
.bk .offers > li.fold > details > summary { display: grid; grid-template-columns: 1fr auto 5.6em; align-items: center; gap: 4px 12px; list-style: none; cursor: pointer; }
.bk .offers > li.fold > details > summary::-webkit-details-marker { display: none; }
.bk .offers summary .book { justify-self: end; white-space: nowrap; padding: 4px 14px; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; color: var(--bk-green); }
.bk .offers summary:hover .book, .bk .offers summary:focus-visible .book { background: var(--bk-soft); }
.bk .offers details[open] .b-on, .bk .offers details:not([open]) .b-off { display: none; }
.bk .offers > li.fold > details > .when { padding-top: 10px; } .bk .offers > li.fold > details[open] { padding-bottom: 4px; }
.bk .offers span small { display: block; color: var(--wk-muted); font-size: .8rem; } .bk .offers span .none { font-size: .82rem; }
.bk .offers summary > b, .bk .offers > li > b { font: 600 1.15rem Manrope, Inter, sans-serif; white-space: nowrap; }
/* The portal's own .offers rules (styles.ts) must not reach the grid inside a line. */
.bk .wk-day li { display: block; margin: 0; padding: 0; border: 0; font-size: inherit; }
.bk .wk-h b { font: inherit; font-weight: 700; font-size: .82rem; }
.bk .policy { font-size: .85rem; color: var(--wk-muted); margin: 10px 0 0; }
/* Each offer its own tile, so a line never runs into the text around it; the open one outlined in green. */
.bk .offers { display: grid; gap: 8px; }
.bk .offers > li, .bk .offers.bare > li { padding: 12px 14px; border: 1px solid var(--wk-line); border-radius: 12px; background: #fff; }
.bk .offers > li.fold:has(details[open]) { border-color: var(--bk-green); box-shadow: inset 0 0 0 1px var(--bk-green); }
.bk .offers > li.fold > details[open] { padding-bottom: 0; }
.bk .offers > li:not(.fold) { background: var(--bk-soft); }
/* The times run edge to edge of the tile: the next days scroll in from its border, not cut mid-tile. */
.bk .offers > li.fold > details > .when { margin: 12px -14px 0; padding: 12px 14px 0; border-top: 1px solid var(--wk-line); }
/* Narrow (a profile's side column, a list card, a phone): the title on its own line, full width; under it the
   length and mode, the price and "Umów" on one row. The span around them steps aside so they place on the grid. */
@container (max-width: 520px) {
  .bk .offers > li > span:first-child, .bk .offers > li.fold > details > summary > span:first-child { display: contents; }
  .bk .offers > li, .bk .offers.bare > li, .bk .offers > li.fold > details > summary { grid-template-columns: 1fr auto auto; gap: 2px 12px; }
  .bk .offers > li.fold { display: block; }
  .bk .offers strong { grid-column: 1 / -1; font-size: 1rem; line-height: 1.3; }
  .bk .offers small { align-self: center; white-space: nowrap; }
  .bk .offers > li.fold > details > summary, .bk .offers > li { column-gap: 8px; }
  .bk .offers summary > b, .bk .offers > li > b { font-size: 1.05rem; }
  .bk .offers summary .book { padding: 4px 12px; }
  /* Whole days only: four columns fill the width, the rest scroll in. */
  .bk .wk-days { grid-auto-columns: calc((100% - 18px) / 4); }
  .bk .offers .none { grid-column: 1 / -1; order: 9; }
}
/* The booking form over the page (the script's), full screen on a phone. */
.bk-dlg { width: min(34rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px 22px; border: 0; border-radius: 16px; background: #fffefa; color: #344125; box-shadow: 0 24px 60px rgb(0 0 0 / .25); font: 400 .95rem/1.5 Inter, system-ui, sans-serif; }
.bk-dlg::backdrop { background: rgb(20 26 12 / .45); }
.bk-dlg.map-dlg { width: min(56rem, calc(100vw - 32px)); }
.map-dlg iframe { display: block; width: 100%; height: min(70vh, 32rem); border: 0; border-radius: 12px; }
.bk-dlg h2 { margin: 0 40px 12px 0; font: 600 1.35rem/1.25 Manrope, Inter, sans-serif; }
.bk-dlg .panel { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.bk-dlg .fact h4 { margin: 0 0 4px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-muted); }
.bk-dlg .muted { color: var(--wk-muted); }
.bk-dlg .field { margin: 0 0 12px; } .bk-dlg .field > label:first-child:not(:has(input)) { display: block; margin-bottom: 4px; font-weight: 600; font-size: .88rem; }
.bk-dlg input:not([type="checkbox"]), .bk-dlg textarea { box-sizing: border-box; width: 100%; padding: 9px 11px; border: 1px solid var(--wk-line); border-radius: 10px; background: #fff; font: inherit; color: inherit; }
.bk-dlg textarea { min-height: 5rem; }
.bk-dlg input:focus, .bk-dlg textarea:focus { outline: 2px solid var(--wk-green); outline-offset: 1px; }
.bk-dlg input[type="checkbox"] { margin-right: 6px; vertical-align: -2px; accent-color: var(--wk-green); }
.bk-dlg .btn, .bk-dlg button[type="submit"] { display: inline-block; width: 100%; min-height: 2.9rem; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--wk-green); color: #fff; font: 650 .95rem/1.2 inherit; text-decoration: none; text-align: center; cursor: pointer; }
.bk-dlg .btn.secondary { background: #fff; color: var(--wk-green); border: 1px solid var(--wk-line); }
.bk-dlg button:disabled { opacity: .55; cursor: wait; }
.bk-dlg .cf-turnstile { min-height: 65px; margin: 0 0 12px; }
.bk-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #f7e6e6; color: #8a2f2f; }
.bk-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f3e9; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .bk-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }


.creds { list-style: none; padding: 0; margin: 0; }
.creds li { padding: 6px 0; }
.creds strong, .creds em { display: flex; gap: 6px; align-items: flex-start; }
.creds strong .ti { color: var(--muted, var(--text-muted, #5b6151)); margin-top: .15em; flex: none; }
.creds span { display: block; font-size: .9rem; color: var(--muted, var(--text-muted, #5b6151)); padding-left: calc(1em + 6px); }
.creds em { font-style: normal; font-size: .8rem; font-weight: 700; padding-left: calc(1em + 6px); } .creds em .ti { margin-top: .1em; }
.creds .verified { color: var(--green, #2f5d1f); } .creds .pending { color: var(--amber, #8a5a00); } .creds .declared { color: var(--muted, var(--text-muted, #5b6151)); font-weight: 400; }


/* Headings: Archivo Black Expanded - creem's loud, wide display voice (its own Gasoek One has no Polish letters).
   Archivo is variable in weight and width (SIL OFL), same-origin files in public/fonts, split latin / latin-ext. */
@font-face { font-family: "Archivo Display"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/fonts/archivo-latin-ext-wdth.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Archivo Display"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/fonts/archivo-latin-wdth.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root, .pal-stal {
  /* stal, the site's own since 2026-10-05: the gym's steel-grey opening (the photograph in its own greys),
     a sprint red to book, the brand's lime to find, near-black grounds. */
  --c-bg: #f4f4f2; --c-card-alt: #fafaf9; --c-line: #d2d3d0; --c-ink: #121314; --c-muted: #4f5256;
  --c-peach: #ff6b4a; --c-peach-d: #b8341a;
  --c-lav: oklch(0.86 0.012 250); --c-lav-soft: oklch(0.94 0.006 250); --c-lav-d: oklch(0.55 0.02 250); --c-violet: oklch(0.38 0.03 250);
  --c-lime: #dfff45; --c-lime-d: #6b8a00;
  --display: "Archivo Display", Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  /* The opening's ground and its type, and the type on a "do" and a "find" fill: the palette's own unless it says
     otherwise (a dark opening wants white type; a black "find" button white letters). */
  --c-open: var(--c-lav); --c-open-ink: var(--c-ink); --c-do-ink: var(--c-ink); --c-find-ink: var(--c-ink);
  --c-dark: #17181a; --c-darker: #0e0f10;
  /* The portal's tokens (styles.ts). */
  --bg: var(--c-bg); --surface: #fff; --surface-solid: #fff; --surface-alt: var(--c-card-alt);
  --border: var(--c-line); --border-strong: var(--c-line);
  --text: var(--c-ink); --text-muted: var(--c-muted);
  --accent: var(--c-ink); --accent-strong: var(--c-ink); --accent-soft: var(--c-lav-soft);
  --focus: var(--c-violet); --navy: var(--c-dark);
  --radius-sm: 8px; --radius: 16px; --radius-lg: 16px;
  --shadow-sm: 0 2px 0 var(--c-line); --shadow: 0 2px 0 var(--c-line);
  /* The authored pages' tokens (authored-css.ts). */
  --paper: #fff; --soft: var(--c-card-alt); --line: var(--c-line); --ink: var(--c-ink); --muted: var(--c-muted); --dark: var(--c-dark);
}
/* Pages from templates (authored-css.ts, from ot-portal with its own pastels) in the brand's colours, from the palette's
   tokens only, and sparingly: the opening as on the home page, tiles and price cards white with the line's edge (as the
   catalogue's cards), the colour left to the "do" buttons and the small date sticker (lime = find). */
:root { --green: var(--c-ink); --green-d: var(--c-ink); --amber: var(--c-peach-d); --amber-bg: var(--c-lav-soft); }
.f-wizytowka { --wz-bg: var(--c-bg); --wz-sage: var(--c-open); --wz-ink: var(--c-ink); --wz-soft: var(--c-muted);
  --wz-mint: #fff; --wz-lime: #fff; --wz-lav: #fff; --wz-sun: #fff; --wz-stick: var(--c-lime); }
.wz-tile, .wz-card { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: 0 2px 0 var(--c-line); }
.wz-sticker { color: var(--c-find-ink); border: 1px solid var(--c-lime-d); box-shadow: 0 3px 0 var(--c-lime-d); }
/* Palettes (?colors=, index.ts): the same site, other colours - only the --c-* tokens change, in the same roles:
   lav = the opening, the soft bands, the first tile; peach = do (book, join); lime = find (search, browse). */
/* Two more after the 2026-10-05 audit of training sites (Strava, Peloton, Nike Training Club, Gymshark, Whoop, Les Mills,
   Orangetheory, F45, ClassPass, Zdrofit, CityFit, Trainerize, Fitbod, Freeletics, MyFitnessPal): none of them is pastel;
   they are black and white with one hot accent, or a warm ground with orange. */
/* neon, after Les Mills, Nike and Fitbod: a black opening, black to book, the brand's lime - the one hot colour - to find. */
:root[data-colors="neon"], .pal-neon {
  --c-bg: #f4f4f2; --c-card-alt: #fafaf9; --c-line: #d2d3d0; --c-ink: #121314; --c-muted: #4f5256;
  --c-open: #0d0e0f; --c-open-ink: #ffffff;
  --c-peach: #121314; --c-peach-d: #000000; --c-do-ink: #ffffff;
  --c-lav: #e6e7e3; --c-lav-soft: #eeeeeb; --c-lav-d: #8a8c88; --c-violet: #2b2d2f;
  --c-lime: #dfff45; --c-lime-d: #6b8a00; --c-find-ink: #121314;
  --c-dark: #0d0e0f; --c-darker: #060707;
}
/* sprint, after Strava, Orangetheory and Zdrofit: a warm sand opening, orange to book, black - Nike's buttons - to find. */
:root[data-colors="sprint"], .pal-sprint {
  --c-bg: #faf8f4; --c-card-alt: #fdfcf9; --c-line: #ddd5c6; --c-ink: #141210; --c-muted: #5b554c;
  --c-open: #f1e7d4; --c-open-ink: #141210;
  --c-peach: #fc5200; --c-peach-d: #a83700; --c-do-ink: #141210;
  --c-lav: #efe4cf; --c-lav-soft: #f6efe2; --c-lav-d: #b59e74; --c-violet: #6b4b1f;
  --c-lime: #141210; --c-lime-d: #000000; --c-find-ink: #ffffff;
  --c-on-dark: var(--c-peach); --c-on-dark-d: var(--c-peach-d); --c-on-dark-ink: var(--c-do-ink);
  --c-dark: #141210; --c-darker: #0b0a09;
}
/* The palette picker (index.ts): a square per palette, bottom right, over everything. Each square carries its own
   palette's tokens (.pal-* above) and shows its opening, its "do" and its "find". */
.pal { position: fixed; right: 12px; bottom: 12px; z-index: 2147483647; display: flex; gap: 6px; }
.pal a { display: block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35);
  background: linear-gradient(135deg, var(--c-lav) 0 40%, var(--c-peach) 40% 70%, var(--c-lime) 70%); opacity: .55; transition: opacity .15s, transform .15s; }
.pal a:hover, .pal a:focus-visible, .pal a[aria-current] { opacity: 1; }
.pal a[aria-current] { transform: translateY(-2px); }
body { background: var(--c-bg); color: var(--c-ink); }
a { color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 2px; }

/* Headings: Archivo at its heaviest and widest, tight; smaller headings in Manrope, the brand's face. */
h1, h2 { font-family: var(--display); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; line-height: 1.04; color: var(--c-ink); }
h3, h4 { font-family: Manrope, Inter, ui-sans-serif, sans-serif; font-weight: 800; letter-spacing: -0.015em; }

/* Buttons: a fill with a darker edge and a 2px step under it; pressed, the step goes. */
.btn, .wz-btn.dark, .bk .offers summary .book, .bk-dlg button[type="submit"], .bk-dlg .btn {
  background: var(--c-peach); color: var(--c-do-ink); border: 1px solid var(--c-peach-d); border-radius: 12px;
  box-shadow: 0 2px 0 var(--c-peach-d); font-family: var(--sans); font-weight: 650; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .wz-btn.dark:hover, .bk .offers summary:hover .book {
  background: var(--c-peach); color: var(--c-do-ink); transform: translateY(1px); box-shadow: 0 1px 0 var(--c-peach-d);
}
.btn.secondary, .wz-btn.ghost, .bk-dlg .btn.secondary {
  background: #fff; color: var(--c-ink); border: 1px solid var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d);
}
.btn.secondary:hover, .wz-btn.ghost:hover { background: #fff; transform: translateY(1px); box-shadow: 0 1px 0 var(--c-lav-d); }
/* find: the lime. */
.btn.find, .header-cta, .top-cta, .hero-go, .featured-grid + .section-action .btn, .home-cta .btn, .filters .filter-bar .btn {
  background: var(--c-lime); color: var(--c-find-ink); border: 1px solid var(--c-lime-d); box-shadow: 0 2px 0 var(--c-lime-d); border-radius: 12px;
}
.btn.find:hover, .header-cta:hover, .top-cta:hover, .hero-go:hover, .hero-go:focus-visible, .featured-grid + .section-action .btn:hover,
.home-cta .btn:hover, .filters .filter-bar .btn:hover {
  background: var(--c-lime); color: var(--c-find-ink); border-color: var(--c-lime-d); transform: translateY(1px); box-shadow: 0 1px 0 var(--c-lime-d);
}
.header-cta, .header-login { border-radius: 10px; }
.header-login { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: 0 2px 0 var(--c-line); }
.header-login:hover { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); }

/* Header: white, a 2px line under it. */
header.site, header.top, .wz-barwrap { background: #fff; border-bottom: 0; box-shadow: 0 2px 0 rgb(0 0 0 / .1); backdrop-filter: none; }
nav.site a, header.top nav a { color: var(--c-ink); font-weight: 550; }
nav.site a[aria-current="page"], nav.site a:hover { background: var(--c-lav-soft); color: var(--c-ink); }

/* Cards and panels: white, the line around, a 2px step of it under. */
.card, .panel, .fact, .info-card, .resource-card, .data-panel, .contact-panel, .principles-panel,
.filters, .wz-slots, .strip, .roadmap, .steps-section {
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 2px 0 var(--c-line);
}
.card:hover { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); }
.card h3 a { text-decoration-color: color-mix(in oklch, var(--c-ink) 35%, transparent); text-underline-offset: 3px; }
.tag, .chips li { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; color: var(--c-ink); }
.tag.verified { background: oklch(0.94 0.05 150); border-color: oklch(0.6 0.14 150); color: oklch(0.35 0.1 150); }
.tag.demo { background: oklch(0.95 0.05 80); border-color: oklch(0.75 0.1 75); color: oklch(0.4 0.08 60); }
input, select, textarea { border-radius: 8px; border-color: var(--c-line); }
input:focus, select:focus, textarea:focus { border-color: var(--c-lav-d); box-shadow: 0 0 0 3px var(--c-lav-soft); }
/* A trainer's face on a card, framed like a button: lavender mount, its darker edge, a step. No picture: a soft tile. */
.card-head .avatar { padding: 4px; border-radius: 14px; background: var(--c-lav); border: 1px solid var(--c-lav-d); box-shadow: 0 3px 0 var(--c-lav-d); object-fit: cover; }
.card-head span.avatar { background: var(--c-lav-soft); border-style: dashed; box-shadow: none; }

/* The opening: lavender, the photograph as its light and shade (luminosity) fading in to the right, grain on top.
   Ink on it, not white. The lime tape under the promise stays - creem's white tape in the brand's colour. */
.home-hero, .directory-page .page-head {
  color: var(--c-open-ink);
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--c-open) 96%, transparent) 0%, color-mix(in oklch, var(--c-open) 84%, transparent) 46%, color-mix(in oklch, var(--c-open) 40%, transparent) 100%),
    url("/hero-unsplash.jpg") center 42% / cover no-repeat,
    var(--c-open);
  background-blend-mode: normal, luminosity, normal;
}
.directory-page .page-head {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--c-open) 94%, transparent) 0%, color-mix(in oklch, var(--c-open) 82%, transparent) 100%),
    url("/hero-unsplash.jpg") center 42% / cover no-repeat,
    var(--c-open);
  background-blend-mode: normal, luminosity, normal;
}
.home-hero::after { opacity: .16; }
.home-hero h1, .directory-page .page-head h1, .home-hero .lead, .directory-page .page-head .lead,
.directory-page .page-head :is(p, dt, dd, .meta, .meta a) { color: var(--c-open-ink); }
.home-hero h1 em { color: var(--c-find-ink); background: var(--c-lime); box-shadow: 0 3px 0 var(--c-lime-d); border-radius: 4px; }
.home-hero .lead { font-weight: 500; }
.home-hero .eyebrow, .eyebrow { display: inline-flex; padding: .35rem .75rem; border: 1px solid var(--c-lav-d); border-radius: 999px; background: #fff;
  color: var(--c-ink); box-shadow: 0 2px 0 var(--c-lav-d); font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.home-hero .eyebrow > span, .eyebrow > span { display: inline-block; background: var(--c-peach-d); }
.hero-search { border: 1px solid var(--c-lav-d); border-radius: 16px; box-shadow: 0 4px 0 var(--c-lav-d); }
.hero-search-fields input { border-radius: 12px 0 0 12px; }
.hero-go { border-radius: 10px; }
.hero-chips a { background: #fff; border: 1px solid var(--c-lav-d); color: var(--c-ink); box-shadow: 0 2px 0 var(--c-lav-d); border-radius: 10px; }
.hero-chips a:hover, .hero-chips a:focus-visible { background: var(--c-lime); border-color: var(--c-lime-d); box-shadow: 0 2px 0 var(--c-lime-d); color: var(--c-find-ink); }
/* The next event in the opening: a white card like creem's dashboard, a step of its edge. */
.hero-promo { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 4px 0 var(--c-line); backdrop-filter: none; }
.hero-promo h2, .hero-promo p { color: var(--c-ink); }
.hero-promo .promo-top { color: var(--c-muted); }
.hero-promo .promo-band { display: inline-block; background: var(--c-lav-soft); border: 1px solid var(--c-lav-d); color: var(--c-ink); }
.home-hero .hero-promo .btn { background: var(--c-peach); border-color: var(--c-peach-d); color: var(--c-do-ink); box-shadow: 0 2px 0 var(--c-peach-d); }
.home-hero .hero-promo .btn:hover { background: var(--c-peach); border-color: var(--c-peach-d); }
.hero-stats { border-top-color: color-mix(in oklch, var(--c-open-ink) 18%, transparent); }
.hero-stats dt { color: var(--c-open-ink); }
.hero-stats dd, .hero-stats div:first-child dd { color: var(--c-open-ink); }
.hero-credit, .hero-credit a { color: color-mix(in oklch, var(--c-open-ink) 70%, transparent); }

/* The home page's rhythm, after creem: sections alternate grounds instead of all sitting on the one beige.
   "Meet the trainers" on a full-width band of the lavender's soft tint. */
.home-section.band {
  margin-inline: calc(50% - 50vw); width: 100vw; background: var(--c-lav-soft);
  padding-inline: max(clamp(1rem, 3vw, 2.5rem), calc((100vw - var(--maxw)) / 2 + clamp(1rem, 3vw, 2.5rem)));
  padding-block: clamp(3rem, 6vw, 4.75rem); border-block: 1px solid var(--c-line); }
.section-head .kicker { display: inline-block; padding: .25rem .6rem; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: var(--c-ink); box-shadow: 0 2px 0 var(--c-line); }
.link-more { color: var(--c-ink); }
/* "What you'll find": coloured tiles, the palette's three fills in turn, each on a step of its darker edge;
   an icon on a white token. */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.offer-grid article { padding: 1.75rem 1.5rem; border: 1px solid; border-radius: 16px; color: var(--c-ink); }
.offer-grid article:nth-child(3n+1) { background: var(--c-lav); border-color: var(--c-lav-d); box-shadow: 0 3px 0 var(--c-lav-d); }
.offer-grid article:nth-child(3n+2) { color: var(--c-do-ink); background: var(--c-peach); border-color: var(--c-peach-d); box-shadow: 0 3px 0 var(--c-peach-d); }
.offer-grid article:nth-child(3n+3) { color: var(--c-find-ink); background: var(--c-lime); border-color: var(--c-lime-d); box-shadow: 0 3px 0 var(--c-lime-d); }
.offer-grid h3 { margin: 0 0 .6rem; font-size: 1.2rem; color: inherit; }
.offer-grid p { margin: 0; color: inherit; font-size: .92rem; line-height: 1.6; }
.ti { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; stroke-width: 1.75; }
.tile-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 12px; background: #fff; border: 1px solid var(--c-ink); box-shadow: 0 2px 0 var(--c-ink); }
.tile-icon .ti { width: 1.5rem; height: 1.5rem; color: var(--c-ink); }

/* An exercise or a programme: the still framed, its badge as a white token. */
.ex-card, .plan-card { overflow: hidden; }
.ex-card :is(img, video, .poster) { border-bottom: 1px solid var(--c-line); }

/* "Are you a trainer?": a peach tile with its edge and step - creem's coloured band. */
.join-cta { background: var(--c-peach); border: 1px solid var(--c-peach-d); border-radius: 16px; box-shadow: 0 4px 0 var(--c-peach-d); color: var(--c-do-ink); }
.join-cta h2, .join-cta p { color: var(--c-do-ink); }
.join-cta .btn { background: #fff; color: var(--c-ink); border: 1px solid var(--c-ink); box-shadow: 0 2px 0 var(--c-ink); }
.join-cta .btn:hover { background: #fff; box-shadow: 0 1px 0 var(--c-ink); }

/* The can (home page, public/puszka.js): WebGL beside a few words; one column on a phone. */
.can-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.can-section .kicker { margin: 0 0 .5rem; } .can-section h2 { margin: 0 0 .75rem; }
figure.can { margin: 0 auto; width: 100%; max-width: 24rem; aspect-ratio: 3 / 4; }
figure.can canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
/* Behind the can only: a two-colour halftone, as a screen print seen close up - lime dots dense in the middle and
   thinning out, black ones offset half a cell, the can's own colours; CSS, no image. */
figure.can { position: relative; isolation: isolate; }
figure.can::before { content: ""; position: absolute; inset: -8% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--c-lime) 0 42%, transparent 46%) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 66%); mask-image: radial-gradient(circle at 50% 50%, #000 0 28%, transparent 66%); }
figure.can::after { content: ""; position: absolute; inset: -8% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--c-ink) 0 20%, transparent 24%) 7px 7px / 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 22%, transparent 60%); mask-image: radial-gradient(circle at 50% 50%, #000 0 22%, transparent 60%); }
.can-points { margin: 1rem 0 1.25rem; padding: 0; list-style: none; display: grid; gap: .7rem; }
.can-points li { position: relative; padding-left: 1.6rem; color: var(--c-muted); }
.can-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: .7rem; height: .7rem; border-radius: 3px; background: var(--c-lime); border: 1px solid var(--c-lime-d); }
.can-points strong { color: var(--c-ink); }
.can-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 .75rem; }
@media (max-width: 48rem) { .can-section { grid-template-columns: 1fr; } figure.can { max-width: 18rem; } }
/* How it works: the steps as coloured tiles, the palette's fills in turn; a step's number on a white token. */
.steps { gap: 14px; background: none; }
.steps li { border: 1px solid; border-radius: 16px; padding: 1.5rem 1.4rem; color: var(--c-ink); }
.steps li:nth-child(3n+1) { background: var(--c-lav); border-color: var(--c-lav-d); box-shadow: 0 3px 0 var(--c-lav-d); }
.steps li:nth-child(3n+2) { color: var(--c-do-ink); background: var(--c-peach); border-color: var(--c-peach-d); box-shadow: 0 3px 0 var(--c-peach-d); }
.steps li:nth-child(3n+3) { color: var(--c-find-ink); background: var(--c-lime); border-color: var(--c-lime-d); box-shadow: 0 3px 0 var(--c-lime-d); }
.steps li > span { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #fff; color: var(--c-ink);
  border: 1px solid color-mix(in oklch, var(--c-ink) 30%, transparent); box-shadow: 0 2px 0 color-mix(in oklch, var(--c-ink) 30%, transparent); font-size: .95rem; }
.steps :is(h3, p) { color: inherit; }
.topic-links a { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; box-shadow: 0 2px 0 var(--c-line); color: var(--c-ink); }
.topic-links a:hover { background: var(--c-lav-soft); border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); color: var(--c-ink); }

/* Dark sections stay dark, in creem's graphite, on a step of their own. */
.emergency-panel, .home-cta { background: var(--c-dark); border: 1px solid color-mix(in oklch, var(--c-dark) 80%, #000); box-shadow: 0 4px 0 color-mix(in oklch, var(--c-dark) 80%, #000); }
.home-cta > div:last-child > a:last-child { color: oklch(1 0 0 / .78); }
/* On the dark band the call takes "find" - unless the palette's "find" is itself dark (sprint): then "do". */
.home-cta .btn, .home-cta .btn:hover { background: var(--c-on-dark, var(--c-lime)); border-color: var(--c-on-dark-d, var(--c-lime-d)); box-shadow: 0 2px 0 var(--c-on-dark-d, var(--c-lime-d)); color: var(--c-on-dark-ink, var(--c-find-ink)); }

/* Footer: graphite, white type. */
footer.site { background: var(--c-darker); color: oklch(1 0 0 / .72); }
footer.site h2, footer.site .brand span { color: #fff; }
footer.site a { color: oklch(1 0 0 / .78); }
footer.site a:hover { color: #fff; }
.footer-legal { border-top-color: oklch(1 0 0 / .14); }
.footer-brand p { color: oklch(1 0 0 / .62); }
.footer-legal p { color: oklch(1 0 0 / .55); }

/* The catalogue's head: facts as a quiet row of white pills. */
.directory-page .page-head .facts-strip > div { border-left-color: color-mix(in oklch, var(--c-open-ink) 18%, transparent); }

/* Events: a tear-off calendar page - the month on a peach band, the day large. */
.ev-filters a, .ev-filters span { background: #fff; border-color: var(--c-line); box-shadow: 0 2px 0 var(--c-line); border-radius: 10px; }
.ev-filters span { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.ev-tiles a { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 2px 0 var(--c-line); }
.ev-tiles a:hover { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); }
.ev-date { padding: 0 0 .5rem; gap: 0; overflow: hidden; background: #fff; border: 1px solid var(--c-peach-d); border-radius: 12px; box-shadow: 0 3px 0 var(--c-peach-d); }
.ev-date span { order: -1; justify-self: stretch; padding: .3rem .2rem; color: var(--c-do-ink); background: var(--c-peach); border-bottom: 1px solid var(--c-peach-d);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ev-date b { padding: .45rem 0 .1rem; font: 800 2.1rem/1 var(--display); }
.ev-status { background: var(--c-lav-soft); color: var(--c-ink); border: 1px solid var(--c-lav-d); }

/* The booking widget in the same language. */
.bk .offers > li, .bk .offers.bare > li { border-radius: 12px; box-shadow: 0 2px 0 var(--c-line); }
.bk .offers > li.fold:has(details[open]) { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); }
.wk-day a { border-color: var(--c-line); border-radius: 8px; box-shadow: 0 2px 0 var(--c-line); }
.wk-day a:hover, .wk-day a:focus-visible { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); background: var(--c-lav-soft); }
.bk-dlg { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: 0 4px 0 var(--c-line), 0 30px 60px rgb(0 0 0 / .2); }
.bk-dlg .fact { box-shadow: none; background: var(--c-card-alt); }

/* What ties the site together (community.ts): a trainer's face beside every video and programme ("Poleca", "Prowadzi"),
   and under a page the rest of that person's work. A face: their photograph, or initials on the soft tint. */
.face { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--c-lav-soft); border: 1px solid var(--c-lav-d); color: var(--c-ink); font: 800 .78rem/1 var(--sans); letter-spacing: .02em; }
.work-head .face { width: 48px; height: 48px; font-size: .95rem; }
.byline { display: inline-flex; align-items: center; gap: .6rem; margin: .25rem 0 0; padding: .3rem .8rem .3rem .3rem; border: 1px solid var(--c-line);
  border-radius: 999px; background: #fff; color: var(--c-ink); text-decoration: none; box-shadow: 0 2px 0 var(--c-line); font-weight: 650; font-size: .9rem; line-height: 1.2; }
.byline:hover { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); }
.byline small { display: block; color: var(--c-muted); font-size: .72rem; font-weight: 500; }
.card .byline { align-self: flex-start; }
/* Under a person's heading their name on every card would only repeat it. */
.work .byline { display: none; }
.work { box-sizing: border-box; width: min(1120px, calc(100% - 2rem)); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.25rem, 3vw, 2rem); background: var(--c-lav-soft); border: 1px solid var(--c-line);
  border-radius: 16px; box-shadow: 0 2px 0 var(--c-line); }
.work-head { display: flex; align-items: center; gap: .9rem; }
.work + .work { margin-top: 1.25rem; }
.f-wizytowka .work:last-of-type, article .work:last-child { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.work-head h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.work-head h2 a { color: var(--c-ink); text-decoration: none; }
.work-head .kicker { margin: 0 0 .2rem; }
.work h3 { margin: 1.5rem 0 .25rem; font: 800 1rem/1.3 Manrope, Inter, sans-serif; }
/* The same cards on an authored page (its stylesheet has no catalogue cards of its own). */
.work .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); list-style: none; padding: 0; margin: .75rem 0 0; }
.work .grid > li { margin: 0; }
.work .card { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem; }
.work .card h3 { margin: 0; font-size: 1.05rem; } .work .card h3 a { color: var(--c-ink); text-decoration: none; }
.work .card .meta { margin: 0; color: var(--c-muted); font-size: .88rem; }
.work .tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; } .work .tag { padding: .15rem .55rem; font-size: .78rem; }
.work .ex-card { padding: 0; overflow: hidden; } .work .ex-card > :not(.ex-thumb) { margin-inline: 1.1rem; } .work .ex-card > :last-child { margin-bottom: 1.1rem; }
.work .ex-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--c-dark); }
.work .ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
.work .ex-tag { position: absolute; top: .6rem; left: .6rem; padding: .25rem .6rem; border-radius: 999px; background: rgb(0 0 0 / .72); color: #fff; font-size: .64rem; font-weight: 700; }
.work .ex-play { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-lime); color: var(--c-find-ink); }
.work .ex-license { color: var(--c-muted); font-size: .76rem; margin: 0; }
.work .kicker { color: var(--c-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.work .plan-row { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-top: .6rem; border-top: 1px solid var(--c-line); font-size: .86rem; }
/* The home page's people: everyone who recommends a video or runs a programme, with what they do. */
.people { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); list-style: none; padding: 0; margin: 2rem 0 0; }
.people li { margin: 0; }
.people a { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .9rem 1rem; background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  box-shadow: 0 2px 0 var(--c-line); color: var(--c-ink); text-decoration: none; }
.people a:hover { border-color: var(--c-lav-d); box-shadow: 0 2px 0 var(--c-lav-d); }
.people .face { width: 52px; height: 52px; font-size: 1rem; }
.people strong { display: block; font-size: .98rem; line-height: 1.25; }
.people small { display: block; margin-top: .15rem; color: var(--c-muted); font-size: .8rem; }

/* "Zobacz wolne terminy": stuck to the bottom of a page with a booking widget (her profile, her own page), the "do" button. */
.ctabar { position: sticky; bottom: 0; z-index: 30; display: flex; justify-content: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--c-bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--c-line); }
.ctabar .cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: min(100%, 320px); padding: 12px 26px;
  background: var(--c-peach); color: var(--c-do-ink); border: 1px solid var(--c-peach-d); border-radius: 12px; box-shadow: 0 2px 0 var(--c-peach-d);
  font-weight: 700; text-decoration: none; }
.ctabar .cta:hover { background: var(--c-peach); transform: translateY(1px); box-shadow: 0 1px 0 var(--c-peach-d); }
.profile-page ~ .ctabar, main .ctabar { margin-inline: calc(50% - 50vw); }
#terminy { scroll-margin-top: 90px; }

/* A numbered list - her numbered answer lines, "Jak się umówić": one component, the step's number on a white token
   with the line's edge, quiet. Not .steps: that is the home page's tiles. */
.nums { list-style: none; counter-reset: n; padding: 0; margin: 0 0 .8em; display: grid; gap: 12px; }
.nums li { counter-increment: n; position: relative; padding: 6px 0 4px 50px; min-height: 36px; }
.nums li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font: 700 .95rem Manrope, Inter, sans-serif; background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: 0 2px 0 var(--c-line); }
/* The brand's headings on pages from templates too, as theme.ts sets them on the site: Archivo Display for h1/h2,
   Manrope for the smaller ones. The renderer came from ot-portal with Inter headings (.f-wizytowka set them 500). */
@font-face { font-family: Manrope; font-display: swap; font-weight: 700 800; src: url("/fonts/manrope-latin-variable.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; font-display: swap; font-weight: 700 800; src: url("/fonts/manrope-latin-ext-variable.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
h1, h2, .f-wizytowka h1, .f-wizytowka h2 { font-family: var(--display); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
h3, h4, .f-wizytowka h3, .ask h2 { font-family: Manrope, Inter, ui-sans-serif, sans-serif; font-weight: 800; font-stretch: 100%; letter-spacing: -0.015em; }