/*
 * BBU free tools: shared components.
 *
 * Loads after the theme's own stylesheets (home.css for the tokens and chrome,
 * fonts.css, site.css). Every colour, font and radius below is a BBU V2 token:
 *   --blue #6da0db  --slate #6b6f79  --ink #18354c  --text #39424f
 *   --cloud #edf3f9 --line #c9d4df   --cta #3975b8  --cta-hover #285a90
 *   body Proxima Nova 18px/1.55      headings League Spartan 600
 * The fallbacks only matter if this file is ever loaded on its own.
 *
 * Everything is scoped under .bbu-ft so nothing leaks into other templates.
 */

.bbu-ft {
	--ft-ink: var(--ink, #18354c);
	--ft-text: var(--text, #39424f);
	--ft-slate: var(--slate, #6b6f79);
	--ft-cloud: var(--cloud, #edf3f9);
	--ft-line: var(--line, #c9d4df);
	--ft-blue: var(--blue, #6da0db);
	--ft-cta: var(--cta, #3975b8);
	--ft-cta-hover: var(--cta-hover, #285a90);
	--ft-radius: var(--radius, 16px);
	--ft-head: 'League Spartan', sans-serif;
	color: var(--ft-text);
	font-family: 'Proxima Nova', sans-serif;
	font-size: 18px;
	line-height: 1.55;
}

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

.bbu-ft :where(h1, h2, h3, h4) {
	font-family: var(--ft-head);
	color: var(--ft-ink);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0 0 16px;
}

.bbu-ft :where(p) {
	margin: 0 0 16px;
	max-width: 68ch;
}

.bbu-ft a {
	color: var(--ft-ink);
	text-underline-offset: 4px;
}

.bbu-ft :focus-visible {
	outline: 3px solid var(--ft-ink);
	outline-offset: 3px;
}

.bbu-ft .wrap {
	width: min(1240px, calc(100% - 80px));
	margin-inline: auto;
}

.ft-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The theme's base layer (home.css) resets lists to no bullets, gives every
 * table min-width:1000px and every input a full width and a 49px minimum
 * height. Inside the tools those rules are undone here, explicitly.
 */
.bbu-ft table {
	min-width: 0;
	width: 100%;
}

.bbu-ft .ft-sheet ul,
.bbu-ft .ft-prose ul,
.bbu-ft .ft-callout ul {
	list-style: disc;
}

.bbu-ft .ft-sheet ol,
.bbu-ft .ft-prose ol,
.bbu-ft .ft-callout ol,
.bbu-ft .ft-sources ol,
.bbu-ft .ft-errsum ul {
	list-style: decimal;
}

.bbu-ft .ft-errsum ul {
	list-style: disc;
}

.bbu-ft input[type=checkbox],
.bbu-ft input[type=radio] {
	width: 22px;
	min-width: 0;
	height: 22px;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	flex: 0 0 auto;
	appearance: auto;
	-webkit-appearance: auto;
}

.bbu-ft details > summary {
	display: list-item;
	list-style: disclosure-closed;
	min-height: 44px;
	padding: 10px 0;
	justify-content: normal;
}

.bbu-ft details[open] > summary {
	list-style: disclosure-open;
}

.bbu-ft .ft-faq details > summary {
	display: flex;
	list-style: none;
	justify-content: space-between;
	min-height: 60px;
	padding: 16px 0;
}

/*
 * Phones: the document never gets wider than the viewport. Wide content either
 * wraps (copy, badges, sources, safety text, the tables in the page copy) or
 * scrolls inside its own region (the tool's result tables, the hub's group bar).
 * Nothing is clipped and nothing relies on overflow being hidden.
 */
.bbu-ft {
	overflow-wrap: break-word;
}

/* The hub's group links scroll inside their own bar; the visually hidden tool
   count must stay inside that bar rather than positioning against the page. */
.ft-dir ul,
.ft-dir a {
	position: relative;
}

.bbu-ft .ft-notice,
.bbu-ft .ft-quote,
.bbu-ft .ft-callout,
.bbu-ft .ft-sources li,
.bbu-ft .ft-linklist .ft-hint,
.bbu-ft .ft-sheet p,
.bbu-ft .ft-sheet li {
	overflow-wrap: anywhere;
}

/* Tables written into the page copy have no scroll wrapper, so on a phone they
   wrap (with hyphenation in the page's language) instead of widening the page. */
.bbu-ft .ft-prose th,
.bbu-ft .ft-prose td {
	overflow-wrap: anywhere;
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (max-width: 760px) {
	.bbu-ft .ft-prose table {
		font-size: 15px;
	}

	.bbu-ft .ft-prose th,
	.bbu-ft .ft-prose td {
		padding: 8px 6px;
		font-size: 15px;
		line-height: 1.4;
	}
}

/* --------------------------------------------------------------- hero */

.ft-crumbs {
	font-size: 15px;
	color: var(--ft-slate);
	padding-top: 28px;
	margin: 0;
}

.ft-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0;
	padding: 0;
}

.ft-crumbs li + li::before {
	content: '/';
	margin-inline: 10px;
	color: var(--ft-line);
}

.ft-crumbs a {
	color: var(--ft-slate);
	text-decoration: none;
}

.ft-crumbs a:hover {
	color: var(--ft-ink);
	text-decoration: underline;
}

.ft-hero {
	padding-block: 22px 34px;
}

.ft-kicker {
	display: inline-block;
	font-size: 15px;
	color: var(--ft-ink);
	background: var(--ft-cloud);
	border-radius: 999px;
	padding: 6px 14px;
	margin: 0 0 18px;
}

.ft-hero h1 {
	font-size: clamp(40px, 4.6vw, 64px);
	max-width: 16ch;
	margin-bottom: 18px;
}

.ft-lede {
	font-size: 21px;
	line-height: 1.5;
	max-width: 60ch;
	margin-bottom: 22px;
}

.ft-promise {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: var(--ft-ink);
}

.ft-promise li {
	position: relative;
	padding-left: 24px;
}

.ft-promise li::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 7px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--ft-ink);
	border-bottom: 2px solid var(--ft-ink);
	transform: rotate(-45deg);
}

/* Permanent guidance that sits above a tool and never moves behind a result. */
.ft-notice {
	border-left: 4px solid var(--ft-ink);
	background: #fff;
	border-radius: 0 12px 12px 0;
	padding: 16px 20px;
	margin: 0 0 22px;
	font-size: 17px;
	color: var(--ft-ink);
}

.ft-notice p {
	margin: 0;
	max-width: none;
}

.ft-notice p + p {
	margin-top: 8px;
}

.ft-notice strong {
	font-family: var(--ft-head);
	font-weight: 600;
}

/* ---------------------------------------------------------- workbench */

.ft-bench {
	background: var(--ft-cloud);
	padding-block: 40px 48px;
}

.ft-panel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 28px;
	align-items: start;
}

.ft-panel.ft-stack {
	grid-template-columns: minmax(0, 1fr);
}

.ft-inputs,
.ft-output {
	background: #fff;
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius);
	padding: 28px;
	min-width: 0;
}

.ft-inputs h2,
.ft-output h2 {
	font-size: 28px;
	margin-bottom: 6px;
}

.ft-inputs > p.ft-intro,
.ft-output > p.ft-intro {
	font-size: 16px;
	color: var(--ft-slate);
	margin-bottom: 20px;
}

.ft-privacy {
	font-size: 15px;
	color: var(--ft-slate);
	margin: 18px 0 0;
	max-width: none;
}

/* ------------------------------------------------------------ fields */

.ft-field {
	margin: 0 0 20px;
}

.ft-field > label,
.ft-legend {
	display: block;
	font-family: var(--ft-head);
	font-weight: 600;
	color: var(--ft-ink);
	font-size: 18px;
	margin-bottom: 8px;
	padding: 0;
}

.ft-help {
	display: block;
	font-size: 15px;
	color: var(--ft-slate);
	margin: -2px 0 8px;
	line-height: 1.4;
}

.ft-input,
.bbu-ft input[type=text],
.bbu-ft input[type=tel],
.bbu-ft input[type=url],
.bbu-ft input[type=number],
.bbu-ft input[type=date],
.bbu-ft input[type=time],
.bbu-ft select,
.bbu-ft textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	font: inherit;
	font-size: 18px;
	color: var(--ft-ink);
	background: #fff;
	border: 1px solid var(--ft-slate);
	border-radius: 10px;
	appearance: none;
	-webkit-appearance: none;
}

.bbu-ft select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ft-ink) 50%), linear-gradient(135deg, var(--ft-ink) 50%, transparent 50%);
	background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	padding-right: 42px;
}

