@import url("variables.css");

/* ----------------------------------------
   ReiSpace — styles.css
   Mobile-first responsive stylesheet
   ---------------------------------------- */

/* -------------------- 1. Design Tokens ---------------------------------------- */
:root {
	/* Brand colour aliases — all values defined in variables.css */
	--clr-green: var(--color-primary);
	--clr-green-dark: var(--color-secondary);
	--clr-green-light: var(--color-primary-light);
	--clr-dark: var(--color-secondary);
	--clr-dark-2: var(--color-support);
	--clr-white: var(--color-bg);
	--clr-off-white: var(--color-bg-soft);
	--clr-gray-100: var(--color-neutral-100);
	--clr-gray-200: var(--color-neutral-200);
	--clr-gray-400: var(--color-neutral-400);
	--clr-gray-600: var(--color-neutral-600);
	--clr-gray-800: var(--color-neutral-dark);
	--clr-red: var(--color-red);
	--clr-blue-info: var(--color-info);
	--clr-blue-info-bg: var(--color-info-bg);

	/* Typography */
	--font-family: var(--font-body);
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 3rem;
	--font-size-6xl: 3.75rem;

	/* Layout */
	--nav-height: 72px;
	--container-max: 1200px;
	--container-narrow: 720px;
	--section-py: 5rem;
	--section-py-sm: 3rem;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
	--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;
}

/* -------------------- 2. Reset & Base ---------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--bg-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
	display: block;
	max-width: 100%;
}
img {
	height: auto;
}
a {
	color: inherit;
	text-decoration: none;
}
ul,
ol {
	list-style: none;
}
button {
	cursor: pointer;
	background: none;
	border: none;
	font: inherit;
	color: inherit;
}
input,
textarea,
select {
	font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--color-neutral-dark);
}

h1 {
	font-size: var(--text-5xl);
}
h2 {
	font-size: var(--text-3xl);
}
h3 {
	font-size: var(--text-2xl);
}
h4 {
	font-size: var(--text-xl);
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -------------------- 3. Typography ---------------------------------------- */
.prose {
	max-width: 68ch;
}
.prose p + p {
	margin-top: var(--space-4);
}
.prose h2,
.prose h3 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
}
.prose ul {
	list-style: disc;
	padding-left: var(--space-6);
}
.prose ul li + li {
	margin-top: var(--space-2);
}
.prose strong {
	font-weight: 600;
}
.prose a {
	color: var(--clr-green);
	text-decoration: underline;
}
.prose blockquote {
	border-left: 3px solid var(--clr-green);
	padding-left: var(--space-6);
	margin: var(--space-8) 0;
	font-style: italic;
}

.link {
	color: var(--clr-green);
	text-decoration: underline;
	transition: color var(--transition-fast);
}
.link:hover {
	color: var(--clr-green-dark);
}

/* -------------------- 4. Layout ---------------------------------------- */
.section {
	padding: var(--section-py) var(--space-6);
}

.section__container {
	max-width: var(--container-max);
	margin-inline: auto;
}
.section__container--narrow {
	max-width: var(--container-narrow);
}
.section__container--centered {
	text-align: center;
}

.section__label {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-green);
	margin-bottom: var(--space-3);
	text-align: inherit;
}
/* Auto-center label when it directly precedes a centered heading */
.section__label:has(+ .section__heading--centered) {
	text-align: center;
}

.section__heading {
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-extrabold);
	color: var(--clr-dark);
	margin-bottom: var(--space-6);
}
.section__heading--centered {
	text-align: center;
}
.section__heading--light {
	color: var(--clr-white);
}

.section__subheading {
	font-size: var(--font-size-lg);
	color: var(--clr-gray-600);
	margin-bottom: var(--space-8);
	max-width: 60ch;
}
.section__subheading--centered {
	text-align: center;
	margin-inline: auto;
}
.section__subheading--light {
	color: var(--color-white-80);
}

.section__body {
	line-height: var(--leading-relaxed);
	color: var(--clr-gray-600);
	margin-bottom: var(--space-lg);
}
.section__body:last-child {
	margin-bottom: 0;
}
.section__body p + p {
	margin-top: var(--space-4);
}
.section__body--narrow {
	max-width: var(--container-narrow);
}
.section__body--2col {
	columns: 2;
	column-gap: var(--space-8);
}

.section__cta {
	margin-top: var(--space-12);
	text-align: center;
}
.section__note {
	text-align: center;
	margin-top: var(--space-6);
	color: var(--clr-gray-600);
	font-size: var(--font-size-sm);
}

/* Mid-section subheadings — only direct children of the container, never nested card titles */
.section__container > h2:not(.section__heading),
.section__container > h3:not(.section__heading) {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-lg);
}

/* Card heading lockdown — zero margin-top; gap/margin-bottom on parent or sibling handles spacing */
.proof-card__title,
.audience-card__heading,
.tech-card__name,
.pricing-card__name,
.hn-card__title,
.blog-card__title {
	margin-top: 0;
}

/* Background variants */
.section--alt {
	background: var(--clr-off-white);
}
.section--dark {
	background: var(--bg-section-dark);
	color: var(--text-on-dark-teal);
}
.section--green-light {
	background: var(--clr-green-light);
}
.section--green {
	background: var(--clr-green);
}

/* Homepage section backgrounds */
.section--problem {
	background: var(--bg-section-default);
	color: var(--text-on-white);
}

.section--solution {
	background: var(--bg-section-alt);
	color: var(--text-on-offwhite);
}
.section--audiences {
	background: var(--bg-section-default);
	color: var(--text-on-white);
}
.section--evidence {
	background: var(--bg-section-brand);
	color: var(--text-on-teal-wash);
}
.section--testimonials {
	background: var(--bg-section-default);
}
.section--founder {
	background: var(--bg-section-warm);
	color: var(--text-on-gold-wash);
}
.section--cta-contact {
	background: var(--bg-section-alt);
	color: var(--text-on-offwhite);
}

/* -------------------- 5. Buttons ---------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: var(--font-size-base);
	line-height: 1;
	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		opacity var(--transition-fast);
	text-decoration: none !important;
	white-space: nowrap;
}

.btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--font-size-sm);
}
.btn--lg {
	padding: 1rem 2rem;
	font-size: var(--font-size-lg);
}
.btn--full {
	width: 100%;
	justify-content: center;
}

.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-btn-primary-text);
	border: 2px solid var(--color-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text); /* AA 5.07:1 — antes heredaba blanco (2.91:1) */
}

.btn--secondary {
	background: transparent;
	color: var(--clr-green);
	border: 2px solid var(--clr-green);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--clr-green);
	color: var(--clr-white);
}

.btn--outline {
	background: transparent;
	color: var(--clr-dark);
	border: 2px solid var(--clr-gray-200);
}
.btn--outline:hover {
	border-color: var(--color-accent);
	color: var(--color-accent-muted); /* AA 5.09:1 — antes 2.91:1 */
}

.btn--outline-light {
	background: transparent;
	color: var(--clr-white);
	border: 2px solid var(--color-white-40);
}
.btn--outline-light:hover {
	border-color: var(--clr-white);
	background: var(--color-white-10);
}


.btn--text {
	background: transparent;
	color: var(--clr-green);
	border: none;
	padding-left: 0;
	padding-right: 0;
	font-weight: 600;
}
.btn--text:hover {
	color: var(--clr-green-dark);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	margin-top: 28px;
}
.btn-group--centered {
	justify-content: center;
}

/* Loading spinner inside button */
.btn__loading {
	display: none;
	animation: spin 0.8s linear infinite;
}
.btn.is-loading .btn__text {
	display: none;
}
.btn.is-loading .btn__loading {
	display: inline;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Focus styles */
:focus-visible {
	outline: 3px solid var(--clr-green);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* -------------------- 5b. Icon Box ---------------------------------------- */
.icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green-light);
	color: var(--clr-green);
	border-radius: var(--radius-lg);
	font-size: 1.25rem;
}
.icon-box--sm  { width: 40px; height: 40px; border-radius: var(--radius-md); font-size: 1.1rem; }
.icon-box--md  { width: 48px; height: 48px; }
.icon-box--lg  { width: 56px; height: 56px; }
.icon-box--on-dark { background: var(--color-white-20); color: var(--color-primary-on-dark); }

/* -------------------- 6. Navigation ---------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--clr-white);
	border-bottom: 1px solid var(--clr-gray-200);
	box-shadow: var(--shadow-sm);
}

.nav {
	width: 100%;
}

.nav__container {
	display: flex;
	align-items: center;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0 var(--space-6);
	height: var(--nav-height);
	gap: var(--space-6);
}

/* Logo */
.nav__logo {
	flex-shrink: 0;
}
.nav__logo-text {
	font-size: 1.375rem;
	font-weight: var(--weight-extrabold);
	color: var(--clr-dark);
	letter-spacing: -0.02em;
}
.nav__logo-accent {
	color: var(--clr-green);
}

/* Desktop nav list */
.nav__list {
	display: none;
	flex: 1;
	align-items: center;
	gap: var(--space-1);
}

.nav__item {
	position: relative;
}

.nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--clr-gray-800);
	border-radius: var(--radius-md);
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
}
.nav__link:hover,
.nav__link:focus-visible {
	background: var(--clr-gray-100);
	color: var(--clr-dark);
}

.nav__caret {
	font-size: 0.875rem;
	transition: transform var(--transition-fast);
}
.nav__toggle[aria-expanded="true"] .nav__caret {
	transform: rotate(180deg);
}

/* Right side */
.nav__right {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-left: auto;
}

/* ---- Language Pill ---------------------------------------------------- */
.lang-switcher {
	display: none; /* shown at 1024px+ via @media */
	position: relative;
	align-items: center;
}

.lang-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
	font-family: var(--font-body);
}
.lang-pill:hover,
.lang-pill[aria-expanded="true"] {
	background: var(--color-primary);
	color: var(--color-text-on-dark);
}
.lang-pill__icon {
	font-size: 18px;
	line-height: 1;
}
.lang-pill__caret {
	font-size: 14px;
	line-height: 1;
	transition: transform var(--transition-fast);
}
.lang-pill[aria-expanded="true"] .lang-pill__caret {
	transform: rotate(180deg);
}

