/*
 * Compare packages — the "Packages & Pricing" design.
 *
 * Every selector is doubled (.bdy.bdy) so a theme's own resets lose on
 * specificity without needing !important. Package identity is one custom
 * property, --bdy-pkg, set from the database colour on each card, chip,
 * column and cell, so the tiers stay distinguishable everywhere they appear.
 *
 * The specification is two horizontal scrollers — a sticky column header and
 * the rows beneath it — because a single scroller cannot be sticky vertically
 * and scrollable horizontally at the same time. compare.js keeps them in step.
 */

.bdy.bdy.bdy-cmp {
	--bdy-ink: #10161D;
	--bdy-ink-2: #4A5562;
	--bdy-ink-3: #57616C;
	--bdy-ink-4: #6B7681;
	--bdy-line: #EAEDF1;
	--bdy-line-2: #D6DDE4;
	--bdy-line-3: #E5E9ED;
	--bdy-line-4: #CFD6DD;
	--bdy-rule: #DFE5EA;
	--bdy-hair: #F1F4F7;
	--bdy-paper: #FFFFFF;
	--bdy-wash: #F4F6F8;
	--bdy-wash-2: #F7F9FA;
	--bdy-wash-3: #F5F7F9;
	--bdy-stripe: #FAFBFC;
	--bdy-stripe-2: #EDF1F5;
	--bdy-deep: #0B0F14;
	--bdy-body-ink: #3A4450;
	--bdy-cell-ink: #232C36;
	--bdy-muted: #5C6672;
	--bdy-accent: #EA580C;
	--bdy-accent-dark: #C2410C;
	--bdy-accent-soft: #FFEDE3;
	--bdy-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bdy-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bdy-labelw: 150px;
	--bdy-colw: 118px;
	--bdy-max: 1300px;
	--bdy-pad: clamp(16px, 4vw, 24px);
	--bdy-cols: 4;

	background: var(--bdy-paper);
	color: var(--bdy-ink);
	font-family: var(--bdy-body);
	text-underline-offset: 2px;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding-bottom: 0;
}

/*
 * Two tones derived from the one colour stored on the package.
 *
 * The stored values run bright — a signal orange, a signal green — and laid on
 * as-is behind white text they are both garish beside this muted page and short
 * of contrast. So every solid use mixes toward the page ink and every tint
 * mixes toward paper, which lands close to the deep/pale pairs the design was
 * drawn with while still coming from the database.
 */
/* The root carries the baseline package's colour, so the tint on the baseline
 * column needs no per-cell declaration. */