.bbu-ft textarea {
	min-height: 110px;
	resize: vertical;
	line-height: 1.45;
}

.bbu-ft input:focus-visible,
.bbu-ft select:focus-visible,
.bbu-ft textarea:focus-visible {
	outline: 3px solid var(--ft-ink);
	outline-offset: 1px;
}

.bbu-ft [aria-invalid=true] {
	border-color: #a5342a;
	border-width: 2px;
}

.ft-error {
	display: block;
	color: #a5342a;
	font-size: 16px;
	margin-top: 6px;
}

.ft-error:empty {
	display: none;
}

.ft-errsum {
	border: 2px solid #a5342a;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 20px;
	color: #7c241c;
	background: #fff;
}

.ft-errsum:empty {
	display: none;
}

.ft-errsum p {
	margin: 0 0 6px;
	font-weight: 600;
}

.ft-errsum ul {
	margin: 0;
	padding-left: 20px;
}

.ft-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: 14px;
}

.ft-row .ft-field {
	margin-bottom: 0;
}

.ft-row + .ft-field,
.ft-row + .ft-row,
.ft-row + fieldset {
	margin-top: 20px;
}

.bbu-ft fieldset {
	border: 0;
	margin: 0 0 22px;
	padding: 0;
	min-width: 0;
}