/* ---- Language Dropdown Panel ------------------------------------------ */
.lang-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200;
	background: #fff;
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: 12px;
	min-width: 380px;
	animation: langDropIn var(--transition-fast) ease both;
}
@keyframes langDropIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.lang-dropdown[hidden] {
	display: none;
}

.lang-dropdown__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
}

.lang-dropdown__item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 10px;
	border-radius: var(--radius-md);
	font-size: 13px;
	color: var(--color-text);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
	position: relative;
	width: 100%;
	font-family: var(--font-body);
}
.lang-dropdown__item:hover {
	background: var(--bg-teal-wash);
	color: var(--color-primary);
}
.lang-dropdown__item.is-active {
	background: var(--color-primary);
	color: var(--color-text-on-dark);
	font-weight: 500;
}
.lang-dropdown__item.is-active:hover {
	background: var(--color-secondary);
}

.lang-dropdown__dot {
	display: inline-flex;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
}
.lang-dropdown__code {
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}
.lang-dropdown__sep {
	color: var(--color-text-faint);
	font-size: 11px;
	flex-shrink: 0;
}
.lang-dropdown__native {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lang-dropdown__lock {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	color: var(--color-accent-muted);
	font-size: 11px;
	flex-shrink: 0;
}

/* Tooltip — appears below the item on click */
.lang-dropdown__tooltip {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-secondary);
	color: var(--color-text-on-dark);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	z-index: 300;
	transition: opacity var(--transition-fast);
}
.lang-dropdown__tooltip::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-bottom-color: var(--color-secondary);
}
.lang-dropdown__item.is-tooltip-active .lang-dropdown__tooltip {
	opacity: 1;
}

/* ---- Mobile Bottom Sheet --------------------------------------------- */
.lang-sheet {
	position: fixed;
	inset: 0;
	z-index: 600;
	pointer-events: none;
	visibility: hidden;
}
.lang-sheet.is-open {
	pointer-events: auto;
	visibility: visible;
}
.lang-sheet__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--transition-base);
}
.lang-sheet.is-open .lang-sheet__overlay {
	opacity: 1;
}

.lang-sheet__panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 16px 16px 0 0;
	padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
	max-height: 80vh;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform var(--transition-base);
}
.lang-sheet.is-open .lang-sheet__panel {
	transform: translateY(0);
}

.lang-sheet__handle {
	width: 40px;
	height: 4px;
	background: var(--color-neutral-200);
	border-radius: 2px;
	margin: 0 auto 16px;
}
.lang-sheet__title {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 12px;
	text-align: center;
}
/* 2-column grid in narrow bottom sheets; 3-col on wider */
.lang-sheet .lang-dropdown__grid {
	grid-template-columns: repeat(2, 1fr);
}

/* CTA in nav */
.nav__cta {
	display: none;
}

/* Hamburger */
.nav__hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: var(--space-2);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}
.nav__hamburger:hover {
	background: var(--clr-gray-100);
}
.nav__hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--clr-gray-800);
	border-radius: 2px;
	transition:
		transform var(--transition-base),
		opacity var(--transition-fast);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
	opacity: 0;
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* -------------------- Dropdown ---------------------------------------- */
.nav__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	z-index: 900;
	min-width: 240px;
}

.nav__dropdown--mega {
	min-width: 520px;
}

.nav__dropdown.is-open {
	display: block;
}

.nav__dropdown-inner {
	padding: var(--space-4);
}

.nav__dropdown-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-1);
}
.nav__dropdown-grid--platform {
	grid-template-columns: 1fr 1fr;
}

.nav__dropdown-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}
.nav__dropdown-item:hover {
	background: var(--clr-gray-100);
}
.nav__dropdown-item--cta {
	grid-column: 1 / -1;
	border-top: 1px solid var(--clr-gray-200);
	margin-top: var(--space-2);
	padding-top: var(--space-4);
}

.nav__dropdown-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green-light);
	border-radius: var(--radius-sm);
	color: var(--clr-green);
	font-size: 1rem;
}
.nav__dropdown-content strong {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-dark);
	margin-bottom: 2px;
}
.nav__dropdown-content span {
	font-size: var(--font-size-xs);
	color: var(--clr-gray-600);
	line-height: 1.4;
}

.nav__dropdown-list {
	padding: var(--space-2);
}
.nav__dropdown-link {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--clr-gray-600);
	border-radius: var(--radius-sm);
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
}
.nav__dropdown-link:hover {
	background: var(--clr-gray-100);
	color: var(--clr-dark);
}

/* -------------------- Mobile Drawer ---------------------------------------- */
.nav-drawer {
	display: none;
}

.nav-drawer.is-open {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 2000;
}

.nav-drawer__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-overlay);
	backdrop-filter: blur(2px);
}

.nav-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(360px, 90vw);
	height: 100%;
	background: var(--clr-white);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	box-shadow: var(--shadow-xl);
}

.nav-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
	border-bottom: 1px solid var(--clr-gray-200);
}

.nav-drawer__close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	font-size: 1.25rem;
	color: var(--clr-gray-600);
	transition: background var(--transition-fast);
}
.nav-drawer__close:hover {
	background: var(--clr-gray-100);
}

.nav-drawer__nav {
	flex: 1;
	padding: var(--space-4);
}

.nav-drawer__group {
	margin-bottom: var(--space-1);
}

.nav-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--clr-dark);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}
.nav-drawer__toggle:hover {
	background: var(--clr-gray-100);
}
.nav-drawer__toggle[aria-expanded="true"] i,
.nav-drawer__toggle[aria-expanded="true"] .ph-icon {
	transform: rotate(180deg);
}
.nav-drawer__toggle i,
.nav-drawer__toggle .ph-icon {
	transition: transform var(--transition-fast);
}

.nav-drawer__panel-inner {
	padding: 0 var(--space-4) var(--space-2);
}

.nav-drawer__link {
	display: block;
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	border-radius: var(--radius-sm);
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
}
.nav-drawer__link:hover {
	background: var(--clr-gray-100);
	color: var(--clr-dark);
}

.nav-drawer__link--top {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--clr-dark);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}
.nav-drawer__link--top:hover {
	background: var(--clr-gray-100);
}

.nav-drawer__footer {
	padding: var(--space-6);
	border-top: 1px solid var(--clr-gray-200);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.nav-drawer__lang {
	display: flex;
	align-items: center;
}

/* -------------------- 7. Hero Section ---------------------------------------- */
.hero {
	background: var(--bg-hero);
	color: var(--text-on-dark-teal);
	padding-top: calc(var(--section-py) + var(--space-8));
	padding-bottom: 0;
	padding-inline: var(--space-6);
	overflow: hidden;
}

.hero__container {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: center;
}

.hero__eyebrow {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-on-dark); /* AA 5.04:1 vs dark-teal — antes clr-green ~1.9:1 */
	margin-bottom: var(--space-4);
	text-align: inherit;
}

.hero__heading {
	font-size: var(--font-size-4xl);
	font-weight: var(--weight-extrabold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--clr-white);
	margin-bottom: var(--space-6);
}

.hero__subheading {
	font-size: var(--font-size-lg);
	color: var(--color-white-75);
	line-height: 1.7;
	margin-bottom: var(--space-8);
	max-width: 52ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.hero__visual {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.hero__image-placeholder {
	width: 100%;
	aspect-ratio: 4/3;
	background: var(--clr-dark-2);
	border-radius: var(--radius-xl);
	overflow: hidden;
}
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

/* ─── Hero Carousel ─────────────────────────────────────────────────────── */
.hero-carousel {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 4/5;
	border-radius: var(--border-radius-lg, 16px);
	overflow: hidden;
	margin: 0;
	margin-left: auto;
}

.hero-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.hero-carousel__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hero-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-carousel__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24px 20px;
	background: linear-gradient(to top, rgba(10, 79, 62, 0.85), transparent);
}

.hero-carousel__name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-text-on-dark);
	margin: 0;
}

.hero-carousel__location {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.8);
	margin: 2px 0 0;
}

.hero-carousel__dots {
	position: absolute;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.hero-carousel__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s;
}

.hero-carousel__dot.is-active {
	background: #ffffff;
	width: 18px;
	border-radius: 3px;
}

@media (max-width: 768px) {
	:root {
		--space-xl: 40px;
		--space-2xl: 56px;
	}

	.hero-carousel {
		max-width: 280px;
		margin: 0 auto;
	}
}

@media (max-width: 900px) {
	.hero__visual {
		justify-content: center;
	}
	.hero-carousel {
		max-width: 280px;
		margin: 0 auto;
	}
}

/* Trust bar */
.hero__trust-bar {
	margin-top: var(--space-16);
	border-top: 1px solid var(--color-white-12);
	padding: var(--space-6) 0;
}

.hero__trust-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4) var(--space-6);
}

.hero__trust-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-white-65);
	white-space: nowrap;
}
.hero__trust-item i,
.hero__trust-item .ph-icon {
	color: var(--clr-green);
	font-size: 1rem;
}

.hero__trust-sep {
	width: 1px;
	height: 16px;
	background: var(--color-white-15);
	display: none;
}

/* -------------------- 8. Page Hero ---------------------------------------- */
.page-hero {
	padding: calc(var(--section-py) + var(--space-4)) var(--space-6)
		var(--section-py);
}

.page-hero--dark {
	background: var(--clr-dark);
	color: var(--clr-white);
}
.page-hero--light {
	background: var(--clr-gray-100);
}

.page-hero__container {
	max-width: var(--container-max);
	margin-inline: auto;
}
.page-hero__container--narrow {
	max-width: var(--container-narrow);
}

.page-hero__eyebrow {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-on-dark); /* AA 5.04:1 vs dark-teal — antes clr-green ~1.9:1 */
	margin-bottom: var(--space-4);
	text-align: inherit;
}

.page-hero__heading {
	font-size: var(--font-size-4xl);
	font-weight: var(--weight-extrabold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--clr-white);
	margin-bottom: var(--space-6);
}
.page-hero__heading--dark {
	color: var(--clr-dark);
}

.page-hero__subheading {
	font-size: var(--font-size-lg);
	color: var(--color-white-75);
	line-height: 1.7;
	margin-bottom: var(--space-8);
	max-width: 55ch;
}
.page-hero__subheading--dark {
	color: var(--clr-gray-600);
}

