/**
 * Implant and Crown Melbourne — site styles.
 *
 * Ported from the Claude Design project "Website redesign project", where every
 * rule lived as an inline style attribute. Tokens below are the literal values
 * used across those files; component classes group the repeated patterns.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
	--bg: #f7fafa;
	--surface: #ffffff;
	--ink: #17292d;
	--brand: #1d3c41;
	--brand-dark: #122a2e;
	--muted: #54666a;
	--muted-soft: #8a968f;
	--muted-alt: #84928f;
	--nav-ink: #3c4b4f;
	--line: #dde5e3;
	--line-soft: #e7edeb;
	--field-line: #c7d3d1;
	--tint: #e8efee;
	--tint-line: #c2d3d0;
	--step-num: #4f7a70;
	--hero-top: #e9f0ef;

	/* Footer / dark band */
	--dark: #17292d;
	--dark-text: #cfd8d3;
	--dark-body: #93a7a9;
	--dark-label: #7d9194;
	--dark-link: #e8efec;

	/* Image placeholders */
	--ph-a: #e2eae8;
	--ph-b: #d8e2e0;
	--ph-line: #d5dfdd;
	--ph-ink: #6e8480;

	--radius: 8px;
	--radius-sm: 6px;
	--font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ base -- */

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--brand);
}

a:hover {
	color: var(--brand-dark);
}

img {
	max-width: 100%;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 var(--radius-sm) 0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	z-index: 200;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- layout --- */

.wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.wrap--header  { max-width: 1240px; }
.wrap--900     { max-width: 900px; }
.wrap--narrow  { max-width: 860px; }
.wrap--faq     { max-width: 820px; }
.wrap--prose   { max-width: 800px; }
.wrap--form    { max-width: 720px; }

.section        { padding: clamp(56px, 8vw, 100px) 0; }
.section--sm    { padding: clamp(40px, 6vw, 72px) 0; }
.section--md    { padding: clamp(56px, 8vw, 90px) 0; }
.section--hero  { padding: clamp(48px, 7vw, 90px) 0; }
.section--home-hero { padding: clamp(48px, 7vw, 96px) 0; }
.section--cta   { padding: clamp(48px, 7vw, 80px) 0; }
.section--cta-lg { padding: clamp(56px, 8vw, 90px) 0; }
.section--fine  { padding: clamp(40px, 6vw, 64px) 0; }

.band--hero    { background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); }
.band--surface { background: var(--surface); }
.band--dark    { background: var(--dark); }
.band--brand   { background: var(--brand); }
.band--top     { border-top: 1px solid var(--line); }
.band--bottom  { border-bottom: 1px solid var(--line); }

/* Two-column "split" rows (hero, feature blocks). */
.split {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.split--top { align-items: flex-start; }

.split__body {
	flex: 1 1 440px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.split__body--home { gap: 22px; }
.split__body--wide { flex-basis: 460px; }
.split__body--even { flex: 1 1 400px; }
.split__body--text { flex: 1 1 420px; }

.split__media { flex: 1 1 380px; }
.split__media--sm { flex: 1 1 360px; }
.split__media--md { flex: 1 1 340px; }
.split__media--lg { flex: 1 1 420px; }
.split__aside { flex: 1 1 320px; }
.split__aside--wide { flex: 1 1 300px; }
.split__form { flex: 1 1 480px; }

/* Auto-fit card grids. */
.grid {
	display: grid;
	gap: 24px;
}

.grid--230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--270 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.stack {
	display: flex;
	flex-direction: column;
}

.stack--center {
	text-align: center;
	align-items: center;
	gap: 18px;
}

.stack--gap-14 { gap: 14px; }
.stack--gap-16 { gap: 16px; }
.stack--gap-18 { gap: 18px; }
.stack--gap-20 { gap: 20px; }
.stack--gap-22 { gap: 22px; }
.stack--gap-24 { gap: 24px; }

/* Uppercase keyword band under the home hero. */
.marquee {
	margin: 0;
	padding: 16px 20px;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dark-text);
	line-height: 2;
}

/* ------------------------------------------------------------ typography -- */

.eyebrow {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 600;
}

.label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-alt);
	font-weight: 600;
}

.h1 {
	margin: 0;
	font-size: clamp(30px, 4.5vw, 46px);
	font-weight: 600;
	line-height: 1.12;
	color: var(--ink);
	text-wrap: pretty;
}

/* The home hero runs larger than inner-page h1s. */
.h1--home {
	font-size: clamp(34px, 5.5vw, 56px);
	line-height: 1.08;
}

