/* Free tools. Loaded by tools/templates/_styles.tpl on top of the webflow chrome,
   and scoped to .tools-page / .tool-* so it cannot touch another page. */

/* body text is Manrope, as on the help center: the layout's own body font is the serif */
.tools-page,
.tools-hub-list {
	font-family: var(--body--font-body);
}
.tools-page--top {
	padding-top: 96px;
}
.tool-field input,
.tool-field select {
	font-family: inherit;
}

/* The page header is a help center article's: the green rule, the tags on the left and the
   print and "Ask AI" tools on the right, then the title. Copied from css/helpcenter.css, whose
   resets are global, and scoped here. */
.tools-article-head {
	border-top: 1px solid #CAE795;
	padding-top: 16px;
}
.tools-article-head h1 {
	margin: 0;
	font-family: var(--body--font-title);
}
.tools-page .blog__article-tags-wrap.p-small {
	margin-bottom: 1.5rem;
}
.tools-page .article-tools {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tools-page .article-tools__date {
	margin-right: 4px;
	white-space: nowrap;
}
.tools-page .article-tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border: 1px solid var(--colors--main--brand-primary);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.tools-page .article-tool:hover {
	background: var(--colors--main--brand-light);
}
.tools-page .article-icon {
	flex: none;
	display: block;
}
.tools-page .article-ai__caret {
	width: 10px;
	height: 10px;
	opacity: .7;
}
.tools-page .article-ai {
	position: relative;
}
.tools-page .article-ai__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 10;
	min-width: 240px;
	padding: 6px;
	border: 1px solid var(--colors--main--brand-primary);
	border-radius: 10px;
	background: var(--colors--main--background);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.tools-page .article-ai__item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--content--p-small-size);
	font-weight: 500;
	line-height: var(--content--p-small-height);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.tools-page .article-ai__item:hover,
.tools-page .article-ai__item:focus-visible {
	background: var(--colors--main--brand-light);
}
.tools-page .article-ai__sep {
	margin: 6px 4px;
	height: 1px;
	background: var(--colors--main--brand-primary);
	opacity: .35;
}

/* the FAQ is the agents page's: the accordion opens with a hidden checkbox, the rules the
   page carries inline (the base ones are in the webflow sheet) */
.section__faq .faq__list-item:has(.faq__list-checkbox:checked) .faq__list-content {
	grid-template-rows: 1fr;
}
.section__faq .faq__list-item:has(.faq__list-checkbox:checked) .fa-icon {
	transform: rotate(45deg);
}
.section__faq .faq__list-item:has(.faq__list-checkbox:checked) .faq__list-toggle {
	padding-bottom: 0.75rem;
}

/* The breadcrumb sits in the header row, where a help center article has its tags. It takes the
   row's type (14 px, bold); the separators are grey. */
.tools-page .breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tools-page .breadcrumb-item a {
	color: inherit;
	text-decoration: none;
}
.tools-page .breadcrumb-item a:hover,
.tools-page .breadcrumb-item a:focus-visible {
	text-decoration: underline;
}
.tools-page .breadcrumb-separator {
	color: #71717A;
	font-weight: 400;
}
.tools-page .tools-lead {
	margin: .75rem 0 2rem;
	max-width: 52rem;
}
/* Keep the short introduction readable independently of the form's half-width. */
.tools-page .tools-lead {
	max-width: 72ch;
}
.tools-lead p {
	margin: 0;
}

/* The widget is a grid: the form card on the left, the result on the right, the signup card
   under the form where the result column is taller. On a phone they stack in that order. */
.tool-widget {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: 'form result' 'cta result';
	grid-template-rows: auto 1fr;
	gap: 32px;
	align-items: start;
}
.tool-widget > .tool-form {
	grid-area: form;
}
.tool-widget > .tool-result-col {
	grid-area: result;
}
.tool-widget > .tool-cta {
	grid-area: cta;
}
.tool-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--border-radius--br-10, 10px);
	padding: 24px 28px;
}
.tool-card__title {
	margin: 0 0 1.25rem;
	font-family: var(--body--font-title);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--colors--main--text-primary);
}
.tool-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.tool-fields__full {
	grid-column: 1 / -1;
	margin: 0;
}
.tool-field {
	display: flex;
	flex-direction: column;
	gap: .375rem;
}
.tool-field label {
	font-weight: 700;
}
.tool-optional,
.tool-hint {
	font-weight: 400;
	font-size: .8125rem;
	opacity: .7;
}
.tool-input {
	position: relative;
	display: flex;
}
/* a fixed 16 px, not 1rem: the root size shrinks on a narrow screen, and iOS
   zooms the page on focus into anything under 16 px */