/* -------------------- 9. Pillars (Section 3) ---------------------------------------- */
.pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

.pillar {
	padding: var(--space-8);
	background: var(--clr-off-white);
	border-radius: var(--radius-xl);
	/* border: 1px solid var(--clr-gray-200); */
	border: 1px solid var(--color-accent);
	transition:
		box-shadow var(--transition-base),
		transform var(--transition-base);
}
.pillar:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.pillar__icon {
	font-size: 1.5rem;
	margin-bottom: var(--space-4);
}

.pillar__heading {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
}
.pillar__desc {
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* -------------------- 10. Audience Cards (Section 4) ---------------------------------------- */
.audience-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

.audience-card {
	padding: var(--space-8);
	background: var(--clr-white);
	border-radius: var(--radius-xl);
	border: 1px solid var(--clr-gray-200);
	position: relative;
	transition: box-shadow var(--transition-base);
}
.audience-card:hover {
	box-shadow: var(--shadow-lg);
}

.audience-card--featured {
	border-color: var(--clr-green);
	background: linear-gradient(
		160deg,
		var(--clr-white) 0%,
		var(--clr-green-light) 100%
	);
}

.audience-card__badge {
	position: absolute;
	top: -1px;
	right: var(--space-6);
	background: var(--clr-green);
	color: var(--clr-white);
	font-size: var(--font-size-xs);
	font-weight: 600;
	padding: var(--space-1) var(--space-3);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.audience-card__icon {
	font-size: 1.5rem;
	margin-bottom: var(--space-4);
}

.audience-card__heading {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
}
.audience-card__desc {
	color: var(--clr-gray-600);
	line-height: 1.7;
	margin-bottom: var(--space-4);
}


.audience-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* -------------------- 11. Tech Grid (Section 5) ---------------------------------------- */
.tech-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

.tech-card {
	padding: var(--space-6);
	background: var(--color-white-06);
	border: 1px solid var(--color-white-12);
	border-radius: var(--radius-xl);
	text-align: left; /* override .section--dark .section__container { text-align: center } */
	transition:
		background var(--transition-base),
		transform var(--transition-base);
}
.tech-card:hover {
	background: var(--color-white-10);
	transform: translateY(-2px);
}

.tech-card__icon {
	margin-bottom: var(--space-4);
}

.tech-card__name {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-white);
	margin-bottom: var(--space-2);
}
.tech-card__desc {
	font-size: var(--font-size-sm);
	color: var(--color-white-65);
	line-height: 1.6;
	margin-bottom: var(--space-4);
}
/* ── Arrow hover utility — shared by all arrow links and buttons ─────── */
.has-arrow .ph-arrow-right {
	display: inline-block;
	transition: transform var(--transition-fast);
}
.has-arrow:hover .ph-arrow-right {
	transform: translateX(4px);
}

.tech-card__link {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-primary-on-dark);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

/* -------------------- 12. Stats / Evidence (Section 6) ---------------------------------------- */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}

.stat-card {
	padding: var(--space-md);
	background: var(--clr-white);
	border-radius: var(--radius-xl);
	border: 1px solid var(--clr-gray-200);
	text-align: center;
	box-shadow: var(--shadow-sm);
}

.stat-card__number {
	font-size: var(--font-size-4xl);
	font-weight: var(--weight-extrabold);
	color: var(--clr-green);
	line-height: 1;
	margin-bottom: var(--space-2);
	letter-spacing: -0.02em;
}
.stat-card__number span {
	font-size: var(--font-size-xl);
}
.stat-card__label {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	font-weight: 500;
}

.pull-quote {
	background: var(--clr-white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	border-left: 4px solid var(--clr-green);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--space-8);
}
.pull-quote--large .pull-quote__text {
	font-size: var(--font-size-xl);
}

.pull-quote__text {
	font-size: var(--font-size-lg);
	font-style: italic;
	color: var(--clr-dark);
	line-height: 1.7;
	margin-bottom: var(--space-4);
}
.pull-quote__attribution cite {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	font-style: normal;
}

.research-ref {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	background: var(--clr-white);
	/* border-radius: var(--radius-xl); */
	padding: var(--space-6);
	/* border: 1px solid var(--clr-gray-200); */
	border-left: 4px solid var(--clr-green);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.research-ref__icon {
	flex-shrink: 0;
}
.research-ref__content strong {
	display: block;
	font-weight: 600;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.research-ref__content p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
}

/* -------------------- 13. Founder Section (Section 7) ---------------------------------------- */
.founder {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: center;
}

.founder__body p + p {
	margin-top: var(--space-4);
	color: var(--clr-gray-600);
}
.founder__body p:first-child {
	margin-top: var(--space-6);
	color: var(--clr-gray-600);
}

.founder__quote {
	margin: var(--space-8) 0;
	border-left: 4px solid var(--clr-green);
	padding-left: var(--space-6);
}
.founder__quote p {
	font-size: var(--font-size-xl);
	font-style: italic;
	color: var(--clr-dark);
	line-height: 1.6;
	margin-bottom: var(--space-3);
}
.founder__quote footer cite {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	font-style: normal;
	font-weight: 600;
}

.founder__photo-frame {
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--clr-gray-100);
}
.founder__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

/* -------------------- 13b. Founder Section — full-bleed split layout ---- */
.founder-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--bg-founder);
	min-height: 600px;
}

.founder-section__content {
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: max(var(--space-6), calc((100vw - var(--container-max)) / 2));
	padding-right: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.founder-section__cta {
	margin-top: var(--space-md);
}

.founder-section__image {
	position: relative;
	overflow: hidden;
	background: var(--clr-gray-100);
}

.founder-section__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.founder-section {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.founder-section__image {
		height: 320px;
		order: -1;
	}
	.founder-section__content {
		padding-top: 48px;
		padding-bottom: 48px;
		padding-left: var(--space-6);
		padding-right: var(--space-6);
	}
}

/* -------------------- 14. CTA / Contact (Section 8) ---------------------------------------- */
.cta-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-16);
}

.cta-col {
	padding: var(--space-8);
	background: var(--color-white-06);
	border: 1px solid var(--color-white-12);
	border-radius: var(--radius-xl);
	text-align: center;
}

.cta-col__icon {
	background: var(--color-primary-glow);
	font-size: 1.5rem;
	margin: 0 auto var(--space-4);
}

.cta-col__heading {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-white);
	margin-bottom: var(--space-3);
}
.cta-col__desc {
	color: var(--color-white-70);
	font-size: var(--font-size-sm);
	line-height: 1.7;
	margin-bottom: var(--space-6);
}
.cta-col__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}

/* CTA columns on light background (section--cta-contact) */
.section--cta-contact .cta-col {
	background: var(--bg-card-default);
	border-color: var(--color-neutral-200);
	box-shadow: var(--shadow-sm);
}
.section--cta-contact .cta-col__icon {
	color: var(--color-icon-brand);
}
.section--cta-contact .cta-col__heading {
	color: var(--text-on-white);
}
.section--cta-contact .cta-col__desc {
	color: var(--color-neutral-600);
}

/* Contact form wrap */
.contact-form-wrap {
	background: var(--clr-white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
}
.contact-form-wrap__heading {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-6);
}
.contact-form-wrap__intro {
	margin-bottom: var(--space-6);
}

/* -------------------- 15. Forms ---------------------------------------- */
.form-row {
	margin-bottom: var(--space-4);
}
.form-row--2col {
	display: grid;
	gap: var(--space-4);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.form-label {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-dark);
}
.form-label span {
	color: var(--clr-red);
}

.input {
	padding: 0.75rem var(--space-4);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-md);
	font-size: var(--font-size-base);
	color: var(--clr-dark);
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
	width: 100%;
}
.input:focus {
	outline: none;
	border-color: var(--clr-green);
	box-shadow: 0 0 0 3px var(--color-primary-focus);
}
.input::placeholder {
	color: var(--color-text-faint);
}
.input--textarea {
	resize: vertical;
	min-height: 120px;
}
.input--select {
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234B5563' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}
.input.is-error {
	border-color: var(--clr-red);
}

.form-error {
	font-size: var(--font-size-xs);
	color: var(--clr-red);
	min-height: 1em;
}

.form-actions {
	margin-top: var(--space-6);
}
.form-note {
	font-size: var(--font-size-xs);
	color: var(--clr-gray-600);
	margin-bottom: var(--space-4);
	line-height: 1.6;
}

.form-message {
	margin-top: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	display: none;
}
.form-message.is-success {
	background: var(--clr-green-light);
	color: var(--clr-green-dark);
	display: block;
}
.form-message.is-error {
	background: #fef2f2;
	color: var(--clr-red);
	display: block;
}

/* Fieldset / application form */
.form-section {
	border: none;
	margin-bottom: var(--space-8);
}
.form-section__legend {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--clr-gray-200);
	width: 100%;
}

/* -------------------- 16. Footer ---------------------------------------- */

/* Section 1 — Newsletter (above footer) */
.footer-newsletter {
	background: var(--bg-teal-wash);
	color: var(--color-primary);
}
.footer-newsletter__inner {
	max-width: 600px;
	margin: 0 auto;
	padding: 60px 24px;
	text-align: center;
}
.footer-newsletter__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}
.footer-newsletter__desc {
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	opacity: 0.8;
	margin-bottom: var(--space-6);
	line-height: 1.6;
}
.footer-newsletter .footer__newsletter-row .input {
	background: #ffffff;
	border-color: rgba(12, 126, 102, 0.3);
	color: var(--color-text);
}
.footer-newsletter .footer__newsletter-row .input::placeholder {
	color: var(--color-text-faint);
}
.footer-newsletter .footer__newsletter-row .input:focus {
	border-color: var(--color-primary);
}
.footer-newsletter .footer__newsletter-privacy {
	color: rgba(12, 126, 102, 0.6);
}

/* Section 2 — Footer main */
.footer {
	background: var(--bg-dark-teal);
	color: var(--text-on-dark-teal);
}

