/* ==========================================================================
   KredytGo: kierunek „Drobny druk”
   Czytamy regulaminy za użytkownika i zaznaczamy, co ważne.
   Motyw marki: zakreślacz, notatka na marginesie,
   kartki dokumentów ułożone warstwami (głębia: papier → kartka → stos kartek → atrament).
   Tryb ciemny: później (plan p. 10), wszystkie kolory jawnie w tokenach.
   ========================================================================== */

:root {
	--ink: #141B2D;
	--ink-2: #1F2842;
	--ink-3: #2B3654;
	--paper: #F8F7F3;
	--paper-2: #F0EEE7;
	--card: #FFFFFF;
	--line: #E3E1DA;
	--line-strong: #CFCCC2;
	--muted: #5B6272;
	--pen: #2743C9;
	--pen-soft: #EEF1FB;
	--marker: #FFE36E;
	--marker-strong: #FFD23F;
	--brand-yellow: #FED02B;
	--good: #0D6B45;
	--good-bg: #E5F3EB;
	--warn: #8A5A00;
	--warn-bg: #FFF3D6;
	--soft: #F0EFEA;
	--bar2: #8E97AC;
	--bar4: #C9CDD8;

	--display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

	--r-sm: 8px;
	--r: 14px;
	--r-lg: 20px;
	--container: 1120px;
	--gutter: 20px;

	/* Głębia: trzy poziomy uniesienia kartki nad papierem. */
	--sh-1: 0 1px 1px rgba(20, 27, 45, .04), 0 2px 4px -2px rgba(20, 27, 45, .06), 0 14px 28px -20px rgba(20, 27, 45, .28);
	--sh-2: 0 1px 1px rgba(20, 27, 45, .05), 0 8px 16px -10px rgba(20, 27, 45, .14), 0 32px 56px -30px rgba(20, 27, 45, .40);
	--sh-3: 0 2px 2px rgba(20, 27, 45, .05), 0 18px 30px -16px rgba(20, 27, 45, .22), 0 50px 80px -40px rgba(20, 27, 45, .50);
	--sh-ink: 0 30px 60px -36px rgba(20, 27, 45, .65);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .17 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Podstawy
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
	margin: 0;
	background-color: var(--paper);
	background-image: var(--grain);
	color: var(--ink);
	font: 400 16px/1.6 var(--sans);
	font-feature-settings: "kern";
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.site-main { flex: 1 0 auto; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--pen); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 6px; }
.num, table { font-variant-numeric: tabular-nums; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* --------------------------------------------------------------------------
   Motyw marki
   -------------------------------------------------------------------------- */
/* Zakreślacz: jedno słowo lub liczba na widok. */
.mark, .prose mark {
	background: none;
	background-image: linear-gradient(100deg, transparent .12em, var(--marker) .22em, var(--marker) calc(100% - .2em), transparent calc(100% - .08em));
	background-size: 100% .5em;
	background-position: 0 88%;
	background-repeat: no-repeat;
	padding-inline: .06em;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Na granacie zakreślacz byłby za jasny: zaznaczone słowa po prostu żółte. */
.band--ink .mark { background: none; padding: 0; color: var(--marker); font-weight: 600; }


.section-title { font: 500 clamp(26px, 3.2vw, 34px)/1.12 var(--serif); letter-spacing: -.01em; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 20px; margin-bottom: 22px; }
.section-head p { color: var(--muted); max-width: 60ch; }
.section-head .more { font-weight: 700; text-decoration: none; white-space: nowrap; }
.section-head .more:hover { text-decoration: underline; }

/* Notatka na marginesie: maks. 1–2 na ekran. */
.note { font: 600 22px/1.05 var(--hand); color: var(--pen); display: flex; gap: 8px; align-items: flex-start; }
.note svg { flex: none; margin-top: 2px; }
.note--ink { color: var(--marker); }

/* Plama zakreślacza pod ikoną liniową. */
.icon-blob { position: relative; width: 52px; height: 52px; display: grid; place-items: center; flex: none; }
.icon-blob::before { content: ""; position: absolute; inset: 9px 3px 5px 9px; background: var(--marker); border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; transform: rotate(-8deg); }
.icon-blob svg { position: relative; color: var(--ink); }

/* Kartka i stos kartek: podstawowy nośnik głębi. */
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); position: relative; }
.sheet--lifted { box-shadow: var(--sh-2); }
/* Kartki pod spodem: z-index -1 bez własnego kontekstu warstw, więc leżą pod tłem kartki, a nad papierem strony. */
.stack { position: relative; }
.stack::before, .stack::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #FDFCF9; border: 1px solid var(--line); z-index: -1; pointer-events: none; }
.stack::before { transform: translate(6px, 7px) rotate(.7deg); box-shadow: var(--sh-1); }
.stack::after { transform: translate(-4px, 4px) rotate(-.5deg); background: #FAF9F5; }

/* --------------------------------------------------------------------------
   Przyciski i pola
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s; white-space: nowrap; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 8px 18px -10px rgba(20, 27, 45, .7); }
.btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 24px -12px rgba(20, 27, 45, .75); text-decoration: none; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); text-decoration: none; }
.btn--light { background: #fff; color: var(--ink); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn svg { flex: none; }

.field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .01em; }
.field > span:first-child { white-space: nowrap; }
.inp { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; padding: 0 12px; height: 46px; min-width: 0; box-shadow: inset 0 1px 2px rgba(20, 27, 45, .05); transition: border-color .15s, box-shadow .15s; }
.inp input, .inp select { border: 0; outline: 0; width: 100%; font-size: 17px; font-weight: 700; color: var(--ink); background: transparent; min-width: 0; padding: 0; height: 100%; font-variant-numeric: tabular-nums; }
.inp input::placeholder { color: #9AA0AD; font-weight: 500; }
.inp em { font-style: normal; color: var(--muted); font-weight: 600; padding-left: 6px; white-space: nowrap; }
.inp:focus-within { border-color: var(--pen); box-shadow: 0 0 0 3px rgba(39, 67, 201, .14); }
.inp select { appearance: none; cursor: pointer; }
.unit { display: inline-flex; border-left: 1px solid var(--line); margin-left: 8px; padding-left: 4px; gap: 2px; }
.unit button { border: 0; background: transparent; font-size: 13px; font-weight: 700; color: var(--muted); border-radius: 6px; padding: 4px 6px; cursor: pointer; }
.unit button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px; background: #fff; height: 46px; box-shadow: inset 0 1px 2px rgba(20, 27, 45, .05); }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; border-radius: 7px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; }
.seg input:checked + span { background: var(--ink); color: #fff; box-shadow: 0 4px 10px -6px rgba(20, 27, 45, .8); }
.seg input:focus-visible + span { outline: 2px solid var(--pen); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.check small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Nagłówek i stopka
   -------------------------------------------------------------------------- */
/* Nagłówek w atramencie: żółte „GO” w logo ma tu kontrast ok. 11:1 (na jasnym tle 1,37:1). Logo w Customizerze w wersji na ciemne tło. */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(20, 27, 45, .97); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .06); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(20, 27, 45, .6); }
.site-header__inner { display: flex; align-items: center; gap: 26px; min-height: 68px; }
.logo { display: inline-flex; align-items: baseline; font: 600 25px/1 var(--serif); letter-spacing: -.015em; color: #fff; text-decoration: none; margin-right: auto; }
.logo b { color: var(--brand-yellow); font-weight: 600; position: relative; }
.logo span { isolation: isolate; display: inline-flex; }
/* Logo wgrane w Customizerze: wysokość z Wygląd → Dostosuj → Tożsamość witryny (inc/customizer.php). */
.custom-logo-link { display: inline-flex; align-items: center; flex: none; margin-right: auto; }
.custom-logo { display: block; width: auto; max-width: none; height: var(--logo-h, 40px); }
.nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__list a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav__list a:hover { background: rgba(20, 27, 45, .05); }
.nav__list > li > a { color: #E8EAF0; }
.nav__list > li > a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a { position: relative; }
.nav__list .current-menu-item > a::after, .nav__list .current-menu-ancestor > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--brand-yellow); border-radius: 2px; }
/* Podmenu (Rankingi): kartka wysuwana spod pozycji po najechaniu albo przejściu klawiszem Tab. */
.nav__list > li { position: relative; }
.nav__list .menu-item-has-children > a { display: flex; align-items: center; gap: 7px; }
.nav__list .menu-item-has-children > a::before { content: ""; order: 1; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); opacity: .55; transition: transform .15s; }
.sub-menu { position: absolute; top: calc(100% + 8px); left: -6px; z-index: 5; width: max-content; min-width: 260px; max-width: 380px; list-style: none; margin: 0; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s; }
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__list > li:hover > .sub-menu, .nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__list > li:hover > a::before, .nav__list > li:focus-within > a::before { transform: translateY(2px) rotate(225deg); }
.nav__list .sub-menu a { padding: 9px 12px; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.nav__list .sub-menu .current-menu-item > a { background: var(--pen-soft); color: var(--pen); }
.nav__list .sub-menu .current-menu-item > a::after { content: none; }
.sub-menu .menu-item--all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.nav__list .sub-menu .menu-item--all > a { color: var(--pen); font-weight: 600; }
.nav-toggle { display: none; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; border-radius: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
/* Przycisk w nagłówku w kolorze logo: jedyna jasna plama w pasku. */
.site-header .header-cta { background: var(--brand-yellow); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); }
.site-header .header-cta:hover { background: #FFDB55; color: var(--ink); }
.nav-toggle__close { display: none; }
.header-cta { display: inline-flex; }
/* Media społecznościowe (Customizer): ikony w menu górnym i stopce, tylko gdy wpisano linki. */
.nav { display: flex; align-items: center; gap: 14px; }
.social { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: #AEB5C6; transition: color .15s, background-color .15s; }
.social a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.social svg { width: 18px; height: 18px; display: block; }
.social--header { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14); }
.site-footer .social--footer { display: flex; gap: 4px; margin-top: 18px; margin-left: -9px; }
.site-footer .social a { color: #AEB5C6; }
.site-footer .social a:hover { color: #fff; }

.crumbs { font-size: 13px; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.site-footer { margin-top: 80px; background: var(--ink); color: #C5CAD6; position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; pointer-events: none; }
.site-footer > * { position: relative; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 56px 36px; }
.site-footer__brand { font: 600 26px/1 var(--serif); color: #fff; margin-bottom: 14px; }
.site-footer__brand b { color: var(--marker); font-weight: 600; }
.site-footer__brand--logo img { display: block; width: auto; height: var(--logo-h, 40px); }
.site-footer__about p { font-size: 15px; line-height: 1.6; max-width: 36ch; }
.site-footer__title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8E97AC; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.site-footer__legal { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 22px 34px; display: grid; gap: 8px; font-size: 13px; color: #8E97AC; }
.site-footer__legal p { max-width: 90ch; }

/* --------------------------------------------------------------------------
   Pasy (nagłówki stron)
   -------------------------------------------------------------------------- */
.band { padding-block: 26px 40px; position: relative; }
.band__inner { display: grid; gap: 14px; max-width: 820px; }
.band h1 { font: 700 clamp(34px, 4.8vw, 54px)/1.05 var(--display); letter-spacing: -.03em; }
.band .lede { font: 400 clamp(17px, 1.8vw, 19px)/1.55 var(--sans); color: #3C4253; max-width: 52ch; }
.band .lede--sans { font: 400 18px/1.55 var(--sans); color: var(--muted); }
.band__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.band__meta span { display: inline-flex; gap: 6px; align-items: center; }
.band__meta svg { color: var(--pen); flex: none; }
.band--overlap { padding-bottom: 92px; }
.band--overlap + .container > .overlap { margin-top: -64px; position: relative; z-index: 2; }
.band--ink { background: var(--ink); color: #fff; overflow: hidden; }
.band--ink::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 85% -10%, rgba(39, 67, 201, .45), transparent 60%), radial-gradient(700px 300px at 0% 120%, rgba(255, 227, 110, .10), transparent 60%); pointer-events: none; }
.band--ink::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .6; pointer-events: none; }
.band--ink > * { position: relative; z-index: 1; }
.band--ink h1, .band--ink .lede { color: #fff; }
.band--ink .crumbs, .band--ink .crumbs a, .band--ink .band__meta { color: #AEB5C6; }
.band--ink .band__meta svg { color: var(--marker); }
.band--ink .lede { color: #DDE1EA; }
.band--ink .lede--sans { color: #AEB5C6; max-width: 62ch; }
.band--under-nav { border-top: 1px solid rgba(255, 255, 255, .08); }
.band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; }
.band__note { margin: 0 24px 0 0; font-size: 27px; line-height: 1; transform: rotate(-4deg); }

/* --------------------------------------------------------------------------
   Hero strony głównej
   -------------------------------------------------------------------------- */

/* Spinacz (zdjęcie autora). */
.doc__clip { position: absolute; top: -14px; left: 34px; width: 22px; height: 54px; color: #9AA0AD; transform: rotate(-6deg); filter: drop-shadow(0 3px 2px rgba(20, 27, 45, .2)); }


.hero { padding-block: 40px 0; position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.hero h1 { font: 700 clamp(38px, 4.8vw, 60px)/1.04 var(--display); letter-spacing: -.035em; max-width: 13ch; }
.hero .lede { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 40ch; }
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn--lg { min-height: 54px; padding: 0 24px; font-size: 16px; border-radius: 12px; }

/* Zdjęcie w kształcie domu: żółty dom przesunięty jak przy niedokładnym druku, pod spodem kartka w kratkę ze szkicem rzutu. */
.hero__media { position: relative; padding: 18px 34px 34px 58px; }
.hero__defs { position: absolute; width: 0; height: 0; }
.hero__house { position: relative; aspect-ratio: 1 / .92; }
.hero__marker { position: absolute; inset: 0; background: var(--marker); clip-path: url(#kgt-house); transform: translate(30px, 28px); }
.hero__photo { position: absolute; inset: 0; filter: drop-shadow(0 1px 3px rgba(20, 27, 45, .14)) drop-shadow(0 28px 32px rgba(20, 27, 45, .22)); }
.hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; clip-path: url(#kgt-house); }
.hero__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(20, 27, 45, .16); stroke-width: 1; pointer-events: none; }
.hero__plan { position: absolute; left: 0; top: -2%; width: 44%; aspect-ratio: 260 / 300; padding: 6px; color: var(--pen); background-color: #FDFCF9; background-image: linear-gradient(rgba(39, 67, 201, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 67, 201, .07) 1px, transparent 1px); background-size: 14px 14px; background-position: -1px -1px; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--sh-1); transform: rotate(-6deg); }
.hero__plan svg { display: block; width: 100%; height: 100%; opacity: .5; }
.proof { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line-strong); }
.proof li { display: flex; align-items: center; gap: 14px; padding: 20px 22px; font-size: 14px; color: var(--muted); line-height: 1.4; }
.proof li:first-child { padding-left: 0; }
.proof li + li { border-left: 1px solid var(--line); }
.proof b { display: block; font: 700 25px/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.proof__icon { flex: none; width: 52px; height: 52px; }

/* --------------------------------------------------------------------------
   Sekcje
   -------------------------------------------------------------------------- */
.section { padding-top: 72px; }
.section--tight { padding-top: 48px; }
.shelf { background: var(--paper-2); border-block: 1px solid var(--line); margin-top: 72px; padding-block: 64px; box-shadow: inset 0 12px 20px -18px rgba(20, 27, 45, .25); }

/* Kafle rankingów jako teczki (zakładka + kartka). */
.folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
.folder { position: relative; display: grid; gap: 10px; padding: 22px 22px 20px; margin-top: 14px; text-decoration: none; color: var(--ink); border-radius: 0 var(--r) var(--r) var(--r); transition: transform .18s, box-shadow .18s; }
.folder::before { content: ""; position: absolute; left: -1px; top: -15px; width: 42%; height: 16px; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; }
.folder:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.folder h3 { font: 500 21px/1.2 var(--serif); }
.folder p { font-size: 14px; color: var(--muted); }
.folder__best { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-top: 1px dashed var(--line-strong); padding-top: 12px; font-size: 13px; color: var(--muted); }
.folder__best b { font: 500 20px/1 var(--serif); color: var(--ink); }

/* Logotypy banków na białych plakietkach. */
.bank-logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; width: 56px; height: 44px; padding: 5px 6px; flex: none; box-shadow: 0 1px 2px rgba(20, 27, 45, .06); }
.bank-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.bank-logo--lg { width: 132px; height: 72px; padding: 10px 14px; border-radius: 14px; box-shadow: var(--sh-1); }
.bank-logo--initials { font: 700 13px var(--sans); color: var(--ink); background: var(--soft); }
.banks-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.banks-row a { display: grid; gap: 10px; justify-items: start; padding: 16px; text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s; height: 100%; }
.banks-row a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.banks-row .bank-logo { width: 100%; height: 56px; border: 0; box-shadow: none; padding: 4px 0; justify-content: flex-start; }
.banks-row b { font-size: 15px; }
.banks-row small { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Pas „Jak liczymy”. */
.how { margin-top: 72px; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 44px 40px; display: grid; gap: 26px; position: relative; overflow: hidden; box-shadow: var(--sh-ink); }
.how::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 300px at 100% 0%, rgba(39, 67, 201, .5), transparent 60%); pointer-events: none; }
.how::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .6; pointer-events: none; }
.how > * { position: relative; z-index: 1; }
.how h2 { font: 500 clamp(28px, 3.6vw, 40px)/1.08 var(--serif); max-width: 22ch; letter-spacing: -.01em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 20px; display: grid; gap: 8px; align-content: start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.steps li::before { counter-increment: s; content: counter(s); font: 500 34px/1 var(--serif); color: var(--marker); }
.steps b { font-size: 17px; }
.steps span { font-size: 15px; color: #C5CAD6; line-height: 1.5; }
.how a { color: #fff; font-weight: 700; }
/* Na atramencie półprzezroczysty zakreślacz wychodził oliwkowy: wyróżnienie kolorem zakreślacza. */
.how .mark { background: none; padding: 0; color: var(--marker); }

/* Zakładki rankingów (strona główna): sytuacja → pierwsza trójka. */
.rk-calc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 44px; margin-bottom: 18px; padding: 22px 28px 18px; border-radius: var(--r-lg); }
.rk-range { display: grid; gap: 6px; }
.rk-range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.rk-range output { font: 500 clamp(26px, 3vw, 32px)/1.1 var(--serif); color: var(--ink); }
.rk-range input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 10px 0 4px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), var(--line) var(--p, 50%)); cursor: pointer; }
.rk-range input:focus { outline: none; }
.rk-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--marker); border: 3px solid var(--ink); box-shadow: 0 3px 8px rgba(20, 27, 45, .25); transition: transform .12s; }
.rk-range input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--marker); border: 3px solid var(--ink); box-shadow: 0 3px 8px rgba(20, 27, 45, .25); }
.rk-range input:active::-webkit-slider-thumb { transform: scale(1.12); }
.rk-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(39, 67, 201, .25); }
.rk-range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(39, 67, 201, .25); }
.rk-range__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.rk-calc noscript { grid-column: 1 / -1; }
.rk-sheet { transition: opacity .15s; }
.rk-sheet.is-loading { opacity: .5; }
.rk-loan { margin-top: 8px; font-size: 17px; color: #3C4253; }
.rk-loan .mark { font-weight: 800; color: var(--ink); }
.rk-source { margin-top: 4px; font-size: 13px; }
.rk-empty { color: var(--muted); max-width: 60ch; }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rk-tab { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.rk-tab:hover { border-color: var(--ink); }
.rk-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rk-sheet { padding: 26px 28px 28px; border-radius: var(--r-lg); }
.rk-panel { display: grid; gap: 18px; justify-items: start; }
.rk-panel[hidden] { display: none; }
.rk-panel__head h3 { font: 500 clamp(24px, 2.6vw, 30px)/1.15 var(--serif); letter-spacing: -.01em; }
.rk-panel__head a { color: var(--muted); }
.rk-panel__head a:hover { color: var(--pen); }
.rk-rows { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--line); }
.rk-rows li { border-bottom: 1px solid var(--line); }
.rk-row { display: grid; grid-template-columns: 28px 76px minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr) 20px; gap: 18px; align-items: center; padding: 16px 8px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.rk-row:hover { background: #FCFBF8; text-decoration: none; }
.rk-pos { font: 500 26px/1 var(--serif); color: var(--muted); }
.rk-rows li:first-child .rk-pos { color: var(--ink); }
.rk-row .bank-logo { width: 76px; height: 48px; }
.rk-bank { display: grid; font-size: 16px; font-weight: 700; line-height: 1.3; }
.rk-bank small, .rk-rata small, .rk-total small { font-size: 12px; font-weight: 600; color: var(--muted); }
.rk-rata { display: grid; font-size: 17px; font-weight: 700; }
.rk-total { display: grid; }
.rk-total b { font: 500 27px/1.1 var(--serif); }
.rk-total em { font-size: 13px; font-style: normal; font-weight: 700; color: var(--muted); }
.rk-rows li:first-child .rk-total em { color: var(--good); }
.rk-row > svg { color: var(--pen); transition: transform .15s; }
.rk-row:hover > svg { transform: translateX(3px); }

/* „Jak liczymy” ze zdjęciem (strona główna). */
.how__body { display: grid; gap: 26px; }
.how--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; align-items: stretch; }
.how--photo::before { content: none; }
.how--photo .how__body { padding: 52px 48px 46px 36px; gap: 28px; align-content: center; }
/* Zdjęcie na całą wysokość pasa, przechodzi w atrament zamiast ramki. */
.how__photo { position: relative; min-height: 470px; }
.how__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 41% 50%; }
.how__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 27, 45, 0) 80%, rgba(20, 27, 45, .5) 92%, var(--ink) 100%); }
.how--photo .steps { grid-template-columns: 1fr; gap: 0; }
.how--photo .steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.how--photo .steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.how--photo .steps li::before { grid-row: span 2; font-size: 26px; }

/* Kalkulatory na stronie głównej: zdjęcie i lista. */
/* Narzędzia (kalkulatory) na stronie głównej: kafle z pełną nazwą jako link. */
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tools a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; height: 100%; padding: 20px 20px 20px 16px; color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s; }
.tools a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.tools b { display: block; font: 700 17px/1.3 var(--sans); }
.tools small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.tools .icon-blob::before { inset: 6px; }
.tools a > svg { color: var(--pen); transition: transform .15s; }
.tools a:hover > svg { transform: translateX(4px); }

/* Nagłówek poradnika ze zdjęciem. */
.band--photo .band__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: center; }
.band__photo { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); aspect-ratio: 3 / 2; background: var(--paper-2); }
.band__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }

/* --------------------------------------------------------------------------
   Ranking: filtry
   -------------------------------------------------------------------------- */
.filters { padding: 22px 24px; display: grid; gap: 16px; border-radius: var(--r-lg); }
.filters__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.filters__row .field--value { flex: 1.3 1 190px; }
.filters__row .field--down { flex: 1 1 160px; }
.filters__row .field--term { flex: .7 1 110px; }
.filters__amount { font-size: 14px; color: var(--muted); }
.filters__amount b { color: var(--ink); }
.filters__foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
details.more summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--pen); list-style: none; display: inline-flex; gap: 8px; align-items: center; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
details.more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details.more .count { font-size: 12px; background: var(--pen); color: #fff; border-radius: 10px; padding: 1px 7px; }
.more-body { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 1fr; gap: 16px; padding-top: 16px; border-top: 1px dashed var(--line-strong); align-items: start; }

.bank-filter { position: relative; }
.bank-filter summary { list-style: none; cursor: pointer; }
.bank-filter summary::-webkit-details-marker { display: none; }
.bank-filter summary .inp { justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--ink); }
.bank-filter summary .inp::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); margin-left: 10px; flex: none; }
.bank-filter__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3); padding: 12px; display: grid; gap: 8px; }
.bank-filter__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 300px; overflow: auto; }
.bank-filter__panel label { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.bank-filter__panel label:hover { background: var(--soft); }
.bank-filter__panel input { width: 17px; height: 17px; accent-color: var(--ink); }
.bank-filter__clear { justify-self: start; border: 0; background: transparent; color: var(--pen); font-weight: 700; font-size: 14px; cursor: pointer; padding: 4px 8px; }

/* --------------------------------------------------------------------------
   Ranking: wyniki
   -------------------------------------------------------------------------- */
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; padding-block: 34px 10px; }
.results-head h2 { font: 500 26px/1.2 var(--serif); }
.results-head .sort { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); font-weight: 600; }
.results-head select { border: 1px solid var(--line-strong); border-radius: 9px; height: 40px; padding: 0 30px 0 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6272' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; font-weight: 700; color: var(--ink); cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 6px; }
.chip { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; padding: 5px 8px 5px 11px; border-radius: 999px; background: var(--pen-soft); color: var(--pen); text-decoration: none; }
.chip svg { opacity: .7; }
.chip:hover { background: #E1E6F8; text-decoration: none; }
.chips__clear { font-size: 13px; font-weight: 700; color: var(--muted); }
.results-rule { font-size: 14px; color: var(--muted); margin: -2px 0 8px; }
.legend-cert { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); padding-bottom: 14px; }
.legend-cert .cert { cursor: default; padding: 0; }
.results { display: grid; gap: 16px; transition: opacity .2s; }
[aria-busy="true"] .results, .results[aria-busy="true"] { opacity: .45; }
.js .results.is-collapsed > .offer:nth-of-type(n+11) { display: none; }
.results-more { display: flex; justify-content: center; padding-top: 18px; }
.results-more[hidden] { display: none; }
.excluded { display: grid; gap: 6px; padding-top: 22px; font-size: 14px; color: var(--muted); }
.excluded ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.empty { padding: 36px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.empty h3 { font: 500 24px/1.2 var(--serif); }

/* Karta oferty w rankingu. */
.offer { padding: 22px 24px 20px; display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; transition: box-shadow .2s, transform .2s; scroll-margin-top: 100px; }
.offer:hover { box-shadow: var(--sh-2); }
.offer--best { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-2); }
.offer__pos { font: 500 34px/1 var(--serif); color: var(--line-strong); padding-top: 2px; text-align: center; }
.offer--best .offer__pos { color: var(--ink); }
.offer__body { display: grid; gap: 16px; min-width: 0; }
.offer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 14px; align-items: flex-start; }
.offer__bank { display: flex; gap: 16px; align-items: center; min-width: 0; }
/* Logo bez plakietki: podobna powierzchnia dla szerokich (Pekao) i kwadratowych (VeloBank) logotypów; --r = szerokość / wysokość z PHP. */
.bank-logo--bare { width: 112px; height: 48px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; justify-content: flex-start; }
.bank-logo--bare img { width: min(112px, calc(sqrt(2300 * var(--r, 2)) * 1px)); max-height: 48px; object-fit: contain; object-position: left center; }
.offer__title { font: 700 18px/1.3 var(--sans); }
.offer__title a { color: var(--ink); text-decoration: none; }
.offer__title a:hover { text-decoration: underline; }
.offer__variant { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.offer__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.badge { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 6px; background: var(--soft); color: var(--ink); letter-spacing: .01em; }
.badge--best { background: var(--marker); box-shadow: 0 6px 12px -8px rgba(138, 90, 0, .6); }
.grid4 { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .8fr; gap: 16px; }
.kv { display: grid; gap: 3px; align-content: start; }
.kv .k { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.kv .v { font-size: 19px; font-weight: 700; line-height: 1.2; }
.kv .v small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.kv--big .v { font: 500 32px/1.08 var(--serif); letter-spacing: -.01em; }
.kv--big .v small { font: 500 13px/1.3 var(--sans); margin-top: 7px; }
.kv--big .v .delta { font-weight: 600; }
.kv--big .v .delta--est { color: var(--warn); }
/* Warunki ceny w jednej linii, objaśnienie każdego w dymku. */
.conds { font-size: 14px; line-height: 1.5; color: var(--muted); }
.conds b { color: var(--ink); }
.conds .has-tip:not(.tag) { border: 0; background: none; padding: 0; font-size: 14px; font-weight: 500; color: var(--ink); border-radius: 4px; }
.conds .has-tip:not(.tag):hover { color: var(--pen); }
.conds > .i { color: var(--muted); vertical-align: -1px; }
.conds .tag { margin-left: 6px; font-size: 12px; font-weight: 700; padding: 2px 7px; vertical-align: 1px; }
.fine { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.costbar { display: grid; gap: 7px; }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--soft); box-shadow: inset 0 1px 2px rgba(20, 27, 45, .12); }
.bar span { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 7px; background: var(--warn-bg); color: var(--warn); border: 0; line-height: 1.35; display: inline-flex; gap: 6px; align-items: center; }
.tag--ok { background: var(--good-bg); color: var(--good); }
.tag--uwaga { background: #FBEFE8; color: #8A3B12; }
.has-tip { cursor: help; font: inherit; font-size: 13px; font-weight: 700; }
.has-tip .i { opacity: .65; flex: none; }
.has-tip:hover .i, .has-tip[aria-expanded="true"] .i { opacity: 1; }
.has-tip[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px currentColor; }
.hint { font-size: 14px; color: var(--ink); background: var(--pen-soft); border-radius: 9px; padding: 9px 12px; display: flex; gap: 8px; align-items: center; }
.hint svg { color: var(--pen); flex: none; }
.offer__note { margin-top: -4px; }
.offer__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.offer__btns { display: flex; gap: 10px; flex-wrap: wrap; }
details.calc summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); }
details.calc summary:hover { color: var(--ink); }
.calc-table { margin-top: 10px; border-collapse: collapse; font-size: 14px; min-width: min(340px, 100%); }
.calc-table td { padding: 4px 0; }
.calc-table td:last-child { text-align: right; padding-left: 28px; font-weight: 700; white-space: nowrap; }
.calc-table tr.sum td { border-top: 1px solid var(--line); padding-top: 7px; font-weight: 800; }
.calc-table tr.total td { font-weight: 800; }
.calc-table .muted td { color: var(--muted); font-weight: 500; }