.tool-field input:where(:not([type="checkbox"], [type="radio"])),
.tool-field select {
	width: 100%;
	min-height: 2.75rem;
	padding: .5rem .75rem;
	font-size: 16px;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
}
.tool-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23232f21' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	background-size: 16px 16px;
}
.tool-input input {
	padding-right: 2.25rem;
}
/* a form with several blocks: each has a small title above its fields */
.tool-group + .tool-group {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, .08);
}
.tool-group__title {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--colors--main--text-primary);
}
/* a switch: a checkbox with its label on the same line */
.tool-check {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 0 0 1.25rem;
	font-weight: 700;
	cursor: pointer;
}
.tool-check input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--colors--main--text-primary);
}
.tool-widget [hidden] {
	display: none !important;
}
.tool-unit {
	position: absolute;
	right: .75rem;
	top: 50%;
	transform: translateY(-50%);
	opacity: .6;
	pointer-events: none;
}
.tool-actions {
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.tool-btn {
	min-height: max(44px, 2.5rem);
	padding: .5rem 1.1rem;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	cursor: pointer;
}
.tool-actions > .tool-btn {
	align-self: stretch;
}
@media screen and (max-width: 767px) {
	.tool-actions {
		gap: 12px;
	}
	.tool-actions > .tool-hint {
		flex-basis: 100%;
	}
}
.tool-btn:hover {
	background: var(--colors--main--brand-light);
}

/* the result column: what to show depends on the widget's state (empty, error or ok), and the
   example's tag and clear button only while the page still shows the example */
.tool-result-col {
	display: grid;
	gap: 16px;
}
.tool-widget:not([data-state="ok"]) .tool-ok,
.tool-widget:not([data-state="empty"]) .tool-placeholder,
.tool-widget:not([data-example]) [data-example-only],
.tool-widget[data-example] [data-edited-only] {
	display: none;
}
.tool-tag {
	justify-self: start;
	padding: 5px 12px;
	border: 1px solid #CAE795;
	border-radius: 999px;
	background: #F3F6F0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tool-placeholder {
	padding: 28px 32px;
	border: 1px dashed rgba(0, 0, 0, .25);
	border-radius: var(--border-radius--br-10, 10px);
	color: rgba(22, 31, 24, .7);
}
.tool-placeholder p,
.tool-message {
	margin: 0;
}
.tool-message {
	padding: .75rem 1rem;
	border-radius: 6px;
	background: #fdecea;
	color: #7a1c14;
}
/* a note on a result that is still shown, not an error that replaces it */
.tool-message--note {
	background: #fff6e0;
	color: #5c4300;
}
.tool-ok {
	display: grid;
	gap: 16px;
}
/* green, the home page's cards: the signup card beside the result is the purple one */
.tool-main {
	padding: 28px 32px;
	border-radius: var(--border-radius--br-10, 10px);
	background: linear-gradient(160deg, var(--colors--green--300) 0%, var(--colors--green--100) 100%);
}
.tool-main__label {
	font-size: 1.0625rem;
	color: rgba(22, 31, 24, .75);
}
.tool-main__value {
	margin: 6px 0 12px;
	font-family: var(--body--font-title);
	font-size: 3.5rem;
	line-height: 1.05;
	font-weight: 700;
	color: var(--colors--main--text-primary);
}
.tool-main__note {
	margin: 0;
	font-size: 1.0625rem;
}
.tool-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.tool-stat {
	padding: 18px 22px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--border-radius--br-10, 10px);
	background: #fff;
}
.tool-stat__label {
	font-weight: 700;
}
.tool-stat__value {
	margin: 6px 0 4px;
	font-family: var(--body--font-title);
	font-size: 2rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--colors--main--text-primary);
}
.tool-stat__note {
	font-size: .9375rem;
	opacity: .7;
}
.tool-detail table {
	width: 100%;
	border-collapse: collapse;
}
.tool-detail td {
	padding: 12px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.tool-detail td:last-child {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Index results contain territory names and scope notes as well as amounts. */
.tool-detail--revision {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.tool-detail--revision td {
	vertical-align: top;
	overflow-wrap: anywhere;
}
.tool-detail--revision td:first-child {
	width: 48%;
}
.tool-detail--revision td:last-child {
	white-space: normal;
}
.tool-detail--revision td.tool-detail__text {
	text-align: left;
	font-weight: 400;
}
.tool-detail .tool-formula td {
	font-size: .9375rem;
	opacity: .75;
}
.tool-detail .tool-total td {
	border-top: 2px solid var(--colors--main--text-primary);
	border-bottom: 0;
	font-size: 1.125rem;
	font-weight: 700;
}
.tool-detail .tool-actions {
	margin-top: 1rem;
}

/* the signup card ToolsControl puts in the widget's grid: .blog__cta is the help center sidebar
   card, styled by the webflow CSS */
.tool-cta {
	margin: 0;
}
/* the card's title is serif, as in the help center sidebar */
.tool-cta .h5 {
	font-family: var(--body--font-title);
}

/* The worked example: its text on the left and its table, a card, on the right, on the same two
   columns as the widget above. The text keeps a readable column when there is no table. */
.tools-page .tools-body {
	margin-top: 4rem;
}
.tools-body--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
}
.tools-body__text {
	max-width: 46rem;
}
.tools-body__text > h2 {
	margin: 0 0 1rem;
	padding-top: 0;
	font-family: var(--body--font-title);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.01em;
	color: var(--colors--main--text-primary);
}
.tools-body__text > h2:before {
	content: none;
}
.tools-body__text p {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}
.tools-body__table {
	min-width: 0;
}
.tools-body__table table {
	table-layout: fixed;
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--border-radius--br-10, 10px);
	background: #fff;
}
.tools-body__table th,
.tools-body__table td {
	overflow-wrap: anywhere;
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.tools-body__table th {
	background: #F3F6F0;
	font-size: .8125rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(22, 31, 24, .65);
}
.tools-body__table td:nth-child(2) {
	color: rgba(22, 31, 24, .7);
}
.tools-body__table th:last-child,
.tools-body__table td:last-child {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: normal;
}
.tools-body__table tr:last-child td {
	border-bottom: 0;
	background: var(--colors--green--100);
	font-weight: 700;
}
/* how the tool works, in columns */
.tools-ex {
	margin-top: 4.5rem;
}
.tools-ex__title {
	margin: 0 0 2rem;
	font-family: var(--body--font-title);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.01em;
	color: var(--colors--main--text-primary);
}
/* each block is a row, its title on the left and its text on the right: the blocks have no
   common height, and a grid of columns left holes beside the longest one */
.tools-ex__grid {
	display: grid;
	gap: 32px;
}
.tools-ex__block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	column-gap: 48px;
	align-items: start;
	padding-top: 24px;
	border-top: 1px solid #CAE795;
}
.tools-ex__text {
	max-width: 44rem;
}
.tools-ex__text > :last-child {
	margin-bottom: 0;
}
/* Rule tables stay readable in the explainer column and on narrow phones. */
.tools-ex__text table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: .875rem;
}
.tools-ex__text th,
.tools-ex__text td {
	padding: 10px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	text-align: left;
	overflow-wrap: break-word;
}
.tools-ex__text th {
	background: var(--colors--green--100);
}
/* One vertical line down the page where the widget has two columns: the result card, the worked
   example's table, the explainers' text and the FAQ's answers all start at the right column of
   the widget (half the width, less half the gap). The FAQ's own widths, 30 % and 60 %, put its
   answers elsewhere. */
