/* 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,
.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: 2.5rem;
	padding: .5rem 1.1rem;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.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;
}
.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 table {
	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 {
	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: nowrap;
}
.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: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 0;
	border-top: 1px solid #CAE795;
	color: inherit;
	text-decoration: none;
}
.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: 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;
	}
}

/* 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;
	}
}