/**
 * DRN Pricing Tools — front-end styles.
 * Scoped under .drn-wrap so nothing here can leak into the rest of the theme.
 */

.drn-wrap {
	--drn-ink: #16212e;
	--drn-ink-soft: #4a5768;
	--drn-ink-faint: #7b8794;
	--drn-navy: #12304d;
	--drn-navy-deep: #0b2138;
	--drn-accent: #a8763e;
	--drn-line: #dfe5ec;
	--drn-line-soft: #edf1f6;
	--drn-bg: #ffffff;
	--drn-bg-soft: #f7f9fc;
	--drn-radius: 10px;
	--drn-shadow: 0 1px 2px rgba( 16, 33, 51, .06 ), 0 8px 24px rgba( 16, 33, 51, .05 );

	max-width: 66rem;
	margin: 0 auto;
	padding: 0 1rem 3rem;
	color: var( --drn-ink );
	font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	/* This site's root font-size is 10px (theme sets html to 62.5%), so 1rem here = 10px.
	   Sizes below are chosen in that scale to line up with the home page's actual rendered
	   sizes (its body copy runs ~16px, headings ~18.5px) while staying comfortably legible
	   for a form-heavy tool. */
	font-size: 1.6rem;
	line-height: 1.7;
	box-sizing: border-box;
}

/* Headings match the site's display face (home page uses Lora for its headings). */
.drn-wrap h2,
.drn-wrap h3,
.drn-wrap h4 {
	font-family: 'Lora', Georgia, 'Times New Roman', serif;
	font-weight: 600;
}

.drn-wrap *,
.drn-wrap *::before,
.drn-wrap *::after {
	box-sizing: inherit;
}

/* ---------- Header ---------- */

.drn-head {
	padding: 2.5rem 0 1.5rem;
	border-bottom: 1px solid var( --drn-line );
	margin-bottom: 2rem;
}

.drn-eyebrow {
	margin: 0 0 .5rem;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --drn-accent );
}

.drn-wrap h2 {
	margin: 0 0 .75rem;
	font-size: clamp( 2.4rem, 3vw, 3rem );
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var( --drn-navy-deep );
}

.drn-intro {
	margin: 0;
	max-width: 48rem;
	font-size: 1.7rem;
	color: var( --drn-ink-soft );
}

/* ---------- Steps ---------- */

.drn-step {
	background: var( --drn-bg );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
	padding: 2.2rem 2rem;
	margin-bottom: 1.75rem;
}

.drn-step h3 {
	margin: 0 0 .5rem;
	font-size: 2rem;
	color: var( --drn-navy-deep );
}

.drn-step-note,
.drn-field-help {
	margin: 0 0 1.2rem;
	font-size: 1.5rem;
	font-style: normal;
	color: var( --drn-ink-soft );
	display: block;
}

/* ---------- Checkboxes ---------- */

.drn-checks {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 21rem, 1fr ) );
	gap: .85rem 1.75rem;
	margin-top: 1.2rem;
}

.drn-check {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}

.drn-check:hover {
	background: var( --drn-bg-soft );
	border-color: var( --drn-line );
}

.drn-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.85rem;
	height: 1.85rem;
	margin: .1rem 0 0;
	accent-color: var( --drn-navy );
	cursor: pointer;
}

