/**
 * Insurance Authority — pack styles.
 *
 * Every value references a design token (--c-*, --r*, --sh*, --gutter) defined
 * by the Design Token Engine and overridden in tokens.php. No hardcoded colours,
 * radii or shadows. Loaded only when the insurance pack is active (see load.php).
 *
 * Accessibility: focus-visible rings on all interactive elements, state conveyed
 * by text (not colour alone), and AA contrast pairs (see QA report).
 */

/* ── coverage grid ─────────────────────────────────────────────────────────*/
.nx-coverage-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--gutter, 20px);
}
.nx-coverage-grid__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	box-shadow: var(--sh);
}
.nx-coverage-grid__label {
	font-weight: 700;
	color: var(--c-text);
}
.nx-coverage-grid__blurb {
	color: var(--c-muted);
	font-size: 0.925rem;
}
.nx-coverage-grid__icon {
	inline-size: 32px;
	block-size: 32px;
	color: var(--c-primary);
}

/* ── eligibility checklist ─────────────────────────────────────────────────*/
.nx-eligibility__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.nx-eligibility__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r, 10px);
}
.nx-eligibility__state {
	font-weight: 700;
	font-size: 0.875rem;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid var(--c-border);
}
.nx-eligibility__item--yes .nx-eligibility__state {
	color: var(--c-secondary);
	border-color: var(--c-secondary);
}
.nx-eligibility__item--no .nx-eligibility__state {
	color: var(--c-text);
}
.nx-eligibility__item--maybe .nx-eligibility__state {
	color: var(--c-muted);
}

/* ── policy overview ───────────────────────────────────────────────────────*/
.nx-policy-overview__list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1px;
	background: var(--c-border);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	overflow: hidden;
}
.nx-policy-overview__row {
	background: var(--c-surface);
	padding: 16px 20px;
}
.nx-policy-overview__term {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-muted);
	margin: 0 0 4px;
}
.nx-policy-overview__value {
	margin: 0;
	font-weight: 700;
	color: var(--c-text);
}

/* ── premium factors ───────────────────────────────────────────────────────*/
.nx-premium-factors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.nx-premium-factors__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	padding: 14px 18px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-inline-start: 3px solid var(--c-border);
	border-radius: var(--r, 10px);
}
.nx-premium-factors__item--up {
	border-inline-start-color: var(--c-accent);
}
.nx-premium-factors__item--down {
	border-inline-start-color: var(--c-secondary);
}
.nx-premium-factors__factor {
	font-weight: 700;
	color: var(--c-text);
}
.nx-premium-factors__dir {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--c-muted);
}
.nx-premium-factors__note {
	grid-column: 1 / -1;
	color: var(--c-muted);
	font-size: 0.9rem;
}

/* ── quick answer / breadcrumbs (article) ──────────────────────────────────*/
.nx-quick-answer {
	padding: 20px 24px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-inline-start: 4px solid var(--c-primary);
	border-radius: var(--r, 10px);
	margin: 0 0 24px;
}
.nx-quick-answer__title {
	margin: 0 0 8px;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-primary);
}

/* ── accessibility: visible focus for all interactive elements ─────────────*/
.nx-coverage-grid a:focus-visible,
.nx-eligibility a:focus-visible,
.nx-premium-factors a:focus-visible,
.nx-quick-answer a:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

/* ── homepage sections (Phase 4 completion) ────────────────────────────────*/

/* section rhythm + premium container */
.nx-guides, .nx-compare, .nx-calc, .nx-trust, .nx-faq, .nx-footcta {
	margin-block: clamp(40px, 6vw, 72px);
}
.nx-guides__title, .nx-compare__title, .nx-calc__title,
.nx-trust__title, .nx-faq__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--c-text);
	margin: 0 0 24px;
}

/* featured guides — large editorial cards */
.nx-guides__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--gutter, 20px);
}
.nx-guides__card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	overflow: hidden;
	box-shadow: var(--sh);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nx-guides__card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-2px);
}
.nx-guides__media {
	aspect-ratio: 16 / 9;
	background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface));
	display: grid;
	place-items: center;
	color: var(--c-primary);
}
.nx-guides__card-title {
	margin: 16px 20px 8px;
	font-size: 1.15rem;
	line-height: 1.3;
}
.nx-guides__card-title a {
	color: var(--c-text);
	text-decoration: none;
}
.nx-guides__excerpt {
	margin: 0 20px 16px;
	color: var(--c-muted);
	font-size: 0.95rem;
	flex: 1;
}
.nx-guides__more {
	margin: 0 20px 20px;
	font-weight: 700;
	color: var(--c-primary);
	text-decoration: none;
}