/* ROW A — Brand + App */
.footer__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md);
	display: grid;
	grid-template-columns: 35% 60%;
	gap: 5%;
	align-items: center;
}
.footer__logo .nav__logo-text {
	color: var(--clr-white);
}
.footer__tagline {
	font-size: var(--font-size-sm);
	color: var(--color-white-65);
	margin-top: var(--space-3);
	max-width: 25ch;
	line-height: 1.6;
}
.footer__compliance {
	font-size: var(--font-size-xs);
	color: var(--color-white-65); /* AA 5.01:1 vs dark-teal — antes 3.23:1 */
	margin-top: var(--space-3);
	line-height: 1.6;
}
.footer__social {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}
.footer__social-link {
	width: 36px;
	height: 36px;
	border: 0.5px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition:
		border-color var(--transition-fast),
		color var(--transition-fast);
}
.footer__social-link:hover {
	border-color: #ffffff;
	color: var(--color-text-on-dark);
}

/* App column */
.footer__app {
	display: flex;
	align-items: center;
	gap: 40px;
}
.app-mockup {
	width: 160px;
	height: 280px;
	background: #0a4f3e;
	border-radius: 28px;
	border: 6px solid rgba(255, 255, 255, 0.15);
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}
.app-mockup::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 6px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
}
.app-mockup__screen {
	position: absolute;
	inset: 24px 8px 8px;
	background: #0c7e66;
	border-radius: 16px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.app-mockup__screen-label {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-body);
}
.app-mockup__screen-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
	line-height: 1.3;
}
.app-mockup__bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
}
.app-mockup__bar--short {
	width: 60%;
}
.app-mockup__bar--med {
	width: 80%;
}
.app-mockup__bar--full {
	width: 100%;
}
.app-mockup__card {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 8px;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.footer__app-label {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 10px;
}
.app-badges {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.app-badge-link img {
	width: 160px;
	height: auto;
	display: block;
}

/* ROW B — Navigation */
.footer__nav-heading {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 16px;
}
.footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.footer__nav-link {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	display: block;
	padding: 4px 0;
	transition: color var(--transition-fast);
}
.footer__nav-link:hover {
	color: var(--color-text-on-dark);
}
.footer__nav-section {
	border-top: 0.5px solid rgba(255, 255, 255, 0.15);
	padding: 40px 24px;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

/* Newsletter form base styles */
.footer__newsletter-row {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}
.footer__newsletter-row .input {
	flex: 1;
}
.footer__newsletter-privacy {
	font-size: var(--font-size-xs);
}

/* ROW C — Crisis bar */
.footer__crisis {
	background: rgba(255, 255, 255, 0.08);
	padding: 14px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.footer__crisis-line {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	line-height: var(--leading-relaxed);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}
.footer__crisis-number {
	color: var(--color-text-on-dark);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	font-size: var(--text-sm);
}
.footer__crisis-link {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: underline;
	margin-left: 8px;
	white-space: nowrap;
	transition: color var(--transition-fast);
}
.footer__crisis-link:hover {
	color: var(--color-text-on-dark);
}

/* ROW D — Bottom bar */
.footer__bottom {
	background: rgba(0, 0, 0, 0.25);
}
.footer__bottom-inner {
	border-top: 0.5px solid rgba(255, 255, 255, 0.15);
	padding: 20px 24px;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.footer__copyright {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.5);
	line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
	.footer-newsletter__inner {
		padding: 40px 24px;
	}
	.footer__container {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.footer__app {
		flex-direction: column;
		align-items: center;
	}
	.footer__nav-section {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.footer__bottom-inner {
		text-align: center;
	}
}
@media (max-width: 480px) {
	.footer__nav-section {
		grid-template-columns: 1fr;
	}
}

/* ==================== HELPNOW PAGE ======================================= */

.hn-emergency {
	background: var(--bg-emergency);
	color: var(--text-emergency);
	font-size: var(--text-xs);
	text-align: center;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 1.5;
}
.hn-emergency .ph-icon {
	color: var(--icon-emergency);
	font-size: 1rem;
	flex-shrink: 0;
}
.hn-emergency a {
	color: var(--color-text-on-dark);
	text-decoration: underline;
	transition: color var(--transition-fast);
}
.hn-emergency a:hover {
	color: var(--text-emergency);
}

.hn-hero {
	background: var(--bg-dark-teal);
	color: var(--text-on-dark-teal);
	padding: 80px 24px 72px;
	text-align: center;
}
.hn-hero__inner {
	max-width: 680px;
	margin: 0 auto;
}
.hn-hero__eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-on-dark); /* AA 5.04:1 vs dark-teal — antes 3.28:1 */
	margin-bottom: 16px;
}
.hn-hero__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-bold);
	color: var(--color-text-on-dark);
	line-height: 1.1;
	margin-bottom: 20px;
}
.hn-hero__subheading {
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.7;
	margin-bottom: 40px;
}
.hn-hero__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}


.hn-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
	cursor: pointer;
	white-space: nowrap;
}
.hn-btn--card {
	background: var(--color-primary);
	color: var(--color-text-on-dark);
	border: none;
	padding: 10px 20px;
	font-size: var(--text-xs);
	margin-top: 12px;
}
.hn-btn--card:hover {
	background: var(--color-accent);
	color: var(--color-text);
}
.hn-btn--call {
	background: var(--color-primary);
	color: var(--color-text-on-dark);
	border: 2px solid var(--color-primary);
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--text-xs);
}
.hn-btn--call:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
}
.hn-btn--text {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--text-xs);
}
.hn-btn--text:hover {
	background: var(--color-primary);
	color: var(--color-text-on-dark);
}

.hn-section {
	padding: 64px 0;
}
.hn-section--alt {
	background: var(--clr-off-white);
}
.hn-section__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.hn-section__header {
	margin-bottom: 40px;
}
.hn-section__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-bold);
	color: var(--color-secondary);
	margin-bottom: 8px;
}
.hn-section__subheading {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.6;
}

.hn-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.hn-card {
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
}
.hn-card--featured {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary);
}
.hn-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.hn-card__title {
	font-size: var(--font-size-base);
	font-weight: var(--weight-semibold);
	color: var(--color-secondary);
	margin-bottom: 8px;
	line-height: 1.4;
}
.hn-card__desc {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.6;
	flex: 1;
}
.hn-card__name-fr {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-400);
	margin-top: -4px;
	margin-bottom: var(--space-3);
}
.hn-card__number {
	display: block;
	font-size: var(--font-size-lg);
	font-weight: var(--weight-semibold);
	color: var(--clr-gray-800);
	margin-bottom: var(--space-4);
}
.hn-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}
.hn-card__actions {
	display: flex;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-4);
}
.hn-card__actions > * {
	flex: 1;
	justify-content: center;
}

.hn-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: var(--weight-semibold);
	background: var(--clr-gray-100);
	color: var(--clr-gray-600);
}
.hn-tag--urgent {
	background: var(--color-primary-light);
	color: var(--color-primary);
}
.hn-tag--sm {
	font-size: 10px;
	padding: 2px 6px;
}

.hn-accordion {
	display: flex;
	flex-direction: column;
	gap: 1px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--clr-gray-200);
}
.hn-accordion-item {
	background: #ffffff;
}
.hn-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--clr-gray-200);
	cursor: pointer;
	font-size: var(--font-size-base);
	font-weight: var(--weight-semibold);
	color: var(--color-secondary);
	text-align: left;
	transition: background var(--transition-fast);
}
.hn-accordion-trigger:hover {
	background: var(--clr-off-white);
}
.hn-accordion-trigger[aria-expanded="true"] {
	background: var(--color-primary-light);
}
.hn-accordion-trigger__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.hn-accordion-icon {
	transition: transform 0.2s;
	color: var(--color-text-faint);
}
.hn-accordion-trigger[aria-expanded="true"] .hn-accordion-icon {
	transform: rotate(180deg);
}
.hn-accordion-body {
	padding: 20px 24px 24px;
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	border-bottom: 1px solid var(--clr-gray-200);
}
.hn-accordion-body p {
	margin-bottom: 0;
}
.hn-accordion-item:last-child .hn-accordion-trigger {
	border-bottom: none;
}
.hn-accordion-item:last-child .hn-accordion-body {
	border-bottom: none;
}

.hn-disclaimer {
	background: var(--clr-gray-100);
	border-top: 1px solid var(--clr-gray-200);
	padding: 32px 0;
}
.hn-disclaimer .hn-section__container {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.hn-disclaimer .ph-icon {
	color: var(--color-text-faint);
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 2px;
}
.hn-disclaimer p {
	font-size: var(--text-xs);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

.nav__dropdown-item--crisis {
	border-top: 1px solid var(--clr-gray-200);
	margin-top: 4px;
	padding-top: 12px;
}
.nav-drawer__link--crisis {
	color: var(--color-accent-on-dark) !important; /* AA 5.04:1 vs dark-teal — antes 3.28:1 */
}

@media (max-width: 768px) {
	.hn-hero__subheading {
		font-size: var(--font-size-base);
	}
}
@media (max-width: 480px) {
	.hn-hero {
		padding: 56px 24px 48px;
	}
	.hn-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.hn-btn,
	.hn-hero__actions .btn {
		justify-content: center;
	}
}

/* -------------------- 17. Cookie Banner ---------------------------------------- */
.cookie-banner {
	position: fixed;
	bottom: var(--space-md);
	left: auto;
	right: var(--space-md);
	z-index: 1500;
	transform: translateY(calc(100% + var(--space-md)));
	transition: transform var(--transition-slow);
	padding: var(--space-4) var(--space-6);
	background: var(--clr-dark);
	border: 1px solid var(--color-white-15);
	border-radius: var(--radius-lg);
	box-shadow: 0 -8px 32px var(--color-shadow-dark);
	max-width: 420px;
}
.cookie-banner.is-visible {
	transform: translateY(0);
}

.cookie-banner__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cookie-banner__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--clr-white);
	margin-bottom: var(--space-1);
}
.cookie-banner__desc {
	font-size: var(--font-size-sm);
	color: var(--color-white-70);
	line-height: 1.6;
}
.cookie-banner__policy-link {
	color: var(--color-primary-on-dark);
	text-decoration: underline;
}
.cookie-banner__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.cookie-banner__actions .btn {
	flex: 1 1 auto;
}

