/* ==========================================================================
   SimpleNursing — Pricing Table v3 (Canada / CAD)
   --------------------------------------------------------------------------
   Ported from the US marketing site's pricing-table-v3 (css/pricing-table-v3.css,
   PR #938 / ENGINEER-2754, itself extracted from the homepage v3 redesign —
   PR #937 / ENGINEER-2750) for ENGINEER-2755 (Canada new pricing tiers).

   The US version's local @font-face declarations (../assets/fonts/poppins/*)
   don't exist in this theme, so Poppins is instead enqueued from Google Fonts
   by the including template (template-pricing-v2.php).

   Wrap the template-part's output in <div class="sn-home"> — the base rules
   below are scoped to that class, matching how the homepage renders them.
   ========================================================================== */

:root {
	/* --- Brand ------------------------------------------------------------ */
	--sn-navy: #14304f;
	--sn-navy-deep: #0d2338;
	--sn-pink: #dc2d5a;
	--sn-blue: #1f93d0;
	--sn-sky: #75c7e6;
	--sn-sky-mid: #5ab6e8;
	--sn-green: #62d070;
	--sn-green-deep: #3aa85a;
	--sn-amber: #d98038;
	--sn-star: #f6a774;
	--sn-plum: #4a2170;
	--sn-plum-tint: #ede6f5;
	--sn-plum-off: #e0dae8;

	/* RGB channel lists so rgba() can reuse the brand colours at any alpha. */
	--sn-navy-rgb: 20, 48, 79;
	--sn-pink-rgb: 220, 45, 90;
	--sn-blue-rgb: 31, 147, 208;
	--sn-sky-rgb: 117, 199, 230;
	--sn-deep-rgb: 13, 35, 56;
	--sn-white-rgb: 255, 255, 255;

	/* --- Text ------------------------------------------------------------ */
	--sn-text: #14304f;
	--sn-text-body: #4a6079;
	--sn-text-soft: #2b435f;
	--sn-text-quote: #34506f;
	--sn-text-muted: #94a6bb;
	--sn-text-mono: #55708f;
	--sn-on-dark: #a9c0da;
	--sn-on-dark-soft: #6f8bab;
	--sn-on-dark-bright: #dbe6f2;
	--sn-on-dark-pill: #cfe6f4;
	--sn-pink-soft: #ff9db8;
	--sn-pink-soft-alt: #ff86a6;

	/* --- Surfaces -------------------------------------------------------- */
	--sn-white: #ffffff;
	--sn-mist: #f5f8fc;
	--sn-mist-alt: #f7fafd;
	--sn-cloud: #e7eef6;
	--sn-chip: #f0f4f9;
	--sn-field: #f0f5fa;

	/* --- Borders --------------------------------------------------------- */
	--sn-border: #e2eaf3;
	--sn-border-strong: #d5e1ee;
	--sn-border-field: #dbe5f0;
	--sn-hairline: #eef3f9;
	--sn-hairline-alt: #f2f5f9;
	--sn-grip: #d9e2ec;
	--sn-arrow: #c3d2e2;

	/* --- Tints ----------------------------------------------------------- */
	--sn-tint-pink: #fbe0ea;
	--sn-tint-blue: #e3f1fa;
	--sn-tint-green: #eefaf1;
	--sn-tint-green-line: #c7ecd2;
	--sn-tint-amber: #fdefe4;

	/* --- Type ------------------------------------------------------------ */
	--sn-font: "Poppins", -apple-system, system-ui, sans-serif;

	/* --- Layout ---------------------------------------------------------- */
	--sn-max: 1200px;
	--sn-max-narrow: 1080px;
	--sn-sheet-max: 460px;

	/* Gutter and section rhythm scale up with the viewport, so these are
	   redefined at md and lg rather than hard-coded per section. */
	--sn-gutter: 18px;
	--sn-section-y: 52px;

	/* --- Radii ----------------------------------------------------------- */
	--sn-r-sm: 8px;
	--sn-r-md: 12px;
	--sn-r-lg: 16px;
	--sn-r-xl: 20px;
	--sn-r-2xl: 22px;
	--sn-r-pill: 999px;

	/* --- Elevation ------------------------------------------------------- */
	--sn-sh-card: 0 10px 30px rgba(var(--sn-navy-rgb), .05);
	--sn-sh-standout: 0 22px 50px rgba(var(--sn-navy-rgb), .28);
	--sn-sh-sheet: 0 -20px 60px rgba(var(--sn-deep-rgb), .4);
	--sn-sh-overlay: 0 40px 90px rgba(var(--sn-deep-rgb), .45);

	/* --- Motion ---------------------------------------------------------- */
	--sn-ease: cubic-bezier(.2, .7, .2, 1);
	--sn-reveal-dur: .75s;
}