/* Tappable checkbox / radio rows. The whole row is the label. */
.ft-choices {
	display: grid;
	gap: 8px;
}

.ft-choices.ft-cols {
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.ft-choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--ft-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: 17px;
	line-height: 1.35;
	color: var(--ft-text);
}

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

.ft-choice input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--ft-cta);
}

.ft-choice:has(input:checked) {
	border-color: var(--ft-ink);
	background: var(--ft-cloud);
	color: var(--ft-ink);
}

.ft-choice:has(input:focus-visible) {
	outline: 3px solid var(--ft-ink);
	outline-offset: 2px;
}

.ft-choice small {
	display: block;
	color: var(--ft-slate);
	font-size: 15px;
	margin-top: 2px;
}

/* Segmented radios for short either/or answers. */
.ft-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ft-seg .ft-choice {
	flex: 1 1 120px;
	justify-content: flex-start;
	align-items: center;
}

/* ------------------------------------------------------------ buttons */

.bbu-ft .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 13px 25px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--ft-cta);
	color: #fff;
	font: inherit;
	font-size: 18px;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.bbu-ft .button:hover {
	background: var(--ft-cta-hover);
	color: #fff;
}

.ft-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 18px;
	border: 1px solid var(--ft-ink);
	border-radius: 8px;
	background: #fff;
	color: var(--ft-ink);
	font: inherit;
	font-size: 17px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

.ft-btn:hover {
	background: var(--ft-cloud);
}

.ft-btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.ft-btn-quiet {
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 4px;
	padding-inline: 8px;
}

.ft-btn-small {
	min-height: 44px;
	padding: 8px 12px;
	font-size: 15px;
}

.ft-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 8px;
}

.ft-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ft-slate);
	border-radius: 10px;
	overflow: hidden;
}

.ft-stepper button {
	min-width: 48px;
	min-height: 48px;
	border: 0;
	background: var(--ft-cloud);
	color: var(--ft-ink);
	font-size: 22px;
	cursor: pointer;
}

.ft-stepper input {
	width: 64px !important;
	min-height: 48px;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
}

/* ------------------------------------------------------------- result */

.ft-output[data-state=empty] .ft-sheet {
	display: none;
}

/* The visitor's own Submit scrolls to the top of this card, on every width. */
.ft-output {
	scroll-margin-top: 16px;
}

/* Save, download and share sit under the result and appear only while there is one. */
.ft-output[data-state=empty] .ft-savebar {
	display: none;
}

.ft-savebar {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ft-line);
}

.ft-savebar .ft-savename {
	flex: 1 1 100%;
	margin: 0;
}

.ft-savemsg {
	flex: 1 1 100%;
	margin: 0;
}

.ft-sharetext {
	flex: 1 1 100%;
	width: 100%;
	font: inherit;
	font-size: 15px;
}

/* Saved copies on this device, in the inputs card above the privacy line. */
.ft-saved {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--ft-line);
}

.ft-saved-title {
	font-size: 20px;
	margin: 0 0 6px;
}

.ft-saved-list {
	list-style: none;
	margin: 12px 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ft-saved-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--ft-line);
	border-radius: 10px;
	padding: 10px 14px;
}

.ft-saved-name {
	display: grid;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ft-saved-name .ft-meta {
	font-size: 15px;
	color: var(--ft-slate);
}

.ft-saved-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ft-empty {
	border: 1px dashed var(--ft-line);
	border-radius: 12px;
	padding: 22px;
	color: var(--ft-slate);
	font-size: 17px;
}

.ft-output[data-state=ready] .ft-empty {
	display: none;
}

.ft-sheet {
	color: var(--ft-text);
}

.ft-sheet h3 {
	font-size: 23px;
	margin: 26px 0 10px;
}

.ft-sheet h3:first-child {
	margin-top: 0;
}

.ft-sheet h4 {
	font-size: 19px;
	margin: 18px 0 8px;
}

.ft-sheet p,
.ft-sheet li {
	font-size: 17px;
}

.ft-sheet ul,
.ft-sheet ol {
	padding-left: 22px;
	margin: 0 0 16px;
}

.ft-sheet li + li {
	margin-top: 6px;
}

.ft-big {
	font-family: var(--ft-head);
	font-weight: 600;
	color: var(--ft-ink);
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.05;
	margin: 4px 0 6px;
}

.ft-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 12px;
	margin: 0 0 20px;
}

.ft-stat {
	border: 1px solid var(--ft-line);
	border-radius: 12px;
	padding: 14px 16px;
	background: #fff;
}

.ft-stat dt {
	font-size: 15px;
	color: var(--ft-slate);
	margin: 0 0 4px;
}

.ft-stat dd {
	margin: 0;
	font-family: var(--ft-head);
	font-weight: 600;
	font-size: 26px;
	color: var(--ft-ink);
	line-height: 1.1;
}

.ft-stat dd small {
	display: block;
	font-family: 'Proxima Nova', sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: var(--ft-slate);
	margin-top: 4px;
}