@media (min-width: 992px) {
	.tools-ex__block {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 32px;
	}
	.section__faq .faq__left,
	.section__faq .faq__right {
		width: calc(50% - 16px);
	}
}
.tools-ex__block h3 {
	margin: 0;
	font-family: var(--body--font-title);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--colors--main--text-primary);
}
.tools-ex__block p {
	margin: 0 0 .75rem;
	line-height: 1.55;
}
.tools-ex__block a {
	text-decoration: underline;
	color: #4a7d12;
}
.tools-more {
	max-width: 46rem;
	margin-top: 2rem;
}
.tools-more ul {
	margin: .5rem 0 0 1.25rem;
	list-style: disc;
}
.tools-notice {
	margin-top: 2rem;
	font-size: .875rem;
	opacity: .7;
}

/* the hub: the look of the help center home - banner and rule-separated cards - without its
   search or its side menu. Copied and scoped here, not loaded from helpcenter.css, whose
   resets are global. */
.tools-hub-banner {
	padding: 136px 0 64px;
	background-color: #F3F6F0;
}
.tools-hub-title {
	text-align: center;
	margin-bottom: 0;
}
/* the underlined words of the title: the home page's animated green stroke */
.tools-hub-title b {
	position: relative;
	display: inline;
	font-weight: normal;
}
.tools-hub-title b::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #C2E78A;
	transform: scaleX(0);
	transform-origin: bottom left;
	animation: tools-underline .6s ease-in-out forwards;
}
@keyframes tools-underline {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.tools-hub-title b::after {
		animation: none;
		transform: scaleX(1);
	}
}
.tools-hub-intro {
	max-width: 46rem;
	margin: 24px auto 0;
	text-align: center;
}
.tools-hub-section {
	margin: 2.5rem 0 .5rem;
	font-family: var(--body--font-title);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.01em;
	color: var(--colors--main--text-primary);
}
.tools-hub-section {
	scroll-margin-top: 96px;
}
.tools-hub-section:first-child {
	margin-top: 0;
}
.tools-hub-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 60px;
}
.tools-hub-card {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 12px 20px;
	align-content: start;
	align-items: start;
	justify-items: start;
	padding: 24px 0;
	border-top: 1px solid #CAE795;
	color: inherit;
	text-decoration: none;
}
.tools-hub-icon {
	grid-column: 1;
	grid-row: 1 / span 3;
}
.tools-hub-card > :not(.tools-hub-icon) {
	grid-column: 2;
}
.tools-hub-card--simulator .tools-hub-tag {
	background: var(--colors--purple--100);
}
.tools-hub-card--document .tools-hub-tag {
	background: var(--colors--beige--100);
}
.tools-hub-card__title {
	font-family: var(--body--font-title);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.01em;
	color: var(--colors--main--text-primary);
}
.tools-hub-card:hover .tools-hub-card__title {
	text-decoration: underline;
}
.tools-hub-card__text {
	font-size: 1rem;
	line-height: 1.4;
	color: rgba(22, 31, 24, .7);
}
/* what kind of tool it is, where the help center shows an article count */
.tools-hub-tag {
	padding: 2px 10px;
	border-radius: 999px;
	background: #E3F0C8;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--colors--main--text-primary);
}
/* The hub banner's illustration, in its own proportions. It is wider than it is tall, so it
   gets most of the banner: less side padding, 60 % for the picture and 36 % for the text. An SVG
   that has only a viewBox has no size of its own, so the width is set here. */