.h1--bold { font-weight: 700; }

.h2 {
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600;
	color: var(--ink);
}

.h2--sm { font-size: clamp(26px, 3.5vw, 36px); }
.h2--light { color: #fff; }
.h2--spaced { margin-bottom: 40px; }
.h2--spaced-sm { margin-bottom: 36px; }
.h2--tight { margin-bottom: 12px; }

.h3 {
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 600;
	color: var(--ink);
}

.h3--card {
	font-size: 22px;
	font-weight: 600;
}

.h4 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
}

.h4--sm { font-size: 17px; }

.lede {
	margin: 0;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.7;
	color: var(--muted);
	text-wrap: pretty;
}

.lede--home { line-height: 1.6; max-width: 44ch; }
.lede--52 { max-width: 52ch; }
.lede--54 { max-width: 54ch; }
.lede--56 { max-width: 56ch; }
.lede--58 { max-width: 58ch; }
.lede--60 { max-width: 60ch; }
.lede--64 { max-width: 64ch; }

.price-line {
	margin: 0;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.35;
	color: var(--brand);
	font-weight: 600;
}

.prose {
	margin: 0;
	font-size: clamp(16px, 1.8vw, 17.5px);
	line-height: 1.75;
	color: var(--muted);
	text-wrap: pretty;
}

.body {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--muted);
}

.body--sm {
	font-size: 15px;
	line-height: 1.7;
}

.copy {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--muted);
}

.copy--sm {
	font-size: 14.5px;
	line-height: 1.65;
}

.fine {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted-soft);
}