.ft-tablewrap {
	overflow-x: auto;
	margin: 0 0 18px;
	border: 1px solid var(--ft-line);
	border-radius: 12px;
	-webkit-overflow-scrolling: touch;
}

.ft-tablewrap:focus-visible {
	outline: 3px solid var(--ft-ink);
}

.bbu-ft .ft-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	min-width: 420px;
}

.ft-table caption {
	text-align: left;
	padding: 12px 14px 4px;
	font-size: 15px;
	color: var(--ft-slate);
}

.ft-table th,
.ft-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--ft-line);
	text-align: left;
	vertical-align: top;
}

.ft-table thead th {
	font-family: var(--ft-head);
	font-weight: 600;
	color: var(--ft-ink);
	background: var(--ft-cloud);
	font-size: 16px;
}

.ft-table tbody tr:last-child td,
.ft-table tbody tr:last-child th {
	border-bottom: 0;
}

.ft-table td.ft-num,
.ft-table th.ft-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ft-table tfoot td,
.ft-table tfoot th {
	font-weight: 600;
	color: var(--ft-ink);
	border-top: 2px solid var(--ft-ink);
	border-bottom: 0;
}

.ft-ticks {
	list-style: none;
	padding: 0 !important;
	margin: 0 0 16px;
}

.ft-ticks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 6px 0;
	margin: 0 !important;
	border-bottom: 1px solid var(--ft-cloud);
}

.ft-ticks label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-height: 40px;
	cursor: pointer;
	width: 100%;
}

.ft-ticks input {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--ft-cta);
}

.ft-ticks .ft-meta {
	color: var(--ft-slate);
	font-size: 15px;
}

.ft-lines {
	border-bottom: 1px solid var(--ft-slate);
	min-height: 30px;
	margin: 4px 0 10px;
}

.ft-tag {
	display: inline-block;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.2;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ft-cloud);
	color: var(--ft-ink);
	margin-left: 6px;
	vertical-align: 2px;
	white-space: normal;
	overflow-wrap: anywhere;
}

.ft-sheet > .ft-tag {
	margin-left: 0;
}

.ft-tag.ft-tag-ink {
	background: var(--ft-ink);
	color: #fff;
}

/* A quotation from a named source, with the source under it. */
.ft-quote {
	margin: 0 0 14px;
	padding: 14px 18px;
	background: var(--ft-cloud);
	border-left: 4px solid var(--ft-blue);
	border-radius: 0 12px 12px 0;
}

.ft-quote p {
	margin: 0 0 6px;
	font-size: 17px;
	color: var(--ft-ink);
}

.ft-quote cite {
	display: block;
	font-style: normal;
	font-size: 14px;
	color: var(--ft-slate);
}

.ft-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ft-split > div {
	min-width: 0;
}

.ft-range {
	margin: 0 0 16px;
}

.ft-range-text {
	margin: 0 0 12px;
	font-weight: 600;
	color: var(--ft-ink);
}

.ft-range-bar {
	position: relative;
	height: 10px;
	margin: 0 9px;
	border-radius: 999px;
	background: var(--ft-cloud);
	border: 1px solid var(--ft-line);
}

.ft-range-marker {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: var(--ft-cta);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--ft-ink);
}

.ft-range[data-position="below"] .ft-range-marker,
.ft-range[data-position="above"] .ft-range-marker {
	background: var(--ft-ink);
}

.ft-range-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 15px;
	color: var(--ft-slate);
}

.ft-callout {
	border: 2px solid var(--ft-ink);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 0 0 16px;
	background: #fff;
}

.ft-callout h3,
.ft-callout h4 {
	margin-top: 0 !important;
}

.ft-note {
	font-size: 15px;
	color: var(--ft-slate);
}

.ft-tabs [role=tablist] {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.ft-tabs [role=tab] {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--ft-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ft-ink);
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}

.ft-tabs [role=tab][aria-selected=true] {
	background: var(--ft-ink);
	border-color: var(--ft-ink);
	color: #fff;
}

/* Contraction timer. */
.ft-timer {
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
	margin-bottom: 18px;
}

.ft-bigbtn {
	width: min(220px, 70vw);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
	background: var(--ft-cta);
	color: #fff;
	font-family: var(--ft-head);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.1;
	padding: 20px;
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(24, 53, 76, .18);
	touch-action: manipulation;
}

.ft-bigbtn:hover {
	background: var(--ft-cta-hover);
}

.ft-bigbtn[aria-pressed=true] {
	background: var(--ft-ink);
}

.ft-bigbtn span {
	display: block;
	font-family: 'Proxima Nova', sans-serif;
	font-weight: 400;
	font-size: 16px;
	margin-top: 6px;
	opacity: .9;
}

.ft-clock {
	font-family: var(--ft-head);
	font-weight: 600;
	font-size: 44px;
	color: var(--ft-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Colour swatches for the diaper colour guide. */
.ft-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 8px;
}

.ft-swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 8px 12px;
	border: 1px solid var(--ft-line);
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.25;
	background: #fff;
}

