/*
 * Taxolution Tools — shared stylesheet for all calculators.
 *
 * All classes are namespaced with .txc to avoid theme collisions.
 * Existing calculators used inline styles; this file is the source-of-truth
 * replacement. When editing colors or spacing here, every calculator updates.
 *
 * Color tokens (matches taxolution.ch brand):
 *   --txc-ink        #032A41  (primary text / accent)
 *   --txc-ink-soft   #5a6d7a  (secondary text)
 *   --txc-border     #d0d8dd  (input borders)
 *   --txc-info-bg    #edf6fc  /  #B1D9F2 (info boxes / blue summary)
 *   --txc-warn-bg    #f7f9fa  /  #FFCA86 (disclaimer)
 *   --txc-green-bg   #e9f4f0  /  #4a8f7f (summary "cheapest/saving")
 *   --txc-purple-bg  #f3eff8  /  #7b6aab (summary "expensive/cost")
 */

.txc {
	--txc-ink: #032A41;
	--txc-ink-soft: #5a6d7a;
	--txc-border: #d0d8dd;
	--txc-info-bg: #edf6fc;
	--txc-info-bar: #B1D9F2;
	--txc-warn-bg: #f7f9fa;
	--txc-warn-bar: #FFCA86;
	--txc-green-bg: #e9f4f0;
	--txc-green-ink: #4a8f7f;
	--txc-purple-bg: #f3eff8;
	--txc-purple-ink: #7b6aab;

	box-sizing: border-box;
	max-width: 720px;
	margin: 24px auto;
	padding: 28px;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(3, 42, 65, 0.08);
	color: var(--txc-ink);
	font-family: inherit;
	line-height: 1.5;
}

.txc *,
.txc *::before,
.txc *::after {
	box-sizing: border-box;
}

/* ───── Heading ─────────────────────────────────────────────────────── */
.txc__title {
	color: var(--txc-ink);
	font-size: 1.4em;
	font-weight: 700;
	margin: 0 0 4px 0;
	line-height: 1.3;
}

.txc__subtitle {
	color: var(--txc-ink-soft);
	font-size: 0.9em;
	margin: 0 0 22px 0;
	line-height: 1.5;
}

/* ───── Form layout ─────────────────────────────────────────────────── */
.txc-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.txc-field {
	flex: 1;
	min-width: 180px;
}

.txc-field--full {
	flex-basis: 100%;
	min-width: 100%;
}

.txc-label {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
	margin-bottom: 5px;
	letter-spacing: 0.02em;
}

.txc .txc-input,
.txc .txc-select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--txc-border);
	border-radius: 8px;
	font-size: 0.95em;
	background: #ffffff;
	color: var(--txc-ink);
	font-family: inherit;
	line-height: 1.4;
	box-shadow: none;
}

.txc .txc-input:focus,
.txc .txc-select:focus {
	outline: none;
	border-color: var(--txc-info-bar);
	box-shadow: 0 0 0 3px rgba(177, 217, 242, 0.35);
}

.txc .txc-input[readonly] {
	background: #f7f9fa;
}

/* ───── Info / disclaimer blocks ────────────────────────────────────── */
.txc-info {
	background: var(--txc-info-bg);
	border-left: 4px solid var(--txc-info-bar);
	border-radius: 0 8px 8px 0;
	padding: 10px 14px;
	margin-bottom: 18px;
	font-size: 0.82em;
	color: var(--txc-ink);
	line-height: 1.5;
}

.txc-disclaimer {
	background: var(--txc-warn-bg);
	border-left: 4px solid var(--txc-warn-bar);
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	margin-top: 18px;
	font-size: 0.8em;
	color: var(--txc-ink-soft);
	line-height: 1.5;
}

.txc-disclaimer strong {
	color: var(--txc-ink);
}