.fine--xs {
	font-size: 12.5px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- links --- */

.btn {
	display: inline-block;
	text-decoration: none;
	font-family: var(--font);
	font-size: 15.5px;
	font-weight: 600;
	padding: 15px 28px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	text-align: center;
}

.btn--primary {
	background: var(--brand);
	color: #fff;
}

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

.btn--outline {
	background: none;
	border: 1.5px solid var(--brand);
	color: var(--brand);
	padding: 14px 26px;
}

.btn--outline:hover {
	background: var(--tint);
	color: var(--brand);
}

/* On the dark/brand CTA bands. */
.btn--light {
	background: #fff;
	color: var(--brand-dark);
	font-size: 16px;
	padding: 15px 30px;
}

.btn--light:hover {
	background: var(--tint);
	color: var(--brand-dark);
}

.btn--light-sm {
	font-size: 15.5px;
	padding: 14px 26px;
}

.btn--ghost {
	background: none;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	color: #fff;
	font-size: 15.5px;
	padding: 13px 24px;
}

.btn--ghost:hover {
	border-color: #fff;
	color: #fff;
}

.btn--submit {
	font-size: 16px;
	align-self: flex-start;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
}

.btn-row--center {
	justify-content: center;
	margin-top: 0;
}

.arrow-link {
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	margin-top: auto;
}

/* ---------------------------------------------------------------- cards --- */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.card--tight {
	padding: 28px;
	gap: 12px;
}

.card--contact {
	padding: 22px 24px;
	gap: 6px;
}

.card--flat {
	padding: 20px 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	display: block;
}

.card__price {
	font-size: clamp(30px, 3.5vw, 38px);
	font-weight: 700;
	color: var(--brand);
}

.card__value {
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.card__value--sm {
	font-size: 16px;
	overflow-wrap: anywhere;
}

.card__value--plain {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

/* Rule-topped blocks (process steps, inclusion lists, coverage facts). */
.topline {
	border-top: 2px solid var(--brand);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.topline--sm { padding-top: 18px; gap: 10px; }
.topline--fact { padding-top: 16px; gap: 6px; }

.topline__num {
	font-size: 15px;
	font-weight: 700;
	color: var(--step-num);
}

.topline__label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-soft);
	font-weight: 600;
}

.topline__value {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.topline__value--link { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ dash lists -- */

.dash-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dash-list--hero { margin-top: 6px; }

.dash-list li {
	font-size: 15.5px;
	color: var(--ink);
	display: flex;
	gap: 10px;
	align-items: baseline;
	line-height: 1.5;
}

.dash-list--sm li { font-size: 15px; }

.dash-list li::before {
	content: '—';
	color: var(--brand);
	font-weight: 700;
	flex-shrink: 0;
}

/* ----------------------------------------------------------- media slots -- */

.media {
	min-height: 340px;
	border-radius: var(--radius);
	background: repeating-linear-gradient(135deg, var(--ph-a) 0 14px, var(--ph-b) 14px 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ph-line);
	overflow: hidden;
}

.media--300 { min-height: 300px; }

.media__note {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--ph-ink);
	background: rgba(247, 250, 250, 0.85);
	padding: 8px 14px;
	border-radius: 4px;
}

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

/*
 * Diagrams and the coverage map are artwork with their own margins and labels —
 * cropping them loses information, so they are contained on a plain ground.
 */
.media--contain {
	background: var(--surface);
	padding: 12px;
}

.media--contain img {
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------- table --- */

.ftable {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.ftable__row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	padding: 16px clamp(16px, 3vw, 28px);
	border-bottom: 1px solid var(--line-soft);
	align-items: baseline;
}

.ftable__row:last-child { border-bottom: none; }

.ftable__row--head {
	background: var(--dark);
	padding: 14px clamp(16px, 3vw, 28px);
	border-bottom: none;
}

.ftable__row--highlight { background: var(--tint); }

.ftable--compare .ftable__row { grid-template-columns: 1.2fr 1.2fr 1fr; padding-left: clamp(14px, 3vw, 28px); padding-right: clamp(14px, 3vw, 28px); }
.ftable--compare .ftable__row:not(.ftable__row--head):not(.ftable__row--highlight) { padding-top: 15px; padding-bottom: 15px; }

.ftable__th {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dark-text);
	font-weight: 600;
}

.ftable__th--strong { color: #fff; }
.ftable__th--right,
.ftable__cell--right { text-align: right; }

.ftable__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.ftable__name--plain { font-weight: 400; }
.ftable__name--highlight { color: var(--brand-dark); }

.ftable__price {
	font-size: 19px;
	font-weight: 700;
	color: var(--brand);
	text-align: right;
}

.ftable__price--sm { font-size: 18px; }

.ftable__was {
	font-size: 14.5px;
	color: var(--muted-soft);
	text-align: right;
	text-decoration: line-through;
}

.ftable__range {
	font-size: 14.5px;
	color: var(--muted);
	text-align: right;
}

/* ------------------------------------------------------------------ faq --- */

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0 22px;
}

.faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.45;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: baseline;
}

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

.faq__sign {
	color: var(--brand);
	font-weight: 700;
	flex-shrink: 0;
}

.faq[open] .faq__sign::before { content: '−'; }
.faq:not([open]) .faq__sign::before { content: '+'; }

.faq__answer {
	margin: 0;
	padding: 0 0 20px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

/* ---------------------------------------------------------------- forms --- */

/*
 * Markup comes from the Implant & Crown Forms plugin (IAC_Render::render_form).
 * The plugin ships only a minimal fallback stylesheet and expects the active
 * theme to own field styling, so the design's form treatment lives here.
 */

.form-wrap { display: block; }

.iac-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(22px, 4vw, 36px);
}

/* On white bands the card inverts so it still separates from the background. */
.form-wrap--inverted .iac-form { background: var(--bg); }
.form-wrap--inverted .iac-form input:not([type="checkbox"]):not([type="radio"]),
.form-wrap--inverted .iac-form select,
.form-wrap--inverted .iac-form textarea { background: var(--surface); }

.iac-form .field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.iac-form label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nav-ink);
}

.iac-form .legend {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nav-ink);
}

.iac-form .req { color: var(--brand); }

.iac-form input:not([type="checkbox"]):not([type="radio"]),
.iac-form select,
.iac-form textarea {
	border: 1px solid var(--field-line);
	border-radius: var(--radius-sm);
	padding: 13px 14px;
	font-size: 15px;
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	width: 100%;
}

.iac-form textarea {
	resize: vertical;
	min-height: 132px;
}

.iac-form input[type="file"] {
	padding: 11px 14px;
	font-size: 14px;
}

/* Paired fields (row_with) sit side by side and stack on narrow screens. */
.iac-form .row2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
}

.iac-form .row2 > div {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* Checkbox / radio groups — the consent tick uses this. */
.iac-form .checks,
.iac-form .radios {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.iac-form .check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	font-weight: 400;
	color: var(--muted);
	line-height: 1.5;
	cursor: pointer;
}

.iac-form .check input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--brand);
	flex-shrink: 0;
}

.iac-form .form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
}

.iac-form .form-note {
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted-soft);
	flex: 1 1 220px;
}

