@layer components {
	/* Reusable two-column interior-page layout (Interior Page UX phase). Mobile/tablet (<1024px)
	   stay single-column - main content first, supporting panel below - rather than squeezing a
	   two-column illustration layout into tablet widths where it reads cramped; desktop gets the
	   60/40-ish split the brief asked for. */
	.interior-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	@media (min-width: 1024px) {
		.interior-layout {
			grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
			gap: 3rem;
			align-items: start;
		}
	}
	.interior-layout__main { min-width: 0; }
	.interior-layout__aside { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
	@media (min-width: 1024px) {
		.interior-layout__aside--sticky { position: sticky; top: 6rem; }
	}

	/* Illustration supporting panel - the pale cool-gray card containing the SVG + short copy. */
	.illustration-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1rem;
		padding: 2rem 1.75rem;
		background-color: var(--color-secondary);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-xl);
	}
	.illustration-panel .illustration {
		width: 100%;
		max-width: 12rem;
		height: auto;
		color: var(--color-primary);
	}
	.illustration-panel__heading { font-size: 1.0625rem; }
	.illustration-panel__body { font-size: 0.875rem; color: var(--color-muted-foreground); }
	.illustration-panel__cta { margin-top: 0.25rem; }

	/* Small supporting-content card (e.g. "Before submitting" notes, "Suitable for") - plain
	   white card, distinct from the tinted illustration panel above it. */
	.support-card {
		padding: 1.5rem 1.75rem;
		background-color: var(--color-card);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
	}
	.support-card__heading { font-size: 0.9375rem; }
	.support-card__list {
		margin-top: 0.875rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		font-size: 0.875rem;
		color: var(--color-muted-foreground);
	}
	.support-card__list li { list-style: disc; margin-left: 1.125rem; }
	.support-card__note { font-size: 0.875rem; color: var(--color-muted-foreground); }

	/* Contact info card (Contact page aside) - compact rows with small icon badges, mirroring
	   the footer's own contact-strip visual language for consistency across the site. */
	.contact-info-card { display: flex; flex-direction: column; gap: 1.25rem; }
	.contact-info-card__item { display: flex; align-items: flex-start; gap: 0.875rem; }
	.contact-info-card__icon-wrap {
		flex-shrink: 0;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 999px;
		background-color: var(--accent-10);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.contact-info-card__icon { width: 1.25rem; height: 1.25rem; color: var(--color-accent); }
	.contact-info-card__label {
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-muted-foreground);
	}
	.contact-info-card__value { margin-top: 0.125rem; font-size: 0.9375rem; color: var(--color-foreground); }
	.contact-info-card__value a { color: inherit; text-decoration: none; }
	.contact-info-card__value a:hover { color: var(--color-accent); text-decoration: underline; }

	/* Policies mini-nav card (each policy page's aside) */
	.policy-nav-card__heading { font-size: 0.9375rem; }
	.policy-nav-card__list {
		margin-top: 0.875rem;
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}
	.policy-nav-card__list a {
		display: block;
		font-size: 0.875rem;
		color: var(--color-muted-foreground);
		text-decoration: none;
		padding: 0.375rem 0.625rem;
		border-radius: var(--radius-sm);
	}
	.policy-nav-card__list a:hover { color: var(--color-accent); background-color: var(--color-muted); }
	.policy-nav-card__list a[aria-current="page"] {
		color: var(--color-primary-foreground);
		background-color: var(--color-primary);
		font-weight: 600;
	}

	/* Sitemap section cards */
	.sitemap-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-top: 2rem;
	}
	@media (min-width: 640px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1024px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
	.sitemap-card {
		padding: 1.5rem;
		background-color: var(--color-card);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
	}
	.sitemap-card__heading {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		font-size: 1rem;
	}
	.sitemap-card__heading .icon { width: 1.25rem; height: 1.25rem; color: var(--color-accent); flex-shrink: 0; }
	.sitemap-card__list {
		margin-top: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}
	.sitemap-card__list a {
		font-size: 0.875rem;
		color: var(--color-muted-foreground);
		text-decoration: none;
	}
	.sitemap-card__list a:hover { color: var(--color-accent); text-decoration: underline; }
	.sitemap-card__sublist {
		margin-top: 0.375rem;
		margin-left: 1rem;
		padding-left: 0.75rem;
		border-left: 1px solid var(--color-border);
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Policies dropdown (desktop primary nav) */
	.nav__item--has-dropdown { position: relative; }
	.nav__dropdown-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		background: none;
		border: none;
		font: inherit;
		color: inherit;
		cursor: pointer;
		padding: 0;
	}
	.nav__dropdown-toggle .icon { width: 0.75rem; height: 0.75rem; transition: transform 0.15s ease; }
	.nav__dropdown-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
	.nav__dropdown {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 0;
		min-width: 12rem;
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		padding: 0.5rem;
		background-color: var(--color-background);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		z-index: 20;
	}
	.nav__dropdown[hidden] { display: none; }
	.nav__dropdown a {
		display: block;
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius-sm);
		font-size: 0.875rem;
		color: var(--color-foreground);
		text-decoration: none;
	}
	.nav__dropdown a:hover,
	.nav__dropdown a:focus-visible { background-color: var(--color-muted); color: var(--color-accent); }

	/* Mobile nav disclosure (Policies submenu) */
	.mobile-nav__disclosure-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: none;
		border: none;
		font: inherit;
		font-size: inherit;
		color: inherit;
		text-align: left;
		padding: 0;
		cursor: pointer;
	}
	.mobile-nav__disclosure-toggle .icon { width: 0.875rem; height: 0.875rem; transition: transform 0.15s ease; }
	.mobile-nav__disclosure-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
	.mobile-nav__submenu {
		margin-top: 0.5rem;
		margin-left: 1rem;
		padding-left: 0.75rem;
		border-left: 1px solid var(--color-border);
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}
	.mobile-nav__submenu[hidden] { display: none; }
}