/* Package comparison page — ported from "Packages H Premium". */

.bdy-packages {
	background: var(--bdy-surface);
	padding: 56px 32px 72px;
}

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

.bdy-hero {
	display: grid;
	gap: 44px;
	margin-bottom: 64px;
}

/* The hero spans the page, but running text should not. */
.bdy-hero__title {
	max-width: 20ch;
}

.bdy-hero__lede {
	max-width: 62ch;
}

.bdy-hero__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.bdy-pills {
	display: inline-flex;
	gap: 3px;
	background: var(--bdy-line-soft);
	padding: 3px;
	border-radius: 999px;
}

.bdy-pill {
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 15px;
	border-radius: 999px;
	border: 0;
	background: transparent;
	color: var(--bdy-muted-2);
	transition: all 0.2s ease;
}

.bdy-pill[aria-pressed='true'] {
	background: var(--bdy-ink);
	color: #fff;
}

.bdy-hero__note {
	font-size: 12.5px;
	color: var(--bdy-muted-2);
}

.bdy-hero__link {
	display: inline-block;
	padding: 5px 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bdy-blue);
	border-bottom: 1px solid rgba(29, 99, 196, 0.4);
	padding-bottom: 1px;
}

.bdy-hero__link:hover {
	color: var(--bdy-ink);
}

.bdy-hero__title {
	font-size: clamp(38px, 5.4vw, 64px);
	line-height: 1.04;
	margin-bottom: 20px;
	text-wrap: pretty;
}

.bdy-hero__title em {
	font-style: italic;
	color: var(--bdy-blue);
}

.bdy-hero__lede {
	font-size: 17px;
	line-height: 1.68;
	color: var(--bdy-muted);
	margin-bottom: 30px;
	text-wrap: pretty;
}

.bdy-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--bdy-line-strong);
	border: 1px solid var(--bdy-line-strong);
	border-radius: 14px;
	overflow: hidden;
}

.bdy-stat {
	background: #fff;
	padding: 16px 18px;
}

.bdy-stat__v {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 25px;
	line-height: 1;
}

.bdy-stat__k {
	font-size: 12px;
	color: var(--bdy-muted-2);
	margin-top: 6px;
	line-height: 1.4;
}

/* ── Tier cards ───────────────────────────────────────────────────────── */

.bdy-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin-bottom: 26px;
	align-items: stretch;
}

.bdy-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid var(--bdy-card-edge, var(--bdy-line));
	background: var(--bdy-card-tint, #fff);
	box-shadow: 0 1px 2px rgba(16, 27, 43, 0.04);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.bdy-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 46px rgba(16, 27, 43, 0.16);
}

.bdy-card.is-selected {
	background: linear-gradient(168deg, #16273D 0%, #0B1420 70%);
	border-color: var(--bdy-blue);
	border-radius: 22px;
	box-shadow: 0 34px 68px rgba(16, 27, 43, 0.34), 0 0 0 4px rgba(29, 99, 196, 0.13);
	transform: scale(1.045) translateY(-10px);
	z-index: 3;
	position: relative;
	color: var(--bdy-on-dark);
}

.bdy-card.is-selected:hover {
	transform: scale(1.055) translateY(-13px);
	box-shadow: 0 40px 76px rgba(16, 27, 43, 0.38), 0 0 0 4px rgba(29, 99, 196, 0.18);
}

.bdy-card__ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 22px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--bdy-card-edge, var(--bdy-line));
	color: var(--bdy-ink);
	text-align: center;
}

.bdy-card.is-selected .bdy-card__ribbon {
	background: linear-gradient(90deg, #1D63C4, #3F87E8);
	color: #fff;
}

.bdy-card__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bdy-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.bdy-card__index {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--bdy-dim);
}

.bdy-card.is-selected .bdy-card__index {
	color: rgba(247, 245, 240, 0.45);
}

.bdy-card__tick {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--bdy-line-soft);
	color: var(--bdy-muted-2);
}

.bdy-card:not(.in-compare) .bdy-card__tick {
	visibility: hidden;
}

.bdy-card.is-selected .bdy-card__tick {
	background: rgba(247, 245, 240, 0.14);
	color: rgba(247, 245, 240, 0.8);
}

