.hcp-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.hcp-popup[hidden] { display: none; }

body.hcp-popup-open { overflow: hidden; }

.hcp-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 40, 65, 0.6);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.hcp-popup.is-open .hcp-popup__backdrop { opacity: 1; }

.hcp-popup__dialog {
	position: relative;
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	max-width: 480px;
	width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 1.75rem 1.75rem 1.25rem;
	text-align: center;
}

.hcp-popup.is-open .hcp-popup__dialog {
	opacity: 1;
	transform: none;
}

/* Honour a system setting for reduced motion: fade only, no movement. */
@media (prefers-reduced-motion: reduce) {
	.hcp-popup__backdrop,
	.hcp-popup__dialog { transition-duration: 0.15s; }
	.hcp-popup__dialog { transform: none; }
}

.hcp-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: #0e2841;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}

.hcp-popup__close:hover { color: #000; }

/* The document's header line is the headline; "Live Now:" opens the body
   sentence there, so it leads the paragraph rather than becoming a heading. */
/* Padding both sides, not just right: the close button needs the clearance, but
   clearing it on one side alone shifts centred text off the dialog's axis. */
.hcp-popup__title {
	margin: 0 0 0.7rem;
	padding: 0 1.5rem;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.3;
	color: #0e2841;
}

.hcp-popup__live { color: #00a2c4; }

.hcp-popup__highlight { color: #00a2c4; }

/* Widow control. The copy binds its own last two words with non-breaking spaces,
   which holds everywhere; this pulls an earlier word down as well on browsers
   that support it, and is ignored by those that do not. */
.hcp-popup__title,
.hcp-popup__lede,
.hcp-popup__footnote { text-wrap: pretty; }

.hcp-popup__lede {
	margin: 0 0 0.9rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: #4a5055;
}

/* The two parts sit on one line where there is room and stack cleanly where
   there is not — never leaving the "+" orphaned at the end of a line. */
.hcp-popup__parts {
	list-style: none;
	margin: 0 0 0.9rem;
	padding: 0.75rem 0.5rem;
	background: #f4fbfd;
	border-radius: 8px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #0e2841;
}

.hcp-popup__parts li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	line-height: 1.2;
	text-align: left;
}

/* Each part label stays on one line — a label broken across two reads as a
   widow in a block this short. */
.hcp-popup__parts span { white-space: nowrap; }

/* The theme rounds every image by 6px, which visibly shaves the corners off a
   20px icon, and gives images a bottom margin that pushes them off the text
   baseline. Reset both here rather than site-wide. */
.hcp-popup__parts img {
	display: block;
	width: auto;
	height: 1.15rem;
	flex: none;
	margin: 0;
	border-radius: 0;
}

.hcp-popup__plus { font-weight: 400; color: #0e2841; }

.hcp-popup__accreditation {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin: 0 auto 1rem;
}

.hcp-popup__cta {
	display: inline-block;
	background: #00b3d6;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	text-decoration: none;
	padding: 0.8rem 2rem;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.hcp-popup__cta:hover,
.hcp-popup__cta:focus { background: #0098b8; color: #fff; }

.hcp-popup__footnote {
	margin: 0.9rem 0 0;
	font-size: 0.68rem;
	line-height: 1.45;
	color: #8a9196;
}

/* Short viewports (small phones, landscape): compress so the CTA stays above
   the fold rather than pushing the dialog into its own scrollbar. */
@media (max-height: 720px) {
	.hcp-popup__dialog { padding: 1.25rem 1.15rem 1rem; }
	.hcp-popup__title { margin-bottom: 0.5rem; }
	.hcp-popup__lede { margin-bottom: 0.65rem; line-height: 1.45; }
	.hcp-popup__parts { margin-bottom: 0.65rem; padding: 0.5rem; }
	.hcp-popup__accreditation { max-width: 195px; margin-bottom: 0.75rem; }
	.hcp-popup__cta { padding: 0.7rem 1.75rem; }
	.hcp-popup__footnote { margin-top: 0.7rem; font-size: 0.62rem; }
}

/* Phone landscape. Very little height, so the accreditation block and the copy
   both shrink and the dialog widens to use the horizontal room instead. */
@media (max-height: 500px) {
	.hcp-popup { padding: 0.5rem; }
	.hcp-popup__dialog { max-width: 620px; padding: 1rem 1.25rem 0.85rem; }
	.hcp-popup__title { font-size: 1rem; margin-bottom: 0.35rem; }
	.hcp-popup__lede { font-size: 0.82rem; margin-bottom: 0.5rem; line-height: 1.4; }
	.hcp-popup__parts { flex-direction: row; margin-bottom: 0.5rem; padding: 0.4rem; font-size: 0.82rem; }
	.hcp-popup__accreditation { max-width: 150px; margin-bottom: 0.6rem; }
	.hcp-popup__cta { padding: 0.6rem 1.5rem; font-size: 0.88rem; }
	.hcp-popup__footnote { margin-top: 0.55rem; font-size: 0.58rem; }
}

@media (max-width: 480px) {
	.hcp-popup { padding: 0.75rem; }
	.hcp-popup__dialog { padding: 1.5rem 1.15rem 1.15rem; }
	.hcp-popup__title { font-size: 1.02rem; padding: 0 1.75rem; }
	.hcp-popup__lede { font-size: 0.88rem; }
	.hcp-popup__accreditation { max-width: 230px; }

	/* Stack the parts so neither wraps mid-label and the "+" sits between. */
	.hcp-popup__parts {
		flex-direction: column;
		gap: 0.35rem;
		padding: 0.7rem 0.5rem;
	}
}