/* medagenda.pl: one stylesheet for every page (plain HTML, no build step). */
:root {
  /* Cool paper and slate ink; the brand brown only on the logo and the main buttons. The four schedule
     colours (--c-*) are the therapists' colours in the app's calendar. */
  --bg: #ffffff;
  --bg-soft: #f1f4f2;
  --bg-deep: #e6ece9;
  --card: #ffffff;
  --ink: #17232a;
  --ink-muted: #52616a;
  --accent: #8a4b27;
  --accent-dark: #6d391b;
  --accent-soft: #f4e8df;
  --gold: #e2a63a;
  --sage: #5f7f55;
  --sage-ink: #45603d;
  --sage-soft: #e4ede1;
  --line: #dbe3df;
  --night: #17232a;
  --c-sage: #6f9a62;
  --c-sky: #4f86b8;
  --c-sun: #dfa23a;
  --c-plum: #946690;
  --c-clash: #c6402c;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(23 35 42 / 6%), 0 10px 28px rgb(23 35 42 / 8%);
  --shadow-lg: 0 2px 4px rgb(23 35 42 / 6%), 0 28px 56px rgb(23 35 42 / 12%);
  --gutter: clamp(16px, 4vw, 56px);
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-dark); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 84px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; background: var(--card); padding: 8px 14px; border-radius: 10px; }
.eyebrow { display: inline-block; font-size: 0.95rem; font-weight: 600; color: var(--sage-ink); margin-bottom: 10px; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--ink-muted); max-width: 44em; text-wrap: pretty; }
.section-head { max-width: 860px; margin-bottom: clamp(28px, 4vw, 48px); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .lead { margin-left: auto; margin-right: auto; }
section { padding: clamp(56px, 8vw, 112px) 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 600 1rem var(--sans); text-decoration: none; border: 2px solid transparent; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 0.95rem; gap: 0; }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1.08rem; }

/* Header: one row on wide screens; on phones the section links sit below and scroll with the page. */
.top { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 88%); backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 1.28rem var(--serif); color: var(--ink); text-decoration: none; flex: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.nav-inline { display: none; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.login { color: var(--ink); text-decoration: none; padding: 10px 8px; font-size: 0.97rem; white-space: nowrap; font-weight: 500; }
.wide { display: none; }
.nav-inline a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; color: var(--ink-muted); text-decoration: none; font-size: 0.97rem; }
.nav-inline a:hover { background: var(--bg-soft); color: var(--ink); }

/* Phone menu: a native <details>, so it opens without JavaScript (consent.js only closes it after a link);
   from 1000 px the links sit in the header instead. */
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--bg-soft); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, background 0.2s; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu[open] .menu-icon { background: transparent; }
.menu[open] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 70px); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 4px var(--gutter) 12px; }
.menu-panel ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; }
.menu-panel a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.menu-panel li:last-child a { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .menu-icon, .menu-icon::before, .menu-icon::after { transition: none; } }
@media (max-width: 639px) { .login { display: none; } }