/* Gutter + vertical rhythm grow with the viewport. */
@media (min-width: 768px) {
	.sn-home {
		--sn-gutter: 24px;
		--sn-section-y: 72px;
	}
}

@media (min-width: 992px) {
	.sn-home {
		--sn-section-y: 88px;
	}
}


/* ==========================================================================
   01. BASE + SCOPING
   Everything is scoped to .sn-home so this stylesheet can drop into any page
   without leaking into the header, footer or admin bar.
   ========================================================================== */

.sn-home {
	color: var(--sn-text);
	-webkit-font-smoothing: antialiased;
}

.sn-home *,
.sn-home *::before,
.sn-home *::after {
	box-sizing: border-box;
	font-family: var(--sn-font);
	letter-spacing: normal;
}

.sn-home a {
	color: var(--sn-blue);
	text-decoration: none;
}

.sn-home a:hover {
	color: var(--sn-navy);
}

.sn-home button {
	font-family: var(--sn-font);
	outline: unset !important;
}

.sn-home img,
.sn-home svg {
	max-width: 100%;
}

/* Screen-reader-only text, used for section labels that are visually implied. */
.sn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Anchor wrappers carry the section IDs and the sticky-header scroll offset. */
.sn-anchor {
	scroll-margin-top: 90px;
}

@media (min-width: 992px) {
	.sn-anchor {
		scroll-margin-top: 70px;
	}
}


/* ==========================================================================
   02. LAYOUT SCAFFOLDING (subset — only what the pricing table uses)
   ========================================================================== */

.sn-container {
	max-width: var(--sn-max);
	margin: 0 auto;
}

.sn-container--narrow {
	max-width: var(--sn-max-narrow);
	margin: 0 auto;
}


/* ==========================================================================
   03. TYPE (subset — only what the pricing table uses)
   ========================================================================== */

.sn-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sn-blue);
	margin-bottom: 10px;
}

.sn-h2 {
	font-size: 28px;
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 12px;
	color: var(--sn-navy);
}

.sn-h2--lg {
	font-size: 27px;
}

.sn-lead {
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--sn-text-body);
	margin: 0;
}

.sn-lead--sm {
	font-size: 15px;
}

.sn-strong--white {
	color: var(--sn-white);
	font-weight: 700;
}

.sn-accent {
	color: var(--sn-pink);
}

#pricing .sn-fineprint {
	text-align: center;
	margin: 22px auto 0;
	max-width: 825px;
}

.sn-fineprint {
	text-align: left;
	font-size: 12px;
	color: var(--sn-text-muted);
	max-width: 1035px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.sn-h2 {
		font-size: 32px;
	}

	.sn-h2--lg {
		font-size: 32px;
	}

	.sn-lead {
		font-size: 17px;
	}

	.sn-lead--sm {
		font-size: 16px;
	}

	.sn-eyebrow {
		font-size: 12.5px;
		letter-spacing: .13em;
		margin-bottom: 12px;
	}
}

@media (min-width: 992px) {
	.sn-h2 {
		font-size: 38px;
		line-height: 1.14;
		margin-bottom: 16px;
	}

	.sn-h2--lg {
		font-size: 40px;
	}

	.sn-lead {
		font-size: 19px;
	}

	.sn-lead--sm {
		font-size: 17px;
	}

	.sn-eyebrow {
		font-size: 13px;
		letter-spacing: .14em;
		margin-bottom: 14px;
	}

	.sn-fineprint {
		font-size: 13px;
		margin-top: 28px;
	}
}

