:root {
	--color-dark: #1A202C;
	--color-orange: #FEA926;
	--color-blue: #0D7FDB;
	--color-bg-page: #F3F4F6;

	/* Zielen wystepuje wylacznie w sekcji oszczednosci. Kierunek pieniedzy
	   jest tam odwrotny niz w tabeli z cena, wiec kolor musi to mowic
	   zanim ktokolwiek zacznie czytac. */
	--color-green: #059669;
	--color-green-dark: #047857;
	--color-green-bg: #ECFDF5;
	--color-green-line: #A7F3D0;

	/* --- ITERACJA 18 (08.09.2026): brakujace cztery zmienne -----------------
	   Te cztery byly uzywane w 66 deklaracjach, ale nigdzie nie zdefiniowane.
	   Przegladarka uznaje deklaracje z nieznana zmienna za niewazna, wiec
	   ramki po prostu nie istnialy, zaokraglenia byly zerowe, a kolory
	   tekstu dziedziczyly sie z rodzica zamiast byc ustawione.

	   Wartosci nie sa wymyslone. Kazda jest odczytana z tego, co w tym
	   samym pliku stoi juz gdzie indziej wpisane wprost:
	   - #E2E8F0 to kolor ramki w .q-pre i w .btn-action-outline
	   - 2px to promien w .help-panel-modern
	   - #1A202C to --color-dark, uzywany w kilkudziesieciu miejscach
	   - #718096 to kolor podpowiedzi w .q-hint
	   Dzieki temu wlaczenie tych zmiennych nie zmienia stylu strony,
	   tylko przywraca to, co bylo od poczatku zamierzone.

	   Dwa lokalne obejscia z iteracji 13 i 17 (.roi-flip i .btn-action-outline)
	   sa razem z tym usuniete, bo od teraz wpisywalyby ten sam kolor drugi
	   raz i zostawialyby w pliku komentarze, ktore juz nie sa prawdziwe. */
	--color-border: #E2E8F0;
	--radius: 2px;
	--color-text: #1A202C;
	--color-muted: #718096;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--color-bg-page);
	color: var(--color-dark);
	-webkit-font-smoothing: antialiased;
}

/* Typografia */
.text-accent-blue, .text-accent { color: var(--color-blue); }
.text-accent-orange { color: var(--color-orange); }

.section-title {
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #4A5568;
	margin-bottom: 1.5rem;
	display: block;
}

/* Karty (Panels) */
.card-panel {
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	padding: 3rem 2.5rem;
}

/* Przyciski Wyboru (Selectables) */
.version-tile {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem 1rem;
	cursor: pointer;
	text-align: center;
	transition: all 0.3s ease;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	background-color: #ffffff;
}

.version-tile:hover:not(.active) {
	border-color: var(--color-blue);
	transform: translateY(-2px);
}

.version-tile i, .version-tile .icon-placeholder {
	font-size: 2.25rem;
	margin-bottom: 1rem;
	color: var(--color-dark);
	transition: all 0.3s ease;
	font-weight: 700;
}

.version-name {
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.version-subtitle {
	font-size: 0.75rem;
	font-weight: 500;
	margin-top: 0.25rem;
	color: #718096;
}

.version-tile.active {
	background-color: var(--color-dark);
	border-color: var(--color-dark);
	color: #ffffff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.version-tile.active i, .version-tile.active .icon-placeholder {
	color: var(--color-orange);
}

/* Formularze */
.form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.form-input {
	width: 100%;
	height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0 1rem;
	font-family: inherit;
	transition: all 0.2s;
	background-color: #F9FAFB;
}

.form-input:focus {
	outline: none;
	border-color: var(--color-blue);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(13, 127, 219, 0.1);
}

.form-checkbox {
	width: 22px;
	height: 22px;
	accent-color: var(--color-blue);
	cursor: pointer;
}

/* Panele boczne */
.help-panel {
	background-color: var(--color-dark);
	color: #ffffff;
	border-radius: var(--radius);
	padding: 1.5rem;
}

.price-panel {
	background-color: #ffffff;
	border-radius: var(--radius);
	padding: 2rem 1.5rem;
	border-top: 4px solid var(--color-orange);
}

/* CTA & Buttons */
.btn-base {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: none;
	cursor: pointer;
	font-size: 0.875rem;
}

.btn-generate {
	background-color: var(--color-orange);
	color: #ffffff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	padding: 1rem 2rem;
}

.btn-generate:hover:not(:disabled) {
	opacity: 0.9;
	transform: translateY(-1px);
}

.btn-generate:disabled {
	background-color: #CBD5E0;
	cursor: not-allowed;
	opacity: 0.7;
	transform: none !important;
	box-shadow: none !important;
}

/* Summary Action Buttons */
.btn-action-outline {
	background: #ffffff;
	color: var(--color-dark);
	border: 1px solid var(--color-border);
}
.btn-action-outline:hover {
	background: #F7FAFC;
	border-color: var(--color-dark);
}

.btn-action-dark {
	background: var(--color-dark);
	color: #ffffff;
}
.btn-action-dark:hover {
	background: #2D3748;
}

.btn-pdf {
	background-color: var(--color-orange);
	color: #ffffff;
}
.btn-pdf:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}