/* comparison cards */
.nx-compare__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--gutter, 20px);
}
.nx-compare__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	box-shadow: var(--sh);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nx-compare__card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-2px);
}
.nx-compare__pair {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--c-text);
}
.nx-compare__blurb {
	color: var(--c-muted);
	font-size: 0.95rem;
}

/* calculators */
.nx-calc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--gutter, 20px);
}
.nx-calc__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	box-shadow: var(--sh);
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nx-calc__card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-2px);
}
.nx-calc__icon {
	inline-size: 40px;
	block-size: 40px;
	color: var(--c-primary);
}
.nx-calc__name {
	font-weight: 800;
	color: var(--c-text);
}
.nx-calc__blurb {
	color: var(--c-muted);
	font-size: 0.925rem;
}

/* why trust us */
.nx-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--gutter, 20px);
}
.nx-trust__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	padding: 22px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	box-shadow: var(--sh);
}
.nx-trust__icon {
	grid-row: 1 / 3;
	inline-size: 36px;
	block-size: 36px;
	color: var(--c-secondary);
}
.nx-trust__heading {
	font-weight: 800;
	color: var(--c-text);
}
.nx-trust__detail {
	color: var(--c-muted);
	font-size: 0.925rem;
}

/* faq accordion (native details/summary) */
.nx-faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.nx-faq__item {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r, 10px);
	overflow: hidden;
}
.nx-faq__q {
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 700;
	color: var(--c-text);
	list-style: none;
	position: relative;
	padding-inline-end: 44px;
}
.nx-faq__q::after {
	content: "+";
	position: absolute;
	inset-inline-end: 20px;
	font-size: 1.25rem;
	color: var(--c-primary);
}
.nx-faq__item[open] .nx-faq__q::after {
	content: "\2212";
}
.nx-faq__a {
	padding: 0 22px 20px;
	color: var(--c-muted);
}
.nx-faq__q:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: -3px;
}

/* footer CTA */
.nx-footcta__inner {
	text-align: center;
	padding: clamp(32px, 6vw, 64px) 24px;
	background: var(--c-primary);
	border-radius: var(--r-lg, 18px);
	color: #fff;
}
.nx-footcta__title {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: #fff;
}
.nx-footcta__text {
	margin: 0 auto 28px;
	max-inline-size: 46ch;
	color: rgba(255, 255, 255, 0.9);
}
.nx-footcta__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.nx-footcta__btn {
	padding: 14px 28px;
	border-radius: var(--r, 10px);
	font-weight: 700;
	text-decoration: none;
}
.nx-footcta__btn--primary {
	background: var(--c-accent);
	color: var(--c-text);
}
.nx-footcta__btn--secondary {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}
.nx-footcta__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ── icon treatment ────────────────────────────────────────────────────────
 * The pack ships no icon font (keeps the performance budget lean). Icon spans
 * render as a branded rounded token so they read as intentional design rather
 * than empty boxes, with zero external assets. */
.nx-icon {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 22%, transparent);
	position: relative;
}
.nx-icon::before {
	content: "";
	inline-size: 16px;
	block-size: 16px;
	border-radius: 5px;
	background: var(--c-primary);
	opacity: 0.85;
}
.nx-coverage-grid__icon.nx-icon::before,
.nx-calc__icon.nx-icon::before { background: var(--c-primary); }
.nx-trust__icon.nx-icon::before { background: var(--c-secondary); }