/* Hero: full-bleed warm band. */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 104px); background: var(--bg); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .actions { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 24px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 0; color: var(--ink-muted); font-size: 0.97rem; }
.trust li, .check li { display: flex; align-items: flex-start; gap: 10px; }
.trust li::before, .check li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.window { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.window-bar span { margin-left: 12px; flex: 1; max-width: 280px; font-size: 0.8rem; color: var(--ink-muted); background: var(--bg); border-radius: 999px; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window svg { width: 100%; height: auto; }
.window figcaption { padding: 10px 18px 14px; font-size: 0.85rem; color: var(--ink-muted); }

/* Key facts band. */
.facts-band { background: var(--night); color: #f3f6f4; padding: clamp(36px, 5vw, 56px) 0; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.facts strong { display: block; font: 600 clamp(1.8rem, 3.4vw, 2.6rem)/1.1 var(--serif); color: var(--gold); margin-bottom: 6px; }
.facts span { color: #c3cfd0; font-size: 0.97rem; }

/* Definition */
.define-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.define-text p { font-size: 1.12rem; }
.anatomy { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.anatomy h3 { margin-bottom: 18px; }
.anatomy ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.anatomy li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.anatomy li b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font: 600 1.1rem var(--serif); }
.anatomy li span { color: var(--ink-muted); }
.anatomy li strong { color: var(--ink); display: block; }
.anatomy .rule { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--sage-soft); color: var(--sage-ink); font-weight: 600; }

.band-soft { background: var(--bg-soft); }
.band-deep { background: linear-gradient(180deg, var(--bg-soft), var(--bg-deep)); }
.grid { display: grid; gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 30px); }
.card p { color: var(--ink-muted); margin: 0; }
.card h3 { margin-bottom: 8px; }
.icon { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 16px; }
.icon svg { width: 24px; height: 24px; }
.check { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; color: var(--ink-muted); }

/* Roles */
.role { display: flex; flex-direction: column; }
.role .who { font-size: 0.92rem; font-weight: 600; color: var(--accent-dark); margin-bottom: 6px; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 18px; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 1.05rem var(--sans); margin-bottom: 14px; }
.steps p { margin: 0; color: var(--ink-muted); }

/* Security */
.security { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.sec-list { display: grid; gap: 14px; }
.sec-item { display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.sec-item .icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; background: var(--sage-soft); }
.sec-item h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; margin: 0 0 4px; }
.sec-item p { margin: 0; color: var(--ink-muted); font-size: 0.97rem; }
.sec-note { background: var(--night); color: #e8eeec; border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.sec-note h3 { color: #fff; }
.sec-note .check { color: #c3cfd0; }
.sec-note .check li::before { background-color: #8a9a78; }

.audience { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.audience li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 500; }

/* Pricing */
.plans { display: grid; gap: 18px; }
.plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.plan .tag { position: absolute; top: -14px; left: 26px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.plan .for { color: var(--ink-muted); font-size: 0.95rem; margin: -2px 0 10px; }
.price { font: 600 2.5rem/1.1 var(--serif); margin: 4px 0 2px; }
.price small { font: 400 1rem var(--sans); color: var(--ink-muted); }
.gross { color: var(--ink-muted); font-size: 0.92rem; margin-bottom: 8px; }
.plan .check { margin-bottom: 24px; }
.plan .btn { margin-top: auto; }
.plans-note { max-width: 62em; margin: 26px auto 0; color: var(--ink-muted); font-size: 0.97rem; text-align: center; text-wrap: pretty; }

/* Enterprise */
.enterprise { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 56px); box-shadow: var(--shadow); }
.enterprise .contact p { color: var(--ink-muted); }
.enterprise .contact .mail { margin-top: 14px; }

/* FAQ: native details/summary, no JavaScript. */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; line-height: 1; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--ink-muted); }

/* Final call to action: full-bleed dark band. */
.cta-final { background: var(--night); color: #f3f6f4; text-align: center; }
.cta-final h2 { color: #fff; }
.cta-final p { color: #c3cfd0; max-width: 40em; margin-left: auto; margin-right: auto; }
.cta-final .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.cta-final .btn-primary { background: var(--gold); color: var(--night); }
.cta-final .btn-primary:hover { background: #ecb85c; color: var(--night); }
.cta-final .btn-ghost { background: transparent; color: #f3f6f4; border-color: #46565d; }
.cta-final .btn-ghost:hover { border-color: var(--gold); color: #fff; }

footer { background: var(--bg-deep); color: var(--ink-muted); font-size: 0.96rem; padding: clamp(40px, 5vw, 64px) 0 32px; }
footer .cols { display: grid; gap: 28px; }
footer .about p { margin-top: 14px; }
footer h3 { font: 700 0.95rem var(--sans); letter-spacing: 0; color: var(--ink); margin-bottom: 12px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer a { color: var(--ink-muted); text-decoration: none; }
footer a:hover { color: var(--accent-dark); text-decoration: underline; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; font-size: 0.88rem; }
/* Company details required on the website of a sp. z o.o. (art. 206 § 1 KSH). */
.legal .company { flex-basis: 100%; margin: 4px 0 0; font-size: 0.8rem; line-height: 1.5; }

.cookies { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; max-width: 540px; margin-left: auto; display: grid; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px; font-size: 0.95rem; color: var(--ink-muted); }
.cookies[hidden] { display: none; }
.cookies strong { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--ink); }
.cookies a { color: var(--accent-dark); }
.cookies-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies-choices { display: grid; gap: 10px; }
.cookies-choices label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cookies-choices input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-dark); }
.cookies-choices b { display: block; color: var(--ink); font-weight: 600; }
/* Both choices look the same: refusing is as easy as agreeing. */
.cookies-actions .btn { flex: 1; border-color: var(--accent); color: var(--accent-dark); background: var(--card); }
.cookies-actions .btn:hover { background: var(--accent); color: #fff; }
.linklike { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-muted); cursor: pointer; text-align: left; }
.linklike:hover { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 400px) {
  .brand { font-size: 1.12rem; gap: 8px; }
  .brand svg { width: 30px; height: 30px; }
  .top .wrap { gap: 8px; }
  .top-actions { gap: 2px; }
  .login { padding: 10px 6px; }
  .btn-sm { padding: 8px 12px; }
}
@media (min-width: 640px) {
  .hero .actions { flex-direction: row; }
  .wide { display: inline; }
  .steps, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: repeat(2, 1fr); align-items: start; }
  footer .cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .nav-inline { display: flex; gap: 2px; list-style: none; margin: 0 0 0 28px; padding: 0; }
  .menu { display: none; }
  .top .wrap { min-height: 74px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .define-grid { grid-template-columns: 1.1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .security { grid-template-columns: 1.35fr 1fr; }
  .sec-list { grid-template-columns: repeat(2, 1fr); }
  .enterprise { grid-template-columns: 1.4fr 1fr; }
  footer .cols { grid-template-columns: 1.3fr repeat(4, 1fr); }
}
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }

/* Subpages: hero with breadcrumbs, comparison table, related links. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-hero { padding: clamp(32px, 6vw, 80px) 0 clamp(40px, 6vw, 80px); background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }
.page-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.8rem); max-width: 17em; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 0.92rem; color: var(--ink-muted); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: #9aa8ad; }
.crumbs a { color: var(--ink-muted); }
.check-2 { margin: 0; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--bg-soft); font: 600 1.1rem var(--serif); color: var(--ink); }
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare td { color: var(--ink-muted); }
.compare tr:last-child > * { border-bottom: 0; }
.related a.card { display: block; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.related a.card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.related a.card h3::after { content: " →"; color: var(--accent); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.more-wrap { margin: 28px 0 0; }
.plan-hint { max-width: 52em; }
.plan-hint p + p { margin-top: 14px; }
.audience a { color: var(--ink); text-decoration: none; }
.audience li:has(a) { border-color: #c5d0cb; }
.audience li:has(a):hover { border-color: var(--accent); }
.audience li:has(a) a::after { content: " →"; color: var(--accent); }
@media (min-width: 640px) {
  .check-2 { grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
}

/* Homepage: a feature worth a band of its own. */
.news-band { background: var(--sage-soft); }
.news { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; }
.news .check { margin: 0; color: var(--ink); }
@media (min-width: 1000px) { .news { grid-template-columns: 1.3fr 1fr; } }

/* Footer: the company's social profiles. */
footer .social { margin-top: 10px; }
/* Example week on the audience pages: the day view next to five moments of the week. */
.week { display: grid; gap: 28px; align-items: start; }
.week-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.week-days li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.week-days .day { display: block; margin-bottom: 4px; font-size: 0.9rem; font-weight: 600; color: var(--accent-dark); }
.week-days p { margin: 0; }
@media (min-width: 1000px) {
  .week { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* Blog: the post list and the article (pages rendered from homepage/blog/wpisy.json). */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.post-card a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.post-card a:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.post-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-card .post-meta, .post-card h2, .post-card p, .post-card .more { margin-left: clamp(18px, 2.2vw, 26px); margin-right: clamp(18px, 2.2vw, 26px); }
.post-card .post-meta { margin-top: 18px; }
.post-card h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-top: 6px; }
.post-card p { color: var(--ink-muted); margin-top: 0; flex: 1; }
.post-card .more { margin-bottom: 22px; color: var(--accent-dark); }
.post-meta { font-size: 0.92rem; color: var(--ink-muted); margin: 0 0 10px; }
.post-hero .wrap { max-width: 860px; }
.post-hero h1 { max-width: 22em; font-size: clamp(2rem, 4.6vw, 3.2rem); }
.post-wrap { max-width: 860px; padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 96px); }
.post-figure { margin: 0 0 clamp(28px, 4vw, 44px); }
.post-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }
.post-figure figcaption { font-size: 0.82rem; color: var(--ink-muted); margin-top: 8px; }
.post-figure figcaption a { color: var(--ink-muted); }
.prose { font-size: 1.1rem; line-height: 1.75; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin-top: 1.8em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 4px solid var(--gold); background: var(--card); border-radius: 0 14px 14px 0; color: var(--ink-muted); }
.prose .table-scroll { overflow-x: auto; margin: 0 0 1.4em; }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.97rem; line-height: 1.5; background: var(--card); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; background: var(--bg-soft); }
.prose .note { font-size: 0.92rem; color: var(--ink-muted); }
/* Blog: an app screenshot in the article (.shot frame from Co oferujemy). */
.post-shot { margin: 1.6em 0 2em; display: grid; justify-items: center; gap: 10px; }
.post-shot figcaption { font-size: 0.92rem; line-height: 1.5; color: var(--ink-muted); text-align: center; }
.post-cta { margin-top: clamp(32px, 5vw, 48px); }
.post-cta h2 { font-size: 1.5rem; }
.post-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-list { grid-template-columns: repeat(3, 1fr); } }

/* Home: the installable app (PWA), next to the events band. */
.app-cta { margin: 24px 0 0; }
.app-side { display: flex; align-items: center; gap: clamp(20px, 3vw, 32px); }
.app-side .check { margin: 0; color: var(--ink); }
.app-icon { width: clamp(88px, 14vw, 128px); height: auto; flex: none; filter: drop-shadow(0 10px 18px rgb(23 35 42 / 0.2)); }
@media (max-width: 479px) { .app-side { flex-direction: column; align-items: flex-start; } }

/* Homepage (2026-10-30): a live schedule in the hero, the week of a practice as a road, little text. */
.home-hero { padding: clamp(36px, 6vw, 88px) 0 clamp(48px, 7vw, 96px); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }
.home-hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.home-hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 11em; }
.home-hero .lead { max-width: 30em; }
.home-hero .actions { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 16px; }
.hero-small { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }

/* The schedule: the therapists' columns and the SI room, one row per half hour. One booking tries to take
   the room while it is busy, turns red, and moves to the first free slot: the product in four seconds. */
.board { --row: clamp(26px, 4.2vw, 36px); margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: clamp(12px, 2vw, 20px); }
.board-grid { display: grid; grid-template-columns: 38px repeat(4, minmax(0, 1fr)); grid-template-rows: 30px repeat(8, var(--row)); gap: 0 6px; font-size: clamp(0.68rem, 1.5vw, 0.8rem); line-height: 1.25; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) * 2 - 1px), var(--line) calc(var(--row) * 2 - 1px) calc(var(--row) * 2)) 0 30px / 100% calc(100% - 30px) no-repeat; }
.bh { grid-row: 1; align-self: center; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-room { color: var(--sage-ink); }
.bt { grid-column: 1; align-self: start; color: var(--ink-muted); font-variant-numeric: tabular-nums; transform: translateY(-0.6em); }
.bk { margin: 2px 0; padding: 4px 6px 4px 9px; border-radius: 8px; border-left: 4px solid; overflow: hidden; color: var(--ink-muted); background: var(--bg-soft); }
.bk b { display: block; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk.sky { border-color: var(--c-sky); background: #e6eff7; }
.bk.sage { border-color: var(--c-sage); background: #e7f0e3; }
.bk.plum { border-color: var(--c-plum); background: #f1e7f0; }
.bk.room { border-style: dashed; border-width: 0 0 0 4px; }
.board-status { position: relative; height: 1.6em; margin-top: 12px; font-size: 0.9rem; font-weight: 600; }
.board-status span { position: absolute; inset: 0; }
.st-clash { color: var(--c-clash); opacity: 0; }
.st-ok { color: var(--sage-ink); }
@media (prefers-reduced-motion: no-preference) {
  .moving { animation: book 4.2s cubic-bezier(.3, .7, .2, 1) .7s both; }
  .st-clash { animation: clash-text 4.2s linear .7s both; }
  .st-ok { animation: ok-text 4.2s linear .7s both; }
}
@keyframes book {
  0% { opacity: 0; transform: translateY(calc(var(--row) * -3)) scale(.94); }
  8% { opacity: 1; transform: translateY(calc(var(--row) * -3)); border-color: var(--c-clash); background: #fbe5e1; }
  14%, 26% { transform: translateY(calc(var(--row) * -3)) translateX(0); }
  18% { transform: translateY(calc(var(--row) * -3)) translateX(-4px); }
  22% { transform: translateY(calc(var(--row) * -3)) translateX(4px); }
  44% { transform: translateY(calc(var(--row) * -3)); border-color: var(--c-clash); background: #fbe5e1; }
  70%, 100% { opacity: 1; transform: none; border-color: var(--c-plum); background: #f1e7f0; }
}
.board.live .st-clash, .board.live .st-ok { animation: none; opacity: 0; }
@keyframes clash-text { 0%, 6% { opacity: 0; } 10%, 48% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ok-text { 0%, 60% { opacity: 0; } 72%, 100% { opacity: 1; } }

/* The week as a road: one line through five days, each stop coloured like a therapist in the schedule. */
.road-band { padding-top: clamp(64px, 9vw, 120px); }
.road-grid { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
.road-head .btn { margin-top: 8px; }
.road { --dot: 18px; position: relative; list-style: none; margin: 0; padding: 0 0 0 calc(var(--dot) + 22px); display: grid; gap: clamp(28px, 4vw, 44px); }
.road::before { content: ""; position: absolute; left: calc(var(--dot) / 2 - 1.5px); top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--c-sky), var(--c-sage) 30%, var(--c-sun) 52%, var(--c-plum) 74%, var(--accent)); }
.road li { position: relative; }
.road li::before { content: ""; position: absolute; left: calc((var(--dot) + 22px) * -1); top: 3px; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--bg); border: 4px solid var(--dc); box-sizing: border-box; }
.road .day { display: block; font-weight: 700; color: var(--dc); margin-bottom: 4px; }
.road .pain { margin: 0 0 4px; color: var(--ink-muted); }
.road .fix { margin: 0; color: var(--ink); font-size: 1.12rem; font-weight: 600; line-height: 1.45; max-width: 32em; }
.d-sky { --dc: var(--c-sky); }
.d-sage { --dc: var(--sage); }
.d-sun { --dc: #b7801f; }
.d-plum { --dc: var(--c-plum); }
.d-brand { --dc: var(--accent); }

/* Who it is for, and three promises instead of a security section. */
.home-who h2 { max-width: 18em; }
.who-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0; }
.who-links a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.who-links a:hover { border-color: var(--ink); }
.promises { display: grid; gap: 20px; list-style: none; padding: 0; margin: clamp(36px, 5vw, 56px) 0 0; border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 32px); }
.promises strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.promises span { color: var(--ink-muted); }
.plans-note a { white-space: nowrap; }
@media (min-width: 640px) {
  .home-hero .actions { flex-direction: row; }
  .promises { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (min-width: 1000px) {
  .home-hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .road-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .road-head { position: sticky; top: 110px; }
}

/* Co oferujemy: a feature as text with three steps beside its screenshot; wide screenshots go below the text. */
.show { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.show-text { min-width: 0; max-width: 560px; }
.show-text .lead { margin-bottom: 1.4em; }
.show-media { margin: 0; min-width: 0; display: grid; justify-items: center; gap: 12px; }
.show-media figcaption { font-size: 0.92rem; color: var(--ink-muted); }
.howto { list-style: none; counter-reset: howto; padding: 0; margin: 0; display: grid; gap: 14px; }
.howto li { counter-increment: howto; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.howto li::before { content: counter(howto); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 0.95rem; color: var(--ink); transform: translateY(-2px); }
.band-soft .howto li::before { background: var(--bg); }
.show .note { margin: 20px 0 0; color: var(--ink-muted); font-size: 0.98rem; }
.shot { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.shot img { width: 100%; height: auto; }
.shot.phone { max-width: 300px; border-radius: 28px; border-width: 6px; border-color: var(--night); }
.shot.phone.tall { max-height: 640px; }
.pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; }
.pair .shot.phone { max-width: 240px; justify-self: center; }
.show.wide .show-text { max-width: 760px; }
.show.wide .howto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 28px; }
.plans-mini { display: grid; gap: 10px; justify-items: stretch; width: 100%; max-width: 440px; justify-self: center; }
.plans-mini p { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.plans-mini span { font-variant-numeric: tabular-nums; font-weight: 600; }
.plans-mini small { grid-column: 1 / -1; color: var(--ink-muted); font-size: 0.92rem; }
.plans-mini a { justify-self: start; margin-top: 4px; }
.center .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
@media (min-width: 1000px) {
  .show:not(.wide) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .show.flip:not(.wide) .show-text { order: 2; }
  .show.flip:not(.wide) .show-media { order: 1; }
}
@media (max-width: 479px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
}

/* Chat button (consent.js): stands in for the tawk.to widget until the visitor clicks it. Under the cookie banner. */
.chat-open { position: fixed; z-index: 25; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px 10px 14px; border: 0; border-radius: 999px; background: var(--night); color: #fff; font: 600 0.98rem var(--sans); box-shadow: var(--shadow-lg); cursor: pointer; }
.chat-open:hover { background: #24343c; }
.chat-open[hidden] { display: none; }
.chat-open.is-loading { cursor: progress; opacity: 0.85; }
@media print { .chat-open { display: none; } }

/* Contact form at the bottom of the homepage (kontakt.js sends it to /api/contact). */
.contact .wrap { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact-intro h2 { margin-bottom: 12px; }
.contact-mail { margin: 16px 0 0; color: var(--ink-muted); }
.contact-mail a { color: var(--accent-dark); font-weight: 600; }
.contact-form { display: grid; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.96rem; }
.contact-form small { font-weight: 400; color: var(--ink-muted); }
.contact-form input:not([type="checkbox"]), .contact-form textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid #c5d0cb; border-radius: 10px; background: #fff; color: var(--ink); font: 400 1rem var(--sans); }
.contact-form textarea { resize: vertical; min-height: 128px; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.contact-form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink-muted); }
.contact-form .consent input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent-dark); }
.contact-form .consent a { color: var(--accent-dark); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form [data-turnstile]:empty { display: none; }
.contact-status { margin: 0; }
.contact-status:empty { display: none; }
.contact-status.is-error { color: var(--c-clash); }
.contact-form button { justify-self: start; }
.contact-form button[disabled] { cursor: progress; opacity: 0.7; }
.contact-sent { margin: 0; padding: clamp(18px, 3vw, 32px); background: var(--sage-soft); border-radius: 18px; color: var(--sage-ink); font-weight: 600; }
@media (min-width: 640px) {
  .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form .full { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .contact .wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* Home: a slim bar under the hero with the Android app (Google Play) and the iPhone install guide. */
.app-strip { padding: 18px 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.app-strip-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.app-strip-inner p { margin: 0; font-weight: 600; color: var(--ink); }
.app-strip-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.app-btn { min-height: 46px; padding: 10px 20px; }
.app-btn svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
@media (min-width: 640px) {
  .app-strip-buttons { flex-direction: row; width: auto; max-width: none; }
}
@media (min-width: 900px) {
  .app-strip-inner { flex-direction: row; justify-content: center; gap: 24px; }
}

/* Aplikacja na iPhone'a: five steps, each with a schematic drawing of the phone (inline SVG, not screenshots). */
.ios-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ios-steps li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.ios-steps h3 { font-size: 1.12rem; display: flex; align-items: baseline; gap: 10px; }
.ios-steps p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; }
.ios-num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.92rem; letter-spacing: 0; transform: translateY(-1px); }
.fig-ios { width: 100%; height: auto; }
.fig-ios text { font-family: var(--sans); fill: var(--ink); }
.fig-ios .ph { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.fig-ios .isl { fill: var(--ink); }
.fig-ios .soft { fill: var(--bg-soft); }
.fig-ios .home-bg { fill: var(--bg-deep); }
.fig-ios .field { fill: #fff; stroke: #c5d0cb; stroke-width: 1.5; }
.fig-ios .btnfill { fill: var(--accent); }
.fig-ios .sheet { fill: #fff; }
.fig-ios .dim { fill: var(--ink); opacity: 0.3; }
.fig-ios .ico { fill: none; stroke: var(--ink-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fig-ios .faint { opacity: 0.4; }
.fig-ios .hl { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.fig-ios .hl-ico { stroke: var(--accent-dark); stroke-width: 2.2; }
.fig-ios .tap { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fig-ios .bar { fill: none; stroke: #c5d0cb; stroke-width: 4; stroke-linecap: round; }
.fig-ios .on { fill: var(--sage); }
.fig-ios .app rect { fill: #fff; fill-opacity: 0.8; }
.fig-ios .lbl rect { fill: #b8c4bf; }
.fig-ios .t-muted { fill: var(--ink-muted); }
.fig-ios .t-white { fill: #fff; }
.fig-ios .t-accent { fill: var(--accent-dark); }
.ios-note { margin: 20px 0 0; color: var(--ink-muted); font-size: 0.95rem; }
.ios-android { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ios-android h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 6px; }
@media (min-width: 640px) {
  .ios-android { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 760px) {
  .ios-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ios-steps li { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; padding: 22px 20px; }
  .fig-ios { max-width: 168px; margin: 0 auto 6px; }
}
@media (min-width: 1100px) { .ios-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ios-push { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; width: 100%; max-width: 380px; padding: 14px 16px; background: rgb(255 255 255 / 92%); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); font-size: 0.95rem; line-height: 1.4; }
.ios-push svg { width: 40px; height: 40px; }
.ios-push p { margin: 0; }
.ios-push-head { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-muted); font-size: 0.85rem; }
.ios-push-head b { color: var(--ink); }
.app-strip-inner p { text-wrap: balance; }