.bdy-card__name {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 29px;
	line-height: 1;
	margin-bottom: 14px;
	transition: font-size 0.3s ease;
}

.bdy-card.is-selected .bdy-card__name {
	font-size: 34px;
	color: var(--bdy-on-dark);
}

.bdy-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 16px;
}

.bdy-card__rate {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
	transition: font-size 0.3s ease;
}

.bdy-card.is-selected .bdy-card__rate {
	font-size: 36px;
	color: var(--bdy-blue-pale);
}

.bdy-card__unit {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bdy-muted-2);
}

.bdy-card.is-selected .bdy-card__unit,
.bdy-card.is-selected .bdy-card__est-label {
	color: rgba(247, 245, 240, 0.55);
}

.bdy-card__est {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 13px;
	border-radius: 10px;
	margin-bottom: 18px;
	background: rgba(255, 255, 255, 0.72);
}

.bdy-card.is-selected .bdy-card__est {
	background: rgba(238, 244, 252, 0.08);
}

.bdy-card__est-label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bdy-muted-2);
}

.bdy-card__est-val {
	font-size: 15px;
	font-weight: 700;
}

.bdy-card__hls {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.bdy-hl {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 11px 0;
}

.bdy-hl + .bdy-hl {
	border-top: 1px solid rgba(16, 27, 43, 0.08);
}

.bdy-card.is-selected .bdy-hl + .bdy-hl {
	border-top-color: rgba(238, 244, 252, 0.1);
}

.bdy-hl__chip {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
	background: var(--bdy-line-soft);
	color: var(--bdy-blue);
}

.bdy-card.is-selected .bdy-hl__chip {
	background: rgba(238, 244, 252, 0.1);
	color: var(--bdy-blue-pale);
}

.bdy-hl__key {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 3px;
	color: var(--bdy-muted-2);
}

.bdy-card.is-selected .bdy-hl__key {
	color: rgba(238, 244, 252, 0.5);
}

.bdy-hl__text {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
}

.bdy-card__btn {
	width: 100%;
	margin-top: auto;
	font-size: 13.5px;
	font-weight: 600;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid rgba(16, 27, 43, 0.14);
	background: #fff;
	color: var(--bdy-ink);
	transition: all 0.2s ease;
}

.bdy-card.is-selected .bdy-card__btn {
	border-color: var(--bdy-blue);
	background: var(--bdy-blue);
	color: #fff;
}

.bdy-card__detail {
	width: 100%;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 10px;
	border-radius: 9px;
	border: 1px solid rgba(16, 27, 43, 0.12);
	background: rgba(255, 255, 255, 0.6);
	color: var(--bdy-ink);
}

.bdy-card.is-selected .bdy-card__detail {
	border-color: rgba(238, 244, 252, 0.24);
	background: transparent;
	color: var(--bdy-blue-pale);
}

.bdy-card__cmp {
	width: 100%;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px;
	border-radius: 9px;
	background: transparent;
	border: 0;
	color: var(--bdy-muted-2);
}

.bdy-card.is-selected .bdy-card__cmp {
	color: rgba(247, 245, 240, 0.6);
}

/* ── Detail drawer ────────────────────────────────────────────────────── */

.bdy-drawer {
	background: #fff;
	border: 1px solid var(--bdy-line);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 20px 46px rgba(16, 27, 43, 0.1);
}

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

.bdy-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 26px;
	background: var(--bdy-ink);
	color: var(--bdy-on-dark);
}

.bdy-drawer__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 26px;
}

.bdy-drawer__meta {
	font-size: 13px;
	color: rgba(237, 243, 252, 0.66);
	margin-left: 14px;
}