footer {
	background-color: var(--color-dark);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 2.5rem 1rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

.hidden { display: none !important; }

.section-divider {
	border-top: 2px solid #E2E8F0;
	margin: 3.5rem 0;
	padding-top: 3.5rem;
}

.allegro-highlight {
	background-color: #F7FAFC;
	border-left: 4px solid var(--color-dark);
	border-radius: 0 3px 3px 0;
	padding: 1.5rem;
}

/* Tabela kalkulacji w ofercie */
.offer-table {
	width: 100%;
	border-collapse: collapse;
}
.offer-table th {
	text-align: left;
	padding: 1rem;
	background-color: var(--color-dark);
	color: #ffffff;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--color-orange);
}
.offer-table th:not(:first-child) {
	text-align: right;
}
.offer-table td {
	padding: 1rem;
	border-bottom: 1px solid #F1F5F9;
	font-size: 0.875rem;
}
.offer-table td:not(:first-child) {
	text-align: right;
}

/* --- NOWE STYLE: Modal do wysyłki e-mail --- */
.modal-overlay {
	background-color: rgba(26, 32, 44, 0.75);
	backdrop-filter: blur(4px);
}

.modal-content {
	animation: modalFadeIn 0.3s ease-out forwards;
}

@keyframes modalFadeIn {
	from { opacity: 0; transform: translateY(20px) scale(0.95); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

#ui-help-text ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#ui-help-text li {
    margin-bottom: 0.25rem;
}

#ui-help-text h3 {
    font-weight: bold;
    margin-top: 1rem;
    display: block;
}

.space-y-8 ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.space-y-8 li {
    margin-bottom: 0.1rem;
}

.space-y-8 ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.space-y-8 li {
    margin-bottom: 0.1rem;
}

p{
	line-height: 1.4;
	padding-bottom: 12px;
}

/* --- Nowoczesne Panele Pomocy --- */
.help-panel-modern {
    margin-top: 1.7rem;
    background-color: rgba(0, 0, 0, 0.01); /* Delikatne tło (slate-50) */
    border-left: 2px solid #FEA926;
    border-radius: 2px;
    /* ITERACJA 18: bylo 0.1rem od gory i naglowek "CO TO OZNACZA" dotykal krawedzi. */
    padding: 1.1rem 1.5rem 1.1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Bardzo dyskretny cień */
}

.help-panel-modern-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1A202C; /* Szary tytuł (slate-500) */
}

.help-panel-modern-content {
    font-size: 0.775rem; /* text-sm */
    color: #1A202C; /* Delikatniejsza czerń / szarość (slate-600) */
    line-height: 1.625;
}

/* Formatowanie paragrafów i odstępów wewnątrz */
.help-panel-modern-content p {
    margin-bottom: 0.5rem;
}

/* Formatowanie list nienumerowanych i numerowanych wewnątrz panelu */
.help-panel-modern-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.help-panel-modern-content ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.help-panel-modern-content li {
    margin-bottom: 0.25rem;
    padding-left: 0.25rem; /* Odsunięcie tekstu od punktora */
}

/* Usuwa margines na dole, jeśli element jest ostatni */
.help-panel-modern-content p:last-child,
.help-panel-modern-content ul:last-child,
.help-panel-modern-content ol:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   ITERACJA 01 - NOWY UKLAD KALKULATORA
   Wszystko ponizej dotyczy przebudowanego ekranu: trzy pytania, wynik,
   sekcja dopracowania i sekcja oszczednosci.
   ============================================================================= */

/* --- Blok pytania -------------------------------------------------------- */
.q-block {
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid #EDF2F7;
}
.q-block:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.q-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 0.5rem;
}

.q-number {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-dark);
	color: var(--color-orange);
	font-size: 0.85rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.q-title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-dark);
	margin: 0;
}

.q-hint {
	font-size: 0.85rem;
	color: #718096;
	margin: 0 0 1.25rem 2.9rem;
	padding-bottom: 0;
	line-height: 1.5;
}

.q-head + .choice-row { margin-top: 1.25rem; }

/* --- Przyciski wyboru ---------------------------------------------------- */
.choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-left: 2.9rem;
}

.choice {
	flex: 1 1 auto;
	min-width: 140px;
	min-height: 58px;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #ffffff;
	color: var(--color-dark);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
}

.choice-narrow {
	flex: 0 1 92px;
	min-width: 92px;
}

.choice:hover:not(.active) {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.choice.active {
	background: var(--color-dark);
	border-color: var(--color-dark);
	color: #ffffff;
	box-shadow: 0 6px 12px -4px rgba(26, 32, 44, 0.35);
}

/* --- Doprecyzowanie liczby ----------------------------------------------- */
.q-exact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0 0 2.9rem;
}
.q-exact-label {
	font-size: 0.8rem;
	color: #718096;
	font-weight: 500;
}
.q-exact-input {
	width: 140px;
	height: 42px;
}
.q-exact-unit {
	font-size: 0.8rem;
	color: #718096;
}