.tools-hub-cta .cta__visual img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 768px) {
	.tools-hub-cta {
		padding-left: 48px;
		padding-right: 48px;
	}
	.tools-hub-cta .cta__visual {
		width: 60%;
		max-width: 60%;
	}
	.tools-hub-cta .cta__child {
		max-width: 36%;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.tools-hub-cta .cta__visual {
		width: 50%;
		max-width: 50%;
	}
	.tools-hub-cta .cta__child {
		max-width: 44%;
	}
}
@media (max-width: 767px) {
	.tools-hub-cta .cta__visual {
		width: 100%;
	}
}
.tools-hub-help {
	margin-top: 2rem;
	font-family: var(--body--font-body);
	font-size: .9375rem;
	text-align: center;
	opacity: .8;
}
.tools-hub-help a {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.tools-page .blog__article-tags-wrap.p-small {
		flex-wrap: wrap;
		gap: 10px;
	}
	.tools-page .article-tools {
		flex-wrap: wrap;
	}
	.tools-page .article-ai__label {
		display: none;
	}
	.tools-page .article-ai__menu {
		right: auto;
		left: 0;
		min-width: 220px;
	}
	.tools-hub-banner {
		padding: 112px 0 40px;
	}
	.tools-hub-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 991px) {
	.tool-widget {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'form' 'result' 'cta';
		grid-template-rows: auto;
	}
	.tools-body--split {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
}
@media (max-width: 767px) {
	.tool-fields,
	.tools-ex__block {
		grid-template-columns: 1fr;
	}
	.tools-ex__block h3 {
		margin-bottom: .75rem;
	}
	.tool-card {
		padding: 20px;
	}
	.tool-main__value {
		font-size: 2.5rem;
	}
	.tool-stats {
		gap: 10px;
	}
	.tool-stat {
		padding: 14px;
	}
	.tool-stat__value {
		font-size: 1.375rem;
	}
	.tool-stat__note {
		font-size: .8125rem;
	}
}

/* print: the widget and its result, without the site's chrome */
@media print {
	header, footer, nav, .article-tools, .tool-cta, .tool-tag, .tool-actions, .tool-hint,
	.tools-more, .tools-ex, .section__faq {
		display: none !important;
	}
	.tool-widget {
		display: block;
	}
	.tool-card {
		border: 0;
		padding: 0;
	}
}

/* Belgian statements carry the inputs and scope in the result itself. */
@media print {
	[data-widget="belgian-estimate"] > .tool-form {
		display: none;
	}
	[data-widget="belgian-estimate"] [data-estimate-result-scope] {
		display: block !important;
	}
	[data-widget="belgian-estimate"] .tool-detail table {
		width: 100%;
		table-layout: fixed;
	}
	[data-widget="belgian-estimate"] .tool-detail td {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Holding-period comparison: SVG bars with a text alternative and no chart library. */
.tool-chart {
	min-width: 0;
	break-inside: avoid;
}
.tool-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	font-size: .875rem;
	margin-bottom: 12px;
}
.tool-chart__legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tool-chart__key {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: #9ac651;
}
.tool-chart__key--current {
	background: #6942b5;
}
.tool-chart__scroll {
	overflow-x: auto;
}
.tool-chart svg {
	display: block;
	width: 100%;
	min-width: 540px;
	font-family: inherit;
	font-size: 14px;
	fill: var(--colors--main--text-primary);
}
.tool-chart__grid {
	stroke: #dce5d5;
	stroke-width: 1;
}
.tool-chart__bar {
	fill: #9ac651;
}
.tool-chart__current {
	fill: #6942b5;
}
.tool-chart__selection {
	margin-top: 12px;
}
.tool-chart summary {
	cursor: pointer;
}
.tool-chart__values {
	font-size: .875rem;
	columns: 2;
}
@media print {
	.tool-chart svg {
		min-width: 0;
	}
	.tool-chart details {
		display: none;
	}
}

.tool-chart__swipe {
	display: none;
}
@media (max-width: 767px) {
	.tool-chart__swipe {
		display: block;
	}
}

/* The browser-only arrears ledger: explicit entries, readable amounts and prose. */
.tool-arrears-entry {
	min-width: 0;
	margin: 20px 0;
	padding: 16px;
	border: 1px solid #dce5d5;
	border-radius: 12px;
}
.tool-arrears-entry legend {
	padding: 0 6px;
	font-size: 1rem;
	font-weight: 600;
}
.tool-arrears-ledger table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: .8rem;
}
.tool-arrears-ledger th, .tool-arrears-ledger td {
	padding: 10px 4px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
	border-bottom: 1px solid #dce5d5;
}
.tool-arrears-ledger th:nth-child(n+3), .tool-arrears-ledger td:nth-child(n+3) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.tool-arrears-ledger caption {
	text-align: left;
	margin-bottom: 12px;
}
@media screen and (max-width: 767px) {
	.tool-arrears-ledger colgroup, .tool-arrears-ledger thead { display: none; }
	.tool-arrears-ledger table, .tool-arrears-ledger tbody, .tool-arrears-ledger tr, .tool-arrears-ledger td { display: block; width: 100%; }
	.tool-arrears-ledger caption { display: block; width: 100%; }
	.tool-arrears-ledger tr { margin-bottom: 18px; border-bottom: 2px solid #9ac651; }
	.tool-arrears-ledger td, .tool-arrears-ledger td:nth-child(n+3) { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; text-align: left; }
	.tool-arrears-ledger td::before { content: attr(data-label); font-weight: 600; }
}
@media print {
	.tool-arrears-ledger tr { break-inside: avoid; }
	.tool-arrears-ledger thead { display: table-header-group; }
	.tool-arrears-ledger { break-inside: auto; }
}
@media print {
	[data-tool="rent-arrears"] > .tool-form { display: none !important; }
	.tool-arrears-ledger [data-arrears-scope] { display: block !important; }
	.tool-arrears-ledger caption { display: table-caption !important; }
}

/* Keep the complete repayment assumptions and calendar when printing. */
@media print {
	[data-tool="rent-repayment-plan"] > .tool-form { display: none !important; }
	.tool-repayment-schedule [data-repayment-scope] { display: block !important; }
	.tool-repayment-schedule caption { display: table-caption !important; }
}

[data-tool="rent-arrears"] [aria-invalid="true"] {
	border: 2px solid #a12622;
	outline: 1px solid #a12622;
}
[data-tool="rent-arrears"] [data-entry-status] {
	margin-top: 12px;
}

[data-tool="rent-repayment-plan"] [aria-invalid="true"] {
	border: 2px solid #a12622;
	outline: 1px solid #a12622;
}
.tool-repayment-notices {
	padding: 16px;
	border-left: 3px solid #9ac651;
}
@media print {
	.tool-repayment-notices:not([hidden]) { display: block !important; }
}

/* Mortgage: reuse ledger phone rows; always print the complete schedules. */
[data-tool="mortgage-calculator"] [aria-invalid="true"] {
	border: 2px solid #a12622;
	outline: 1px solid #a12622;
}
.tool-mortgage-schedule details { margin-top: 20px; }
.tool-mortgage-schedule summary { cursor: pointer; font-weight: 600; margin-bottom: 16px; }
.tool-mortgage-schedule th:nth-child(n+2), .tool-mortgage-schedule td:nth-child(n+2) { text-align: right; }
@media screen and (max-width: 767px) {
	.tool-mortgage-schedule td:nth-child(n+2) { text-align: left; }
	.tool-mortgage-schedule td { grid-template-columns: 100px minmax(0, 1fr); }
}
@media print {
	[data-tool="mortgage-calculator"] > .tool-form { display: none !important; }
	.tool-mortgage-schedule [data-mortgage-assumptions], [data-mortgage-notices]:not([hidden]) { display: block !important; }
	.tool-mortgage-schedule caption { display: table-caption !important; }
	.tool-mortgage-schedule details { break-inside: auto; }
	.tool-mortgage-schedule summary { display: none; }
}

[data-tool="rental-yield"] [aria-invalid="true"] {
	border: 2px solid #a12622;
	outline: 1px solid #a12622;
}
[data-tool="mortgage-calculator"] > *,
[data-tool="mortgage-calculator"] .tool-field { min-width: 0; }
[data-tool="mortgage-calculator"] .tool-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-tool="mortgage-calculator"] .tool-detail table { table-layout: fixed; }
[data-tool="mortgage-calculator"] .tool-detail td { overflow-wrap: anywhere; }
[data-tool="mortgage-calculator"] .tool-detail td:last-child { white-space: normal; }
@media screen and (max-width: 991px) {
	.tool-widget[data-tool="mortgage-calculator"] { grid-template-columns: minmax(0, 1fr); }
	[data-tool="mortgage-calculator"] .tool-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Renovation: itemised costs remain readable in screen, phone and print. */
[data-tool="renovation-budget"] [aria-invalid="true"] { border: 2px solid #a12622; outline: 1px solid #a12622; }
[data-tool="renovation-budget"] .tool-message { overflow-wrap: anywhere; }
.tool-renovation-detail th:nth-child(n+2), .tool-renovation-detail td:nth-child(n+2) { text-align: right; }
@media screen and (max-width: 767px) {
	.tool-renovation-detail td:nth-child(n+2) { text-align: left; }
}
@media print {
	[data-tool="renovation-budget"] > .tool-form { display: none !important; }
	[data-tool="renovation-budget"] [data-renovation-assumptions], [data-tool="renovation-budget"] [data-renovation-scope] { display: block !important; }
}

/* Public rent-calendar and tenant-notice tools. */
[data-tool="rent-payment-calendar"] [aria-invalid="true"],
[data-tool="lease-notice-calculator"] [aria-invalid="true"] {
	border: 2px solid #a12622;
	outline: 1px solid #a12622;
}
[data-tool="rent-payment-calendar"] .tool-detail table,
[data-tool="lease-notice-calculator"] .tool-detail table { table-layout: fixed; width: 100%; }
[data-tool="rent-payment-calendar"] .tool-detail td,
[data-tool="lease-notice-calculator"] .tool-detail td { overflow-wrap: anywhere; }
@media print {
	[data-tool="rent-payment-calendar"] > .tool-form,
	[data-tool="lease-notice-calculator"] > .tool-form { display: none !important; }
	[data-calendar-scope], [data-notice-scope] { display: block !important; }
}
[data-tool="renovation-budget"] .tool-detail table { table-layout: fixed; }
[data-tool="renovation-budget"] .tool-detail td { overflow-wrap: anywhere; }
[data-tool="renovation-budget"] .tool-detail td:first-child { width: 55%; }
[data-tool="renovation-budget"] .tool-detail td:last-child { white-space: normal; }
[data-tool="renovation-budget"] .tool-main__value { overflow-wrap: anywhere; }
[data-tool="rent-payment-calendar"] > *,
[data-tool="lease-notice-calculator"] > * { min-width: 0; }
[data-tool="rent-payment-calendar"] .tool-fields,
[data-tool="lease-notice-calculator"] .tool-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-tool="rent-payment-calendar"] .tool-main__value { overflow-wrap: anywhere; }
@media screen and (max-width: 767px) {
	.tool-widget[data-tool="rent-payment-calendar"],
	.tool-widget[data-tool="lease-notice-calculator"] { grid-template-columns: minmax(0, 1fr); }
	[data-tool="rent-payment-calendar"] .tool-fields,
	[data-tool="lease-notice-calculator"] .tool-fields { grid-template-columns: minmax(0, 1fr); }
}

[data-tool="target-yield-price"] .tool-main__value,
[data-tool="target-yield-price"] .tool-detail td {
	overflow-wrap: anywhere;
	white-space: normal;
}

.tool-detail table + .tool-hint {
	margin-top: 1rem;
}


.tool-form > form > .tool-field + .tool-field {
	margin-top: 1.25rem;
}
.tool-widget .tool-field,
.tool-widget > .tool-result-col,
.tool-widget .tool-ok > * {
	min-width: 0;
}
.tool-field [aria-invalid="true"] {
	border-color: #a12622;
	outline: 1px solid #a12622;
}
@media screen and (max-width: 767px) {
	.tool-fields, .tools-ex__block {
		grid-template-columns: minmax(0, 1fr);
	}
	.tool-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tool-stat__value, .tool-main__value, .tool-detail td {
		overflow-wrap: anywhere;
	}
	.tool-detail td:last-child {
		white-space: normal;
	}
}

/* Keep a label with its input. Separate sections, conditional groups and row actions. */
@media screen {
	.tool-form > form,
	.tool-form :where([data-show-when]:not(.tool-field, .tool-fields, .tool-group, label, input, select, p, span)),
	.tool-form :where([data-receipt-row], .scr-row, .tool-arrears-entry) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}
	.tool-form > form > :where(.tool-btn),
	.tool-form fieldset > .tool-btn {
		justify-self: start;
	}
	.tool-form > form > :is(.tool-field, .tool-fields, .tool-actions, .tool-hint, h3, .tool-group) {
		margin-block: 0;
	}
	.tool-form > form > .tool-actions { margin-top: 8px; }
	.tool-form > .tool-hint + form,
	.tool-form details[open] > .tool-field,
	.tool-form fieldset > legend + .tool-field {
		margin-top: 16px;
	}
}

/* On screen, each visible result block owns one grid row. Conditional notes
   and action groups then use the same gap as tables and totals. */
@media screen {
	.tool-ok > .tool-card:not(.deposit-letter, .scr-document),
	.tool-result-col > .receipt-export {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}
	.tool-ok > .tool-card:not(.deposit-letter, .scr-document) > *,
	.tool-result-col > .receipt-export,
	.tool-result-col > .receipt-export > *,
	.tool-ok > .tool-actions {
		margin-block: 0;
	}
	.tool-result-col [role="status"]:empty {
		position: absolute;
	}
	.tool-chart details[open] > .tool-chart__values {
		margin-top: 16px;
	}
	.tool-result-col .tool-stats {
		row-gap: 16px;
	}
}

/* Public signup arrows are bound to specific Webflow element IDs. These
   per-tool links use the same paired arrows with hover and keyboard focus. */
[data-tool-cta] .button__icon-wrapper { overflow: hidden; }
[data-tool-cta] .animate2 { transform: translate(-110%, 110%); }
@media (prefers-reduced-motion: no-preference) {
	[data-tool-cta] .button__icon-wrapper .fa-icon { transition: transform .25s ease; }
	[data-tool-cta]:is(:hover, :focus-visible) .animate1 { transform: translate(110%, -110%); }
	[data-tool-cta]:is(:hover, :focus-visible) .animate2 { transform: translate(0, 0); }
}

:is(.tool-btn--copy, .tool-btn--print, .tool-btn--download, .tool-btn--add, .tool-btn--remove, .tool-btn--clear, .tool-btn--cancel, .tool-btn--regenerate, .tool-btn--undo, .tool-btn--duplicate, .tool-btn--confirm) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	max-width: 100%;
}
:is(.tool-btn--copy, .tool-btn--print, .tool-btn--download, .tool-btn--add, .tool-btn--remove, .tool-btn--clear, .tool-btn--cancel, .tool-btn--regenerate, .tool-btn--undo, .tool-btn--duplicate, .tool-btn--confirm)::before,
[data-article-copy]::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--tool-action-icon) center / contain no-repeat;
	mask: var(--tool-action-icon) center / contain no-repeat;
}
.tool-btn--copy, .tool-btn--duplicate, [data-article-copy] {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}
.tool-btn--print {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H3V8h18v9h-4M7 14h10v7H7zM16 11h2'/%3E%3C/svg%3E");
}