@media (min-width: 1200px) {
	.sn-h2 {
		font-size: 42px;
	}

	.sn-h2--lg {
		font-size: 38px;
	}
}


/* ==========================================================================
   08. SCROLL REVEAL
   Reveal is suppressed below lg: on a phone the animation fires while the
   element is already in view, which reads as a flicker.
   ========================================================================== */

.sn-reveal {
	opacity: 1;
	transform: none;
}

@media (min-width: 992px) {
	.sn-reveal {
		opacity: 0;
		transition:
			opacity var(--sn-reveal-dur) var(--sn-ease),
			transform var(--sn-reveal-dur) var(--sn-ease);
	}

	.sn-reveal--up {
		transform: translateY(34px);
	}

	.sn-reveal.is-shown {
		opacity: 1;
		transform: none;
	}

	/* Failsafe: if the script never runs, content must still be visible. */
	.no-js .sn-reveal {
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   09. OVERLAYS
   Presented as a bottom sheet on phones and a centred modal from lg.
   ========================================================================== */

.sn-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(var(--sn-deep-rgb), .62);
	align-items: flex-end;
	justify-content: center;
}

.sn-overlay.is-open {
	display: flex;
}

.sn-overlay__dialog {
	background: var(--sn-white);
	color: var(--sn-navy);
	text-align: left;
	width: 100%;
	max-width: var(--sn-sheet-max);
	max-height: 82vh;
	overflow: auto;
	position: relative;
	border-radius: var(--sn-r-2xl) var(--sn-r-2xl) 0 0;
	padding: 26px 22px 28px;
	box-shadow: var(--sn-sh-sheet);
}

/* Drag handle — only meaningful on the sheet. */
.sn-overlay__grip {
	width: 40px;
	height: 4px;
	border-radius: 4px;
	background: var(--sn-grip);
	margin: 0 auto 18px;
}

.sn-overlay__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--sn-chip);
	color: var(--sn-text-body);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.sn-overlay__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sn-blue);
	margin-bottom: 8px;
}

.sn-overlay__title {
	font-size: 22px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.015em;
	margin: 0 0 12px;
}

.sn-overlay__intro {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sn-text-body);
	margin: 0 0 20px;
}

/* Only the active pane inside an overlay is shown. */
.sn-pane {
	display: none;
}

.sn-pane.is-active {
	display: block;
}

/* Lock background scroll while an overlay is open. */
body.sn-overlay-open {
	overflow: hidden;
}

@media (min-width: 992px) {
	.sn-overlay {
		align-items: center;
		padding: var(--sn-gutter);
		backdrop-filter: blur(4px);
	}

	.sn-overlay__dialog {
		max-width: 540px;
		max-height: 88vh;
		border-radius: var(--sn-r-2xl);
		padding: 36px;
		box-shadow: var(--sn-sh-overlay);
	}
}


/* ==========================================================================
   18. SECTION — PRICING
   ========================================================================== */

.sn-pricing {
	padding: 56px 24px 72px;
	background: var(--sn-mist);
}

.sn-pricing__intro {
	text-align: center;
	margin-bottom: 18px;
}

/* Canada-only currency clarifier under the intro copy (ENGINEER-2755). */
.sn-pricing__cad-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 8px 15px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sn-blue);
	background: var(--sn-tint-blue);
	border-radius: var(--sn-r-pill);
}

@media (min-width: 992px) {
	.sn-pricing__intro .sn-lead {
		max-width: 670px;
		margin-left: auto;
		margin-right: auto;
	}
}

.sn-pricing__tabs-row {
	text-align: left;
}

@media (min-width: 992px) {
	.sn-pricing__tabs-row {
		max-width: 960px;
		margin: 0 auto;
	}
}

