/* ═════════════════════════════════════════════════════════════════
   PRODUCT — ACCOUNT OPENING (shared)

   One stylesheet powers BOTH product landing pages:
     - pages/page-business-account-opening.php  (Business / BAO)
     - pages/page-consumer-account-opening.php  (Consumer / CAO)

   Structural DNA is identical; the only cross-page differences are
   text content and the accent colour. All accent-sensitive rules
   reference `var(--accent)` + `var(--accent-tint)` + `var(--accent-rgb)`,
   which are declared once at the page root via a theme modifier:
     .product-opening.po-theme-business   → green
     .product-opening.po-theme-consumer   → red

   Class naming: every page-scoped hook uses the `.po-*` prefix
   (po = product-opening). Section modifier classes like `.po-faq` and
   `.po-finalcta` also scope the outer section so the shared `.finalcta`
   + FAQ CSS in /assets/css/layout/ keeps working unchanged.

   Section inventory (in source order):
   - Hero overlay + proof strip   (.po-hero)
   - 4-up advantages stat row     (.po-advantages)
   - Streamlined client journey   (.po-journey) — header card + 5-step
                                    row + single-panel crossfade footer
   - Platform capabilities 3×2    (.po-caps)
   - Agentic orchestration 2×2 +
     bottom stats row             (.po-agents)
   - FAQ                          (.po-faq, shared markup+CSS)
   - Final CTA accent band        (.po-finalcta)
   ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   THEME VARIANTS — scope --accent tokens once at the page root.
   Every rule in this file consults `var(--accent)` / `--accent-tint` /
   `--accent-rgb`, so swapping the wrapper modifier flips the whole
   page's accent without touching any other selector.
   ───────────────────────────────────────────────────────────────── */
.product-opening.po-theme-business {
	--accent:      var(--green);
	--accent-rgb:  11, 102, 35;
	--accent-tint: rgba(11, 102, 35, 0.16);
}
.product-opening.po-theme-business .hero-headline .it-tail {
	text-align: left;
}
.product-opening.po-theme-consumer {
	--accent:      var(--orange);
	--accent-rgb:  255, 79, 0;
	--accent-tint: rgba(255, 79, 0, 0.16);
}


/* ─────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────── */
.po-hero .po-bg-overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Top gutter for the fixed nav is the default in layout/hero.css
   (clamp(80px, 9vw, 140px)), shared with .hero. No override here. */

/* The CAO hero used to indent the italic tail with a hardcoded
   `margin-left: 538px`. The shared rule in /assets/css/layout/hero.css
   now sizes the headline to its widest line and right-aligns the tail
   against that content edge — so this override is no longer needed. */


/* ─────────────────────────────────────────────────────────────────
   ADVANTAGES — head-band + 4-up stat row
   The "head band" used to live here as `.po-adv-head` (full-bleed
   accent stripe with white headline + lede). It moved to the shared
   /assets/css/components/head-band.css and is now rendered by the
   /template-parts/components/head-band.php component — same markup
   BCP uses for its product band. `tone: accent` makes the band
   follow the page accent (green on BAO, orange on CAO). The
   `.po-advantages-band` modifier class is reserved here for any
   page-specific overrides that may surface later.

   `.po-advantages` keeps `padding-top: 0` so the stats row sits
   close to the band above without an extra full --section-y gap. */
.po-advantages { overflow-x: hidden; padding-top: 0px; }

/* .po-stats / .po-stat / .po-stat-val / .po-stat-body
   moved to /assets/css/components/stats-row.css. The component is now
   rendered via /template-parts/components/stats-row.php and reused on
   pages outside the product-opening cascade. */


/* STREAMLINED CLIENT JOURNEY — moved to /assets/css/components/journey-steps.css.
   Markup rendered via /template-parts/components/journey-steps.php. */


/* PLATFORM CAPABILITIES — 3×2 card grid
   .po-caps / .po-caps-head / .po-caps-grid / .po-cap / .po-cap-num /
   .po-cap-title / .po-cap-body all moved to
   /assets/css/components/caps-grid.css. Markup is rendered via
   /template-parts/components/caps-grid.php. */


/* AGENTIC ORCHESTRATION — 2×2 agent grid + stats row
   .po-agents / .po-agents-head / .po-agents-sub / .po-agent-grid /
   .po-agent / .po-agent-main / .po-agent-head / .po-agent-eyebrow /
   .po-agent-title / .po-agent-num / .po-agent-body / .po-agent-timing /
   .po-agent-stats / .po-agent-stat / .po-agent-stat-val /
   .po-agent-stat-lbl / .lbl-line all moved to
   /assets/css/components/agents-grid.css. Markup is rendered via
   /template-parts/components/agents-grid.php. */


/* FAQ — no page-specific overrides. Shared markup from
   /template-parts/components/faq-section.php + shared CSS in
   /assets/css/components/faq.css give both BAO and CAO the same FAQ
   treatment. The `.po-faq` modifier class stays on the section only so
   product-opening.js can scope its accordion handler (though the global
   main.js handler already covers it). */


/* ─────────────────────────────────────────────────────────────────
   FINAL CTA — accent band variant
   Matches Figma node 3185-2060 (product final CTA):
   - background flips to the theme accent
   - body copy uses tighter line-height (40/26 ≈ 1.54)
   - headline tracking tightened to -0.02em (-2.24px @ 112px)
   - button becomes orange with a hairline ink border + 14px radius
     + asymmetric padding
   ───────────────────────────────────────────────────────────────── */
.po-finalcta {
	background: var(--accent);
}
.po-finalcta h2 {
	display: flex;
	flex-direction: column;
	letter-spacing: -0.02em;
	line-height: 0.9;
}
.po-finalcta h2 .hl-line { line-height: 0.9; }
.po-finalcta h2 .it-tail { line-height: 0.9; }
.po-finalcta p {
	font-size: var(--fs-body-sm);
	line-height: 1.54;
}
.po-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;
}
/* On CAO, the final-CTA button swaps to green to read against the
   red/orange band and match the consumer brand pairing. */
.product-opening.po-theme-consumer .po-finalcta .btn-orange {
	background: var(--green);
}
.product-opening.po-theme-consumer .po-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(11, 102, 35, .35);
}
.po-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(255, 79, 0, .35);
	transform: translateY(-1px);
}

@media (max-width: 700px) {
   .po-finalcta .split-word {
      margin-bottom: 0;
   }
   .po-finalcta .sw-inner {
   line-height: 50px;
   }
   
}