.bdy-drawer__tabs {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.bdy-drawer__tab {
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 13px;
	border-radius: 9px;
	border: 1px solid rgba(237, 243, 252, 0.22);
	background: transparent;
	color: rgba(237, 243, 252, 0.78);
	transition: all 0.2s ease;
}

.bdy-drawer__tab[aria-selected='true'] {
	border-color: var(--bdy-blue);
	background: var(--bdy-blue);
	color: #fff;
}

.bdy-drawer__close {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	border: 1px solid rgba(237, 243, 252, 0.22);
	background: transparent;
	color: var(--bdy-on-dark);
	font-size: 15px;
}

.bdy-band {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 26px;
	border: 0;
	border-bottom: 1px solid rgba(16, 27, 43, 0.07);
	text-align: left;
	background: var(--bdy-tint-band, #E7F0FB);
	color: var(--bdy-tint-label, var(--bdy-ink));
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bdy-band__num {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10.5px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.62);
	margin-right: 12px;
}

.bdy-band__chev {
	font-size: 16px;
	line-height: 1;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bdy-band[aria-expanded='true'] .bdy-band__chev {
	transform: rotate(180deg);
}

.bdy-drawer__group-body {
	background: var(--bdy-tint-cell, #F8FBFF);
}

.bdy-drawer__row {
	padding: 20px 26px;
	border-bottom: 1px solid rgba(16, 27, 43, 0.07);
}

.bdy-drawer__row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.bdy-drawer__label {
	font-size: 14px;
	font-weight: 700;
}

.bdy-tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(16, 27, 43, 0.05);
	color: var(--bdy-muted-2);
}

.bdy-tag.is-upgrade {
	background: var(--bdy-tint-band, #CFE2F8);
	color: var(--bdy-tint-label, var(--bdy-ink));
}

.bdy-cmpgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}

.bdy-cmpcell {
	padding: 13px 15px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(16, 27, 43, 0.08);
}

.bdy-cmpcell.is-self {
	background: var(--bdy-ink);
	color: var(--bdy-on-dark);
	border: 2px solid var(--bdy-blue);
	box-shadow: 0 6px 18px rgba(29, 99, 196, 0.2);
}

.bdy-cmpcell__name {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 4px;
	color: var(--bdy-muted-2);
}

.bdy-cmpcell.is-self .bdy-cmpcell__name {
	color: var(--bdy-blue-pale);
}

.bdy-cmpcell__val {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bdy-ink-soft);
	display: block;
}

.bdy-cmpcell.is-self .bdy-cmpcell__val {
	color: var(--bdy-on-dark);
}

.bdy-cmpcell__mark {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bdy-muted-2);
}

.bdy-cmpcell.is-self .bdy-cmpcell__mark {
	color: var(--bdy-blue-pale);
}

.bdy-drawer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 20px 26px;
	border-top: 1px solid #E3EDF9;
	background: var(--bdy-surface-alt);
	font-size: 13.5px;
	color: var(--bdy-muted);
}

/* ── Nudge ────────────────────────────────────────────────────────────── */

.bdy-nudge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	background: #EFF5FD;
	border: 1px solid #D8E6F8;
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 80px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bdy-ink-soft);
}

.bdy-nudge__btn {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid var(--bdy-blue);
	background: #fff;
	color: var(--bdy-blue);
}

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

/* ── Calculator ───────────────────────────────────────────────────────── */

.bdy-calc {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 18px;
	align-items: start;
	margin-bottom: 80px;
}

.bdy-panel {
	background: #fff;
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	box-shadow: 0 1px 2px rgba(16, 27, 43, 0.03), 0 10px 30px rgba(16, 27, 43, 0.04);
}

.bdy-panel__block {
	padding: 26px 28px;
	border-bottom: 1px solid var(--bdy-line-soft);
}

.bdy-panel__block:last-child {
	border-bottom: 0;
}

.bdy-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bdy-muted-2);
}

.bdy-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.bdy-area__field {
	display: flex;
	align-items: center;
	border: 1px solid #CFDFF3;
	border-radius: 10px;
	padding: 0 13px;
	background: var(--bdy-surface-alt);
}

.bdy-area__field input {
	width: 96px;
	border: 0;
	outline: none;
	background: transparent;
	padding: 11px 0;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--bdy-ink);
}

.bdy-area__field span {
	font-size: 12.5px;
	color: var(--bdy-muted-2);
	font-weight: 600;
}

.bdy-packages input[type='range'] {
	/* 24px so the control clears the minimum target size; the visible track
	   stays 4px on its pseudo-element. */
	height: 24px;
	background: transparent;
}

/* The visible track is drawn on the pseudo-element so the control itself can
   be tall enough to tap. A 4px-high input is all but unhittable on a phone.
 *
 * The two vendor pseudo-elements MUST stay in separate rules. Grouped in one
 * selector list, the one a browser does not recognise invalidates the whole
 * rule — which left Chrome drawing no track at all, just a thumb floating in
 * space. */