/* Product tabs: full-width segmented control on phones, left-aligned pill
   group (matching the card grid below) from md. */
.sn-tabs {
	display: flex;
	background: var(--sn-cloud);
	padding: 5px;
	border-radius: var(--sn-r-pill);
	gap: 4px;
	margin: 0 0 18px;
}

.sn-tabs__btn {
	flex: 1;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	padding: 7px 0;
	border-radius: var(--sn-r-pill);
	background: transparent;
	color: var(--sn-text-body);
	transition: background .15s, color .15s;
}

.sn-tabs__btn.is-active {
	background: var(--sn-navy);
	color: var(--sn-white);
}

@media (min-width: 768px) {
	.sn-tabs {
		width: fit-content;
		margin: 0 0 26px;
	}

	.sn-tabs__btn {
		flex: 0 0 auto;
		font-size: 15px;
		padding: 11px 26px;
	}
}

@media (min-width: 992px) {
	.sn-pricing__intro {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}
}

/* --- Plan grid ---------------------------------------------------------- */

.sn-pricing__grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

@media (min-width: 992px) {
	.sn-pricing__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: stretch;
		max-width: 960px;
		margin: 0 auto;
	}
}

/* Every product and every billing term is in the page; only the active one is
   displayed. Hidden product panels are display:none so they drop out of the
   grid rather than leaving an empty column. */
[data-sn-product-panel],
.sn-term-pane {
	display: none;
}

[data-sn-product-panel].is-active {
	display: flex;
}

.sn-term-pane.is-active {
	display: block;
}

/* Without the script the tabs can't switch, so show everything stacked. */
.no-js [data-sn-product-panel],
.no-js .sn-term-pane {
	display: block;
}

/* --- Plan card ---------------------------------------------------------- */

.sn-plan {
	background: var(--sn-white);
	border: 1px solid var(--sn-border);
	border-radius: 18px;
	padding: 24px 20px;
	flex-direction: column;
	box-shadow: var(--sn-sh-card);
}

/* The Full Journey card isn't a switchable panel, so it needs its own display. */
.sn-plan--fj {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sn-navy);
	border-color: var(--sn-navy);
	box-shadow: var(--sn-sh-standout);
}

.sn-plan__kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sn-blue);
	margin-bottom: 0 0 18px;
}

.sn-plan__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 6px;
	letter-spacing: -.01em;
}

.sn-plan__blurb {
	font-size: 14px;
	line-height: 1.45;
	color: var(--sn-text-body);
	margin: 0 0 18px;
}

.sn-plan__label {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sn-text-muted);
	margin-bottom: 8px;
}

.sn-plan__ribbon {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 5px 14px;
	border-radius: var(--sn-r-pill);
	border: 1.5px solid var(--sn-sky-mid);
	margin: 0 0 18px;
	line-height: normal;
}

.sn-plan__ribbon span {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sn-sky-mid);
}

.sn-plan__equiv {
	font-size: 13.5px;
	line-height: 1.4;
	margin: 6px 0 12px;
	color: var(--sn-on-dark);
}

.sn-plan__bestfor {
	font-size: 13px;
	line-height: 1.4;
	color: var(--sn-text-body);
	margin-bottom: 20px;
}

.sn-plan__bestfor-label {
	font-weight: 700;
	color: var(--sn-pink);
}

.sn-pricing__grid .sn-plan__choose {
	display: block;
	text-align: center;
	background: var(--sn-navy);
	color: var(--sn-white);
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
	border-radius: var(--sn-r-md);
	margin-bottom: 22px;
}

.sn-pricing__grid .sn-plan__choose:hover {
	color: var(--sn-white);
	opacity: .92;
	text-decoration: unset;
}

.sn-plan__included {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sn-text-muted);
	margin-bottom: 14px;
}

.sn-plan__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.sn-plan__features li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.4;
	color: var(--sn-text-soft);
}

.sn-plan__features svg {
	flex-shrink: 0;
	margin-top: 1px;
}