/* ───── Summary cards (3-up flex row for results) ───────────────────── */
.txc-summary {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.txc-card {
	flex: 1;
	min-width: 140px;
	border-radius: 10px;
	padding: 16px;
	text-align: center;
}

.txc-card__label {
	font-size: 0.78em;
	color: var(--txc-ink-soft);
	margin-bottom: 5px;
}

.txc-card__value {
	font-size: 1.3em;
	font-weight: 700;
}

.txc-card--green {
	background: var(--txc-green-bg);
}
.txc-card--green .txc-card__value {
	color: var(--txc-green-ink);
}

.txc-card--purple {
	background: var(--txc-purple-bg);
}
.txc-card--purple .txc-card__value {
	color: var(--txc-purple-ink);
}

.txc-card--blue {
	background: var(--txc-info-bg);
}
.txc-card--blue .txc-card__value {
	color: var(--txc-ink);
}

.txc-card__suffix {
	font-size: 0.55em;
	font-weight: 400;
	color: var(--txc-ink-soft);
	white-space: nowrap;
}

/* ───── Step-by-step breakdown (multi-line calc explainer) ──────────── */
.txc-steps {
	background: #f7f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 18px;
}

.txc-steps__title {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
	margin-bottom: 14px;
}

.txc-steps__step {
	margin-bottom: 14px;
}

.txc-steps__step:last-child {
	margin-bottom: 0;
}

.txc-steps__label {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
	margin-bottom: 4px;
}

.txc-steps__detail {
	font-size: 0.8em;
	color: var(--txc-ink-soft);
	line-height: 1.5;
}

.txc-steps__detail strong {
	color: var(--txc-ink);
	font-weight: 700;
}

.txc-steps__total {
	border-top: 1px solid var(--txc-border);
	padding-top: 12px;
	margin-top: 2px;
}

.txc-steps__big {
	color: var(--txc-green-ink) !important;
	font-size: 1.1em;
}

/* ───── Small empty-state / note text ───────────────────────────────── */
.txc-empty {
	color: var(--txc-ink-soft);
	font-size: 0.9em;
	padding: 16px;
	text-align: center;
}

.txc-emw-note {
	margin-top: 12px;
	font-size: 0.78em;
	color: var(--txc-ink-soft);
	line-height: 1.5;
}

.txc-emw-note strong {
	color: var(--txc-ink);
}

/* ───── Info box variants (subgroup wrappers with inputs inside) ────── */
.txc-info--purple {
	background: var(--txc-purple-bg);
	border-left-color: #9F8ACD;
}

.txc-subgroup-title {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
	margin-bottom: 10px;
}

.txc-sublabel {
	font-size: 0.78em;
	color: var(--txc-ink-soft);
	margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Foreign Property (fp-*)
   ═══════════════════════════════════════════════════════════════════════ */
.txc-fp-hero {
	text-align: center;
	margin-bottom: 16px;
}

.txc-fp-hero__label {
	font-size: 0.82em;
	color: var(--txc-ink-soft);
	margin-bottom: 4px;
}

.txc-fp-hero__value {
	font-size: 2em;
	font-weight: 800;
	color: var(--txc-green-ink);
	line-height: 1.15;
}

.txc-fp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

@media (max-width: 520px) {
	.txc-fp-grid { grid-template-columns: 1fr; }
}

.txc-fp-impact {
	background: #ffffff;
	border: 1px solid #d1dce6;
	border-radius: 8px;
	padding: 14px;
}

.txc-fp-impact__label {
	font-size: 0.72em;
	color: var(--txc-ink-soft);
	text-align: center;
	margin-bottom: 3px;
}

.txc-fp-impact__value {
	font-size: 1.35em;
	font-weight: 700;
	color: var(--txc-ink);
	text-align: center;
}

.txc-fp-note {
	font-size: 0.72em;
	color: #a0aec0;
	text-align: center;
	margin-top: 8px;
}

.txc-fp-ratebar { margin-top: 10px; }

.txc-fp-ratebar__legend {
	display: flex;
	justify-content: space-between;
	font-size: 0.68em;
	color: #a0aec0;
	margin-bottom: 3px;
}

.txc-fp-ratebar__track {
	height: 18px;
	border-radius: 4px;
	background: #e2e8f0;
	position: relative;
	overflow: hidden;
	display: flex;
}

.txc-fp-ratebar__base {
	height: 100%;
	background: #4a90c4;
	border-radius: 4px 0 0 4px;
}

.txc-fp-ratebar__shift {
	height: 100%;
	background: #f6ad55;
	border-radius: 0 4px 4px 0;
}

.txc-fp-ratebar__values {
	display: flex;
	justify-content: space-between;
	font-size: 0.68em;
	margin-top: 2px;
	font-weight: 600;
}

.txc-fp-ratebar__base-label { color: #4a90c4; }
.txc-fp-ratebar__shift-label { color: #dd6b20; }
.txc-fp-ratebar__world-label { color: var(--txc-ink-soft); }

.txc-fp-flatnote {
	margin-top: 8px;
	padding: 6px 8px;
	background: #fefcf3;
	border: 1px solid #f0e6c8;
	border-radius: 4px;
	font-size: 0.68em;
	color: #92600a;
	line-height: 1.4;
}

.txc-fp-breakdown {
	background: #ffffff;
	border: 1px solid #d1dce6;
	border-radius: 7px;
	padding: 12px 16px;
	font-size: 0.78em;
	color: #4a5568;
}

.txc-fp-breakdown__row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.txc-fp-breakdown__row:last-child { margin-bottom: 0; }

.txc-fp-breakdown__row span:last-child { font-weight: 600; }

.txc-fp-breakdown__divider {
	border-top: 1px solid #edf2f7;
	margin: 6px 0;
}

/* ───── Helper hint text under fields ───────────────────────────────── */
.txc-hint {
	font-size: 0.72em;
	color: var(--txc-ink-soft);
	margin-top: 4px;
	line-height: 1.4;
}

/* ───── Custom slider (used by abolition-impact marginal tax rate) ──── */
.txc-slider-field {
	margin-bottom: 18px;
}

.txc-slider {
	display: flex;
	align-items: center;
	gap: 12px;
}

.txc-slider__track {
	flex: 1;
	height: 6px;
	background: #ddd;
	border-radius: 3px;
	position: relative;
	cursor: pointer;
}

.txc-slider__fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--txc-ink);
	border-radius: 3px;
	pointer-events: none;
}

.txc-slider__thumb {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	background: var(--txc-ink);
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: grab;
}

.txc-slider__thumb:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(177, 217, 242, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.txc-slider__label {
	font-size: 0.95em;
	font-weight: 600;
	color: var(--txc-ink);
	min-width: 42px;
	text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Before & After abolition (ba-*)
   ═══════════════════════════════════════════════════════════════════════ */
.txc-ba-emw {
	border-top: 2px solid var(--txc-ink);
	padding-top: 20px;
	margin-bottom: 20px;
}

.txc-ba-emw__label {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--txc-ink);
	margin-bottom: 4px;
}

.txc-ba-emw__line {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.txc-ba-emw__value {
	font-size: 1.6em;
	font-weight: 700;
	color: var(--txc-ink);
}

.txc-ba-emw__suffix {
	font-size: 0.85em;
	color: var(--txc-ink-soft);
}

.txc-ba-emw__note {
	font-size: 0.78em;
	color: #888;
	margin-top: 4px;
	line-height: 1.4;
}

.txc-ba-compare {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 20px;
}

.txc-ba-card {
	flex: 1;
	min-width: 280px;
	background: #ffffff;
	border: 1px solid var(--txc-border);
	overflow: hidden;
}

.txc-ba-card--current {
	border-radius: 10px 0 0 10px;
}

.txc-ba-card--after {
	border-left: none;
	border-radius: 0 10px 10px 0;
}

@media (max-width: 600px) {
	.txc-ba-card--current,
	.txc-ba-card--after {
		border-radius: 10px;
		border-left: 1px solid var(--txc-border);
	}
	.txc-ba-card--after {
		margin-top: -1px;
		border-radius: 10px;
	}
}

.txc-ba-card__header {
	padding: 10px 20px;
}

.txc-ba-card__header--current {
	background: #8B1A1A;
}

.txc-ba-card__header--after {
	background: #1a6b3c;
}

.txc-ba-card__title {
	font-size: 0.78em;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.txc-ba-card__sub {
	font-size: 0.68em;
	color: rgba(255, 255, 255, 0.75);
}

.txc-ba-card__body {
	padding: 18px 20px;
}

.txc-ba-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 0.85em;
}

.txc-ba-row span:first-child {
	color: #555;
}

.txc-ba-row span:last-child {
	font-weight: 600;
}

.txc-ba-row--total {
	border-top: 1px solid #eee;
	margin: 12px 0;
	padding-top: 12px;
	font-size: 0.92em;
	font-weight: 700;
}

.txc-ba-row--total span:first-child {
	color: var(--txc-ink);
}

.txc-ba-cost { color: #c0392b; }
.txc-ba-save { color: #27ae60; }
.txc-ba-zero { color: #999; }

.txc-ba-verdict {
	border-radius: 10px;
	padding: 18px 22px;
	text-align: center;
}

.txc-ba-verdict--win {
	background: linear-gradient(135deg, #e8f8f0 0%, #d4efdf 100%);
	border: 1px solid #82e0aa;
	color: #1a7a42;
}

.txc-ba-verdict--loss {
	background: linear-gradient(135deg, #fef5e7 0%, #fdebd0 100%);
	border: 1px solid #f5cba7;
	color: #b7791f;
}

.txc-ba-verdict--neutral {
	background: #f0f0f0;
	border: 1px solid #ccc;
	color: #555;
}

.txc-ba-verdict__title {
	font-size: 1.08em;
	font-weight: 700;
}

.txc-ba-verdict__sub {
	font-size: 0.88em;
	margin-top: 4px;
}

.txc-ba-verdict__detail {
	font-size: 0.8em;
	color: #555;
	margin-top: 6px;
}

.txc-ba-sensitivity {
	margin-top: 18px;
	padding: 14px 18px;
	background: #f7f9fa;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.txc-ba-sensitivity__title {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
	margin-bottom: 6px;
}

.txc-ba-sensitivity__body {
	font-size: 0.84em;
	color: var(--txc-ink-soft);
	line-height: 1.5;
}

.txc-ba-sensitivity__body strong {
	color: var(--txc-ink);
}

/* ───── Shared helpers used across Pillar 3a calcs ──────────────────── */
.txc-card--gray {
	background: #f7f9fa;
}
.txc-card--gray .txc-card__value {
	color: var(--txc-ink);
}

.txc-input-group {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.txc-input-group .txc-input {
	flex: 1;
}

.txc .txc-button-sec {
	padding: 9px 14px;
	background: var(--txc-info-bg);
	color: var(--txc-ink);
	border: 1px solid var(--txc-info-bar);
	border-radius: 8px;
	font-size: 0.82em;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
}
.txc .txc-button-sec:hover,
.txc .txc-button-sec:focus {
	background: #d8ebf7;
	outline: none;
}

.txc-p3a-submit {
	width: 100%;
	padding: 13px;
	background: var(--txc-ink);
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 18px;
	font-family: inherit;
	letter-spacing: 0.02em;
	transition: background 0.2s ease;
}
.txc-p3a-submit:hover,
.txc-p3a-submit:focus {
	background: #0a4565;
	outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Pillar 3a Gap (p3a-years, p3a-schedule, p3a-detail)
   ═══════════════════════════════════════════════════════════════════════ */
.txc-p3a-years {
	margin-bottom: 18px;
}

.txc-p3a-years__wrap {
	border: 1px solid var(--txc-border);
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
}

.txc-p3a-years__table {
	width: 100%;
	border-collapse: collapse;
}

.txc-p3a-years__th {
	padding: 10px 14px;
	text-align: left;
	font-size: 0.82em;
	font-weight: 600;
	background: var(--txc-ink);
	color: #ffffff;
	letter-spacing: 0.02em;
}
.txc-p3a-years__th--right { text-align: right; }

.txc-p3a-years__row {
	border-bottom: 1px solid #eaeef1;
}
.txc-p3a-years__row--projected {
	background: #faf8fc;
}

.txc-p3a-years__year {
	padding: 9px 14px;
	font-size: 0.9em;
	color: var(--txc-ink);
}
.txc-p3a-years__row--projected .txc-p3a-years__year {
	color: #7b6aab;
	font-weight: 500;
}

.txc-p3a-years__max {
	padding: 9px 14px;
	font-size: 0.9em;
	color: var(--txc-ink-soft);
}

.txc-p3a-years__input {
	padding: 5px 14px;
}

.txc .txc-p3a-years__select {
	padding: 7px 8px;
	border: 1px solid var(--txc-border);
	border-radius: 6px;
	font-size: 0.85em;
	background: #ffffff;
	color: var(--txc-ink);
	min-width: 155px;
	font-family: inherit;
}

.txc .txc-p3a-years__partial {
	margin-top: 4px;
	padding: 6px 8px;
	border: 1px solid var(--txc-border);
	border-radius: 6px;
	font-size: 0.85em;
	width: 130px;
	color: var(--txc-ink);
	font-family: inherit;
	background: #ffffff;
}

.txc-p3a-years__gap {
	padding: 9px 14px;
	font-size: 0.9em;
	text-align: right;
	font-weight: 600;
	color: #74AE9F;
}
.txc-p3a-years__gap--nonzero {
	color: #e07850;
}

.txc-p3a-results {
	background: #ffffff;
	border: 1px solid var(--txc-border);
	border-radius: 10px;
	padding: 22px;
	margin-bottom: 14px;
}

.txc-p3a-results__title {
	color: var(--txc-ink);
	margin: 0 0 18px 0;
	font-size: 1.1em;
}

.txc-p3a-schedule {
	background: #f7f9fa;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 0.85em;
	color: var(--txc-ink);
	margin-bottom: 14px;
}

.txc-p3a-schedule__title {
	margin: 0 0 10px 0;
	font-weight: 600;
	color: var(--txc-ink);
}
.txc-p3a-schedule__hint {
	font-weight: 400;
	color: var(--txc-ink-soft);
}
.txc-p3a-schedule__ok {
	margin: 0;
	color: #74AE9F;
	font-weight: 500;
}
.txc-p3a-schedule__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}
.txc-p3a-schedule__table th,
.txc-p3a-schedule__table td {
	padding: 6px 0;
}
.txc-p3a-schedule__table thead tr {
	border-bottom: 2px solid #eaeef1;
}
.txc-p3a-schedule__table th {
	font-weight: 600;
	color: var(--txc-ink-soft);
	text-align: left;
}
.txc-p3a-schedule__table tbody tr {
	border-bottom: 1px solid #eaeef1;
}
.txc-p3a-schedule__table td { color: var(--txc-ink); }
.txc-p3a-schedule__right { text-align: right; }
.txc-p3a-schedule__buyin { color: #9F8ACD; font-weight: 500; }
.txc-p3a-schedule__save  { text-align: right; color: #4a8f7f; font-weight: 600; }
.txc-p3a-schedule__total { text-align: right; color: #4a8f7f; font-weight: 700; font-size: 1.05em; }
.txc-p3a-schedule__table tfoot tr {
	border-top: 2px solid var(--txc-ink);
}
.txc-p3a-schedule__table tfoot td {
	padding-top: 8px;
	font-weight: 700;
	color: var(--txc-ink);
}

.txc-p3a-detail {
	font-size: 0.85em;
	color: var(--txc-ink);
}
.txc-p3a-detail__title {
	margin: 0 0 8px 0;
	font-weight: 600;
	color: var(--txc-ink);
}
.txc-p3a-detail__line {
	margin: 0 0 4px 0;
	color: var(--txc-ink-soft);
}
.txc-p3a-detail__line strong { color: var(--txc-ink); }
.txc-p3a-detail__subtitle {
	margin: 12px 0 6px 0;
	font-weight: 600;
	color: var(--txc-ink);
}
.txc-p3a-detail__item {
	margin: 0 0 3px 0;
	padding-left: 12px;
	color: var(--txc-ink-soft);
}
.txc-p3a-detail__amount { color: #e07850; }
.txc-p3a-detail__projected { color: #9F8ACD; }

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Pillar 3a Tax Savings — hero + split + canton bars
   ═══════════════════════════════════════════════════════════════════════ */
.txc-p3a-hero {
	background: linear-gradient(135deg, #032A41 0%, #0a4565 100%);
	border-radius: 12px;
	padding: 28px 24px;
	text-align: center;
	margin-bottom: 14px;
}
.txc-p3a-hero__label {
	margin: 0 0 6px 0;
	font-size: 0.85em;
	color: #B1D9F2;
}
.txc-p3a-hero__value {
	margin: 0 0 4px 0;
	font-size: 2.4em;
	font-weight: 700;
	color: #ffffff;
}
.txc-p3a-hero__sub {
	margin: 0;
	font-size: 0.85em;
	color: #74AE9F;
}

.txc-p3a-split {
	background: #f7f9fa;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.txc-p3a-split__title {
	margin: 0 0 10px 0;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
}
.txc-p3a-split__bar {
	display: flex;
	height: 32px;
	border-radius: 6px;
	overflow: hidden;
}
.txc-p3a-split__seg {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75em;
	font-weight: 600;
	color: #ffffff;
	transition: width 0.4s ease;
	min-width: 0;
}
.txc-p3a-split__seg--save { background: #74AE9F; }
.txc-p3a-split__seg--cost { background: #B1D9F2; color: var(--txc-ink); }
.txc-p3a-split__seg--warn { background: #FE9E78; }

.txc-p3a-split__legend {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.75em;
	color: var(--txc-ink-soft);
}
.txc-p3a-split__swatch {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	margin-right: 4px;
	vertical-align: middle;
}
.txc-p3a-split__swatch--save { background: #74AE9F; }
.txc-p3a-split__swatch--cost { background: #B1D9F2; }
.txc-p3a-split__swatch--warn { background: #FE9E78; }

.txc-p3a-compare {
	background: #f7f9fa;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.txc-p3a-compare__title {
	margin: 0 0 10px 0;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
}
.txc-p3a-compare__row {
	display: flex;
	align-items: center;
	margin-bottom: 3px;
}
.txc-p3a-compare__code {
	width: 28px;
	font-size: 0.75em;
	font-weight: 400;
	color: var(--txc-ink-soft);
}
.txc-p3a-compare__row--active .txc-p3a-compare__code {
	font-weight: 700;
	color: var(--txc-ink);
}
.txc-p3a-compare__track {
	flex: 1;
	height: 14px;
	background: #eaeef1;
	border-radius: 4px;
	overflow: hidden;
	margin: 0 8px;
}
.txc-p3a-compare__row--active .txc-p3a-compare__track { height: 18px; }
.txc-p3a-compare__bar {
	height: 100%;
	width: 0;
	background: #B1D9F2;
	border-radius: 4px;
	transition: width 0.3s ease;
}
.txc-p3a-compare__row--active .txc-p3a-compare__bar {
	background: #74AE9F;
}
.txc-p3a-compare__row--active .txc-p3a-compare__bar--warn {
	background: #FE9E78;
}
.txc-p3a-compare__value {
	width: 72px;
	text-align: right;
	font-size: 0.75em;
	font-weight: 400;
	color: var(--txc-ink-soft);
}
.txc-p3a-compare__row--active .txc-p3a-compare__value {
	font-weight: 700;
	color: #4a8f7f;
}

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Pillar 3a Growth Comparison
   ═══════════════════════════════════════════════════════════════════════ */
.txc-toggle-group {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.txc .txc-toggle-btn {
	padding: 7px 13px;
	border: none;
	border-radius: 8px;
	font-size: 0.84em;
	font-weight: 600;
	cursor: pointer;
	background: #eaeef1;
	color: var(--txc-ink-soft);
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease;
}
.txc .txc-toggle-btn--active {
	background: var(--txc-ink);
	color: #ffffff;
}

.txc-p3g-chart {
	margin-bottom: 6px;
	overflow: hidden;
}
.txc-p3g-plot {
	display: flex;
	align-items: stretch;
}
.txc-p3g-yaxis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-right: 8px;
}
.txc-p3g-yaxis span {
	font-size: 0.68em;
	color: #8a9aa5;
	line-height: 1;
	white-space: nowrap;
}
.txc-p3g-bars {
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0;
	border-left: 1px solid var(--txc-border);
	border-bottom: 1px solid var(--txc-border);
	padding: 0 8px;
}
.txc-p3g-bar {
	flex: 1;
	max-width: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 8px;
}
.txc-p3g-bar__total {
	font-size: 0.78em;
	font-weight: 700;
	margin-bottom: 4px;
	white-space: nowrap;
}
.txc-p3g-bar__stack {
	width: 100%;
	max-width: 72px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.txc-p3g-bar__label {
	font-size: 0.72em;
	color: var(--txc-ink-soft);
	text-align: center;
	margin-top: 8px;
	line-height: 1.25;
	font-weight: 600;
}
.txc-p3g-bar__sub {
	font-size: 0.65em;
	color: #8a9aa5;
	text-align: center;
	line-height: 1.2;
}
.txc-p3g-legend {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.txc-p3g-legend span {
	font-size: 0.7em;
	color: var(--txc-ink-soft);
	display: flex;
	align-items: center;
	gap: 4px;
}
.txc-p3g-legend__swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 2px;
}

.txc-p3g-advantage {
	background: linear-gradient(135deg, #032A41 0%, #0a4565 100%);
	border-radius: 12px;
	padding: 20px 24px;
	text-align: center;
	margin-top: 16px;
	margin-bottom: 18px;
}
.txc-p3g-advantage__label {
	margin: 0 0 4px 0;
	font-size: 0.82em;
	color: #B1D9F2;
}
.txc-p3g-advantage__value {
	margin: 0 0 4px 0;
	font-size: 2em;
	font-weight: 700;
	color: #FE9E78;
}
.txc-p3g-advantage__detail {
	margin: 0 0 2px 0;
	font-size: 0.8em;
	color: #B1D9F2;
}
.txc-p3g-advantage__sub {
	margin: 0;
	font-size: 0.75em;
	color: #8eaabb;
}

.txc-p3g-cards {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.txc-p3g-card {
	flex: 1;
	min-width: 190px;
	border-radius: 10px;
	padding: 16px;
}
.txc-p3g-card--sec   { background: #f7f9fa; border-left: 4px solid #9F8ACD; }
.txc-p3g-card--bank  { background: #eef5fa; border-left: 4px solid #5A8DB5; }
.txc-p3g-card--3asec { background: #e9f4f0; border-left: 4px solid #032A41; }
.txc-p3g-card p {
	margin: 0 0 3px 0;
	font-size: 0.8em;
	color: var(--txc-ink-soft);
}
.txc-p3g-card p strong { color: var(--txc-ink); }
.txc-p3g-card__title {
	margin: 0 0 8px 0 !important;
	font-size: 0.9em !important;
	font-weight: 700;
	color: var(--txc-ink) !important;
}
.txc-p3g-card__total {
	margin: 0 0 3px 0 !important;
	font-size: 0.85em !important;
	font-weight: 700;
	color: var(--txc-ink) !important;
	border-top: 1px solid #dde2e5;
	padding-top: 6px;
}
.txc-p3g-card__note {
	margin: 0 !important;
	font-size: 0.75em !important;
	color: #8a9aa5 !important;
}
.txc-p3g-card__cost { color: #c0392b !important; }
.txc-p3g-card__save { color: #4a8f7f !important; }

.txc-p3g-assumptions {
	margin-bottom: 14px;
}
.txc .txc-p3g-assumptions__btn {
	background: none;
	border: none;
	font-size: 0.8em;
	color: var(--txc-ink-soft);
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	font-family: inherit;
}
.txc-p3g-assumptions__body {
	margin-top: 8px;
	background: #f7f9fa;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 0.78em;
	color: var(--txc-ink-soft);
	line-height: 1.7;
}
.txc-p3g-assumptions__body strong { color: var(--txc-ink); }

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Pension Capital Withdrawal Tax
   ═══════════════════════════════════════════════════════════════════════ */
.txc-pw-hero {
	background: linear-gradient(135deg, #032A41 0%, #0a4565 100%);
	border-radius: 12px;
	padding: 28px 24px;
	text-align: center;
	margin-bottom: 14px;
}
.txc-pw-hero__label {
	margin: 0 0 6px 0;
	font-size: 0.85em;
	color: #B1D9F2;
}
.txc-pw-hero__value {
	margin: 0 0 4px 0;
	font-size: 2.4em;
	font-weight: 700;
	color: #ffffff;
}
.txc-pw-hero__sub {
	margin: 0;
	font-size: 0.85em;
	color: #FE9E78;
}

.txc-pw-breakdown {
	background: #f7f9fa;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.txc-pw-breakdown__title {
	margin: 0 0 12px 0;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
}
.txc-pw-breakdown__row {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}
.txc-pw-breakdown__label {
	width: 110px;
	font-size: 0.8em;
	color: var(--txc-ink-soft);
}
.txc-pw-breakdown__track {
	flex: 1;
	height: 20px;
	background: #eaeef1;
	border-radius: 4px;
	overflow: hidden;
	margin: 0 10px;
}
.txc-pw-breakdown__bar {
	height: 100%;
	border-radius: 4px;
}
.txc-pw-breakdown__val {
	width: 80px;
	text-align: right;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--txc-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Swiss Tax Burden by Canton (tb-*)
   ═══════════════════════════════════════════════════════════════════════ */
.txc-tb-tabs {
	display: flex;
	margin-bottom: 16px;
	background: #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
}
.txc .txc-tb-tab {
	flex: 1;
	padding: 10px 16px;
	border: none;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	background: transparent;
	color: #555;
	transition: background 0.2s ease, color 0.2s ease;
	font-family: inherit;
}
.txc .txc-tb-tab--active {
	background: var(--txc-ink);
	color: #ffffff;
}

.txc-tb-subtitle {
	color: var(--txc-ink-soft);
	margin: 0 0 22px 0;
	font-size: 0.9em;
}

.txc-tb-summary {
	margin-bottom: 14px;
	font-size: 0.88em;
	color: #555;
}
.txc-tb-summary strong { color: var(--txc-ink); }
.txc-tb-summary__low  { color: #1a7f37 !important; }
.txc-tb-summary__high { color: #c33 !important; }

.txc-tb-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.txc-tb-row {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 26px;
}
.txc-tb-row--low,
.txc-tb-row--high { font-weight: 700; }

.txc-tb-row__code {
	width: 44px;
	flex-shrink: 0;
	font-size: 0.82em;
	color: #555;
	text-align: right;
	padding-right: 8px;
}
.txc-tb-row__track {
	flex: 1;
	position: relative;
	height: 22px;
	background: #f0f1f3;
	border-radius: 4px;
	overflow: hidden;
}
.txc-tb-row__bar {
	height: 100%;
	background: var(--txc-ink);
	border-radius: 4px;
	transition: width 0.4s ease;
}
.txc-tb-row--low .txc-tb-row__bar  { background: #1a7f37; }
.txc-tb-row--high .txc-tb-row__bar { background: #c33; }

.txc-tb-row__value {
	width: 130px;
	flex-shrink: 0;
	font-size: 0.82em;
	text-align: right;
	padding-left: 8px;
	color: #333;
}
.txc-tb-row__amt {
	color: #888;
	font-size: 0.88em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Calculator-specific: Individual Taxation Comparison (it-*)
   ═══════════════════════════════════════════════════════════════════════ */
.txc-it-intro {
	color: #1f2937;
	font-size: 0.95em;
	margin: 12px 0 20px 0;
}

.txc-it-bars {
	margin-bottom: 18px;
}

.txc-it-row {
	margin-bottom: 24px;
}
.txc-it-row--last { margin-bottom: 0; }

.txc-it-row__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.txc-it-row__label {
	font-size: 0.9em;
	font-weight: 500;
	color: #1f2937;
}
.txc-it-row__diff {
	font-size: 0.9em;
	font-weight: 600;
}
.txc-it-row__diff--win { color: #15803d; }
.txc-it-row__diff--loss { color: #b91c1c; }

.txc-it-row__bar {
	position: relative;
	height: 20px;
	background: #f3f4f6;
	border-radius: 4px;
	margin-bottom: 4px;
	overflow: visible;
}
.txc-it-row__bar:last-of-type { margin-bottom: 0; }
.txc-it-row__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
}
.txc-it-row__fill--before { background: #94a3b8; }
.txc-it-row__fill--after  { background: var(--txc-ink); }

.txc-it-row__foot {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 0.78em;
	color: #9ca3af;
}

.txc-it-legend {
	display: flex;
	gap: 20px;
	margin-top: 4px;
	margin-bottom: 10px;
	font-size: 0.82em;
	color: #6b7280;
}
.txc-it-legend span {
	display: flex;
	align-items: center;
	gap: 6px;
}
.txc-it-legend__swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
}
.txc-it-legend__swatch--before { background: #94a3b8; }
.txc-it-legend__swatch--after  { background: var(--txc-ink); }

.txc-it-source {
	font-size: 0.78em;
	color: #6b7280;
	padding-top: 12px;
	border-top: 1px solid #e5e7eb;
}

/* ───── Chart area (bars, lines — each calc fills this with SVG/HTML) ─ */
.txc-chart {
	margin-bottom: 18px;
}

.txc-chart__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 0.85em;
}

.txc-chart__label {
	flex: 0 0 130px;
	color: var(--txc-ink);
	font-weight: 500;
}

.txc-chart__bar-wrap {
	flex: 1;
	background: #f0f4f7;
	border-radius: 4px;
	height: 18px;
	position: relative;
	overflow: hidden;
}

.txc-chart__bar {
	height: 100%;
	background: linear-gradient(90deg, #B1D9F2, #032A41);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.txc-chart__value {
	flex: 0 0 auto;
	color: var(--txc-ink);
	font-weight: 600;
	min-width: 80px;
	text-align: right;
}

/* ───── CTA block (below results) ───────────────────────────────────── */
.txc-cta {
	margin-top: 22px;
	padding: 18px 20px;
	background: linear-gradient(135deg, #032A41 0%, #0a4d6e 100%);
	border-radius: 10px;
	text-align: center;
	color: #ffffff;
}

.txc-cta__text {
	margin: 0 0 12px 0;
	font-size: 0.95em;
	color: #ffffff;
	opacity: 0.95;
}

.txc-cta__button {
	display: inline-block;
	padding: 10px 22px;
	background: #FFCA86;
	color: #032A41;
	font-weight: 600;
	font-size: 0.9em;
	border-radius: 8px;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease;
}

.txc-cta__button:hover,
.txc-cta__button:focus {
	background: #ffb861;
	transform: translateY(-1px);
	color: #032A41;
	text-decoration: none;
}

/* ───── Wizard / step-based calculators ─────────────────────────────── */
.txc-wizard-step {
	margin-bottom: 16px;
}

.txc-wizard-question {
	font-size: 1.05em;
	font-weight: 600;
	color: var(--txc-ink);
	margin-bottom: 12px;
}

.txc-wizard-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.txc-wizard-option {
	padding: 12px 14px;
	background: #f7f9fa;
	border: 1px solid var(--txc-border);
	border-radius: 8px;
	cursor: pointer;
	color: var(--txc-ink);
	text-align: left;
	font-size: 0.95em;
	font-family: inherit;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.txc-wizard-option:hover,
.txc-wizard-option:focus {
	background: var(--txc-info-bg);
	border-color: var(--txc-info-bar);
	outline: none;
}

.txc-wizard-progress {
	display: flex;
	gap: 4px;
	margin-bottom: 18px;
}

.txc-wizard-progress__dot {
	flex: 1;
	height: 4px;
	background: #e5ebf0;
	border-radius: 2px;
}

.txc-wizard-progress__dot--active {
	background: var(--txc-ink);
}

/* ───── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.txc {
		padding: 20px;
		margin: 16px auto;
		border-radius: 10px;
	}
	.txc-row {
		gap: 10px;
	}
	.txc-field {
		min-width: 100%;
	}
	.txc-summary {
		gap: 10px;
	}
	.txc-card {
		min-width: 100%;
	}
	.txc-chart__label {
		flex: 0 0 100px;
		font-size: 0.8em;
	}
	.txc-chart__value {
		min-width: 60px;
		font-size: 0.85em;
	}
}

/* ───── Admin-only error notice ─────────────────────────────────────── */
.txc-error {
	margin: 16px 0;
	padding: 12px 16px;
	background: #fff4f4;
	border: 1px solid #f5c2c7;
	border-radius: 6px;
	color: #842029;
	font-size: 0.9em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Landing page: /tax-calculators/ card grid (rendered by
   [taxolution_tools_index] shortcode)
   ═══════════════════════════════════════════════════════════════════════ */

.txc-index {
	max-width: 1160px;
	margin: 0 auto;
	padding: 20px;
}

.txc-index__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px 0;
	padding: 4px 0 8px;
}

.txc-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid #d0d8dd;
	border-radius: 999px;
	background: #ffffff;
	color: #032A41;
	font-size: 0.88em;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.txc-filter-pill:hover,
.txc-filter-pill:focus-visible {
	background: #edf6fc;
	border-color: #B1D9F2;
	outline: none;
}

.txc-filter-pill--active {
	background: #032A41;
	border-color: #032A41;
	color: #ffffff;
}

.txc-filter-pill--active:hover,
.txc-filter-pill--active:focus-visible {
	background: #0a4565;
	border-color: #0a4565;
	color: #ffffff;
}

.txc-filter-pill__count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	background: rgba(3, 42, 65, 0.1);
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.txc-filter-pill--active .txc-filter-pill__count {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

.txc-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

/* Hide cards filtered out by the active pill. */
.txc-index__grid[data-txc-filter-active]:not([data-txc-filter-active="all"]) .txc-card-tool {
	display: none;
}
.txc-index__grid[data-txc-filter-active="income"] .txc-card-tool[data-txc-category="income"],
.txc-index__grid[data-txc-filter-active="wealth"] .txc-card-tool[data-txc-category="wealth"],
.txc-index__grid[data-txc-filter-active="property"] .txc-card-tool[data-txc-category="property"],
.txc-index__grid[data-txc-filter-active="retirement"] .txc-card-tool[data-txc-category="retirement"],
.txc-index__grid[data-txc-filter-active="withholding"] .txc-card-tool[data-txc-category="withholding"],
.txc-index__grid[data-txc-filter-active="family"] .txc-card-tool[data-txc-category="family"],
.txc-index__grid[data-txc-filter-active="other"] .txc-card-tool[data-txc-category="other"] {
	display: flex;
}

.txc-card-tool {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(3, 42, 65, 0.06);
	border: 1px solid #edf2f5;
	text-decoration: none;
	color: #032A41;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

.txc-card-tool__badge {
	align-self: flex-start;
	margin-bottom: 6px;
	padding: 2px 10px;
	background: #edf6fc;
	color: #032A41;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 999px;
	line-height: 1.4;
}

.txc-card-tool:hover,
.txc-card-tool:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(3, 42, 65, 0.1);
	text-decoration: none;
	color: var(--txc-ink);
}

.txc-card-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	padding: 9px;
	border-radius: 10px;
	background: #edf6fc;
	color: #032A41;
	transition: background 0.2s ease;
}

.txc-card-tool__icon svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.75;
	stroke: #032A41;
	color: #032A41;
}

.txc-card-tool:hover .txc-card-tool__icon,
.txc-card-tool:focus .txc-card-tool__icon {
	background: #d5e8f6;
}

.txc-card-tool__title {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px 0;
	color: #032A41;
}

.txc-card-tool__description {
	flex: 1;
	font-size: 0.85em;
	color: #5a6d7a;
	margin: 0;
	line-height: 1.45;
}

/* ───── Hero layout (bypasses theme's narrow .hero-container-inner) ─ */
.txc-hero {
	position: relative;
	min-height: 320px;
	padding: 16px 0 16px 0;
	width: 100%;
}

.txc-hero__text {
	max-width: 460px;
	padding: 24px 0 32px 0;
	position: relative;
	z-index: 2;
}

.txc-hero__text h1 {
	margin: 0 0 14px 0;
	font-size: clamp(2em, 3.4vw, 2.6em);
	line-height: 1.08;
	color: #032A41;
	letter-spacing: -0.01em;
}

.txc-hero__text p {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.55;
	color: #3a5267;
	max-width: 460px;
}

.txc-hero__aside {
	position: absolute;
	top: 32px;
	left: 56%;
	/* right edge sits flush with the viewport right edge:
	   right is negative by half the difference between container and viewport */
	right: calc((100% - 100vw) / 2);
	bottom: -20px; /* minimal bleed — mostly inside the hero */
	display: flex;
	align-items: flex-start;
}

.txc-hero__aside .txc-browser {
	width: 100%;
	max-width: none;
	/* right edge is flush with viewport, so square off the right corners
	   and drop the right-side border/shadow to look like a cut-off window */
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
	box-shadow:
		-2px 0 2px rgba(3, 42, 65, 0.03),
		-12px 20px 30px rgba(3, 42, 65, 0.10),
		-24px 36px 60px rgba(3, 42, 65, 0.07);
}

/* Allow the hero section's container to show the overflowing image */
.hero-container.bg-blue-gradient { overflow: hidden; } /* clip at viewport edge */
.hero-container.bg-blue-gradient .container { overflow: visible; }

/* Narrow desktop: tighten column split so H1 + frame don't overlap. */
@media (max-width: 1200px) {
	.txc-hero__text { max-width: 400px; }
	.txc-hero__aside { left: 54%; }
}

@media (max-width: 1000px) {
	.txc-hero { min-height: 290px; }
	.txc-hero__text { max-width: 340px; }
	.txc-hero__aside { left: 58%; top: 50px; }
}

/* Stack on mobile. */
@media (max-width: 820px) {
	.txc-hero {
		padding: 24px 0 0 0;
		min-height: 0;
	}
	.txc-hero__text {
		padding: 0;
		max-width: none;
	}
	.txc-hero__text h1 { font-size: 1.9em; }
	.txc-hero__text p { font-size: 1em; max-width: none; }
	.txc-hero__aside {
		position: relative;
		top: auto;
		left: auto;
		right: -16px;
		bottom: auto;
		margin-top: 24px;
		margin-bottom: -32px;
	}
	.txc-hero__aside .txc-browser {
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		border-right: 1px solid #d8e3ea;
	}
}

/* ───── Browser-frame screenshot wrapper ──────────────────────────── */
.txc-browser {
	background: #ffffff;
	border: 1px solid #d8e3ea;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(3, 42, 65, 0.04),
		0 12px 30px rgba(3, 42, 65, 0.12),
		0 30px 60px rgba(3, 42, 65, 0.08);
}

.txc-browser__bar {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 16px;
	background: linear-gradient(to bottom, #f4f6f8, #e9edf1);
	border-bottom: 1px solid #dde4ea;
}

.txc-browser__dots {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.txc-browser__dots span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: block;
}

.txc-browser__dots span:nth-child(1) { background: #ff5f57; }
.txc-browser__dots span:nth-child(2) { background: #febc2e; }
.txc-browser__dots span:nth-child(3) { background: #28c840; }

.txc-browser__sidebar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 16px;
	color: #8795a1;
	flex-shrink: 0;
}

.txc-browser__sidebar-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.txc-browser__body {
	display: block;
	background: #ffffff;
}

.txc-browser__body img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* ───── Portal strip (between grid and reviews) ───────────────────── */
.txc-portal-strip {
	padding: 40px 0;
}

.txc-portal-strip__inner {
	background: linear-gradient(135deg, #032A41 0%, #0a4565 100%);
	border-radius: 16px;
	padding: 40px 48px;
	color: #ffffff;
	text-align: center;
	max-width: 920px;
	margin: 0 auto;
	box-shadow: 0 12px 40px rgba(3, 42, 65, 0.18);
	position: relative;
	overflow: hidden;
}

.txc-portal-strip__inner::before {
	content: "";
	position: absolute;
	top: -80px;
	right: -80px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, rgba(177, 217, 242, 0.22) 0%, transparent 70%);
	pointer-events: none;
}

.txc-portal-strip__tag {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #ffffff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
}

.txc-portal-strip__title {
	font-size: 1.6em;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 14px 0;
	line-height: 1.25;
}

.txc-portal-strip__text {
	font-size: 1em;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 22px 0;
	line-height: 1.55;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.txc-portal-strip__text strong { color: #ffffff; }

.txc-portal-strip__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 24px;
	background: #ffffff;
	color: #032A41;
	font-weight: 600;
	font-size: 0.95em;
	text-decoration: none;
	border-radius: 0.375rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.txc-portal-strip__cta:hover,
.txc-portal-strip__cta:focus {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	color: #032A41;
	text-decoration: none;
}

.txc-portal-strip__cta span {
	transition: transform 0.15s ease;
}

.txc-portal-strip__cta:hover span { transform: translateX(3px); }

@media (max-width: 600px) {
	.txc-portal-strip { padding: 24px 0; }
	.txc-portal-strip__inner { padding: 28px 22px; }
	.txc-portal-strip__title { font-size: 1.3em; }
}

/* ───── Hero callout card (MyTaxolution portal mention) ───────────── */
.txc-hero-callout {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(6px);
	border: 1px solid #B1D9F2;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 4px 18px rgba(3, 42, 65, 0.08);
	max-width: 420px;
}

.txc-hero-callout__tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 10px;
	background: #032A41;
	color: #ffffff;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
}

.txc-hero-callout__title {
	font-size: 1.15em;
	font-weight: 700;
	color: #032A41;
	margin: 0 0 8px 0;
	line-height: 1.35;
}

.txc-hero-callout__text {
	font-size: 0.9em;
	color: #5a6d7a;
	margin: 0 0 14px 0;
	line-height: 1.5;
}

.txc-hero-callout__text strong { color: #032A41; }

.txc-hero-callout__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.9em;
	font-weight: 600;
	color: #032A41;
	text-decoration: none;
	transition: color 0.15s ease;
}

.txc-hero-callout__link:hover,
.txc-hero-callout__link:focus {
	color: #0a4565;
	text-decoration: underline;
}

.txc-hero-callout__link::after {
	content: " →";
	transition: transform 0.15s ease;
}

.txc-hero-callout__link:hover::after { transform: translateX(3px); }

/* ───── Landing: stage (active calculator view) ─────────────────────── */
.txc-index__stage {
	max-width: 760px;
	margin: 0 auto;
}

.txc-index__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px 0;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--txc-border, #d0d8dd);
	border-radius: 8px;
	font-size: 0.9em;
	font-family: inherit;
	font-weight: 500;
	color: #032A41;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.txc-index__back:hover,
.txc-index__back:focus {
	background: #edf6fc;
	border-color: #B1D9F2;
	outline: none;
}

.txc-index__slot {
	animation: txc-fade-in 0.25s ease;
}

@keyframes txc-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.txc-index__slot { animation: none; }
}

/* ───── Deduction Impact Estimator ─────────────────────────────────── */
.txc-di-toggles {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.txc .txc-di-toggle {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #ffffff;
	border: 1px solid var(--txc-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	font-size: 0.88em;
}

.txc .txc-di-toggle:hover {
	border-color: var(--txc-info-bar);
	background: var(--txc-info-bg);
}

.txc .txc-di-toggle input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--txc-ink);
}

.txc-di-toggle__name {
	font-weight: 600;
	color: var(--txc-ink);
}

.txc-di-toggle__amount {
	font-weight: 700;
	color: var(--txc-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txc .txc-di-toggle input[type="checkbox"]:checked ~ .txc-di-toggle__name,
.txc .txc-di-toggle:has(input[type="checkbox"]:checked) {
	/* Active toggles keep default styling; hover highlight is enough visual. */
}

/* ───── Deduction Impact Estimator — v2 ────────────────────────────── */
.txc-di-toggle__name {
	font-size: 0.95em;
}

.txc-di-toggle__note {
	display: block;
	font-size: 0.78em;
	font-weight: 400;
	color: var(--txc-ink-soft);
	line-height: 1.45;
	margin-top: 3px;
	font-style: italic;
}

.txc .txc-di-toggle {
	align-items: start;
	padding: 12px 14px;
}

.txc .txc-di-toggle input[type="checkbox"] {
	margin-top: 2px;
}

.txc-di-toggle__amount {
	font-size: 0.88em;
	align-self: center;
}

.txc-di-footnote {
	font-size: 0.72em;
	font-style: italic;
	color: var(--txc-ink-soft);
	line-height: 1.5;
	margin-top: 12px;
	margin-bottom: 0;
}