.bdy-packages input[type='range']::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--bdy-line-strong);
	border-radius: 99px;
}

.bdy-packages input[type='range']::-moz-range-track {
	height: 4px;
	background: var(--bdy-line-strong);
	border-radius: 99px;
}

.bdy-packages input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	margin-top: -10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #C6D8EF;
	box-shadow: 0 2px 6px rgba(16, 27, 43, 0.16);
	cursor: pointer;
}

.bdy-packages input[type='range']::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #C6D8EF;
	box-shadow: 0 2px 6px rgba(16, 27, 43, 0.16);
	cursor: pointer;
}

.bdy-presets {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.bdy-preset {
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 8px;
	border: 1px solid var(--bdy-line-strong);
	background: #fff;
	color: var(--bdy-muted);
	transition: all 0.2s ease;
}

.bdy-preset[aria-pressed='true'] {
	border-color: var(--bdy-ink);
	background: var(--bdy-ink);
	color: #fff;
}

.bdy-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--bdy-line-soft);
}

.bdy-two > div {
	padding: 26px 28px;
}

.bdy-two > div:first-child {
	border-right: 1px solid var(--bdy-line-soft);
}

.bdy-seg {
	display: inline-flex;
	gap: 3px;
	background: var(--bdy-line-soft);
	padding: 3px;
	border-radius: 11px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.bdy-seg__btn {
	font-size: 13px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: var(--bdy-muted-2);
	transition: all 0.2s ease;
}

/* Selected reads the same everywhere on the page: dark ground, white label.
   This control alone used a white chip on a pale track, which put two
   different "selected" idioms side by side with the city tabs and the area
   presets. */
.bdy-seg__btn[aria-pressed='true'] {
	background: var(--bdy-ink);
	color: #fff;
	box-shadow: 0 1px 2px rgba(16, 27, 43, 0.14);
}

.bdy-addon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 15px 0;
	background: transparent;
	border: 0;
	text-align: left;
}

.bdy-addon-row {
	border-bottom: 1px solid var(--bdy-line-soft);
}

/* ── Add-on categories ────────────────────────────────────────────────── */

.bdy-addon-group {
	border-bottom: 1px solid var(--bdy-line);
}

.bdy-addon-group:last-of-type {
	border-bottom: 0;
}

.bdy-addon-group__head {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bdy-ink);
}

.bdy-addon-group__head::-webkit-details-marker {
	display: none;
}

.bdy-addon-group__count {
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bdy-muted-2);
}

.bdy-addon-group[open] .bdy-addon-group__count {
	color: var(--bdy-blue);
}

/* A caret that turns, so the row reads as expandable without an icon font. */
.bdy-addon-group__head::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--bdy-dim);
	border-bottom: 2px solid var(--bdy-dim);
	transform: rotate(45deg);
	margin-left: 2px;
	flex: none;
	transition: transform 0.2s ease;
}

.bdy-addon-group[open] .bdy-addon-group__head::after {
	transform: rotate(-135deg);
}

.bdy-addon-group .bdy-addon-row:last-child {
	border-bottom: 0;
	margin-bottom: 6px;
}

.bdy-addon-row .bdy-addon {
	padding-bottom: 8px;
}

/* The quantity the add-on is priced on, offered for correction rather than
   assumed silently — the page cannot know how long a compound wall is. */
.bdy-addon-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 13px;
}

.bdy-addon-qty__input {
	width: 84px;
	padding: 6px 9px;
	border: 1px solid var(--bdy-line);
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: inherit;
}

.bdy-addon-qty.is-set .bdy-addon-qty__input {
	border-color: var(--bdy-accent, #1D63C4);
	box-shadow: inset 2px 0 0 var(--bdy-accent, #1D63C4);
}

.bdy-addon-qty__unit {
	font-size: 12.5px;
	color: var(--bdy-muted-2);
}

.bdy-addon-qty__hint {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--bdy-muted-2);
}

.bdy-addon-qty.is-set .bdy-addon-qty__hint {
	color: var(--bdy-accent, #1D63C4);
}

.bdy-addon__name {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

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

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

.bdy-addon__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--bdy-blue);
	white-space: nowrap;
}

.bdy-switch {
	flex-shrink: 0;
	width: 42px;
	height: 24px;
	border-radius: 99px;
	padding: 2px;
	display: flex;
	background: #CFDFF3;
	transition: background 0.25s ease;
}

.bdy-addon[aria-pressed='true'] .bdy-switch {
	background: var(--bdy-blue);
}

.bdy-switch__knob {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 27, 43, 0.24);
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bdy-addon[aria-pressed='true'] .bdy-switch__knob {
	transform: translateX(18px);
}

.bdy-splitbar {
	display: flex;
	height: 12px;
	border-radius: 99px;
	overflow: hidden;
	margin: 16px 0;
}

.bdy-splitlegend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.bdy-splitlegend > div {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--bdy-ink-soft);
}