.ft-swatch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ft-swatch i {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(24, 53, 76, .35);
}

.ft-swatch:has(input:checked) {
	border: 2px solid var(--ft-ink);
	background: var(--ft-cloud);
}

.ft-swatch:has(input:focus-visible) {
	outline: 3px solid var(--ft-ink);
	outline-offset: 2px;
}

/* Running log list (feeding log, shift log). */
.ft-log {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border: 1px solid var(--ft-line);
	border-radius: 12px;
	max-height: 340px;
	overflow-y: auto;
}

.ft-log li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--ft-cloud);
	font-size: 16px;
}

.ft-log li:last-child {
	border-bottom: 0;
}

.ft-tapgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.ft-tap {
	min-height: 72px;
	border-radius: 12px;
	border: 1px solid var(--ft-ink);
	background: #fff;
	color: var(--ft-ink);
	font-family: var(--ft-head);
	font-weight: 600;
	font-size: 19px;
	cursor: pointer;
	padding: 10px;
}

.ft-tap:hover {
	background: var(--ft-cloud);
}

.ft-tap small {
	display: block;
	font-family: 'Proxima Nova', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--ft-slate);
}

/* ---------------------------------------------------------- the one CTA */

.ft-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px 36px;
	align-items: center;
	margin-top: 28px;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--ft-line);
	border-left: 6px solid var(--ft-cta);
	border-radius: var(--ft-radius);
}

.ft-cta .ft-cta-label {
	font-size: 15px;
	color: var(--ft-slate);
	margin: 0 0 6px;
}

.ft-cta h2 {
	font-size: clamp(26px, 2.6vw, 34px);
	margin: 0 0 8px;
}

.ft-cta p {
	margin: 0;
	font-size: 17px;
}

/* -------------------------------------------------------- static content */

.ft-content {
	padding-block: 56px 24px;
}

.ft-content .ft-prose {
	max-width: 74ch;
}

.ft-prose h2 {
	font-size: clamp(28px, 2.8vw, 38px);
	margin: 44px 0 14px;
}

.ft-prose h2:first-child {
	margin-top: 0;
}

.ft-prose h3 {
	font-size: 23px;
	margin: 26px 0 10px;
}

.ft-prose p,
.ft-prose li {
	font-size: 18px;
	line-height: 1.62;
}

.ft-prose ul,
.ft-prose ol {
	padding-left: 24px;
	margin: 0 0 18px;
}

.ft-prose li + li {
	margin-top: 6px;
}

.ft-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
	margin: 0 0 18px;
}

.ft-prose th,
.ft-prose td {
	border-bottom: 1px solid var(--ft-line);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.ft-prose th {
	font-family: var(--ft-head);
	color: var(--ft-ink);
}

.ft-faq,
.ft-sources,
.ft-related {
	padding-block: 28px;
}

.ft-faq h2,
.ft-sources h2,
.ft-related h2 {
	font-size: clamp(28px, 2.8vw, 38px);
}

.ft-faq .faq-list {
	max-width: 860px;
}

.ft-faq details {
	border-bottom: 1px solid var(--ft-line);
}

.ft-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	min-height: 60px;
	padding: 16px 0;
	font-family: var(--ft-head);
	font-weight: 600;
	font-size: 21px;
	color: var(--ft-ink);
	cursor: pointer;
	list-style: none;
}

.ft-faq summary::-webkit-details-marker {
	display: none;
}

.ft-faq summary::after {
	content: '+';
	font-size: 28px;
	line-height: 1;
	font-weight: 400;
}

.ft-faq details[open] summary::after {
	content: '\2212';
}

.ft-faq details p {
	padding: 0 28px 20px 0;
	margin: 0;
	font-size: 18px;
}

.ft-sources ol {
	padding-left: 22px;
	max-width: 900px;
}

.ft-sources li {
	font-size: 16px;
	margin-bottom: 10px;
}

.ft-sources .ft-checked {
	color: var(--ft-slate);
}

.ft-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 0 48px;
}

.ft-related h3 {
	font-size: 22px;
	margin: 6px 0 6px;
}

.ft-linklist {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.ft-linklist li {
	border-bottom: 1px solid var(--ft-line);
}

.ft-linklist a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 56px;
	padding: 12px 2px;
	text-decoration: none;
	color: var(--ft-ink);
	font-size: 18px;
}

.ft-linklist a:hover span:first-child {
	text-decoration: underline;
}

.ft-linklist .ft-hint {
	font-size: 15px;
	color: var(--ft-slate);
}

.ft-bottom {
	padding-bottom: 64px;
}

/* ----------------------------------------------------------------- hub */

.ft-dir {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fff;
	border-bottom: 1px solid var(--ft-line);
}

.ft-dir ul {
	list-style: none;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0;
	padding: 12px 0;
	scrollbar-width: thin;
}

.ft-dir a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--ft-line);
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
	font-size: 16px;
	color: var(--ft-ink);
	background: #fff;
}