.tool-btn--download {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4'/%3E%3C/svg%3E");
}

.tool-btn--add {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.tool-btn--remove {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M9 6V3h6v3M6 6l1 15h10l1-15M10 10v7m4-7v7'/%3E%3C/svg%3E");
}

.tool-btn--clear {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14l10-10a2 2 0 0 1 3 0l4 4a2 2 0 0 1 0 3l-9 9H8l-5-5a1 1 0 0 1 0-1zM8 9l8 8M10 20h11'/%3E%3C/svg%3E");
}

.tools-page .article-ai__item[data-article-copy] {
	display: flex;
	align-items: center;
	gap: .5em;
}

.tool-btn--cancel {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.tool-btn--confirm {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E");
}

.tool-btn--undo {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 3 9l5 5M3 9h11a6 6 0 0 1 0 12'/%3E%3C/svg%3E");
}

.tool-btn--regenerate {
	--tool-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8a8 8 0 0 0-14-2L3 9m0-6v6h6M4 16a8 8 0 0 0 14 2l3-3m0 6v-6h-6'/%3E%3C/svg%3E");
}

/* Notice result explanations use body-sized text, including their source link. */
[data-tool="lease-notice-calculator"] .tool-notice-explanation {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--colors--main--text-primary);
}
[data-tool="lease-notice-calculator"] .tool-notice-explanation p {
	font-size: inherit;
	line-height: inherit;
}
[data-tool="lease-notice-calculator"] .tool-notice-explanation a {
	font-size: inherit;
	line-height: inherit;
}
[data-tool="lease-notice-calculator"] .tool-notice-explanation p:last-child { margin-bottom: 0; }

/* Let long German compound nouns wrap inside the narrow hub cards. */
:lang(de) .tools-hub-card__title {
	min-width: 0;
	hyphens: auto;
	overflow-wrap: anywhere;
}