/* ── authority hero ────────────────────────────────────────────────────────*/
.nx-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
	margin-block-end: clamp(32px, 5vw, 56px);
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c-primary) 14%, var(--c-surface)) 0%, var(--c-surface) 60%);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
}
.nx-hero__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--c-text);
	margin: 0 0 16px;
}
.nx-hero__subtitle {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	color: var(--c-muted);
	margin: 0 0 28px;
	max-inline-size: 52ch;
}
.nx-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-block-end: 24px;
}
.nx-hero__cta {
	padding: 14px 28px;
	border-radius: var(--r, 10px);
	font-weight: 700;
	text-decoration: none;
}
.nx-hero__cta--primary {
	background: var(--c-primary);
	color: #fff;
}
.nx-hero__cta--secondary {
	background: var(--c-surface);
	color: var(--c-primary);
	border: 1px solid var(--c-border);
}
.nx-hero__cta:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}
.nx-hero__search {
	display: flex;
	gap: 8px;
	margin-block-end: 20px;
	max-inline-size: 480px;
}
.nx-hero__search input {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--r, 10px);
	background: var(--c-surface);
	color: var(--c-text);
	font-size: 1rem;
}
.nx-hero__search button {
	padding: 13px 22px;
	border: 0;
	border-radius: var(--r, 10px);
	background: var(--c-primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.nx-hero__search input:focus-visible,
.nx-hero__search button:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}
.nx-hero__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px 20px;
	flex-wrap: wrap;
}
.nx-hero__badge {
	position: relative;
	padding-inline-start: 22px;
	color: var(--c-muted);
	font-size: 0.9rem;
	font-weight: 600;
}
.nx-hero__badge::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	background: var(--c-secondary);
	box-shadow: inset 0 0 0 3px var(--c-surface);
}
.nx-hero__featured {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	box-shadow: var(--sh-md);
	text-decoration: none;
}
.nx-hero__featured-tag {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 800;
	color: var(--c-primary);
}
.nx-hero__featured-title {
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--c-text);
}
.nx-hero__featured:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}
@media (max-width: 860px) {
	.nx-hero { grid-template-columns: 1fr; }
}

/* ── posts grid wrapper (shared posts_grid component) ──────────────────────
   The block emits a .nx-grid wrapper with --nx-cols and delegates cards to the
   shared .nexus-posts-grid / .nexus-card system. The core leaves grid layout to
   the wrapper, so without this the cards stack in one column. Scoped to .nx-grid
   so only the pack's homepage grid is affected — other packs are untouched. */
.nx-grid {
	margin: 0 0 8px;
}
.nx-grid .nexus-section-title,
.nx-guides__title,
.nx-compare__title,
.nx-calc__title,
.nx-trust__title,
.nx-faq__title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--c-text);
	margin: 0 0 24px;
}
.nx-grid .nexus-posts-grid {
	display: grid;
	grid-template-columns: repeat(var(--nx-cols, 3), 1fr);
	gap: var(--gutter, 24px);
}
@media (max-width: 900px) {
	.nx-grid .nexus-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.nx-grid .nexus-posts-grid {
		grid-template-columns: 1fr;
	}
}

/* ── section rhythm: even vertical spacing between homepage blocks ─────────
   Premium feel comes largely from consistent breathing room. Scoped to the
   insurance pack via the body data attribute. */