.drn-check-body {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.drn-check-label {
	font-size: 1.6rem;
	line-height: 1.4;
	color: var( --drn-ink );
}

.drn-check-help {
	font-size: 1.4rem;
	color: var( --drn-ink-soft );
}

/* ---------- Numbers ---------- */

.drn-nums {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.2rem;
}

.drn-num {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	min-width: 10.5rem;
	flex: 1 1 10.5rem;
}

.drn-num span {
	font-size: 1.4rem;
	font-weight: 600;
	color: var( --drn-ink );
}

.drn-num input {
	width: 100%;
	padding: .85rem .9rem;
	font-size: 1.6rem;
	font-family: inherit;
	color: var( --drn-ink );
	background: var( --drn-bg );
	border: 1.5px solid var( --drn-line );
	border-radius: 7px;
}

.drn-leveled {
	padding: 1.4rem 0;
	border-top: 1px solid var( --drn-line-soft );
}

.drn-leveled:first-of-type {
	border-top: 0;
}

.drn-leveled-title {
	margin: 0 0 .25rem;
	font-weight: 700;
	font-size: 1.6rem;
	color: var( --drn-ink );
}

/* ---------- Fields ---------- */

.drn-field {
	display: block;
	margin-bottom: 1rem;
}

.drn-field > span {
	display: block;
	margin-bottom: .45rem;
	font-size: 1.5rem;
	font-weight: 600;
	color: var( --drn-ink );
}

.drn-field > span em {
	font-style: normal;
	font-weight: 400;
	font-size: 1.3rem;
	color: var( --drn-ink-soft );
	margin-left: .35rem;
}

.drn-field input,
.drn-field select,
.drn-field textarea {
	width: 100%;
	padding: .95rem 1rem;
	font-size: 1.6rem;
	font-family: inherit;
	color: var( --drn-ink );
	background: var( --drn-bg );
	border: 1.5px solid var( --drn-line );
	border-radius: 7px;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.drn-field input:focus,
.drn-field select:focus,
.drn-field textarea:focus,
.drn-num input:focus {
	outline: none;
	border-color: var( --drn-navy );
	box-shadow: 0 0 0 3px rgba( 18, 48, 77, .12 );
}

.drn-field textarea {
	resize: vertical;
	min-height: 4.5rem;
}

.drn-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

@media ( max-width: 34rem ) {
	.drn-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* ---------- Gate ---------- */

.drn-gate {
	background: var( --drn-bg-soft );
	border-color: #cfd9e5;
}

.drn-gate-why {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	color: var( --drn-ink-soft );
	max-width: 40rem;
}

.drn-sent {
	margin-top: 1.5rem;
	padding: 1.25rem;
	background: var( --drn-bg );
	border: 1px solid #b9d4c2;
	border-left: 3px solid #2f7d52;
	border-radius: 8px;
}

.drn-sent h4 {
	margin: 0 0 .4rem;
	font-size: 1.6rem;
	color: #1d5c39;
}

.drn-sent p {
	margin: 0 0 .5rem;
}

.drn-small {
	font-size: 1.3rem;
	color: var( --drn-ink-faint );
}

/* ---------- Buttons ---------- */

.drn-btn {
	display: inline-block;
	padding: 1.1rem 2rem;
	font-family: inherit;
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}

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

.drn-btn-primary:hover,
.drn-btn-primary:focus {
	background: var( --drn-navy-deep );
	color: #fff;
}

.drn-btn-primary:disabled {
	background: #93a3b5;
	cursor: not-allowed;
}

.drn-btn-ghost {
	background: transparent;
	color: var( --drn-navy );
	border-color: #b9c5d4;
}

.drn-btn-ghost:hover,
.drn-btn-ghost:focus {
	background: var( --drn-navy );
	border-color: var( --drn-navy );
	color: #fff;
}

.drn-dupe-cta {
	margin-top: .75rem;
}

/* ---------- Messages ---------- */

.drn-error {
	margin: .9rem 0 0;
	padding: 1rem 1.2rem;
	font-size: 1.5rem;
	color: #8a2418;
	background: #fdf3f1;
	border-left: 3px solid #b0392a;
	border-radius: 5px;
}

.drn-ok {
	margin: .9rem 0 0;
	padding: 1rem 1.2rem;
	font-size: 1.5rem;
	color: #1d5c39;
	background: #f0f8f3;
	border-left: 3px solid #2f7d52;
	border-radius: 5px;
}

.drn-notice {
	padding: 2rem;
	background: var( --drn-bg-soft );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
	margin-top: 2rem;
}

.drn-notice h3 {
	margin: 0 0 .5rem;
	font-size: 2rem;
	color: var( --drn-navy-deep );
}

/* ---------- Individual results ---------- */

.drn-plans {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: 1.1rem;
	margin-bottom: 2rem;
}

.drn-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.4rem 1.4rem;
	background: var( --drn-bg );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
	transition: border-color .15s ease, box-shadow .15s ease;
}

.drn-plan-featured {
	border-color: var( --drn-navy );
	box-shadow: var( --drn-shadow );
}

.drn-plan-chosen {
	border-color: var( --drn-accent );
	box-shadow: 0 0 0 2px rgba( 168, 118, 62, .22 );
}

.drn-plan-flag {
	position: absolute;
	top: -.65rem;
	left: 1.4rem;
	margin: 0;
	padding: .2rem .6rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: var( --drn-navy );
	border-radius: 4px;
}

.drn-plan h3 {
	margin: 0 0 .3rem;
	font-size: 1.8rem;
	color: var( --drn-navy-deep );
}

.drn-price {
	margin: .2rem 0 .6rem;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var( --drn-navy-deep );
}

.drn-price span {
	display: inline-block;
	margin-left: .3rem;
	font-size: 1.3rem;
	font-weight: 400;
	color: var( --drn-ink-faint );
	letter-spacing: 0;
}

.drn-plan-tagline {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	color: var( --drn-ink-soft );
}

.drn-plan-list {
	flex: 1 1 auto;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.drn-plan-list li {
	position: relative;
	padding: .32rem 0 .32rem 1.5rem;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var( --drn-ink-soft );
}

.drn-plan-list li::before {
	content: "";
	position: absolute;
	left: .1rem;
	top: .72rem;
	width: .42rem;
	height: .24rem;
	border-left: 2px solid var( --drn-accent );
	border-bottom: 2px solid var( --drn-accent );
	transform: rotate( -45deg );
}

/* ---------- Business results ---------- */

.drn-summary {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.drn-summary-card {
	padding: 1.4rem;
	background: var( --drn-bg );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
}

.drn-summary-lead {
	border-color: var( --drn-navy );
	box-shadow: var( --drn-shadow );
}

.drn-summary-label {
	margin: 0 0 .3rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --drn-accent );
}

.drn-summary-note {
	margin: 0;
	font-size: 1.4rem;
	color: var( --drn-ink-soft );
}

.drn-totals {
	padding: 1.4rem 1.6rem;
	background: var( --drn-navy-deep );
	border-radius: var( --drn-radius );
	margin-bottom: 1.5rem;
	color: #dce6f0;
}

.drn-totals p {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	padding: .55rem 0;
	font-size: 1.5rem;
}

.drn-totals p + p {
	border-top: 1px solid rgba( 255, 255, 255, .13 );
}

.drn-totals strong {
	font-size: 2.2rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

/* ---------- Details / tables ---------- */

.drn-details {
	margin-bottom: 1.5rem;
	padding: 0 1.25rem;
	background: var( --drn-bg-soft );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
}

.drn-details summary {
	padding: 1.1rem 0;
	font-weight: 600;
	font-size: 1.6rem;
	color: var( --drn-navy );
	cursor: pointer;
}

.drn-details h4 {
	margin: 1rem 0 .4rem;
	font-size: 1.5rem;
	color: var( --drn-ink-soft );
}

.drn-table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
	font-size: 1.5rem;
}

.drn-table td {
	padding: .5rem 0;
	border-bottom: 1px solid var( --drn-line );
	color: var( --drn-ink-soft );
}

.drn-num-cell {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var( --drn-ink );
}

.drn-table-total td {
	font-weight: 700;
	color: var( --drn-ink );
	border-bottom: 0;
}

/* ---------- Disclaimer + CTA ---------- */

.drn-disclaimer {
	margin: 0 0 2rem;
	padding: 1.1rem 1.35rem;
	font-size: 1.4rem;
	line-height: 1.6;
	color: var( --drn-ink-soft );
	background: var( --drn-bg-soft );
	border-left: 3px solid var( --drn-accent );
	border-radius: 5px;
}

.drn-cta {
	padding-top: 1.5rem;
	border-top: 1px solid var( --drn-line );
}

.drn-cta h3 {
	margin: 0 0 1rem;
	font-size: 2rem;
	color: var( --drn-navy-deep );
}

.drn-cta-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1.1rem;
}

@media ( max-width: 44rem ) {
	.drn-cta-grid {
		grid-template-columns: 1fr;
	}
}

.drn-cta-card {
	padding: 1.4rem;
	background: var( --drn-bg );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
}

.drn-cta-card h4 {
	margin: 0 0 .4rem;
	font-size: 1.5rem;
	color: var( --drn-navy-deep );
}

.drn-cta-card p {
	margin: 0 0 1rem;
	font-size: 1.3rem;
	color: var( --drn-ink-soft );
}

/* ---------- Dark mode ---------- */

@media ( prefers-color-scheme: dark ) {
	.drn-wrap:not( [data-theme="light"] ) {
		--drn-ink: #e6ecf3;
		--drn-ink-soft: #a9b6c6;
		--drn-ink-faint: #8494a6;
		--drn-navy: #7fa9d4;
		--drn-navy-deep: #cfe0f2;
		--drn-accent: #d3a06a;
		--drn-line: #2c3a4b;
		--drn-line-soft: #22303f;
		--drn-bg: #17212c;
		--drn-bg-soft: #1d2733;
	}

	.drn-wrap:not( [data-theme="light"] ) .drn-btn-primary {
		background: #2f5f8f;
		color: #fff;
	}

	.drn-wrap:not( [data-theme="light"] ) .drn-btn-primary:hover {
		background: #3c7ab5;
	}

	.drn-wrap:not( [data-theme="light"] ) .drn-totals {
		background: #0f1922;
		color: #cfdae6;
	}

	.drn-wrap:not( [data-theme="light"] ) .drn-error {
		color: #f2b5ab;
		background: #351d1a;
	}

	.drn-wrap:not( [data-theme="light"] ) .drn-ok,
	.drn-wrap:not( [data-theme="light"] ) .drn-sent h4 {
		color: #9fd9b6;
	}

	.drn-wrap:not( [data-theme="light"] ) .drn-ok,
	.drn-wrap:not( [data-theme="light"] ) .drn-sent {
		background: #17281f;
	}
}

/* ============================================================
   NOTE ON UNITS: the theme sets html { font-size: 10px }, so 1rem = 10px
   across this site, not 16px. Every rem below is written to that scale
   (1.6rem = 16px). Getting this wrong renders the whole block at 62.5%.
   ========================================================== */

/* ============================================================
   Discount codes and the Early Engagement offer page  (v1.6.0)
   ========================================================== */

.drn-promo-field input { text-transform: uppercase; letter-spacing: .06em; }
.drn-promo-help { margin-top: -0.65rem; }

.drn-promo-banner {
	margin: 1.6rem 0 0;
	padding: 1.1rem 1.45rem;
	border-left: 3px solid currentColor;
	border-radius: 0 3px 3px 0;
	font-size: 1.45rem;
	line-height: 1.5;
}
.drn-promo-ok { color: #2f6b4f; background: #e6f0ea; }
.drn-promo-no { color: #8f5a0e; background: #f7eedd; }
.drn-promo-banner strong { font-weight: 700; }

.drn-was,
.drn-strike {
	text-decoration: line-through;
	opacity: .55;
	font-weight: 400;
}
.drn-was { display: block; font-size: .6em; line-height: 1.2; }
.drn-saved { margin: -0.55rem 0 0.95rem; font-size: 1.35rem; font-weight: 600; color: #2f6b4f; }
.drn-now { font-weight: 700; }

.drn-totals-discount span,
.drn-totals-discount strong { color: #2f6b4f; }

/* --- offer page --- */
.drn-offer h3 { margin-top: 3.85rem; }
.drn-offer h4 { margin-top: 2.55rem; margin-bottom: 0.5rem; }
.drn-offer-clock {
	display: inline-block;
	margin-top: 1.3rem;
	padding: 0.55rem 1.3rem;
	border-radius: 999px;
	background: #7a2233;
	color: #fff;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.drn-offer-closed { background: #5e5155; }

.drn-offer-steps { margin: 1.3rem 0 0; padding-left: 2.1rem; }
.drn-offer-steps li { margin-bottom: 0.95rem; }
.drn-offer-steps code {
	background: #f4f0f0;
	padding: .05em .4em;
	border-radius: 3px;
	font-size: .9em;
}

.drn-offer-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.95rem;
	margin: 2.55rem 0 0;
}

.drn-offer-why,
.drn-offer-terms { margin: 1.3rem 0 0; padding-left: 2.1rem; }
.drn-offer-why li,
.drn-offer-terms li { margin-bottom: 0.9rem; }

.drn-tablewrap { overflow-x: auto; margin-top: 0.95rem; }
.drn-tablewrap .drn-table { min-width: 480px; }

@media ( prefers-color-scheme: dark ) {
	.drn-promo-ok { color: #7fc9a1; background: #1c2a23; }
	.drn-promo-no { color: #dda648; background: #2c2416; }
	.drn-saved { color: #7fc9a1; }
	.drn-totals-discount span,
	.drn-totals-discount strong { color: #7fc9a1; }
	.drn-offer-steps code { background: #271f22; }
}

.drn-offer-who {
	margin-top: 1.6rem;
	padding: 1.3rem 1.6rem;
	background: #f4f0f0;
	border-radius: 4px;
	font-size: 1.45rem;
	line-height: 1.55;
}
@media ( prefers-color-scheme: dark ) {
	.drn-offer-who { background: #271f22; }
}

/* ============================================================
   Offer announcement banner  (v1.7.0)
   Colours taken from the live site: #1C1815 is the "Book a Free
   Consultation" button, #F6F2E9 the page ground, #C2760F the logo accent.
   ========================================================== */

.drn-banner {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	background: #1C1815;
	color: #F6F2E9;
	font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.7rem;
	line-height: 1.45;
	padding: 1.3rem 2rem;
	position: relative;
	z-index: 999;
}

.drn-banner-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	color: inherit;
	text-decoration: none;
	padding: 0.15rem 0;
}
.drn-banner-link:hover .drn-banner-cta,
.drn-banner-link:focus-visible .drn-banner-cta { text-decoration-thickness: 2px; }
.drn-banner-link:focus-visible { outline: 2px solid #C2760F; outline-offset: 3px; }

.drn-banner-icon { flex: 0 0 auto; color: #C2760F; }
.drn-banner-text { color: #F6F2E9; }
.drn-banner-text strong { color: #fff; font-weight: 600; }

.drn-banner-cta {
	font-weight: 700;
	color: #E9A93F;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.drn-banner-close {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: #F6F2E9;
	opacity: .6;
	font-size: 2.4rem;
	line-height: 1;
	padding: 0.25rem 0.65rem;
	cursor: pointer;
	border-radius: 3px;
}
.drn-banner-close:hover { opacity: 1; }
.drn-banner-close:focus-visible { outline: 2px solid #C2760F; outline-offset: 2px; opacity: 1; }

@media ( max-width: 640px ) {
	.drn-banner { font-size: 1.6rem; padding: 1.2rem 1.4rem; align-items: flex-start; }
	.drn-banner-link { justify-content: flex-start; text-align: left; }
	.drn-banner-icon { display: none; }
}

/* The strip lives in the document flow after the header. Its top margin is set
   at runtime to clear the overlay navigation — see drn_render_offer_banner(). */
.drn-banner { border-radius: 0; }

/* Offer page ground — the same beige the homepage paints on <body> (#F6F2E9).
   Class selector, so it outranks the theme's plain body rule without !important. */
body.drn-offer-page {
	background-color: #F6F2E9;
}

/* Business service-level comparison on the offer page. */
.drn-matrix th:not(:first-child),
.drn-matrix td:not(:first-child) { text-align: center; width: 15%; }
.drn-matrix .drn-matrix-price td { background: rgba(122,34,51,.06); vertical-align: top; }
.drn-tick { color: #2f6b4f; font-weight: 700; font-size: 1.7rem; }
.drn-no { color: #A99C9C; }
@media ( prefers-color-scheme: dark ) {
	.drn-tick { color: #7fc9a1; }
}

/* Bookkeeping block on the individual results. */
.drn-books-block { margin-top: 2.4rem; }

/* ============================================================
   Criteria reference column  (v2.2.0)

   UNITS: this site's theme sets html { font-size: 10px }, so 1rem = 10px.
   Every rem below is on that scale — 1.6rem = 16px, 2.4rem = 24px.
   ========================================================== */

.drn-layout {
	display: grid;
	grid-template-columns: minmax( 0, 30rem ) minmax( 0, 1fr );
	gap: 2.6rem;
	align-items: start;
}

/* The form needs the extra room now that it shares the row. */
.drn-wrap {
	max-width: 116rem;
}

.drn-results {
	max-width: 96rem;
}

.drn-form {
	min-width: 0;
}

@media ( max-width: 62rem ) {
	.drn-layout {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.drn-wrap {
		max-width: 96rem;
	}
}

.drn-ref {
	position: sticky;
	top: 2.4rem;
	min-width: 0;
}

@media ( max-width: 62rem ) {
	.drn-ref {
		position: static;
		top: auto;
	}
}

.drn-ref-shell {
	background: var( --drn-bg-soft );
	border: 1px solid var( --drn-line );
	border-radius: var( --drn-radius );
	overflow: hidden;
}

.drn-ref-summary {
	display: block;
	padding: 1.8rem 2rem;
	cursor: pointer;
	list-style: none;
}

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

.drn-ref-summary:focus-visible {
	outline: 2px solid var( --drn-accent );
	outline-offset: -2px;
}

.drn-ref-eyebrow {
	display: block;
	margin-bottom: .5rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var( --drn-accent );
}

.drn-ref-head {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.25;
	color: var( --drn-navy-deep );
}

.drn-ref-sub {
	display: block;
	margin-top: .4rem;
	font-size: 1.4rem;
	line-height: 1.45;
	color: var( --drn-ink-faint );
}

/* The open/closed cue only matters where the panel actually collapses. */
.drn-ref-summary::after {
	content: "Tap to read";
	display: none;
	margin-top: .8rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var( --drn-navy );
}

@media ( max-width: 62rem ) {
	.drn-ref-summary::after {
		display: block;
	}

	.drn-ref-shell[open] .drn-ref-summary::after {
		content: "Tap to close";
	}
}

.drn-ref-body {
	padding: 0 2rem 2rem;
	max-height: calc( 100vh - 13rem );
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media ( max-width: 62rem ) {
	.drn-ref-body {
		max-height: none;
		overflow-y: visible;
	}
}

.drn-ref-block {
	padding-top: 1.6rem;
	border-top: 1px solid var( --drn-line );
}

.drn-ref-block:first-child {
	border-top: 0;
	padding-top: .4rem;
}

.drn-ref-block h4 {
	margin: 0 0 .8rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.35;
	color: var( --drn-navy-deep );
}

.drn-ref-block h4 span {
	display: block;
	margin-top: .2rem;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --drn-ink-faint );
}

.drn-ref-note {
	margin: 0 0 1rem;
	font-size: 1.3rem;
	line-height: 1.5;
	color: var( --drn-ink-faint );
}

.drn-ref-block dl {
	margin: 0;
}

.drn-ref-block dt {
	margin-bottom: .2rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var( --drn-ink );
}

.drn-ref-block dd {
	margin: 0 0 1.1rem;
	font-size: 1.35rem;
	line-height: 1.5;
	color: var( --drn-ink-soft );
}

.drn-ref-block dd:last-child {
	margin-bottom: 0;
}

.drn-ref-block dd em {
	display: block;
	margin-top: .25rem;
	font-style: normal;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	color: var( --drn-ink-faint );
}

.drn-ref-foot {
	margin: 1.6rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid var( --drn-line );
	font-size: 1.3rem;
	line-height: 1.55;
	color: var( --drn-ink-faint );
}

/* The pointer from the form to the panel. */
.drn-step-point {
	display: block;
	margin-top: .4rem;
	color: var( --drn-navy );
	font-weight: 500;
}