.bdy-splitlegend b {
	font-weight: 700;
	color: var(--bdy-ink);
}

.bdy-dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
}

/* ── Summary rail ─────────────────────────────────────────────────────── */

.bdy-summary {
	position: sticky;
	top: calc(var(--bdy-sticky-top, 0px) + 20px);
	background: var(--bdy-ink);
	border-radius: var(--bdy-radius);
	overflow: hidden;
	box-shadow: 0 22px 54px rgba(16, 27, 43, 0.2);
	position: sticky;
	top: calc(var(--bdy-sticky-top, 0px) + 20px);
	/* No height cap here, unlike the BOQ rail: this rail is the tallest item
	   in its own grid row, so it defines the row height and has no distance to
	   travel. Capping it would only add an inner scrollbar to a section that
	   already fits on screen. */
	color: var(--bdy-on-dark);
}

.bdy-summary__head {
	padding: 28px 28px 24px;
	border-bottom: 1px solid #1E3049;
}

.bdy-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdy-blue-light);
	margin-bottom: 12px;
}

.bdy-summary__total {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 52px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.bdy-summary__line {
	font-size: 13.5px;
	color: rgba(247, 245, 240, 0.62);
	margin-top: 12px;
	line-height: 1.55;
}

.bdy-chips {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.bdy-chip {
	font-size: 12px;
	font-weight: 600;
	background: #17263A;
	border: 1px solid #24384F;
	padding: 6px 11px;
	border-radius: 8px;
	color: rgba(247, 245, 240, 0.8);
}

.bdy-summary__lines {
	padding: 18px 24px 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

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

.bdy-sumline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bdy-sumline:last-child {
	border-bottom: 0;
}

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

.bdy-sumline__name {
	font-size: 13px;
	color: var(--bdy-on-dark);
}

.bdy-sumline__note {
	font-size: 11px;
	color: var(--bdy-blue-pale);
}

.bdy-sumline__amt {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	flex: none;
}

.bdy-sumline.is-strong {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.bdy-sumline.is-strong .bdy-sumline__name,
.bdy-sumline.is-strong .bdy-sumline__amt {
	font-size: 14.5px;
	font-weight: 800;
}

.bdy-summary__cta {
	padding: 20px 28px 26px;
}

.bdy-cta {
	display: block;
	text-align: center;
	background: var(--bdy-blue);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	padding: 15px;
	border-radius: 11px;
	transition: background 0.25s;
}

.bdy-cta:hover {
	background: var(--bdy-blue-light);
	color: var(--bdy-ink);
}

.bdy-phones {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
}

.bdy-phones a {
	display: inline-block;
	padding: 4px 0;
	color: rgba(247, 245, 240, 0.62);
}

.bdy-phones a:hover {
	color: #fff;
}

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

.bdy-spechead {
	margin-bottom: 26px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.bdy-spechead h3 {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.1;
	margin-bottom: 8px;
}

.bdy-spechead p {
	font-size: 14.5px;
	color: var(--bdy-muted);
	max-width: 560px;
}

.bdy-cmpchips {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bdy-cmpchips__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdy-muted-2);
}

.bdy-cmpchip {
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 13px;
	border-radius: 9px;
	border: 1px solid #CFDFF3;
	background: #fff;
	color: var(--bdy-muted-2);
	transition: all 0.2s ease;
}

.bdy-cmpchip[aria-pressed='true'] {
	border-color: var(--bdy-ink);
	background: var(--bdy-ink);
	color: #fff;
}

.bdy-spec {
	display: grid;
	grid-template-columns: 196px 1fr;
	gap: 20px;
	align-items: start;
	margin-bottom: 80px;
}

.bdy-rail {
	position: sticky;
	top: calc(var(--bdy-sticky-top, 0px) + 20px);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bdy-rail__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 10px 13px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 600;
	text-align: left;
	border: 1px solid var(--bdy-line);
	background: #fff;
	color: var(--bdy-ink);
	transition: all 0.2s ease;
}

.bdy-rail__btn[aria-pressed='true'] {
	border-color: var(--bdy-ink);
	background: var(--bdy-ink);
	color: var(--bdy-on-dark);
}

.bdy-rail__left {
	display: flex;
	align-items: center;
	gap: 9px;
}

.bdy-rail__dot {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	flex-shrink: 0;
	background: var(--bdy-tint-band, var(--bdy-ink));
}

.bdy-rail__count {
	font-size: 10.5px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 5px;
	background: rgba(16, 27, 43, 0.05);
	color: var(--bdy-muted-2);
}

.bdy-rail__btn[aria-pressed='true'] .bdy-rail__count {
	background: rgba(255, 255, 255, 0.18);
	color: var(--bdy-on-dark);
}

.bdy-speclist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bdy-specgroup[hidden],
.bdy-speccard[hidden] {
	display: none;
}

.bdy-specgroup__title {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bdy-tint-label, var(--bdy-ink));
	background: var(--bdy-tint-band, var(--bdy-line-soft));
	padding: 10px 16px;
	border-radius: 10px;
	margin: 10px 0 2px;
}

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

/* A caret that turns, so the band reads as expandable. */
.bdy-specgroup__title::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	opacity: 0.55;
	flex: none;
	transition: transform 0.2s ease;
}

.bdy-specgroup[open] > .bdy-specgroup__title::after {
	transform: rotate(-135deg);
}

.bdy-specgroup__count {
	margin-left: auto;
	font-weight: 600;
	opacity: 0.66;
}

.bdy-specgroup:first-child .bdy-specgroup__title {
	margin-top: 0;
}

.bdy-subhead {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdy-muted-2);
	padding: 12px 16px 4px;
}

.bdy-speccard {
	background: #fff;
	border: 1px solid var(--bdy-line);
	border-radius: 12px;
	overflow: hidden;
}

.bdy-speccard__grid {
	display: grid;
	grid-template-columns: 170px repeat(var(--bdy-cols, 4), minmax(0, 1fr));
	gap: 6px;
	align-items: stretch;
	padding: 9px 14px;
}

.bdy-speccard__label {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding-right: 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.bdy-speccard__pip {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	flex-shrink: 0;
	background: var(--bdy-tint-band, var(--bdy-line-strong));
}

.bdy-cell {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	background: #FBFCFE;
	transition: all 0.25s ease;
}

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

.bdy-cell.is-upgrade {
	background: var(--bdy-tint-cell, #EAF3FD);
}

.bdy-cell.is-selected {
	background: var(--bdy-ink);
}

.bdy-cell__name {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 3px;
	color: var(--bdy-muted-2);
}

.bdy-cell.is-selected .bdy-cell__name {
	color: var(--bdy-blue-pale);
}

.bdy-cell__val {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	color: var(--bdy-ink);
	/* Specification text often runs slash-separated with no spaces to break
	   at, which would otherwise overflow into the next column. */
	overflow-wrap: anywhere;
}

.bdy-cell.is-selected .bdy-cell__val {
	font-weight: 600;
	color: var(--bdy-on-dark);
}

.bdy-cell__note {
	display: block;
	font-size: 11px;
	line-height: 1.35;
	margin-top: 3px;
	color: var(--bdy-muted-2);
}

.bdy-cell.is-selected .bdy-cell__note {
	color: rgba(237, 243, 252, 0.6);
}

/* ── FAQs and closing ─────────────────────────────────────────────────── */

.bdy-close {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: start;
}

.bdy-close h3 {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.1;
	margin-bottom: 20px;
}

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

.bdy-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 0;
	background: transparent;
	border: 0;
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	color: var(--bdy-ink);
	line-height: 1.45;
}

.bdy-faq__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	background: var(--bdy-line-soft);
	color: var(--bdy-muted);
	transition: all 0.25s ease;
}

.bdy-faq__q[aria-expanded='true'] .bdy-faq__icon {
	background: var(--bdy-blue);
	color: #fff;
	transform: rotate(45deg);
}

.bdy-faq__a {
	font-size: 14px;
	line-height: 1.7;
	color: var(--bdy-muted);
	padding: 0 44px 20px 0;
}

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

.bdy-sidecard {
	background: #fff;
	border: 1px solid var(--bdy-line);
	border-radius: var(--bdy-radius);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16, 27, 43, 0.04);
}