/* Full Journey colour overrides. */
.sn-plan--fj .sn-plan__title {
	color: var(--sn-white);
}

.sn-plan--fj .sn-plan__blurb {
	color: var(--sn-on-dark);
}

.sn-plan--fj .sn-plan__bestfor {
	color: var(--sn-on-dark);
}

.sn-plan--fj .sn-plan__bestfor-label {
	color: var(--sn-pink-soft);
}

.sn-plan--fj .sn-plan__included {
	color: var(--sn-on-dark-soft);
}

.sn-plan--fj .sn-plan__features li {
	color: var(--sn-on-dark-bright);
}

.sn-plan--fj .sn-plan__choose {
	background: var(--sn-pink);
	margin-bottom: 20px;
}

@media (min-width: 992px) {
	.sn-plan {
		border-radius: var(--sn-r-xl);
		padding: 34px 30px;
	}

	.sn-plan--fj {
		transform: translateY(-6px);
	}

	.sn-plan__kicker {
		font-size: 13px;
		letter-spacing: .08em;
	}

	.sn-plan__title {
		font-size: 26px;
	}

	.sn-plan__blurb {
		min-height: 40px;
	}

	.sn-plan--fj .sn-plan__blurb {
		min-height: 0;
		margin-bottom: 20px;
	}

	.sn-plan__ribbon span {
		font-size: 11px;
	}

	.sn-plan__equiv {
		font-size: 14px;
	}

	.sn-plan__bestfor {
		font-size: 13.5px;
		margin-bottom: 24px;
	}

	.sn-plan__choose {
		font-size: 16px;
		padding: 15px;
		margin-bottom: 24px;
	}

	.sn-plan__included {
		font-size: 13px;
	}

	.sn-plan__features {
		gap: 12px;
	}

	.sn-plan__features li {
		font-size: 14.5px;
		gap: 11px;
	}
}

/* --- Billing-term switcher ---------------------------------------------- */

.sn-terms {
	display: flex;
	flex-wrap: wrap;
	background: var(--sn-field);
	border: 1px solid var(--sn-border-field);
	padding: 6px;
	border-radius: 14px;
	gap: 6px;
	margin-bottom: 20px;
}

.sn-terms__btn {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1;
	padding: 12px 8px;
	border-radius: 11px;
	background: transparent;
	color: var(--sn-text-body);
	box-shadow: none;
	transition: background .15s, color .15s, box-shadow .15s;
}

.sn-terms__btn.is-active {
	background: var(--sn-navy);
	color: var(--sn-white);
	box-shadow: 0 2px 6px rgba(var(--sn-navy-rgb), .18);
}

.sn-terms__badge {
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--sn-r-pill);
	background: var(--sn-tint-blue);
	color: var(--sn-blue);
}

.sn-terms__btn.is-active .sn-terms__badge {
	background: rgba(var(--sn-white-rgb), .22);
	color: var(--sn-white);
}

@media (min-width: 992px) {
	.sn-terms {
		margin-bottom: 22px;
	}

	.sn-terms__btn {
		font-size: 14px;
		padding: 14px 12px;
	}

	.sn-terms__badge {
		font-size: 11px;
	}
}

/* --- Price -------------------------------------------------------------- */

.sn-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 20px;
}

.sn-price__major {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.sn-price__unit {
	font-size: 16px;
	font-weight: 600;
	color: var(--sn-text-body);
}

.sn-price__detail {
	font-size: 13.5px;
	color: var(--sn-text-body);
	margin: 4px 0 12px;
}

.sn-plan--fj .sn-price__major {
	color: var(--sn-white);
}

.sn-plan--fj .sn-price__unit {
	color: var(--sn-on-dark);
}

.sn-plan--fj .sn-price__detail {
	color: var(--sn-on-dark);
}

@media (min-width: 992px) {
	.sn-price__major {
		font-size: 46px;
	}

	.sn-price__unit {
		font-size: 18px;
	}

	.sn-price__detail {
		font-size: 14px;
		min-height: 20px;
	}
}

/* --- Pass guarantee ----------------------------------------------------- */

.sn-guarantee {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: rgba(var(--sn-pink-rgb), .16);
	border: 1px solid rgba(var(--sn-pink-rgb), .55);
	border-radius: 14px;
	padding: 14px 16px;
	margin: 8px 0 22px;
}

.sn-guarantee svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.sn-guarantee__title {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--sn-pink-soft-alt);
	letter-spacing: -.01em;
	margin-bottom: 2px;
}