:root[data-pack="insurance"] .nexus-block {
	margin-block: clamp(48px, 7vw, 88px);
}
:root[data-pack="insurance"] .nexus-block:first-child {
	margin-block-start: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM PRESENTATION UPGRADE (Phase 5)
   Presentation-layer only. Upgrades icons to real SVGs, adds premium card
   treatments, hover micro-interactions, and an accessible FAQ accordion.
   All colours via design tokens; scoped so other packs are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── real SVG icons (replace the old colored-square ::before system) ────────*/
/* ── SVG icon sizing (robust, non-font-dependent) ──────────────────────────
   Icons are sized in absolute px, NOT 1em, so they never depend on an
   inherited font-size that could resolve large or be lost. A defensive cap
   guarantees an SVG can never exceed its wrapper even if this rule is
   overridden or an older stylesheet is cached. */
.nx-svg {
	width: 24px;
	height: 24px;
	max-width: 100%;
	max-height: 100%;
	display: block;
	flex: none;
	aspect-ratio: 1 / 1;
}
/* Defensive: any SVG placed inside a pack icon wrapper is clamped to the
   wrapper box regardless of the SVG's intrinsic size or missing attributes.
   Scoped to insurance icon wrappers only — no global svg{} override. */
.nx-coverage-grid__icon > svg,
.nx-calc__icon > svg,
.nx-trust__icon > svg,
.nx-hero__badge > svg,
.nx-news > svg,
.nx-footcta__btn > svg {
	width: 60%;
	height: 60%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* media panels use a fixed icon size (the panel itself is aspect-ratio-based,
   so a percentage would scale the icon with the panel). */
.nx-guides__media > svg {
	width: 44px;
	height: 44px;
	max-width: 100%;
	max-height: 100%;
}
/* neutralise the legacy square icon so it never shows behind SVGs */
.nx-icon::before { content: none !important; }

/* ── section titles: consistent premium hierarchy ──────────────────────────*/
:root[data-pack="insurance"] .nexus-block > section > h2,
:root[data-pack="insurance"] .nx-guides__title,
:root[data-pack="insurance"] .nx-compare__title,
:root[data-pack="insurance"] .nx-calc__title,
:root[data-pack="insurance"] .nx-trust__title,
:root[data-pack="insurance"] .nx-faq__title,
:root[data-pack="insurance"] .nx-premium-factors__title,
:root[data-pack="insurance"] .nx-coverage-grid__title {
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--c-text);
	margin: 0 0 8px;
}
/* eyebrow-style kicker under each section title via ::after underline */
:root[data-pack="insurance"] .nexus-block { position: relative; }

/* ── HERO: premium two-column ──────────────────────────────────────────────*/
.nx-hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(32px, 5vw, 64px);
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent 60%),
		var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	box-shadow: var(--sh-md);
}
.nx-hero__title {
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 16px;
}
.nx-hero__subtitle {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: var(--c-muted);
	line-height: 1.6;
	margin: 0 0 28px;
	max-width: 46ch;
}
.nx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.nx-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nx-hero__cta--primary {
	background: var(--c-primary);
	color: #fff;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary) 30%, transparent);
}
.nx-hero__cta--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--c-primary) 40%, transparent); }
.nx-hero__cta--secondary {
	background: transparent;
	color: var(--c-primary);
	border: 1.5px solid color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
}
.nx-hero__cta--secondary:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); transform: translateY(-2px); }
.nx-hero__search { display: flex; gap: 8px; margin-bottom: 22px; max-width: 460px; }
.nx-hero__search input {
	flex: 1;
	padding: 13px 18px;
	border: 1.5px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-bg);
	font-size: 0.975rem;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.nx-hero__search input:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 15%, transparent);
}
.nx-hero__search button {
	padding: 13px 24px;
	border: none;
	border-radius: 999px;
	background: var(--c-text);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
.nx-hero__search button:hover { transform: translateY(-1px); }
.nx-hero__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.nx-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-muted);
}
.nx-hero__badge::before {
	content: "";
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--c-secondary);
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/70% no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/70% no-repeat;
	flex: none;
}
.nx-hero__featured {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	padding: 28px;
	box-shadow: var(--sh-md);
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 200px;
}
.nx-hero__featured-tag {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-primary);
	margin-bottom: 10px;
}
.nx-hero__featured-title { font-size: 1.4rem; font-weight: 800; line-height: 1.2; color: var(--c-text); text-decoration: none; }
.nx-hero__featured-title:hover { color: var(--c-primary); }
@media (max-width: 880px) {
	.nx-hero { grid-template-columns: 1fr; }
	.nx-hero__featured { min-height: 0; }
}

/* ── COVERAGE cards: hover lift + arrow reveal ─────────────────────────────*/
.nx-coverage-grid__item {
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	cursor: pointer;
	overflow: hidden;
}
.nx-coverage-grid__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-md);
	border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
}
.nx-coverage-grid__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--c-primary) 10%, transparent);
	color: var(--c-primary);
	font-size: 26px;
	margin-bottom: 14px;
}
.nx-coverage-grid__item::after {
	content: "";
	position: absolute;
	right: 18px; bottom: 18px;
	width: 20px; height: 20px;
	color: var(--c-primary);
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s ease, transform .2s ease;
}
.nx-coverage-grid__item:hover::after { opacity: 1; transform: translateX(0); }