/* --- Podpytanie ---------------------------------------------------------- */
.q-sub {
	margin: 1.75rem 0 0 2.9rem;
	padding: 1.25rem 1.5rem 1.5rem 1.5rem;
	background: #F9FAFB;
	border-left: 3px solid var(--color-orange);
}
.q-sub .choice-row { margin-left: 0; }
.q-sub-title {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.9rem;
	padding-bottom: 0;
	color: var(--color-dark);
}

/* --- Karta wyniku -------------------------------------------------------- */
.result-card {
	background: #ffffff;
	border-radius: var(--radius);
	border-top: 4px solid var(--color-orange);
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.2);
	padding: 2.5rem;
}

.result-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid #EDF2F7;
}

.result-label {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #A0AEC0;
	margin-bottom: 0.5rem;
	padding-bottom: 0;
}

.result-price {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-dark);
	letter-spacing: -0.02em;
}
.result-price-sep { color: #CBD5E0; font-weight: 600; }
.result-price-cur { font-size: 1.1rem; color: #718096; margin-left: 0.35rem; }

.result-sub {
	font-size: 0.78rem;
	color: #718096;
	margin-top: 0.6rem;
	padding-bottom: 0;
	line-height: 1.5;
	max-width: 34rem;
}

.badge {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 2px;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.badge-base { background: #E6F0FA; color: #0D7FDB; }
.badge-premium { background: #FEF3E0; color: #B5730F; }

/* --- Pozycje wyceny ------------------------------------------------------ */
.result-rows {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 0 0;
}

.result-row {
	padding: 1rem 0;
	border-bottom: 1px solid #F7FAFC;
}
.result-row:last-child { border-bottom: none; }

.result-row-main {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.result-row-name {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-dark);
}

.result-row-value {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-dark);
	white-space: nowrap;
	text-align: right;
}

.result-row-note {
	font-size: 0.75rem;
	color: #718096;
	margin-top: 0.35rem;
	padding-bottom: 0;
	line-height: 1.55;
	max-width: 44rem;
}

.result-year2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	background: #F7FAFC;
	font-size: 0.85rem;
	color: #4A5568;
}
.result-year2 strong { color: var(--color-dark); white-space: nowrap; }

/* --- CTA ----------------------------------------------------------------- */
.result-cta {
	margin-top: 2rem;
	text-align: center;
}

.btn-cta-primary {
	background-color: var(--color-orange);
	color: #ffffff;
	padding: 1.1rem 2.5rem;
	font-size: 0.95rem;
	box-shadow: 0 8px 16px -6px rgba(254, 169, 38, 0.7);
}
.btn-cta-primary:hover {
	background-color: #eb9a1c;
	transform: translateY(-1px);
}

.result-cta-note {
	font-size: 0.78rem;
	color: #718096;
	margin-top: 0.9rem;
	padding-bottom: 0;
	line-height: 1.55;
	max-width: 32rem;
	margin-left: auto;
	margin-right: auto;
}

.result-secondary {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #EDF2F7;
	text-align: center;
}

.link-action {
	background: none;
	border: none;
	padding: 0.4rem 0.25rem;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: #4A5568;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.15s;
}
.link-action:hover { color: var(--color-blue); }

/* --- Sekcje rozwijane ---------------------------------------------------- */
.accordion-head {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.75rem;
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s;
}
.accordion-head:hover { border-color: var(--color-blue); }

.accordion-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-dark);
	text-align: left;
}

.accordion-chevron {
	color: #A0AEC0;
	transition: transform 0.2s ease;
}
.accordion-chevron-open { transform: rotate(180deg); }

.accordion-body {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-top: none;
	padding: 2.25rem 1.75rem;
}

.refine-group {
	padding-bottom: 2.25rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid #EDF2F7;
}
.refine-group:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.field-hint {
	font-size: 0.72rem;
	color: #A0AEC0;
	margin-top: 0.4rem;
	padding-bottom: 0;
	line-height: 1.5;
}

/* --- Oszczednosci -------------------------------------------------------- */
.roi-intro {
	font-size: 0.85rem;
	color: #4A5568;
	line-height: 1.6;
	margin-bottom: 1.75rem;
	max-width: 46rem;
}

.roi-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: stretch;
}

.roi-items {
	flex: 1 1 320px;
	min-width: 280px;
}

.roi-item { margin-bottom: 1.5rem; }

.roi-item-label {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #A0AEC0;
	margin-bottom: 0.3rem;
	padding-bottom: 0;
}