.bdy-sidecard__media {
	height: 210px;
	background: linear-gradient(140deg, #E7F0FB, #CFE2F8);
}

.bdy-sidecard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdy-sidecard__body {
	padding: 26px 28px 28px;
}

.bdy-sidecard__title {
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 24px;
	line-height: 1.2;
	margin-bottom: 10px;
}

.bdy-sidecard p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--bdy-muted);
	margin-bottom: 20px;
}

.bdy-btn-dark {
	display: inline-block;
	background: var(--bdy-ink);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	padding: 13px 22px;
	border-radius: 11px;
	transition: background 0.25s;
}

.bdy-btn-dark:hover {
	background: var(--bdy-blue);
	color: #fff;
}

.bdy-terms {
	margin-top: 44px;
}

.bdy-terms h3 {
	font-size: 22px;
	margin-bottom: 14px;
}

.bdy-terms ol {
	margin: 0;
	padding-left: 20px;
	columns: 2;
	column-gap: 40px;
}

.bdy-terms li {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--bdy-muted);
	margin-bottom: 8px;
	break-inside: avoid;
}

.bdy-disclaimer {
	font-size: 12.5px;
	color: var(--bdy-muted-2);
	line-height: 1.75;
	margin-top: 34px;
	max-width: 860px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1060px) {
	.bdy-packages { padding: 44px 18px 64px; }
	.bdy-hero { grid-template-columns: 1fr; }
	.bdy-calc { grid-template-columns: 1fr; }
	.bdy-close { grid-template-columns: 1fr; }
	.bdy-spec { grid-template-columns: 1fr; }
	.bdy-rail { position: static; flex-direction: row; flex-wrap: wrap; }
	.bdy-rail__btn { width: auto; }
	.bdy-card.is-selected { transform: none; }
	.bdy-card.is-selected:hover { transform: translateY(-8px); }
}