.iac-form .btn-primary {
	background: var(--brand);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 28px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-family: var(--font);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.iac-form .btn-primary:hover { background: var(--brand-dark); }
.iac-form .btn-primary[disabled] { opacity: 0.6; cursor: default; }
.iac-form .btn-primary .arrow { font-size: 15px; }

.iac-form .iac-error {
	background: #fdecec;
	border: 1px solid #f0c4c4;
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #8c2b2b;
}

.iac-form .iac-invalid { border-color: #c64a5e; }

/* Success panel swapped in by the plugin's JS after a successful submit. */
.iac-success {
	background: var(--tint);
	border: 1px solid var(--tint-line);
	border-radius: var(--radius);
	padding: 40px 32px;
	text-align: center;
	max-width: none;
}

.iac-success .check-mark {
	background: var(--brand);
	color: #fff;
}

.iac-success h3 { color: var(--brand-dark); }

.iac-success p {
	color: var(--brand-dark);
	font-size: 16px;
	line-height: 1.7;
}

/* --------------------------------------------------------------- header --- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(247, 250, 250, 0.96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 70px;
}

.site-header__brand {
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 6px 0;
}

.site-header__logo {
	height: 86px;
	width: auto;
	display: block;
	mix-blend-mode: multiply;
	margin: -8px 0;
}

.site-header__wordmark {
	font-size: 20px;
	font-weight: 700;
	color: var(--brand-dark);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.site-nav__link {
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--nav-ink);
	letter-spacing: 0.01em;
}

.site-nav__link:hover { color: var(--brand-dark); }

.site-nav__link.is-active {
	font-weight: 600;
	color: var(--brand-dark);
}

.site-header__cta {
	text-decoration: none;
	background: var(--brand);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.site-header__cta:hover { background: var(--brand-dark); color: #fff; }

.site-header__mobile {
	display: none;
	align-items: center;
	gap: 10px;
}

.site-header__call {
	text-decoration: none;
	border: 1px solid var(--brand);
	color: var(--brand);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.site-header__toggle {
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 44px;
	justify-content: center;
}

.site-header__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ink);
}

.site-nav--mobile {
	border-top: 1px solid var(--line);
	background: var(--bg);
	display: none;
	flex-direction: column;
	padding: 8px 0 12px;
}

.site-nav--mobile.is-open { display: flex; }

.site-nav--mobile .site-nav__link {
	font-size: 16px;
	padding: 13px 24px;
	border-bottom: 1px solid var(--line-soft);
}

.site-nav--mobile .site-header__cta {
	padding: 14px 20px;
	font-size: 15px;
	margin: 14px 20px 4px;
	text-align: center;
}

/* The design switches to the mobile header below 1120px. */
@media (max-width: 1119px) {
	.site-header__desktop { display: none; }
	.site-header__mobile { display: flex; }
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
	background: var(--dark);
	color: var(--dark-text);
	font-family: var(--font);
}

.site-footer__top {
	max-width: 1140px;
	margin: 0 auto;
	padding: 56px 20px 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

.site-footer__brand {
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__name {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.site-footer__blurb {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dark-body);
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dark-label);
	font-weight: 600;
}

.site-footer__link {
	color: var(--dark-link);
	text-decoration: none;
	font-size: 14px;
}

.site-footer__link--lg { font-size: 15px; }
.site-footer__link:hover { color: #fff; }

.site-footer__meta {
	font-size: 14px;
	color: var(--dark-body);
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__copy {
	max-width: 1140px;
	margin: 0 auto;
	padding: 18px 20px;
	font-size: 12.5px;
	color: var(--dark-label);
}

/* ------------------------------------------------------------- fallback --- */

/* Default page/post template — plain editor content. */
.entry {
	padding: clamp(48px, 7vw, 90px) 0;
}

.entry__content h2 { margin: 1.6em 0 0.5em; font-size: clamp(24px, 3vw, 32px); font-weight: 600; }
.entry__content h3 { margin: 1.4em 0 0.5em; font-size: 22px; font-weight: 600; }
.entry__content p,
.entry__content li { font-size: 16px; line-height: 1.75; color: var(--muted); }

@media (max-width: 640px) {
	.ftable__row,
	.ftable--compare .ftable__row {
		grid-template-columns: 1fr auto;
		row-gap: 4px;
	}

	.ftable__th:first-child,
	.ftable__name { grid-column: 1 / -1; }

	.ftable__th--right:nth-child(2),
	.ftable__th--right:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------ utilities -- */

.h2--lede { margin-bottom: 10px; }
.body--intro { margin-bottom: 32px; }
.body--spaced { margin-bottom: 36px; }
.body--on-brand { color: #d3e0de; }