.roi-item-value {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--color-green);
	padding-bottom: 0;
	line-height: 1.2;
}
.roi-item-unit { font-size: 0.8rem; font-weight: 500; color: #A0AEC0; }

.roi-item-note {
	font-size: 0.75rem;
	color: #718096;
	line-height: 1.6;
	margin-top: 0.4rem;
	padding-bottom: 0;
	max-width: 34rem;
}

.roi-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--color-green-dark);
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 600;
}
.roi-total strong { color: #ffffff; font-size: 1.15rem; white-space: nowrap; }

.roi-payback {
	flex: 0 1 260px;
	min-width: 220px;
	background: var(--color-orange);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.roi-payback-label {
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(26, 32, 44, 0.75);
	padding-bottom: 0;
	margin-bottom: 0.4rem;
}

.roi-payback-value {
	font-size: 3rem;
	font-weight: 800;
	color: var(--color-dark);
	line-height: 1;
	padding-bottom: 0;
	letter-spacing: -0.03em;
}
.roi-payback-value span {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 0.3rem;
}

.roi-payback-note {
	font-size: 0.7rem;
	color: rgba(26, 32, 44, 0.8);
	line-height: 1.55;
	margin-top: 0.9rem;
	padding-bottom: 0;
}

.roi-compare {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: #F7FAFC;
	border-left: 3px solid #CBD5E0;
}
.roi-compare-title {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #A0AEC0;
	padding-bottom: 0;
	margin-bottom: 0.4rem;
}
.roi-compare-value {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-dark);
	padding-bottom: 0;
}
.roi-compare-value span { font-size: 0.75rem; font-weight: 500; color: #A0AEC0; }
.roi-compare-note {
	font-size: 0.75rem;
	color: #718096;
	line-height: 1.6;
	margin-top: 0.5rem;
	padding-bottom: 0;
	max-width: 44rem;
}

/* ITERACJA 18: to zdanie mowi, ze klient oszczedza WIECEJ, niz pokazuje
   rachunek, a wygladalo jak drobny druk pod gwiazdka, czyli jak zastrzezenie
   podnoszace koszt. Normalna wielkosc pisma, bez kursywy, z akcentem z lewej. */
.roi-excluded {
	margin-top: 1.25rem;
	padding: .9rem 0 .9rem 1rem;
	border-left: 3px solid #FEA926;
	font-size: 0.875rem;
	color: #2D3748;
	line-height: 1.65;
	max-width: 46rem;
}
.roi-excluded strong { color: #1A202C; font-weight: 700; }

.roi-empty {
	padding: 1.5rem;
	background: #F7FAFC;
	font-size: 0.85rem;
	color: #718096;
	line-height: 1.6;
}

/* --- Telefon ------------------------------------------------------------- */
@media (max-width: 640px) {
	.card-panel { padding: 1.75rem 1.25rem; }
	.result-card { padding: 1.5rem 1.25rem; }
	.accordion-body { padding: 1.5rem 1.25rem; }

	.q-title { font-size: 1.1rem; }
	.q-hint { margin-left: 0; }
	.choice-row { margin-left: 0; }
	.q-exact { margin-left: 0; }
	.q-sub { margin-left: 0; padding: 1rem 1.1rem 1.25rem 1.1rem; }

	.choice { flex: 1 1 100%; min-width: 0; }
	.choice-narrow { flex: 1 1 60px; min-width: 60px; }

	.result-price { font-size: 1.9rem; }
	.result-row-main { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
	.result-row-value { text-align: left; }

	.btn-cta-primary { width: 100%; justify-content: center; }
	.roi-payback { flex: 1 1 100%; }
}

.roi-payback-long { background: #E2E8F0; }
.roi-payback-long .roi-payback-label,
.roi-payback-long .roi-payback-value,
.roi-payback-long .roi-payback-note { color: #4A5568; }


/* =============================================================================
   ITERACJA 02 - spojnosc z landing page, pasek CTA, nowy uklad wyniku
   ============================================================================= */

.lp-hero {
	background: var(--color-dark);
	color: #fff;
	border-bottom: 4px solid var(--color-orange);
}
.lp-hero-title {
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0;
}
.lp-hero-title .text-accent { color: var(--color-orange); }
.lp-hero-desc {
	font-size: clamp(.95rem, 1.3vw, 1.05rem);
	color: #9aa6bf;
	max-width: 46rem;
	line-height: 1.6;
	padding-bottom: 0;
	margin: 0;
}

/* --- Pytanie 2: dwa poziomy --- */
.q-sublabel {
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 .25rem 2.9rem;
	padding-bottom: 0;
}
.q-sub2 {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px dashed var(--color-border);
}

/* --- Karta wyniku: jedna cena --- */
.result-price { font-size: 2.6rem; }
.result-year2 {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	margin-top: .5rem;
	padding: 0;
	background: none;
	font-size: .85rem;
	color: var(--color-muted);
}
.result-foot-note {
	font-size: .78rem;
	color: var(--color-muted);
	line-height: 1.55;
	padding: 1rem 0 0 0;
	border-top: 1px solid #f1f5f9;
	margin-top: .5rem;
}

/* --- Wycena indywidualna --- */
.result-card-individual {
	background: var(--color-dark);
	border-top-color: var(--color-orange);
}
.result-card-individual .result-label { color: #9aa6bf; }
.result-ind-title {
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 1rem;
}
.result-ind-desc {
	font-size: .92rem;
	line-height: 1.65;
	color: #9aa6bf;
	max-width: 44rem;
	padding-bottom: 0;
}
.result-card-individual .result-cta { text-align: left; }

/* --- CTA w kolorach landinga: pomaranczowy z ciemnym tekstem --- */
.btn-cta-primary {
	background-color: var(--color-orange);
	color: var(--color-dark-deep);
	padding: 1.05rem 2.2rem;
	font-size: .92rem;
	box-shadow: 0 8px 18px -8px rgba(254, 169, 38, .8);
}
.btn-cta-primary:hover {
	background-color: #ffb945;
	color: var(--color-dark-deep);
	transform: translateY(-1px);
}

/* --- Sekcja oszczednosci jako karta, otwarta domyslnie --- */
.roi-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-green);
	border-radius: var(--radius);
	padding: 2.25rem;
}
.roi-card-title {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--color-text);
	margin: 0 0 .5rem;
}
.roi-scale {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: rgba(47, 109, 246, .07);
	border-left: 3px solid var(--color-blue);
	font-size: .88rem;
	line-height: 1.6;
	color: var(--color-text);
}
.roi-assumptions-toggle {
	margin-top: 1.5rem;
	background: none;
	border: none;
	padding: .4rem 0;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--color-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.roi-assumptions-toggle:hover { color: var(--color-blue); }
.roi-params {
	margin-top: 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

/* --- Pasek przyklejony do dolu --- */
.sticky-bar {
	/* fixed, nie sticky: sticky w kolumnie flex potrafi wyladowac w srodku
	   dokumentu zamiast przy dolnej krawedzi okna. */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--color-dark);
	border-top: 3px solid var(--color-orange);
	box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
}
.sticky-bar-inner {
	max-width: 64rem;
	margin: 0 auto;
	padding: .85rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.sticky-bar-label {
	display: block;
	font-size: .65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #9aa6bf;
}
.sticky-bar-price strong {
	font-size: 1.35rem;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}
.sticky-bar-btn { padding: .8rem 1.6rem; font-size: .85rem; }

/* Miejsce na pasek przyklejony do dolu okna. Pasek jest position:fixed,
   wiec nie rezerwuje sobie miejsca sam i potrafi zaslonic stopke z danymi
   rejestrowymi. Rezerwe robimy na stopce, bo to ostatni element strony. */
main { padding-bottom: 40px; }
footer { padding-bottom: 130px; }

@media (max-width: 640px) {
	footer { padding-bottom: 150px; }
}

@media (max-width: 640px) {
	.q-sublabel { margin-left: 0; }
	.result-price { font-size: 1.9rem; }
	.roi-card { padding: 1.5rem 1.25rem; }
	.sticky-bar-inner { padding: .7rem .85rem; gap: .75rem; }
	.sticky-bar-price strong { font-size: 1.1rem; }
	.sticky-bar-btn { padding: .75rem 1rem; font-size: .78rem; width: auto; }
	.result-card-individual .result-cta { text-align: center; }
}

/* =============================================================================
   ITERACJA 04 - zaufanie, argumenty, FAQ, CTA z twarza
   ============================================================================= */

/* --- Podpowiedz o zwrocie pod kwota --- */
.result-payback-hint {
	margin-top: 1.1rem;
	padding: .55rem .9rem;
	display: inline-block;
	background: rgba(47, 109, 246, .08);
	border-left: 3px solid var(--color-blue);
	font-size: .85rem;
	font-weight: 600;
	color: var(--color-text);
	padding-bottom: .55rem;
}
.res-payback-link {
	color: var(--color-blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Osoba przy CTA --- */
.cta-person {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-align: left;
	max-width: 30rem;
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
}
.cta-person-photo {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.cta-person-text strong { display: block; font-size: .95rem; color: var(--color-text); }
.cta-person-text span { display: block; font-size: .75rem; color: var(--color-muted); margin-bottom: .35rem; }
.cta-person-text p {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--color-text);
	padding-bottom: 0;
	margin: 0;
}

/* --- Dwa przyciski o roznym progu --- */
.cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}
.btn-cta-secondary {
	background: #ffffff;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	padding: 1.05rem 1.6rem;
	font-size: .85rem;
}
.btn-cta-secondary:hover { border-color: var(--color-blue); color: var(--color-blue); }

/* --- Zdjecie ryzyka --- */
.cta-risk {
	list-style: none;
	margin: 1.5rem auto 0;
	padding: 0;
	max-width: 34rem;
	text-align: left;
}
.cta-risk li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .82rem;
	line-height: 1.55;
	color: var(--color-muted);
	margin-bottom: .5rem;
}
.cta-risk i { color: #17c0a8; font-size: .8rem; margin-top: .2rem; flex: 0 0 auto; }

/* --- Karty informacyjne (argumenty, zaufanie, FAQ) --- */
.info-card {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 2.25rem;
}
.info-card-title {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

/* --- Argumenty --- */
.args-list { display: grid; gap: 1.25rem; }
.arg-item {
	padding-left: 1.1rem;
	border-left: 3px solid var(--color-orange);
}
.arg-item-title {
	font-size: .98rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 .25rem;
}
.arg-item-desc {
	font-size: .85rem;
	line-height: 1.6;
	color: var(--color-muted);
	padding-bottom: 0;
	margin: 0;
	max-width: 44rem;
}

/* --- Zaufanie --- */
.trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.trust-item h3 {
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 .4rem;
}
.trust-item p {
	font-size: .84rem;
	line-height: 1.6;
	color: var(--color-muted);
	padding-bottom: 0;
	margin: 0;
}
.trust-quote {
	margin: 1.75rem 0 0;
	padding: 1.25rem 1.5rem;
	background: var(--color-bg-page);
	border-left: 3px solid var(--color-blue);
}
.trust-quote p {
	font-size: .92rem;
	line-height: 1.65;
	color: var(--color-text);
	font-style: italic;
	padding-bottom: .5rem;
	margin: 0;
}
.trust-quote cite {
	font-size: .78rem;
	color: var(--color-muted);
	font-style: normal;
	font-weight: 600;
}

/* --- FAQ --- */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
	cursor: pointer;
	padding: 1rem 2rem 1rem 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--color-text);
	list-style: none;
	position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+';
	position: absolute;
	right: .25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--color-muted);
	line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--color-blue); }
.faq-item p {
	font-size: .87rem;
	line-height: 1.7;
	color: var(--color-muted);
	padding: 0 2rem 1.25rem 0;
	margin: 0;
	max-width: 46rem;
}

/* --- Telefon w pasku --- */
.sticky-bar-actions { display: flex; align-items: center; gap: .75rem; }
.sticky-bar-call {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, .25);
	color: #ffffff;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	border-radius: var(--radius);
	transition: all .15s;
}
.sticky-bar-call:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }

@media (max-width: 640px) {
	.info-card { padding: 1.5rem 1.25rem; }
	.cta-person { flex-direction: column; text-align: center; gap: .75rem; }
	.cta-buttons { flex-direction: column; }
	.btn-cta-secondary { width: 100%; justify-content: center; }
	.sticky-bar-call { padding: .75rem .85rem; font-size: 0; gap: 0; }
	.sticky-bar-call i { font-size: 1rem; }
	.trust-grid { gap: 1.25rem; }
}

/* =============================================================================
   ITERACJA 05 - link do wyceny, kontekst w formularzu, pole o problemie
   ============================================================================= */

.link-banner {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: 1.5rem;
	padding: .9rem 1.25rem;
	background: rgba(47, 109, 246, .08);
	border-left: 3px solid var(--color-blue);
	font-size: .85rem;
	color: var(--color-text);
}
.link-banner i { color: var(--color-blue); }

.result-secondary { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }

/* Przypomnienie konfiguracji w oknie formularza */
.modal-quote {
	margin-bottom: 1.5rem;
	padding: .85rem 1.1rem;
	background: var(--color-bg-page);
	border-left: 3px solid var(--color-orange);
	font-size: .85rem;
	line-height: 1.55;
	color: var(--color-text);
}
.modal-quote-label {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--color-muted);
	margin-bottom: .2rem;
}
.modal-quote strong { font-size: 1.05rem; }

.form-textarea {
	height: auto;
	padding: .75rem 1rem;
	line-height: 1.55;
	resize: vertical;
	font-size: .9rem;
}

@media (max-width: 640px) {
	.result-secondary { flex-direction: column; gap: .9rem; }
}


/* =============================================================================
   ITERACJA 06 - dostepnosc klawiatury
   ============================================================================= */

.version-tile:focus-visible,
.choice:focus-visible,
.accordion-head:focus-visible,
.link-action:focus-visible,
.btn-base:focus-visible,
.faq-item summary:focus-visible {
	outline: 3px solid var(--color-blue);
	outline-offset: 2px;
}


/* =============================================================================
   ITERACJA 07 - opinie klientow, wejscie z linku, drobne korekty ukladu
   ============================================================================= */

/* Podpowiedz o zwrocie schodzi pod spod, zamiast kleic sie do kwoty za kolejny rok */
.result-year2 { display: flex; justify-content: flex-start; gap: .5rem; }
.result-payback-hint { display: block; width: fit-content; max-width: 100%; }

/* Osoba przy CTA na calej szerokosci karty */
.cta-person {
	max-width: none;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
}
.cta-person-text strong { font-size: 1rem; margin-bottom: .3rem; }
.cta-person-text p { font-size: .88rem; }

/* Przycisk odslaniajacy pytania po wejsciu z linku */
.btn-show-questions {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.5rem;
	padding: .85rem 1.4rem;
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: .85rem;
	font-weight: 700;
	color: var(--color-text);
	cursor: pointer;
	transition: all .15s;
}
.btn-show-questions:hover { border-color: var(--color-blue); color: var(--color-blue); }
.btn-show-questions i { color: var(--color-muted); }

@media (max-width: 640px) {
	.cta-person { flex-direction: row; text-align: left; padding: 1rem 1.1rem; }
	.btn-show-questions { width: 100%; justify-content: center; }
}


/* =============================================================================
   ITERACJA 09 - opinie z hierarchia
   Trzy rowne ciemne prostokaty dawaly wszystkiemu jednakowa wage i przejmowaly
   uwage od karty z cena. Teraz jedna opinia niesie sekcje, dwie ja potwierdzaja.
   ============================================================================= */

.quotes-card {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.quotes-hero {
	background: var(--color-dark);
	color: #ffffff;
	padding: 2.5rem 2.25rem;
}
.quotes-hero p {
	font-size: 1.15rem;
	line-height: 1.55;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 1.1rem;
	max-width: 56ch;
	padding-bottom: 0;
}
.quotes-hero cite {
	font-size: .72rem;
	font-weight: 800;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-orange);
}

.quotes-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.quotes-two > div { padding: 1.75rem 2.25rem; }
.quotes-two > div:first-child { border-right: 1px solid var(--color-border); }
.quotes-two p {
	font-size: .87rem;
	line-height: 1.65;
	color: var(--color-muted);
	margin: 0 0 .7rem;
	padding-bottom: 0;
}
.quotes-two cite {
	font-size: .68rem;
	font-weight: 800;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text);
}