@media (max-width: 1023px) {
	.cookie-banner {
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		border-radius: 0;
		border: none;
		border-top: 1px solid var(--color-white-15);
		transform: translateY(100%);
	}
	.cookie-banner.is-visible {
		transform: translateY(0);
	}
}

/* -------------------- 18. Page-specific components ---------------------------------------- */

/* Feature list */
.feature-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-4) 0;
}
.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
}
.feature-list li i,
.feature-list li .ph-icon {
	color: var(--clr-green);
	flex-shrink: 0;
	margin-top: 0.1em;
}

/* Steps */
.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}
.steps--horizontal {
	gap: var(--space-6);
}

.step__number {
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-extrabold);
	color: var(--clr-green-light);
	letter-spacing: -0.02em;
	margin-bottom: var(--space-3);
}
.step__heading {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.step p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* Tech detail */
.tech-detail__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: center;
}
.tech-detail__icon {
	font-size: 1.75rem;
	margin-bottom: var(--space-4);
}
.tech-detail__name {
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-extrabold);
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.tech-detail__tagline {
	font-size: var(--font-size-lg);
	color: var(--clr-green);
	font-weight: 600;
	margin-bottom: var(--space-4);
}
.tech-detail__content p {
	color: var(--clr-gray-600);
	line-height: 1.8;
}
.tech-detail__content p + p {
	margin-top: var(--space-4);
}
.tech-detail__img {
	width: 100%;
	border-radius: var(--radius-xl);
	background: var(--clr-gray-100);
	aspect-ratio: 4/3;
	object-fit: cover;
	opacity: 0;
}

/* Comparison grid */
.comparison-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	max-width: 640px;
	margin-inline: auto;
}
.comparison-col {
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}
.comparison-col--traditional {
	background: var(--clr-gray-100);
	border: 1px solid var(--clr-gray-200);
}
.comparison-col--reispace {
	background: var(--clr-green-light);
	border: 1px solid var(--clr-green);
}
.comparison-col__header {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-4);
}
.comparison-col__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.comparison-col__list li {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
}
.comparison-col__list--neg li::before {
	content: "✕ ";
	color: var(--color-red);
}
.comparison-col__list--pos li::before {
	content: "✓ ";
	color: var(--clr-green);
	font-weight: 700;
}

/* HTML-table comparison cell variants (reiguide) */
.comparison-table__positive {
	background: var(--bg-teal-wash);
	color: var(--color-secondary);
	font-weight: var(--weight-bold);
}
.comparison-table__negative {
	background: var(--color-neutral-100);
	color: var(--color-neutral-600);
}
.comparison-table__header--negative {
	background: var(--color-neutral-600) !important;
	color: var(--color-text-on-dark) !important;
}
.comparison-table__header--positive {
	background: var(--color-primary) !important;
	color: var(--color-text-on-dark) !important;
}

/* Compliance badges */
.compliance-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-4) 0;
}
.compliance-badges li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--clr-dark);
	background: var(--clr-green-light);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
}
.compliance-badges i,
.compliance-badges .ph-icon {
	color: var(--clr-green);
}

/* Checklist (ul.checklist, ul.about-checklist) + inline icon lists */
.checklist li,
.about-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
}
.checklist i,
.checklist .ph-icon,
.about-checklist i,
.about-checklist .ph-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--clr-green);
}
.sector-item,
.benefit-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Sector grid */
.sector-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}
.sector-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-lg);
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
}
.sector-card i,
.sector-card .ph-icon {
	color: var(--clr-green);
	font-size: 1.5rem;
}

/* Language grid */
.language-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-bottom: var(--space-6);
}
.language-badge {
	font-size: var(--font-size-sm);
	padding: var(--space-2) var(--space-4);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-full);
	color: var(--clr-dark);
	font-weight: 500;
}

/* Checklist grid */
.checklist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
.checklist-item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	font-size: var(--font-size-base);
	color: var(--clr-gray-600);
	line-height: 1.6;
}
.checklist-item i,
.checklist-item .ph-icon {
	color: var(--clr-green);
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.1em;
}

/* Benefit grid (therapists) */
.benefit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.benefit-card {
	padding: var(--space-6);
	background: var(--clr-off-white);
	border-radius: var(--radius-xl);
	border: 1px solid var(--clr-gray-200);
}
.benefit-card__icon {
	margin-bottom: var(--space-3);
}
.benefit-card h3 {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.benefit-card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* Matching factors */
.matching-factors {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.matching-factor {
	text-align: center;
	padding: var(--space-6);
}
/* CSS preparado, sin HTML aún — evaluar post-launch */
.matching-factor__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green-light);
	border-radius: var(--radius-xl);
	color: var(--clr-green);
	font-size: 1.5rem;
	margin: 0 auto var(--space-4);
}
.matching-factor__title {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.matching-factor__desc {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* Card grid */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.card-grid--3 {
	grid-template-columns: 1fr;
}
.card {
	padding: var(--space-6);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
}
/* CSS preparado, sin HTML aún — evaluar post-launch */
.card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green-light);
	border-radius: var(--radius-lg);
	color: var(--clr-green);
	font-size: 1.25rem;
	margin-bottom: var(--space-4);
}
.card__heading {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
}
.card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* Icon content grid */
.icon-content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: center;
}
.icon-content-grid__text h2 {
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-extrabold);
	color: var(--clr-dark);
	margin-bottom: var(--space-4);
}
.icon-content-grid__text p {
	color: var(--clr-gray-600);
	line-height: 1.8;
}
.icon-content-grid__text p + p {
	margin-top: var(--space-4);
}
.icon-content-grid__visual img {
	width: 100%;
	border-radius: var(--radius-xl);
	aspect-ratio: 4/3;
	object-fit: cover;
	background: var(--clr-gray-100);
	opacity: 0;
}

/* Implementation timeline */
.impl-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}
.impl-timeline::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--clr-green-light);
}
.impl-phase {
	display: flex;
	gap: var(--space-6);
	padding-bottom: var(--space-12);
	position: relative;
}
.impl-phase:last-child {
	padding-bottom: 0;
}
.impl-phase__marker {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green);
	color: var(--clr-white);
	border-radius: var(--radius-full);
	font-weight: var(--weight-extrabold);
	font-size: var(--font-size-sm);
	position: relative;
	z-index: 1;
}
.impl-phase__meta {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-green);
	margin-bottom: var(--space-2);
}
.impl-phase__content h3 {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
}
.impl-phase__content p {
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* Values grid */
.values-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.value-card {
	padding: var(--space-6);
	background: var(--clr-off-white);
	border-radius: var(--radius-xl);
	border: 1px solid var(--clr-gray-200);
}
/* CSS preparado, sin HTML aún — evaluar post-launch */
.value-card__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green-light);
	border-radius: var(--radius-lg);
	color: var(--clr-green);
	font-size: 1.25rem;
	margin-bottom: var(--space-4);
}
.value-card__title {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.value-card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* Timeline */
.timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}
.timeline::before {
	content: "";
	position: absolute;
	left: 56px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--clr-green-light);
}
.timeline-item {
	display: flex;
	gap: var(--space-6);
	align-items: flex-start;
	padding-bottom: var(--space-8);
	position: relative;
}
.timeline-item:last-child {
	padding-bottom: 0;
}
.timeline-item__year {
	flex-shrink: 0;
	width: 64px;
	text-align: right;
	font-weight: 700;
	font-size: var(--font-size-sm);
	color: var(--clr-green);
	position: relative;
	padding-right: var(--space-6);
}
.timeline-item__year::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 4px;
	width: 10px;
	height: 10px;
	background: var(--clr-green);
	border-radius: 50%;
	border: 2px solid var(--clr-white);
	box-shadow: 0 0 0 2px var(--clr-green-light);
}
.timeline-item__event {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	padding-top: var(--space-1);
}

/* Pricing cards */
.pricing-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.pricing-card {
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
	background: var(--clr-white);
}
.pricing-card--featured {
	border-color: var(--clr-green);
	box-shadow: var(--shadow-lg);
}
.pricing-card__badge {
	position: absolute;
	top: 0;
	right: var(--space-6);
	background: var(--clr-green);
	color: var(--clr-white);
	font-size: var(--font-size-xs);
	font-weight: 700;
	padding: var(--space-1) var(--space-3);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.pricing-card__header {
	padding: var(--space-8);
	border-bottom: 1px solid var(--clr-gray-200);
}
.pricing-card__name {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.pricing-card__price {
	margin-bottom: var(--space-3);
}
.pricing-card__price-label {
	font-size: var(--font-size-lg);
	color: var(--clr-gray-600);
}
.pricing-card__ideal {
	font-size: var(--font-size-sm);
	color: var(--color-text-faint);
}
.pricing-card__features {
	padding: var(--space-6) var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.pricing-card__features li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
}
.pricing-card__features i,
.pricing-card__features .ph-icon {
	color: var(--clr-green);
	font-size: 1rem;
}
.pricing-card .btn {
	margin: 0 var(--space-8) var(--space-8);
}

/* Pricing info box */
.pricing-info-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}
.pricing-info-item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-4);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-lg);
}
.pricing-info-item > i,
.pricing-info-item > .ph-icon {
	color: var(--clr-green);
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.2em;
}
.pricing-info-item strong {
	display: block;
	font-weight: 600;
	color: var(--clr-dark);
	margin-bottom: var(--space-1);
}
.pricing-info-item p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.6;
}