.bdy.bdy.bdy-cmp,
.bdy.bdy .bdy-cmp__card,
.bdy.bdy .bdy-cmp__togglechip,
.bdy.bdy .bdy-cmp__colcell,
.bdy.bdy .bdy-cmp__rail-head {
	--bdy-solid: color-mix(in srgb, var(--bdy-pkg) 58%, #10161D);
	--bdy-soft: color-mix(in srgb, var(--bdy-pkg) 13%, #FFFFFF);
}

/* Older engines without color-mix fall back to the stored colour itself. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.bdy.bdy.bdy-cmp,
	.bdy.bdy .bdy-cmp__card,
	.bdy.bdy .bdy-cmp__togglechip,
	.bdy.bdy .bdy-cmp__colcell,
	.bdy.bdy .bdy-cmp__rail-head {
		--bdy-solid: var(--bdy-pkg);
		--bdy-soft: var(--bdy-wash);
	}
}

.bdy.bdy.bdy-cmp ::selection {
	background: #FFE4CC;
}

.bdy.bdy .bdy-cmp__wrap {
	margin: 0 auto;
	max-width: var(--bdy-max);
	padding-left: var(--bdy-pad);
	padding-right: var(--bdy-pad);
}

.bdy.bdy .bdy-cmp__kicker {
	align-items: center;
	color: #414C58;
	display: flex;
	font-size: 9.5px;
	font-weight: 800;
	gap: 8px;
	letter-spacing: 1.6px;
	margin: 0;
	text-transform: uppercase;
}

.bdy.bdy .bdy-cmp__kicker.is-quiet {
	color: var(--bdy-ink-3);
}

.bdy.bdy .bdy-cmp__kicker.is-onpanel {
	color: rgba(255, 255, 255, 0.8);
}

.bdy.bdy .bdy-cmp__flash {
	border-radius: 10px;
	font-size: 14px;
	margin: 20px 0 0;
	padding: 13px 16px;
}

.bdy.bdy .bdy-cmp__flash.is-ok {
	background: #E7F7EF;
	border: 1px solid #B6E5CD;
	color: #14603D;
}

.bdy.bdy .bdy-cmp__flash.is-bad {
	background: #FDECEC;
	border: 1px solid #F3C3C3;
	color: #8D2020;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.bdy.bdy .bdy-cmp__hero {
	padding-top: clamp(28px, 5vw, 44px);
}

.bdy.bdy .bdy-cmp__segs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}

.bdy.bdy .bdy-cmp__seg {
	background: var(--bdy-wash-3);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--bdy-ink-2);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
	padding: 8px 15px;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.bdy.bdy .bdy-cmp__seg:hover,
.bdy.bdy .bdy-cmp__seg:focus-visible {
	background: var(--bdy-accent-soft);
	color: var(--bdy-accent-dark);
	text-decoration: none;
}

.bdy.bdy .bdy-cmp__seg[aria-current="page"],
.bdy.bdy .bdy-cmp__seg[aria-current="page"]:hover {
	background: var(--bdy-ink);
	border-color: var(--bdy-ink);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__hero-row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: space-between;
}

.bdy.bdy .bdy-cmp__hero-copy {
	max-width: 660px;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__h1 {
	color: var(--bdy-ink);
	font-family: var(--bdy-display);
	font-size: clamp(30px, 4.6vw, 50px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.04;
	margin: 0;
}

/*
 * Themes routinely restyle em, and a serif fallback here reads as a different
 * typeface mid-headline, so the display face is restated rather than inherited.
 */
.bdy.bdy .bdy-cmp__h1 em {
	border-bottom: 3px solid #E8D5C4;
	color: #A35A2A;
	font-family: var(--bdy-display);
	font-style: normal;
	font-weight: 800;
	padding-bottom: 2px;
}

.bdy.bdy .bdy-cmp__lede {
	color: var(--bdy-ink-2);
	font-size: 16.5px;
	line-height: 1.6;
	margin: 14px 0 0;
	max-width: 560px;
}

.bdy.bdy .bdy-cmp__citycard {
	align-items: center;
	background: #F5F7F9;
	border: 1px solid #E2E7EC;
	border-radius: 14px;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	gap: 11px;
	padding: 12px 16px;
	transition: background-color 0.18s ease;
}

.bdy.bdy .bdy-cmp__citycard:hover {
	background: #EEF2F6;
}

.bdy.bdy .bdy-cmp__cityicon {
	align-items: center;
	background: var(--bdy-ink);
	border-radius: 11px;
	color: #FB923C;
	display: inline-flex;
	flex: none;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.bdy.bdy .bdy-cmp__citytext {
	display: block;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__citylabel {
	color: var(--bdy-ink-2);
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-cmp__citycard select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2310161D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 0 center/11px 8px;
	border: 0;
	border-radius: 0;
	color: var(--bdy-ink);
	cursor: pointer;
	font-family: var(--bdy-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin-top: 2px;
	padding: 0 20px 0 0;
}

.bdy.bdy .bdy-cmp__citycard select:focus-visible {
	outline: 2px solid var(--bdy-accent);
	outline-offset: 3px;
}

/* ── Package cards ─────────────────────────────────────────────────────── */

.bdy.bdy .bdy-cmp__cardscroll {
	margin-top: 32px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.bdy.bdy .bdy-cmp__cards {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(var(--bdy-n), minmax(228px, 1fr));
	min-width: calc(var(--bdy-n) * 228px + (var(--bdy-n) - 1) * 14px);
}

.bdy.bdy .bdy-cmp__card {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-3);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bdy.bdy .bdy-cmp__card:hover {
	box-shadow: 0 14px 30px -22px rgba(16, 22, 29, 0.55);
	transform: translateY(-2px);
}

.bdy.bdy .bdy-cmp__card.is-selected {
	border-color: var(--bdy-solid);
	box-shadow: 0 0 0 0.5px var(--bdy-solid), 0 10px 26px rgba(11, 15, 20, 0.12);
}

.bdy.bdy .bdy-cmp__cap {
	align-items: center;
	background: var(--bdy-soft);
	color: var(--bdy-solid);
	display: flex;
	font-size: 9.5px;
	font-weight: 800;
	height: 26px;
	justify-content: center;
	letter-spacing: 1.6px;
	margin: 0;
	text-transform: uppercase;
}

.bdy.bdy .bdy-cmp__card.is-selected .bdy-cmp__cap {
	background: color-mix(in srgb, var(--bdy-solid) 82%, #000000);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding-bottom: 20px;
}

/*
 * The head panel is solid package colour, so four cards side by side read as
 * four tiers rather than four copies of the same card.
 */
.bdy.bdy .bdy-cmp__panel {
	background: var(--bdy-solid);
	color: #FFFFFF;
	padding: 20px;
}

.bdy.bdy .bdy-cmp__panel-top {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.bdy.bdy .bdy-cmp__pkgname {
	color: #FFFFFF;
	font-family: var(--bdy-display);
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.025em;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__step {
	color: rgba(255, 255, 255, 0.86);
	flex: none;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
}

.bdy.bdy .bdy-cmp__kind {
	color: rgba(255, 255, 255, 0.86);
	font-size: 11.5px;
	margin: 3px 0 0;
	min-height: 1.45em;
}

.bdy.bdy .bdy-cmp__price {
	align-items: baseline;
	display: flex;
	gap: 5px;
	margin: 14px 0 0;
}

.bdy.bdy .bdy-cmp__cur {
	color: rgba(255, 255, 255, 0.86);
	flex: none;
	font-family: var(--bdy-display);
	font-size: 16px;
	font-weight: 700;
}

.bdy.bdy .bdy-cmp__amt {
	color: #FFFFFF;
	flex: none;
	font-family: var(--bdy-display);
	font-size: 42px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
}

.bdy.bdy .bdy-cmp__per {
	color: rgba(255, 255, 255, 0.86);
	flex: none;
	font-size: 12.5px;
	font-weight: 600;
}

.bdy.bdy .bdy-cmp__delta {
	color: rgba(255, 255, 255, 0.86);
	font-size: 11.5px;
	margin: 8px 0 0;
}

.bdy.bdy .bdy-cmp__peek {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 16px 20px 0;
}

.bdy.bdy .bdy-cmp__peek-head {
	border-bottom: 1px solid var(--bdy-line);
	color: #414C58;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	margin: 0;
	padding-bottom: 11px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-cmp__peek-row {
	display: flex;
	gap: 10px;
}

.bdy.bdy .bdy-cmp__chip {
	align-items: center;
	background: var(--bdy-wash);
	border-radius: 5px;
	color: #5C6672;
	display: inline-flex;
	flex: none;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.bdy.bdy .bdy-cmp__chip.is-sm {
	border-radius: 5px;
	height: 24px;
	width: 24px;
}

.bdy.bdy .bdy-cmp__chip.is-warm {
	background: var(--bdy-accent-soft);
	color: var(--bdy-accent-dark);
}

.bdy.bdy .bdy-cmp__chip.is-cool {
	background: #EEF2F6;
	color: #374151;
}

.bdy.bdy .bdy-cmp__chip.is-lg {
	background: var(--bdy-accent-soft);
	border-radius: 7px;
	color: var(--bdy-accent-dark);
	height: 28px;
	width: 28px;
}

.bdy.bdy .bdy-cmp__peek-text {
	display: block;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__peek-label {
	color: #5C6672;
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-cmp__peek-value {
	color: var(--bdy-body-ink);
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	margin-top: 3px;
	overflow-wrap: anywhere;
}

/* The allowance carries the money, so it is set apart from the description
 * rather than running on from it. */
.bdy.bdy .bdy-cmp__peek-note {
	color: var(--bdy-solid);
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	margin-top: 2px;
}

.bdy.bdy .bdy-cmp__card-foot {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: auto;
	padding: 22px 20px 0;
}

.bdy.bdy .bdy-cmp__select {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 6px;
	color: var(--bdy-solid);
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
	padding: 12px;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	width: 100%;
}

.bdy.bdy .bdy-cmp__select:hover {
	background: var(--bdy-soft);
	border-color: var(--bdy-solid);
}

.bdy.bdy .bdy-cmp__card.is-selected .bdy-cmp__select {
	background: var(--bdy-solid);
	border-color: var(--bdy-solid);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__select:focus-visible {
	outline: 2px solid var(--bdy-accent);
	outline-offset: 2px;
}

.bdy.bdy .bdy-cmp__jump {
	color: var(--bdy-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.bdy.bdy .bdy-cmp__jump:hover {
	color: var(--bdy-accent-dark);
}

/* ── Specification ─────────────────────────────────────────────────────── */

.bdy.bdy .bdy-cmp__spec {
	padding-bottom: clamp(40px, 6vw, 72px);
	padding-top: clamp(32px, 5vw, 44px);
}

.bdy.bdy.bdy-cmp--tiers {
	padding-bottom: clamp(32px, 5vw, 56px);
}

/* Standing on its own, the specification keeps its own heading company. */
.bdy.bdy.bdy-cmp--spec .bdy-cmp__spec {
	padding-top: 0;
}

.bdy.bdy .bdy-cmp__jump[hidden] {
	display: none;
}

.bdy.bdy .bdy-cmp__spec-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 22px;
}

.bdy.bdy .bdy-cmp__spec-head .bdy-cmp__spec-meta {
	flex: 1 1 100%;
	order: 3;
}

.bdy.bdy .bdy-cmp__h2 {
	color: var(--bdy-ink);
	font-family: var(--bdy-display);
	font-size: clamp(23px, 3.2vw, 32px);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0;
}

.bdy.bdy .bdy-cmp__citycard--inline {
	margin-left: auto;
	order: 2;
}

.bdy.bdy .bdy-cmp__spec-meta {
	color: var(--bdy-ink-3);
	font-size: 13px;
	margin: 0;
}

/* Comparison set */

.bdy.bdy .bdy-cmp__setbar {
	border: 1px solid var(--bdy-line-2);
	border-radius: 6px;
	margin-bottom: 18px;
	overflow: hidden;
}

.bdy.bdy .bdy-cmp__setbar-head {
	align-items: center;
	background: var(--bdy-wash);
	border-bottom: 1px solid var(--bdy-line-2);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 16px;
}

.bdy.bdy .bdy-cmp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.bdy.bdy .bdy-cmp__togglechip {
	align-items: center;
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 999px;
	color: #414C58;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--bdy-body);
	font-size: 11.5px;
	font-weight: 700;
	gap: 6px;
	padding: 6px 11px;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.bdy.bdy .bdy-cmp__togglemark {
	flex: none;
	font-size: 12px;
	line-height: 1;
}

.bdy.bdy .bdy-cmp__togglechip:hover {
	border-color: var(--bdy-solid);
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-cmp__togglechip[aria-pressed="true"] {
	background: var(--bdy-solid);
	border-color: var(--bdy-solid);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__togglechip:focus-visible {
	outline: 2px solid var(--bdy-accent);
	outline-offset: 2px;
}













/* Panes */

.bdy.bdy .bdy-cmp__panes {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.bdy.bdy .bdy-cmp__rail {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-3);
	border-radius: 6px;
	display: flex;
	flex: 0 1 240px;
	flex-direction: column;
	max-height: calc(100vh - var(--bdy-stickytop, 0px) - 40px);
	overflow-y: auto;
	position: sticky;
	/* compare.js measures whatever the theme pins to the top of the viewport. */
	top: calc(var(--bdy-stickytop, 0px) + 20px);
}

.bdy.bdy .bdy-cmp__rail-head {
	background: var(--bdy-solid);
	color: #FFFFFF;
	padding: 16px;
}

.bdy.bdy .bdy-cmp__rail-name {
	color: #FFFFFF;
	font-family: var(--bdy-display);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 3px 0 0;
}

.bdy.bdy .bdy-cmp__rail-sub {
	color: rgba(255, 255, 255, 0.86);
	font-size: 11.5px;
	margin: 1px 0 0;
}

.bdy.bdy .bdy-cmp__rail-actions {
	border-bottom: 1px solid #EDF0F3;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 12px;
}

.bdy.bdy .bdy-cmp__railcta {
	background: var(--bdy-solid);
	border: 0;
	border-radius: 5px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 12.5px;
	font-weight: 700;
	padding: 11px;
	transition: filter 0.18s ease;
	width: 100%;
}

.bdy.bdy .bdy-cmp__railcta:hover {
	filter: brightness(1.1);
}

.bdy.bdy .bdy-cmp__railcta:focus-visible,
.bdy.bdy .bdy-cmp__diffbtn:focus-visible {
	outline: 2px solid var(--bdy-ink);
	outline-offset: 2px;
}

.bdy.bdy .bdy-cmp__diffbtn {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 5px;
	color: var(--bdy-cell-ink);
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 12px;
	font-weight: 700;
	padding: 10px;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
	width: 100%;
}

.bdy.bdy .bdy-cmp__diffbtn:hover {
	background: var(--bdy-wash);
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-cmp__diffbtn[aria-pressed="true"] {
	background: var(--bdy-deep);
	border-color: var(--bdy-deep);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__rail-hint {
	color: var(--bdy-ink-3);
	font-size: 11px;
	line-height: 1.5;
	margin: 0;
}

.bdy.bdy .bdy-cmp__rail-hint [data-bdy-diffcount] {
	color: var(--bdy-ink);
	font-weight: 800;
}

.bdy.bdy .bdy-cmp__index {
	padding: 12px 8px;
}

.bdy.bdy .bdy-cmp__index .bdy-cmp__kicker {
	padding: 0 10px 10px;
}

.bdy.bdy .bdy-cmp__nav {
	align-items: center;
	border-radius: 6px;
	display: flex;
	gap: 9px;
	padding: 7px 10px;
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.bdy.bdy .bdy-cmp__nav:hover {
	background: var(--bdy-wash);
	text-decoration: none;
}

.bdy.bdy .bdy-cmp__nav.is-current {
	background: var(--bdy-accent-soft);
	color: var(--bdy-accent-dark);
}

.bdy.bdy .bdy-cmp__nav.is-current .bdy-cmp__nav-label {
	color: var(--bdy-accent-dark);
}

.bdy.bdy .bdy-cmp__nav-num {
	color: var(--bdy-ink-3);
	flex: none;
	font-family: var(--bdy-display);
	font-size: 10.5px;
	font-weight: 800;
	width: 16px;
}

.bdy.bdy .bdy-cmp__nav-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__nav-label {
	color: var(--bdy-cell-ink);
	display: block;
	font-size: 12.5px;
	font-weight: 600;
}

.bdy.bdy .bdy-cmp__nav-track {
	background: #EDF0F3;
	border-radius: 2px;
	display: block;
	height: 3px;
	margin-top: 5px;
	overflow: hidden;
}

.bdy.bdy .bdy-cmp__nav-bar {
	background: var(--bdy-accent);
	border-radius: 2px;
	display: block;
	height: 100%;
	transition: width 0.25s ease;
}

.bdy.bdy .bdy-cmp__nav-count {
	color: var(--bdy-ink-3);
	flex: none;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The grid */

.bdy.bdy .bdy-cmp__grid {
	flex: 1 1 620px;
	min-width: 0;
}

/* Opaque, not translucent: rows passing underneath otherwise smear through
 * and read as a second header. */
.bdy.bdy .bdy-cmp__colhead {
	background: var(--bdy-paper);
	border-bottom: 1px solid #DFE5EA;
	overflow-x: auto;
	position: sticky;
	scrollbar-width: none;
	top: var(--bdy-stickytop, 0px);
	z-index: 10;
}

.bdy.bdy .bdy-cmp__colhead::-webkit-scrollbar {
	display: none;
}

.bdy.bdy .bdy-cmp__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow-x: auto;
	padding-top: 14px;
	scrollbar-width: thin;
}

/*
 * One row shape for the header and every specification row, so the columns
 * line up across two independently scrolled panes.
 */
.bdy.bdy .bdy-cmp__row {
	display: grid;
	grid-template-columns: minmax(var(--bdy-labelw), 1.05fr) repeat(var(--bdy-cols), minmax(108px, 1fr));
	min-width: calc(var(--bdy-labelw) + var(--bdy-cols) * var(--bdy-colw));
}

.bdy.bdy .bdy-cmp__row--head {
	align-items: stretch;
	padding: 10px 0 8px;
}

.bdy.bdy .bdy-cmp__rowlabel-text {
	display: block;
	min-width: 0;
}

/* A single long word ("Waterproofing") is wider than the label column on a
 * tablet, so it must be allowed to break rather than spill. */
.bdy.bdy .bdy-cmp__rowlabel-name {
	display: block;
	overflow-wrap: anywhere;
}

.bdy.bdy .bdy-cmp__rowlabel-sub {
	overflow-wrap: anywhere;
}

.bdy.bdy .bdy-cmp__rowlabel-sub {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	margin-top: 2px;
}

.bdy.bdy .bdy-cmp__rowlabel {
	align-items: center;
	background: var(--bdy-wash-3);
	box-shadow: 3px 0 6px -4px rgba(13, 20, 36, 0.25);
	left: 0;
	position: sticky;
	z-index: 1;
	border-right: 2px solid var(--bdy-line-2);
	color: var(--bdy-cell-ink);
	display: flex;
	font-size: 12.5px;
	font-weight: 700;
	gap: 10px;
	line-height: 1.3;
	min-width: 0;
	padding: 12px 12px 12px 18px;
}

.bdy.bdy .bdy-cmp__rowlabel--head {
	align-items: flex-end;
	background: var(--bdy-paper);
	color: #414C58;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	padding-bottom: 9px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-cmp__colcell {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0 4px;
}

.bdy.bdy .bdy-cmp__colcell + .bdy-cmp__colcell {
	border-left: 1px solid var(--bdy-rule);
}

.bdy.bdy .bdy-cmp__colcell[hidden] {
	display: none;
}

.bdy.bdy .bdy-cmp__colbtn {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-3);
	border-radius: 6px;
	color: var(--bdy-solid);
	cursor: pointer;
	display: block;
	flex: 1 1 auto;
	font-family: var(--bdy-body);
	padding: 11px 8px 9px;
	text-align: center;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	width: 100%;
}

.bdy.bdy .bdy-cmp__colbtn:hover {
	border-color: var(--bdy-solid);
}

.bdy.bdy .bdy-cmp__colbtn.is-selected {
	background: var(--bdy-solid);
	border-color: var(--bdy-solid);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__colbtn:focus-visible {
	outline: 2px solid var(--bdy-accent);
	outline-offset: 2px;
}

.bdy.bdy .bdy-cmp__colname {
	display: block;
	font-family: var(--bdy-display);
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdy.bdy .bdy-cmp__colrate {
	display: block;
	font-family: var(--bdy-display);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-top: 3px;
}

.bdy.bdy .bdy-cmp__colpick {
	background: var(--bdy-wash);
	border-radius: 4px;
	color: var(--bdy-muted);
	display: block;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.3px;
	margin-top: 8px;
	overflow: hidden;
	padding: 5px 0;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.bdy.bdy .bdy-cmp__colbtn.is-selected .bdy-cmp__colpick {
	background: #FFFFFF;
	color: var(--bdy-deep);
}

.bdy.bdy .bdy-cmp__colremove {
	background: none;
	border: 0;
	color: var(--bdy-muted);
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 10.5px;
	font-weight: 600;
	margin-top: 4px;
	padding: 2px;
	text-decoration: underline;
	width: 100%;
}

.bdy.bdy .bdy-cmp__colremove:hover {
	color: var(--bdy-accent-dark);
}

/* Groups */

.bdy.bdy .bdy-cmp__group {
	border: 1px solid var(--bdy-rule);
	border-radius: 6px;
	overflow: visible;
	min-width: calc(var(--bdy-labelw) + var(--bdy-cols) * var(--bdy-colw));
	scroll-margin-top: calc(var(--bdy-stickytop, 0px) + var(--bdy-headh, 140px) + 14px);
}

.bdy.bdy .bdy-cmp__group[hidden] {
	display: none;
}

.bdy.bdy .bdy-cmp__group-head {
	background: var(--bdy-deep);
	border-radius: 5px 5px 0 0;
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	list-style: none;
	padding: 13px 0;
	transition: filter 0.16s ease;
}

/*
 * The header spans the whole grid, most of which is off-screen once the values
 * are scrolled sideways. Its contents ride the left edge so the section is
 * still named wherever the reader has scrolled to.
 */
.bdy.bdy .bdy-cmp__group-pin {
	align-items: center;
	display: flex;
	gap: 12px;
	left: 0;
	max-width: 100%;
	padding: 0 18px;
	position: sticky;
	width: max-content;
}

.bdy.bdy .bdy-cmp__group-head::-webkit-details-marker {
	display: none;
}

.bdy.bdy .bdy-cmp__group-head:hover {
	filter: brightness(1.35);
}

.bdy.bdy .bdy-cmp__group-head:focus-visible {
	outline: 2px solid #FB923C;
	outline-offset: -3px;
}

.bdy.bdy .bdy-cmp__group-head .bdy-cmp__chip.is-lg {
	background: rgba(255, 255, 255, 0.13);
	color: #FFFFFF;
}

.bdy.bdy .bdy-cmp__group-name {
	color: #FFFFFF;
	font-family: var(--bdy-display);
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: -0.02em;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__group-count {
	background: transparent;
	border: 1px solid #2E3740;
	border-radius: 4px;
	color: #C4CCD4;
	flex: none;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	padding: 3px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.bdy.bdy .bdy-cmp__chev {
	border-bottom: 2.2px solid currentColor;
	border-right: 2.2px solid currentColor;
	color: #AFB8C2;
	flex: none;
	height: 8px;
	margin-left: auto;
	margin-right: 4px;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	width: 8px;
}

.bdy.bdy .bdy-cmp__group[open] .bdy-cmp__chev {
	transform: rotate(-135deg);
}

.bdy.bdy .bdy-cmp__group:not([open]) .bdy-cmp__group-head {
	border-radius: 5px;
}

.bdy.bdy .bdy-cmp__group-rows > .bdy-cmp__row:last-child {
	border-radius: 0 0 5px 5px;
}

.bdy.bdy .bdy-cmp__group-rows > .bdy-cmp__row:last-child .bdy-cmp__rowlabel {
	border-bottom-left-radius: 5px;
}

.bdy.bdy .bdy-cmp__group-rows .bdy-cmp__row {
	background: var(--bdy-paper);
	border-top: 1px solid var(--bdy-rule);
	min-width: 0;
}

/*
 * Alternating rows carry the eye across a 4-column row of prose better than
 * any border does. The label column takes a stronger pair of the same two
 * tones so it reads as a fixed spine beside the values.
 */
.bdy.bdy .bdy-cmp__group-rows .bdy-cmp__row.is-odd {
	background: var(--bdy-stripe);
}

.bdy.bdy .bdy-cmp__group-rows .bdy-cmp__row.is-odd .bdy-cmp__rowlabel {
	background: var(--bdy-stripe-2);
}

.bdy.bdy .bdy-cmp__group-rows .bdy-cmp__row[hidden] {
	display: none;
}

/*
 * Every column carries its own value for every row, including where the
 * packages happen to agree. A shared value said once across the columns reads
 * as a gap in the column you were following, and a specification sheet is read
 * down a column as often as it is read across a row.
 */

.bdy.bdy .bdy-cmp__cell {
	align-items: center;
	color: var(--bdy-cell-ink);
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: 700;
	justify-content: center;
	line-height: 1.35;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 13px 12px;
	text-align: center;
}

.bdy.bdy .bdy-cmp__cell + .bdy-cmp__cell {
	border-left: 1px solid var(--bdy-rule);
}

.bdy.bdy .bdy-cmp__cell-value {
	display: block;
}

/*
 * The price band and qualifiers stored against each item — "Inclusive of all
 * taxes", "up to Rs. 55 per Sft" — read under the value rather than being
 * dropped, which is most of what distinguishes one package from the next.
 */
.bdy.bdy .bdy-cmp__cell-note {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.35;
	margin-top: 2px;
}

.bdy.bdy .bdy-cmp__cell.is-baseline .bdy-cmp__cell-note {
	color: #44505D;
}

.bdy.bdy .bdy-cmp__cell[hidden] {
	display: none;
}

.bdy.bdy .bdy-cmp__cell.is-baseline {
	background: var(--bdy-soft);
	color: var(--bdy-deep);
}


.bdy.bdy .bdy-cmp__cell.is-empty {
	color: var(--bdy-muted);
	font-weight: 600;
}

.bdy.bdy .bdy-cmp__empty {
	border: 1px dashed var(--bdy-line-4);
	border-radius: 6px;
	color: var(--bdy-ink-3);
	font-size: 13.5px;
	margin: 0;
	padding: 34px 16px;
	text-align: center;
}

.bdy.bdy .bdy-cmp__empty[hidden] {
	display: none;
}

/* ── Closing ───────────────────────────────────────────────────────────── */

.bdy.bdy .bdy-cmp__closing {
	background: var(--bdy-wash-2);
	border-top: 1px solid var(--bdy-line);
	padding-bottom: clamp(32px, 5vw, 52px);
	padding-top: clamp(32px, 5vw, 52px);
}

.bdy.bdy .bdy-cmp__closing-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
}

.bdy.bdy .bdy-cmp__closing-title {
	color: var(--bdy-ink);
	font-family: var(--bdy-display);
	font-size: clamp(21px, 3vw, 26px);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 8px 0 0;
	max-width: 22ch;
}

.bdy.bdy .bdy-cmp__closing-note {
	color: var(--bdy-ink-3);
	font-size: 12.5px;
	line-height: 1.6;
	margin: 10px 0 0;
	max-width: 62ch;
}

.bdy.bdy .bdy-cmp__closing-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.bdy.bdy .bdy-cmp__cta {
	background: var(--bdy-accent-dark);
	border: 0;
	border-radius: 11px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 14px;
	font-weight: 700;
	padding: 14px 26px;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.bdy.bdy .bdy-cmp__cta:hover {
	background: var(--bdy-accent);
	filter: none;
	transform: translateY(-1px);
}

.bdy.bdy .bdy-cmp__cta:active {
	transform: translateY(0);
}

.bdy.bdy .bdy-cmp__cta:focus-visible {
	outline: 2px solid var(--bdy-ink);
	outline-offset: 3px;
}

/*
 * The numbers read as text beside the button, not as buttons of their own.
 * Boxed, two of them gave three competing controls where there is one thing
 * to do.
 */
.bdy.bdy .bdy-cmp__callus {
	align-items: center;
	color: var(--bdy-ink-3);
	display: flex;
	flex-wrap: wrap;
	font-size: 13.5px;
	gap: 6px;
	margin: 0;
}

.bdy.bdy .bdy-cmp__callus a {
	color: var(--bdy-ink);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.16s ease;
}

.bdy.bdy .bdy-cmp__callus a:hover {
	color: var(--bdy-accent-dark);
	text-decoration: underline;
}

/* ── Narrow ────────────────────────────────────────────────────────────── */

/*
 * Below 1000px the index rail cannot hold a column beside the grid, so it
 * becomes a full-width band above it and stops being sticky.
 */
@media (max-width: 1000px) {
	.bdy.bdy .bdy-cmp__rail {
		flex: 1 1 100%;
		max-height: none;
		position: static;
	}

	.bdy.bdy .bdy-cmp__index {
		display: grid;
		gap: 2px;
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	}

	.bdy.bdy .bdy-cmp__index .bdy-cmp__kicker {
		grid-column: 1 / -1;
	}

	.bdy.bdy .bdy-cmp__rail-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bdy.bdy .bdy-cmp__railcta,
	.bdy.bdy .bdy-cmp__diffbtn {
		width: auto;
	}

	.bdy.bdy .bdy-cmp__rail-hint {
		flex: 1 1 220px;
	}
}

@media (max-width: 720px) {
	.bdy.bdy.bdy-cmp {
		--bdy-labelw: 150px;
		--bdy-colw: 150px;
	}

	.bdy.bdy .bdy-cmp__rowlabel {
		font-size: 12px;
		padding-left: 12px;
	}

	.bdy.bdy .bdy-cmp__rowlabel .bdy-cmp__chip {
		display: none;
	}

	.bdy.bdy .bdy-cmp__citycard {
		width: 100%;
	}

	.bdy.bdy .bdy-cmp__closing-actions {
		width: 100%;
	}

	.bdy.bdy .bdy-cmp__cta {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bdy.bdy.bdy-cmp * {
		transition: none !important;
	}
}

/* ── The enquiry dialog ─────────────────────────────────────────────────── */

/*
 * A native <dialog>, so the browser handles Escape, the backdrop and focus.
 * It is set in the same two faces as the page it opens over, because a theme
 * styles bare h3 and label elements directly and a dialog inherits nothing
 * useful from the page behind it.
 */
.bdy.bdy .bdy-modal {
	background: transparent;
	border: 0;
	color: var(--bdy-ink);
	font-family: var(--bdy-body);
	margin: auto;
	max-height: 100dvh;
	max-width: 100%;
	overflow: visible;
	padding: 0;
	width: min(680px, 100%);
}

.bdy.bdy .bdy-modal::backdrop {
	background: rgba(11, 15, 20, 0.62);
}

.bdy.bdy .bdy-modal__panel {
	background: var(--bdy-paper);
	border-radius: 10px;
	box-shadow: 0 30px 70px -30px rgba(11, 15, 20, 0.7);
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: clamp(18px, 3vw, 26px);
}

.bdy.bdy .bdy-modal__head {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.bdy.bdy .bdy-modal__title {
	color: var(--bdy-ink);
	font-family: var(--bdy-display);
	font-size: clamp(20px, 3vw, 25px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}

.bdy.bdy .bdy-modal__lede {
	color: var(--bdy-ink-2);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 7px 0 0;
	max-width: 52ch;
}

.bdy.bdy .bdy-modal__close {
	background: var(--bdy-wash);
	border: 1px solid var(--bdy-line-3);
	border-radius: 8px;
	color: var(--bdy-ink-3);
	cursor: pointer;
	flex: none;
	font-family: var(--bdy-body);
	font-size: 18px;
	height: 34px;
	line-height: 1;
	transition: background-color 0.16s ease, color 0.16s ease;
	width: 34px;
}

.bdy.bdy .bdy-modal__close:hover {
	background: var(--bdy-accent-soft);
	color: var(--bdy-accent-dark);
}

.bdy.bdy .bdy-modal__close:focus-visible,
.bdy.bdy .bdy-modal__submit:focus-visible {
	outline: 2px solid var(--bdy-accent-dark);
	outline-offset: 2px;
}

/* The honeypot must be reachable by a bot and invisible to a person. */
.bdy.bdy .bdy-modal__trap {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.bdy.bdy .bdy-modal__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.bdy.bdy .bdy-modal__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.bdy.bdy .bdy-modal__field--wide {
	grid-column: 1 / -1;
}

.bdy.bdy .bdy-modal__label {
	color: #414C58;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-modal__field input,
.bdy.bdy .bdy-modal__field select,
.bdy.bdy .bdy-modal__field textarea {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 6px;
	color: var(--bdy-ink);
	font-family: var(--bdy-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	padding: 11px 12px;
	width: 100%;
}

.bdy.bdy .bdy-modal__field textarea {
	font-weight: 400;
	min-height: 76px;
	resize: vertical;
}

.bdy.bdy .bdy-modal__field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2310161D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 11px 8px;
	padding-right: 32px;
}

.bdy.bdy .bdy-modal__field input:focus,
.bdy.bdy .bdy-modal__field select:focus,
.bdy.bdy .bdy-modal__field textarea:focus {
	border-color: var(--bdy-accent-dark);
	outline: 2px solid var(--bdy-accent-soft);
	outline-offset: 0;
}

/* The unit sits inside the field's border rather than beside it. */
.bdy.bdy .bdy-modal__control {
	align-items: center;
	display: flex;
	gap: 8px;
	position: relative;
}

.bdy.bdy .bdy-modal__control input {
	padding-right: 54px;
}

.bdy.bdy .bdy-modal__suffix {
	color: var(--bdy-ink-3);
	font-size: 12px;
	font-weight: 700;
	pointer-events: none;
	position: absolute;
	right: 12px;
}

.bdy.bdy .bdy-modal__foot {
	align-items: center;
	background: var(--bdy-wash-3);
	border: 1px solid var(--bdy-line-3);
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	padding: 14px 16px;
}

.bdy.bdy .bdy-modal__estimate {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bdy.bdy .bdy-modal__estimate-label {
	color: #414C58;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-modal__estimate-value {
	color: var(--bdy-deep);
	font-family: var(--bdy-display);
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bdy.bdy .bdy-modal__submit {
	background: var(--bdy-accent-dark);
	border: 0;
	border-radius: 8px;
	color: #FFFFFF;
	cursor: pointer;
	flex: none;
	font-family: var(--bdy-body);
	font-size: 14px;
	font-weight: 700;
	padding: 13px 24px;
	transition: background-color 0.18s ease;
}

.bdy.bdy .bdy-modal__submit:hover {
	background: var(--bdy-accent);
}

@media (max-width: 520px) {
	.bdy.bdy .bdy-modal__foot {
		align-items: stretch;
		flex-direction: column;
	}

	.bdy.bdy .bdy-modal__submit {
		width: 100%;
	}
}

/* ── The cost calculator ────────────────────────────────────────────────── */

/*
 * Shares the comparison's root class, and so its tokens, chips, buttons and
 * dialog. Two columns: the controls on the left, the sheet on the right, which
 * stays in view because a figure you cannot see while changing the inputs is
 * not much of a calculator.
 */
.bdy.bdy .bdy-calc {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding-bottom: clamp(40px, 6vw, 72px);
	padding-top: clamp(24px, 4vw, 34px);
}

.bdy.bdy .bdy-calc__inputs {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.bdy.bdy .bdy-calc__sheet {
	display: flex;
	flex: 1 1 360px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	position: sticky;
	top: calc(var(--bdy-stickytop, 0px) + 20px);
}

.bdy.bdy .bdy-calc__panel {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-2);
	border-radius: 6px;
	overflow: hidden;
}

.bdy.bdy .bdy-calc__panel-head {
	background: var(--bdy-wash);
	border-bottom: 1px solid var(--bdy-line-2);
	color: #414C58;
	font-family: var(--bdy-body);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	margin: 0;
	padding: 11px 16px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-calc__panel-body {
	padding: 16px;
}

.bdy.bdy .bdy-calc__hint {
	color: var(--bdy-ink-3);
	font-size: 11.5px;
	line-height: 1.55;
	margin: 12px 0 0;
}

.bdy.bdy .bdy-calc__hint--pad {
	margin: 0;
	padding: 16px;
}

/* Area */

.bdy.bdy .bdy-calc__stepper {
	align-items: center;
	display: flex;
	gap: 12px;
}

.bdy.bdy .bdy-calc__step {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 5px;
	color: var(--bdy-deep);
	cursor: pointer;
	flex: none;
	font-family: var(--bdy-body);
	font-size: 20px;
	font-weight: 700;
	height: 44px;
	line-height: 1;
	transition: background-color 0.16s ease, border-color 0.16s ease;
	width: 44px;
}

.bdy.bdy .bdy-calc__step:hover {
	background: var(--bdy-wash);
	border-color: var(--bdy-ink-4);
}

.bdy.bdy .bdy-calc__step:focus-visible,
.bdy.bdy .bdy-calc__pill:focus-visible,
.bdy.bdy .bdy-calc__pkg:focus-visible {
	outline: 2px solid var(--bdy-accent-dark);
	outline-offset: 2px;
}

.bdy.bdy .bdy-calc__area {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.bdy.bdy .bdy-calc__area-input {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 0;
	border-bottom: 2px dashed var(--bdy-line-2);
	border-radius: 0;
	color: var(--bdy-ink);
	display: block;
	font-family: var(--bdy-display);
	font-size: clamp(28px, 5vw, 34px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.1;
	padding: 0 0 4px;
	text-align: center;
	width: 100%;
}

.bdy.bdy .bdy-calc__area-input::-webkit-outer-spin-button,
.bdy.bdy .bdy-calc__area-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bdy.bdy .bdy-calc__area-input:focus {
	border-bottom-color: var(--bdy-accent-dark);
	outline: none;
}

.bdy.bdy .bdy-calc__area-note {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 11.5px;
	margin-top: 5px;
}

/* Pills */

.bdy.bdy .bdy-calc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}

.bdy.bdy .bdy-calc__panel-body > .bdy-calc__pills:first-child {
	margin-top: 0;
}

.bdy.bdy .bdy-calc__pill {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 6px;
	color: var(--bdy-ink-2);
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 14px;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.bdy.bdy .bdy-calc__pill:hover {
	border-color: var(--bdy-ink-4);
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-calc__pill[aria-pressed="true"] {
	background: var(--bdy-deep);
	border-color: var(--bdy-deep);
	color: #FFFFFF;
}

/* Package chooser */

.bdy.bdy .bdy-calc__pkgs {
	display: flex;
	flex-wrap: wrap;
}

.bdy.bdy .bdy-calc__pkg {
	background: var(--bdy-paper);
	border: 0;
	border-bottom: 1px solid var(--bdy-line-3);
	border-right: 1px solid var(--bdy-line-3);
	cursor: pointer;
	flex: 1 1 140px;
	font-family: var(--bdy-body);
	min-width: 0;
	padding: 0;
	text-align: left;
	transition: background-color 0.16s ease;
}

.bdy.bdy .bdy-calc__pkg:hover {
	background: var(--bdy-wash-2);
}

.bdy.bdy .bdy-calc__pkg.is-on {
	background: var(--bdy-soft);
}

.bdy.bdy .bdy-calc__pkg-bar {
	background: var(--bdy-solid);
	display: block;
	height: 4px;
	opacity: 0.3;
	transition: opacity 0.16s ease;
}

.bdy.bdy .bdy-calc__pkg.is-on .bdy-calc__pkg-bar {
	opacity: 1;
}

.bdy.bdy .bdy-calc__pkg-body {
	display: block;
	padding: 13px 14px;
}

.bdy.bdy .bdy-calc__pkg-name {
	color: var(--bdy-deep);
	display: block;
	font-family: var(--bdy-display);
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bdy.bdy .bdy-calc__pkg-rate {
	color: var(--bdy-deep);
	font-family: var(--bdy-display);
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-top: 3px;
}

.bdy.bdy .bdy-calc__pkg-unit {
	color: var(--bdy-ink-3);
	font-size: 10.5px;
	font-weight: 600;
	margin-left: 4px;
}

.bdy.bdy .bdy-calc__pkg-tag {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 6px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-calc__pkg.is-on .bdy-calc__pkg-tag {
	color: var(--bdy-solid);
}

/* Add-ons */

.bdy.bdy .bdy-calc__addon-group {
	background: var(--bdy-wash-2);
	border-bottom: 1px solid var(--bdy-line);
	border-top: 1px solid var(--bdy-line);
	color: #414C58;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	margin: 0;
	padding: 9px 16px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-calc__addon {
	align-items: center;
	border-top: 1px solid #EDF1F5;
	cursor: pointer;
	display: flex;
	gap: 11px;
	padding: 12px 16px;
	transition: background-color 0.16s ease;
}

.bdy.bdy .bdy-calc__addon:hover {
	background: var(--bdy-wash-2);
}

.bdy.bdy .bdy-calc__addon.is-on {
	background: var(--bdy-accent-soft);
}

.bdy.bdy .bdy-calc__addon-box {
	accent-color: var(--bdy-accent-dark);
	flex: none;
	height: 17px;
	margin: 0;
	width: 17px;
}

.bdy.bdy .bdy-calc__addon-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.bdy.bdy .bdy-calc__addon-name {
	color: var(--bdy-cell-ink);
	display: block;
	font-size: 12.5px;
	font-weight: 700;
}

.bdy.bdy .bdy-calc__addon-basis {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 11.5px;
	margin-top: 1px;
}

.bdy.bdy .bdy-calc__addon-qty {
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-4);
	border-radius: 5px;
	color: var(--bdy-ink);
	flex: none;
	font-family: var(--bdy-body);
	font-size: 13px;
	font-weight: 700;
	padding: 7px 8px;
	text-align: right;
	width: 74px;
}

.bdy.bdy .bdy-calc__addon-amount {
	color: var(--bdy-deep);
	flex: none;
	font-family: var(--bdy-display);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	min-width: 62px;
	text-align: right;
}

/* The sheet */

.bdy.bdy .bdy-calc__sheet-head {
	background: var(--bdy-solid);
	color: #FFFFFF;
	padding: 16px;
}

.bdy.bdy .bdy-calc__sheet-title {
	color: #FFFFFF;
	font-family: var(--bdy-display);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 3px 0 0;
}

.bdy.bdy .bdy-calc__line {
	align-items: center;
	border-top: 1px solid #EDF1F5;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 13px 16px;
}

.bdy.bdy .bdy-calc__line:first-child {
	border-top: 0;
}

.bdy.bdy .bdy-calc__line-text {
	display: block;
	min-width: 0;
}

.bdy.bdy .bdy-calc__line-label {
	color: var(--bdy-cell-ink);
	display: block;
	font-size: 12.5px;
	font-weight: 700;
}

.bdy.bdy .bdy-calc__line-note {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 11px;
	margin-top: 1px;
}

.bdy.bdy .bdy-calc__line-amount {
	color: var(--bdy-deep);
	flex: none;
	font-family: var(--bdy-display);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.bdy.bdy .bdy-calc__total {
	background: var(--bdy-deep);
	color: #FFFFFF;
	padding: 18px 16px;
}

.bdy.bdy .bdy-cmp__kicker.is-ondark {
	color: #AFB8C2;
}

.bdy.bdy .bdy-calc__total-row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.bdy.bdy .bdy-calc__grand {
	color: #FFFFFF;
	font-family: var(--bdy-display);
	font-size: clamp(28px, 5vw, 34px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.05;
	margin: 4px 0 0;
}

.bdy.bdy .bdy-calc__effective {
	color: #AFB8C2;
	font-size: 11.5px;
	line-height: 1.6;
	margin: 0;
	text-align: right;
}

.bdy.bdy .bdy-calc__cta {
	background: #FFFFFF;
	border: 0;
	border-radius: 5px;
	color: var(--bdy-deep);
	cursor: pointer;
	font-family: var(--bdy-body);
	font-size: 13.5px;
	font-weight: 700;
	margin-top: 16px;
	padding: 13px;
	transition: background-color 0.16s ease;
	width: 100%;
}

.bdy.bdy .bdy-calc__cta:hover {
	background: #E8ECF0;
}

.bdy.bdy .bdy-calc__cta:focus-visible {
	outline: 2px solid #FB923C;
	outline-offset: 2px;
}

.bdy.bdy .bdy-calc__fine {
	color: #9AA6B2;
	font-size: 11px;
	line-height: 1.5;
	margin: 10px 0 0;
}

/* Where the money goes */

.bdy.bdy .bdy-calc__splitbar {
	background: #EDF1F5;
	border-radius: 3px;
	display: flex;
	height: 10px;
	margin-top: 14px;
	overflow: hidden;
}

.bdy.bdy .bdy-calc__splitseg {
	display: block;
	height: 100%;
}

.bdy.bdy .bdy-calc__splitlegend {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 14px;
}

.bdy.bdy .bdy-calc__splitrow {
	align-items: center;
	color: #414C58;
	display: flex;
	font-size: 12.5px;
	gap: 9px;
}

.bdy.bdy .bdy-calc__splitdot {
	border-radius: 3px;
	flex: none;
	height: 10px;
	width: 10px;
}

.bdy.bdy .bdy-calc__splitname {
	min-width: 0;
}

.bdy.bdy .bdy-calc__splitpct {
	color: var(--bdy-deep);
	font-weight: 700;
	margin-left: auto;
}

.bdy.bdy .bdy-calc__splitamt {
	color: var(--bdy-deep);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
	width: 84px;
}

@media (max-width: 900px) {
	.bdy.bdy .bdy-calc__sheet {
		position: static;
	}
}

/*
 * Narrow: the tick and the item stay on one line, and the quantity and its
 * amount drop to a second, indented to line up under the name rather than
 * under the tick.
 */
@media (max-width: 520px) {
	.bdy.bdy .bdy-calc__addon {
		align-items: center;
		display: grid;
		gap: 8px 11px;
		grid-template-columns: 17px minmax(0, 1fr) auto;
	}

	.bdy.bdy .bdy-calc__addon-qty {
		grid-column: 2;
		width: 96px;
	}

	.bdy.bdy .bdy-calc__addon-amount {
		grid-column: 3;
		grid-row: 2;
	}

	/* Nothing on the second line when the item has not been asked for. */
	.bdy.bdy .bdy-calc__addon:not(.is-on) .bdy-calc__addon-amount {
		grid-column: 3;
		grid-row: 1;
	}
}

/*
 * One line: the button, then the numbers. It appears twice on a page and
 * says one short thing, so it is sized to the button and not padded out
 * into a band of its own.
 */
.bdy.bdy .bdy-cmp__ctarow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: center;
	padding-bottom: 10px;
	padding-top: 10px;
}

/* Smaller than the closing block's, which is the page's last word. */
.bdy.bdy .bdy-cmp__ctarow .bdy-cmp__cta {
	font-size: 13.5px;
	padding: 10px 22px;
}

.bdy.bdy .bdy-cmp__ctarow .bdy-cmp__callus {
	font-size: 13px;
}

/* Three fields are required and three are not; marking the shorter list keeps
 * the labels quiet. */
.bdy.bdy .bdy-modal__label em {
	color: var(--bdy-ink-3);
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 1px;
	margin-left: 4px;
	text-transform: uppercase;
}

/*
 * An item the package does not supply.
 *
 * The cross marks it at a glance; the wording stays because "Not Included
 * (Available at additional cost)" and a flat refusal are different answers,
 * and a cross alone cannot tell them apart.
 */
.bdy.bdy .bdy-cmp__no {
	align-items: center;
	background: #FDECEC;
	border-radius: 50%;
	color: #A32020;
	display: inline-flex;
	flex: none;
	font-size: 10px;
	font-weight: 700;
	height: 17px;
	justify-content: center;
	line-height: 1;
	margin-right: 5px;
	vertical-align: -3px;
	width: 17px;
}

.bdy.bdy .bdy-cmp__cell.is-excluded .bdy-cmp__cell-value {
	color: var(--bdy-ink-3);
	font-weight: 600;
}

.bdy.bdy .bdy-cmp__cell.is-excluded.is-baseline .bdy-cmp__cell-value {
	color: var(--bdy-ink-2);
}

/*
 * Add-ons on the cost sheet: a heading that counts nothing, then a line for
 * each item, stepped in so the eye reads them as belonging to it.
 */
.bdy.bdy .bdy-calc__line.is-heading {
	padding-bottom: 4px;
}

.bdy.bdy .bdy-calc__line.is-heading .bdy-cmp__line-label,
.bdy.bdy .bdy-calc__line.is-heading .bdy-calc__line-label {
	color: #414C58;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.bdy.bdy .bdy-calc__line.is-child {
	border-top: 0;
	padding-bottom: 7px;
	padding-left: 30px;
	padding-top: 7px;
	position: relative;
}

/* A short rule instead of a bullet: it lines the items up under each other. */
.bdy.bdy .bdy-calc__line.is-child::before {
	background: var(--bdy-line-2);
	content: "";
	height: 1px;
	left: 16px;
	position: absolute;
	top: 50%;
	width: 8px;
}

.bdy.bdy .bdy-calc__line.is-child .bdy-calc__line-label {
	font-weight: 600;
}

.bdy.bdy .bdy-calc__line.is-child + .bdy-calc__line:not(.is-child) {
	border-top: 1px solid #EDF1F5;
	margin-top: 6px;
}

/* An add-on that is wanted but has no quantity yet. */
.bdy.bdy .bdy-calc__line-amount.is-pending {
	color: var(--bdy-ink-4);
	font-weight: 700;
}

/* ── Links to the sibling tools ─────────────────────────────────────────── */

.bdy.bdy .bdy-cmp__also {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	padding-bottom: clamp(28px, 5vw, 48px);
	padding-top: clamp(20px, 3vw, 28px);
}

.bdy.bdy .bdy-cmp__alsolink {
	align-items: center;
	background: var(--bdy-paper);
	border: 1px solid var(--bdy-line-2);
	border-radius: 6px;
	color: var(--bdy-ink);
	display: flex;
	gap: 14px;
	justify-content: space-between;
	padding: 16px 18px;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.bdy.bdy .bdy-cmp__alsolink:hover {
	border-color: var(--bdy-accent);
	box-shadow: 0 8px 22px -16px rgba(16, 22, 29, 0.5);
	color: var(--bdy-ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.bdy.bdy .bdy-cmp__alsotext {
	display: block;
	min-width: 0;
}

.bdy.bdy .bdy-cmp__alsolabel {
	color: var(--bdy-deep);
	display: block;
	font-family: var(--bdy-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.bdy.bdy .bdy-cmp__alsonote {
	color: var(--bdy-ink-3);
	display: block;
	font-size: 12.5px;
	margin-top: 2px;
}

.bdy.bdy .bdy-cmp__alsoarrow {
	color: var(--bdy-accent-dark);
	flex: none;
	font-size: 17px;
	transition: transform 0.18s ease;
}

.bdy.bdy .bdy-cmp__alsolink:hover .bdy-cmp__alsoarrow {
	transform: translateX(3px);
}

/* The tiers block dropped under a page's own headline keeps its controls but
 * loses the heading, so the hero shrinks to the row that holds them. */
.bdy.bdy .bdy-cmp__hero.is-bare {
	padding-bottom: 0;
	padding-top: clamp(18px, 3vw, 26px);
}

.bdy.bdy .bdy-cmp__hero.is-bare .bdy-cmp__hero-row {
	justify-content: flex-start;
}

.bdy.bdy .bdy-cmp__hero-copy[hidden] {
	display: none;
}

/*
 * Following the hero it belongs to the hero: left-aligned under the lede,
 * where centred it read as a stray band floating mid-page. The one after
 * the cards closes the section and stays centred.
 */
.bdy.bdy .bdy-cmp__hero + .bdy-cmp__ctarow {
	justify-content: flex-start;
	padding-top: 0;
}

/* Inside a bare hero the button joins the controls on their line. */
.bdy.bdy .bdy-cmp__ctarow.is-inline {
	flex: 1 1 auto;
	justify-content: flex-start;
	padding: 0;
}