@media (max-width: 640px) {
	.quotes-hero { padding: 1.75rem 1.25rem; }
	.quotes-hero p { font-size: 1.1rem; }
	.quotes-two { grid-template-columns: 1fr; }
	.quotes-two > div { padding: 1.35rem 1.25rem; }
	.quotes-two > div:first-child {
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}
}

/* =============================================================================
   ITERACJA 11 - tytul wtopiony w ciemny blok (wariant F)
   Bialy pasek z tytulem nad ciemnym blokiem dawal trzy zmiany tla w jednym
   elemencie. Tytul jest teraz mala etykieta wewnatrz bloku, z kreska ciagnaca
   sie w prawo. Ten sam zabieg co przy naglowkach sekcji w mailu.
   ============================================================================= */

.quotes-kicker {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-orange);
	margin: 0 0 1.4rem;
}
.quotes-kicker::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, .16);
}

@media (max-width: 640px) {
	.quotes-kicker { font-size: .65rem; margin-bottom: 1.1rem; }
}


/* =============================================================================
   ITERACJA 13 - sekcja oszczednosci czytana jako zysk, nie jako kolejny koszt
   Blok stoi zaraz pod tabela z cena i mowil dokladnie tym samym jezykiem
   wizualnym: granatowe kwoty, ciemny pasek sumy. Oko nie dostawalo zadnego
   sygnalu, ze kierunek pieniedzy sie odwrocil. Trzy rzeczy naraz: etykieta
   nad tytulem, pasek zderzajacy cene ze zwrotem, zielen i plus na kwotach.
   ============================================================================= */