.ft-dir a:hover {
	border-color: var(--ft-ink);
	background: var(--ft-cloud);
}

.ft-group {
	padding-block: 48px 8px;
	scroll-margin-top: 80px;
}

.ft-group > header {
	max-width: 760px;
	margin-bottom: 26px;
}

.ft-group > header h2 {
	font-size: clamp(32px, 3.4vw, 46px);
	margin-bottom: 10px;
}

.ft-group > header p {
	font-size: 19px;
	margin: 0;
}

.ft-sub {
	font-size: 22px;
	margin: 30px 0 14px;
}

.ft-cards {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
}

.ft-card {
	height: 100%;
}

.ft-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 24px 24px;
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius);
	background: #fff;
	text-decoration: none;
	color: var(--ft-text);
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.ft-card a:hover {
	border-color: var(--ft-blue);
	box-shadow: 0 16px 34px rgba(24, 53, 76, .10);
}

.ft-card .ft-card-for {
	font-size: 14px;
	color: var(--ft-slate);
	margin: 0 0 8px;
}

.ft-card h3,
.ft-card h4 {
	font-size: 22px;
	margin: 0 0 8px;
}

.ft-card p {
	font-size: 16px;
	margin: 0 0 14px;
}

.ft-card .ft-card-go {
	margin-top: auto;
	color: var(--ft-ink);
	font-size: 16px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------- photographs */

/*
 * SST-882: each tool has one real BBU photograph (src/photos.py). On its page it closes the introduction: beside the text from 961px, a strip
 * above the heading below that, so a phone reaches the tool after one short picture. On a directory card it opens the card, inside the link.
 * The box sets the shape and the photograph is cropped to it (object-fit: cover) around the point named in its object-position. A browser
 * without :has() shows the strip after the introduction instead, which is still a complete page.
 */
.bbu-ft .ft-photo,
.bbu-ft .ft-card-photo {
	display: block;
	overflow: hidden;
	background: var(--ft-cloud);
}

.bbu-ft .ft-photo img,
.bbu-ft .ft-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.bbu-ft .ft-photo {
	aspect-ratio: 2 / 1;
	margin: 22px 0 0;
	border-radius: var(--ft-radius);
}

.ft-hero:has(> .ft-photo) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
}

.ft-hero:has(> .ft-photo) > .ft-photo {
	grid-row: 1;
	justify-self: stretch;
	margin: 0 0 22px;
}

@media (min-width: 600px) and (max-width: 960px) {
	.bbu-ft .ft-photo {
		aspect-ratio: 3 / 1;
	}
}

@media (min-width: 961px) {
	.ft-hero:has(> .ft-photo) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: 48px;
	}

	.ft-hero:has(> .ft-photo) > * {
		grid-column: 1;
	}

	.ft-hero:has(> .ft-photo) > .ft-photo {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: start;
		aspect-ratio: 4 / 3;
		margin: 0;
	}
}

.bbu-ft .ft-card-photo {
	aspect-ratio: 3 / 2;
	margin: -22px -24px 18px;
	border-radius: calc(var(--ft-radius) - 1px) calc(var(--ft-radius) - 1px) 0 0;
}

.bbu-ft .ft-card-photo img {
	transition: transform 240ms ease-out;
}

