.hmf-section-heading .hmf-section-heading__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--hc-blue-deep);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.9;
}

.hmf-section-heading .hmf-section-heading__heading {
	margin: 0;
	color: var(--hc-ink);
	font-size: 30px;
	font-weight: 900;
	line-height: 1.65;
}

@media (width >= 48rem) {
	.hmf-section-heading .hmf-section-heading__heading {
		font-size: 38px;
	}
}
.hmf-section-heading {
	align-items: var(--hmf-align, start);
	gap: var(--hmf-heading-gap, 8px);
}

/* Accent: a short gold bar above the heading, placed by the widget's own alignment; it keeps
   its distance to the title whatever spacing the widget's Spacing control sets. */
:is(.hmf-accent--bar, .hmf-accent--bar-gradient) .hmf-section-heading::before {
	content: "";
	align-self: var(--hmf-align, start);
	inline-size: 44px;
	block-size: 5px;
	margin-block-end: calc(18px - var(--hmf-heading-gap, 8px));
	border-radius: 8px;
	background: var(--hc-gold);
}

:is(.hmf-accent--bar, .hmf-accent--bar-gradient) .hmf-section-heading__eyebrow {
	order: -1;
}

.hmf-accent--bar-gradient .hmf-section-heading::before {
	inline-size: 64px;
	block-size: 4px;
	margin-block-end: calc(14px - var(--hmf-heading-gap, 8px));
	border-radius: 4px;
	background: linear-gradient(90deg, var(--hc-gold), var(--hc-blue));
}

.hmf-accent--rule .hmf-section-heading__eyebrow::before {
	content: "";
	inline-size: 28px;
	block-size: 3px;
	border-radius: 3px;
	background: var(--hc-gold);
}

/* Eyebrow looks. */
:is(.hmf-eyebrow--pill, .hmf-eyebrow--star) .hmf-section-heading {
	--hmf-heading-gap: 10px;
}

:is(.hmf-eyebrow--pill, .hmf-eyebrow--star) .hmf-section-heading__eyebrow {
	align-self: var(--hmf-align, start);
	border-radius: 99px;
	font-size: 14px;
}

.hmf-eyebrow--pill .hmf-section-heading__eyebrow {
	padding: 3px 14px;
	background: var(--hc-blue-soft);
}

.hmf-eyebrow--star .hmf-section-heading {
	padding-inline: 20px;
}

.hmf-eyebrow--star .hmf-section-heading__eyebrow {
	display: inline-flex;
	gap: 8px;
	padding: 4px 16px;
	border: 1px solid #dbe5ef;
	background: var(--hc-white);
	color: var(--hc-blue);
	line-height: 2;
}

.hmf-eyebrow--star .hmf-section-heading__eyebrow::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: var(--hc-gold);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hmf-eyebrow--icon-tile .hmf-section-heading__row {
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.hmf-eyebrow--icon-tile .hmf-section-heading__icon {
	inline-size: 64px;
	block-size: 64px;
	border: 1px solid #dbe7f4;
	border-radius: 20px;
	background: var(--hc-sky);
}

.hmf-eyebrow--icon-tile .hmf-section-heading__icon-img {
	inline-size: 34px;
	block-size: 34px;
}

/* Sizes: small (section inside a page block) and large (page title). */
.hmf-size--small .hmf-section-heading__heading {
	font-size: 25px;
	line-height: 1.75;
	text-wrap: balance;
}

.hmf-size--large .hmf-section-heading__heading {
	font-size: 32px;
	text-wrap: balance;
}


/* On a navy surface: light heading, gold-tinted pill and highlight. */
:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-section-heading__heading {
	color: var(--hc-white);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-eyebrow--pill .hmf-section-heading {
	--hmf-heading-gap: 12px;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-eyebrow--pill .hmf-section-heading__eyebrow {
	padding: 4px 15px;
	border: 1px solid rgb(255 178 56 / 0.35);
	background: rgb(255 178 56 / 0.14);
	color: #ffc86b;
}

.hmf-surface--offer .hmf-eyebrow--pill .hmf-section-heading__eyebrow {
	padding-inline: 16px;
	border-color: rgb(255 178 56 / 0.45);
	background: rgb(255 178 56 / 0.16);
	color: var(--hc-gold);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-section-heading__mark {
	background: linear-gradient(transparent 74%, rgb(255 178 56 / 0.85) 74%, rgb(255 178 56 / 0.85) 92%, transparent 92%);
}

@media (width >= 48rem) {

	.hmf-eyebrow--icon-tile .hmf-section-heading__row {
		flex-direction: row;
		gap: 24px;
	}

	.hmf-eyebrow--icon-tile .hmf-section-heading__icon {
		inline-size: 76px;
		block-size: 76px;
		border-radius: 24px;
	}

	.hmf-size--small .hmf-section-heading__heading {
		font-size: 30px;
	}

	.hmf-size--large .hmf-section-heading__heading {
		font-size: 42px;
	}
}

@media (width >= 64rem) {

	.hmf-size--large .hmf-section-heading__heading {
		font-size: 48px;
	}
}

/* Proposed: side bar accent, a gold rule along the heading's start edge. */
.hmf-accent--side-bar .hmf-section-heading {
	padding-inline-start: 18px;
	border-inline-start: 4px solid var(--hc-gold);
}

@media (width >= 48rem) {

	.hmf-accent--side-bar .hmf-section-heading {
		padding-inline-start: 22px;
	}
}

/* Proposed: mark line, the highlighted words on their own line in a light accent colour. */
.hmf-accent--mark-line .hmf-section-heading__mark {
	display: block;
	padding: 0;
	background: none;
	color: var(--hc-blue-deep);
	white-space: normal;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-accent--mark-line .hmf-section-heading__mark {
	background: none;
	color: #8cc4f5;
}

:is(.hmf-accent--side-bar, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-section-heading__heading { text-wrap: balance; }
/* Syllabus spacing is inside its widget so duplicate legacy IDs cannot affect plan cards. */
.hmf-spacing--syllabus .hmf-section-heading { margin-block-end: 28px; }
@media (min-width: 768px) { .hmf-spacing--syllabus .hmf-section-heading { margin-block-end: 36px; } }