.sn-guarantee__body {
	font-size: 13px;
	line-height: 1.4;
	color: var(--sn-on-dark-bright);
}

@media (min-width: 992px) {
	.sn-guarantee__title {
		font-size: 15px;
	}

	.sn-guarantee__body {
		font-size: 13.5px;
	}
}

.sn-compare__hint {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sn-blue);
	background: var(--sn-tint-blue);
	padding: 7px 13px;
	border-radius: var(--sn-r-pill);
	margin-bottom: 18px;
}

/* Canada-only currency clarifier next to the compare-table hint (ENGINEER-2755). */
.sn-compare__cad-chip {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sn-navy);
	background: var(--sn-chip);
	border: 1px solid var(--sn-border);
	padding: 7px 13px;
	border-radius: var(--sn-r-pill);
	margin: 0 0 18px 10px;
}

.sn-compare__featbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	appearance: none;
	background: none;
	margin: 0;
	padding: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	border: none;
	border-bottom: 1px dotted var(--sn-arrow);
	outline: none;
	forced-color-adjust: none;
	transition: color .15s, border-color .15s;
}

.sn-compare__featbtn:hover,
.sn-compare__featbtn:focus-visible {
	color: var(--sn-blue);
	border-bottom-color: var(--sn-blue);
}

.sn-compare__featbtn:focus-visible {
	outline: 2px solid var(--sn-blue);
	outline-offset: 3px;
}

.sn-compare__qm {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--sn-tint-blue);
	color: var(--sn-blue);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	transition: background .15s, color .15s;
}

.sn-compare__featbtn:hover .sn-compare__qm,
.sn-compare__featbtn:focus-visible .sn-compare__qm {
	background: var(--sn-blue);
	color: var(--sn-white);
}

.sn-compare {
	padding: 48px 24px 64px;
	background: var(--sn-white);
	border-top: 1px solid var(--sn-border);
}

.sn-compare__head {
	max-width: 620px;
	margin: 0 0 24px;
}

.sn-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sn-compare__table {
	width: 100%;
	/* Canada has no NCLEX-PN column (2 plan cols instead of 3) — narrower than
	   the US version's 900px so this doesn't force horizontal scroll unnecessarily. */
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.sn-compare__col--label {
	width: 220px;
}

.sn-compare__col--plan {
	width: 150px;
}

.sn-compare__col--fj {
	width: 200px;
}

.sn-compare__table th,
.sn-compare__table td {
	padding: 12px 24px;
	vertical-align: middle;
	text-align: center;
}

.sn-compare__table .sn-compare__label-cell {
	text-align: left;
	padding-left: 0;
	padding-right: 12px;
}

.sn-compare__table thead th {
	vertical-align: bottom;
	padding: 0 10px 16px;
	font-weight: 400;
}

.sn-compare__table thead th.sn-compare__label-cell {
	padding: 0;
}

.sn-compare__plan-name {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin-bottom: 6px;
}

.sn-compare__plan-flag {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sn-pink);
	margin-bottom: 4px;
}

.sn-compare__start-at {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sn-text-muted);
	margin-bottom: 2px;
}

.sn-compare__price {
	display: flex;
	align-items: baseline;
	gap: 3px;
	justify-content: center;
}