.bbu-ft .ft-card a:hover .ft-card-photo img {
	transform: scale(1.03);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 960px) {
	.ft-panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.bbu-ft .wrap {
		width: calc(100% - 40px);
	}

	.ft-hero h1 {
		font-size: 40px;
	}

	.ft-lede {
		font-size: 19px;
	}

	.ft-bench {
		padding-block: 24px 32px;
	}

	.ft-inputs,
	.ft-output {
		padding: 20px 16px;
		border-radius: 12px;
	}

	.ft-cta {
		grid-template-columns: minmax(0, 1fr);
		padding: 22px 20px;
	}

	.ft-cta .button {
		width: 100%;
	}

	.ft-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.ft-faq summary {
		font-size: 19px;
	}

	.ft-actions .ft-btn,
	.ft-actions .button {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-card a {
		transition: none;
	}

	.bbu-ft .ft-card-photo img {
		transition: none;
	}

	.bbu-ft .ft-card a:hover .ft-card-photo img {
		transform: none;
	}
}

/* --------------------------------------------------------------- print */

.ft-print-head {
	display: none;
}

@media print {
	@page {
		margin: 14mm;
	}

	body.ft-printing > *:not(.hp-page),
	body.ft-printing .site-header,
	body.ft-printing .footer,
	body.ft-printing .skip-link,
	body.ft-printing #wpadminbar {
		display: none !important;
	}

	.bbu-ft {
		font-size: 11.5pt;
		color: #000;
	}

	.bbu-ft .ft-crumbs,
	.bbu-ft .ft-hero,
	.bbu-ft .ft-notice-screen,
	.bbu-ft .ft-inputs,
	.bbu-ft .ft-actions,
	.bbu-ft .ft-cta,
	.bbu-ft .ft-content,
	.bbu-ft .ft-faq,
	.bbu-ft .ft-sources,
	.bbu-ft .ft-related,
	.bbu-ft .ft-empty,
	.bbu-ft .ft-noprint,
	.bbu-ft .ft-privacy,
	.bbu-ft .ft-photo,
	.bbu-ft .ft-card-photo {
		display: none !important;
	}

	.bbu-ft .ft-bench {
		background: none;
		padding: 0;
	}

	.bbu-ft .wrap {
		width: 100%;
	}

	.bbu-ft .ft-panel {
		display: block;
	}

	.bbu-ft .ft-output {
		border: 0;
		padding: 0;
	}

	.bbu-ft .ft-output > h2 {
		display: none;
	}

	.bbu-ft .ft-print-head {
		display: block;
		border-bottom: 2px solid #000;
		margin-bottom: 12pt;
		padding-bottom: 6pt;
	}

	.bbu-ft .ft-print-head h2 {
		font-size: 18pt;
		margin: 0 0 2pt;
	}

	.bbu-ft .ft-print-head p {
		font-size: 9.5pt;
		margin: 0;
		max-width: none;
	}

	.bbu-ft .ft-print-foot {
		display: block !important;
		margin-top: 12pt;
		padding-top: 6pt;
		border-top: 1px solid #000;
		font-size: 9pt;
	}

	.bbu-ft .ft-tablewrap {
		overflow: visible;
		border: 0;
	}

	.bbu-ft .ft-table {
		min-width: 0;
		font-size: 10pt;
	}

	.bbu-ft .ft-table th,
	.bbu-ft .ft-table td {
		border: 1px solid #555;
		padding: 4pt 6pt;
	}

	.bbu-ft .ft-table thead th {
		background: none;
	}

	.bbu-ft .ft-sheet h3 {
		font-size: 13pt;
		margin: 10pt 0 4pt;
		break-after: avoid;
	}

	.bbu-ft .ft-sheet p,
	.bbu-ft .ft-sheet li {
		font-size: 10.5pt;
	}

	.bbu-ft .ft-quote,
	.bbu-ft .ft-callout,
	.bbu-ft .ft-stat {
		background: none;
		border: 1px solid #555;
		break-inside: avoid;
	}

	.bbu-ft .ft-ticks input {
		appearance: none;
		-webkit-appearance: none;
		width: 12pt;
		height: 12pt;
		border: 1px solid #000;
	}

	.bbu-ft .ft-ticks input:checked {
		background: #000;
	}

	.bbu-ft .ft-log {
		max-height: none;
		overflow: visible;
	}

	.bbu-ft .ft-page-break {
		break-before: page;
	}

	.bbu-ft a {
		color: #000;
		text-decoration: none;
	}
}

.ft-print-foot {
	display: none;
}

/*
 * Tool pages print as the result only, whichever way printing starts (the tool's
 * Print button, the browser menu, Ctrl+P or a headless PDF): the native header,
 * footer and anything else outside the page wrapper are left out. Kept separate
 * from the body.ft-printing rule above, so a browser without :has() still applies
 * that one when the Print button is used. Free-tool directories and every other
 * page print as before.
 */
@media print {
	body:has(.bbu-ft .ft-panel[data-bbu-tool]) > *:not(.hp-page),
	body:has(.bbu-ft .ft-panel[data-bbu-tool]) .site-header,
	body:has(.bbu-ft .ft-panel[data-bbu-tool]) .footer,
	body:has(.bbu-ft .ft-panel[data-bbu-tool]) .skip-link,
	body:has(.bbu-ft .ft-panel[data-bbu-tool]) #wpadminbar {
		display: none !important;
	}

	body:has(.bbu-ft .ft-panel[data-bbu-tool]) .hp-page,
	body:has(.bbu-ft .ft-panel[data-bbu-tool]) #main {
		margin: 0;
		padding: 0;
		background: none;
	}
}

/* ---------------------------------------------- audience doors and the app invitation (SST-923, SST-928) */

.ft-doors {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}

.ft-door a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 30px 30px;
	border: 1px solid var(--ft-line);
	border-radius: var(--ft-radius);
	background: #fff;
	text-decoration: none;
	color: var(--ft-text);
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.ft-door a:hover {
	border-color: var(--ft-blue);
	box-shadow: 0 16px 34px rgba(24, 53, 76, .10);
}

.ft-door .ft-card-for {
	font-size: 14px;
	color: var(--ft-slate);
	margin: 0 0 8px;
}

.ft-door h3 {
	font-size: 26px;
	margin: 0 0 10px;
}

.ft-door p {
	margin: 0 0 16px;
}

.ft-door .ft-card-go {
	margin-top: auto;
	color: var(--ft-ink);
	font-size: 17px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ft-app {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px 36px;
	align-items: center;
	margin-block: 40px 8px;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--ft-line);
	border-left: 6px solid var(--ft-cta);
	border-radius: var(--ft-radius);
	scroll-margin-top: 24px;
}

.ft-app h2 {
	font-size: 26px;
	margin: 0 0 6px;
}