/* ── FEATURED GUIDES: editorial cards ──────────────────────────────────────*/
.nx-guides__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}
.nx-guides__card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.nx-guides__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.nx-guides__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 16%, var(--c-surface)), color-mix(in srgb, var(--c-secondary) 12%, var(--c-surface)));
	color: var(--c-primary);
	font-size: 44px;
}
.nx-guides__card-title { font-size: 1.15rem; font-weight: 800; line-height: 1.25; margin: 18px 18px 8px; }
.nx-guides__card-title a { color: var(--c-text); text-decoration: none; }
.nx-guides__card-title a:hover { color: var(--c-primary); }
.nx-guides__excerpt { color: var(--c-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 18px 16px; flex: 1; }
.nx-guides__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.8rem; color: var(--c-muted); margin: 0 18px 14px; }
.nx-guides__more {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 18px 18px;
	font-weight: 700; font-size: 0.9rem;
	color: var(--c-primary); text-decoration: none;
}
.nx-guides__more:hover { gap: 10px; }

/* ── COMPARISON cards ──────────────────────────────────────────────────────*/
.nx-compare__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.nx-compare__card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	padding: 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.nx-compare__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.nx-compare__pair { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.nx-compare__pair::before {
	content: ""; width: 22px; height: 22px; flex: none; color: var(--c-primary); background: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="14" y="4" width="7" height="16" rx="1"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="14" y="4" width="7" height="16" rx="1"/></svg>') center/contain no-repeat;
}
.nx-compare__blurb { color: var(--c-muted); font-size: 0.95rem; line-height: 1.55; margin-bottom: 16px; }
.nx-compare__link { font-weight: 700; font-size: 0.9rem; color: var(--c-primary); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.nx-compare__link:hover { gap: 10px; }

/* ── CALCULATOR tool cards ─────────────────────────────────────────────────*/
.nx-calc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
}
.nx-calc__card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	padding: 26px 24px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.nx-calc__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.nx-calc__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 0 auto 16px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--c-primary) 10%, transparent);
	color: var(--c-primary); font-size: 30px;
}
.nx-calc__name { font-size: 1.1rem; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.nx-calc__blurb { color: var(--c-muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 18px; }
.nx-calc__link {
	display: inline-block; padding: 10px 22px; border-radius: 999px;
	background: color-mix(in srgb, var(--c-primary) 10%, transparent);
	color: var(--c-primary); font-weight: 700; font-size: 0.9rem; text-decoration: none;
	transition: background .18s ease;
}
.nx-calc__link:hover { background: var(--c-primary); color: #fff; }

/* ── PREMIUM FACTORS: icon chips + colored indicators ──────────────────────*/
.nx-premium-factors__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 4px 16px;
	align-items: center;
	transition: transform .18s ease, box-shadow .18s ease;
}
.nx-premium-factors__item:hover { transform: translateX(4px); box-shadow: var(--sh); }
.nx-premium-factors__dir {
	padding: 5px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 800;
	white-space: nowrap;
}
.nx-premium-factors__item--up .nx-premium-factors__dir { background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: color-mix(in srgb, var(--c-accent) 80%, black); }
.nx-premium-factors__item--down .nx-premium-factors__dir { background: color-mix(in srgb, var(--c-secondary) 16%, transparent); color: var(--c-secondary); }

/* ── TRUST cards ───────────────────────────────────────────────────────────*/
.nx-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.nx-trust__item {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
	padding: 26px 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.nx-trust__item:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.nx-trust__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin-bottom: 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--c-secondary) 12%, transparent);
	color: var(--c-secondary); font-size: 28px;
}
.nx-trust__heading { font-size: 1.1rem; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.nx-trust__detail { color: var(--c-muted); font-size: 0.93rem; line-height: 1.55; }

/* ── FAQ accordion polish ──────────────────────────────────────────────────*/
.nx-faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.nx-faq__item {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r, 12px);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.nx-faq__item[open] { box-shadow: var(--sh); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
.nx-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--c-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.nx-faq__q::-webkit-details-marker { display: none; }
.nx-faq__q::after {
	content: ""; width: 20px; height: 20px; flex: none; color: var(--c-primary); background: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center/contain no-repeat;
	transition: transform .25s ease;
}
.nx-faq__item[open] .nx-faq__q::after { transform: rotate(135deg); }
.nx-faq__q:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.nx-faq__a { padding: 0 22px 20px; color: var(--c-muted); line-height: 1.6; }

/* ── NEWSLETTER ────────────────────────────────────────────────────────────*/
.nx-news {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 10px;
	padding: clamp(32px, 5vw, 56px);
	background:
		radial-gradient(100% 120% at 50% 0%, color-mix(in srgb, var(--c-primary) 8%, transparent), transparent 70%),
		var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg, 18px);
}
.nx-news__icon, .nx-news .nx-svg { color: var(--c-primary); font-size: 40px; }
.nx-news-form { display: flex; gap: 10px; margin-top: 12px; width: 100%; max-width: 460px; }
.nx-news-form input {
	flex: 1; padding: 14px 18px; border: 1.5px solid var(--c-border);
	border-radius: 999px; background: var(--c-bg); font-size: 0.975rem;
}
.nx-news-form input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 15%, transparent); }
.nx-news-form button {
	padding: 14px 28px; border: none; border-radius: 999px;
	background: var(--c-primary); color: #fff; font-weight: 700; cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.nx-news-form button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--c-primary) 35%, transparent); }

/* ── FOOTER CTA: premium conversion band ───────────────────────────────────*/
.nx-footcta {
	text-align: center;
	padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw, 48px);
	background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 70%, #061a2e));
	border-radius: var(--r-lg, 18px);
	color: #fff;
	box-shadow: 0 20px 50px color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.nx-footcta__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 12px; color: #fff; }
.nx-footcta__text { font-size: clamp(1rem, 1.6vw, 1.15rem); color: color-mix(in srgb, #fff 82%, transparent); margin: 0 auto 28px; max-width: 52ch; }
.nx-footcta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.nx-footcta__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 15px 32px; border-radius: 999px; font-weight: 700; font-size: 1.02rem; text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.nx-footcta__btn--primary { background: #fff; color: var(--c-primary); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.nx-footcta__btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.26); }
.nx-footcta__btn--secondary { background: color-mix(in srgb, #fff 16%, transparent); color: #fff; border: 1.5px solid color-mix(in srgb, #fff 40%, transparent); }
.nx-footcta__btn--secondary:hover { background: color-mix(in srgb, #fff 26%, transparent); transform: translateY(-3px); }

/* ── reduced-motion: honour user preference ────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
	:root[data-pack="insurance"] * { transition: none !important; }
}

/* ── card-link affordances (spans inside <a> cards need block display) ──────*/
.nx-calc__card, .nx-compare__card { text-decoration: none; display: block; position: relative; }
.nx-calc__name, .nx-calc__blurb, .nx-compare__pair, .nx-compare__blurb { display: block; }
.nx-calc__icon { display: inline-flex; }
/* "Compare →" affordance on comparison cards */
.nx-compare__card::after {
	content: "Compare →";
	display: inline-block;
	margin-top: 14px;
	font-weight: 700; font-size: 0.9rem;
	color: var(--c-primary);
	transition: transform .18s ease;
}
.nx-compare__card:hover::after { transform: translateX(4px); }
/* subtle "Open →" on calculator cards */
.nx-calc__card::after {
	content: "Open →";
	display: inline-block;
	margin-top: 16px;
	font-weight: 700; font-size: 0.88rem;
	color: var(--c-primary);
	transition: transform .18s ease;
}
.nx-calc__card:hover::after { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════════
   DEFENSIVE ICON CONTAINMENT (regression fix)
   Guarantees no inline SVG in the insurance pack can render at intrinsic size.
   A viewBox-only SVG with no width attribute expands to fill its container,
   which on mobile produced hundreds-of-pixels-tall icons and stretched cards.
   These rules are SCOPED to the insurance pack (via the data-pack attribute
   and pack class prefixes) — they never touch site-wide or navigation SVGs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Absolute ceiling: any .nx-svg, anywhere in the pack, is capped. */
:root[data-pack="insurance"] .nx-svg {
	width: 24px !important;
	height: 24px !important;
	max-width: 32px;
	max-height: 32px;
	min-width: 0;
	min-height: 0;
	flex: none;
}

/* 2. Any SVG inside any pack icon wrapper cannot exceed the wrapper box,
   regardless of the SVG's own attributes or a missing sizing rule. */
[class*="__icon"] > svg,
[class*="__media"] > svg,
[class*="nx-"] > .nx-svg {
	max-width: 100%;
	max-height: 100%;
}

/* 3. Icon wrappers keep fixed square dimensions and clip any overflow, so a
   mis-sized child can never stretch the card vertically. */
.nx-coverage-grid__icon,
.nx-calc__icon,
.nx-trust__icon {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	flex: none;
}