:where(.ti) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:root {
  color-scheme: light;
  /* The lime is a ground, never text on white. */
  --highlight: #dfff45;
  --danger: #8a2f2f;
  --maxw: 76rem;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip;
  scroll-padding-top: 5.5rem; }
body {
  min-height: 100vh;
  margin: 0;
  font: 400 1rem/1.7 var(--sans);
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  color: var(--text);
  line-height: 1.12;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem); margin-top: var(--space-12); }
h3 { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); margin-top: var(--space-6); }
p { margin: 0 0 var(--space-4); max-width: 68ch; }
ul, ol { padding-left: var(--space-6); }
li + li { margin-top: var(--space-2); }
li::marker { color: var(--accent); }
a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { border-radius: 5px; }
img { max-width: 100%; height: auto; }
code { background: var(--surface-alt); border-radius: 6px; padding: 0.08em 0.32em; }
.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 100;
  background: var(--accent-strong); color: #fff; padding: 0.7rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(1rem, 3vw, 2.5rem); }
header.site {
  position: sticky; top: 0; z-index: 20;
  -webkit-backdrop-filter: blur(18px);
}
header.site .wrap {
  min-height: 4.75rem; display: flex; gap: var(--space-4);
  align-items: center; padding-block: 0.65rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text);
  font-family: var(--display); font-size: 1.15rem; font-weight: 800;
  letter-spacing: -0.03em; text-decoration: none; margin-right: auto; white-space: nowrap;
}
.brand img { width: 2.55rem; height: 2.55rem; border-radius: 10px; }
.brand span { color: var(--text); }
nav.site ul {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.25rem; margin: 0; padding: 0;
}
header.site nav li { margin-top: 0; }
nav.site a {
  display: block; text-decoration: none;
  min-height: 2.25rem; font-size: 0.875rem; padding: 0.45rem var(--space-3); border-radius: 999px;
  transition: color 0.18s ease, background 0.18s ease;
}
nav.site a:hover, nav.site a[aria-current="page"] {
  text-decoration: none;
}
.header-cta {
  display: inline-flex; align-items: center; min-height: 2.55rem; padding: 0.55rem 1rem; font-size: 0.8rem;
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.header-cta:hover { text-decoration: none; }
.header-login {
  display: inline-flex; align-items: center; min-height: 2.55rem; padding: 0.55rem 1rem; margin-right: -0.4rem;
  font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.header-login:hover { text-decoration: none; }
/* Signed in (public/signed.mjs marks <html> before the first paint): the panel instead of "Zaloguj się" / "Dołącz". */
.header-login .in, .signed .header-login .out, .signed .header-cta { display: none; }
.signed .header-login .in { display: inline; }
.mobile-nav { display: none; position: relative; }
main { display: block; padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }
main > .wrap > :first-child { margin-top: 0; }
footer.site { border-top: 0; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
footer.site .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr); gap: 3rem 6rem; }

.footer-brand p { margin-top: 1rem; max-width: 38ch; font-size: 0.9rem; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer-links h2 { margin: 0 0 0.8rem; color: #fff; font: 700 0.72rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li + li { margin-top: 0.45rem; }
footer.site a { font-size: 0.86rem; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.footer-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer-legal p { font-size: 0.76rem; line-height: 1.55; margin: 0; }
.footer-legal p:first-child { max-width: 80ch; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.625rem 1.25rem; cursor: pointer;
  font: 650 0.875rem/1.25 var(--sans);
}
.btn:hover { text-decoration: none; }
.btn.secondary:hover { border-color: var(--accent); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.notice {
  position: relative; border: 1px solid var(--border); background: var(--surface-alt);
  padding: 1rem 1.15rem 1rem 1.35rem; border-radius: var(--radius-sm); margin: 1.25rem 0;
  box-shadow: var(--shadow-sm);
}
.notice::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--accent);
}
.notice h2, .notice h3 { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: 0; }
.grid > li { margin-top: 0; }
@media (min-width: 46rem) {.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  position: relative; min-width: 0; padding: clamp(1.25rem, 2.5vw, 1.5rem);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card h3 { margin: 0; font-size: 1.375rem; }
.card .meta { color: var(--text-muted); font-size: 0.875rem; margin: 0; }
.card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font-size: 0.875rem; }
.card dt { color: var(--text-muted); }
.card dd { margin: 0; overflow-wrap: anywhere; }
.lang { display: inline-flex; align-items: center; gap: 0.4em; }


/* Przygaszone: flaga ma być znacznikiem, nie najjaśniejszym punktem strony. */
.lang svg { width: 1.15em; height: auto; aspect-ratio: 3 / 2; border-radius: 2px; filter: saturate(0.62); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); flex: none; }
.card-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.card-head > div { min-width: 0; }
.trainer-card .card-actions { margin-top: auto; padding-top: var(--space-2); }


/* Her colour on the card, as a hairline and a link - not as a repainted card.
   The list has to stay comparable: six differently coloured cards side by side
   is a rainbow, and the eye stops reading the facts.
   --card-ink is the accent taken 30% towards black, because the accent itself
   is a decoration colour: the service green reads 2.5:1 on the card surface,
   and a link has to clear 4.5:1. Mixed, the quietest theme lands at 4.75:1.

   The hairline is the card's own top border, not an inset shadow drawn inside
   it. Inset, it followed the radius one pixel in from the grey border and left
   a coloured ledge stepping out of each top corner - a notch, not a rule. */
.trainer-card {
  --card-accent: var(--accent);
  --card-ink: color-mix(in srgb, var(--card-accent) 70%, #000);
  border-top: 3px solid color-mix(in srgb, var(--card-accent) 55%, var(--border));
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}


/* Hover strengthens: the hairline goes to full accent instead of vanishing. */
.trainer-card:hover { border-top-color: var(--card-accent); }
.trainer-card .card-actions a { color: var(--card-ink); }


/* The name keeps its colour and gains her underline - swapping the colour on
   hover made the strongest link on the card go paler the moment it was aimed at. */
.trainer-card h3 a:hover { text-decoration-color: var(--card-accent); }
.avatar {
  width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none;
  border: 1px solid var(--border); background: var(--accent-soft);
}
/* No photo: her initials, never an empty tile (audit 26.10) - as face() everywhere else. */
span.avatar, span.profile-photo { display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 2rem; color: var(--text); }
/* A trainer is chosen by face first: a big photo on the list's cards, as on ZnanyLekarz. */
.trainer-card .avatar { width: 128px; height: 128px; border-radius: 16px; }
@media (max-width: 30rem) { .trainer-card .avatar { width: 96px; height: 96px; } }
.trainer-card h3 { margin: 0 0 0.4rem; }
.card-line { margin: 0 0 0.2rem; font-size: 0.9rem; }
.card-line svg { width: 1em; height: 1em; vertical-align: -0.125em; }
.card-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; }
.card-badges li + li { margin-top: 0; }
.trainer-card .card-badges .tag { padding: 0.1rem 0.5rem; font-size: 0.75rem; }
.card-about { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.tags li + li { margin-top: 0; }
.tag {
  font-size: 0.8125rem; line-height: 1.4; font-weight: 560; padding: var(--space-1) var(--space-3);
}
main .wrap > form:not(.filters) {
  max-width: 56rem; padding: clamp(1.2rem, 3vw, 2rem); margin-block: 1.3rem 2rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
form.filters {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.15rem, 3vw, 2rem); margin-bottom: 2rem;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
legend { font: 600 1.05rem/1.3 var(--sans); padding: 0; margin-bottom: var(--space-3); }
label { display: block; color: var(--text); font-size: 0.875rem; font-weight: 620; margin-bottom: var(--space-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], input:not([type]), select, textarea {
  /* WebKit gives a search field its own control appearance and then ignores
     the height and padding set here, so it is reset to a plain box first. */
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 2.75rem; padding: 0.625rem var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-solid); color: var(--text); font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
input:focus, select:focus, textarea:focus {
  outline: 0;
}
textarea { min-height: 8.5rem; resize: vertical; }
select { -webkit-appearance: menulist; appearance: menulist; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-strong); }
.field { margin-bottom: var(--space-4); }
.checkbox { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; }
.checkbox input { flex: none; margin-top: 0.32rem; }
.checkbox label { margin: 0; font-weight: 450; }
.meta { color: var(--text-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}



/* Public subpages */
.subpage { display: grid; gap: clamp(3rem, 6vw, 4.75rem); }
.subpage > *, .subpage h2, .subpage h3, .document-page h2 { margin-top: 0; }
.subpage p { max-width: none; }
/* The header of every page: the title, and at most one thing beside it. Four
   classes used to do this, each with its own kicker, lead and rule. */
.page-head { display: flex; flex-direction: column; align-items: flex-start; }
.page-head h1 { max-width: 22ch; margin: 0; }
.page-head > * + * { margin-top: 1rem; }
.page-head .lead { max-width: none; margin: 0; color: var(--text-muted); font-size: 0.92rem; }

/* The facts of the list, in the strip that used to hold four reassurances.
   Same markup in both places: a band of its own under the home hero, a row
   inside the page header of the catalogue. */
.facts-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; }
.page-head .facts-strip { align-self: stretch; }
.facts-strip > div { padding: 0.2rem 1.25rem; border-left: 1px solid var(--border-strong); }
.facts-strip > div:first-child { padding-left: 0; border-left: 0; }
.facts-strip dt { color: var(--text-muted); font-size: 0.72rem; }
.facts-strip dd { margin: 0.1rem 0 0; color: var(--text); font-size: 0.95rem; font-weight: 600; }
.home .facts-strip { padding-block: 1.15rem; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
@media (max-width: 46rem) {.facts-strip { grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.facts-strip > div { padding: 0; border-left: 0; } }
.subpage-heading { max-width: 45rem; margin-bottom: 2.5rem; }
.subpage-heading h2 { margin: 0 0 0.8rem; font-size: clamp(1.55rem, 1.35rem + 0.85vw, 2.15rem); letter-spacing: -0.02em; }
.subpage-heading > p:last-child { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
.process-grid { counter-reset: process; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.process-grid li { counter-increment: process; min-height: 0; margin: 0; padding: 1.8rem; border: 1px solid var(--border); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-sm); }
.process-grid li::before { content: "0" counter(process); display: grid; place-items: center; width: 2.35rem; height: 2.35rem; margin-bottom: 1.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.7rem; font-weight: 800; }
.process-grid h3 { margin: 0 0 0.65rem; font-size: 1.25rem; }
.process-grid p { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; }
.principles-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.principles-panel article { padding: clamp(1.75rem, 4vw, 3rem); }
.principles-panel article + article { border-left: 1px solid var(--border-strong); background: rgba(255,255,255,0.48); }
.principles-panel h2, .data-panel h2, .contact-panel h2 { margin: 0 0 1.2rem; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.principles-panel p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; }
.calm-list { display: grid; gap: 0.85rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.calm-list li { position: relative; margin: 0; padding-left: 1.6rem; color: #4f5256; font-size: 0.88rem; line-height: 1.65; }
.calm-list li::before { content: "✓"; position: absolute; left: 0; top: 0.05rem; color: var(--accent-strong); font-weight: 800; }
.info-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.info-card { min-height: 0; padding: clamp(1.75rem, 3.5vw, 2.5rem); }
.info-card:nth-child(2), .info-card:nth-child(3) { background: #eeeeeb; }
.info-index { display: inline-flex; margin-bottom: 1.75rem; color: var(--accent-strong); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; }
.info-card h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); }
.info-card p { max-width: 52ch; color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; }
.info-card a { font-size: 0.86rem; font-weight: 750; text-decoration: none; }
.data-panel { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5rem); padding: clamp(2rem, 4.5vw, 3.25rem); }
.data-panel > div > p:last-child { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; }
.data-panel .calm-list { margin: 0; }
.contact-panel { padding: clamp(2rem, 4.5vw, 3.25rem); }
.contact-panel p:last-child { margin-bottom: 0; color: var(--text-muted); }
.emergency-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 4.5vw, 3.25rem); border-radius: 16px; background: var(--surface-alt); border: 1px solid var(--border); }
.emergency-hero h2 { max-width: 20ch; margin: 0 0 1rem; font-size: clamp(1.9rem, 1.55rem + 1.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.025em; }
.emergency-hero .lead { max-width: 52ch; margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.75; }
/* The same deep blue as the home band. The number has to be the loudest
   thing on the page: white on this ground reads 16.25. */
.emergency-panel { display: grid; justify-items: start; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 14px; color: #fff; }
.emergency-panel p { margin: 0; color: #f4f5f2; font-size: 0.75rem; font-weight: 700; }
.emergency-panel .emergency-warning { margin-bottom: 1.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 0.78rem; line-height: 1.5; }
.emergency-panel a { margin: 0.4rem 0; color: #f4f5f2; font: 600 clamp(2.8rem, 5.5vw, 4.2rem)/1 var(--sans); letter-spacing: -0.04em; text-decoration: none; }
.emergency-panel span { color: #b6bab3; font-size: 0.75rem; }
.document-page { display: grid; gap: clamp(4rem, 8vw, 6rem); }
.document-version { display: inline-flex; margin: 1.5rem 0 0; padding: 0.4rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted); background: rgba(255,255,255,0.55); font-size: 0.7rem; }
.document-content { width: min(100%, 52rem); margin-inline: auto; }
.document-content section { padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--border); }
.document-content section:first-child { padding-top: 0; }
.document-content section:last-child { border-bottom: 0; }
.document-content h2 { margin: 0 0 1.4rem; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); }
.document-content p, .document-content li { color: #4f5256; font-size: 0.92rem; line-height: 1.8; }
.document-content ul { display: grid; gap: 0.8rem; padding-left: 1.3rem; }
.document-content dl { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); margin: 0 0 1.4rem; border-top: 1px solid var(--border); font-size: 0.92rem; line-height: 1.6; }
.document-content dt, .document-content dd { margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.document-content dt { padding-right: 1.5rem; color: var(--text-muted); }
.document-content dd { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .document-content dl { grid-template-columns: minmax(0, 1fr); } .document-content dt { padding-bottom: 0; border-bottom: 0; } .document-content dd { padding-top: 0.1rem; } }
.directory-page { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
/* The catalogue's filters are a bar, not a page: a search box, a city, an
   area of work and the button. The other seven controls live in a fold that
   opens itself whenever one of them is on, so nothing applied is ever
   hidden - a native <details>, no script, works with JavaScript off. */
/* The catalogue opens with the band of the home hero; the filter card sits
   half on the band, the way the search card does there. */
.directory-page .page-head { margin-top: calc(clamp(2rem, 4vw, 3rem) * -1); padding-block: clamp(2rem, 4vw, 3rem) 5.5rem; }
.directory-page .page-head .facts-strip { margin-top: 1.5rem; }
.directory-page .page-head .facts-strip dt { color: #b6bab3; }
.directory-page .page-head .facts-strip dd { color: #fff; }
.directory-page .filters { position: relative; margin: calc(-3.5rem - clamp(2.5rem, 5vw, 3.5rem)) 0 0; background: var(--surface-solid); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); padding: clamp(1rem, 2.5vw, 1.4rem); border-radius: 14px; }
.filter-bar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; }
.filters .field { margin: 0; }
.filters label { margin-bottom: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.filters select, .filters input[type="number"], .filters input[type="search"] { min-height: 2.6rem; padding-block: 0.45rem; font-size: 0.92rem; }
.filter-bar .btn { min-height: 2.6rem; }
.more-filters { margin-top: 0.9rem; border-top: 1px solid var(--border); }
.more-filters > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0 0;
  color: var(--accent-strong); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.more-filters > summary::marker { content: ""; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after { content: "▾"; font-size: 0.7rem; }
.more-filters[open] > summary::after { content: "▴"; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.7rem 1rem; margin: 0.9rem 0; }
.more-grid .checkbox { align-items: center; margin: 0; padding-top: 1.2rem; }
.more-grid .checkbox label { margin: 0; font-size: 0.85rem; font-weight: 450; color: var(--text); }
.more-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.2rem; }
.more-actions .btn { min-height: 2.5rem; }
@media (max-width: 52rem) {
.filter-bar { grid-template-columns: minmax(0, 1fr); }
.filter-bar .btn { justify-self: start; }
.more-grid .checkbox { padding-top: 0; }
}



/* Label and value, two pairs across - the layout the catalogue card has always
   used for exactly these facts. Two columns rather than three: at three the
   label and its value drift apart and the eye stops pairing them. */
.pdata { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 0 var(--space-8); margin: 0; }
.pdata > div { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  gap: var(--space-4); padding: 0.7rem 0; border-top: 1px solid var(--border); align-items: baseline; }
.pdata dt { color: var(--text-muted); font-size: 0.92rem; }
.pdata dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 46rem) {.pdata > div { grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); } }






/* Homepage */
.home { display: grid; gap: 0; }
.home p { max-width: none; }
.home h2 { margin-top: 0; }
/* The band runs the full width of the window, the way a catalogue's does:
   the page sits in .wrap, so it is pulled back out with the usual full-bleed
   margin and given the gutter back as padding. */
.home-hero, .home .facts-strip, .directory-page .page-head {
  margin-inline: calc(50% - 50vw); width: 100vw;
  padding-inline: max(clamp(1rem, 3vw, 2.5rem), calc((100vw - var(--maxw)) / 2 + clamp(1rem, 3vw, 2.5rem)));
}
.home-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  margin-top: calc(clamp(2rem, 4vw, 3rem) * -1);
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  grid-template-areas: "copy promo" "stats stats" "credit credit";
  column-gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 7vw, 5.1rem) 0; min-height: 37.5rem;
  border: 0; border-radius: 0;
}
.home-hero > * { position: relative; z-index: 1; }
/* The copy column is lifted above the background and mosaic. */
.home-hero > .hero-copy { z-index: 2; }
/* Grain: a tile of fine grey noise over the band, overlay, so the gradients read as
   a matte surface instead of as light. A data URI - img-src allows it, and the
   turbulence is rasterised once per 220 px tile rather than across the hero. */
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.8 0 0 0 -.4 1.8 0 0 0 -.4 1.8 0 0 0 -.4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-copy { grid-area: copy; max-width: 48rem; min-width: 0; }
/* What the site is, above the promise - the one line of label the hero keeps. */
.eyebrow {
  align-items: center; gap: 0.5rem; margin: 0 0 1.1rem;
}
/* The tail a phone drops: a flex item of its own, so the gap is taken back down to a space. */
.eyebrow small { margin-left: -0.25rem; font-size: inherit; }
.eyebrow > span { width: 0.42rem; height: 0.42rem; border-radius: 50%; }
.home-hero .btn { background: #fff; border-color: #fff; color: var(--navy); box-shadow: none; }
.home-hero .btn:hover { background: #e6e7e3; border-color: #e6e7e3; }
.home-hero .btn.secondary { background: transparent; border-color: rgba(255,255,255,0.32); color: #f4f5f2; }
.home-hero .btn.secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.home-hero h1 { max-width: none; margin: 0 0 1.6rem; font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: 1.12; letter-spacing: -0.05em; }
.home-hero h1 em { font-style: normal; padding: .04em .12em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.home-hero .lead { max-width: 48ch; margin: 0 0 1.9rem; font-size: 1.19rem; line-height: 1.55; }
/* The search of the hero, after the pattern people know from booking a doctor:
   a switch above, one white bar with what, where and the button. */
.hero-search { max-width: 41rem; padding: 0.4rem; background: #fff; }
.hero-search-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) auto; align-items: center; }
.hero-search-fields input, .hero-search-fields select { min-height: 3rem; margin: 0; border: 0; background: transparent; box-shadow: none; }
.hero-search-fields input { padding-inline: 1.1rem; }
.hero-search-fields select { border-left: 1px solid var(--border); border-radius: 0; padding-inline: 1rem; }
.hero-go { display: grid; place-items: center; width: 3rem; height: 3rem; margin-left: 0.4rem; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.hero-chips li { margin: 0; }
.hero-chips a { display: block; padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
/* The next event on the photograph. */
.hero-promo { grid-area: promo; justify-self: end; width: 100%; max-width: 21rem; padding: 1.5rem; }
.promo-top { margin: 0; color: var(--highlight); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.hero-promo h2 { margin: 0.9rem 0 0.4rem; font-size: 1.56rem; line-height: 1.08; letter-spacing: -0.035em; }
.promo-where { margin: 0; color: #b6bab3; font-size: 0.82rem; }
.promo-band { display: inline-block; margin: 0.9rem 0 1.1rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 0.78rem; font-weight: 700; }
.home-hero .hero-promo .btn { display: flex; width: 100%; justify-content: center; }
.hero-promo .promo-where + .btn { margin-top: 0.75rem; }
/* Numbers as type, not tiles. */
.hero-stats { grid-area: stats; display: flex; flex-wrap: wrap; margin: 3.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.16); }
.hero-stats div { flex: 1; min-width: 8.75rem; display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 1.4rem 1.5rem 1.6rem 0; }
.hero-stats dt { font-size: 0.81rem; letter-spacing: 0.02em; }
.hero-stats dd { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.hero-credit { grid-area: credit; margin: 0; padding: 0.2rem 0 1.4rem; font-size: 0.72rem; }
.hero-credit a { text-decoration: underline; text-underline-offset: 2px; }
.home-section { margin-top: clamp(3rem, 6vw, 4.75rem); }
.section-heading { max-width: 34rem; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2 { font-size: clamp(1.55rem, 1.35rem + 0.85vw, 2.15rem); line-height: 1.2; letter-spacing: -0.02em; }
.section-heading > p:last-child { color: var(--text-muted); line-height: 1.7; }
.section-action { margin: 0; text-align: center; }
.featured-grid { margin-top: 2rem; }
.featured-grid + .section-action { margin-top: 2rem; }
@media (min-width: 64rem) {.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Same inset and edges as the .join-cta above it: copy on the left, the button flush right. */
.home-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; margin-top: clamp(3rem, 6vw, 4.75rem); padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 16px; }
.home-cta h2 { color: #f4f5f2; max-width: 22ch; margin: 0; font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.25rem); line-height: 1.18; letter-spacing: -0.02em; }
.home-cta > div:last-child { display: grid; justify-items: center; gap: 0.9rem; }
.home-cta > div:last-child > a:last-child { font-size: 0.76rem; }
@media (max-width: 64rem) {.desktop-nav, .header-cta { display: none; }
.mobile-nav { display: block; }
.mobile-nav summary { cursor: pointer; list-style: none; padding: 0.48rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font-size: 0.78rem; font-weight: 700; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] summary { background: var(--accent-soft); }
.mobile-nav nav { position: absolute; z-index: 30; right: 0; top: calc(100% + 0.55rem); width: min(18rem, calc(100vw - 2rem)); padding: 0.65rem; border: 1px solid var(--border); border-radius: 0.9rem; background: #fff; box-shadow: var(--shadow); }
.mobile-nav ul { display: grid; margin: 0; padding: 0; list-style: none; }
.mobile-nav li { margin: 0; }
.mobile-nav a { display: block; padding: 0.65rem 0.75rem; border-radius: 0.55rem; color: var(--text); font-size: 0.82rem; text-decoration: none; }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
/* Tablet: the copy over the full width, the event card and the numbers side by side under it. */
.home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy copy" "promo stats" "credit credit"; align-items: end; row-gap: 2rem; min-height: 0; }
.home-hero h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); }
.hero-promo { justify-self: stretch; max-width: none; }
.hero-stats { margin: 0; }
.hero-stats div { min-width: 50%; }
.home-hero .hero-search { min-width: 0; width: 100%; }
.section-heading { max-width: 42rem; }
.process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emergency-hero { grid-template-columns: 1fr; }
.emergency-panel { width: min(100%, 32rem); }
}
@media (max-width: 45rem) {header.site { position: sticky; }
header.site .wrap { min-height: 4.1rem; padding-block: 0.5rem; }
.brand { font-size: 0.94rem; }
.brand img { width: 2.1rem; height: 2.1rem; }
header.site .wrap { gap: 0.5rem; }
.header-login { min-height: 2.2rem; padding: 0.4rem 0.7rem; margin-right: 0; font-size: 0.76rem; }
main { padding-block: 1rem 3.5rem; }
.directory-page .page-head { margin-top: -1rem; padding-top: 2rem; }
.hero { min-height: 30rem; border-radius: var(--radius); padding-inline: var(--space-6); }
.hero h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
.btn { width: 100%; }
.card:hover { transform: none; }
.home-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "promo" "stats" "credit"; row-gap: 1.5rem; padding: 2rem 1rem 3rem; }
.home-hero .eyebrow small { display: none; }
.home-hero h1 { font-size: clamp(2.35rem, 10.5vw, 3.05rem); }
.hero-promo { padding: 1.1rem 1.25rem; }
.hero-promo h2 { margin-top: 0.6rem; font-size: 1.3rem; }
.promo-band { margin: 0.75rem 0 0.9rem; }
.hero-stats div { flex: 1 1 0; min-width: 0; justify-content: flex-end; padding: 1rem 0.5rem 1.1rem 0; }
.hero-stats dd { font-size: 1.75rem; }
.hero-stats dt { font-size: 0.72rem; }
.home-hero .lead { font-size: 0.93rem; line-height: 1.65; }
.hero-search-fields { grid-template-columns: minmax(0, 1fr) auto; }
.hero-search-fields select { grid-row: 2; grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
.home-section { margin-top: 4.5rem; }
.section-heading h2 { font-size: 2.45rem; }
.home-cta { grid-template-columns: 1fr; border-radius: 1rem; }
.home-cta > div:last-child { justify-items: stretch; }
.home-cta > div:last-child > a:last-child { text-align: center; }
.subpage { gap: 4rem; }
.emergency-hero { min-height: 0; padding: 1.75rem 1.25rem; border-radius: 14px; }
.process-grid, .principles-panel, .info-card-grid, .data-panel { grid-template-columns: 1fr; }
.process-grid li { min-height: 0; padding: 1.5rem; }
.process-grid li::before { margin-bottom: 2rem; }
.principles-panel article { padding: 2rem 1.25rem; }
.principles-panel article + article { border-top: 1px solid var(--border-strong); border-left: 0; }
.info-card { min-height: 0; padding: 2rem 1.25rem; }
.info-index { margin-bottom: 2rem; }
.data-panel { gap: 2rem; padding: 2.5rem 1.25rem; }
.contact-panel { padding: 2.5rem 1.25rem; }
.emergency-panel { padding: 2rem 1.25rem; }
.document-content section { padding-block: 2.5rem; }
.directory-page { gap: 3rem; }
footer.site .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-links { max-width: 24rem; }
.footer-legal { display: grid; gap: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.muted { color: var(--text-muted); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0 0; max-width: none; }
.pager .btn { width: auto; }

/* Profile and practice without a page of their own. */
.profile-page { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.profile-page > .notice { margin: 0; }
.profile-head { display: flex; gap: clamp(1.25rem, 3vw, 2rem); align-items: flex-start; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border); border-top: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius-lg); background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.profile-head > div { min-width: 0; }
.profile-head h1 { margin: 0 0 0.4rem; }
.profile-head .lead { margin: 0 0 0.4rem; font-size: 1.05rem; }
.profile-head .meta { margin: 0 0 1rem; font-size: 0.9rem; }
.profile-photo { display: block; flex: none; width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--accent-soft); }
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.profile-main > p { font-size: 1.02rem; }
.profile-main .pdata { margin: 2rem 0 0; grid-template-columns: 1fr; }
.profile-fact { margin-top: 2.5rem; }
.profile-page .profile-fact h2, .profile-page .profile-others h2 { margin: 0 0 1rem; font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }
.profile-fact h3 { margin: 1.25rem 0 0.4rem; font-size: 1rem; }
.profile-fact details { border-top: 1px solid var(--border); padding: 0.75rem 0; }
.profile-fact details:last-child { border-bottom: 1px solid var(--border); }
.profile-fact summary { cursor: pointer; font-weight: 600; }
.profile-fact details > p:first-of-type { margin-top: 0.75rem; }
/* Her studio on her profile: a card, not a bare link. */
.place-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; margin-bottom: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); box-shadow: var(--shadow-sm); }
.place-logo { flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-sm); background: var(--highlight); color: var(--text); display: grid; place-items: center; font: 800 1.1rem var(--display); overflow: hidden; }
.place-logo img { width: 100%; height: 100%; object-fit: cover; }
.place-body { min-width: 0; }
.place-body h3 { margin: 0.1rem 0 0.3rem; font-size: 1.2rem; }
.place-body h3 a { text-decoration: none; }
.place-body address { font-style: normal; color: var(--text-muted); font-size: 0.95rem; }
.place-kind { margin: 0; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.place-links { margin: 0.6rem 0 0; display: flex; gap: 1rem; flex-wrap: wrap; font-weight: 600; font-size: 0.95rem; }
.place-links a { display: inline-flex; align-items: center; gap: .35rem; }
.place-links .ti { width: 18px; height: 18px; }
.profile-side { display: grid; gap: 1rem; }
.profile-side .card h2 { margin: 0; font-size: 1.1rem; }
.profile-side .card p { margin: 0; font-size: 0.9rem; }
.profile-side .meta { font-size: 0.8rem; }
.offers { list-style: none; margin: 0; padding: 0; }
.offers li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.offers li:last-child { border-bottom: 0; }
.offers small { display: block; color: var(--text-muted); font-size: 0.76rem; }
.offers b { white-space: nowrap; }
.profile-others .grid { margin-bottom: 1rem; }
/* Two columns from a tablet up: prices, terms and qualifications beside her text. */
@media (max-width: 48rem) {.profile-body { grid-template-columns: 1fr; }
/* On a phone her prices and times come first, the story after (owner 26.10: nothing at the bottom of a chimney). */
.profile-side { order: -1; } }
@media (max-width: 45rem) {.profile-head { flex-direction: column; padding: 1.5rem 1.25rem; }
.profile-photo { width: 112px; height: 112px; } }

/* Booking: one panel with the summary and the form. */
.panel { max-width: 44rem; padding: clamp(1.25rem, 3vw, 2rem); }
.panel > :last-child { margin-bottom: 0; }
.fact { margin: 0 0 1.5rem; padding: 1rem 1.15rem; }
.fact h4 { margin: 0 0 0.4rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fact > :last-child { margin-bottom: 0; }
.panel .field label input[type="checkbox"] { margin-right: 0.4rem; vertical-align: -0.15rem; }
.panel .field label:has(input[type="checkbox"]) { font-weight: 450; }

/* Events (/wydarzenia): filters as pills; a tile per event - its date, kind, name, when and where, status. */
.ev-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.ev-filters a, .ev-filters span { padding: 0.45rem 1rem; border: 1px solid var(--border-strong); font-size: 0.88rem; font-weight: 600; color: var(--text); text-decoration: none; }
.ev-filters a:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.ev-h { margin: 2.5rem 0 1rem; font-size: 1.35rem; }
/* The demo's editorial pages (src/editorial.ts): exercise library, programmes, articles, sources. */
.kicker { margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.5rem; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.82rem; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 0.35rem; }
.crumbs a { color: var(--text-muted); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.section-head h2 { margin: 0; font-size: clamp(1.55rem, 1.35rem + 0.85vw, 2.15rem); }
.section-head .meta { margin: 0.6rem 0 0; font-size: 0.88rem; }
/* The demo's underline: the lime as a thick rule under ink text. */
.link-more { font-size: 0.9rem; font-weight: 700; text-decoration: none; border-bottom: 3px solid var(--highlight); padding-bottom: 2px; }
.link-more:hover { border-bottom-color: var(--text); }
.ed-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin-top: 1.5rem; }
.ed-note { margin-top: 1.5rem; font-size: 0.85rem; }
.ed-grid .card h3 a { color: var(--text); text-decoration: none; }
.ed-grid .card h3 a:hover { text-decoration: underline; }
.ed-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ed-detail h1 { margin: 0.25rem 0 0.75rem; }
.ed-detail h2 { margin: 2rem 0 0.75rem; font-size: 1.35rem; }
.ed-steps { margin: 0.75rem 0; padding-left: 1.2rem; font-size: 0.9rem; }
.ed-steps li { margin-bottom: 0.3rem; }
.ed-detail .lead { color: var(--text-muted); font-size: 1.05rem; }
.ed-detail article > .byline { margin-bottom: 1.25rem; }
.plan-start { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.25rem 0; }
.plan-start p { display: grid; gap: 0.35rem; justify-items: start; margin: 0; }
.plan-start small { color: var(--text-muted); }
.plan-go .plan-start { margin: 1rem 0 0; } .plan-go .plan-start p { flex: 1 1 100%; justify-items: stretch; }
.ed-detail article > .card { margin-top: 2rem; }
@media (min-width: 64.0625rem) {
  article > .plan-start, .ed-detail ~ .ctabar { display: none; }
  .plan-side { align-self: stretch; align-content: start; } .plan-go { position: sticky; top: 90px; }
}
.ed-side { display: grid; gap: 1rem; }
.ed-side .card h2 { margin: 0; font-size: 1.1rem; }
.ed-side .card p { margin: 0; font-size: 0.9rem; }
.ed-side .btn { width: 100%; }
.ed-side h3, .ed-detail article > .card h3 { margin: 1rem 0 0; color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ed-links { display: grid; gap: 0.6rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.ed-links a { display: flex; align-items: center; gap: 0.65rem; color: var(--text); text-decoration: none; }
.ed-links a:hover b { text-decoration: underline; }
.ed-links img { flex: none; width: 4rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.ed-links b { display: block; font-size: 0.9rem; line-height: 1.3; }
.ed-links small { color: var(--text-muted); font-size: 0.78rem; }
.card dl.ed-kv { display: block; margin: 0; font-size: 0.88rem; }
.ed-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.ed-kv > div:first-child { border-top: 0; }
.ed-kv dt { color: var(--text-muted); }
.ed-kv dt::first-letter { text-transform: uppercase; }
article > .ed-kv { max-width: 32rem; margin: 0 0 1.25rem; }
.ed-kv dd { margin: 0; font-weight: 600; text-align: right; }
/* A programme: weeks folded but the first, each week's trainings side by side, an exercise a row with its picture. */
.plan-week { margin: 0.75rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-solid); }
.plan-week summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; font-weight: 700; cursor: pointer; }
.plan-week summary span { color: var(--text-muted); font-weight: 400; font-size: 0.9rem; }
.plan-week[open] summary { border-bottom: 1px solid var(--border); }
.plan-week .plan-days { padding: 1rem; }
.plan-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.plan-day { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.plan-day h4 { margin: 0 0 0.75rem; font-size: 1rem; }
.plan-items { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.plan-items li { display: grid; grid-template-columns: 4rem 1fr; gap: 0.75rem; align-items: start; margin: 0; }
.plan-items img { width: 4rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.plan-items img.v { width: 2.25rem; aspect-ratio: 9 / 16; justify-self: center; }
.plan-go-day { display: inline-block; margin: -0.25rem 0 0.75rem; font-weight: 600; }
.plan-items b { display: block; font-size: 0.95rem; line-height: 1.35; }
.plan-items .chip { display: inline-block; margin: 0.3rem 0.35rem 0 0; padding: 0.1rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); font-size: 0.78rem; }
.plan-items small { display: block; margin-top: 0.3rem; color: var(--text-muted); }
.plan-kind { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 0 0.2rem; border-radius: 6px; background: var(--highlight); font-size: 0.68rem; font-weight: 600; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.plan-kind:empty { background: var(--border); }
.plan-desc { margin: -0.4rem 0 0.75rem; color: var(--text-muted); font-size: 0.9rem; }
.player { overflow: hidden; margin-bottom: 1.25rem; border-radius: var(--radius); background: #000; aspect-ratio: 16 / 9; }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.player iframe { display: block; width: 100%; height: 100%; border: 0; }
.google-cards-frame { display: block; width: 100%; height: 34rem; border: 0; }
/* Results as on ZnanyLekarz: our list on the left, Google's cards for the same search in a column that stays in view. */
.results-layout { display: grid; gap: 2rem; }
.city-pick { display: grid; gap: 0.6rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--surface-solid); }
.featured-grid + .city-pick { margin-top: 1.5rem; }
.city-pick .tag.all a { color: inherit; font-weight: 800; }
.city-pick h2 { margin: 0; font-size: 1rem; }
.results-side h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.results-side p { font-size: 0.85rem; }
.city-pick .tags { margin: 0; }
@media (min-width: 70rem) {
  .results-layout { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .results-layout .grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .results-side { position: sticky; top: 5.5rem; }
  .results-side .google-cards-frame { height: calc(100vh - 13rem); }
}
.player.vertical { aspect-ratio: 9 / 16; max-width: 22rem; margin-inline: auto; }
.ed-short { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: center; margin-bottom: 1.5rem; }
.ed-short .player { max-width: none; margin: 0; }
.ed-short h1 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
@media (max-width: 40rem) { .ed-short { grid-template-columns: 1fr; } .ed-short .player { max-width: 22rem; margin-inline: auto; } }
.sourcebox { margin-top: 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-left: 4px solid var(--highlight); border-radius: var(--radius-sm); background: var(--surface-alt); font-size: 0.88rem; }
.sourcebox p { margin: 0 0 0.5rem; max-width: none; }
.sourcebox > :last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; margin: 1.5rem 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-solid); }
table.sources { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.88rem; }
table.sources th, table.sources td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.sources th { background: var(--surface-alt); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
table.sources tr:last-child td { border-bottom: 0; }
/* The join band: the demo's lime as a ground, ink on it (17:1). */
.join-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 2.75rem); }
.join-cta h2 { margin: 0 0 0.5rem; }
.join-cta p { margin: 0; max-width: 52ch; }
@media (max-width: 64rem) {.ed-detail { grid-template-columns: 1fr; } }

  padding-inline: max(clamp(1rem, 3vw, 2.5rem), calc((100vw - var(--maxw)) / 2 + clamp(1rem, 3vw, 2.5rem))); background: var(--c-dark); color: #fff; }
@media (max-width: 760px) {
  }

/* 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, #d2d3d0)); --wk-muted: var(--muted, var(--text-muted, #4f5256)); --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-days > :where(div) { scroll-snap-align: start; min-width: 0; }
.wk-days :where(div > p:first-child) { margin: 0 0 6px; text-align: center; line-height: 1.15; } .wk-days :where(div > p:first-child) b { display: block; font-size: .82rem; text-transform: capitalize; } .wk-days :where(div > p:first-child) span { font-size: .75rem; color: var(--wk-muted); }
.wk-days > :where(div) ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wk-days > :where(div) a { display: block; white-space: nowrap; padding: 6px 2px; border: 1px solid var(--wk-line); background: #fff; text-align: center; font-weight: 600; font-size: .88rem; text-decoration: none; color: inherit; }
.wk-days > :where(div) 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: var(--wk-green); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.wk-empty { margin: 0; font-size: .88rem; color: var(--wk-muted, #4f5256); }
.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, #eeeeeb); --bk-green: var(--green-d, #2f5d1f); }
.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; 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; }
.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 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-days > :where(div) li { display: block; margin: 0; padding: 0; border: 0; font-size: inherit; }
.bk .wk-days :where(div > p:first-child) 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); background: #fff; }
.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-radius: 16px; 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, .map-dlg .map-box { display: block; width: 100%; height: min(70vh, 32rem); border: 0; border-radius: 12px; overflow: hidden; background: #eeeeeb; }
/* The card over the pin: a white card of the site's (line, radius, ink), picture left, the way there as a link. */
.map-pop .maplibregl-popup-content { padding: 12px 14px; border: 1px solid #d2d3d0; border-radius: 14px; box-shadow: 0 4px 14px rgb(0 0 0 / .14); font: 400 .88rem/1.4 Inter, system-ui, sans-serif; color: #121314; }
.map-pop .maplibregl-popup-tip { border-top-color: #ffffff; }
.map-card { display: flex; gap: 12px; align-items: center; }
.map-card img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #eeeeeb; }
.map-card strong { display: block; font: 650 .98rem/1.25 Manrope, Inter, sans-serif; }
.map-card span { display: block; color: #4f5256; }
.map-card a { display: inline-block; margin-top: 4px; font-weight: 600; color: #121314; }
/* The place's pin: the brand's lime drop with the ink edge, its point on the place. */
.map-pin { display: block; width: 32px; height: 38px; }
.map-pin i { display: block; box-sizing: border-box; width: 30px; height: 30px; margin: 0 auto; border: 3px solid #121314; border-radius: 50% 50% 50% 0; background: #dfff45; transform: rotate(-45deg); box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
.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; font: 650 .95rem/1.2 inherit; text-align: center; cursor: pointer; }
.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: #eeeeeb; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .bk-dlg, .bk-dlg.map-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } .map-dlg iframe, .map-dlg .map-box { height: calc(100dvh - 130px); } }

.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, #4f5256)); margin-top: .15em; flex: none; }
.creds span { display: block; font-size: .9rem; color: var(--muted, var(--text-muted, #4f5256)); 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, #6b8a00); } .creds .declared { color: var(--muted, var(--text-muted, #4f5256)); font-weight: 400; }

/* Fonts and colours: the brand's one look (zt-catalog/site) - the same files and values in every front. */
@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}
@font-face{font-family:Inter;font-display:swap;font-weight:400;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:Inter;font-display:swap;font-weight:500;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:Inter;font-display:swap;font-weight:600;src:url("/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:Manrope;font-display:swap;font-weight:600 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:600 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}
:root {
  /* neon, after Les Mills, Nike and Fitbod: a black opening, black to book,
     the brand's lime - the one hot colour - to find. */
  --c-bg: #f4f4f2; --c-card-alt: #fafaf9; --c-line: #d2d3d0; --c-ink: #121314; --c-muted: #4f5256;
  --c-peach: #121314; --c-peach-d: #000000;
  --c-lav: #e6e7e3; --c-lav-soft: #eeeeeb; --c-lav-d: #8a8c88; --c-violet: #2b2d2f;
  --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. */
  --c-open: #0d0e0f; --c-open-ink: #ffffff; --c-do-ink: #ffffff; --c-find-ink: var(--c-ink);
  --c-dark: #0d0e0f; --c-darker: #060707;
  /* 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);
  --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, 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-lav); --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); }
/* A trainer's site (authored.ts trainerSite): its own dark ground and the brand's lime - a landing page of its own,
   not the catalogue's colours. */
:root { --tr-bg: #101113; --tr-card: #1d2023; --tr-line: #282b2f; --tr-line-strong: #34383d; --tr-ink: #f4f5f2; --tr-soft: #b6bab3; --tr-mute: #858a83;
  --tr-lime: #dfff45; --tr-on-lime: #121314; --tr-lime-soft: rgb(223 255 69 / .09); --tr-lime-line: rgb(223 255 69 / .42); --tr-glow: rgb(223 255 69 / .26); }
/* The hero on the palette's opening and in its type; --wz-sage stays the soft panel (dates, the way there, monograms). */
.wz-hero:not(.bare) { background: var(--c-open); }
.wz-hero:not(.bare) :is(h1, .wz-facts b) { color: var(--c-open-ink); }
.wz-hero:not(.bare) :is(.wz-lead, .wz-place, .wz-facts span) { color: color-mix(in oklch, var(--c-open-ink) 72%, transparent); }
.wz-hero:not(.bare) .wz-eyebrow { background: #fff; color: var(--c-ink); }
/* The road's opening is dark (--green = ink): its name white, not the headings' ink. */
.road-hero h1 { color: #fff; }
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);
}
/* The call to book on a hero: lime, as on the dark band (a black "do" would vanish on the black opening). */
.wz-hero .wz-btn.dark, .wz-hero .wz-btn.dark:hover { background: var(--c-lime); color: var(--c-find-ink); border-color: var(--c-lime-d); box-shadow: 0 2px 0 var(--c-lime-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, .home-cta .btn, .filters .filter-bar .btn, .city-pick .tag.all {
  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,
.home-cta .btn:hover, .filters .filter-bar .btn:hover, .city-pick .tag.all: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, .data-panel, .contact-panel, .principles-panel,
.filters, .wz-slots, .strip {
  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;
}
/* Narrow screens crop the photograph to its middle; keep the face in. */
@media (max-width: 64rem) { .home-hero { background-position: 0 0, 80% 30%, 0 0; } }
.home-hero::after { opacity: .16; }
/* The film (public/hero.js): over the photograph once it plays, lit the same way - its light and shade
   on the lavender, the opening's wash over it (::before, under the copy). */
.home-hero > .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.home-hero > .hero-video.on { opacity: 1; }
/* Its sound, off until asked for: a round white button in the corner, shown once the film plays. */
.home-hero > .hero-sound { display: none; position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: 1rem; z-index: 3;
  width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff; color: var(--c-ink); box-shadow: 0 2px 0 var(--c-line); cursor: pointer; }
.home-hero:has(> .hero-video.on) > .hero-sound { display: grid; }
.hero-sound .ti { width: 1.35rem; height: 1.35rem; }
.hero-sound[aria-pressed="false"] .ti + .ti, .hero-sound[aria-pressed="true"] .ti:first-child { display: none; }
.home-hero:has(> .hero-video.on)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  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%); }
.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-head { display: flex; align-items: center; gap: 0.4rem; margin-left: -0.35rem; }
.hero-promo .promo-head p { line-height: 1.2; }
.hero-promo .promo-note { margin: 0; color: var(--c-muted); font-size: 0.66rem; }
.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 h3 a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.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); }

/* "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. */

/* 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". */
.home-cta .btn, .home-cta .btn:hover { background: var(--c-lime); border-color: var(--c-lime-d); box-shadow: 0 2px 0 var(--c-lime-d); color: 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, 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.site .footer-brand p { color: oklch(1 0 0 / .62); }
footer.site .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); }
.ev-status.ev-cancelled { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.ev-cancelled strong { text-decoration: line-through; }

/* 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-days > :where(div) a { border-color: var(--c-line); border-radius: 8px; box-shadow: 0 2px 0 var(--c-line); }
.wk-days > :where(div) a:hover, .wk-days > :where(div) 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 .kicker { color: var(--c-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* 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; }
@media (min-width: 64rem) { .people { grid-template-columns: repeat(3, 1fr); } }
.people-all .face { background: var(--c-lav-soft); color: var(--c-ink); font-size: 1.3rem; }

/* "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; }

.ex-card, .plan-card { overflow: hidden; }
.ex-card { gap: 0.6rem; }
.card.ex-card { padding: 0; }
.card.ex-card > :not(.ex-thumb) { margin-inline: clamp(1.25rem, 2.5vw, 1.5rem); }
.ex-card > :last-child { margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem); }
.ex-card h3 { margin-top: 0.4rem; font-size: 1.15rem; }
.ex-card h3 a, .plan-card h3 a { color: var(--text); text-decoration: none; }
.ex-card h3 a:hover { text-decoration: underline; }
.ex-card :is(img, video, .poster) { border-bottom: 1px solid var(--c-line); }
.ex-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--c-dark); overflow: hidden; }
.ex-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-thumb.vertical img { object-fit: contain; }
.ex-tag { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; }
.ex-play { position: absolute; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--c-lime); color: var(--c-find-ink); font-size: 1.1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.ex-license { color: var(--text-muted); font-size: 0.78rem; }
.ex-license b { color: var(--text); }
.plan-card .kicker { margin: 0; }
.plan-row { display: flex; justify-content: space-between; gap: 1rem; margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.88rem; }
.app-teaser { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin: 1.75rem 0 0.5rem; }
/* A phone, slightly turned: a polished frame, its keys, the camera's island, a soft shadow on the ground. */
.phone { position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 52px;
  background: linear-gradient(145deg, var(--c-violet), var(--c-darker) 42%, var(--c-dark));
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .16), inset 0 0 0 4px var(--c-darker), 0 42px 70px -28px rgb(0 0 0 / .55), 0 14px 26px -14px rgb(0 0 0 / .45);
  transform: rotate(-3deg); }
.phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 30%; height: 24px; border-radius: 999px; background: var(--c-darker); z-index: 1; pointer-events: none; }
.phone::after { content: ""; position: absolute; right: -3px; top: 26%; width: 3px; height: 13%; border-radius: 0 3px 3px 0; background: var(--c-dark); }
.phone-keys { position: absolute; left: -3px; top: 20%; width: 3px; height: 7%; border-radius: 3px 0 0 3px; background: var(--c-dark); box-shadow: 0 calc(100% + 30px) 0 var(--c-dark); }
.phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 42px; background: var(--c-dark); pointer-events: none; }
.phone-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.phone-link:focus-visible { outline: 3px solid var(--c-lime-d); outline-offset: 4px; }
.app-teaser-copy h3 { margin: 0 0 0.5rem; font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 900; font-stretch: 125%; line-height: 1.05; }
.app-points { margin: 1rem 0 1.5rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.app-points li { padding-left: 1.6rem; position: relative; }
.app-points li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c-lime); box-shadow: inset 0 0 0 4px var(--c-lime), inset 0 0 0 6px var(--c-ink); }
.app-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
/* A trainer's photos and her questions and answers (authored.ts galleryList, faqList): the same on her profile and her pages. */
.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; }
.gallery.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .gallery.big img { border-radius: 20px; }
.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, var(--text)); }
.wz-faq summary::-webkit-details-marker { display: none; }
.wz-faq summary::before { content: "+"; flex: none; width: 18px; font-weight: 400; color: var(--wz-soft, var(--text-muted)); } .wz-faq details[open] summary::before { content: "−"; }
.wz-faq details > div { padding: 0 0 14px 30px; }
/* Events (events.ts eventTiles, eventFact): the same tiles and facts on /wydarzenia, a profile and a trainer's own pages. */
.ev-tiles { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
.ev-tiles li { margin: 0; }
.ev-tiles a { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; align-items: start; height: 100%; padding: 1.1rem; color: var(--text, var(--ink)); text-decoration: none; }
.ev-date { display: grid; justify-items: center; line-height: 1.1; text-align: center; }
.ev-date b { letter-spacing: -0.02em; } .ev-date small { font-size: 0.72rem; color: var(--text-muted, var(--muted)); }
.ev-body { display: grid; gap: 0.3rem; min-width: 0; }
.ev-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, var(--muted)); }
.ev-body strong { font-size: 1.1rem; line-height: 1.3; }
.ev-when { font-size: 0.88rem; color: var(--text-muted, var(--muted)); }
.ev-body .ev-status { justify-self: start; margin: 0.3rem 0 0; }
.ev-past a { opacity: 0.75; }
.ev-status { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.ev-status.ev-past { background: #e6e7e3; color: var(--text-muted, var(--muted)); }
.ev-facts { display: grid; gap: 14px; margin: 0; } .ev-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; }
.ev-facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, var(--muted)); padding-top: 3px; }
.ev-facts dd { margin: 0; }
/* "Others" under a page (guides, trainers nearby, where else she teaches): both sheets, each with its own tokens. */
.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, var(--border)); border-radius: 10px; text-decoration: none;
  color: var(--ink, var(--text)); background: var(--paper, #fff); min-height: 44px; }
.others li a:hover { border-color: currentColor; }
.others span { font-size: .88rem; opacity: .75; }
.others p { margin: 12px 0 0; }
@media (max-width: 760px) { .app-teaser { grid-template-columns: 1fr; justify-items: center; text-align: center; } .app-points { justify-items: center; } .app-cta { justify-content: center; } .phone { width: min(280px, 82vw); } }

.mk .mk-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0; }
.mk .mk-files a:not(.btn) { font-weight: 650; }
.mk-stage { display: grid; place-items: center; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--radius); }
.mk-stage img { width: 100%; height: auto; }
.mk-stage.lime { background: var(--c-lime); }
.mk-stage.ink { background: var(--c-ink); border-color: var(--c-ink); }
.mk-stage.paper { background: #fff; }
.mk-hero .mk-stage { padding: clamp(2rem, 8vw, 6rem) clamp(1.5rem, 10vw, 9rem); }
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.mk-version { margin: 0; }
.mk-version .mk-stage { aspect-ratio: 16 / 8; }
.mk-version figcaption h3 { margin: 1rem 0 0.3rem; font-size: 1.1rem; }
.mk-version figcaption p { margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.92rem; }
.mk-version figcaption .mk-files { color: var(--text); font-size: 0.9rem; }
.mk-signs .mk-stage img { width: min(10rem, 40%); }
.mk-rules { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: center; }
/* The clear space: half the sygnet's height, 9.2% of the mark's width (percent padding follows the width). */
.mk-clear { padding: 9.2%; outline: 2px dashed var(--c-lime-d); outline-offset: -2px; background: #fff;
  background-image: linear-gradient(var(--c-lav-soft), var(--c-lav-soft)); background-clip: padding-box; }
.mk-clear img { display: block; width: 100%; height: auto; background: #fff; }
.mk-swatches, .mk-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.mk-swatch, .mk-type li { margin: 0; padding: 1.25rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.mk-chip { display: block; height: 6rem; margin-bottom: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
.mk-chip.lime { background: var(--c-lime); } .mk-chip.ink { background: var(--c-ink); } .mk-chip.white { background: #fff; } .mk-chip.paper { background: var(--c-bg); }
.mk-swatch h3, .mk-type h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.mk-swatch dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0 0 0.6rem; font-size: 0.88rem; }
.mk-swatch dt { color: var(--text-muted); } .mk-swatch dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-swatch p, .mk-type li > p:last-child { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.mk-sample { margin: 0 0 1rem; color: var(--c-ink); line-height: 1.1; }
.mk-sample.archivo { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 1.6rem; letter-spacing: -0.02em; }
.mk-sample.manrope { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.35rem; }
.mk-sample.inter { font-family: Inter, sans-serif; font-size: 1.05rem; line-height: 1.5; }
@media (max-width: 46rem) { .mk-grid, .mk-rules { grid-template-columns: 1fr; } }
@media print { header.site, footer.site, .skip-link { display: none; } .mk-stage, .mk-chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .mk section { break-inside: avoid; } }