@media (max-width: 820px) {
	.bdy-speccard__grid { grid-template-columns: 1fr; }
	.bdy-two { grid-template-columns: 1fr; }
	.bdy-two > div:first-child { border-right: 0; border-bottom: 1px solid var(--bdy-line-soft); }
	.bdy-terms ol { columns: 1; }
}

@media (max-width: 600px) {
	.bdy-cards { grid-template-columns: 1fr; }
	.bdy-panel__block, .bdy-two > div { padding: 24px 20px; }
	.bdy-stats { grid-template-columns: repeat(2, 1fr); }
}

.bdy.bdy .bdy-hero__link {
	color: var(--bdy-blue);
}

.bdy.bdy .bdy-hero__link:hover {
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-cta {
	background: var(--bdy-blue);
	color: #fff;
}

.bdy.bdy .bdy-cta:hover {
	background: var(--bdy-blue-light);
	color: var(--bdy-ink);
}

.bdy.bdy .bdy-btn-dark {
	background: var(--bdy-ink);
	color: #fff;
}

.bdy.bdy .bdy-btn-dark:hover {
	background: var(--bdy-blue);
	color: #fff;
}

.bdy.bdy .bdy-phones a {
	color: rgba(247, 245, 240, 0.62);
}

.bdy.bdy .bdy-phones a:hover {
	color: #fff;
}

.bdy.bdy .bdy-terms ol {
	list-style: decimal;
	padding-left: 20px;
	margin: 0;
}

.bdy.bdy .bdy-terms li {
	color: var(--bdy-muted);
}

/* ── Sticky specification header ──────────────────────────────────────────
 *
 * The matrix runs to well over a hundred rows, so the package names and their
 * prices scroll out of sight almost immediately. This pins them to the top of
 * the viewport for as long as the specification list is on screen, using the
 * same grid as the rows beneath so the columns stay in line. */

.bdy-specheader {
	position: sticky;
	/* Offset by any fixed site header the theme puts at the top of the
	   viewport — measured at runtime, see packages.js. */
	top: var(--bdy-sticky-top, 0px);
	z-index: 4;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--bdy-line);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(16, 27, 43, 0.06);
	margin-bottom: 2px;
}