.roi-kicker {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	background: var(--color-green-bg);
	border: 1px solid var(--color-green-line);
	padding: .35rem .6rem;
	border-radius: var(--radius);
	margin-bottom: .85rem;
}
.roi-kicker svg { width: 12px; height: 12px; flex: 0 0 auto; }

/* Pasek zderzenia: co placisz, obok tego, co odzyskujesz */
.roi-flip {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.9rem;
	background: #ffffff;
}
.roi-flip-cell span {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #A0AEC0;
	margin-bottom: .35rem;
}
.roi-flip-cell strong {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}
.roi-flip-cell em {
	display: block;
	font-style: normal;
	font-size: .72rem;
	color: #94A3B8;
	margin-top: .3rem;
}
.roi-flip-cost strong { color: var(--color-dark); }
.roi-flip-gain strong { color: var(--color-green); }
.roi-flip-arrow {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-green-bg);
	border: 1px solid var(--color-green-line);
	color: var(--color-green-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.roi-flip-arrow svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
	.roi-flip {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.25rem;
	}
	.roi-flip-arrow { transform: rotate(90deg); margin: 0 auto; }
	.roi-flip-cell strong { font-size: 1.35rem; }
}


/* =============================================================================
   ITERACJA 17 - pytanie o system, wielkosc zamowienia, skala, sezon
   ============================================================================= */

