/* ═════════════════════════════════════════════════════════════════
   PAGE — CALM PORTAL
   Standalone landing page composed entirely of reusable component
   partials (see /pages/page-calm-portal.php). This stylesheet only
   covers the page-specific deltas: theme tokens, hero overlay wash,
   right-aligned italic tail, and the final CTA accent band.

   Class prefix: `.cp-*` (cp = calm-portal).
   ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   THEME — CALM Portal renders against the green accent.
   ───────────────────────────────────────────────────────────────── */
.calm-portal.cp-theme-business {
	--accent:      var(--green);
	--accent-rgb:  11, 102, 35;
	--accent-tint: rgba(11, 102, 35, 0.16);
}


/* ─────────────────────────────────────────────────────────────────
   HERO — green wash over the bg video (matches Figma's
   rgba(11,102,35,0.35) mix-blend-screen).
   ───────────────────────────────────────────────────────────────── */
.cp-hero .cp-bg-overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Right-aligned italic tail — the Figma's "fingertips" word sits at
   the right edge of the hero column (the shared layout/hero.css rule
   leaves the tail at default left). */
.calm-portal .cp-hero .hero-headline .it-tail {
	text-align: right;
}


/* Caps-head tail — "One interface." must start on its own line.
   The shared caps-grid rule sets display:inline; override to block. */
.calm-portal .po-caps-head .display .it-tail { display: block; }


/* ─────────────────────────────────────────────────────────────────
   FINAL CTA — accent band variant (mirrors po-finalcta / pl-finalcta)
   ───────────────────────────────────────────────────────────────── */
.cp-finalcta {
	background: var(--accent);
}
.cp-finalcta h2 {
	display: flex;
	flex-direction: column;
	letter-spacing: -0.02em;
	line-height: 0.9;
}
.cp-finalcta h2 .hl-line { line-height: 0.9; }
.cp-finalcta h2 .it-tail { line-height: 0.9; }
.cp-finalcta p {
	font-size: var(--fs-body-sm);
	line-height: 1.54;
}
.cp-finalcta .btn-orange {
	background: var(--orange);
	color: var(--cream);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 12px;
	padding: 22px 32px;
	font-weight: 600;
}
/* Hover halo mirrors the band accent (green) instead of the
   button's own orange — the orange-on-green glow read as red.
   Using rgba with the same green tokens already declared on
   .cp-theme-business via --accent-rgb so the colour stays in sync
   if the accent ever moves. */
.cp-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(11, 102, 35, .35);
	transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────────
   "Continue exploring" — the agents-grid 3-up renders an anchor
   inside the timing slot. Style it as the underlined, green-on-hover
   "→ link" that the Figma calls for, and override the default
   white-space:nowrap on the timing pill so longer link labels wrap.
   ───────────────────────────────────────────────────────────────── */
.calm-portal .cp-explore .po-agent-timing {
	white-space: normal;
}
.calm-portal .cp-explore .po-agent-timing a {
	color: var(--green);
	text-decoration: none;
}
.calm-portal .cp-explore .po-agent-timing a:hover {
	text-decoration: underline;
}