.bdy-specheader .bdy-speccard__grid {
	padding: 10px 14px;
	align-items: center;
}

.bdy-specheader__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdy-muted-2);
	padding-right: 10px;
}

.bdy-specheader__cell {
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	background: #FBFCFE;
	min-width: 0;
}

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

.bdy-specheader__cell.is-selected {
	background: var(--bdy-ink);
}

.bdy-specheader__name {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bdy-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bdy-specheader__cost {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--bdy-blue);
	margin-top: 1px;
}

.bdy-specheader__cell.is-selected .bdy-specheader__name {
	color: var(--bdy-blue-pale);
}

.bdy-specheader__cell.is-selected .bdy-specheader__cost {
	color: #fff;
}

/* The category rail is sticky too; drop it below the header so the two do not
   overlap when both are pinned. */
.bdy-rail {
	z-index: 3;
}

@media (max-width: 820px) {
	/* The rows collapse to one column here, so a multi-column header would
	   line up with nothing. */
	.bdy-specheader {
		display: none;
	}
}

/* The flat service charge, kept beside the quote rather than inside it. */
.bdy-summary__service {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 12px;
	letter-spacing: 0.01em;
	opacity: 0.85;
}

/* Theme armour — a theme's global input styling must not reach these. */
.bdy.bdy .bdy-addon-qty__input {
	border-radius: 0;
	height: auto;
	margin: 0;
	max-width: none;
	line-height: 1.2;
	background: #fff;
}

.bdy.bdy .bdy-addon-qty__input:focus {
	outline: none;
}

/* A theme setting `em { color: transparent }` reaches inside the sheet, which
   turned the emphasised word in the add-on note invisible. */
.bdy.bdy em,
.bdy.bdy strong,
.bdy.bdy b,
.bdy.bdy i {
	color: inherit;
	background: transparent;
}

@media (max-width: 620px) {
	/* Text links want a little height of their own to be tappable. */
	.bdy-packages .bdy-hero__link,
	.bdy-packages .bdy-phones a,
	.bdy-packages .bdy-crumbs a {
		display: inline-block;
		padding: 7px 0;
	}
}

/* ── Hover states ─────────────────────────────────────────────────────────
 * Every control on this page can be clicked, but most of them said nothing
 * when the pointer arrived — no tint, no border shift, nothing. These give
 * each one the same quiet acknowledgement, keyed to how it looks at rest:
 * a white control darkens its edge and takes a faint tint, a transparent one
 * picks up a ground, and a control that is already selected is left alone so
 * hover never fights the selected state. */

.bdy-card__btn:hover,
.bdy-card__detail:hover,
.bdy-cmpchip:hover,
.bdy-preset:hover {
	border-color: var(--bdy-blue);
	background: var(--bdy-surface-alt);
	color: var(--bdy-ink);
}

.bdy-cmpchip[aria-pressed='true']:hover,
.bdy-preset[aria-pressed='true']:hover {
	background: var(--bdy-ink);
	color: #fff;
	border-color: var(--bdy-ink);
}

.bdy-card__cmp:hover {
	background: rgba(16, 27, 43, 0.05);
	color: var(--bdy-ink);
}

.bdy-nudge__btn:hover {
	background: var(--bdy-blue);
	color: #fff;
}

/* The segmented control's selected chip is already dark; only the others move. */
.bdy-seg__btn:hover:not([aria-pressed='true']) {
	background: rgba(255, 255, 255, 0.7);
	color: var(--bdy-ink);
}

.bdy-rail__btn:hover:not([aria-pressed='true']) {
	background: var(--bdy-surface-alt);
	color: var(--bdy-ink);
}

.bdy-pill:hover:not([aria-pressed='true']) {
	color: var(--bdy-ink);
}

.bdy-faq__q:hover,
.bdy-addon-group__head:hover,
.bdy-specgroup__title:hover {
	color: var(--bdy-blue);
}

.bdy-addon:hover .bdy-addon__name {
	color: var(--bdy-blue);
}

.bdy-addon-row:hover {
	background: var(--bdy-surface-alt);
}