/* --- Pytanie o system, nad pytaniem pierwszym, bez numeru --- */
.q-pre {
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid #E2E8F0;
}
.q-pre-label {
	font-size: 1rem;
	font-weight: 700;
	color: #1A202C;
	margin: 0 0 .25rem;
	padding-bottom: 0;
}
/* Pytanie o system nie ma kolka z numerem, wiec wciecie 2.9rem, ktore
   w pozostalych pytaniach wyrownuje tresc pod tytulem, tutaj nie ma
   sie do czego wyrownac. Podpowiedz i przyciski wisialy w prawo
   wzgledem naglowka. */
.q-pre .q-hint,
.q-pre .choice-row { margin-left: 0; }

.choice-row-erp .choice { flex: 1 1 auto; }
.choice-row-erp .choice-muted {
	color: #94A3B8;
	font-weight: 500;
}
.choice-row-erp .choice-muted.active { color: #ffffff; }

/* --- Uczciwy komunikat dla innego systemu --- */
.q-stop {
	background: #FEF3C7;
	border-left: 4px solid #F59E0B;
	padding: 1.5rem 1.75rem;
	margin-bottom: 0;
}
.q-stop h3 {
	font-size: 1.05rem;
	font-weight: 800;
	color: #78350F;
	margin: 0 0 .6rem;
	padding-bottom: 0;
}
.q-stop p {
	font-size: .9rem;
	line-height: 1.65;
	color: #92400E;
	margin: 0 0 1.25rem;
	padding-bottom: 0;
	max-width: 44rem;
}
.q-stop-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

/* --- Pole o wielkosci zamowienia --- */
.q-sub { margin-top: 1.75rem; }

/* --- Podsumowanie skali pracy magazynu --- */
.skala-info {
	margin: 1rem 0 0;
	padding: .7rem 1rem;
	background: #F1F5F9;
	border-left: 3px solid #64748B;
	font-size: .85rem;
	line-height: 1.5;
	color: #334155;
}
.skala-info strong { color: #1A202C; }

/* --- Uwaga przy zbyt malej skali --- */
.male-card {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-left: 4px solid #F59E0B;
	border-radius: var(--radius);
	padding: 1.75rem 2rem;
}
.male-card h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: #1A202C;
	margin: 0 0 .6rem;
	padding-bottom: 0;
}
.male-card p {
	font-size: .9rem;
	line-height: 1.7;
	color: #4A5568;
	margin: 0;
	padding-bottom: 0;
	max-width: 52rem;
}

/* --- Argument sezonowy przy cenie --- */
.sezon-box {
	margin-top: 1.5rem;
	padding: 1.15rem 1.4rem;
	background: rgba(254, 169, 38, .1);
	border-left: 3px solid var(--color-orange);
}
.sezon-box h4 {
	font-size: .95rem;
	font-weight: 800;
	color: #1A202C;
	margin: 0 0 .35rem;
	padding-bottom: 0;
}
.sezon-box p {
	font-size: .85rem;
	line-height: 1.65;
	color: #4A5568;
	margin: 0;
	padding-bottom: 0;
	max-width: 46rem;
}

/* --- Przekazanie wyceny osobie decyzyjnej ---------------------------------
   Bylo malym odnosnikiem tekstowym na dole. W tej sprzedazy osoba liczaca
   czesto nie jest osoba decydujaca, a otwarcie przeslanego linku wysyla
   alert, czyli najmocniejszy sygnal w calym systemie.                     */
.result-forward {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #E2E8F0;
}
.result-forward-note {
	margin: .65rem 0 0;
	padding-bottom: 0;
	font-size: .78rem;
	line-height: 1.6;
	color: #94A3B8;
	max-width: 40rem;
}

/* --- Podpowiedz o bledach przy duzych zamowieniach --- */
.field-hint-uwaga {
	margin-top: .5rem;
	padding: .6rem .8rem;
	background: #FEF3C7;
	border-left: 3px solid #F59E0B;
	color: #78350F;
	font-style: normal;
}

@media (max-width: 640px) {
	.q-stop { padding: 1.25rem; }
	.q-stop-actions { flex-direction: column; align-items: stretch; gap: .75rem; }
	.male-card { padding: 1.25rem; }
	.sezon-box { padding: 1rem 1.15rem; }
	.choice-row-erp { flex-wrap: wrap; }
	.choice-row-erp .choice { flex: 1 1 45%; }
}



/* =============================================================================
   ITERACJA 18 (08.09.2026)
   Powrot do wyceny z sekcji dopracowania, animacje rozwijania i przewijania,
   tresc pytania FAQ w osobnym kontenerze, zeby dalo sie ja animowac.
   ============================================================================= */

/* --- Przycisk zamykajacy sekcje dopracowania ------------------------------- */
.refine-done {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #EDF2F7;
	display: flex;
	justify-content: flex-end;
}
@media (max-width: 640px) {
	.refine-done { justify-content: stretch; }
	.refine-done .btn-base { width: 100%; justify-content: center; }
}

/* --- Plynne przewijanie do kotwic ------------------------------------------
   Dotyczy odnosnika "Zobacz wyliczenie" pod kwota zwrotu. Przewiniecia
   sterowane skryptem korzystaja z tej samej zasady przez funkcje przewinDo. */
html { scroll-behavior: smooth; }

/* --- Tresc pytania FAQ -----------------------------------------------------
   Byla wprost w <details>, wiec nie bylo czego animowac. Teraz siedzi
   w kontenerze, ktoremu skrypt zmienia wysokosc. Wyglad bez zmian. */
.faq-body { overflow: hidden; }

/* --- Szanujemy wylaczone animacje w systemie ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Kwota za kolejny rok w przeliczeniu na miesiac (iteracja 22) ----------
   Celowo dyskretna: to nie jest nowa pozycja cennika, tylko ta sama kwota
   powiedziana drugi raz, w jednostce, ktora latwiej sobie wyobrazic. */
.result-year2-month {
	color: var(--color-muted);
	font-size: .82rem;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.result-year2 { flex-wrap: wrap; }
	.result-year2-month { flex-basis: 100%; }
}

/* kalkulacja-23: numer telefonu w karcie wyniku */
.cta-person-text p.cta-person-phone { margin-top: .35rem; }
/* .cta-person-text span ma display:block i szary kolor - tu cala linijka ma byc jednym zdaniem */
.cta-person-text p.cta-person-phone span { display: inline; font-size: inherit; color: inherit; margin: 0; }
.cta-person-phone a { font-weight: 700; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.cta-person-phone a:hover { text-decoration: underline; }