/* FAQ */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.faq-item {
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.faq-item__question {
	padding: var(--space-4) var(--space-6);
	font-size: var(--font-size-base);
	font-weight: 600;
	color: var(--clr-dark);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq-item__question::-webkit-details-marker {
	display: none;
}
.faq-item__question::after {
	content: "+";
	color: var(--clr-green);
	font-size: 1.25rem;
	font-weight: 300;
}
details[open] .faq-item__question::after {
	content: "−";
}
.faq-item__answer {
	padding: 0 var(--space-6) var(--space-4);
	color: var(--clr-gray-600);
	font-size: var(--font-size-sm);
	line-height: 1.7;
}

/* Blog */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}
.blog-card {
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: box-shadow var(--transition-base);
}
.blog-card:hover {
	box-shadow: var(--shadow-md);
}
.blog-card__image-wrap {
	aspect-ratio: 16/9;
	background: var(--clr-gray-100);
}
.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
.blog-card__content {
	padding: var(--space-6);
}
.blog-card__meta {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	margin-bottom: var(--space-3);
	flex-wrap: wrap;
}
.blog-card__category {
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--clr-green);
	background: var(--clr-green-light);
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
}
.blog-card__date {
	font-size: var(--font-size-xs);
	color: var(--color-text-faint);
}
.blog-card__title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
	line-height: 1.3;
}
.blog-card__title a {
	color: inherit;
	transition: color var(--transition-fast);
}
.blog-card__title a:hover {
	color: var(--clr-green);
}
.blog-card__excerpt {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	margin-bottom: var(--space-4);
}
.blog-card__link {
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--clr-green);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}
.blog__more-note {
	text-align: center;
	margin-top: var(--space-8);
	color: var(--color-text-faint);
	font-size: var(--font-size-sm);
}

/* Blog post */
.blog-post__header {
	padding-top: calc(var(--section-py) + var(--space-4)) !important;
}
.blog-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	margin-bottom: var(--space-6);
}
.blog-post__back {
	font-size: var(--font-size-sm);
	color: var(--color-white-60);
	transition: color var(--transition-fast);
}
.blog-post__back:hover {
	color: var(--clr-white);
}
.blog-post__heading {
	font-size: var(--font-size-4xl);
	font-weight: var(--weight-extrabold);
	color: var(--clr-white);
	margin-bottom: var(--space-6);
	line-height: 1.1;
}
.blog-post__excerpt {
	font-size: var(--font-size-lg);
	color: var(--color-white-70);
	line-height: 1.7;
	margin-bottom: var(--space-6);
}
.blog-post__author {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}
.blog-post__author-info strong {
	display: block;
	font-weight: 600;
	color: var(--clr-white);
}
.blog-post__body {
	padding: var(--section-py) var(--space-6);
}
.blog-post__cta-box {
	margin-top: var(--space-12);
	padding: var(--space-8);
	background: var(--clr-green-light);
	border-radius: var(--radius-xl);
	border: 1px solid var(--clr-green);
}
.blog-post__cta-box p {
	color: var(--clr-dark);
	font-weight: 500;
	margin-bottom: var(--space-4);
}

/* Job listings */
.job-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.job-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
}
.job-card__title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-text-faint);
}
.job-card__meta span {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}
.job-card__desc {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
.careers__note {
	margin-top: var(--space-8);
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
}
.careers__note a {
	color: var(--clr-green);
}

/* Alert */
.alert {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-lg);
}
.alert--info {
	background: var(--bg-teal-wash);
	border: 1.5px solid var(--color-primary);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
}
.alert--info > i,
.alert--info > .ph-icon {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 0.1em;
}
.alert__heading {
	color: var(--color-secondary);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
}
.alert--info p {
	font-size: var(--font-size-sm);
	color: var(--color-neutral-dark);
	line-height: 1.6;
}

/* CTA simple section */
.section--cta-simple .section__container > h2 {
	color: var(--clr-white);
	font-size: var(--font-size-3xl);
	font-weight: var(--weight-extrabold);
	margin-bottom: var(--space-4);
}
.section--cta-simple .section__container > p {
	color: var(--color-white-75);
	font-size: var(--font-size-lg);
	margin-bottom: var(--space-8);
}
.section--cta-simple.section--green .section__container > h2 {
	color: var(--clr-white);
}
.section--cta-simple.section--green .section__container > p {
	color: var(--color-white-85);
}

/* -------------------- 19. Responsive ---------------------------------------- */
@media (min-width: 640px) {
	.form-row--2col {
		grid-template-columns: 1fr 1fr;
	}
	.pillars {
		grid-template-columns: repeat(2, 1fr);
	}
	.tech-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.comparison-grid {
		grid-template-columns: 1fr 1fr;
	}
	.sector-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.checklist-grid {
		grid-template-columns: 1fr 1fr;
	}
	.benefit-grid {
		grid-template-columns: 1fr 1fr;
	}
	.matching-factors {
		grid-template-columns: 1fr 1fr;
	}
	.card-grid--3 {
		grid-template-columns: 1fr 1fr;
	}
	.values-grid {
		grid-template-columns: 1fr 1fr;
	}
	.steps--horizontal {
		grid-template-columns: 1fr 1fr;
	}
	.blog-grid {
		grid-template-columns: 1fr 1fr;
	}
	.job-card {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

@media (min-width: 768px) {
	:root {
		--section-py: 6rem;
	}

	.lang-sheet .lang-dropdown__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hero__container {
		grid-template-columns: 1fr 1fr;
	}
	.hero__visual {
		display: block;
	}
	.hero__heading {
		font-size: var(--font-size-5xl);
	}
	.hero__trust-sep {
		display: block;
	}

	.page-hero__heading {
		font-size: var(--font-size-5xl);
	}

	.audience-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.cta-columns {
		grid-template-columns: 1fr 1fr 1fr;
	}
	/* 6-col grid con span 2: permite centrar filas incompletas (5 y 7 items). Si cambia el número de cards, ajustar los nth-child. */
	.pillars {
		grid-template-columns: repeat(6, 1fr);
	}
	.pillars > * {
		grid-column: span 2;
	}
	/* Centra la fila de 2 SOLO cuando el grid tiene exactamente 5 items */
	.pillars > *:nth-child(4):nth-last-child(2) {
		grid-column: 2 / span 2;
	}
	.stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.founder {
		grid-template-columns: 1fr 1fr;
	}
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* 6-col grid con span 2: permite centrar filas incompletas (5 y 7 items). Si cambia el número de cards, ajustar los nth-child. */
	.tech-grid {
		grid-template-columns: repeat(6, 1fr);
	}
	.tech-grid > * {
		grid-column: span 2;
	}
	/* 7 cards: la 7ma arranca en col 3 para centrarse sola */
	.tech-grid > *:nth-child(7) {
		grid-column: 3 / span 2;
	}
	.card-grid--3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.values-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.matching-factors {
		grid-template-columns: repeat(3, 1fr);
	}
	.steps--horizontal {
		grid-template-columns: repeat(4, 1fr);
	}

	.tech-detail__inner {
		grid-template-columns: 1fr 1fr;
	}
	.tech-detail__inner--reverse > :first-child {
		order: 2;
	}
	.tech-detail__inner--reverse > :last-child {
		order: 1;
	}

	.icon-content-grid {
		grid-template-columns: 1fr 1fr;
	}

	.pricing-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.comparison-grid {
		max-width: 100%;
	}

	.section__body--2col {
		columns: 2;
	}
}

@media (min-width: 1024px) {
	.nav__list {
		display: flex;
	}
	.nav__cta {
		display: inline-flex;
	}
	.lang-switcher {
		display: flex;
	}
	.nav__hamburger {
		display: none;
	}

	.hero__heading {
		font-size: var(--font-size-6xl);
	}

	.nav__dropdown {
		/* Prevent hover flicker */
		animation: dropdown-appear 0.15s ease;
	}
	@keyframes dropdown-appear {
		from {
			opacity: 0;
			transform: translateY(-4px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.benefit-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.sector-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------- Stats Bar ---------------------------------------- */
.stats-bar {
	background: var(--clr-dark);
	color: var(--clr-white);
}
.stats-bar__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-4) var(--space-6);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-8);
}
.stats-bar__item {
	font-size: var(--font-size-sm);
	color: var(--color-white-85);
}
.stats-bar__item strong {
	color: var(--clr-white);
	font-weight: 700;
}
.stats-bar__sep {
	width: 1px;
	height: 1.25rem;
	background: var(--color-white-25);
	display: none;
}
@media (min-width: 640px) {
	.stats-bar__sep {
		display: block;
	}
}

/* -------------------- Proof Cards (home problem section) ---------------------------------------- */
.proof-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: var(--space-xl);
}
.proof-card {
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.proof-card--teal {
	background: var(--color-primary);
	border: 1.5px solid var(--color-primary);
}
.proof-card--gold {
	background: var(--color-accent);
	border: 1.5px solid var(--color-accent);
}
.proof-card--indigo {
	background: var(--color-indigo);
	border: 1.5px solid var(--color-indigo);
}
.proof-card--teal .proof-card__title,
.proof-card--indigo .proof-card__title {
	color: var(--color-text-on-dark);
}
.proof-card--gold .proof-card__title {
	color: var(--color-text); /* AA 5.07:1 vs accent — antes blanco (2.91:1) */
}
.proof-card--teal .proof-card__body,
.proof-card--indigo .proof-card__body {
	color: rgba(255, 255, 255, 0.85);
}
.proof-card--gold .proof-card__body {
	color: var(--color-text); /* AA 5.07:1 — antes blanco 85% (2.53:1) */
}
.proof-card--teal .proof-card__icon,
.proof-card--gold .proof-card__icon,
.proof-card--indigo .proof-card__icon {
	background: rgba(255, 255, 255, 0.2);
}
.proof-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
}
.proof-card__icon i {
	font-size: 28px;
	color: var(--color-text-on-dark);
}
.proof-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-neutral-dark);
}
.proof-card__body {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}
@media (min-width: 768px) {
	.hn-cards {
		grid-template-columns: repeat(3, 1fr);
	}
	.hn-hero__heading {
		font-size: var(--font-size-5xl);
	}
	.proof-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* -------------------- Stats Grid 6-up ---------------------------------------- */
.stats-grid--6 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}
@media (min-width: 640px) {
	.stats-grid--6 {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.stats-grid--6 {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* -------------------- Pillar powered-by badge ---------------------------------------- */
.pillar__powered {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--clr-green);
	/* text-transform: uppercase; */
	letter-spacing: 0.05em;
	margin-bottom: var(--space-3);
}
.pillar__powered i,
.pillar__powered .ph-icon {
	font-size: 1rem;
}

/* -------------------- Evidence Story (home) ---------------------------------------- */
.evidence-story {
	/* background: var(--clr-off-white);
	border-radius: var(--radius-xl); */
	padding: var(--space-8);
	margin-top: var(--space-8);
	margin-bottom: var(--space-lg);

	/* background: linear-gradient(
		160deg,
		var(--color-bg-soft) 0%,
		var(--color-indigo-light) 100%
	); */
	background: var(--clr-white);
	border: 1px solid var(--color-indigo);
	border-radius: var(--radius-xl);
}
.evidence-story__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.evidence-story__item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}
.evidence-story__number {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green);
	color: var(--clr-white);
	border-radius: 50%;
	font-size: var(--font-size-lg);
	font-weight: var(--weight-extrabold);
}
.evidence-story__item p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	margin: 0;
}
@media (min-width: 768px) {
	.evidence-story__grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Testimonials ---------------------------------------- */
.section--testimonials .testimonial {
	box-shadow: var(--shadow-sm);
	padding: var(--space-8);
}
.testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-xl);
}
.testimonials-grid cite {
	font-style: normal;
	font-size: var(--font-size-sm);
}
.testimonial {
	padding: var(--space-md);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.testimonial--featured {
	border-color: var(--clr-green);
	background: var(--clr-green-light);
}
.testimonial__text {
	font-size: var(--font-size-base);
	color: var(--clr-gray-800);
	line-height: 1.8;
	font-style: italic;
	margin: 0;
}
.testimonial__attr {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	font-weight: 600;
	margin: 0;
}
.testimonial__quote {
	font-size: 2.5rem;
	line-height: 1;
	color: var(--clr-green);
	font-family: Georgia, serif;
}
@media (min-width: 768px) {
	.testimonials-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.testimonials-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Research Badge ---------------------------------------- */
.research-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.research-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--clr-green-light);
	color: var(--clr-green);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 600;
}
.research-source {
	margin-top: var(--space-6);
	padding: var(--space-6);
	background: var(--clr-off-white);
	border-left: 4px solid var(--clr-green);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}