.sn-compare__price-major {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.sn-compare__price-unit {
	font-size: 12px;
	font-weight: 600;
	color: var(--sn-text-body);
}

.sn-compare__price-note {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: var(--sn-text-body);
	margin-top: 4px;
	min-height: 28px;
}

.sn-compare__fj {
	background: var(--sn-mist);
	border-left: 1.5px solid var(--sn-navy);
	border-right: 1.5px solid var(--sn-navy);
}

.sn-compare__table thead th.sn-compare__fj {
	padding-top: 16px;
	border-top: 1.5px solid var(--sn-navy);
	border-top-left-radius: var(--sn-r-lg);
	border-top-right-radius: var(--sn-r-lg);
}

.sn-compare__cta-row td.sn-compare__fj {
	border-bottom: 1.5px solid var(--sn-navy);
	border-bottom-left-radius: var(--sn-r-lg);
	border-bottom-right-radius: var(--sn-r-lg);
}

.sn-compare__table tbody td,
.sn-compare__table tbody th {
	border-top: 1px solid var(--sn-border);
}

.sn-compare__table .sn-compare__group {
	text-align: left;
	padding: 18px 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sn-blue);
}

.sn-compare__group-fj {
	padding: 18px 10px 6px;
}

.sn-compare__label-cell[scope="row"] {
	font-size: 13px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--sn-text-soft);
}

.sn-compare__value {
	font-size: 12.5px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--sn-navy);
}

.sn-compare__yes {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--sn-tint-blue);
	color: var(--sn-blue);
}

.sn-compare__no {
	color: var(--sn-arrow);
	font-size: 14px;
	font-weight: 600;
}

.sn-compare__cta-row td {
	padding: 18px 8px;
}

.sn-compare__cta-row td.sn-compare__fj {
	padding: 18px 14px;
}

.sn-compare__choose {
	width: 100%;
	background: transparent;
	border: 1.5px solid var(--sn-navy);
	color: var(--sn-navy);
	font-weight: 700;
	font-size: 12.5px;
	padding: 10px 6px;
	border-radius: var(--sn-r-sm);
	cursor: pointer;
	transition: background .15s, color .15s;
}

.sn-compare__choose:hover {
	background: var(--sn-navy);
	color: var(--sn-white);
}

.sn-compare__get-fj {
	display: block;
	width: 100%;
	background: var(--sn-pink);
	color: var(--sn-white) !important;
	font-weight: 700;
	font-size: 13px;
	padding: 12px 8px;
	border-radius: var(--sn-r-md);
	text-align: center;
	transition: background .15s;
}

.sn-compare__get-fj:hover {
	background: #c32450;
	color: var(--sn-white);
	text-decoration: none;
}

@media (max-width: 767px) {
	.sn-compare {
		display: none;
	}
}

@media (min-width: 992px) {
	.sn-compare {
		padding: 64px var(--sn-gutter) 80px;
		padding-bottom: 0;
	}

	.sn-compare__head {
		margin-bottom: 32px;
	}
}

/* --- Plan-length modal options ------------------------------------------- */

.sn-plan-length__opts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sn-plan-length__opt {
	width: 100%;
	text-align: left;
	background: var(--sn-mist);
	border: 1.5px solid var(--sn-border);
	border-radius: var(--sn-r-lg);
	padding: 16px 18px;
	cursor: pointer;
	transition: border-color .15s;
}

.sn-plan-length__opt:hover,
.sn-plan-length__opt:focus-visible {
	border-color: var(--sn-blue);
}

.sn-plan-length__opt-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 2px;
}

.sn-plan-length__opt-name {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--sn-navy);
}

.sn-plan-length__opt-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--sn-r-pill);
	background: var(--sn-tint-blue);
	color: var(--sn-blue);
	white-space: nowrap;
}

.sn-plan-length__opt-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 4px;
}

.sn-plan-length__opt-major {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--sn-navy);
}

.sn-plan-length__opt-unit {
	font-size: 13px;
	font-weight: 600;
	color: var(--sn-text-body);
}

.sn-plan-length__opt-detail {
	display: block;
	font-size: 13px;
	color: var(--sn-text-body);
	margin-bottom: 8px;
}

.sn-plan-length__opt-best {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sn-text-soft);
}

.sn-plan-length__opt-best b {
	font-weight: 700;
	color: var(--sn-pink);
}