/* Pewność ceny. */
.cert { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: help; padding: 3px 6px; border-radius: 6px; color: var(--ink); }
.cert .meter { display: inline-flex; gap: 2px; }
.cert .meter i { width: 6px; height: 12px; border-radius: 2px; background: var(--line-strong); }
.cert--3 .meter i { background: var(--good); }
.cert--2 .meter i:nth-child(-n+2) { background: var(--pen); }
.cert--1 .meter i:first-child { background: #C77700; }
.cert--1 { color: var(--warn); }
.cert[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px currentColor; }

/* Dymek objaśnień (jeden na stronę). */
#kg-tip { position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 32px)); background: var(--ink); color: #fff; font-size: 14px; line-height: 1.45; padding: 11px 13px; border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(20, 27, 45, .6); border-top: 3px solid var(--marker); pointer-events: none; }
#kg-tip[hidden] { display: none; }
#kg-tip { white-space: pre-line; }
#kg-tip.wide { white-space: normal; }
#kg-tip.wide { max-width: min(400px, calc(100vw - 32px)); }
#kg-tip .tip-h { display: block; font-weight: 700; margin-top: 8px; color: var(--marker); }
#kg-tip .tip-h:first-child { margin-top: 0; }
#kg-tip ul { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 3px; }
#kg-tip p { margin: 8px 0 0; color: #C5CAD6; font-size: 13px; }

/* --------------------------------------------------------------------------
   Karta oferty i strona banku
   -------------------------------------------------------------------------- */
.page-head { padding-block: 22px 0; }
.page-head .crumbs { margin-bottom: 18px; }
.product-head { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.product-head h1 { font: 700 clamp(28px, 3.9vw, 42px)/1.08 var(--display); letter-spacing: -.03em; }
.product-head p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.product-head .offer__meta { margin-top: 12px; }
/* Strona banku: tekst z lewej, duże logo bez plakietki z prawej (ta sama powierzchnia dla szerokich i kwadratowych logotypów). */
.product-head--bank { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
.bank-logo--hero { width: 240px; height: 96px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; justify-content: flex-end; }
.bank-logo--hero img { width: min(240px, calc(sqrt(9000 * var(--r, 2)) * 1px)); max-height: 96px; object-fit: contain; object-position: right center; }
.facts { margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); border-radius: var(--r-lg); overflow: hidden; }
.facts > div { padding: 18px 20px; display: grid; gap: 4px; align-content: start; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts .k { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.facts .v { font: 500 28px/1.1 var(--serif); }
.facts small { font-size: 12px; color: var(--muted); line-height: 1.35; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; margin-top: 40px; }
.layout__aside { position: sticky; top: 92px; display: grid; gap: 16px; }
.aside-card { padding: 20px; display: grid; gap: 12px; }
.aside-card h2 { font: 500 20px/1.2 var(--serif); }
.aside-card dl { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.aside-card dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 7px; }
.aside-card dt { color: var(--muted); }
.aside-card dd { margin: 0; font-weight: 700; text-align: right; }
.aside-card .btn { width: 100%; }
.toc { padding: 18px 20px; }
.toc p { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 14px; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 5px 0 5px 12px; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; line-height: 1.4; transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--pen); }
/* Bieżąca sekcja (site.js). */
.toc a.is-active { color: var(--pen); font-weight: 700; border-left-color: var(--pen); }
/* Spis treści na telefonie: rozwijany nad tekstem (na komputerze jest w bocznym pasku). */
.toc-mobile { display: none; margin-bottom: 24px; }
.toc-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.toc-mobile[open] summary::after { transform: rotate(225deg); }
.toc-mobile summary .muted { margin-right: auto; font-weight: 500; }
.toc-mobile ol { margin: 0; padding: 0 18px 14px 38px; display: grid; gap: 2px; font-size: 15px; }
.toc-mobile a { display: block; padding: 6px 0; color: var(--ink); text-decoration: none; line-height: 1.4; }

.block { padding-top: 56px; scroll-margin-top: 90px; }
.block:first-child { padding-top: 0; }
.block > h2 { font: 500 clamp(24px, 3vw, 31px)/1.15 var(--serif); letter-spacing: -.01em; margin-bottom: 16px; }
.block > p, .block > .lead { color: var(--muted); max-width: 70ch; margin-bottom: 16px; }

.calculator { padding: 24px; border-radius: var(--r-lg); display: grid; gap: 20px; }
.calc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.calc-form .field--wide { grid-column: span 2; }
.calc-form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.calc-result { display: grid; gap: 16px; border-top: 1px dashed var(--line-strong); padding-top: 20px; }
.calc-result__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; }
.calc-result .kv--big .v { font-size: 40px; }
.reject { background: var(--warn-bg); border-radius: 12px; padding: 16px 18px; display: grid; gap: 6px; color: #5C3D00; }
.reject b { font-size: 16px; color: var(--warn); }

.table-wrap { overflow-x: auto; border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #FCFBF8; white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td:first-child { min-width: 230px; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table .strong { font-weight: 800; }
.table small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.table tr.is-match td { background: #FFFBE6; }
.table tr.is-match td:first-child { box-shadow: inset 3px 0 0 var(--marker-strong); }
.table tr.is-off td { color: #8A8F9B; }
.table .pill { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 5px; background: var(--marker); color: var(--ink); margin-left: 6px; vertical-align: 1px; }

.reqs { display: grid; gap: 14px; }
.req-pack { padding: 20px 22px; display: grid; gap: 12px; }
.req-pack h3 { font: 700 17px/1.3 var(--sans); }
.req-pack ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.req-pack li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.req-pack li svg { color: var(--pen); margin-top: 2px; }
.req-pack li b { display: block; font-size: 14px; }
.margin-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: #FFFDF2; border: 1px solid #F2E6B3; border-radius: 12px; padding: 12px 14px; }
.margin-note .note { font-size: 21px; white-space: nowrap; }
.margin-note p { font-size: 14px; color: #4A4F5C; line-height: 1.5; }

.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: var(--r); overflow: hidden; }
.spec > div { padding: 14px 18px; display: grid; gap: 3px; border-bottom: 1px solid var(--line); }
.spec > div:nth-child(odd) { border-right: 1px solid var(--line); }
.spec dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.spec dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.spec dd.unknown { color: #8A8F9B; font-weight: 500; font-style: italic; }

.watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.watch li { position: relative; padding: 14px 16px 14px 52px; font-size: 15px; line-height: 1.5; }
.watch li::before { content: "!"; position: absolute; left: 16px; top: 13px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pen); color: var(--pen); font: 700 14px/20px var(--sans); text-align: center; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 16px; border-left: 2px solid var(--line); }
.timeline > li { position: relative; display: grid; gap: 4px; }
.timeline > li::before { content: ""; position: absolute; left: -29px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--pen); }
.timeline time { font-size: 13px; font-weight: 700; color: var(--muted); }
.timeline ul { margin: 0; padding-left: 1.1em; font-size: 15px; display: grid; gap: 2px; }

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sources a { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }

.faq { display: grid; gap: 10px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; font-weight: 700; font-size: 16px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq .answer { padding: 0 20px 18px; color: #3C4253; line-height: 1.6; }

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini { padding: 18px 20px; display: grid; gap: 12px; text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s; }
.mini:hover { transform: translateY(-3px); box-shadow: var(--sh-2); text-decoration: none; }
.mini__top { display: flex; gap: 12px; align-items: center; }
.mini__top b { font-size: 15px; line-height: 1.3; }
.mini__top small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.mini .kv--big .v { font-size: 26px; }
.mini__row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; }
.mini__row b { color: var(--ink); }
.mini--best { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-1); }

.notice { padding: 18px 20px; border-radius: var(--r); display: grid; gap: 8px; }
.notice--ended { background: var(--warn-bg); border: 1px solid #F1DDA6; }
.notice--ended b { color: var(--warn); font-size: 17px; }

.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.compare .offer__actions { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   Treści (poradnik, strony)
   -------------------------------------------------------------------------- */
.prose { font-size: 18px; line-height: 1.7; color: #262C3C; max-width: 72ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font: 500 clamp(26px, 3vw, 32px)/1.15 var(--serif); color: var(--ink); margin-top: 1.8em; letter-spacing: -.01em; }
.prose h3 { font: 700 20px/1.3 var(--sans); color: var(--ink); margin-top: 1.5em; }
.prose a { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--marker-strong); font: 500 22px/1.4 var(--serif); color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-1); }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { background: #FCFBF8; font-size: 13px; color: var(--muted); }
.prose img { border-radius: 12px; }
.prose .note, .prose .is-style-note { font: 600 23px/1.15 var(--hand); color: var(--pen); }
.prose .is-style-sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); padding: 20px 22px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: grid; gap: 10px; padding: 22px; text-decoration: none; color: var(--ink); align-content: start; transition: transform .18s, box-shadow .18s; }
.post-card__body { display: grid; gap: 10px; }
.post-card--image { padding: 0; overflow: hidden; gap: 0; }
.post-card--image .post-card__body { padding: 18px 22px 20px; }
.post-card--image { grid-template-rows: auto 1fr; }
.post-card__body { grid-template-rows: auto auto 1fr; }
.post-card__meta { align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.post-card__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.post-card__author { color: var(--ink); font-weight: 600; }
.post-card__author::after { content: "·"; margin-left: 8px; color: var(--line-strong); font-weight: 400; }
.post-card__image { display: block; aspect-ratio: 16 / 9; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.post-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card--image:hover .post-card__image img { transform: scale(1.03); }
.post-card__image--empty { display: grid; place-items: center; background-color: #FDFCF9; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.post-card__image--empty > span { font: 500 28px/1 var(--serif); color: var(--ink); background: #FDFCF9; padding: 6px 12px; transform: rotate(-2deg); }
.article-hero { margin-top: 0; margin-bottom: 26px; }
.article-hero img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-2); background: var(--paper-2); }
.article-hero figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.post-card h3 { font: 500 22px/1.2 var(--serif); }
.post-card p { color: var(--muted); font-size: 15px; }
.post-card small { color: var(--muted); font-size: 13px; }

.article-head { padding-block: 26px 30px; display: grid; gap: 14px; }
.article-head > * { max-width: 820px; }
.article-head h1 { font: 700 clamp(32px, 4.4vw, 50px)/1.07 var(--display); letter-spacing: -.03em; }
.article-head .lede { font: 400 clamp(17px, 1.8vw, 19px)/1.55 var(--sans); color: #3C4253; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.article-author { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.article-author__img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line); }

/* Metodologia: wyliczenie krok po kroku i poziomy pewności. */
.layout--doc { grid-template-columns: minmax(0, 1fr) 280px; margin-top: 0; }
.layout--doc .toc { display: block; }
.prose .method-example { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); overflow: hidden; margin-block: 1.4em; }
.prose .method-example__head { margin: 0; padding: 14px 18px; background: #FCFBF8; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); line-height: 1.5; }
.prose .method-example table { box-shadow: none; border-radius: 0; font-size: 15px; }
.prose .method-example td.num { text-align: right; font-weight: 600; }
.prose .method-example tr.is-sum td { font-weight: 800; background: #FFFBE6; color: var(--ink); }
.prose .cert-legend { display: grid; gap: 12px; margin-block: 1.2em; }
.prose .cert-legend__item { padding: 16px 18px; display: grid; gap: 6px; }
.prose .cert-legend__item p { font-size: 16px; line-height: 1.55; margin: 0; }
.prose .cert-legend__item small { font-size: 13px; color: var(--muted); }
.prose .cert-legend .cert { font-size: 15px; }
.prose .table-wrap { margin-block: 1.2em; }
.prose .table-wrap table { box-shadow: var(--sh-1); }
.prose .formula { font: 500 20px/1.5 var(--serif); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--marker-strong); border-radius: 10px; padding: 14px 18px; color: var(--ink); box-shadow: var(--sh-1); }

/* --------------------------------------------------------------------------
   Strona autora: zdjęcie przypięte spinaczem, regulamin redakcji
   -------------------------------------------------------------------------- */
.author-head { padding-block: 26px 12px; }
.author-hero { margin-top: 30px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.author-photo { position: relative; margin: 6px 0 0 6px; padding: 12px 12px 0; background: #fff; border: 1px solid #E6E3DB; border-radius: 4px; box-shadow: var(--sh-3); transform: rotate(-2.5deg); }
.author-photo .doc__clip { left: auto; right: 30px; top: -22px; z-index: 1; }
.author-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--paper-2); }
.author-photo figcaption { font: 600 26px/1 var(--hand); color: var(--pen); text-align: center; padding: 12px 0 14px; transform: rotate(-1.5deg); }
.author-intro { display: grid; gap: 14px; max-width: 720px; justify-items: start; }
.author-intro__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.author-intro h1 { font: 700 clamp(36px, 4.8vw, 54px)/1.05 var(--display); letter-spacing: -.03em; }
.author-intro__role { margin-top: -4px; font-size: 17px; font-weight: 700; color: var(--pen); }
.author-intro__bio { font: 400 clamp(17px, 1.8vw, 19px)/1.55 var(--sans); color: #3C4253; max-width: 52ch; }
.author-facts { display: flex; flex-wrap: wrap; margin: 6px 0 0; border-block: 1px solid var(--line-strong); }
.author-facts div { display: grid; gap: 2px; padding: 12px 26px 12px 0; }
.author-facts div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.author-facts dt { order: 2; font-size: 13px; color: var(--muted); }
.author-facts dd { margin: 0; font: 500 24px/1.15 var(--serif); }
.author-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.author-topics span { color: var(--muted); }
.author-topics a { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.author-topics a:hover { border-color: var(--ink); }
.author-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.author-links a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.author-empty { padding: 26px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.author-empty h3 { font: 500 24px/1.2 var(--serif); }
.author-empty p { margin-top: 6px; }
.author-empty__links { display: flex; flex-wrap: wrap; gap: 10px; }

.house { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; padding-bottom: 24px; }
.house__intro { display: grid; gap: 14px; position: sticky; top: 100px; }
.house__intro p { color: var(--muted); font-size: 17px; max-width: 40ch; }
.house-rules { padding: 26px 30px 28px; display: grid; gap: 22px; }
.house-rules__doc { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.house-rules ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: par; }
.house-rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; }
.house-rules li::before { counter-increment: par; content: "§\00A0" counter(par); grid-row: span 2; font: 500 24px/1.15 var(--serif); color: var(--pen); }
.house-rules b { font: 500 22px/1.2 var(--serif); }
.house-rules p { color: #3C4253; line-height: 1.6; }
.house-rules__note { justify-self: end; transform: rotate(-2deg); }

/* --------------------------------------------------------------------------
   Kontakt: zgłoszenie jak kartka z poprawką
   -------------------------------------------------------------------------- */
.contact-head .lede { max-width: 44ch; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; padding-bottom: 72px; }
.contact__main { scroll-margin-top: 90px; }
.contact__aside { position: sticky; top: 92px; display: grid; gap: 16px; }
.contact-form { padding: 26px 28px 28px; display: grid; gap: 22px; }
.contact-form__doc { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.contact-form__step { display: flex; gap: 10px; align-items: center; padding: 0; margin: 0; font: 500 23px/1.2 var(--serif); color: var(--ink); }
.contact-form__step b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--sans); background: var(--marker); transform: rotate(-4deg); }
.topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.topics legend { margin-bottom: 14px; }
.topics .form-error { display: block; margin: -6px 0 10px; }
.topics__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.topic { position: relative; display: flex; }
.topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.topic__card { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 3px 11px; align-items: start; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.topic__card svg { grid-row: span 2; margin-top: 2px; color: var(--muted); }
.topic__card b { justify-self: start; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.topic__card small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.topic:hover .topic__card { border-color: var(--ink); }
.topic input:checked + .topic__card { border-color: var(--ink); background: #FFFDF2; box-shadow: 0 0 0 1px var(--ink), var(--sh-1); }
.topic input:checked + .topic__card svg { color: var(--ink); }
.topic input:checked + .topic__card b { background-image: linear-gradient(100deg, transparent .12em, var(--marker) .22em, var(--marker) calc(100% - .2em), transparent calc(100% - .08em)); background-size: 100% .5em; background-position: 0 88%; background-repeat: no-repeat; }
.topic input:focus-visible + .topic__card { outline: 2px solid var(--pen); outline-offset: 2px; }
.contact-form .field { font-size: 14px; }
.contact-form .field > span:first-child { white-space: normal; color: var(--ink); }
.contact-form .field i { font-style: normal; font-weight: 500; color: var(--muted); }
.contact-form .inp input, .contact-form .inp select { font-size: 16px; font-weight: 500; }
.contact-form textarea { width: 100%; min-height: 150px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; padding: 12px; font: 500 16px/1.5 var(--sans); color: var(--ink); box-shadow: inset 0 1px 2px rgba(20, 27, 45, .05); transition: border-color .15s, box-shadow .15s; }
.contact-form textarea::placeholder { color: #9AA0AD; }
.contact-form textarea:focus { outline: 0; border-color: var(--pen); box-shadow: 0 0 0 3px rgba(39, 67, 201, .14); }
.inp--select { position: relative; }
.inp--select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--muted); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); pointer-events: none; }
.inp--select select { padding-right: 26px; }
/* Oferta i link do źródła tylko przy błędzie w danych i wiadomości z banku. */
.contact-form__offer, .contact-form__source { display: none; }
.contact-form:has(#temat-blad:checked) .contact-form__offer, .contact-form:has(#temat-bank:checked) .contact-form__offer { display: block; }
.contact-form:has(#temat-blad:checked) .contact-form__source, .contact-form:has(#temat-bank:checked) .contact-form__source { display: grid; }
@supports not selector(:has(*)) { .contact-form__offer { display: block; } .contact-form__source { display: grid; } }
.contact-form__source { grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.contact-note { font-size: 21px; white-space: nowrap; align-items: center; padding-bottom: 10px; transform: rotate(-3deg); }
.contact-note svg { transform: scaleX(-1) rotate(-12deg); }
.form-error { color: #A12E1B; font-size: 13.5px; font-weight: 600; }
.inp:has([aria-invalid="true"]), .contact-form textarea[aria-invalid="true"] { border-color: #C2412D; }
.form-alert { margin: 0; padding: 12px 14px; border-radius: 10px; background: #FBEFE8; color: #8A3B12; font-size: 15px; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.contact-form__privacy { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.contact-done { padding: 32px; display: grid; gap: 12px; justify-items: start; }
.contact-done h2 { font: 500 clamp(26px, 3vw, 32px)/1.15 var(--serif); }
.contact-done p { margin: 0; max-width: 60ch; color: #3C4253; }
.contact-done .contact-done__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; line-height: 1.5; color: #3C4253; }
.contact-list b { display: block; color: var(--ink); }
.contact-card__more { margin: 0; font-size: 14px; }
.prose--aside { max-width: none; font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Kalkulator zdolności kredytowej
   -------------------------------------------------------------------------- */
.cap-form { display: grid; gap: 16px; }
.cap-form__row { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr .8fr auto; gap: 12px; align-items: end; }
.co-borrower { border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.co-borrower summary { list-style: none; cursor: pointer; display: inline-flex; font-weight: 700; font-size: 15px; color: var(--pen); }
.co-borrower summary::-webkit-details-marker { display: none; }
.co-borrower summary:hover { text-decoration: underline; }
.co-borrower__remove { display: none; color: var(--ink); }
.co-borrower__remove i { font-style: normal; font-weight: 600; font-size: 14px; color: var(--muted); margin-left: 10px; text-decoration: underline; }
.co-borrower[open] summary:hover { text-decoration: none; }
.co-borrower[open] .co-borrower__add { display: none; }
.co-borrower[open] .co-borrower__remove { display: inline; }
.co-borrower__body { margin-top: 14px; display: grid; grid-template-columns: 1.3fr .8fr; gap: 12px; align-items: end; max-width: 520px; }
.cap-form__hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.cap-form__submit { display: flex; justify-content: flex-end; }
.cap-form .field i, .cap-more .field i { font-style: normal; font-weight: 500; }
.cap-form .field > span:first-child { white-space: normal; }
.cap-form__rate { border: 0; margin: 0; padding: 0; min-width: 0; }
.cap-form__rate legend { padding: 0; margin-bottom: 6px; }
.cap-form .inp input, .cap-form .inp select { font-size: 16px; }
.cap-form .inp em { font-size: 13px; }
.cap-more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field__hint { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35; letter-spacing: 0; }
.cap-result { display: grid; gap: 30px; border-top: 1px dashed var(--line-strong); padding-top: 24px; transition: opacity .2s; }
#kg-cap-result[aria-busy="true"] .cap-result { opacity: .5; }
.cap-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.cap-head__main .v { font-size: clamp(40px, 5.4vw, 58px); }
.cap-head__main .v small { max-width: 44ch; font-size: 14px; }
.cap-buy { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 18px 20px; border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--line); }
.cap-buy .k { font-size: 13px; font-weight: 600; color: var(--muted); }
.cap-buy b { font: 500 32px/1.1 var(--serif); letter-spacing: -.01em; }
.cap-buy p { margin: 0; font-size: 14px; color: #3C4253; line-height: 1.5; }
.cap-buy .btn { margin-top: 6px; white-space: normal; text-align: left; }
.cap-block { display: grid; gap: 12px; }
.cap-block h2 { font: 500 24px/1.2 var(--serif); }
.cap-sub { font-size: 14px; max-width: 75ch; margin: -4px 0 0; }
.bar--tall { height: 18px; border-radius: 6px; }
.costbar .legend b { color: var(--ink); font-weight: 700; }
.cap-why { margin: 0; font-size: 15px; line-height: 1.55; color: #3C4253; max-width: 80ch; }
.cap-why b { color: var(--ink); }
.cap-levers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cap-levers li { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: baseline; padding: 11px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.cap-levers__delta { justify-self: start; font-weight: 800; font-size: 15px; white-space: nowrap; background-image: linear-gradient(100deg, transparent .12em, var(--marker) .22em, var(--marker) calc(100% - .2em), transparent calc(100% - .08em)); background-size: 100% .5em; background-position: 0 88%; background-repeat: no-repeat; }
.cap-levers li.is-info .cap-levers__delta, .cap-levers li.is-minus .cap-levers__delta { background: none; color: var(--muted); }
.cap-levers li.is-info { background: transparent; border-style: dashed; }
.cap-table td:first-child { min-width: 250px; }
.cap-offer { display: flex; gap: 10px; align-items: center; }
.cap-offer b { display: block; font-size: 14px; }
.cap-offer small a { color: var(--muted); }
.cap-table .cap-off { color: #8A8F9B; font-size: 13px; }
.cap-calc .calc-table { margin-top: 12px; }
.cap-calc .calc-table td:first-child { max-width: 52ch; }
.cap-calc__src { margin: 12px 0 0; font-size: 13px; color: var(--muted); max-width: 80ch; line-height: 1.5; }
.cap-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.cap-form details.more { flex: 1 1 100%; }
.cap-disclaimer { margin: 0; font-size: 13px; color: var(--muted); max-width: 90ch; line-height: 1.5; }

/* Kalkulator nadpłaty */
.op-form__row { grid-template-columns: 1.2fr .8fr .7fr 1.1fr 1.1fr; }
.op-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.op-card { padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.op-card.is-best { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-2); }
.op-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 21px/1.2 var(--serif); margin: 0; }
.op-card p { margin: 0; font-size: 14px; }
.op-card dl { margin: 6px 0 0; display: grid; gap: 8px; font-size: 15px; }
.op-card dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 7px; }
.op-card dt { color: var(--muted); }
.op-card dd { margin: 0; font-weight: 700; text-align: right; }
.op-card dl div:first-child dd { font-size: 18px; }
.op-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.op-legend { font-size: 14px; }
.op-chart { padding: 14px 12px 6px; }
.bc { display: block; width: 100%; height: auto; overflow: visible; }
.bc--narrow { display: none; }
.bc-grid { stroke: #ECEAE4; stroke-width: 1; }
.bc-tick { font: 500 12px var(--sans); fill: var(--muted); }
.bc-label { font: 700 12.5px var(--sans); fill: var(--ink); }
.bc-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.bc-hit rect { fill: transparent; }
.bc-hit line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.bc-hit:hover line, .bc-hit:focus line { opacity: .5; }
.bc-hit:focus { outline: none; }
.op-fees td:first-child { min-width: 210px; white-space: nowrap; }
.op-fees td { font-size: 14px; }

/* --------------------------------------------------------------------------
   Kalkulator ogólny
   -------------------------------------------------------------------------- */
.yearly { max-height: 420px; overflow: auto; }
.yearly .table th { position: sticky; top: 0; }

/* 404 */
.lost { padding-block: 60px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.lost h1 { font: 700 clamp(34px, 4.6vw, 52px)/1.06 var(--display); letter-spacing: -.03em; }
.lost p { margin-top: 14px; color: var(--muted); font-size: 18px; }
.lost .btn { margin-top: 22px; }
.lost__photo { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-2); aspect-ratio: 4 / 3; background: var(--paper-2); }
.lost__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   O nas (page-o-nas.php): wizytówka serwisu
   -------------------------------------------------------------------------- */
.about-hero { padding-block: 22px 0; }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-top: 26px; }
.about-hero h1 { font: 700 clamp(38px, 4.8vw, 60px)/1.04 var(--display); letter-spacing: -.035em; max-width: 12ch; margin-top: 10px; }
.about-hero .lede { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 42ch; }
.about-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.about-kicker--light { color: #AEB5C6; }
/* Fragment warunków kredytu: kartka na stosie, zakreślone zdanie i notatka na marginesie. */
.about-doc { position: relative; margin: 0; padding: 18px 26px 70px 30px; }
.about-doc__sheet { padding: 24px 30px 30px; display: grid; gap: 14px; transform: rotate(1.2deg); }
.about-doc__head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
.about-doc__title { font: 500 23px/1.2 var(--serif); }
.about-doc__lines { display: grid; gap: 10px; }
.about-doc__lines i { display: block; width: 100%; height: 7px; border-radius: 4px; background: #ECEAE3; }
.about-doc__text { font: 400 17.5px/1.6 var(--serif); color: #2B3140; }
.about-doc__note { position: absolute; right: 18px; bottom: 6px; font-size: 27px; transform: rotate(-3deg); align-items: flex-end; }
.about-doc__note svg { transform: rotate(180deg); margin: 0 4px 12px 0; }
.about-hero .proof { margin-top: 30px; }

/* Misja: granatowa kartka, jedno zdanie dużą czcionką. */
.about-mission { margin-top: 80px; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 56px 56px 48px; position: relative; overflow: hidden; box-shadow: var(--sh-ink); display: grid; gap: 22px; }
.about-mission::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 340px at 100% 0%, rgba(39, 67, 201, .5), transparent 60%); pointer-events: none; }
.about-mission::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .6; pointer-events: none; }
.about-mission > * { position: relative; z-index: 1; }
.about-mission__lead { font: 500 clamp(30px, 4.2vw, 50px)/1.1 var(--serif); letter-spacing: -.01em; max-width: 27ch; }
.about-mission .mark { background: none; padding: 0; color: var(--marker); }
.about-mission__cols { list-style: none; margin: 14px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.about-mission__cols b { display: block; font-size: 17px; margin-bottom: 8px; }
.about-mission__cols p { font-size: 15px; line-height: 1.6; color: #C5CAD6; }
.about-mission__more { justify-self: start; display: inline-flex; gap: 8px; align-items: center; color: #fff; font-weight: 700; text-decoration: none; margin-top: 6px; }
.about-mission__more:hover { color: var(--marker); }

/* Po co to robimy: zdjęcie z żółtą kartką przesuniętą jak przy niedokładnym druku. */
.about-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.about-why__photo { position: relative; isolation: isolate; margin: 0 0 18px 18px; }
.about-why__photo::before { content: ""; position: absolute; inset: 0; background: var(--marker); border-radius: var(--r-lg); transform: translate(-18px, 18px); z-index: -1; }
.about-why__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.about-why__text { display: grid; gap: 18px; }
.about-why__text p { font-size: 18px; line-height: 1.65; color: #3C4253; max-width: 54ch; }

/* Oświadczenie o niezależności: dokument z podpisem. */
.about-indep { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.about-indep__intro { display: grid; gap: 16px; position: sticky; top: 100px; }
.about-indep__intro p { font-size: 17px; line-height: 1.65; color: #3C4253; }
.about-pledge { padding: 26px 30px 28px; display: grid; gap: 20px; }
.about-pledge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.about-pledge li { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.6; color: #3C4253; }
.about-pledge li::before { content: ""; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--pen-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232743C9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center; }
.about-pledge b { display: block; font: 500 20px/1.3 var(--serif); color: var(--ink); margin-bottom: 2px; }
.about-pledge__sign { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 20px; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-size: 13px; color: var(--muted); }
.about-pledge__signature { font: 600 34px/1 var(--hand); color: var(--pen); transform: rotate(-3deg); }

/* Założyciel. */
.about-founder { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: center; }
.about-founder__text { display: grid; gap: 12px; justify-items: start; max-width: 640px; }
.about-founder__text .section-title { margin-top: -4px; }
.about-founder__text > p:not(.about-kicker):not(.author-intro__role) { font-size: 17px; line-height: 1.65; color: #3C4253; }
.about-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; text-decoration: none; margin-top: 4px; }
.about-link:hover { text-decoration: underline; }

/* Kontakt i media społecznościowe. */
.about-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.about-contact--single { grid-template-columns: minmax(0, 1fr); }
.about-card { padding: 30px 32px; border-radius: var(--r); display: grid; gap: 12px; align-content: start; justify-items: start; }
.about-card h2 { font: 500 26px/1.2 var(--serif); }
.about-card p { color: var(--muted); max-width: 48ch; }
.about-card .btn { margin-top: 6px; }
.about-card--ink { background: var(--ink); color: #fff; box-shadow: var(--sh-2); position: relative; overflow: hidden; }
.about-card--ink::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .6; pointer-events: none; }
.about-card--ink > * { position: relative; z-index: 1; }
.about-card--ink p { color: #C5CAD6; }
.social--about { flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.social--about a { width: auto; height: 44px; padding: 0 14px; gap: 8px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.social--about a:hover { border-color: rgba(255, 255, 255, .5); }

@media (max-width: 960px) {
	.about-hero__grid, .about-why, .about-indep, .about-founder { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.about-doc { max-width: 560px; padding: 8px 10px 70px 6px; }
	.about-mission { padding: 40px 32px 36px; }
	.about-mission__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.about-indep__intro { position: static; }
	.about-founder__photo { width: 220px; }
	.about-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.about-mission { margin-top: 56px; padding: 32px 22px 30px; }
	.about-doc__sheet { padding: 20px 20px 24px; }
	.about-doc__note { font-size: 23px; right: 4px; }
	.about-pledge { padding: 22px 20px 24px; }
	.about-card { padding: 24px 20px; }
	.about-why__text p { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Responsywność
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.facts { grid-template-columns: repeat(3, 1fr); }
	.facts > div:nth-child(4) { border-left: 0; }
	.facts > div:nth-child(n+4) { border-top: 1px solid var(--line); }
	.layout { grid-template-columns: minmax(0, 1fr); }
	.layout__aside { position: static; grid-template-columns: 1fr 1fr; }
	.toc, .layout--doc .toc { display: none; }
	.toc-mobile { display: block; }
	.layout--doc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
	.hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.hero__media { max-width: 600px; }
	.band--photo .band__grid { grid-template-columns: 1fr; gap: 28px; }
	.tools { grid-template-columns: 1fr; }
	.how--photo { grid-template-columns: 1fr; }
	.how__photo { min-height: 0; aspect-ratio: 16 / 10; }
	.how__photo::after { background: linear-gradient(180deg, rgba(20, 27, 45, 0) 80%, var(--ink) 100%); }
	.how--photo .how__body { padding: 8px 36px 40px; }
	.band__photo { max-width: 560px; }
	.house { grid-template-columns: 1fr; gap: 24px; }
	.house__intro { position: static; }
	.cap-form__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cap-more { grid-template-columns: 1fr 1fr; }
	.cap-head { grid-template-columns: 1fr; }
	.op-form__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.contact { grid-template-columns: 1fr; }
	.contact__aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
	.grid4 { grid-template-columns: 1fr 1fr; }
	.more-body { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: 1fr; }
	.folders, .mini-grid, .post-grid { grid-template-columns: 1fr 1fr; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.calc-form { grid-template-columns: 1fr 1fr; }
	.calc-result__main { grid-template-columns: 1fr 1fr; }
	.lost { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
	.custom-logo { height: var(--logo-h-m, 32px); }
	.nav-toggle { display: inline-flex; }
	.site-header .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 24px 40px -24px rgba(20, 27, 45, .5); padding: 10px var(--gutter) 18px; display: none; }
	.site-header.is-open .nav { display: block; }
	.social--header { margin-top: 10px; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
	.social--header a { width: 44px; height: 44px; }
	.site-header.is-open .nav-toggle__open { display: none; }
	.site-header.is-open .nav-toggle__close { display: inline; }
	.nav__list { flex-direction: column; }
	.nav__list a { padding: 12px 6px; font-size: 17px; }
	.site-header.is-open .nav { max-height: calc(100vh - 68px); overflow-y: auto; }
	.nav__list .menu-item-has-children > a::before { content: none; }
	.sub-menu { position: static; width: auto; max-width: none; min-width: 0; margin: 0 0 8px 6px; padding: 0 0 0 12px; background: none; border: 0; border-left: 2px solid rgba(255, 255, 255, .15); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
	.sub-menu::before { content: none; }
	.nav__list .sub-menu a { padding: 9px 6px; font-size: 16px; color: #C5CAD6; }
	.nav__list .sub-menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
	.nav__list .sub-menu .current-menu-item > a { background: rgba(255, 255, 255, .08); color: #fff; }
	.nav__list .sub-menu .menu-item--all > a { color: var(--brand-yellow); }
	.sub-menu .menu-item--all { border-top: 0; }
	.sub-menu .menu-item--all { margin-top: 2px; padding-top: 0; border-top: 0; }
	.header-cta { display: none; }
}
@media (max-width: 640px) {
	:root { --gutter: 16px; }
	.author-hero { grid-template-columns: 1fr; gap: 28px; margin-top: 22px; }
	.author-photo { width: 168px; padding: 9px 9px 0; }
	.author-photo .doc__clip { right: 22px; top: -18px; width: 18px; height: 44px; }
	.author-photo figcaption { font-size: 22px; padding: 8px 0 10px; }
	.author-empty { padding: 22px 18px; }
	.author-empty__links .btn { width: 100%; }
	.house-rules { padding: 20px 18px 22px; }
	.house-rules li { grid-template-columns: 1fr; }
	.house-rules li::before { grid-row: auto; font-size: 20px; }
	.cap-form__row { grid-template-columns: 1fr 1fr; }
	.op-form__row .field:first-child { grid-column: 1 / -1; }
	.op-compare { grid-template-columns: 1fr; }
	.article-hero img { aspect-ratio: 16 / 9; border-radius: var(--r); }
	.bc--wide { display: none; }
	.bc--narrow { display: block; }
	.bc--narrow .bc-tick { font-size: 12px; }
	.bc--narrow .bc-label { font-size: 12px; }
	.op-fees td:first-child { min-width: 0; white-space: normal; }
	.co-borrower__body { grid-template-columns: 1.4fr 1fr; }
	.cap-form__submit .btn { width: 100%; }
	.cap-more { grid-template-columns: 1fr; }
	.cap-levers li { grid-template-columns: 1fr; gap: 2px; }
	.cap-table thead { display: none; }
	.cap-table, .cap-table tbody { display: block; }
	.cap-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 14px; border-bottom: 1px solid var(--line); }
	.cap-table tr:last-child { border-bottom: 0; }
	.cap-table td { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal; }
	.cap-table td:first-child, .cap-table td.cap-off { grid-column: 1 / -1; min-width: 0; }
	.cap-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
	.cap-table td[data-label="Bufor"] { display: none; }
	.contact-form { padding: 20px 18px 22px; }
	.topics__grid { grid-template-columns: 1fr; }
	.contact-form__source { grid-template-columns: 1fr; }
	.contact-note { display: none; }
	.contact-done { padding: 24px 20px; }
	.band { padding-block: 18px 30px; }
	.hero { padding-top: 24px; }
	.hero__actions .btn { width: 100%; }
	.hero__media { padding: 10px 26px 26px 38px; }
	.hero__marker { transform: translate(18px, 16px); }
	.proof { grid-template-columns: 1fr; margin-top: 36px; }
	.proof li, .proof li:first-child { padding: 16px 0; }
	.proof li + li { border-left: 0; border-top: 1px solid var(--line); }
	.rk-calc { grid-template-columns: 1fr; gap: 14px; padding: 18px 16px 14px; }
	.rk-loan { font-size: 16px; }
	.rk-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
	.rk-tabs::-webkit-scrollbar { display: none; }
	.rk-tab { flex: none; padding: 0 14px; font-size: 14px; }
	.rk-sheet { padding: 20px 16px 22px; }
	.rk-row { grid-template-columns: 22px 60px minmax(0, 1fr) auto; grid-template-areas: "pos logo bank bank" "pos rata rata total"; gap: 10px 12px; padding: 14px 2px; }
	.rk-pos { grid-area: pos; align-self: start; font-size: 22px; }
	.rk-row .bank-logo { grid-area: logo; width: 60px; height: 40px; }
	.rk-bank { grid-area: bank; font-size: 15px; }
	.rk-rata { grid-area: rata; align-self: end; font-size: 15px; }
	.rk-total { grid-area: total; text-align: right; }
	.rk-total b { font-size: 23px; }
	.rk-row > svg { display: none; }
	.rk-panel .btn { width: 100%; }
	.filters { padding: 18px 16px; }
	.filters__row .field { flex: 1 1 100%; }
	.filters__row .field--down, .filters__row .field--term { flex: 1 1 calc(50% - 7px); }
	.seg { width: 100%; }
	.seg label { flex: 1; }
	.seg span { justify-content: center; width: 100%; padding: 0 8px; }
	.more-body { grid-template-columns: 1fr; }
	.offer { grid-template-columns: 1fr; padding: 18px 16px; }
	.offer__pos { display: none; }
	.offer__bank { flex-direction: column; align-items: flex-start; gap: 10px; }
	.offer__title[data-pos]::before { content: attr(data-pos) ". "; color: var(--muted); font-weight: 500; }
	.bank-logo--bare { height: auto; }
	.grid4 { gap: 14px 12px; }
	.kv--big { grid-column: 1 / -1; }
	.how { padding: 30px 20px; border-radius: 16px; }
	.how--photo { padding: 0; }
	.how--photo .how__body { padding: 4px 20px 30px; }
	.folders, .mini-grid, .post-grid, .site-footer__grid { grid-template-columns: 1fr; }
	.facts { grid-template-columns: 1fr 1fr; }
	.facts > div { border-left: 0 !important; border-top: 1px solid var(--line); }
	.facts > div:nth-child(-n+2) { border-top: 0; }
	.facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
	.facts .v { font-size: 24px; }
	.product-head { grid-template-columns: 1fr; gap: 14px; }
	.product-head--bank .bank-logo--hero { order: -1; width: 180px; height: 64px; justify-content: flex-start; }
	.product-head--bank .bank-logo--hero img { width: min(180px, calc(sqrt(5000 * var(--r, 2)) * 1px)); max-height: 64px; object-position: left center; }
	.layout__aside { grid-template-columns: 1fr; }
	.calc-form { grid-template-columns: 1fr 1fr; }
	.calc-form .field--wide { grid-column: 1 / -1; }
	.calc-result__main { grid-template-columns: 1fr 1fr; }
	.calc-result__main .kv--big { grid-column: 1 / -1; }
	.spec { grid-template-columns: 1fr; }
	.spec > div:nth-child(odd) { border-right: 0; }
	.stack::before { transform: translate(4px, 5px) rotate(.5deg); }
	.stack::after { transform: translate(-3px, 3px) rotate(-.4deg); }
	.prose { font-size: 17px; }
	.band--overlap { padding-bottom: 84px; }
	.margin-note { grid-template-columns: 1fr; gap: 4px; }
	/* Tabela wariantów jako karty. */
	.table--cards thead { display: none; }
	.table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; width: 100%; }
	.table--cards tr { border-bottom: 1px solid var(--line); padding: 12px 14px; }
	.table--cards tr:last-child { border-bottom: 0; }
	.table--cards td { border: 0; padding: 3px 0; text-align: left !important; min-width: 0 !important; }
	.table--cards td.num { display: flex; justify-content: space-between; gap: 12px; white-space: normal; }
	.table--cards td.num::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; flex: none; }
	.table--cards td.num > span, .table--cards td.num > small { text-align: right; }
	.table--cards td.num small { display: inline; margin: 0 0 0 6px; }
	.table--cards tr.is-match td:first-child { box-shadow: none; }
	.table--cards tr.is-match { box-shadow: inset 3px 0 0 var(--marker-strong); background: #FFFBE6; }
}

@media (max-width: 640px) {
	.band__note { font-size: 23px; margin-right: 0; }
}