/* ==========================================================================
   A Kut Above Wound Specialty
   Palette measured from the 2026 brand package artwork, not from the brand
   guide PDF: that file carries two stacked layers and gives two conflicting
   values for the red. All 30 delivered logo files agree on these three.
   Cream is the new third colour and replaces the old grey alt background.

   Type note: the guide names Lao MN and Bourton Line Bold. Neither can be
   licensed as a webfont (both are fsType 4, and Lao MN is an Apple system
   font whose Latin set is secondary to its Lao script). Spectral and Jost are
   the closest Google Fonts substitutes and were chosen against the artwork.
   Both are legible at small sizes, which matters here. See the base size
   below.

   Base size is deliberately large because a good share of this audience is older
   patients and caregivers reading on phones.
   ========================================================================== */

:root {
	--red:        #bf1e2d;
	--red-dark:   #951723;
	--red-tint:   #fdf2f3;
	--black:      #121416;
	--ink:        #1c1e21;
	--ink-soft:   #5c5c66;
	--line:       #e0ded6;
	--bg:         #ffffff;
	--cream:      #ecebe4;
	--bg-alt:     var(--cream);

	--display: 'Spectral', Georgia, 'Times New Roman', serif;
	--eyebrow: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
	--body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--wrap:    1180px;
	--radius:  10px;
	--shadow:  0 2px 4px rgba(16,16,18,.04), 0 12px 28px rgba(16,16,18,.06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .01em;
	margin: 0;
	color: var(--black);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap--narrow { max-width: 780px; }

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

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

/* ---------- Preloader ---------------------------------------------------- */

.preloader {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center;
	background: var(--black);
	transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { display: grid; justify-items: center; gap: 26px; padding: 24px; }
.preloader__logo {
	width: min(340px, 72vw);
	animation: akutPulse 1.6s ease-in-out infinite;
}
.preloader__bar {
	width: min(240px, 54vw); height: 3px;
	background: rgba(255,255,255,.16); border-radius: 3px; overflow: hidden;
}
.preloader__bar span {
	display: block; height: 100%; width: 40%;
	background: var(--red); border-radius: 3px;
	animation: akutSlide 1.1s ease-in-out infinite;
}
@keyframes akutPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes akutSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

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

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }

.brand { flex: 0 0 auto; line-height: 0; }
.brand img { width: 200px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a {
	font-size: 15px; font-weight: 600; color: var(--ink);
	text-decoration: none; letter-spacing: .01em; white-space: nowrap;
	border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.nav a:hover { color: var(--red); border-bottom-color: var(--red); }
/* Qualified with `.nav a` on purpose. The bare `.nav__cta` (0,1,0) loses to
   `.nav a` (0,1,1), so the base link's padding-bottom:2px and underline border
   were overriding the button and pushing its label off centre. Matching the
   specificity fixes it properly and removes the two !important flags that were
   papering over the same collision. */
.nav a.nav__cta {
	background: var(--red); color: #fff;
	padding: 11px 20px; border-radius: 6px; border-bottom: 0;
}
.nav a.nav__cta:hover { background: var(--red-dark); color: #fff; }

.nav-toggle {
	display: none; margin-left: auto;
	width: 44px; height: 44px; padding: 10px;
	background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--black); border-radius: 2px; }
.nav-toggle span + span { margin-top: 5px; }

/* ---------- Hero --------------------------------------------------------- */

.hero {
	background:
		radial-gradient(900px 420px at 82% -10%, rgba(191,30,45,.28), transparent 60%),
		var(--black);
	color: #fff;
	padding: clamp(64px, 11vw, 128px) 0 clamp(56px, 9vw, 104px);
	border-bottom: 4px solid var(--red);
}
.hero__inner { max-width: 830px; }

.eyebrow {
	font-family: var(--eyebrow);
	font-size: 14px; font-weight: 500;
	letter-spacing: .22em; text-transform: uppercase;
	color: var(--red); margin: 0 0 16px;
}
.eyebrow--dark { color: var(--red); }

.hero__title {
	color: #fff;
	font-size: clamp(2.5rem, 6.4vw, 4.4rem);
	font-weight: 700; letter-spacing: .005em;
	margin-bottom: 22px;
}
.hero__title em { font-style: normal; color: var(--red); }

.hero__lede {
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	color: rgba(255,255,255,.82);
	max-width: 62ch; margin: 0 0 34px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__note { margin: 22px 0 0; font-size: 15px; color: rgba(255,255,255,.6); }

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

.btn {
	display: inline-block; text-decoration: none; cursor: pointer;
	font-family: var(--body); font-size: 16px; font-weight: 600;
	padding: 15px 30px; border-radius: 7px; border: 2px solid transparent;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--wide { width: 100%; padding: 17px 30px; font-size: 17px; }

/* ---------- Trust bar ---------------------------------------------------- */

.trustbar { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.trustbar__inner {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--line);
	border-inline: 1px solid var(--line);
}
.trustbar__item {
	background: var(--bg-alt); padding: 24px 20px;
	display: grid; gap: 3px; text-align: center;
}
.trustbar__item strong {
	font-family: var(--display); font-size: 17px; font-weight: 600;
	color: var(--black); letter-spacing: .01em;
}
.trustbar__item span { font-size: 14px; color: var(--ink-soft); }

/* ---------- Sections ----------------------------------------------------- */

.section { padding: clamp(58px, 9vw, 104px) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--black); color: #fff; }

/* Brand pattern as texture on the dark bands.
   The swatch was recovered from the brand guide (see Branding/extracted). A
   monochrome cream cut, so it reads as depth in the black rather than as a
   second graphic competing with the copy. This is a clinical practice, not a
   boutique.

   2% is calibrated against the CTA band and footer, which are flat black. Do
   not judge this figure on the hero or pagehead: their red gradient masks the
   texture, so anything tuned there lands far too strong on the flat surfaces.
   At 7% the monogram is plainly readable behind the headline; at 3% it still
   competes on flat black.

   The pseudo-element sits behind the content via isolation + negative z-index,
   which keeps it off the parent's own background shorthand (the hero needs its
   gradient intact). It needs `content: ""` to generate a box at all. */
.hero, .pagehead, .section--dark, .site-footer,
.section--alt { position: relative; isolation: isolate; }

.hero::before, .pagehead::before, .section--dark::before, .site-footer::before,
.section--alt::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-repeat: repeat;
	background-size: 190px;
	pointer-events: none;
}

/* Dark grounds take the cream cut. */
.hero::before, .pagehead::before, .section--dark::before, .site-footer::before {
	background-image: url(/assets/images/pattern-tile-cream.svg);
	opacity: .02;
}

/* Cream grounds take the black cut, a shade stronger because it sits under
   white cards rather than directly behind body copy. Same 190px tile as the
   dark bands on purpose: one tile size across the site reads as one texture
   rather than two separate decisions. Calibrated on the real Services
   section, where 4% starts competing with the heading and 1.5% barely
   registers. */
.section--alt::before {
	background-image: url(/assets/images/pattern-tile-dark.svg);
	opacity: .025;
}
.section--dark .section__title { color: #fff; }

.section__title {
	font-size: clamp(1.9rem, 4.2vw, 2.85rem);
	font-weight: 600; margin-bottom: 16px;
}
.section__lede {
	font-size: 1.08rem; color: var(--ink-soft);
	max-width: 62ch; margin: 0 0 44px;
}
.section--dark .section__lede { color: rgba(255,255,255,.72); }

/* ---------- Cards -------------------------------------------------------- */

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 28px 26px; position: relative;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.section--alt .card { background: #fff; }
.card::before {
	content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 46px;
	background: var(--red); border-radius: var(--radius) 0 0 0;
	transition: width .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3d3da; }
.card:hover::before { width: 100%; }

.card__title { font-size: 1.24rem; font-weight: 600; margin-bottom: 9px; }
.card__body  { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.card--numbered { padding-top: 34px; }
.card__num {
	position: absolute; top: 20px; right: 22px;
	font-family: var(--display); font-size: 1.5rem; font-weight: 700;
	color: var(--line); line-height: 1;
}
.card--audience { border-top: 3px solid var(--red); }
.card--audience::before { display: none; }

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

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: step; }
.step {
	display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
	padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.step:last-child { border-bottom: 0; }
.step__num {
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--red); color: #fff;
	font-family: var(--display); font-size: 1.4rem; font-weight: 700;
}
.step__title { color: #fff; font-size: 1.28rem; margin-bottom: 6px; }
.step__body  { margin: 0; color: rgba(255,255,255,.72); }

/* ---------- Notices & alerts --------------------------------------------- */

.notice {
	border-radius: 8px; padding: 17px 20px; margin-bottom: 26px;
	font-size: .95rem; line-height: 1.6;
}
.notice--privacy {
	background: var(--red-tint); border-left: 4px solid var(--red); color: #6d2028;
}
.notice--privacy strong { color: var(--red-dark); }

.alert { border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; font-size: .97rem; }
.alert--ok  { background: #edf7ef; border-left: 4px solid #2e7d43; color: #1f5730; }
.alert--err { background: var(--red-tint); border-left: 4px solid var(--red); color: #7d1f2a; }

/* ---------- Form --------------------------------------------------------- */

.form { display: grid; gap: 20px; }
/* align-content:start matters more than it looks. A .field is a grid of auto
   rows, and .field-row stretches both columns to equal height. Without this,
   the shorter field's extra space is shared out among its own rows, which
   pushes its label down and inflates its input, so the two sides stop lining
   up whenever one has a .hint or a .err and the other does not. */
.field {
	display: grid; align-content: start; gap: 7px;
	border: 0; padding: 0; margin: 0; min-width: 0;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.label {
	font-size: .9rem; font-weight: 600; color: var(--black);
	letter-spacing: .01em; padding: 0;
}
.req { color: var(--red); }

.input {
	width: 100%; font-family: var(--body); font-size: 16px; color: var(--ink);
	background: #fff; border: 1px solid #cfcfd6; border-radius: 7px;
	padding: 13px 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
	outline: none; border-color: var(--red);
	box-shadow: 0 0 0 3px rgba(191,30,45,.14);
}
.input--area { resize: vertical; min-height: 150px; line-height: 1.6; }
.input.is-error { border-color: var(--red); background: var(--red-tint); }

.err { margin: 0; font-size: .86rem; color: var(--red-dark); font-weight: 500; }
/* Guidance under an input, as opposed to .err which reports a problem. The
   insurance field leans on this to keep policy numbers out of the box. */
.hint { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.45; }

.radios { display: flex; flex-wrap: wrap; gap: 10px; }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio span {
	display: block; cursor: pointer;
	padding: 11px 18px; border: 1px solid #cfcfd6; border-radius: 999px;
	font-size: .93rem; font-weight: 500; background: #fff;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.radio input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.radio input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

/* Honeypot: must stay reachable to bots but invisible to people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__alt { margin: 26px 0 0; text-align: center; color: var(--ink-soft); font-size: .97rem; }

/* ---------- Footer ------------------------------------------------------- */

.site-footer { background: var(--black); color: rgba(255,255,255,.7); padding: 58px 0 0; }
.site-footer__inner {
	display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 44px;
}
/* No white plate here either: the footer now carries the cream lockup, which
   sits straight on the dark ground. The plate existed only for the old
   dark-on-dark mark, same reason as the preloader. */
.site-footer__brand img { width: 200px; }
.site-footer__brand p { margin: 16px 0 0; font-size: .95rem; max-width: 40ch; }

.site-footer__col { display: grid; gap: 9px; align-content: start; }
.site-footer__col h4 {
	color: #fff; font-size: 1rem; letter-spacing: .1em;
	text-transform: uppercase; margin-bottom: 5px;
}
.site-footer__col a, .site-footer__col span { color: rgba(255,255,255,.7); text-decoration: none; font-size: .95rem; }
.site-footer__col a:hover { color: var(--red); }

.site-footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px 30px; }
.site-footer__legal p { margin: 0 0 8px; font-size: .84rem; color: rgba(255,255,255,.5); }
.site-footer__disclaimer { max-width: 78ch; }

/* ---------- Responsive --------------------------------------------------- */

/* The header collapses to the toggle well above tablet width. Six links plus
   the CTA need ~825px, and the 2026 wide lockup takes 200px of the row beside
   them (the old oval mark took 138px), so the row stops fitting just under
   1150px. The labels are editable settings too, and a longer one Cristi types in
   must not push the header into a horizontal scroll, so this sits at the wrap
   width with headroom rather than right on the measured limit. Below it the
   existing hamburger takes over. */
@media (max-width: 1180px) {
	.nav-toggle { display: block; }
	.nav {
		position: fixed; inset: 76px 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; border-bottom: 1px solid var(--line);
		padding: 8px 22px 20px;
		transform: translateY(-12px); opacity: 0; pointer-events: none;
		transition: opacity .18s ease, transform .18s ease;
		max-height: calc(100vh - 76px); overflow-y: auto;
	}
	.nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
	.nav a { padding: 15px 0; border-bottom: 1px solid var(--line); }
	.nav a:hover { border-bottom-color: var(--line); }
	.nav a.nav__cta { text-align: center; margin-top: 14px; padding: 15px 20px; }
}

@media (max-width: 960px) {
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.trustbar__inner { grid-template-columns: repeat(2, 1fr); }
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	body { font-size: 16px; }

	.grid--3 { grid-template-columns: 1fr; }
	.field-row { grid-template-columns: 1fr; }
	.step { grid-template-columns: 46px 1fr; gap: 16px; }
	.step__num { width: 42px; height: 42px; font-size: 1.15rem; }
	.hero__actions .btn { width: 100%; text-align: center; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 420px) {
	.trustbar__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Service pages
   ========================================================================== */

.wrap--article { max-width: 780px; }

/* ---------- Page header (non-home pages) --------------------------------- */

.pagehead {
	background:
		radial-gradient(760px 340px at 82% -20%, rgba(191,30,45,.26), transparent 60%),
		var(--black);
	color: #fff;
	padding: clamp(48px, 8vw, 86px) 0 clamp(40px, 6vw, 64px);
	border-bottom: 4px solid var(--red);
}
.pagehead__title {
	color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; margin: 0 0 16px;
}
.pagehead__lede { font-size: clamp(1rem, 1.8vw, 1.18rem); color: rgba(255,255,255,.82); max-width: 62ch; margin: 0; }
.pagehead__lede a { color: #fff; text-decoration: underline; }

.crumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; font-size: 14px; }
.crumbs a { color: rgba(255,255,255,.72); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span { color: rgba(255,255,255,.34); }

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

.svc-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3d3da; }
.svc-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }

.svc-card__media { aspect-ratio: 16 / 10; background: #ededf0; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.svc-card:hover .svc-card__media img { transform: scale(1.03); }
.svc-card__media--empty {
	background: linear-gradient(135deg, #1a1a1e 0%, var(--black) 55%, #2a0a0f 100%);
	position: relative;
}
.svc-card__media--empty::after {
	content: ''; position: absolute; left: 50%; top: 50%; width: 42px; height: 3px;
	background: var(--red); transform: translate(-50%, -50%);
}

.svc-card__body { padding: 22px 24px 26px; }
.svc-card__title { font-size: 1.2rem; font-weight: 600; margin: 0 0 8px; }
.svc-card__text { margin: 0 0 14px; color: var(--ink-soft); font-size: .96rem; }
.svc-card__more { font-size: .85rem; font-weight: 700; color: var(--red); letter-spacing: .04em; text-transform: uppercase; }
.svc-card__more::after { content: ' →'; }

/* Homepage numbered cards, now links */
.card--linked { padding: 0; }
.card--linked .card__link { display: block; padding: 34px 26px 28px; color: inherit; text-decoration: none; }
.card__more { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--red); letter-spacing: .04em; text-transform: uppercase; }
.card__more::after { content: ' →'; }

.section__after { margin: 34px 0 0; text-align: center; }
.btn--dark { border-color: #cfcfd6; color: var(--ink); }
.btn--dark:hover { border-color: var(--black); background: rgba(16,16,18,.04); }

/* ---------- Download list (Forms) ---------------------------------------- */

.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dl-item {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 22px 24px;
}
.dl-item__text { min-width: min(100%, 260px); flex: 1 1 auto; }
.dl-item__title { font-size: 1.25rem; margin: 0; }
.dl-item__desc { margin: 6px 0 0; color: var(--ink-soft); font-size: .98rem; }
.dl-item__btn { flex: 0 0 auto; white-space: nowrap; }
/* Sits inside the button, so it must not inherit the link colour on hover. */
.dl-item__size { font-weight: 400; opacity: .82; font-size: .88em; }

@media (max-width: 560px) {
	.dl-item { align-items: stretch; }
	.dl-item__btn { width: 100%; text-align: center; }
}

/* ---------- Entry detail (services, treatments, providers) --------------- */

.svc-hero { margin: 0 0 34px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.svc-hero img { width: 100%; height: auto; display: block; }

/* Outbound link on a provider page. Sits below the body copy,
   separated enough that it does not read as part of the last paragraph. */
.entry__link { margin: 34px 0 0; }

/* ---------- Rich text (sanitised admin HTML) ----------------------------- */

.prose { font-size: 1.06rem; line-height: 1.75; color: var(--ink); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
	font-family: var(--display); font-size: clamp(1.5rem, 3vw, 1.95rem);
	font-weight: 600; margin: 1.7em 0 .5em; padding-top: .2em;
}
.prose h3 { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; margin: 1.5em 0 .45em; }
.prose h4 { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin: 1.4em 0 .4em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--red-dark); }
.prose blockquote {
	margin: 1.5em 0; padding: 4px 0 4px 20px;
	border-left: 3px solid var(--red); color: var(--ink-soft); font-style: italic;
}
.prose strong, .prose b { font-weight: 700; }

/* ---------- Closing CTA -------------------------------------------------- */

.cta__inner { text-align: center; }
.cta .section__lede { margin-inline: auto; margin-bottom: 30px; }
.cta .hero__actions { justify-content: center; }

/* Elements added to the editor allowlist */
.prose hr {
	border: 0; border-top: 2px solid var(--line);
	margin: 2.4em 0; max-width: 140px;
}
.prose s, .prose strike, .prose del { text-decoration: line-through; color: var(--ink-soft); }
.prose u { text-decoration: underline; text-underline-offset: 2px; }
.prose sup, .prose sub { font-size: .74em; line-height: 0; }
.prose ol { counter-reset: none; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: .4em 0 .2em; }