.ft-app p {
	margin: 0;
}

.ft-app-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 720px) {
	.ft-app {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 22px;
	}

	.ft-app-links .button {
		flex: 1 1 100%;
		text-align: center;
	}
}

@media print {
	.bbu-ft .ft-app,
	.bbu-ft .ft-doors {
		display: none !important;
	}
}

/* ------------------------------------------- SST-783, owner sheet of October 23, 2026 (Free Tools) */

/* The free tools front page: the wording is centred, each door opens with a photograph and one button leads to the Spanish tools. */
.bbu-ft[data-bbu-free-tool=hub] .ft-hero,
.bbu-ft[data-bbu-free-tool=hub] .ft-group > header,
.bbu-ft[data-bbu-free-tool=hub] .ft-door a,
.bbu-ft[data-bbu-free-tool=hub] .ft-app > div:first-child,
.bbu-ft[data-bbu-free-tool=hub] .ft-prose,
.bbu-ft[data-bbu-free-tool=hub] .ft-faq > h2 {
	text-align: center;
}

.bbu-ft[data-bbu-free-tool=hub] .ft-hero h1,
.bbu-ft[data-bbu-free-tool=hub] .ft-lede,
.bbu-ft[data-bbu-free-tool=hub] .ft-group > header,
.bbu-ft[data-bbu-free-tool=hub] .ft-content .ft-prose,
.bbu-ft[data-bbu-free-tool=hub] .ft-faq .faq-list {
	margin-inline: auto;
}

.bbu-ft[data-bbu-free-tool=hub] .ft-promise {
	justify-content: center;
}

.ft-hero-actions {
	margin: 24px 0 0;
}

.bbu-ft[data-bbu-free-tool=hub] .ft-hero-actions {
	max-width: none;
	text-align: center;
}

.bbu-ft[data-bbu-free-tool=hub] .ft-doors {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	max-width: 940px;
	margin-inline: auto;
}

.ft-door a {
	overflow: hidden;
}

.ft-door-photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	margin: -28px -30px 22px;
	background: var(--ft-cloud);
}

.ft-door-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 240ms ease-out;
}

.ft-door a:hover .ft-door-photo img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.ft-door a:hover .ft-door-photo img {
		transform: none;
	}
}

/* First Weeks Home Planner: the planner's wording is centred (the tables and the tick-box column keep their own alignment). */
.bbu-ft[data-bbu-free-tool=first-weeks-planner] .ft-sheet {
	text-align: center;
}

.bbu-ft[data-bbu-free-tool=first-weeks-planner] .ft-sheet ul:not(.ft-ticks),
.bbu-ft[data-bbu-free-tool=first-weeks-planner] .ft-sheet ol {
	list-style: none;
	padding-left: 0;
}

/* The safe sleep checklist stays one tidy column (boxes aligned), and the column is centred. */
.bbu-ft[data-bbu-free-tool=first-weeks-planner] .ft-sheet .ft-ticks {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	text-align: left;
}

.bbu-ft[data-bbu-free-tool=first-weeks-planner] .ft-sheet .ft-tablewrap {
	text-align: left;
}

/* Who to call: a name, a phone number and a website link, filled in on the page. The boxes print as what was typed, or as an empty line. */
.ft-contact {
	margin: 0 0 18px;
}

.ft-contact-name {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--ft-ink);
	text-align: center;
}

.ft-contact .ft-field {
	text-align: left;
}

/* Pumping schedule: the time window, the tick, the amount and the notes are filled in on the page. */
.ft-window {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
}

.bbu-ft .ft-table:has(.ft-window) {
	min-width: 700px;
}

.bbu-ft .ft-cell-input {
	min-height: 40px;
	padding: 6px 10px;
	font-size: 16px;
}

.bbu-ft .ft-window .ft-cell-input {
	width: 7.6em;
	min-width: 0;
	padding-inline: 8px;
}

.bbu-ft .ft-cell-input[type=text] {
	min-width: 7em;
}

.bbu-ft .ft-cell-input[type=checkbox] {
	min-height: 0;
	margin: 0;
}

@media print {
	.bbu-ft .ft-fill input,
	.bbu-ft .ft-cell-input[type=text],
	.bbu-ft .ft-cell-input[type=time] {
		border: 0;
		border-bottom: 1px solid #000;
		border-radius: 0;
		background: none;
		padding: 2pt 0;
		min-height: 18pt;
		font-size: 10.5pt;
	}

	.bbu-ft .ft-fill input::placeholder {
		color: transparent;
	}

	.bbu-ft .ft-cell-input[type=checkbox] {
		appearance: none;
		-webkit-appearance: none;
		width: 12pt;
		height: 12pt;
		border: 1px solid #000;
		border-radius: 0;
	}

	.bbu-ft .ft-cell-input[type=checkbox]:checked {
		background: #000;
	}

	.bbu-ft .ft-window .ft-cell-input {
		min-width: 0;
	}

	.bbu-ft .ft-hero-actions {
		display: none;
	}
}