/* -------------------- Portals Grid (platform page) ---------------------------------------- */
.portals-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.portal-card {
	padding: var(--space-8);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
	position: relative;
}
.portal-card--featured {
	border-color: var(--clr-green);
}
.portal-card__badge {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--clr-green);
	color: var(--clr-white);
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-4);
}
.portal-card__icon {
	font-size: 1.5rem;
	margin-bottom: var(--space-4);
}
.portal-card__heading {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
}
.portal-card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
	.portals-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.portals-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

/* -------------------- Infra Grid (platform page) ---------------------------------------- */
.infra-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
.infra-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--clr-off-white);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-sm);
	color: var(--clr-gray-800);
	font-weight: 500;
}
.infra-item i,
.infra-item .ph-icon {
	color: var(--clr-green);
	font-size: 1.25rem;
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.infra-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------- Process Steps stepper (reiguide) ---------------------------------------- */
.process-steps {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
}
.process-steps::before {
	content: "";
	position: absolute;
	left: 28px;
	top: 48px;
	bottom: 48px;
	width: 2px;
	background: linear-gradient(
		to bottom,
		var(--color-primary),
		var(--color-accent)
	);
	z-index: 0;
}
.process-step {
	position: relative;
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding-bottom: 40px;
	z-index: 1;
}
.process-step:last-child {
	padding-bottom: 0;
}
.process-step__number {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-text-on-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 0 6px var(--bg-section-alt);
}
.process-step__content {
	padding-top: 12px;
	flex: 1;
}

/* -------------------- Dimensions Grid (reiguide / therapist-matching) ---------------------------------------- */
.dimensions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.dimension-card {
	padding: var(--space-6);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
}
.dimension-card:nth-child(odd) {
	background: var(--bg-teal-wash);
	border-color: var(--color-primary);
}
.dimension-card:nth-child(even) {
	background: #ffffff;
	border-color: var(--color-border);
}
.dimension-card__num {
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	opacity: 0.15;
	line-height: 1;
	margin-bottom: 8px;
}
/* CSS preparado, sin HTML aún — evaluar post-launch */
.dimension-card__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green-light);
	border-radius: var(--radius-md);
	color: var(--clr-green);
	font-size: 1.25rem;
	margin-bottom: var(--space-3);
}
.dimension-card h3 {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.dimension-card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
@media (min-width: 640px) {
	.dimensions-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.dimensions-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Pathways Grid (reiguide) ---------------------------------------- */
.pathways-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.pathway-card {
	padding: var(--space-6);
	background: var(--bg-lavender-wash);
	border: 1.5px solid var(--color-lavender);
	border-radius: var(--radius-xl);
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
}
.pathway-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(123, 94, 167, 0.12);
}
/* CSS preparado, sin HTML aún — evaluar post-launch */
.pathway-card__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-lavender);
	border-radius: var(--radius-md);
	color: var(--color-text-on-dark);
	font-size: 1.25rem;
	margin-bottom: var(--space-3);
}
.pathway-card__heading,
.pathway-card h3,
.pathway-card strong {
	display: block;
	color: var(--color-lavender-dark);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	margin-bottom: 8px;
}
.pathway-card p {
	font-size: var(--text-sm);
	color: var(--color-neutral-600);
	line-height: var(--leading-normal);
}
@media (min-width: 640px) {
	.pathways-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.pathways-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Community Cards ---------------------------------------- */
.comm-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.comm-card {
	padding: var(--space-6);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
}
.comm-card__icon {
	font-size: 1.375rem;
	margin-bottom: var(--space-4);
}
.comm-card__heading {
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.comm-card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
@media (min-width: 640px) {
	.comm-cards {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.comm-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Hub Grid (community services hub) ---------------------------------------- */
.hub-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
.hub-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-lg);
}
.hub-item__icon {
	margin-bottom: var(--space-1);
}
.hub-item strong {
	display: block;
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-1);
	font-size: var(--font-size-sm);
}
.hub-item p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.6;
	margin: 0;
}
@media (min-width: 640px) {
	.hub-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.hub-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Elder Values & Services ---------------------------------------- */
.elder-values-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	margin-top: var(--space-8);
}
.elder-value {
	padding: var(--space-5);
	background: var(--clr-off-white);
	border-radius: var(--radius-lg);
	text-align: center;
}
.elder-value i,
.elder-value .ph-icon {
	display: block;
	font-size: 1.5rem;
	color: var(--clr-green);
	margin-bottom: var(--space-3);
}
.elder-value strong {
	display: block;
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
	font-size: var(--font-size-sm);
}
.elder-value p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.6;
	margin: 0;
}

.elder-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.elder-service {
	padding: var(--space-6);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-xl);
}
.elder-service i,
.elder-service .ph-icon {
	display: block;
	font-size: 1.5rem;
	color: var(--clr-green);
	margin-bottom: var(--space-3);
}
.elder-service h3 {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.elder-service p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
@media (min-width: 640px) {
	.elder-services-grid {
		grid-template-columns: 1fr 1fr;
	}
	.elder-values-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 1024px) {
	.elder-services-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.elder-feature-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	align-items: center;
}
.elder-feature-split__visual img {
	width: 100%;
	border-radius: var(--radius-xl);
	display: block;
	background: var(--clr-gray-100);
	min-height: 280px;
	object-fit: cover;
}
@media (min-width: 768px) {
	.elder-feature-split {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------- Modules List (therapists page) ---------------------------------------- */
.modules-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.module-item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-5);
	background: var(--clr-white);
	border: 1px solid var(--clr-gray-200);
	border-radius: var(--radius-lg);
}
.module-item__num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green);
	color: var(--clr-white);
	border-radius: 50%;
	font-weight: var(--weight-extrabold);
	font-size: var(--font-size-sm);
}
.module-item__content strong {
	display: block;
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-1);
}
.module-item__content p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	margin: 0;
}

/* -------------------- Requirements Split (therapists page) ---------------------------------------- */
.req-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}
@media (min-width: 768px) {
	.req-split {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------- Values List (careers page) ---------------------------------------- */
.values-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.values-list li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
.values-list li i,
.values-list li .ph-icon {
	color: var(--clr-green);
	font-size: 1.1rem;
	flex-shrink: 0;
	margin-top: 2px;
}

/* -------------------- Job Tags (careers page) ---------------------------------------- */
.job-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	background: var(--clr-green-light);
	color: var(--clr-green);
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
	font-weight: 600;
}

/* -------------------- Risk Grid (employers page) ---------------------------------------- */
.risk-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.risk-card {
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	border: 1px solid var(--clr-gray-200);
}
/* CSS preparado, sin HTML aún — evaluar post-launch */
.risk-card__icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
	font-size: 1.25rem;
	margin-bottom: var(--space-3);
}
.risk-card h3 {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-2);
}
.risk-card p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
@media (min-width: 640px) {
	.risk-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.risk-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------- Impl Why List ---------------------------------------- */
.impl-why-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-top: var(--space-6);
	padding: 0;
	list-style: none;
}
.impl-why-list li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4);
	background: var(--clr-off-white);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
}
.impl-why-list li i,
.impl-why-list li .ph-icon {
	color: var(--clr-red);
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 1px;
}
.impl-why-list li span {
	flex: 1;
}

/* -------------------- Impl Phase sub-elements ---------------------------------------- */
.impl-phase__num {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green);
	color: var(--clr-white);
	border-radius: 50%;
	font-weight: var(--weight-extrabold);
	font-size: var(--font-size-lg);
	flex-shrink: 0;
	z-index: 1;
	position: relative;
}
.impl-phase__label {
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--clr-green);
	margin-top: var(--space-1);
	text-align: center;
}
.impl-phase__heading {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-3);
}
.impl-phase__tasks {
	margin: var(--space-4) 0 0;
	padding-left: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.impl-phase__tasks li {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.6;
}

/* -------------------- About Timeline ---------------------------------------- */
.timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}
.timeline::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--clr-green-light);
}
.timeline__item {
	display: flex;
	gap: var(--space-6);
	padding-bottom: var(--space-10, 2.5rem);
	position: relative;
}
.timeline__item:last-child {
	padding-bottom: 0;
}
.timeline__marker {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.timeline__dot {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-green);
	border-radius: 50%;
	z-index: 1;
	position: relative;
}
.timeline__dot i,
.timeline__dot .ph-icon {
	color: var(--clr-white);
	font-size: 1rem;
}
.timeline__year {
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--clr-green);
	margin-top: var(--space-2);
	text-align: center;
}
.timeline__content {
	padding-top: var(--space-2);
}
.timeline__content h3 {
	font-size: var(--font-size-base);
	font-weight: 700;
	color: var(--clr-dark);
	margin-bottom: var(--space-1);
}
.timeline__content p {
	font-size: var(--font-size-sm);
	color: var(--clr-gray-600);
	line-height: 1.7;
	margin: 0;
}

/* ─── Phosphor web component baseline ───────────────────────────────────── */
.ph-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* RTL support placeholder (Phase 4) */
[dir="rtl"] .nav__list {
	flex-direction: row-reverse;
}
[dir="rtl"] .nav__right {
	margin-left: 0;
	margin-right: auto;
}
[dir="rtl"] .footer__container {
	direction: rtl;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS & MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ANIMATION 1: Fade-in on scroll ──────────────────────────────────────── */
.fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered card entry delays */
.proof-cards .proof-card:nth-child(1) {
	transition-delay: 0s;
}
.proof-cards .proof-card:nth-child(2) {
	transition-delay: 0.12s;
}
.proof-cards .proof-card:nth-child(3) {
	transition-delay: 0.24s;
}
.audience-cards .audience-card:nth-child(1) {
	transition-delay: 0s;
}
.audience-cards .audience-card:nth-child(2) {
	transition-delay: 0.12s;
}
.audience-cards .audience-card:nth-child(3) {
	transition-delay: 0.24s;
}
.tech-grid .tech-card:nth-child(1) {
	transition-delay: 0s;
}
.tech-grid .tech-card:nth-child(2) {
	transition-delay: 0.12s;
}
.tech-grid .tech-card:nth-child(3) {
	transition-delay: 0.24s;
}
.tech-grid .tech-card:nth-child(4) {
	transition-delay: 0.12s;
}
.tech-grid .tech-card:nth-child(5) {
	transition-delay: 0.24s;
}
.tech-grid .tech-card:nth-child(6) {
	transition-delay: 0.36s;
}
.tech-grid .tech-card:nth-child(7) {
	transition-delay: 0.12s;
}

/* Reiguide stagger delays */
.dimensions-grid .dimension-card:nth-child(1) {
	transition-delay: 0s;
}
.dimensions-grid .dimension-card:nth-child(2) {
	transition-delay: 0.1s;
}
.dimensions-grid .dimension-card:nth-child(3) {
	transition-delay: 0.2s;
}
.dimensions-grid .dimension-card:nth-child(4) {
	transition-delay: 0.3s;
}
.dimensions-grid .dimension-card:nth-child(5) {
	transition-delay: 0.4s;
}
.dimensions-grid .dimension-card:nth-child(6) {
	transition-delay: 0.5s;
}
.pathways-grid .pathway-card:nth-child(1) {
	transition-delay: 0s;
}
.pathways-grid .pathway-card:nth-child(2) {
	transition-delay: 0.1s;
}
.pathways-grid .pathway-card:nth-child(3) {
	transition-delay: 0.2s;
}
.pathways-grid .pathway-card:nth-child(4) {
	transition-delay: 0.3s;
}
.pathways-grid .pathway-card:nth-child(5) {
	transition-delay: 0.4s;
}
.pathways-grid .pathway-card:nth-child(6) {
	transition-delay: 0.5s;
}
.process-steps .process-step:nth-child(1) {
	transition-delay: 0s;
}
.process-steps .process-step:nth-child(2) {
	transition-delay: 0.1s;
}
.process-steps .process-step:nth-child(3) {
	transition-delay: 0.2s;
}
.process-steps .process-step:nth-child(4) {
	transition-delay: 0.3s;
}

/* ── ANIMATION 3: Hover lift on cards ────────────────────────────────────── */
.proof-card,
.audience-card,
.testimonial,
.tech-card {
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
}
.proof-card:hover,
.audience-card:hover,
.testimonial:hover,
.tech-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXTENDED ACCENT PALETTE — per-page & per-component colour application
   Teal remains dominant (~70%). Accents applied at eyebrows, labels, icons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tag variants ────────────────────────────────────────────────────────── */

/* Priority / urgency → coral */
.hn-tag--urgent {
	background: var(--bg-coral-wash);
	color: var(--color-coral-dark);
}

/* Youth resources → solar */
.hn-tag--youth {
	background: var(--bg-solar-wash);
	color: var(--color-solar-dark);
}

/* 2SLGBTQ+ resources → lavender */
.hn-tag--2slgbtq {
	background: var(--bg-lavender-wash);
	color: var(--color-lavender-dark);
}

/* ── Crisis card variants ────────────────────────────────────────────────── */

/* Solar border accent for youth-focused cards (Kids Help Phone) */
.hn-card--solar {
	border-color: var(--color-solar);
}

/* ── Audience card variants (home.php Section 4) ─────────────────────────── */

.audience-card--lavender {
	border-color: var(--color-lavender);
	background: linear-gradient(
		160deg,
		var(--clr-white) 0%,
		var(--bg-lavender-wash) 100%
	);
}
.audience-card--lavender .audience-card__icon {
	background: var(--bg-lavender-wash);
	color: var(--color-lavender);
}
.audience-card--lavender .audience-card__badge {
	background: var(--color-lavender);
}

/* ── Home: Platform section — indigo icon treatment on dark background ─────── */

.section--platform .tech-card__icon {
	background: var(--color-white-20);
	color: var(--color-indigo-light);
}
.section--platform .tech-card__link {
	color: var(--color-indigo-light);
}

/* ── Per-page accent scoping ─────────────────────────────────────────────── */

/* CORAL — Therapists page & crisis-adjacent content */
.page--coral .page-hero__eyebrow,
.page--coral .section__label {
	color: var(--color-coral-dark); /* AA 5.44:1 vs blanco — antes 3.64:1 */
}
.page--coral .benefit-card__icon {
	background: var(--bg-coral-wash);
	color: var(--color-coral-dark);
}

/* LAVENDER — Individuals & Community pages */
.page--lavender .page-hero__eyebrow,
.page--lavender .section__label {
	color: var(--color-lavender);
}
.page--lavender .pillar__icon {
	background: var(--bg-lavender-wash);
	color: var(--color-lavender);
}

/* SOLAR — Elder Support & youth-facing pages */
.page--solar .page-hero__eyebrow,
.page--solar .section__label {
	color: var(--color-solar-dark);
}
.page--solar .pillar__icon {
	background: var(--bg-solar-wash);
	color: var(--color-solar-dark);
}

/* INDIGO — Platform & Employers pages */
.page--indigo .page-hero__eyebrow,
.page--indigo .section__label {
	color: var(--color-indigo);
}
.page--indigo .pillar__icon,
.page--indigo .tech-detail__icon,
.page--indigo .portal-card__icon {
	background: var(--color-indigo-light);
	color: var(--color-indigo);
}

/* Hero dark eyebrow — overrides per-page accent colors (AA 5.04:1 vs dark-teal).
   Specificity (0,2,0) = same as page-- overrides; wins by cascade position (later).
   Identity pages override THIS rule with the block below (same spec, later position). */
.page-hero .page-hero__eyebrow {
	color: var(--color-accent-on-dark);
}

/* ── Identity hero overrides ─────────────────────────────────────────────── */

/* Hero backgrounds — deep identity tones (AA ratios verified by Hugo) */
.page--coral    .page-hero { background: var(--bg-hero-coral); }
.page--solar    .page-hero { background: var(--bg-hero-solar); }
.page--lavender .page-hero { background: var(--bg-hero-lavender); }
.page--indigo   .page-hero { background: var(--bg-hero-indigo); }

/* Hero eyebrow — wash tones on identity backgrounds (8.3–11.4:1 verified).
   Specificity (0,2,0) = same as dark-teal fix above; wins by cascade position (later). */
.page--coral    .page-hero__eyebrow { color: var(--bg-coral-wash); }
.page--solar    .page-hero__eyebrow { color: var(--bg-solar-wash); }
.page--lavender .page-hero__eyebrow { color: var(--bg-lavender-wash); }
.page--indigo   .page-hero__eyebrow { color: var(--bg-indigo-wash); }

/* Outline-light border on coral/solar (white-40 = 2.81:1 < 3.0 on these backgrounds) */
.page--coral .page-hero .btn--outline-light,
.page--solar .page-hero .btn--outline-light {
	border-color: var(--color-white-60);
}

/* Stats-bar identity continuity (platform, employers: indigo hero → indigo bar) */
.page--indigo .stats-bar { background: var(--bg-hero-indigo); }

/* ── BUTTON SPACING ─────────────────────────────────────────────────────── */
.section__body + .btn,
.section__body + .btn-group,
p + .btn,
p + .btn-group {
	margin-top: 28px;
}
.btn + p,
.btn-group + p,
.btn + .section__subheading {
	margin-top: 28px;
}
.process-steps + * {
	margin-top: 40px;
}
.comparison-table-wrap {
	width: 100%;
	overflow-x: auto;
	margin-top: 32px;
	margin-bottom: 32px;
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.comparison-table-wrap .comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
.comparison-table-wrap .comparison-table th,
.comparison-table-wrap .comparison-table td {
	padding: 14px 20px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}
.comparison-table-wrap .comparison-table thead th {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--color-neutral-dark);
	color: var(--color-text-on-dark);
}
.comparison-table-wrap .comparison-table tbody tr:nth-child(even) {
	background: var(--bg-offwhite);
}
.comparison-table-wrap .comparison-table tbody td {
	transition: filter var(--transition-fast);
}
.comparison-table-wrap .comparison-table tbody tr:hover td {
	filter: brightness(0.97);
}
.section__subheading + .dimensions-grid,
.section__subheading + .pathways-grid,
.section__subheading + .process-steps,
.section__subheading + .comparison-table-wrap {
	margin-top: 40px;
}
.section--dark {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}
.section--dark .section__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.section--dark .section__subheading {
	color: rgba(255, 255, 255, 0.8);
}
.section--dark .btn-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.section--dark .btn-group .btn {
	min-width: 180px;
	padding: 14px 28px;
	text-align: center;
	justify-content: center;
}

/* Print */
@media print {
	.site-header,
	.cookie-banner,
	.nav-drawer {
		display: none !important;
	}
	.section {
		padding: 1rem 0;
	}
}

/* Accessibility — reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}