/* Foundation: design-system tokens, typography, buttons, tags, cards, faq.
   Generated by scripts/sync-style-guide.ps1 — do not edit style-guide.css by hand. */
@import url("./style-guide.css");

/* reCAPTCHA v3 — hide floating badge (Google allows this when branding
   text is shown visibly in the form). See: developers.google.com/recaptcha/docs/faq */
.grecaptcha-badge { visibility: hidden; }

/* defaults — overridden at runtime by head.ejs :root {} injection */
:root {
  /* Form-element tokens — see CLAUDE.md "Form system" and
     claude-guidelines/ui-standards-checklist.md "Form elements". */
  --input-bg: #fff;
  --input-color: #000;
  --input-border: #d9d9d9;
  --input-border-hover: var(--color-berry-red);
  --input-radius: 0.5rem;
  --input-padding: 0.8rem 1rem;
  --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-mono: 'Menlo', 'Consolas', ui-monospace, monospace;
  /* Project-local decorative accent — design's "New" badge / feature tag.
     Not a synced brand token; do not hand-edit style-guide.css for this. */
  --color-gold: #FFC72C;
  --color-green: #14B99B;          /* project-local: assessment "low" tier + chip */
  --color-green-dark: #0F9B82;     /* project-local: assessment "low" tier + chip */
  --color-checkout-green: #1a7a4e;       /* project-local: checkout lock icon + done step */
  --color-checkout-green-dark: #155f3c;  /* project-local: checkout done step hover */
  --color-checkout-green-light: #f0faf5; /* decorative selected-row tint — not a brand token */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--color-berry-red); color: #fff; }
body { font-family: var(--font-family-sans); line-height: 1.65; font-size: 16px; }
/* Defensive safety net: prevent any single rogue element from
   producing a page-wide horizontal scrollbar. Marketing pages have
   lots of nested grids + atmospheric pseudo-elements and one
   overflowing child shouldn't paint dead whitespace to the right of
   every section. The actual overflow source should always be fixed
   too — this is a backstop, not a license to ignore overflow. */
html, body { overflow-x: clip; }
a { color: var(--color-berry-red); text-decoration: none; }
/* Hover underline applies ONLY to unclassed (body-copy) anchors. Every anchor
   styled as a card / tile / button / chip / nav link carries a class, so this
   rule can never give them a stray hover underline — and no per-component
   `text-decoration: none` opt-out is needed on them. This permanently kills the
   recurring "anchor-as-card gets underlined on hover" bug. Content links that
   genuinely WANT an underline (e.g. the `.checkout-*` inline links) declare it
   in their own explicit `:hover` rule, which still wins. See CLAUDE.md
   "Anchor-as-card components — hover underline guard". */
a:not([class]):hover { text-decoration: underline; }
/* Redundant now that the rule above excludes classed anchors, but kept as an
   explicit, self-documenting guarantee for button-styled anchors. */
a.btn:hover, .btn:hover { text-decoration: none; }
/* Nav chrome anchors (desktop nav + mobile drawer, all under .site-nav-header)
   are never body copy — pill CTAs ("Talk to our team"), mega-feature links,
   drawer items, etc. So opt the whole nav out of the global a:hover underline
   in one place rather than per-element. See CLAUDE.md "No underline on hover"
   hard rule — this defect recurs; this neutralises it nav-wide. */
.site-nav-header a:hover, .site-nav-header a:focus { text-decoration: none; }

/* ── Project-local text-colour utility classes ──
   Used by inline accent spans in landing-page H2s and section sub-copy
   (e.g. <em class="text-orange-cat">underperforms</em>). General-purpose
   enough to reuse across pages. Not in the synced style-guide.css — added
   here during the leadership-v3 faithful rerun (2026-05-13). Documented
   in claude-guidelines/style-guide-classes.md under "Project-local
   additions". */
.text-orange-cat { color: var(--color-orange-cat); }
.text-berry-red { color: var(--color-berry-red); }

/* ── Scroll-reveal helper ──
   Progressive-enhancement entrance animation. Source HTML pages mark
   sections with `data-reveal` to opt in. Page is visible without JS
   (graceful degradation); the inline script in footer.ejs adds the
   `.reveal-pending` class at load to fade elements out, then
   IntersectionObserver adds `.is-revealed` as each scrolls into view.
   Reduced-motion users get nothing hidden — the JS exits early and
   elements stay visible. Added during the leadership-v3 build
   (2026-05-13). */
.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal-pending.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending,
  .reveal-pending.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
p { margin-bottom: 1rem; }
ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; }
/* .faq-list is an accordion <ul> — neutralise the global ul,ol indent + the
   default disc markers. The synced style-guide .faq-list omits this reset
   (the design's page-level CSS carries it), so it lives here as a project
   override. Without it the FAQ sits ~1.5rem right of the rest of the section. */
.faq-list { list-style: none; padding-left: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); line-height: 1.25; font-weight: 700; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
img, video { max-width: 100%; height: auto; display: block; }

/* ── Layout ── */
.page-container { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ── Site nav (public marketing nav — desktop mega menu + mobile drawer) ──
   Ported from the v2 design source (training-mega-menu-vdesign2.html) with
   Lorraine's review notes applied on top: mobile drawer paradigm flipped from
   dark blue-black slide-right to light grey-1 fade-down with button-style
   items; Student Login icon dropped; "Explore team training" CTA added to the
   drawer bottom; section dividers in the drawer panel removed in favour of
   whitespace; desktop trigger chevron swapped from text caret to an SVG that
   rotates -90deg on open.

   NOT rendered on admin pages. */
.site-nav-header { position: relative; }
.site-nav { background-color: #fff; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #E8EDF2; }
.site-nav__inner { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; height: 68px; max-width: 1440px; margin: 0 auto; }
.site-nav__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.site-nav__logo:hover { text-decoration: none; }
.site-nav__logo img { height: 28px; width: auto; display: block; }
.site-nav__divider { width: 1px; height: 20px; background: var(--color-grey-2); margin: 0 1rem; flex-shrink: 0; }
.site-nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav__links li { position: relative; }
.site-nav__links a, .site-nav__trigger {
  font-family: var(--font-family-heading); font-size: 13.5px; font-weight: 500;
  color: var(--color-blue-black); background: none; border: 0; cursor: pointer;
  text-decoration: none; padding: 6px 10px; border-radius: 6px; line-height: 1;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.15s, background 0.15s;
}
.site-nav__links a:hover, .site-nav__trigger:hover { color: var(--color-blue-black); background: var(--color-grey-1); text-decoration: none; }
.site-nav__trigger.is-open { color: var(--color-berry-red); background: rgba(150, 0, 75, 0.08); }
.site-nav__caret { width: 9px; height: 9px; flex-shrink: 0; display: inline-block; transform: rotate(90deg); transition: transform 0.2s ease; color: inherit; }
.site-nav__trigger.is-open .site-nav__caret { transform: rotate(-90deg); }
.site-nav__utility { margin-left: auto; display: flex; align-items: center; gap: 0.625rem; }
/* Student Login — outlined pill, no icon (Lorraine: less prominent than CTA, no icon clutter). */
.site-nav__login {
  font-family: var(--font-family-heading); font-size: 13px; font-weight: 600;
  color: var(--color-blue-black); text-decoration: none;
  display: inline-flex; align-items: center;
  padding: 0 14px; height: 36px;
  border: 1.5px solid var(--color-grey-2); border-radius: 999px;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav__login:hover { color: var(--color-berry-red); border-color: var(--color-berry-red); text-decoration: none; }
.site-nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px;
  background: var(--color-red); color: #fff;
  border: 2px solid var(--color-red); border-radius: 999px;
  font-family: var(--font-family-heading); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.site-nav__cta:hover { background: var(--color-dark-red); border-color: var(--color-dark-red); text-decoration: none; }

/* Desktop mega panel — absolutely positioned so it overlays page content
   instead of growing the sticky nav. Anchored at top: 100% (bottom of the
   68px bar); paints above page content via the z-index:100 sticky stacking. */
.site-nav__mega {
  position: absolute; top: 100%; left: 0; right: 0;
  /* Capped to 1440px and centered, matching the site's page max-width and the
     .site-nav__inner bar — so above 1440px the panel doesn't spill into the
     page gutters (the margin issue). Same 1rem side padding as the bar keeps
     the content aligned under the nav items. */
  max-width: 1440px; margin-left: auto; margin-right: auto;
  background: #fff;
  border-bottom: 1px solid #E8EDF2;
  box-shadow: 0 20px 40px -12px rgba(16,24,40,0.12), 0 4px 16px -4px rgba(16,24,40,0.06);
  padding: 32px 1rem 28px;
  animation: siteNavMegaIn 0.16s ease both;
}
@keyframes siteNavMegaIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-nav__mega-layout { display: grid; gap: 0; width: 100%; }
.site-nav__mega-col { display: flex; flex-direction: column; gap: 10px; padding: 0 32px; max-width: 500px; }
.site-nav__mega-col:first-child { padding-left: 0; }
.site-nav__mega-col-head { padding-bottom: 10px; border-bottom: 2px solid var(--color-berry-red); margin-bottom: 2px; }
.site-nav__mega-col-title {
  font-family: var(--font-family-heading);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--color-berry-red); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 0.15s;
}
a.site-nav__mega-col-title:hover { color: var(--color-dark-red); text-decoration: none; }
.site-nav__mega-items { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav__mega-item {
  display: block; padding: 7px 22px 7px 8px;
  margin: 0 -8px; border-radius: 5px;
  text-decoration: none;
  position: relative;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.site-nav__mega-item::after {
  content: ''; position: absolute;
  right: 8px; top: 50%;
  width: 8px; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3.44.44c.59-.59,1.54-.59,2.12,0l6,6c.59.59.59,1.54,0,2.12l-6,6c-.59.59-1.54.59-2.12,0-.59-.59-.59-1.54,0-2.12l4.94-4.94L3.44,2.56c-.59-.59-.59-1.54,0-2.12Z' fill='%2396004B' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0;
  transform: translateY(-50%) translateX(-3px);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.site-nav__mega-item:hover { background: var(--color-grey-1); border-left-color: var(--color-berry-red); text-decoration: none; }
.site-nav__mega-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.site-nav__mega-item:hover .site-nav__mega-item-desc { color: var(--color-blue-black); }
.site-nav__mega-item-titlerow { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.site-nav__mega-item-title { font-family: var(--font-family-heading); font-size: 13px; font-weight: 600; color: var(--color-blue-black); line-height: 1.25; letter-spacing: -0.01em; }
.site-nav__mega-item-desc { display: block; font-family: var(--font-family-heading); font-size: 12.5px; font-weight: 400; color: var(--color-grey-3); line-height: 1.4; margin-top: 2px; transition: color 0.15s; }
.site-nav__mega-badge {
  display: inline-block; flex-shrink: 0;
  font-family: var(--font-family-heading);
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 6px 2px; border-radius: 999px;
  vertical-align: middle; white-space: nowrap; line-height: 1;
  background: var(--color-gold); color: #000;
}
/* Feature panel — berry-red gradient card on the right of the mega layout */
.site-nav__mega-feature {
  background: linear-gradient(155deg, var(--color-berry-red) 0%, var(--color-dark-red) 100%);
  border-radius: 10px; padding: 24px 22px;
  color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  margin-left: 32px;
}
.site-nav__mega-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-magenta-2), transparent); }
.site-nav__mega-feature::after {
  content: ''; position: absolute;
  bottom: -40px; right: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.site-nav__mega-feature-tag { display: inline-block; font-family: var(--font-family-heading); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.site-nav__mega-feature-title { font-family: var(--font-family-heading); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 10px; color: #fff; }
.site-nav__mega-feature-desc { font-family: var(--font-family-heading); font-size: 12.5px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.72); margin-bottom: 20px; }
.site-nav__mega-feature-link {
  font-family: var(--font-family-heading); font-size: 12px; font-weight: 600;
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px; padding: 7px 14px;
  margin-top: auto; align-self: flex-start;
  transition: background 0.15s, border-color 0.15s;
  pointer-events: none; /* whole .site-nav__mega-feature <a> owns hover/click; pill is a faux-button */
}
a.site-nav__mega-feature { text-decoration: none; cursor: pointer; transition: filter 0.18s ease; }
a.site-nav__mega-feature:hover { filter: brightness(1.1); text-decoration: none; }
a.site-nav__mega-feature:hover .site-nav__mega-feature-link { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.38); }
.site-nav__mega-footer {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--color-grey-2);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.site-nav__mega-footer-note { font-family: var(--font-family-heading); font-size: 13px; font-weight: 500; color: var(--color-blue-black); }
.site-nav__mega-footer-note a { color: var(--color-berry-red); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.site-nav__mega-footer-note a:hover { text-decoration: none; }

/* ── Hamburger + mobile drawer (v2 paradigm: light grey-1, fade-down, button-style items) ── */
.site-nav__hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; color: var(--color-blue-black); margin-left: auto; overflow: visible; }
.site-nav__hamburger svg { width: 28px; height: 28px; overflow: visible; display: block; }
.site-nav__hamburger svg line { transition: transform 0.2s ease, opacity 0.2s ease; }
.site-nav__hamburger[aria-expanded="true"] svg line:nth-child(1) { transform: translate(12px, 12px) rotate(45deg) translate(-12px, -12px) translateY(6px); }
.site-nav__hamburger[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.site-nav__hamburger[aria-expanded="true"] svg line:nth-child(3) { transform: translate(12px, 12px) rotate(-45deg) translate(-12px, -12px) translateY(-6px); }

/* Drawer paradigm: positioned directly below the 68px header, light grey-1
   background, fades in with a small translateY (NOT a slide-right from blue-black).
   Per Lorraine's review: feels like an extension of the nav, not a separate panel. */
.site-nav__drawer {
  position: fixed;
  top: 68px; left: 0; right: 0; bottom: 0;
  background: var(--color-grey-1);
  border-top: 1px solid var(--color-grey-2);
  z-index: 199;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.site-nav__drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
/* Drawer header hidden in v2 — the top nav bar (hamburger toggles X) covers it */
.site-nav__drawer-header { display: none; }
.site-nav__drawer-nav { flex: 1; padding: 0; }
.site-nav__drawer-list { list-style: none; margin: 0; padding: 0; }
.site-nav__drawer-item { border-bottom: 2px solid #fff; }
.site-nav__drawer-link, .site-nav__drawer-expander {
  display: flex; width: 100%;
  align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--color-grey-1);
  border: 0; border-radius: 0; text-align: left;
  font-family: var(--font-family-heading); font-size: 17px; font-weight: 600;
  color: var(--color-blue-black);
  text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav__drawer-link:hover,
.site-nav__drawer-expander:hover { background: #DDE0EC; color: var(--color-blue-black); text-decoration: none; }
.site-nav__drawer-item.is-open .site-nav__drawer-expander { background: #DDE0EC; }
.site-nav__drawer-chevron { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.25s ease; fill: var(--color-blue-black); transform: rotate(0deg); }
.site-nav__drawer-item.is-open .site-nav__drawer-chevron { transform: rotate(180deg); }

/* Panel content (the expanded section under each drawer item) lives on a
   white background and is divided into sections separated by whitespace —
   NOT borders (per Lorraine's review: drop column dividers in favour of
   whitespace). */
.site-nav__drawer-panel { max-height: 0; overflow: hidden; background: #fff; transition: max-height 0.4s ease; padding: 0; }
.site-nav__drawer-item.is-open .site-nav__drawer-panel { max-height: 4000px; }
.site-nav__drawer-section { margin: 0; padding: 8px 8px 8px; }
.site-nav__drawer-section + .site-nav__drawer-section { padding-top: 32px; }
.site-nav__drawer-section:last-child { padding-bottom: 20px; }
.site-nav__drawer-section-title {
  font-family: var(--font-family-heading);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--color-berry-red);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-berry-red);
  margin: 0 0 14px;
}
.site-nav__drawer-section-item {
  display: block; margin-bottom: 12px; text-decoration: none;
  padding: 6px 8px;
  border-radius: 5px;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.site-nav__drawer-section-item:last-child { margin-bottom: 0; }
.site-nav__drawer-section-item:hover {
  background: var(--color-grey-1);
  border-left-color: var(--color-berry-red);
  text-decoration: none;
}
.site-nav__drawer-section-item:hover .site-nav__drawer-section-item-desc { color: var(--color-blue-black); }
.site-nav__drawer-section-item-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-family-heading);
  font-size: 15px; font-weight: 600;
  color: var(--color-blue-black); line-height: 1.25;
  letter-spacing: -0.01em;
}
.site-nav__drawer-section-item-desc {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 12.5px; color: var(--color-grey-3);
  line-height: 1.4; margin-top: 2px;
  transition: color 0.15s;
}
.site-nav__drawer-feature {
  margin: 20px 8px 8px;
  background: linear-gradient(155deg, var(--color-berry-red) 0%, var(--color-dark-red) 100%);
  border-radius: 10px; padding: 20px 22px;
  color: #fff;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.site-nav__drawer-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-magenta-2), transparent); }
.site-nav__drawer-feature h3 { font-family: var(--font-family-heading); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 8px; color: #fff; }
.site-nav__drawer-feature p { font-family: var(--font-family-heading); font-size: 11px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0 0 16px; }
.site-nav__drawer-feature a {
  font-family: var(--font-family-heading); font-size: 12px; font-weight: 600;
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px; padding: 7px 14px;
  align-self: flex-start;
  transition: background 0.15s, border-color 0.15s;
}
.site-nav__drawer-feature a:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.35); text-decoration: none; }
.site-nav__drawer-footer {
  padding: 16px 8px;
  font-family: var(--font-family-heading); font-size: 13px; font-weight: 500;
  color: var(--color-blue-black);
}
.site-nav__drawer-footer a { color: var(--color-berry-red); font-weight: 600; text-decoration: none; }
.site-nav__drawer-footer a:hover { text-decoration: none; }

/* Drawer bottom CTA stack: white card with Teams CTA + Contact Us + Student Login */
.site-nav__drawer-cta {
  padding: 16px 22px 28px;
  background: #fff;
  border-top: 1px solid var(--color-grey-2);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}
/* Teams CTA — berry-red pill, sits above Contact Us. Lorraine: "Add the teams CTA
   back in the bottom left." Hardcoded in the partial (drawer-only). */
.site-nav__drawer-teams {
  display: block; text-align: center;
  background: var(--color-berry-red); color: #fff;
  padding: 14px 18px; border-radius: 999px;
  font-family: var(--font-family-heading); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
.site-nav__drawer-teams:hover { background: var(--color-dark-red); color: #fff; text-decoration: none; }
/* Contact Us — primary red pill */
.site-nav__drawer-button {
  display: block; text-align: center;
  background: var(--color-red); color: #fff;
  padding: 14px 18px; border-radius: 999px;
  font-family: var(--font-family-heading); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
/* Student Login — low-emphasis outlined pill, no icon (Lorraine) */
.site-nav__drawer-login {
  display: block; text-align: center;
  background: transparent; color: var(--color-blue-black);
  padding: 14px 18px; border-radius: 999px;
  border: 1.5px solid var(--color-grey-2);
  font-family: var(--font-family-heading); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
/* :hover restates text-decoration: none — the global `a:hover { underline }` (line 35) wins otherwise. */
.site-nav__drawer-button:hover { background: var(--color-dark-red); text-decoration: none; }
.site-nav__drawer-login:hover { color: var(--color-berry-red); border-color: var(--color-berry-red); text-decoration: none; }

/* Mobile breakpoint — swap desktop nav for hamburger.
   v2 uses 1082px (was 900px); the wider breakpoint accounts for the longer
   v2 nav with For Teams + Product Training + Why Product Institute + Resources
   + outlined login pill + Contact Us CTA all in one row. */
@media (max-width: 1082px) {
  .site-nav__links { display: none; }
  .site-nav__utility .site-nav__cta { display: none; }
  .site-nav__utility .site-nav__login { display: none; }
  .site-nav__hamburger { display: inline-flex; margin-left: 0; }
  .site-nav__mega { display: none; }
  .site-nav__divider { display: none; }
}

/* ── Page ── */
.page-body { min-height: 60vh; }
.page-body > .page-container { max-width: 860px; padding-bottom: 5rem; }

/* ── Footer ──────────────────────────────────────────────────────────────────
   Faithful port of PI_LandingPage_Design/Pages/Footer for site/
   site-footer-vDesign1.html. One continuous blue-black `.footer-zone` carrying
   the newsletter band + 5-column link grid + legal bottom bar. Hardcoded
   structure (links from footer-link-audit.md, mapped to live slugs) — no
   longer driven by the `footer` navigation menu. Source 'Poppins' →
   var(--font-family-heading), 'Nunito Sans' → var(--font-family-sans). The
   newsletter form posts to /contact/newsletter (see footer.ejs handler).
── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.footer-zone { background: var(--color-blue-black); position: relative; overflow: hidden; }

/* Newsletter band */
.footer-newsletter { background: transparent; position: relative; }
.footer-newsletter__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 56px 40px 32px; }
.footer-newsletter__card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 40px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.footer-newsletter__kicker { display: block; font-family: var(--font-family-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.50); margin-bottom: 10px; }
.footer-newsletter__headline { font-family: var(--font-family-heading); font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; color: var(--color-true-white); margin-bottom: 10px; }
.footer-newsletter__headline em { font-style: italic; font-weight: 300; color: var(--color-magenta-2); }
.footer-newsletter__sub { font-family: var(--font-family-heading); font-size: 14px; font-weight: 400; line-height: 1.65; color: rgba(255,255,255,0.70); }
.footer-newsletter__form { display: flex; flex-direction: column; gap: 10px; }
.footer-newsletter__field { display: flex; gap: 8px; }
.footer-newsletter__input { flex: 1; height: 44px; min-height: 44px; padding: 0 16px; background: rgba(255,255,255,0.10); border: 1.5px solid rgba(255,255,255,0.24); border-radius: 6px; font-family: var(--font-family-heading); font-size: 13.5px; font-weight: 400; color: var(--color-true-white); outline: none; transition: border-color 0.15s, background 0.15s; }
.footer-newsletter__input::placeholder { color: rgba(255,255,255,0.42); }
.footer-newsletter__input:focus { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.14); }
.footer-newsletter__field .btn-primary { background: var(--color-red); color: var(--color-true-white); border-color: var(--color-red); height: 44px; padding: 0 22px; border-radius: 100px; font-size: 13.5px; flex-shrink: 0; }
.footer-newsletter__field .btn-primary:hover { background: var(--color-dark-red); color: var(--color-true-white); border-color: var(--color-dark-red); }
.footer-newsletter__privacy { font-family: var(--font-family-heading); font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.38); line-height: 1.5; }
.footer-newsletter__privacy a { color: rgba(255,255,255,0.52); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; }
.footer-newsletter__privacy a:hover { color: var(--color-magenta-2); }
.footer-newsletter__success { display: none; flex-direction: row; align-items: center; gap: 12px; }
.footer-newsletter__success-icon { width: 40px; height: 40px; border-radius: 50%; background: #059669; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-newsletter__success-icon svg { width: 16px; height: 16px; stroke: #ffffff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.footer-newsletter__success-title { font-family: var(--font-family-heading); font-size: 15px; font-weight: 600; color: var(--color-true-white); margin: 0; }
.footer-newsletter__success-sub { font-family: var(--font-family-heading); font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.5; }
.footer-newsletter__form.submitted .footer-newsletter__field,
.footer-newsletter__form.submitted .footer-newsletter__privacy { display: none; }
.footer-newsletter__form.submitted .footer-newsletter__success { display: flex; }

/* Site footer — link grid + legal bottom bar (transparent over .footer-zone) */
.site-footer { background: transparent; position: relative; padding: 0; color: inherit; }
.site-footer__inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 32px 40px 0; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1.4fr 1.6fr 1fr 1.1fr; gap: 0 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-footer__brand { padding-right: 4px; }
.site-footer__logo-link { display: inline-block; margin-bottom: 18px; }
.site-footer__logo { height: 24px; display: block; }
.site-footer__tagline { font-family: var(--font-family-heading); font-size: 12.5px; font-weight: 400; line-height: 1.75; color: rgba(255,255,255,0.60); margin-bottom: 16px; }
.site-footer__tagline em { font-style: italic; color: rgba(255,255,255,0.80); }
.site-footer__email { display: inline-block; font-family: var(--font-family-heading); font-size: 12.5px; font-weight: 400; color: var(--color-magenta-2); text-decoration: none; margin-bottom: 22px; transition: color 0.15s; }
.site-footer__email:hover { color: var(--color-true-white); }
.site-footer__social { display: flex; gap: 8px; }
.site-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.11); border-radius: 6px; color: rgba(255,255,255,0.50); text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.site-footer__social-link:hover { background: rgba(238,102,165,0.16); border-color: rgba(238,102,165,0.36); color: var(--color-magenta-2); }
.site-footer__social-link svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; display: block; }
.site-footer__social-link[aria-label="Apple Podcasts"] svg { width: 18px; height: 18px; }
.site-footer__col { padding-top: 2px; }
.site-footer__col-head { font-family: var(--font-family-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.36); padding-bottom: 10px; border-bottom: 1.5px solid rgba(255,255,255,0.09); margin-bottom: 12px; }
.site-footer__col-head--gap { margin-top: 28px; }
.site-footer__links { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.site-footer__links li a { display: block; font-family: var(--font-family-heading); font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.62); text-decoration: none; padding: 5px 0; line-height: 1.4; transition: color 0.15s; }
.site-footer__links li a:hover { color: var(--color-true-white); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 32px; }
.site-footer__copyright { font-family: var(--font-family-heading); font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.28); margin: 0; }
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { font-family: var(--font-family-heading); font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.28); text-decoration: none; transition: color 0.15s; }
.site-footer__legal a:hover { color: rgba(255,255,255,0.65); }

@media (max-width: 1060px) {
  .footer-newsletter__inner { padding: 48px 32px; }
  .footer-newsletter__card { grid-template-columns: 1fr; gap: 28px; padding: 32px 36px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .site-footer__brand { grid-column: 1 / -1; padding-right: 0; max-width: 540px; }
}
@media (max-width: 640px) {
  .footer-newsletter__inner { padding: 40px 22px; }
  .footer-newsletter__card { padding: 28px 24px; }
  .footer-newsletter__headline { font-size: 22px; }
  .footer-newsletter__field { flex-direction: column; }
  .footer-newsletter__field .btn-primary { width: 100%; height: 46px; justify-content: center; }
  .site-footer__inner { padding: 40px 22px 0; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__brand { max-width: 100%; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 40px; }
}

/* ── Form elements ────────────────────────────────────────────────────────────
   Class-based form-control system. Tokens live in :root above.
   Use .form-input / .form-textarea / .form-select on <input>, <textarea>,
   <select>. Same visual baseline as admin .field inputs (admin.css).
   Full standard + audit checklist:
     CLAUDE.md → Conventions → Form system
     claude-guidelines/ui-standards-checklist.md → Form elements
── */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: var(--input-bg);
  color: var(--input-color);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding);
  font: inherit;
  line-height: 0;
  transition: border-color 0.15s ease;
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover,
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--input-border-hover);
  outline: none;
}
.form-textarea { resize: vertical; line-height: 1.5; min-height: 6rem; }

/* ── Form post-submission success state ──────────────────────────────────────
   Shown inline (replacing the form) after a successful AJAX submit — see the
   global form-success script in partials/footer.ejs and the per-form-type
   copy in src/content/forms.js. Ported from the design at
   PI_LandingPage_Design/Pages/contact form feedback/. Two message variants
   (team vs general) share this styling; the email line only renders for the
   general variant. */
.form-success { text-align: center; padding: 16px 0 8px; }
.form-success .success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-berry-red), var(--color-magenta));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 12px 24px -8px rgba(150, 0, 75, 0.40);
}
.form-success .success-icon svg { width: 28px; height: 28px; color: var(--color-true-white); }
.form-success .success-heading {
  font-family: var(--font-family-heading); font-weight: 600; font-size: 24px;
  letter-spacing: -0.015em; color: var(--color-blue-black);
  margin: 0 0 10px; outline: none;
}
.form-success .success-sub {
  font-family: var(--font-family-sans); font-size: 15px; line-height: 1.65;
  color: var(--color-grey-4); margin: 0 auto 28px; max-width: 400px;
}
.form-success .success-email-line {
  font-family: var(--font-family-heading); font-size: 12px; font-weight: 600;
  color: var(--color-grey-4); margin: 16px 0 0; letter-spacing: 0.2px;
}
.form-success .success-email-line a {
  color: var(--color-berry-red); text-decoration: underline; text-underline-offset: 3px;
}
.form-success .success-email-line a:hover { color: var(--color-dark-red); }

/* ── Project-local button extensions (not in design repo) ────────────────────
   .btn-on-dark and .btn-outline-on-dark are PI-specific; they are not part of
   style-guide.css and must live here. All other .btn-* rules come from the
   design-repo import above.
── */
/* On dark backgrounds (hero / CtaDark sections) */
.btn-on-dark { background: #fff; color: var(--color-berry-red); border-color: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.35); }
.btn-on-dark:hover { background: var(--color-grey-1); border-color: var(--color-grey-1); color: var(--color-berry-red); }
.btn-on-dark:focus-visible { outline-color: #fff; }
/* Outline white — on dark backgrounds */
.btn-outline-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-outline-on-dark:hover { background: rgba(255,255,255,0.10); border-color: #fff; color: #fff; }
.btn-outline-on-dark:focus-visible { outline-color: #fff; }

/* Extra-large size (project-local) — used by hero CTAs on course-overview pages.
   58px height + 40px horizontal padding, sits above the design system's btn-l
   (42px). Pair with `.pill` for the rounded hero pill treatment seen on the
   Mastering Product Strategy hero. */
.btn-xl { height: 58px; font-size: 17px; padding: 0 40px; }

/* Multi-line button label alignment. The synced style-guide.css uses
   `display: inline-flex; justify-content: center` to center the
   button's text node horizontally — but if that text wraps across
   multiple lines, each line falls back to `text-align: start` (i.e.
   left-aligned), which looks ragged on wrapped CTAs. Force centred
   alignment for wrapped text. Applies everywhere, not just mobile,
   so a long label that wraps on desktop also reads as a tidy block. */
.btn { text-align: center; }

/* Allow buttons with long labels to wrap on narrow viewports.
   The synced style-guide.css sets `.btn { white-space: nowrap }`
   which keeps short button labels ("Start Today", "Sign Up") tidy
   on desktop — but on phone viewports it forces wide labels like
   "Talk to us about training your product leaders" to overflow,
   which drags the whole page wider than the viewport and creates
   an empty-strip horizontal scrollbar. Below 720 px we let buttons
   wrap and grow taller as needed; fixed `height` becomes `min-height`
   so the box doesn't crop the wrapped text. Vertical padding scales
   with size so wrapped text doesn't kiss the top/bottom border —
   the larger the button, the more breathing room the wrapped lines
   get. */
@media (max-width: 720px) {
  .btn { white-space: normal; height: auto; line-height: 1.3; }
  .btn-xs { min-height: 20px; padding-top: 4px;  padding-bottom: 4px;  }
  .btn-s  { min-height: 30px; padding-top: 7px;  padding-bottom: 7px;  }
  .btn-m  { min-height: 36px; padding-top: 10px; padding-bottom: 10px; }
  .btn-l  { min-height: 42px; padding-top: 14px; padding-bottom: 14px; }
  .btn-xl { min-height: 58px; padding-top: 18px; padding-bottom: 18px; }

}

/* The CoP section-scoped button overrides live at the END of this
   file (search "CoP mobile button overrides"). They have to come
   after the `.cop-hero__ctas .btn` / `.cop-closing__ctas .btn` /
   `.cop-teams__ctas .btn` desktop rules in the CoP block below,
   because CSS source-order breaks specificity ties — even when
   both rules sit inside @media (max-width: 720px), the later one
   in source wins. Moved on 2026-05-14 after the override silently
   no-op'd from being placed before the CoP block. */

/* ─────────────────────────────────────────────────────────────────────────
   Course Overview Page (CoP) — shared scoped styles
   ─────────────────────────────────────────────────────────────────────────
   Extracted from the per-page seed static-HTML <style> blocks during the
   tech-fundamentals build (2026-05-13). These rules style the Cop* Puck
   components (CopHero, CopWho, CopBuildTrap, CopCurriculum, CopIncluded,
   CopTestimonials, CopTeams, CopFaqClosing, CopRelated) and are shared
   across every course-overview page in the catalogue.

   Page-specific (non-shared) sections live in their own component <style>
   blocks — currently MpsLearn (Mastering Product Strategy's Phase
   Explorer) and TfTakeaways (Tech Fundamentals' 5-card grid).
─── */
/* CoP — Hero + Trust bar (bundled, share the gradient surface) */
.cop-page { font-family: var(--font-family-sans); color: var(--color-off-black); }
.cop-hero { background: linear-gradient(155deg, var(--color-blue-black) 0%, var(--color-dark-red) 50%, var(--color-berry-red) 80%, var(--color-magenta) 100%); padding: 128px 0 0; position: relative; overflow: hidden; }
.cop-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(238,102,165,0.28) 0%, transparent 45%), radial-gradient(circle at 5% 95%, rgba(198,47,117,0.22) 0%, transparent 55%), radial-gradient(circle at 50% 60%, rgba(150,0,75,0.20) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.cop-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; z-index: 0; mix-blend-mode: overlay; }
.cop-hero > * { position: relative; z-index: 1; }
.cop-hero__inner { max-width: 1512px; margin: 0 auto; padding: 0 96px 128px; display: grid; grid-template-columns: 1fr 580px; gap: 20px; align-items: center; }
.cop-hero__title { font-family: var(--font-family-heading); font-weight: 500; font-size: 64px; line-height: 1.04; color: #fff; letter-spacing: -0.025em; margin-bottom: 24px; }
.cop-hero__title-accent { font-style: italic; }
.cop-hero__title-new { display: inline-block; vertical-align: middle; font-family: var(--font-family-heading); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--color-orange-cat), var(--color-magenta)); padding: 4px 12px; border-radius: 100px; margin-left: 6px; position: relative; top: -10px; box-shadow: 0 8px 16px -6px rgba(243,129,44,0.55); }
.cop-hero__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); max-width: 500px; margin-bottom: 36px; }
.cop-hero__sub u { text-decoration: underline; text-decoration-color: var(--color-orange-cat); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cop-hero__ctas { display: flex; gap: 12px; margin-bottom: 28px; }
.cop-hero .btn-primary { background: #fff; color: var(--color-berry-red); border-color: #fff; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.55), 0 6px 14px -6px rgba(0,0,0,0.35); }
.cop-hero .btn-primary:hover { background: var(--color-magenta-2); color: #fff; border-color: var(--color-magenta-2); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.60), 0 8px 16px -6px rgba(0,0,0,0.40); }
.cop-hero .btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.cop-hero .btn-secondary:hover { background: rgba(255,255,255,0.10); border-color: #fff; color: #fff; }
.cop-hero__trust { display: flex; align-items: center; gap: 10px; }
.cop-hero__stars { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.cop-hero__stars svg { width: 18px; height: 18px; fill: var(--color-orange-cat); filter: drop-shadow(0 2px 4px rgba(243,129,44,0.45)); }
.cop-hero__trust-label { font-family: var(--font-family-sans); font-size: 13px; color: rgba(255,255,255,0.70); }
.cop-hero__video-card { position: relative; background: linear-gradient(155deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255,255,255,0.14); border-radius: 24px; box-shadow: 0 40px 80px -32px rgba(0,0,0,0.55), 0 0 80px -20px rgba(238,102,165,0.30), inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden; }
.cop-hero__video-card::before { content: ''; position: absolute; top: 0; left: 0; width: 72px; height: 3px; background: linear-gradient(90deg, var(--color-magenta-2), transparent); border-radius: 0 0 3px 0; z-index: 3; }
.cop-hero__video-card::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; mix-blend-mode: overlay; z-index: 0; }
.cop-hero__video-card > * { position: relative; z-index: 1; }
.cop-hero__video-label { font-family: var(--font-family-heading); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; padding: 22px 26px 4px; display: flex; align-items: center; gap: 10px; margin: 0; }
.cop-hero__video-label::before { content: ''; width: 28px; height: 2px; background: var(--color-magenta-2); border-radius: 2px; }
/* Video thumb — frame box that holds either a <mux-player> (when
   muxPlaybackId is set) or a plain <img> placeholder. No background
   gradient: when <mux-player> renders, it owns its surface with its
   own poster image; when only the <img> renders, the image fills
   the box. Mockup-era decorations (gradient tint overlay, dot-grid
   mix-blend overlay, white play-button overlay, pulse rings) were
   stripped on 2026-05-14 when the eager-loaded Mux Player replaced
   the facade pattern. */
.cop-hero__video-thumb { position: relative; aspect-ratio: 16/9; margin: 16px 26px 4px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.cop-hero__video-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Make <mux-player> fill the thumb frame. The component is a custom
   element, so we target the tag name directly. */
.cop-hero__video-thumb mux-player { width: 100%; height: 100%; display: block; }
.cop-hero__video-meta { position: relative; padding: 28px 26px 26px; display: flex; gap: 6px; margin-top: 6px; }
.cop-hero__video-meta::before { content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(238,102,165,0.30), transparent); }
.cop-hero__video-stat { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 0 6px; position: relative; }
.cop-hero__video-stat:not(:last-child)::after { content: ''; position: absolute; top: 14%; bottom: 14%; right: -3px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.14), transparent); }
.cop-stat-spark { display: inline-flex; width: 14px; height: 14px; color: var(--color-magenta-2); filter: drop-shadow(0 0 5px rgba(238,102,165,0.85)) drop-shadow(0 0 10px rgba(238,102,165,0.45)); animation: cop-hero-stat-twinkle 3.2s ease-in-out infinite; }
.cop-stat-spark svg { width: 100%; height: 100%; }
.cop-stat-spark--d1 { animation-delay: 0.9s; }
.cop-stat-spark--d2 { animation-delay: 1.8s; }
@keyframes cop-hero-stat-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.18) rotate(18deg); opacity: 1; } }
.cop-hero__video-stat strong { font-family: var(--font-family-heading); font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -0.025em; line-height: 1; }
.cop-hero__video-stat strong em { font-style: italic; font-weight: 300; color: var(--color-magenta-2); letter-spacing: -0.02em; }
.cop-hero__video-stat span { font-family: var(--font-family-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: rgba(255,255,255,0.65); line-height: 1.3; max-width: 16ch; }
.cop-trust__inner { max-width: 1512px; margin: 0 auto; padding: 40px 96px 48px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cop-trust__stats { display: flex; align-items: center; justify-content: center; }
.cop-trust__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 48px; }
.cop-trust__num { font-family: var(--font-family-heading); font-weight: 600; font-size: 44px; color: var(--color-light-red); letter-spacing: -1px; line-height: 1; }
.cop-trust__num em { font-style: italic; font-weight: 500; color: var(--color-magenta-2); }
.cop-trust__label { font-family: var(--font-family-heading); font-weight: 600; font-size: 14px; color: #fff; }
.cop-trust__divider { width: 1px; height: 56px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
@media (max-width: 1300px) {
  .cop-hero__inner { grid-template-columns: 1fr 520px; padding: 0 56px 128px; gap: 16px; }
}
@media (max-width: 1100px) {
  .cop-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}
/* Canonical heading scale — hero H1 (64-tier), breakpoints 1095/950/520/420 */
@media (max-width: 1095px) { .cop-hero__title { font-size: 52px; } }
@media (max-width: 950px)  { .cop-hero__title { font-size: 44px; } }
@media (max-width: 520px)  { .cop-hero__title { font-size: 36px; } }
@media (max-width: 420px)  { .cop-hero__title { font-size: 32px; } }
@media (max-width: 768px) {
  .cop-hero { padding-left: 0; padding-right: 0; }
  .cop-hero__inner, .cop-trust__inner { padding-left: 16px; padding-right: 16px; }
  .cop-hero__sub { max-width: 100%; }
  .cop-hero__ctas { flex-direction: column; align-items: stretch; }
  .cop-trust__inner { padding: 28px 16px 32px; gap: 18px; }
  .cop-trust__stats { flex-wrap: wrap; gap: 8px 0; width: 100%; }
  .cop-trust__stat { flex: 1 1 30%; padding: 0 6px; min-width: 0; }
  .cop-trust__num { font-size: 30px; letter-spacing: -0.5px; }
  .cop-trust__label { font-size: 11px; text-align: center; line-height: 1.3; }
  .cop-trust__divider { display: none; }
}
@media (max-width: 420px) {
  .cop-trust__num { font-size: 26px; }
  .cop-trust__label { font-size: 10px; letter-spacing: 0.3px; }
}

/* CoP — Who is this course for */
.cop-who { background: var(--color-grey-1); position: relative; z-index: 2; }
.cop-who::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(16,24,40,0.08) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(to bottom, rgba(150,0,75,0.16) 0%, transparent 8%), radial-gradient(circle at 92% 18%, rgba(160,174,203,0.32) 0%, transparent 50%), radial-gradient(circle at 6% 72%, rgba(147,154,168,0.26) 0%, transparent 55%), radial-gradient(ellipse 80% 32% at 50% 45%, rgba(160,174,203,0.10) 0%, transparent 70%), linear-gradient(to bottom, transparent 75%, rgba(16,24,40,0.32) 100%); pointer-events: none; z-index: 0; }
.cop-who > * { position: relative; z-index: 1; }
.cop-who__inner { max-width: 1512px; margin: 0 auto; padding: 96px; }
.cop-who__body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.cop-who__image { aspect-ratio: 1; clip-path: url(#cop-mark7Clip); }
.cop-who__image-shadow { filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55)) drop-shadow(0 0 60px rgba(198,47,117,0.25)); }
.cop-who__image img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.cop-who__title { font-family: var(--font-family-heading); font-weight: 500; font-size: 44px; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-blue-black); grid-column: 1 / -1; margin-bottom: 8px; }
.cop-who__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cop-who__card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 22px 22px 22px 26px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cop-who__card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--color-magenta), var(--color-dark-red)); border-radius: 12px 0 0 12px; }
.cop-who__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.11), 0 2px 4px rgba(0,0,0,0.06); }
.cop-who__card--wide { grid-column: 1 / -1; }
.cop-who__role { font-family: var(--font-family-heading); font-weight: 600; font-size: 15px; color: var(--color-blue-black); line-height: 1.3; margin: 0; }
.cop-who__desc { font-family: var(--font-family-sans); font-size: 13px; font-weight: 400; color: var(--color-grey-4); line-height: 1.5; margin: 0; }
@media (max-width: 930px) { .cop-who__body { grid-template-columns: 1fr; gap: 40px; } .cop-who__image-shadow { order: 2; } .cop-who__image img { object-position: center center; } .cop-who__cards { order: 1; } }
@media (max-width: 768px) { .cop-who__inner { padding: 64px 16px; } .cop-who__cards { grid-template-columns: 1fr; } }

/* CoP — Build Trap (book card) */
.cop-build-trap { background: linear-gradient(155deg, #28152a 0%, var(--color-dark-red) 55%, #1a0008 100%); padding: 96px 0; position: relative; overflow: hidden; z-index: 1; }
.cop-build-trap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 92% 18%, rgba(238,102,165,0.10) 0%, transparent 50%), radial-gradient(circle at 5% 82%, rgba(150,0,75,0.15) 0%, transparent 55%); pointer-events: none; z-index: 0; }
.cop-build-trap > * { position: relative; z-index: 1; }
.cop-build-trap__inner { max-width: 1512px; margin: 0 auto; padding: 0 96px; }
.cop-build-trap__row { display: grid; grid-template-columns: 45% 300px 1fr; gap: 64px 32px; align-items: center; }
.cop-build-trap__copy { align-self: start; padding-right: 96px; }
.cop-build-trap__heading { font-family: var(--font-family-heading); font-weight: 500; font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 24px; }
.cop-build-trap__heading em { font-style: italic; color: var(--color-orange-cat); }
.cop-build-trap__body { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); max-width: 560px; }
.cop-build-trap__body strong { font-weight: 700; color: var(--color-orange-cat); }
.cop-build-trap__book-cover { filter: drop-shadow(0 32px 48px rgba(0,0,0,0.65)) drop-shadow(0 0 60px rgba(238,102,165,0.28)); }
.cop-build-trap__book-cover img { width: 100%; height: auto; display: block; }
.cop-build-trap__book-info { padding-left: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
.cop-build-trap__book-title { font-family: var(--font-family-heading); font-weight: 600; font-size: 26px; line-height: 1.2; color: #fff; margin: 0; }
.cop-build-trap__book-author { font-family: var(--font-family-heading); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-orange-cat); margin: 0; }
.cop-build-trap__book-desc { font-family: var(--font-family-sans); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; }
.cop-build-trap__book-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.cop-build-trap__book-stars { display: flex; align-items: center; gap: 6px; }
.cop-build-trap__book-stars svg { width: 14px; height: 14px; fill: var(--color-orange-cat); }
.cop-build-trap__book-rating { font-family: var(--font-family-sans); font-size: 13px; color: rgba(255,255,255,0.60); }
.cop-build-trap__book-rating strong { font-weight: 700; }
.cop-build-trap__book-rating a { color: var(--color-orange-cat); text-decoration: underline; }
.cop-build-trap__book-copies { display: flex; align-items: center; gap: 6px; font-family: var(--font-family-sans); font-size: 13px; color: rgba(255,255,255,0.60); }
.cop-build-trap__book-copies strong { font-weight: 700; }
.cop-build-trap__book-copies-icon { width: 16px; height: 16px; display: block; flex-shrink: 0; color: var(--color-orange-cat); }
@media (max-width: 1300px) {
  .cop-build-trap__row { grid-template-columns: 1fr; gap: 40px; }
  .cop-build-trap__copy { padding-right: 0; }
  .cop-build-trap__book-cover { text-align: center; }
  .cop-build-trap__book-cover img { max-width: 220px; margin: 0 auto; }
  .cop-build-trap__book-info { align-items: center; text-align: center; padding-left: 0; }
  .cop-build-trap__book-meta { align-items: center; }
}
@media (max-width: 1020px) {
  .cop-build-trap__inner { padding: 0 32px; }
  .cop-build-trap__book-cover img { max-width: 180px; }
}

/* CoP — Curriculum (accordion) */
.cop-curriculum { background: linear-gradient(180deg, transparent 0%, rgba(160,174,203,0.32) 55%, rgba(147,154,168,0.48) 100%), var(--color-grey-1); position: relative; padding: 96px 0; }
.cop-curriculum > .cop-curriculum__container { position: relative; z-index: 1; }
.cop-curriculum__container { max-width: 1512px; margin: 0 auto; padding: 0 96px; }
.cop-curriculum__intro { max-width: 1000px; margin: 0 auto; text-align: center; }
.cop-curriculum__heading { font-family: var(--font-family-heading); font-weight: 500; font-size: 44px; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0 0 16px; text-align: center; }
.cop-curriculum__heading em { color: var(--color-berry-red); font-style: italic; }
.cop-curriculum__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: var(--color-blue-black); max-width: 640px; margin: 0 auto; text-align: center; }
.cop-curriculum__list { max-width: 1000px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 14px; }
.cop-curriculum__item { position: relative; background: #fff; border: 1px solid var(--color-grey-2); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px -8px rgba(16,24,40,0.12); transition: box-shadow 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease; }
.cop-curriculum__item:hover { box-shadow: 0 12px 24px -12px rgba(16,24,40,0.18); border-color: var(--color-grey-3); }
.cop-curriculum__item.open { box-shadow: 0 24px 40px -16px rgba(150,0,75,0.20); border-color: var(--color-berry-red); }
.cop-curriculum__item::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--color-berry-red), var(--color-magenta)); transform: scaleY(0); transform-origin: top; transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1); z-index: 2; }
.cop-curriculum__item.open::before { transform: scaleY(1); }
.cop-curriculum__btn { width: 100%; text-align: left; padding: 26px 32px; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-family-heading); }
.cop-curriculum__btn-left { flex: 1; display: flex; align-items: center; gap: 24px; }
.cop-curriculum__num { font-family: var(--font-family-heading); font-size: 44px; font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; color: var(--color-magenta); flex-shrink: 0; width: 56px; }
.cop-curriculum__title-wrap { flex: 1; }
.cop-curriculum__title { font-family: var(--font-family-heading); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0; line-height: 1.25; }
.cop-curriculum__icon { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px -6px rgba(150,0,75,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; color: #fff; }
.cop-curriculum__icon svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.cop-curriculum__btn:hover .cop-curriculum__icon { transform: scale(1.06); }
.cop-curriculum__item.open .cop-curriculum__icon { box-shadow: 0 10px 20px -6px rgba(150,0,75,0.55); }
.cop-curriculum__item.open .cop-curriculum__icon svg { transform: rotate(180deg); }
.cop-curriculum__body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.cop-curriculum__item.open .cop-curriculum__body { max-height: 1200px; }
.cop-curriculum__body-inner { padding: 4px 32px 32px; position: relative; }
.cop-curriculum__body-inner::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, var(--color-berry-red), transparent 80%); margin-bottom: 24px; }
.cop-curriculum__lessons { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; margin: 0; padding: 0; }
.cop-curriculum__lesson { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-grey-1); font-family: var(--font-family-sans); font-size: 15px; color: var(--color-blue-black); }
.cop-curriculum__badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; }
.cop-curriculum__badge svg { width: 14px; height: 14px; }
.cop-curriculum__badge--video { background: var(--color-light-red); color: var(--color-berry-red); }
.cop-curriculum__badge--text { background: var(--color-grey-1); color: var(--color-grey-4); }
.cop-curriculum__badge--quiz { background: rgba(243,129,44,0.14); color: var(--color-orange-cat); }
.cop-curriculum__badge--activity { background: linear-gradient(135deg, rgba(238,102,165,0.16), rgba(150,0,75,0.10)); color: var(--color-berry-red); }
@media (max-width: 960px) { .cop-curriculum__lessons { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .cop-curriculum__container { padding: 0 16px; }
  .cop-curriculum__btn { padding: 22px; }
  .cop-curriculum__btn-left { gap: 16px; }
  .cop-curriculum__num { font-size: 32px; width: 40px; }
  .cop-curriculum__title { font-size: 17px; }
  .cop-curriculum__body-inner { padding: 4px 22px 22px; }
}

/* CoP — What's Included */
.cop-included { background: var(--color-grey-1); position: relative; overflow: hidden; padding: 96px 0; }
.cop-included::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 32%, rgba(238,102,165,0.10) 0%, transparent 60%), radial-gradient(circle at 92% 14%, rgba(238,102,165,0.18) 0%, transparent 42%), radial-gradient(circle at 6% 75%, rgba(150,0,75,0.14) 0%, transparent 50%); pointer-events: none; z-index: 0; }
.cop-included::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(150,0,75,0.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
.cop-included > .cop-included__container { position: relative; z-index: 1; }
.cop-included__container { max-width: 1512px; margin: 0 auto; padding: 0 96px; }
.cop-included__intro { text-align: center; max-width: 1000px; margin: 0 auto 56px; }
.cop-included__heading { font-family: var(--font-family-heading); font-weight: 500; font-size: 44px; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-blue-black); text-align: center; margin: 0 0 16px; }
.cop-included__heading em { color: var(--color-berry-red); font-style: italic; }
.cop-included__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: var(--color-grey-4); max-width: 640px; text-align: center; margin: 0 auto; }
.cop-included__grid { max-width: 1000px; margin: 0 auto; list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 0; padding: 0; }
.cop-included__card { position: relative; background: transparent; border: none; border-bottom: 1px solid rgba(150,0,75,0.18); padding: 26px 4px; display: grid; grid-template-columns: minmax(110px, auto) 1fr; align-items: center; gap: 26px; text-align: left; transition: padding 0.35s cubic-bezier(0.2,0.8,0.2,1); overflow: visible; }
.cop-included__card:hover { padding-left: 12px; }
.cop-included__card:hover .cop-included__num { color: var(--color-magenta); }
.cop-included__card:nth-last-child(-n+2) { border-bottom: none; }
.cop-included__num { font-family: var(--font-family-heading); font-size: 68px; font-weight: 500; letter-spacing: -0.04em; line-height: 0.85; color: var(--color-berry-red); margin: 0; text-align: left; transition: color 0.3s ease; }
.cop-included__num em { font-style: italic; font-weight: 300; color: var(--color-magenta); letter-spacing: -0.02em; }
.cop-included__label { font-family: var(--font-family-sans); font-size: 15px; color: var(--color-blue-black); line-height: 1.5; }
@media (max-width: 1300px) {
  .cop-included__grid { column-gap: 40px; }
  .cop-included__num { font-size: 56px; }
  .cop-included__card { grid-template-columns: minmax(90px, auto) 1fr; gap: 20px; }
}
@media (max-width: 768px) {
  .cop-included__container { padding: 0 32px; }
  .cop-included__grid { grid-template-columns: 1fr; column-gap: 0; }
  .cop-included__card { grid-template-columns: 80px 1fr; gap: 18px; padding: 20px 0; }
  .cop-included__num { font-size: 44px; }
  .cop-included__card:nth-last-child(-n+2) { border-bottom: 1px solid rgba(150,0,75,0.18); }
  .cop-included__card:last-child { border-bottom: none; }
}

/* CoP — Testimonials */
.cop-testimonials { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); position: relative; overflow: hidden; padding: 96px 0; }
.cop-testimonials::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 28% at 50% 0%, rgba(238,102,165,0.12) 0%, transparent 70%), radial-gradient(circle at 88% 25%, rgba(238,102,165,0.16) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150,0,75,0.28) 0%, transparent 55%); pointer-events: none; z-index: 0; }
.cop-testimonials > .cop-testimonials__container { position: relative; z-index: 1; }
.cop-testimonials__container { max-width: 1512px; margin: 0 auto; padding: 0 96px; }
.cop-testimonials__heading { font-family: var(--font-family-heading); font-weight: 500; font-size: 44px; line-height: 1.15; letter-spacing: -0.015em; color: #fff; text-align: center; margin: 0; }
.cop-testimonials__heading em { color: var(--color-magenta-2); font-style: italic; }
.cop-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.cop-testimonials__card { position: relative; background: #fff; border-radius: 20px; padding: 36px 32px 32px; display: flex; flex-direction: column; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cop-testimonials__card:hover { transform: translateY(-3px); box-shadow: 6px 8px 20px 0 rgba(0,0,0,0.18); }
.cop-testimonials__stars { display: flex; gap: 3px; margin-bottom: 18px; position: relative; z-index: 1; }
.cop-testimonials__stars svg { width: 16px; height: 16px; fill: var(--color-orange-cat); filter: drop-shadow(0 2px 4px rgba(243,129,44,0.4)); }
.cop-testimonials__quote { font-family: var(--font-family-heading); font-weight: 400; font-size: 16px; color: var(--color-blue-black); line-height: 1.6; letter-spacing: -0.005em; flex: 1; margin: 0 0 24px; position: relative; z-index: 1; }
.cop-testimonials__cite { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--color-grey-1); }
.cop-testimonials__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); display: flex; align-items: center; justify-content: center; font-family: var(--font-family-heading); font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 6px 12px -4px rgba(150,0,75,0.45); }
.cop-testimonials__cite-name { display: block; font-family: var(--font-family-heading); font-size: 14px; font-weight: 600; color: var(--color-blue-black); letter-spacing: -0.01em; margin-bottom: 2px; }
.cop-testimonials__cite-role { display: block; font-family: var(--font-family-heading); font-size: 11px; font-weight: 600; color: var(--color-berry-red); letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.25; margin-top: 2px; }
@media (max-width: 960px) { .cop-testimonials__grid { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 768px) { .cop-testimonials__container { padding: 0 16px; } }

/* CoP — Team training */
.cop-teams { background: linear-gradient(160deg, var(--color-berry-red) 0%, var(--color-dark-red) 60%, #5C002E 100%); position: relative; overflow: hidden; padding: 96px 0; }
.cop-teams::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(238,102,165,0.20) 0%, transparent 45%), radial-gradient(circle at 8% 90%, rgba(255,255,255,0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; }
.cop-teams::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, transparent, rgba(16,24,40,0.40)); pointer-events: none; z-index: 0; }
.cop-teams > .cop-teams__container { position: relative; z-index: 1; }
.cop-teams__container { max-width: 1512px; margin: 0 auto; padding: 0 96px; }
.cop-teams__block { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.cop-teams__copy { display: flex; flex-direction: column; }
.cop-teams__h2 { font-family: var(--font-family-heading); font-weight: 500; font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 22px; }
.cop-teams__sub { font-family: var(--font-family-sans); font-size: 17px; color: rgba(255,255,255,0.92); line-height: 1.65; margin: 0 0 32px; max-width: 56ch; }
.cop-teams__benefits { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 36px; padding: 0; }
.cop-teams__benefit { background: rgba(255,255,255,0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), background 0.3s ease, border-color 0.3s ease; }
.cop-teams__benefit:hover { transform: translateY(-3px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.cop-teams__benefit-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.95), var(--color-magenta-2)); display: inline-flex; align-items: center; justify-content: center; color: var(--color-berry-red); flex-shrink: 0; box-shadow: 0 8px 16px -6px rgba(238,102,165,0.45); }
.cop-teams__benefit-icon svg { width: 22px; height: 22px; }
.cop-teams__benefit-title { font-family: var(--font-family-heading); font-weight: 600; font-size: 15px; color: #fff; letter-spacing: -0.005em; line-height: 1.3; margin: 0; }
.cop-teams__benefit-desc { font-family: var(--font-family-sans); font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.55; margin: 0; }
.cop-teams__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
/* Teams CTA — full pill, same treatment as the hero CTAs (updated
   2026-05-14 to match the latest source spec). 58px height, 40px
   horizontal padding, 999px radius, heavy double-drop shadow,
   magenta-2 hover. */
.cop-teams__ctas .btn-primary { background: #fff; color: var(--color-berry-red); border-color: #fff; height: 58px; padding: 0 40px; border-radius: 999px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.55), 0 6px 14px -6px rgba(0,0,0,0.35); }
.cop-teams__ctas .btn-primary:hover { background: var(--color-magenta-2); color: #fff; border-color: var(--color-magenta-2); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.60), 0 8px 16px -6px rgba(0,0,0,0.40); }
.cop-teams__trust { font-family: var(--font-family-heading); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.78); letter-spacing: 0.6px; margin: 0; }
.cop-teams__visual-wrap { position: relative; width: 100%; aspect-ratio: 1; }
.cop-teams__visual { position: absolute; inset: 0; clip-path: url(#cop-teams-mark7); filter: drop-shadow(-8px 16px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 48px rgba(238,102,165,0.30)); }
.cop-teams__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; display: block; }
.cop-teams__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(76,0,42,0.55)); pointer-events: none; }
.cop-teams__stat { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 12px 28px -8px rgba(0,0,0,0.40); }
.cop-teams__stat strong { font-family: var(--font-family-heading); font-size: 32px; font-weight: 600; color: var(--color-berry-red); letter-spacing: -0.025em; line-height: 1; }
.cop-teams__stat strong em { font-style: italic; font-weight: 300; color: var(--color-magenta); }
.cop-teams__stat span { font-family: var(--font-family-heading); font-size: 12px; font-weight: 600; color: var(--color-blue-black); letter-spacing: 0.3px; line-height: 1.3; flex: 1; }
/* Inline team-training form — revealed by the CTA toggle. The CTA button
   (.cop-teams__toggle) expands the collapsed .cop-teams__form-card; the form
   posts to /contact/team_training and the global footer.ejs handler swaps in
   the TEAM_SUCCESS state. Mirrored in the CopTeams component <style> for the
   editor canvas — keep both in sync. */
.cop-teams__toggle .btn-icon { transition: transform 0.3s ease; transform: rotate(90deg); }
.cop-teams__toggle[aria-expanded="true"] .btn-icon { transform: rotate(-90deg); }
.cop-teams__toggle[aria-expanded="true"] { background: var(--color-magenta-2); color: #fff; border-color: var(--color-magenta-2); box-shadow: none; }
/* Closing-section secondary toggle: magenta-2 fill on hover AND while expanded
   (reference .closing__ctas .btn-secondary[aria-expanded] parity — needs the
   .btn-secondary prefix to beat the base outline background). */
.btn-secondary.cop-teams__toggle:hover,
.btn-secondary.cop-teams__toggle[aria-expanded="true"] { background: var(--color-magenta-2); color: #fff; border-color: var(--color-magenta-2); }
.cop-teams__form-card { position: relative; grid-column: 1 / -1; background: transparent; border-radius: 20px; overflow: hidden; width: 100%; max-height: 0; box-shadow: none; transition: max-height 0.55s cubic-bezier(0.25,0.46,0.45,0.94), background 0.35s ease, box-shadow 0.35s ease; }
.cop-teams__form-card.is-open { max-height: 1400px; background: #fff; box-shadow: 0 40px 80px -24px rgba(0,0,0,0.18), 0 0 80px -20px rgba(238,102,165,0.18); }
.cop-teams__form-inner { padding: 32px 36px 36px; text-align: left; }
.cop-teams__form-eyebrow { font-family: var(--font-family-heading); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--color-berry-red); margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.cop-teams__form-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--color-magenta-2); border-radius: 2px; flex-shrink: 0; }
.cop-teams__form-title { font-family: var(--font-family-heading); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0 0 4px; }
.cop-teams__form-sub { font-family: var(--font-family-sans); font-size: 14px; color: var(--color-grey-4); line-height: 1.5; margin: 0 0 24px; }
.cop-teams__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cop-teams__form-group { display: flex; flex-direction: column; gap: 6px; }
.cop-teams__form-group--full { grid-column: 1 / -1; }
.cop-teams__form-group label { font-family: var(--font-family-heading); font-size: 10px; font-weight: 700; color: var(--color-grey-4); text-transform: uppercase; letter-spacing: 1.4px; }
.cop-teams__form-group input, .cop-teams__form-group select { padding: 11px 14px; border: 1.5px solid var(--color-grey-2); border-radius: 8px; font-family: var(--font-family-sans); font-size: 14px; color: var(--color-blue-black); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; min-height: 44px; }
.cop-teams__form-group input::placeholder { color: var(--color-grey-3); }
.cop-teams__form-group input:hover, .cop-teams__form-group select:hover { border-color: var(--color-grey-3); }
.cop-teams__form-group input:focus, .cop-teams__form-group select:focus { outline: none; border-color: var(--color-magenta); box-shadow: 0 0 0 3px rgba(198,47,117,0.14); }
.cop-teams__form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M7.5 10.5L2 4.5h11z' fill='%235A5D65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.cop-teams__form-submit { width: 100%; margin-top: 8px; height: 48px; font-size: 15px; gap: 10px; border-radius: 999px; }
.cop-teams__form-submit:hover { text-decoration: none; }
.cop-teams__form-privacy { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-family-heading); font-size: 11px; font-weight: 600; color: var(--color-grey-4); letter-spacing: 0.6px; margin: 8px 0 0; }
.cop-teams__form-privacy-check { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--color-magenta-2), var(--color-berry-red)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cop-teams__form-privacy-check svg { width: 9px; height: 9px; }
/* In-card form-success override — the global .form-success (public.css ~508)
   is the site-wide default; inside the teams card we match the reference's
   tighter .tt-form-success treatment (56px icon / 20px heading / 14px sub). */
.cop-teams__form-card .form-success { padding: 48px 0; }
.cop-teams__form-card .form-success .success-icon { width: 56px; height: 56px; margin: 0 auto 16px; box-shadow: 0 10px 20px -8px rgba(150,0,75,0.40); }
.cop-teams__form-card .form-success .success-icon svg { width: 24px; height: 24px; }
.cop-teams__form-card .form-success .success-heading { font-size: 20px; margin: 0 0 8px; }
.cop-teams__form-card .form-success .success-sub { font-size: 14px; margin: 0 auto 20px; max-width: 360px; }
/* Teams block now stacks earlier — 1100px instead of 930px (matches
   the new source spec, gives the image+copy stack more breathing
   room on tablet widths). */
@media (max-width: 1100px) {
  .cop-teams__block { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked: form sits between the copy and the image (matches the prototype
     Metrics-VDesign.html § team-block). DOM order is copy → visual → form, so
     reorder the form ahead of the image. */
  .cop-teams__copy { order: 1; }
  .cop-teams__form-card { order: 2; }
  .cop-teams__visual-wrap { order: 3; }
}
@media (max-width: 768px) {
  .cop-teams__container { padding: 0 16px; }
  .cop-teams__benefits { grid-template-columns: 1fr; }
  .cop-teams__h2 { line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 16px; }
  /* Teams CTA goes full-width on mobile so the long label has room. */
  .cop-teams__ctas .btn { display: flex; width: 100%; white-space: normal; text-align: center; height: auto; padding: 14px 4px; }
}
@media (max-width: 640px) {
  .cop-teams__form-grid { grid-template-columns: 1fr; }
  .cop-teams__form-group--full { grid-column: 1; }
  .cop-teams__form-inner { padding: 24px 20px 28px; }
}
/* Canonical heading scale — section H2 (52-tier), breakpoints 1095/950/520/420 */
@media (max-width: 1095px) { .cop-teams__h2 { font-size: 44px; } }
@media (max-width: 950px)  { .cop-teams__h2 { font-size: 38px; } }
@media (max-width: 520px)  { .cop-teams__h2 { font-size: 32px; } }
@media (max-width: 420px)  { .cop-teams__h2 { font-size: 28px; } }

/* Canonical responsive heading scale (breakpoints 1095/950/520) for the section
   headings that shipped without mobile step-downs. */
@media (max-width: 1095px) { .cop-who__title, .cop-curriculum__heading, .cop-included__heading, .cop-testimonials__heading { font-size: 36px; } }
@media (max-width: 950px)  { .cop-who__title, .cop-curriculum__heading, .cop-included__heading, .cop-testimonials__heading { font-size: 30px; } }
@media (max-width: 520px)  { .cop-who__title, .cop-curriculum__heading, .cop-included__heading, .cop-testimonials__heading { font-size: 27px; } }

/* CoP — FAQ + Closing CTA (shared dark zone) */
.cop-faq-cta { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); position: relative; overflow: hidden; }
.cop-faq-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(150,0,75,0.32) 0%, transparent 14%), radial-gradient(circle at 88% 25%, rgba(238,102,165,0.16) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150,0,75,0.28) 0%, transparent 55%); pointer-events: none; z-index: 0; }
.cop-faq-cta > * { position: relative; z-index: 1; }
.cop-faq { padding: 96px 0; }
.cop-faq__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.cop-faq__heading { font-family: var(--font-family-heading); font-weight: 500; font-size: 44px; line-height: 1.15; letter-spacing: -0.015em; color: #fff; text-align: center; margin: 0 0 16px; }
.cop-faq__heading em { color: var(--color-magenta-2); font-style: italic; }
.cop-faq__list { list-style: none; width: 100%; max-width: 1200px; margin: 56px auto 0; padding: 0; }
.cop-faq__item { border-bottom: 1px solid rgba(255,255,255,0.18); }
.cop-faq__item:first-child { border-top: 1px solid rgba(255,255,255,0.18); }
.cop-faq__btn { width: 100%; text-align: left; padding: 28px 0; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: inherit; }
.cop-faq__question { font-family: var(--font-family-heading); font-size: 20px; font-weight: 500; color: #fff; line-height: 1.4; letter-spacing: -0.01em; margin: 0; flex: 1; }
.cop-faq__icon { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 12px -6px rgba(150,0,75,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; }
.cop-faq__icon svg { width: 14px; height: 14px; display: block; transition: transform 0.3s ease; }
.cop-faq__btn:hover .cop-faq__icon { transform: scale(1.06); }
.cop-faq__item.open .cop-faq__icon { box-shadow: 0 10px 20px -6px rgba(150,0,75,0.55); }
.cop-faq__item.open .cop-faq__icon svg { transform: rotate(180deg); }
.cop-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.cop-faq__item.open .cop-faq__answer { max-height: 1200px; }
.cop-faq__answer-p { font-family: var(--font-family-sans); font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.7; padding-bottom: 28px; margin: 0; max-width: 90ch; }
.cop-faq__answer-p a { color: var(--color-magenta-2); text-decoration: underline; text-underline-offset: 2px; }
.cop-closing { padding: 96px 0 80px; }
.cop-closing__inner { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 24px; }
.cop-closing__title { font-family: var(--font-family-heading); font-size: 48px; font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0 0 22px; }
.cop-closing__title em { color: var(--color-magenta-2); font-style: italic; }
.cop-closing__sub { font-family: var(--font-family-sans); font-size: 18px; color: rgba(255,255,255,0.92); line-height: 1.65; margin: 0 auto 40px; max-width: 56ch; }
.cop-closing__proof { background: transparent; border: 1px solid rgba(238,102,165,0.55); border-radius: 14px; max-width: 640px; margin: 0 auto 40px; text-align: left; overflow: hidden; display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; }
.cop-closing__proof-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); display: flex; align-items: center; justify-content: center; font-family: var(--font-family-heading); font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0; align-self: flex-start; border: 2px solid #fff; box-shadow: 0 6px 12px -4px rgba(150,0,75,0.45); }
.cop-closing__proof-content { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cop-closing__proof-stars { display: flex; gap: 3px; }
.cop-closing__proof-stars svg { width: 15px; height: 15px; fill: var(--color-orange-cat); filter: drop-shadow(0 2px 4px rgba(243,129,44,0.45)); }
.cop-closing__proof-quote { font-family: var(--font-family-heading); font-weight: 400; font-style: italic; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.95); margin: 0; }
.cop-closing__proof-cite { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid rgba(238,102,165,0.30); }
.cop-closing__proof-cite strong { font-family: var(--font-family-heading); font-size: 16px; font-weight: 600; color: #fff; }
.cop-closing__proof-cite span { font-family: var(--font-family-heading); font-size: 11px; font-weight: 600; color: var(--color-magenta-2); letter-spacing: 1.2px; text-transform: uppercase; }
.cop-closing__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
/* Closing CTAs adopt the same 58px pill treatment as the hero — both are
   key conversion points and the design system uses them consistently. */
.cop-closing__ctas .btn { height: 58px; padding: 0 40px; font-size: 18px; border-radius: 999px; }
.cop-closing__ctas .btn-primary { background: #fff; color: var(--color-berry-red); border-color: #fff; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.55), 0 6px 14px -6px rgba(0,0,0,0.35); }
.cop-closing__ctas .btn-primary:hover { background: var(--color-magenta-2); color: #fff; border-color: var(--color-magenta-2); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.60), 0 8px 16px -6px rgba(0,0,0,0.40); }
.cop-closing__ctas .btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.cop-closing__ctas .btn-secondary:hover { background: rgba(255,255,255,0.10); border-color: #fff; color: #fff; }
.cop-closing__micro-trust { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.cop-closing__micro-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-family-heading); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.92); }
.cop-closing__micro-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--color-magenta-2), var(--color-berry-red)); color: #fff; box-shadow: 0 4px 8px -3px rgba(238,102,165,0.45); }
.cop-closing__micro-check svg { width: 9px; height: 9px; }
@media (max-width: 768px) {
  .cop-faq__inner { padding: 0 16px; }
  .cop-faq__heading { font-size: 32px; }
  .cop-closing { padding: 64px 0 56px; }
  .cop-closing__inner { padding: 0 16px; }
  .cop-closing__title { font-size: 32px; letter-spacing: -0.015em; line-height: 1.15; }
}
@media (max-width: 420px) { .cop-closing__title { font-size: 26px; } }

/* CoP — Related courses */
.cop-related { padding: 80px 0; background: var(--color-grey-1); border-top: 1px solid var(--color-grey-2); position: relative; }
.cop-related__container { max-width: 1512px; margin: 0 auto; padding: 0 96px; }
.cop-related__heading { font-family: var(--font-family-heading); font-size: 32px; font-weight: 500; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0 0 36px; text-align: center; }
.cop-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cop-related__card { position: relative; background: #fff; border: 1px solid var(--color-grey-2); border-radius: 14px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 12px -8px rgba(16,24,40,0.10); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.cop-related__card::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--color-berry-red), var(--color-magenta)); border-radius: 0 0 3px 0; opacity: 0.65; transition: width 0.35s cubic-bezier(0.2,0.8,0.2,1), opacity 0.25s ease; }
/* Override the global `a:hover { text-decoration: underline }` (line 25) —
   anchor-as-card components must keep their hover state clean. */
.cop-related__card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(150,0,75,0.22); border-color: var(--color-grey-3); text-decoration: none; }
.cop-related__card:hover::before { width: 64px; opacity: 1; }
.cop-related__arrow { position: absolute; top: 22px; right: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-grey-1); display: flex; align-items: center; justify-content: center; color: var(--color-magenta); transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease; }
.cop-related__arrow svg { width: 11px; height: 11px; }
.cop-related__card:hover .cop-related__arrow { background: var(--color-magenta); color: #fff; transform: translateX(2px); }
.cop-related__tag { font-family: var(--font-family-heading); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-berry-red); margin: 0; padding-top: 2px; }
.cop-related__title { font-family: var(--font-family-heading); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-blue-black); margin: 0; max-width: calc(100% - 44px); }
.cop-related__desc { font-family: var(--font-family-sans); font-size: 14px; color: var(--color-grey-4); line-height: 1.55; margin: 0; flex: 1; }
@media (max-width: 960px) { .cop-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .cop-related__container { padding: 0 16px; }
  .cop-related__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Responsive layout utilities — used by Puck components ── */
/* These cannot be expressed as inline styles since they require media queries */
.grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-row-reverse { flex-direction: row-reverse; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CoP mobile button overrides
   ─────────────────────────────────────────────────────────────────────────
   The CoP section-scoped button rules above (e.g. `.cop-closing__ctas .btn
   { height: 58px; padding: 0 40px }`, `.cop-hero__ctas .btn`,
   `.cop-teams__ctas .btn`) pin button geometry on desktop. On mobile we
   need to release those locks so wrapped labels get vertical breathing
   room. Because both rules sit at selector specificity (0,2,0), the only
   thing that decides which wins is SOURCE ORDER — so this block has to
   live AFTER the desktop CoP rules. Don't move it back up.

   Padding here is deliberately balanced: 18px top/bottom on the closing
   CTAs gives wrapped 2-line labels (~47 px content) ~12-14 px of slack
   above and below the text, which reads as a comfortable pill rather
   than text crammed against the inner border. The hero/teams use the
   same treatment for consistency. */
@media (max-width: 720px) {
  .cop-hero__ctas .btn,
  .cop-teams__ctas .btn,
  .cop-closing__ctas .btn {
    height: auto;
    min-height: 58px;
    padding: 18px 32px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Teams page (v4) — shared scoped styles  (`.t3-*`)
   ─────────────────────────────────────────────────────────────────────────
   Ported from the design source
   E:/projects/PI_LandingPage_Design/Pages/teams page/teams-page-v4design.html
   so /for-teams/product-management-training stops carrying the visual spec as
   inline styles. Used by the TeamsHero / TeamsAssessment / TeamsSolution /
   TeamsCaseStudies / TeamsCoachesZone / TeamsFAQ /
   TeamsRelatedPrograms Puck components AND the static-HTML fallback in
   src/seeds/pages/teams.js — keep both surfaces pointing here. */

/* Shared section heading — Poppins 500 @ 44px (replaces the v3 700/40px) */
.t3-h2 { font-family: var(--font-family-heading); font-size: 44px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
@media (max-width: 1095px) { .t3-h2 { font-size: 36px; } }
@media (max-width: 950px) { .t3-h2 { font-size: 30px; } }
@media (max-width: 520px) { .t3-h2 { font-size: 27px; } }

/* Pill buttons — the v4 source's base .btn is fully rounded (999px); our
   project base is 5px. Pill every .btn in the teams button-bearing zones to
   match. The coach LinkedIn icon buttons (.t3-coaches-zone) stay square, as in
   the source (.coach-card .btn.icon-alone = 6px). */
.t3-hero .btn, .t3-assess-zone .btn, .t3-solution .btn, .t3-schedule-block .btn { border-radius: 999px; }
/* Teams white-card primary buttons hover to magenta (matches the v4 source's page-wide
   override + .t3-solution); the synced foundation .btn-primary:hover is dark-red, which the
   teams design overrides. :not(:disabled) keeps the assessment's disabled "Next" grey. */
.t3-hero .btn-primary:not(:disabled):not([aria-disabled="true"]):hover, .t3-assess-zone .btn-primary:not(:disabled):not([aria-disabled="true"]):hover, .t3-coaches-zone .btn-primary:not(:disabled):not([aria-disabled="true"]):hover, .t3-schedule-block .btn-primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--color-magenta); border-color: var(--color-magenta); }

/* ── Hero zone (hero + trust bar share one 4-stop diagonal gradient) ── */
.t3-hero-zone { background: linear-gradient(155deg, var(--color-blue-black) 0%, var(--color-dark-red) 50%, var(--color-berry-red) 80%, var(--color-magenta) 100%); color: #fff; position: relative; overflow: hidden; }
.t3-hero-zone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(238,102,165,0.28) 0%, transparent 45%), radial-gradient(circle at 5% 95%, rgba(198,47,117,0.22) 0%, transparent 55%), radial-gradient(circle at 50% 60%, rgba(150,0,75,0.20) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.t3-hero-zone::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; z-index: 0; mix-blend-mode: overlay; }
.t3-hero-zone > * { position: relative; z-index: 1; }
.t3-hero { padding: 128px 24px; }
.t3-hero-inner { display: flex; align-items: flex-start; gap: 64px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.t3-hero__content { flex: 1; min-width: 0; }
.t3-hero h1 { font-family: var(--font-family-heading); font-weight: 500; font-size: clamp(2.5rem, 5vw, 64px); line-height: 1.2; color: #fff; margin: 0 0 24px; }
.t3-hero__highlight { color: var(--color-orange-cat); }
.t3-hero__underline { text-decoration: underline; text-decoration-color: var(--color-orange-cat); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.t3-hero__sub { font-family: var(--font-family-sans); font-size: clamp(16px, 2.2vw, 20px); font-weight: 600; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; max-width: 760px; }

/* Hero / closing lead-capture form card */
.t3-hero-form { flex: 0 0 484px; max-width: 100%; color: var(--color-off-black); background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.18), 0 6px 14px -6px rgba(0,0,0,0.10); border: 1px solid var(--color-grey-2); position: relative; z-index: 1; }
.t3-hero-form__title { font-family: var(--font-family-heading); font-size: 19px; font-weight: 700; color: var(--color-blue-black); margin: 0 0 4px; }
.t3-hero-form__sub { font-size: 14px; color: var(--color-grey-4); margin: 0 0 22px; }
.t3-hero-form__privacy { grid-column: 1 / -1; font-size: 11px; color: var(--color-grey-3); text-align: center; margin: 8px 0 0; display: flex; align-items: center; gap: 6px; justify-content: center; }
.t3-hero-form__privacy span { color: var(--color-berry-red); font-weight: 700; }
.t3-hero-form .form-group label { font-size: 13px; }
.t3-hero-form .form-group input:focus, .t3-hero-form .form-group select:focus { box-shadow: 0 0 0 3px rgba(150,0,75,0.20); }
@media (max-width: 1024px) { .t3-hero-inner { gap: 40px; } .t3-hero-form { flex: 0 0 360px; } }
@media (max-width: 768px) { .t3-hero-inner { flex-direction: column; } .t3-hero-form { flex: none; width: 100%; } }

/* ── Trust bar — magenta separator ABOVE the logos ── */
.t3-trust { background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.18) 100%); padding: 0 0 32px; position: relative; }
.t3-trust__sep-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.t3-trust__sep { height: 1px; background: var(--color-magenta); margin-bottom: 24px; }
.t3-trust__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.t3-trust__label { text-align: center; font-family: var(--font-family-heading); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.70); margin: 0 0 20px; }
.t3-logo-grid { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.t3-logo-item { height: 48px; padding: 0 24px; display: flex; align-items: center; justify-content: center; opacity: 0.65; transition: opacity 0.2s; }
.t3-logo-item:hover { opacity: 1; }
.t3-logo-item img { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); }
@media (max-width: 480px) { .t3-logo-grid { gap: 12px; } }

/* ── "The Problem" / Escaping the Build Trap (3-col) ── */
.t3-overview { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); padding: 160px 0; position: relative; overflow: hidden; }
.t3-overview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 22%, rgba(238,102,165,0.18) 0%, transparent 45%), radial-gradient(circle at 8% 92%, rgba(150,0,75,0.30) 0%, transparent 55%), radial-gradient(ellipse 60% 30% at 50% 50%, rgba(238,102,165,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.t3-overview::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; z-index: 0; mix-blend-mode: overlay; }
.t3-overview > * { position: relative; z-index: 1; }
.t3-overview__inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.t3-build-trap-row { display: grid; grid-template-columns: 50% 268px 1fr; gap: 64px 32px; align-items: center; }
.t3-build-trap__copy { align-self: start; display: flex; flex-direction: column; gap: 24px; }
.t3-outcomes-heading { font-family: var(--font-family-heading); font-weight: 500; font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0 0 24px; }
.t3-build-trap__italic { font-style: italic; color: var(--color-orange-cat); }
.t3-outcomes-body { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0; max-width: 560px; }
.t3-build-trap__highlight { font-weight: 700; color: var(--color-orange-cat); }
.t3-outcomes-checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; padding: 0; }
.t3-outcomes-checklist li { display: flex; gap: 12px; align-items: center; font-family: var(--font-family-sans); font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.55; }
.t3-outcomes-checklist li::before { content: '✓'; color: var(--color-magenta-2); font-weight: 700; flex-shrink: 0; }
.t3-text-orange-cat { color: var(--color-orange-cat); font-style: normal; }
.t3-book-card__cover { display: block; text-decoration: none; filter: drop-shadow(0 32px 48px rgba(0,0,0,0.65)) drop-shadow(0 0 60px rgba(238,102,165,0.28)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; }
.t3-book-card__cover:hover { transform: translateY(-8px); text-decoration: none; filter: drop-shadow(0 48px 64px rgba(0,0,0,0.70)) drop-shadow(0 0 80px rgba(238,102,165,0.38)); }
.t3-book-card__cover img { width: 100%; height: auto; display: block; }
.t3-book-card__info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.t3-book-card__quote-block { font-family: var(--font-family-heading); font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.5; color: #fff; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.18); margin: 0 0 4px; }
.t3-book-card__title { font-family: var(--font-family-heading); font-weight: 600; font-size: 26px; line-height: 1.2; color: #fff; margin: 0; }
.t3-book-card__author { font-family: var(--font-family-heading); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-orange-cat); margin: 0; }
.t3-book-card__desc { font-family: var(--font-family-sans); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.85); margin: 0; }
.t3-book-card__meta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.t3-book-card__stars { display: flex; align-items: center; gap: 6px; }
.t3-book-card__star-icons { display: flex; gap: 2px; align-items: center; }
.t3-book-card__star-icons svg { width: 14px; height: 14px; fill: var(--color-orange-cat); }
.t3-book-card__rating { font-family: var(--font-family-sans); font-size: 13px; color: rgba(255,255,255,0.6); }
.t3-book-card__rating strong { font-weight: 700; }
.t3-book-card__rating a { color: var(--color-orange-cat); text-decoration: underline; }
.t3-book-card__copies { display: flex; align-items: center; gap: 6px; font-family: var(--font-family-sans); font-size: 13px; color: rgba(255,255,255,0.6); }
.t3-book-card__copies strong { font-weight: 700; }
.t3-book-card__copies-icon { width: 16px; height: 16px; display: block; flex-shrink: 0; color: var(--color-orange-cat); }
@media (max-width: 1100px) { .t3-overview { padding: 112px 0; } .t3-overview__inner { padding: 0 32px; } .t3-build-trap-row { grid-template-columns: 1fr 240px 1fr; gap: 40px 24px; } }
@media (max-width: 960px) { .t3-outcomes-heading { font-size: 40px; } }
@media (max-width: 768px) { .t3-overview { padding: 72px 0; } .t3-overview__inner { padding: 0 24px; } .t3-build-trap-row { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .t3-outcomes-heading { font-size: 32px; } }

/* ── Assessment zone — dark gradient + radial washes + dot grid ── */
.t3-assess-zone { background: linear-gradient(165deg, #0d1126 0%, #1a0f2c 30%, #2c1234 60%, #3a0e22 100%); position: relative; overflow: hidden; padding: 120px 24px; }
.t3-assess-zone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 60%, rgba(243,129,44,0.18) 0%, transparent 60%), radial-gradient(circle at 88% 12%, rgba(238,102,165,0.22) 0%, transparent 45%), radial-gradient(circle at 8% 88%, rgba(150,0,75,0.28) 0%, transparent 50%); pointer-events: none; z-index: 0; }
.t3-assess-zone::after { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.35) 100%); pointer-events: none; z-index: 0; }
.t3-assess-zone > * { position: relative; z-index: 1; }
.t3-assess__inner { max-width: 800px; margin: 0 auto; }
.t3-assess__heading { color: #fff; text-align: center; margin: 0 auto 48px; max-width: 720px; }
/* transform: translateZ(0) promotes the widget to its own compositing layer so the
   native <select> dropdowns repaint cleanly — without it, Chromium/Windows leaves
   stale "ghost" pixels of the closed popup under the field (opaque bg keeps text crisp). */
.t3-assess-widget { background: #fff; border-radius: 16px; padding: 48px; box-shadow: 0 32px 64px -16px rgba(0,0,0,0.55), 0 12px 24px -8px rgba(0,0,0,0.35), 0 0 80px rgba(243,129,44,0.10); border: 1px solid rgba(255,255,255,0.08); min-height: 600px; width: 100%; box-sizing: border-box; transform: translateZ(0); }
.t3-assess-widget .form-grid { gap: 28px; }
.t3-assess-widget .form-group { gap: 8px; }
/* Stable card height across the question / contact / result steps so clicking
   Next doesn't make the card jump — but NOT the intro (step 0), which sizes to
   its short content for a tidy first load (no big empty gap on page load). */
.t3-assess-widget [data-assess-step]:not([data-assess-step="0"]).is-active { min-height: 384px; }
/* Conversational question labels inside the widget (override the uppercase form labels) */
.t3-assess-widget .form-group label { font-family: var(--font-family-sans); font-size: 15px; font-weight: 600; color: var(--color-blue-black); text-transform: none; letter-spacing: 0; }
.t3-assess-widget__eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-family-heading); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-berry-red); margin-bottom: 16px; }
.t3-assess-widget__eyebrow-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-berry-red); }
.t3-assess-intro-lead { text-align: center; margin-bottom: 48px; }
.t3-assess-intro-lead__text { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.6; color: var(--color-grey-4); margin: 0 auto 16px; max-width: 520px; }
.t3-assess-intro-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 0; }
.t3-assess-intro-chips li { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-family-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; padding: 8px 16px; border-radius: 999px; border: 1px solid; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: default; }
.t3-assess-intro-chips li:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(0,0,0,0.12); }
.t3-assess-intro-chips svg { width: 14px; height: 14px; flex-shrink: 0; }
.t3-assess-intro-chips li:nth-child(1) { color: var(--color-berry-red); background: rgba(150,0,75,0.08); border-color: rgba(150,0,75,0.18); }
.t3-assess-intro-chips li:nth-child(2) { color: var(--color-orange-cat); background: rgba(243,129,44,0.10); border-color: rgba(243,129,44,0.24); }
.t3-assess-intro-chips li:nth-child(3) { color: var(--color-green-dark); background: rgba(20,185,155,0.10); border-color: rgba(20,185,155,0.24); }
.t3-assess-intro-chips li:nth-child(4) { color: #8a5e00; background: rgba(242,181,59,0.14); border-color: rgba(242,181,59,0.30); }
.t3-assess-intro-actions { display: flex; flex-direction: column; align-items: center; margin-top: 36px; }
.t3-assess-intro-actions .btn { height: 58px; padding: 0 40px; font-size: 16px; }
@media (max-width: 768px) { .t3-assess-widget { padding: 28px 20px; } }

/* ── Our Solution — dark-red gradient + white SVG cards ── */
.t3-solution { background: linear-gradient(160deg, var(--color-berry-red) 0%, var(--color-dark-red) 60%, #5C002E 100%); padding: 128px 24px; position: relative; overflow: hidden; }
.t3-solution::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(238,102,165,0.22) 0%, transparent 45%), radial-gradient(circle at 5% 95%, rgba(238,102,165,0.14) 0%, transparent 50%), radial-gradient(circle at 50% 60%, rgba(150,0,75,0.20) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.t3-solution::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; z-index: 0; mix-blend-mode: overlay; }
.t3-solution > * { position: relative; z-index: 1; }
.t3-solution__inner { max-width: 1200px; margin: 0 auto; }
.t3-solution__title { color: #fff; text-align: left; margin: 0 0 16px; }
.t3-solution__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); text-align: left; max-width: 860px; margin: 0 0 48px; }
.t3-accent { color: var(--color-orange-cat); }
.t3-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.t3-solution-card { background: #fff; border: 1px solid var(--color-grey-2); border-radius: 14px; padding: 32px 28px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 4px 12px -8px rgba(16,24,40,0.10); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.t3-solution-card::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: linear-gradient(90deg, var(--color-berry-red), var(--color-magenta)); border-radius: 0 0 3px 0; transition: width 0.35s cubic-bezier(0.2,0.8,0.2,1); }
.t3-solution-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(150,0,75,0.18); border-color: rgba(150,0,75,0.20); }
.t3-solution-card:hover::before { width: 80px; }
.t3-solution-card__icon-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-berry-red); transition: color 0.3s ease; }
.t3-solution-card:hover .t3-solution-card__icon-wrap { color: var(--color-dark-red); }
.t3-solution-card__icon-wrap svg { width: 20px; height: 20px; }
.t3-solution-card h3 { font-family: var(--font-family-heading); font-size: 17px; font-weight: 600; color: var(--color-blue-black); line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.t3-solution-card p { font-family: var(--font-family-sans); font-size: 14px; color: var(--color-grey-4); line-height: 1.65; flex: 1; margin: 0; }
.t3-solution-card__badge { display: inline-block; font-family: var(--font-family-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-berry-red); background: var(--color-light-red); padding: 4px 10px; border-radius: 999px; margin-top: 18px; align-self: flex-start; }
.t3-solution__ctas { text-align: center; margin-top: 48px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.t3-solution .btn-primary { background: #fff; color: var(--color-berry-red); border-color: #fff; }
.t3-solution .btn-primary:hover { background: var(--color-magenta); border-color: var(--color-magenta); color: #fff; }
.t3-solution .btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.t3-solution .btn-secondary:hover { background: rgba(255,255,255,0.10); }
@media (max-width: 768px) { .t3-solution-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .t3-solution-grid { grid-template-columns: 1fr; } }

/* ── Case studies / results ── */
.t3-results { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); padding: 128px 24px 64px; position: relative; overflow: hidden; }
.t3-results::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 25%, rgba(238,102,165,0.16) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150,0,75,0.28) 0%, transparent 55%); pointer-events: none; z-index: 0; }
.t3-results > * { position: relative; z-index: 1; }
.t3-results__inner { max-width: 1200px; margin: 0 auto; }
.t3-results__title { color: #fff; margin: 0 0 16px; }
.t3-results__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: #fff; max-width: 640px; margin: 0 0 48px; }
.t3-case-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 32px; margin-top: 48px; }
@media (max-width: 950px) { .t3-case-grid { grid-template-columns: 1fr; } }
/* Case card — rounded white card, gradient top, hover lift (v4 polish) */
.t3-case-card { border-radius: 16px; display: flex; flex-direction: column; background: #fff; box-shadow: 0 8px 32px -12px rgba(0,0,0,0.35); overflow: hidden; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease; }
.t3-case-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px -16px rgba(0,0,0,0.40); }
.t3-case-card__top { background: linear-gradient(155deg, var(--color-berry-red) 0%, var(--color-dark-red) 100%); padding: 28px 28px 24px; display: flex; flex-direction: column; }
.t3-case-card__logo-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.t3-case-card__logo { height: 22px; width: auto; max-width: 150px; filter: brightness(0) invert(1); opacity: 0.90; }
.t3-case-card__industry { font-family: var(--font-family-heading); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); white-space: nowrap; }
.t3-case-card__divider { height: 1px; background: rgba(255,255,255,0.15); border: none; margin: 0 0 16px; }
.t3-case-card__challenge-label { font-family: var(--font-family-heading); font-weight: 700; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-gold); margin: 0 0 8px; }
.t3-case-card__challenge-text { font-family: var(--font-family-heading); font-weight: 500; font-size: 16px; color: rgba(255,255,255,0.95); line-height: 1.45; margin: 0; }
.t3-case-card__bottom { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.t3-case-card__result-label { font-family: var(--font-family-heading); font-weight: 700; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-berry-red); margin: 0 0 12px; }
.t3-case-card__quote { font-family: var(--font-family-heading); font-weight: 400; font-style: italic; font-size: 16px; color: var(--color-blue-black); line-height: 1.6; flex: 1; margin: 0 0 20px; }
.t3-case-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-grey-2); margin-top: auto; }
.t3-case-card__attribution { display: flex; gap: 12px; align-items: center; }
.t3-case-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-blue-grey); flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(16,24,40,0.25); }
.t3-case-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t3-case-card__name { font-family: var(--font-family-heading); font-weight: 600; font-size: 13px; color: var(--color-blue-black); line-height: 1.4; margin: 0; }
.t3-case-card__title { font-family: var(--font-family-sans); font-size: 11px; color: var(--color-grey-4); line-height: 1.5; margin: 0; }
.t3-case-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.t3-case-card__stat-num { font-family: var(--font-family-heading); font-weight: 600; font-size: 28px; color: var(--color-red); letter-spacing: -0.03em; line-height: 1; display: block; text-align: right; }
.t3-case-card__stat-label { font-family: var(--font-family-heading); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-red); display: block; text-transform: uppercase; opacity: 0.75; text-align: right; }
.t3-stat-strip { display: flex; justify-content: center; gap: 0; margin-top: 128px; padding: 32px 0 16px; border-top: 1px solid rgba(255,255,255,0.35); }
.t3-stat-strip__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 32px; position: relative; }
.t3-stat-strip__item:not(:last-child)::after { content: ''; position: absolute; top: 10%; bottom: 10%; right: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.35), transparent); }
.t3-stat-strip__num { font-family: var(--font-family-heading); font-size: 40px; font-weight: 600; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.t3-stat-strip__num em { font-style: italic; font-weight: 300; color: var(--color-magenta-2); }
.t3-stat-strip__label { font-family: var(--font-family-heading); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75); line-height: 1.3; white-space: nowrap; margin-top: 4px; }
@media (max-width: 768px) { .t3-stat-strip { flex-direction: column; gap: 0; padding: 28px 0; } .t3-stat-strip__item { padding: 24px 0; } .t3-stat-strip__item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.25); } .t3-stat-strip__item:not(:last-child)::after { display: none; } .t3-stat-strip__label { white-space: normal; } }

/* ── Coaches zone — light grey + washes + dot grid (shared by coaches + clients banner) ── */
.t3-coaches-zone { background: var(--color-grey-1); position: relative; overflow: hidden; }
.t3-coaches-zone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(118,0,59,0.18) 0%, transparent 18%), radial-gradient(ellipse 70% 40% at 50% 32%, rgba(238,102,165,0.10) 0%, transparent 60%), radial-gradient(circle at 92% 14%, rgba(238,102,165,0.22) 0%, transparent 42%), radial-gradient(circle at 6% 75%, rgba(150,0,75,0.16) 0%, transparent 50%), linear-gradient(to bottom, transparent 75%, #fff 100%); pointer-events: none; z-index: 0; }
.t3-coaches-zone::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(150,0,75,0.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
.t3-coaches-zone > * { position: relative; z-index: 1; }
.t3-coaches { padding: 128px 24px 48px; }
.t3-coaches__inner { max-width: 1200px; margin: 0 auto; }
.t3-coaches__title { color: var(--color-blue-black); margin: 0 0 16px; }
.t3-coaches__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: var(--color-grey-4); max-width: 640px; margin: 0 0 48px; }
.t3-coaches-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 1024px) { .t3-coaches-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .t3-coaches-grid { grid-template-columns: 1fr; } }
.t3-clients-banner { padding-top: 0; }
.t3-clients-banner__inner { max-width: 1200px; margin: 0 auto; padding: 56px 24px; }
.t3-clients-banner__heading { font-family: var(--font-family-heading); font-size: 18px; font-weight: 600; color: var(--color-grey-4); text-align: center; margin: 0 auto 40px; }
.t3-clients-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; align-items: center; justify-items: center; }
.t3-clients-logo-item { display: flex; align-items: center; justify-content: center; height: 50px; filter: grayscale(60%) opacity(0.7); transition: all 0.2s; }
.t3-clients-logo-item:hover { filter: grayscale(0%) opacity(1); }
.t3-clients-logo-item span { font-family: var(--font-family-heading); font-size: 14px; font-weight: 600; color: var(--color-grey-4); text-align: center; line-height: 1.3; }
.t3-clients-divider { border: none; border-top: 1px solid var(--color-grey-2); margin: 40px auto 0; max-width: calc(100% - 56px); }
@media (max-width: 1024px) { .t3-clients-logos { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
@media (max-width: 768px) { .t3-clients-logos { grid-template-columns: repeat(3, 1fr); gap: 20px; } .t3-clients-banner__heading { font-size: 16px; margin-bottom: 32px; } .t3-clients-banner__inner { padding: 40px 24px; } }
@media (max-width: 480px) { .t3-clients-logos { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ── FAQ — dark gradient; uses the style-guide .faq-* editorial accordion
   (44px berry→dark-red gradient icon is the style-guide default) with
   dark-zone colour + heading-size overrides ── */
.t3-faq { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); padding: 128px 24px 96px; position: relative; overflow: hidden; }
.t3-faq::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 25%, rgba(238,102,165,0.16) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150,0,75,0.28) 0%, transparent 55%); pointer-events: none; z-index: 0; }
.t3-faq > * { position: relative; z-index: 1; }
.t3-faq__inner { max-width: 1200px; margin: 0 auto; }
.t3-faq .faq-list { max-width: 1200px; }
.t3-faq__heading { color: #fff; max-width: 1000px; margin: 0 auto; text-align: center; }
.t3-faq__heading em { color: var(--color-orange-cat); font-style: italic; }
.t3-faq .faq-btn h3 { font-family: var(--font-family-heading); font-size: 20px; font-weight: 500; color: #fff; line-height: 1.4; letter-spacing: -0.01em; }
.t3-faq .faq-answer p { color: rgba(255,255,255,0.88); }
.t3-faq .faq-item { border-bottom-color: rgba(255,255,255,0.18); }
.t3-faq .faq-item:first-child { border-top-color: rgba(255,255,255,0.18); }
.t3-faq .faq-icon img { width: 14px; height: 14px; filter: brightness(0) invert(1); transition: transform 0.3s ease; }
.t3-faq .faq-item.open .faq-icon img { transform: rotate(180deg); }

/* ── Closing CTA — 2-col copy + form (in-FAQ sub-block, shares the FAQ dark zone) ── */
.t3-schedule-block { margin-top: 112px; padding-top: 80px; padding-bottom: 64px; border-top: 1px solid rgba(255,255,255,0.12); }
.t3-closing-proof { background: transparent; border: 1px solid rgba(238,102,165,0.55); border-radius: 14px; max-width: 640px; text-align: left; overflow: hidden; padding: 22px 26px; margin-top: 8px; }
.t3-closing-proof__content { display: flex; flex-direction: column; gap: 14px; }
.t3-closing-proof p { font-family: var(--font-family-heading); font-weight: 400; font-style: italic; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.95); margin: 0; }
.t3-closing-proof__cite { display: flex; flex-direction: row; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(238,102,165,0.30); }
.t3-closing-proof__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 6px 12px -4px rgba(150,0,75,0.45); overflow: hidden; }
.t3-closing-proof__avatar img { width: 44px; height: 44px; object-fit: cover; object-position: top center; display: block; }
.t3-closing-proof__cite-text { display: flex; flex-direction: column; gap: 3px; }
.t3-closing-proof__cite strong { display: block; font-family: var(--font-family-heading); font-size: 15px; font-weight: 600; color: #fff; }
.t3-closing-proof__cite span { display: block; font-family: var(--font-family-heading); font-size: 11px; font-weight: 600; color: var(--color-magenta-2); letter-spacing: 1.2px; text-transform: uppercase; }
.t3-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.t3-schedule-copy { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.t3-schedule__title { color: #fff; text-align: left; margin: 0; }
.t3-schedule__sub { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.88); text-align: left; margin: 0; }
@media (max-width: 768px) { .t3-schedule-block { margin-top: 80px; padding-top: 48px; } .t3-schedule-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── Related programs — accent-stripe link cards with arrow badge ── */
.t3-related { padding: 64px 24px; background: var(--color-grey-1); border-top: 1px solid var(--color-grey-2); }
.t3-related__inner { max-width: 1200px; margin: 0 auto; }
.t3-related__heading { font-family: var(--font-family-heading); font-size: 22px; font-weight: 700; color: var(--color-blue-black); margin: 0 0 28px; }
.t3-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 768px) { .t3-related-grid { grid-template-columns: 1fr; } }
.t3-related-card { position: relative; background: #fff; border: 1px solid var(--color-grey-2); border-radius: 14px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 12px -8px rgba(16,24,40,0.10); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.t3-related-card::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--color-berry-red), var(--color-magenta)); border-radius: 0 0 3px 0; opacity: 0.65; transition: width 0.35s cubic-bezier(0.2,0.8,0.2,1), opacity 0.25s ease; }
/* Override the global `a:hover { text-decoration: underline }` — the whole card is an anchor. */
.t3-related-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(150,0,75,0.22); border-color: var(--color-grey-3); text-decoration: none; }
.t3-related-card:hover::before { width: 64px; opacity: 1; }
.t3-related-card__arrow { position: absolute; top: 22px; right: 22px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-grey-1); display: flex; align-items: center; justify-content: center; color: var(--color-magenta); transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease; }
.t3-related-card__arrow svg { width: 11px; height: 11px; }
.t3-related-card:hover .t3-related-card__arrow { background: var(--color-magenta); color: #fff; transform: translateX(2px); }
.t3-related-tag { font-family: var(--font-family-heading); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-berry-red); margin: 0; padding-top: 2px; }
.t3-related-card h3 { font-family: var(--font-family-heading); font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-blue-black); margin: 0; max-width: calc(100% - 44px); }
.t3-related-card p:not(.t3-related-tag) { font-family: var(--font-family-sans); font-size: 14px; color: var(--color-grey-4); line-height: 1.55; margin: 0; flex: 1; }

/* ===== Checkout flow — shared chrome ===== */
/* Page-body shell, sticky header, progress bar, main container, footnote.
   Scoped to .checkout-* — bespoke family like .t3-* / .cop-*.
   Source: Step 1 - checkout-courses-v5.html + Step 2 - checkout-signup.html
   (E:/projects/PI_LandingPage_Design/Pages/Payment page/without bundle payment flow v1/).
   CHROME ONLY — do not add course rows, order card, forms, or confirmation styles here. */

/* ── Page-body shell ── */
.checkout-body {
  font-family: var(--font-family-sans);
  font-size: 16px;
  color: var(--color-off-black);
  background: var(--color-grey-1);
  min-height: 100vh;
}

/* ── Sticky header ── */
.checkout-header {
  background: var(--color-true-white);
  border-bottom: 1px solid var(--color-grey-2);
  height: 60px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.checkout-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
/* Logo link — Poppins 700, off-black, no underline at rest or on hover */
.checkout-header__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-off-black);
  text-decoration: none;
}
.checkout-header__logo:hover { text-decoration: none; }
.checkout-header__logo img { height: 28px; width: auto; display: block; }
/* Secure checkout caption — centred in the auto column */
.checkout-header__secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-grey-4);
}
/* Lock SVG — green to signal security */
.checkout-lock { color: var(--color-checkout-green); }
/* Stripe wordmark — Stripe's own brand indigo; kept as a literal (not a PI brand token) */
.checkout-stripe-mark {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: #635bff;
  letter-spacing: -0.3px;
}

/* ── Progress bar ── */
.checkout-progress {
  background: var(--color-true-white);
  border-bottom: 1px solid var(--color-grey-2);
  padding: 16px 32px;
}
.checkout-progress__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}
/* Individual step — default (upcoming) state */
.checkout-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-grey-3);
  flex: 1;
}
/* Step circle */
.checkout-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-grey-2);
  color: var(--color-grey-3);
  flex-shrink: 0;
}
/* Step label — hidden on narrow screens, shown ≥ 500px */
.checkout-step__label { display: none; }
@media (min-width: 500px) { .checkout-step__label { display: block; } }
/* Active step */
.checkout-step.active { color: var(--color-blue-black); }
.checkout-step.active .checkout-step__num { background: var(--color-berry-red); color: var(--color-true-white); }
/* Done step */
.checkout-step.done { color: var(--color-checkout-green); }
.checkout-step.done .checkout-step__num { background: var(--color-checkout-green); color: var(--color-true-white); }
/* Done step when it is an anchor (navigable back to a completed step) */
a.checkout-step.done { text-decoration: none; cursor: pointer; }
a.checkout-step.done:hover { color: var(--color-checkout-green-dark); }
a.checkout-step.done:hover .checkout-step__label { text-decoration: underline; }
/* Connector line between steps */
.checkout-connector {
  flex: 1;
  height: 1px;
  background: var(--color-grey-2);
  margin: 0 8px;
  max-width: 80px;
}
.checkout-connector.done { background: var(--color-checkout-green); }

/* ── Main content container ── */
.checkout-main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 48px; }

/* ── Page-level footnote (help email, legal copy) ── */
.checkout-footnote {
  text-align: center;
  font-family: var(--font-family-heading);
  font-size: 13px;
  color: var(--color-grey-3);
  margin-top: 32px;
  padding-bottom: 8px;
}
.checkout-footnote a { color: var(--color-grey-4); text-decoration: none; }
.checkout-footnote a:hover { color: var(--color-red); text-decoration: underline; }

/* ── Step 1 — choose courses ── */
/* Course list + order panel + team callout for /checkout/courses.
   Ported from Step 1 - checkout-courses-v5.html (lines 49–67, 129–247).
   Class names are the spec: they must match checkout-courses.js exactly.
   Greens use --color-checkout-green / --color-checkout-green-dark / --color-checkout-green-light
   (all three tokens defined in :root above). */

/* ── Two-column grid: courses left (2fr), order panel right (1fr) ── */
.checkout-courses-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .checkout-courses-grid { grid-template-columns: 1fr; }
  .checkout-order-panel { position: static !important; }
}

/* ── Course list wrapper — white card ── */
.checkout-courses-list {
  background: var(--color-true-white);
  border: 1px solid var(--color-grey-2);
  border-radius: 8px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* ── Error message (fetch failure) ── */
.checkout-error {
  padding: 24px 20px;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  color: var(--color-grey-4);
}

/* ── Individual course row ── */
.checkout-course-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-grey-2);
  background: var(--color-true-white);
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.checkout-course-row:last-child { border-bottom: none; }
.checkout-course-row:hover { background: var(--color-grey-1); }
.checkout-course-row.selected {
  border-left-color: var(--color-checkout-green);
  background: var(--color-checkout-green-light);
}

/* Course row sub-elements */
.checkout-course-row__info {
  flex: 1;
  min-width: 0;
}
.checkout-course-row__name {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-off-black);
  font-size: 15px;
}
.checkout-course-row__desc {
  font-family: var(--font-family-sans);
  font-size: 13px;
  color: var(--color-grey-4);
  line-height: 1.45;
  margin-top: 2px;
}
.checkout-course-row__price {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--color-off-black);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 16px;
}
.checkout-course-row__action { flex-shrink: 0; }

/* ── Cart button (.checkout-btn-cart) — green add/remove ── */
/* Base .btn rules folded in, then .btn-cart green fill, pill radius, .btn-m sizing */
.checkout-btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--color-checkout-green);
  border-radius: 999px;
  font-family: var(--font-family-heading);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  background: var(--color-checkout-green);
  color: var(--color-true-white);
  height: 36px;
  font-size: 14px;
  padding: 0 18px;
}
.checkout-btn-cart:hover {
  background: var(--color-checkout-green-dark);
  border-color: var(--color-checkout-green-dark);
}
.checkout-btn-cart.selected {
  background: var(--color-checkout-green-dark);
  border-color: var(--color-checkout-green-dark);
}

/* ── Primary CTA button (.checkout-btn-primary) — red fill, full width ── */
/* Base .btn rules folded in, then .btn-primary red fill, .btn-l sizing */
.checkout-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--color-red);
  border-radius: 5px;
  font-family: var(--font-family-heading);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  background: var(--color-red);
  color: var(--color-true-white);
  height: 42px;
  font-size: 16px;
  padding: 0 24px;
  width: 100%;
}
.checkout-btn-primary:hover {
  background: var(--color-dark-red);
  border-color: var(--color-dark-red);
  text-decoration: none;
}
.checkout-btn-primary:disabled,
.checkout-btn-primary[disabled] {
  background: var(--color-grey-2);
  border-color: var(--color-grey-2);
  color: var(--color-grey-3);
  cursor: not-allowed;
}

/* ── Order panel (right column) ── */
.checkout-order-panel {
  position: sticky;
  top: 72px;
}
.checkout-order-card {
  background: var(--color-true-white);
  border: 1px solid var(--color-grey-2);
  border-radius: 8px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.25);
  padding: 24px;
}
.checkout-order-heading {
  font-family: var(--font-family-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-off-black);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-grey-2);
}
.checkout-order-items { min-height: 60px; }
.checkout-order-empty {
  font-family: var(--font-family-sans);
  font-size: 14px;
  color: var(--color-grey-3);
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}
.checkout-order-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-grey-1);
}
.checkout-order-item:last-child { border-bottom: none; }
.checkout-order-item__name {
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-off-black);
  flex: 1;
}
.checkout-order-item__price {
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-off-black);
  white-space: nowrap;
}
.checkout-order-divider {
  height: 1px;
  background: var(--color-grey-2);
  margin: 12px 0;
}
.checkout-order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  margin-top: 4px;
  border-top: 2px solid var(--color-off-black);
}
.checkout-order-total-label {
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-off-black);
}
.checkout-order-total-value {
  font-family: var(--font-family-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-red);
}
.checkout-order-cta { margin-top: 16px; }

/* ── Team callout (below left column) ── */
.checkout-team-callout {
  background: var(--color-true-white);
  border: 1px solid var(--color-grey-2);
  border-radius: 10px;
  padding: 20px 24px;
  text-align: left;
  grid-column: 1 / 2;
}
.checkout-team-callout__heading {
  font-family: var(--font-family-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-blue-black);
  margin-bottom: 6px;
}
.checkout-team-callout__body {
  font-family: var(--font-family-heading);
  font-size: 12px;
  color: var(--color-grey-4);
  line-height: 1.6;
  margin-bottom: 12px;
}
.checkout-team-callout__link {
  font-family: var(--font-family-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-berry-red);
  text-decoration: none;
  display: inline-block;
}
.checkout-team-callout__link:hover { text-decoration: underline; }

/* Responsive — narrow screens */
@media (max-width: 768px) {
  .checkout-course-row { flex-wrap: wrap; }
  .checkout-course-row__action { width: 100%; }
  .checkout-course-row__action .checkout-btn-cart { width: 100%; justify-content: center; }
}

/* ── Step 2 — create account ── */
/* Ported from Step 2 - checkout-signup.html (lines 112–227).
   Class names are the spec: they must match checkout-account.js exactly.
   Pairs with .checkout-btn-primary (defined in Step 1 above) via .checkout-form-submit modifier. */

.checkout-signup {
  max-width: 560px;
  margin: 0 auto;
}

.checkout-page-title {
  font-family: var(--font-family-heading);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-blue-black);
  margin: 0 0 32px;
}

/* Account Form Panel */
.checkout-form-panel {
  background: var(--color-true-white);
  border: 1px solid var(--color-grey-2);
  border-radius: 16px;
  overflow: hidden;
}
.checkout-form-panel__header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--color-grey-2);
}
.checkout-form-panel__title {
  font-family: var(--font-family-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-blue-black);
  margin: 0 0 4px;
}
.checkout-form-panel__subtitle {
  font-family: var(--font-family-sans);
  font-size: 14px;
  color: var(--color-grey-4);
  margin: 0;
}
.checkout-form-panel__body { padding: 24px 28px; }

/* Form fields */
.checkout-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 500px) { .checkout-form-row { grid-template-columns: 1fr; } }

.checkout-form-group { margin-bottom: 16px; }

.checkout-form-label {
  display: block;
  font-family: var(--font-family-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--color-blue-black);
  margin-bottom: 6px;
}
.checkout-form-label span { color: var(--color-red); margin-left: 2px; }

.checkout-form-input {
  width: 100%;
  height: 40px;
  border: 1.5px solid var(--color-grey-2);
  border-radius: 6px;
  padding: 0 14px;
  font-family: var(--font-family-sans);
  font-size: 15px;
  color: var(--color-blue-black);
  background: var(--color-true-white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-form-input::placeholder { color: var(--color-grey-3); }
.checkout-form-input:focus {
  border-color: var(--color-berry-red);
  box-shadow: 0 0 0 3px rgba(150, 0, 75, 0.08);
}
.checkout-form-input.error { border-color: var(--color-red); }

.checkout-form-error {
  font-family: var(--font-family-sans);
  font-size: 12px;
  color: var(--color-red);
  margin-top: 5px;
  display: none;
}
.checkout-form-error.visible { display: block; }
.checkout-form-error a { color: var(--color-red); font-weight: 700; }
.checkout-form-error a:hover { color: var(--color-red); text-decoration: underline; }

/* Checkboxes */
.checkout-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.checkout-form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-berry-red);
  cursor: pointer;
}
.checkout-form-check__label {
  font-family: var(--font-family-sans);
  font-size: 13px;
  color: var(--color-grey-4);
  line-height: 1.5;
  cursor: pointer;
}
.checkout-form-check__label a { color: var(--color-berry-red); text-decoration: none; }
.checkout-form-check__label a:hover { text-decoration: underline; }

/* Submit modifier — pairs with .checkout-btn-primary */
.checkout-form-submit {
  width: 100%;
  height: 48px;
  font-size: 16px;
  margin-top: 8px;
  border-radius: 8px;
}

/* Login prompt */
.checkout-login-prompt {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-family-sans);
  font-size: 14px;
  color: var(--color-grey-4);
}
.checkout-login-prompt a {
  color: var(--color-berry-red);
  font-weight: 600;
  text-decoration: none;
}
.checkout-login-prompt a:hover { text-decoration: underline; }

/* ── Step 3 — purchase (Stripe embedded) ── */
.checkout-stripe-card {
  /* Wide enough that Stripe's embedded checkout renders its two-column
     (order summary | payment) layout on large screens; it stacks to a single
     column on narrow viewports automatically. No padding — Stripe's UI fills the
     card edge-to-edge and brings its own internal spacing; overflow:hidden keeps
     the rounded corners. */
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-true-white);
  border: 1px solid var(--color-grey-2);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.checkout-pay-error {
  padding: 20px 24px;
  margin-top: 0;
  text-align: center;
  font-family: var(--font-family-sans);
  font-size: 14px;
  color: var(--color-red);
}
.checkout-pay-error a {
  color: var(--color-red);
  text-decoration: underline;
}
.checkout-pay-error a:hover {
  color: var(--color-red);
  text-decoration: underline;
}

/* ── Step 4 — confirmation ── */
/* Ported from Step 4 - checkout-confirmation.html (lines 97–206).
   Keyframes are prefixed (checkout-pop-in, checkout-ring-pulse, checkout-fade-up)
   to avoid collisions. All hex values replaced with CSS custom-property tokens. */

@keyframes checkout-pop-in {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes checkout-ring-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.4);  opacity: 0;   }
}
@keyframes checkout-fade-up {
  0%   { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.checkout-confirm {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  text-align: center;
}

/* Celebration icon */
.checkout-celebrate-icon-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
}
.checkout-celebrate-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-magenta-2) 0%, var(--color-berry-red) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  animation: checkout-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.checkout-celebrate-icon svg {
  width: 42px;
  height: 42px;
  stroke: var(--color-true-white);
}
.checkout-celebrate-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--color-magenta-2);
  animation: checkout-ring-pulse 0.9s 0.4s ease-out forwards;
  opacity: 0;
}

/* Product-ops "You're booked!" variant — the design (Step 4 .celebrate-check)
   specs a solid success-green circle with a green halo, matching the footer
   newsletter success icon. Scoped modifier: the course confirmation keeps the
   brand-gradient treatment above. Green is decorative/semantic (success), not
   a brand colour — hex per source. */
.checkout-celebrate-icon--booked {
  width: 88px;
  height: 88px;
  background: #059669;
  box-shadow:
    0 0 0 12px rgba(5, 150, 105, 0.12),
    0 16px 40px -8px rgba(5, 150, 105, 0.35);
}
.checkout-celebrate-icon--booked svg {
  width: 40px;
  height: 40px;
  stroke-width: 2.8;
}
.checkout-celebrate-icon-wrap--booked {
  width: 88px;
  height: 88px;
}
.checkout-celebrate-icon-wrap--booked .checkout-celebrate-ring {
  border-color: rgba(5, 150, 105, 0.45);
}

/* Hero copy */
.checkout-celebrate-title {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-blue-black);
  margin: 0 0 16px;
  animation: checkout-fade-up 0.45s 0.25s ease both;
}
@media (max-width: 480px) {
  .checkout-celebrate-title { font-size: 28px; }
}

.checkout-celebrate-social {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-grey-4);
  margin: 0 0 36px;
  animation: checkout-fade-up 0.45s 0.35s ease both;
}
.checkout-celebrate-social strong {
  font-weight: 700;
  color: var(--color-blue-black);
}
/* Product-ops confirmation diverges from the course flow: its Step 4 design
   renders the emphasised workshop name in brand red, not blue-black. Scoped
   modifier so the shared course-confirmation strong stays blue-black. */
.checkout-celebrate-social--booked strong {
  color: var(--color-red);
}
.checkout-celebrate-social a {
  color: var(--color-berry-red);
  text-decoration: underline;
}
.checkout-celebrate-social a:hover {
  color: var(--color-berry-red);
  text-decoration: underline;
}

/* Start section */
.checkout-start-section {
  text-align: center;
  border-top: 1px solid var(--color-grey-2);
  padding-top: 40px;
  margin-bottom: 40px;
}
.checkout-start-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-grey-3);
  margin: 0 0 20px;
  text-align: center;
}

/* Tips list */
.checkout-tips-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: fit-content;
}
.checkout-tip-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.checkout-tip-num {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey-3);
  flex-shrink: 0;
  min-width: 18px;
}
.checkout-tip-text {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-grey-4);
  margin: 0;
  text-align: left;
}
.checkout-tip-text strong {
  font-weight: 700;
  color: var(--color-grey-4);
}

/* Login CTA */
.checkout-login-cta {
  text-align: center;
  border-top: 1px solid var(--color-grey-2);
  padding-top: 40px;
  margin-bottom: 56px;
}
.checkout-login-cta .checkout-btn-primary {
  height: 50px;
  padding: 0 32px;
  /* The design's confirmation CTAs (course + product-ops step 4) are
     auto-width pills (`btn btn-primary pill btn-l`), unlike the full-width
     5px-radius step buttons the base class serves. */
  border-radius: 999px;
  width: auto;
}

/* Payment confirmed */
.checkout-payment-confirmed {
  margin-top: 20px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  color: var(--color-grey-3);
  text-align: center;
  line-height: 1.6;
}

/* ============================================================================
   Product Operations checkout — additions for the workshop funnel (Steps 1, 2, 4).
   Reuses the course .checkout-* chrome (header, progress, form-*, order card,
   celebrate/tips/login-cta on the confirmation); only the bespoke components
   below are new. Ported from the design's Step 1/2/4 CSS.
   ========================================================================== */

/* Step 1 — Seats: 2-col grid, workshop card, quantity stepper */
.checkout-po-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.checkout-workshop-card { background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 8px; box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.25); overflow: hidden; }
.checkout-workshop-card__subheader { padding: 10px 20px 8px; position: relative; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-berry-red); }
.checkout-workshop-card__subheader::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; background: var(--color-berry-red); }
.checkout-workshop-card__detail { padding: 20px; border-bottom: 1px solid var(--color-grey-2); }
.checkout-workshop-card__name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--color-off-black); margin-bottom: 4px; }
.checkout-workshop-card__instructor { font-size: 13px; color: var(--color-grey-4); margin-bottom: 14px; }
.checkout-workshop-card__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.checkout-workshop-card__meta-item { display: flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--color-grey-4); }
.checkout-workshop-card__meta-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-berry-red); }

.checkout-seat-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.checkout-seat-row__info { flex: 1; min-width: 180px; }
.checkout-seat-row__label { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: var(--color-off-black); }
.checkout-seat-row__hint { font-size: 13px; color: var(--color-grey-4); margin-top: 2px; }
.checkout-seat-row__price { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: var(--color-off-black); white-space: nowrap; min-width: 90px; padding-right: 16px; }

.checkout-qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--color-grey-2); border-radius: 999px; background: var(--color-true-white); overflow: hidden; }
.checkout-qty-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--color-berry-red); transition: background 0.15s, color 0.15s; }
.checkout-qty-btn:hover:not(:disabled) { background: var(--color-light-red); }
.checkout-qty-btn:disabled { color: var(--color-grey-2); cursor: not-allowed; }
.checkout-qty-btn svg { width: 14px; height: 14px; }
.checkout-qty-value { min-width: 42px; text-align: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: var(--color-off-black); }

.checkout-order-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.checkout-order-row__label { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--color-grey-4); }
.checkout-order-row__value { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--color-off-black); }
.checkout-order-item__type { font-size: 12px; color: var(--color-grey-3); display: block; font-weight: 400; }

.checkout-soldout-panel { background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 8px; box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.25); max-width: 560px; margin: 24px auto 0; padding: 48px 32px; text-align: center; }
.checkout-soldout-panel__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-light-red); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--color-berry-red); }
.checkout-soldout-panel__icon svg { width: 26px; height: 26px; }
.checkout-soldout-panel__title { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: var(--color-blue-black); margin-bottom: 8px; }
.checkout-soldout-panel__body { font-size: 15px; line-height: 1.6; color: var(--color-grey-4); margin-bottom: 24px; }

/* Step 2 — Participants */
.checkout-po-narrow { max-width: 760px; margin: 0 auto; }
.checkout-po-title { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-blue-black); margin: 0 0 8px; }
.checkout-po-subtitle { font-size: 15px; color: var(--color-grey-4); margin: 0 0 32px; max-width: 600px; }

.checkout-order-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 20px; margin-bottom: 4px; flex-wrap: wrap; }
.checkout-order-strip__name { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-dark-red); line-height: 1.3; }
.checkout-order-strip__meta { font-size: 13px; color: var(--color-grey-4); display: block; margin-top: 2px; }
.checkout-order-strip__total { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: var(--color-red); white-space: nowrap; }

.checkout-participant-block { background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.checkout-participant-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.checkout-participant-block__title { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: var(--color-berry-red); text-transform: uppercase; }
.checkout-participant-block__hint { font-size: 12px; color: var(--color-grey-4); margin: -8px 0 12px; }
.checkout-participant-remove { background: none; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--color-grey-4); padding: 4px 6px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.checkout-participant-remove:hover { color: var(--color-red); background: var(--color-light-red); }

.checkout-section-label { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-grey-4); margin: 24px 0 12px; }

.checkout-collect-choice { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.checkout-collect-option { display: flex; align-items: flex-start; gap: 12px; background: var(--color-true-white); border: 1.5px solid var(--color-grey-2); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.checkout-collect-option:hover { border-color: var(--color-grey-3); }
.checkout-collect-option input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--color-berry-red); cursor: pointer; }
.checkout-collect-option:has(input:checked) { border-color: var(--color-berry-red); background: var(--color-light-red); }
.checkout-collect-option__body { display: flex; flex-direction: column; gap: 3px; }
.checkout-collect-option__title { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--color-blue-black); }
.checkout-collect-option__desc { font-size: 13px; color: var(--color-grey-4); line-height: 1.5; }

.checkout-add-participant-wrap { margin: 4px 0 8px; }
.checkout-add-participant { width: 100%; justify-content: center; height: 44px; font-size: 14px; border: 2px dashed var(--color-grey-3); color: var(--color-berry-red); background: var(--color-true-white); border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.checkout-add-participant:hover { background: var(--color-light-red); border-color: var(--color-berry-red); }
.checkout-add-participant:disabled { color: var(--color-grey-3); border-color: var(--color-grey-2); background: var(--color-true-white); cursor: not-allowed; }
.checkout-add-participant svg { width: 13px; height: 13px; }
.checkout-add-participant-hint { font-size: 12px; color: var(--color-grey-4); text-align: center; margin-top: 6px; }

.checkout-form-divider { height: 1px; background: var(--color-grey-2); margin: 24px 0; }

/* Step 4 — booking summary card (rest of the confirmation reuses course classes) */
.checkout-booking-card { background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 16px; box-shadow: 0 4px 24px -4px rgba(0,0,0,0.10), 0 1px 6px -1px rgba(0,0,0,0.06); padding: 24px 28px; margin: 0 auto 40px; max-width: 460px; text-align: left; }
.checkout-booking-card__title { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-blue-black); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-grey-2); }
.checkout-booking-card__row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 14px; line-height: 1.5; color: var(--color-grey-4); }
.checkout-booking-card__row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--color-berry-red); }
.checkout-booking-card__row strong { color: var(--color-blue-black); font-weight: 700; }

@media (max-width: 900px) { .checkout-po-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage V5 — hm-* scoped styles (faithful port of home-DesignV5.html)
   Mirrored in puck-config.jsx HOME_V5_STYLES for the editor canvas (which
   does not load public.css) — when you change one, change the other.
   See claude-work/plan_2026-07-09_home-v5.md for the per-section spec.
═══════════════════════════════════════════════════════════════════════════ */

  .hm-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .hm-title { font-family: 'Poppins', sans-serif; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 16px; text-align: center; }
  .hm-title--primary { font-size: 44px; }
  .hm-title--secondary { font-size: 36px; }
  .hm-sub { font-family: 'Nunito Sans', sans-serif; font-size: 18px; line-height: 1.65; max-width: 640px; margin: 0 auto 48px; text-align: center; }
  /* Base .hm-h1 must precede the media queries below — the responsive
     downscale rules have equal specificity and win by order, as in the source. */
  .hm-h1 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 56px; line-height: 1.08; letter-spacing: -0.025em; color: var(--color-true-white); margin: 0 0 50px; max-width: none; }
  @media (max-width: 1095px) { .hm-title--primary { font-size: 36px; } .hm-title--secondary { font-size: 30px; } .hm-h1 { font-size: 48px; } }
  @media (max-width: 950px) { .hm-title--primary { font-size: 30px; } .hm-title--secondary { font-size: 26px; } .hm-h1 { font-size: 40px; } }
  .hm-h1-break { display: none; }
  @media (max-width: 820px) { .hm-h1-break { display: block; } }
  @media (max-width: 360px) { .hm-h1-break { display: none; } }
  @media (max-width: 520px) { .hm-h1 { font-size: 32px; } }
  @media (max-width: 420px) { .hm-h1 { font-size: 28px; } }

  /* ── Hero + trust bar (warm dark zone) ── */
  .hm-zone-hero { background: linear-gradient(to bottom, #5E002F 0%, var(--color-dark-red) 100%); position: relative; overflow: hidden; padding: 88px 0 40px; }
  .hm-zone-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(238, 102, 165, 0.22) 0%, transparent 45%), radial-gradient(circle at 5% 95%, rgba(238, 102, 165, 0.14) 0%, transparent 50%), radial-gradient(circle at 50% 60%, rgba(150, 0, 75, 0.20) 0%, transparent 70%); pointer-events: none; z-index: 0; }
  .hm-zone-hero > * { position: relative; z-index: 3; }
  .hm-zone-hero > .hm-hero-mark { position: absolute; z-index: 1; }
  .hm-zone-hero > .hm-hero-mark-5 { position: absolute; z-index: 2; }
  .hm-zone-hero > .hm-hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(4, 0, 3, 0.92) 100%); pointer-events: none; z-index: 2; }
  .hm-hero-mark { top: -8%; left: -138px; width: 1073px; height: 840px; pointer-events: none; opacity: 0.75; }
  .hm-hero-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.10)); }
  .hm-hero-mark path:nth-child(1) { fill: #790635; }
  .hm-hero-mark path:nth-child(2) { fill: #7C0641; }
  .hm-hero-mark path:nth-child(3) { fill: #74053B; }
  .hm-hero-mark-5 { top: -10%; right: -658px; width: 952px; height: 876px; pointer-events: none; opacity: 0.75; transform: rotate(-96deg); transform-origin: center center; }
  @media (max-width: 900px) { .hm-hero-mark-5 { opacity: 0.20; } }
  @media (max-width: 666px) { .hm-hero-mark-5 { display: none; } }
  .hm-hero { padding-top: 96px; padding-bottom: 120px; }
  .hm-hero-italic { font-weight: 300; font-style: italic; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.60); }
  .hm-title-accent { font-weight: 300; font-style: italic; letter-spacing: -0.015em; color: #E8B84B; }
  .hm-hero__sub { font-family: 'Poppins', sans-serif; font-weight: 400; color: rgba(255, 255, 255, 0.80); max-width: 920px; margin: 0 0 50px; font-size: 17px; line-height: 1.8; }
  .hm-hero__ctas { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
  .hm-hero__ctas .btn-primary { background: linear-gradient(to bottom, var(--color-magenta) 0%, var(--color-dark-red) 100%); color: var(--color-true-white); border: none; height: 52px; padding: 0 32px; border-radius: 999px; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45); }
  .hm-hero__ctas .btn-primary:hover { background: var(--color-magenta); border-color: var(--color-magenta); box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55); }
  .hm-hero__ctas .btn-secondary { background: transparent; color: var(--color-true-white); border-color: rgba(255, 255, 255, 0.45); height: 52px; padding: 0 32px; border-radius: 999px; }
  .hm-hero__ctas .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.70); }
  .hm-trust { padding: 0 0 40px; }
  .hm-trust > .hm-container { padding-top: 18px; background-image: linear-gradient(var(--color-magenta-2), var(--color-magenta-2)); background-size: calc(100% - 48px) 1px; background-position: 24px 0; background-repeat: no-repeat; }
  .hm-trust p { text-align: center; color: var(--color-true-white); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin: 0 0 28px; }
  .hm-logo-grid { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
  .hm-logo-grid img { height: 26px; width: auto; opacity: 0.72; filter: brightness(0) invert(1); transition: opacity 0.2s ease; }
  .hm-logo-grid li:hover img { opacity: 1; }
  @media (max-width: 768px) { .hm-hero { padding-top: 32px; } .hm-logo-grid { gap: 22px 28px; } }

  /* ── Approach (dark editorial) ── */
  .hm-approach { background: linear-gradient(to bottom, #25162C 0%, #671442 100%); position: relative; overflow: hidden; padding: 144px 0 96px; }
  .hm-approach > * { position: relative; z-index: 1; }
  .hm-approach .hm-title { color: var(--color-true-white); text-align: left; font-size: 52px; line-height: 1.1; letter-spacing: -0.02em; }
  @media (max-width: 950px) { .hm-approach .hm-title { font-size: 40px; } }
  @media (max-width: 520px) { .hm-approach .hm-title { font-size: 30px; } }
  .hm-approach .hm-sub { color: rgba(255, 255, 255, 0.78); max-width: none; margin: 20px 0 0; font-family: 'Poppins', sans-serif; font-weight: 400; text-align: left; }
  .hm-approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
  .hm-approach-right { border-left: 1px solid rgba(255,255,255,0.18); padding-left: 64px; }
  @media (max-width: 950px) {
    .hm-approach-grid { grid-template-columns: 1fr; gap: 48px; max-width: 620px; margin-left: auto; margin-right: auto; }
    .hm-approach-right { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 48px; }
    .hm-approach-heading br { display: none; }
  }
  .hm-report-quote { position: relative; margin: 0; padding: 0; text-align: left; overflow: visible; }
  .hm-report-quote blockquote { position: relative; z-index: 1; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 24px; line-height: 1.35; letter-spacing: -0.02em; color: var(--color-grey-1); margin: 0; padding-left: 0; }
  .hm-report-quote blockquote em { color: var(--color-magenta-2); font-style: italic; }
  .hm-report-quote blockquote em .hm-quote-close { color: var(--color-true-white); }
  .hm-report-quote blockquote::before { content: ''; position: absolute; top: -24px; left: -24px; width: 180px; height: 108px; background-image: url('/uploads/icon-quote-mark.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.22; z-index: -1; display: block; }
  .hm-report-quote figcaption { margin-top: 28px; text-align: left; }
  .hm-report-quote cite { font-family: 'Poppins', sans-serif; font-style: normal; color: rgba(255, 255, 255, 0.60); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
  .hm-glance { margin-top: 128px; padding-top: 28px; padding-bottom: 56px; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); }
  .hm-glance-eyebrow { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 32px; text-align: center; }
  .hm-stats { display: flex; align-items: stretch; gap: 0; max-width: none; margin: 0; padding: 0; position: relative; }
  .hm-stats__item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 48px; position: relative; }
  .hm-stats__item:not(:last-child)::after { content: ''; position: absolute; top: 0; bottom: 0; right: -3px; width: 1px; background: rgba(255,255,255,0.15); }
  .hm-stats__item strong { font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 600; color: var(--color-true-white); letter-spacing: -0.03em; line-height: 1; }
  .hm-stats__item strong em { font-style: italic; font-weight: 300; color: var(--color-magenta-2); }
  .hm-stats__item strong .sparkle-mark { width: 28px; height: 28px; }
  .hm-stats__label { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--color-true-white); line-height: 1.3; max-width: none; white-space: nowrap; }
  @media (max-width: 1020px) { .hm-stats__item strong { font-size: 30px; } .hm-stats__label { font-size: 12px; } .hm-stats__item { padding: 0 20px; } .hm-stats__item strong .sparkle-mark { width: 20px; height: 20px; } }
  @media (max-width: 600px) { .hm-stats__item strong { font-size: 17px; } .hm-stats__label { font-size: 9px; } .hm-stats__item strong .sparkle-mark { width: 14px; height: 14px; } }
  @media (max-width: 550px) { .hm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 12px; padding: 30px 18px 8px; } .hm-stats__item:not(:last-child)::after { display: none; } }
  @media (max-width: 775px) { .hm-stats__item strong { font-size: 24px; } .hm-stats__label { font-size: 11px; } .hm-stats__item { padding: 0 14px; } .hm-stats__item strong .sparkle-mark { width: 24px; height: 24px; } }
  @media (max-width: 620px) { .hm-stats__item strong { font-size: 20px; } .hm-stats__label { font-size: 10px; } .hm-stats__item { padding: 0 10px; } .hm-stats__item strong .sparkle-mark { width: 18px; height: 18px; } }

  /* ── The Arc (capability rows) ── */
  .hm-arc { background: linear-gradient(to bottom, #671442 0%, #821540 100%); position: relative; overflow: hidden; padding: 96px 0; }
  .hm-arc > * { position: relative; z-index: 1; }
  .hm-arc .hm-title { color: var(--color-true-white); text-align: left; }
  @media (max-width: 768px) { .hm-arc { padding-top: 64px; padding-bottom: 64px; } }
  .hm-cap-list { max-width: none; margin: 56px 0 0; display: flex; flex-direction: column; gap: 36px; }
  .hm-cap-entry { display: flex; flex-direction: column; gap: 12px; }
  .hm-cap { display: flex; align-items: stretch; min-height: 290px; border: none; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); background: transparent; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
  .hm-cap:hover { transform: translateY(-2px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.50); }
  .hm-cap__main { flex: 0 0 55%; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 36px; min-height: 230px; }
  .hm-cap__main::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 88% 12%, rgba(255,255,255,0.10) 0%, transparent 40%), radial-gradient(circle at 8% 95%, rgba(238,102,165,0.30) 0%, transparent 55%); }
  .hm-cap__main::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; z-index: 0; mix-blend-mode: overlay; }
  .hm-cap__main > * { position: relative; z-index: 1; }
  .hm-cap-entry:nth-child(1) .hm-cap__main { background: linear-gradient(155deg, var(--color-berry-red) 0%, var(--color-dark-red) 70%, #5C002E 100%); }
  .hm-cap-entry:nth-child(2) .hm-cap__main { background: linear-gradient(155deg, #721A32 0%, #360F1A 60%, #4A1520 100%); }
  .hm-cap-entry:nth-child(3) .hm-cap__main { background: linear-gradient(155deg, #1F2A40 0%, var(--color-blue-black) 60%, #060912 100%); }
  .hm-cap-entry:nth-child(3) .hm-cap__main::before { background: radial-gradient(circle at 88% 12%, rgba(238,102,165,0.20) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150,0,75,0.32) 0%, transparent 55%); }
  .hm-cap__body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
  .hm-cap-entry .hm-cap__body::before { position: absolute; bottom: -40px; left: 0; font-family: 'Poppins', sans-serif; font-size: 160px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: rgba(255,255,255,1); opacity: 0.12; pointer-events: none; z-index: -1; user-select: none; }
  .hm-cap-entry:nth-child(1) .hm-cap__body::before { content: '01'; }
  .hm-cap-entry:nth-child(2) .hm-cap__body::before { content: '02'; }
  .hm-cap-entry:nth-child(3) .hm-cap__body::before { content: '03'; }
  .hm-cap__icon { position: absolute; bottom: -24px; right: -24px; width: 240px; height: 240px; opacity: 0.12; pointer-events: none; color: var(--color-true-white); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease; }
  .hm-cap-entry:nth-child(1) .hm-cap__icon { bottom: 8px; right: 8px; width: 180px; height: 180px; }
  .hm-cap-entry:nth-child(3) .hm-cap__icon { width: 280px; height: 280px; bottom: 0px; }
  .hm-cap-entry:nth-child(3) .hm-cap__aside { justify-content: flex-start; }
  .hm-cap__icon img { width: 100%; height: 100%; display: block; }
  .hm-cap:hover .hm-cap__icon { transform: scale(1.06) rotate(-3deg); opacity: 0.2; }
  .hm-cap__title { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; color: var(--color-true-white); margin: 0 0 4px; }
  .hm-cap__desc { font-family: 'Nunito Sans', sans-serif; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.65); margin-top: 0; max-width: 52ch; }
  .hm-cap__aside { flex: 1; display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 44px 40px; background: rgba(255, 255, 255, 0.15); }
  .hm-cap__links-label { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-true-white); margin: 0; }
  .hm-cap__links { display: flex; flex-direction: column; gap: 10px; }
  .hm-cap-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 22px; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 100px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-true-white); background: transparent; box-shadow: none; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
  .hm-cap-link:hover { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); color: var(--color-true-white); transform: translateX(3px); }
  .hm-cap-link svg { width: 12px; height: 12px; flex-shrink: 0; }
  @media (max-width: 880px) { .hm-cap { flex-direction: column; } .hm-cap__main { flex: none; } .hm-cap__aside { padding: 32px 40px; } }
  @media (max-width: 950px) { .hm-cap__title { font-size: 28px; } }
  @media (max-width: 760px) { .hm-cap__main { padding: 32px 26px; } .hm-cap__aside { padding: 28px 26px; } }
  @media (max-width: 520px) { .hm-cap__title { font-size: 22px; } }

  /* ── Ways to build (structured path) ── */
  .hm-offer { background: linear-gradient(to bottom, #821540 0%, #76003B 100%); position: relative; overflow: hidden; padding: 120px 0; }
  .hm-offer > * { position: relative; z-index: 1; }
  .hm-offer .hm-title { color: var(--color-true-white); text-align: left; }
  .hm-offer .hm-sub { color: rgba(255, 255, 255, 0.78); text-align: left; margin: 0 0 48px; font-family: 'Poppins', sans-serif; font-weight: 400; max-width: none; white-space: nowrap; }
  @media (max-width: 880px) { .hm-offer { overflow: visible; } }
  .hm-path { display: grid; grid-template-columns: 1fr 1.4fr; gap: 44px; align-items: center; margin: 56px 0 0; }
  .hm-path__list { display: flex; flex-direction: column; gap: 0; }
  .hm-path__item { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0; overflow: hidden; position: relative; transition: background 0.3s ease; }
  .hm-path__item:first-child { border-top: 1px solid rgba(255,255,255,0.12); }
  .hm-path__item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.35s ease; }
  .hm-path__item.open::before { background: rgba(255,255,255,0.65); }
  .hm-path__item:not(.open):hover { background: rgba(255,255,255,0.05); }
  .hm-path__btn { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 26px 0 26px 16px; display: flex; align-items: center; gap: 20px; font-family: 'Poppins', sans-serif; }
  .hm-path__btn-text { flex: 1; display: flex; flex-direction: column; gap: 5px; }
  .hm-path__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.38); transition: color 0.3s ease; }
  .hm-path__item.open .hm-path__eyebrow { color: #FFD060 !important; }
  .hm-path__title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: rgba(255,255,255,0.75); transition: color 0.3s ease; margin: 0; }
  .hm-path__item:not(.open):hover .hm-path__title, .hm-path__item.open .hm-path__title { color: var(--color-true-white); }
  .hm-path__chevron { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.3s ease, background 0.3s ease; margin-right: 4px; }
  .hm-path__chevron svg { width: 12px; height: 12px; fill: rgba(255,255,255,0.55); transition: transform 0.3s ease, fill 0.3s ease; }
  .hm-path__item.open .hm-path__chevron { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); }
  .hm-path__item.open .hm-path__chevron svg { transform: rotate(180deg); fill: rgba(255,255,255,0.85); }
  .hm-path__item:not(.open):hover .hm-path__chevron { border-color: rgba(255,255,255,0.38); }
  .hm-path__body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
  .hm-path__item.open .hm-path__body { max-height: 320px; }
  .hm-path__body.is-closing { transition: max-height 0.3s ease-in !important; }
  .hm-path__body-inner { padding: 0 0 28px 16px; }
  .hm-path__desc { font-family: 'Nunito Sans', sans-serif; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.58); margin: 0 0 20px; max-width: 48ch; }
  .hm-path__cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--color-true-white); background: transparent; border: 1.5px solid rgba(255,255,255,0.32); border-radius: 999px; padding: 9px 18px; transition: border-color 0.2s, background 0.2s, transform 0.2s; text-decoration: none; }
  .hm-path__cta:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); transform: translateX(3px); }
  .hm-path__cta svg { width: 11px; height: 11px; }
  .hm-path__visual { position: sticky; top: 24px; }
  .hm-path__img-stack { position: relative; width: 100%; aspect-ratio: 900 / 665; }
  .hm-path__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.18; transition: opacity 0.35s ease; color: var(--color-magenta-2); pointer-events: none; }
  .hm-path__placeholder svg { width: 78%; height: auto; display: block; }
  .hm-path__visual.has-active .hm-path__placeholder { opacity: 0; }
  .hm-path__img { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.2,0.8,0.2,1); display: block; }
  .hm-path__img--offset { left: 112px; right: -112px; }
  @media (max-width: 880px) { .hm-path__img--offset { left: 0; right: 0; } }
  .hm-path__img.is-active { opacity: 1; pointer-events: auto; }
  .hm-path__img--photo svg { width: 100%; height: 100%; display: block; }
  @media (max-width: 880px) { .hm-path { grid-template-columns: 1fr; gap: 28px; } .hm-path__visual { position: static; } }

  /* ── Authority (book band) ── */
  .hm-book-band { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); position: relative; overflow: hidden; padding: 112px 0; }
  .hm-book-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 22%, rgba(238, 102, 165, 0.18) 0%, transparent 45%), radial-gradient(circle at 8% 92%, rgba(150, 0, 75, 0.30) 0%, transparent 55%), radial-gradient(ellipse 60% 30% at 50% 50%, rgba(238, 102, 165, 0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; }
  .hm-book-band > * { position: relative; z-index: 1; }
  .hm-book-band .hm-title { color: var(--color-true-white); }
  .hm-book-band .hm-title em { color: var(--color-magenta-2); font-weight: 300; font-style: italic; }
  .hm-authority { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; max-width: 1100px; margin: 0 auto; }
  .hm-authority__copy .hm-title { text-align: left; margin-bottom: 20px; }
  .hm-authority__copy p { font-family: 'Nunito Sans', sans-serif; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.9); margin: 0 0 18px; }
  .hm-authority__copy p strong { color: var(--color-true-white); font-weight: 700; }
  .hm-books { display: flex; justify-content: center; gap: 28px; }
  .hm-books figure { margin: 0; width: 200px; }
  .hm-books img { width: 100%; border-radius: 6px; filter: drop-shadow(0 32px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 60px rgba(238,102,165,0.30)); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1); }
  .hm-books figure:nth-child(2) { margin-top: 40px; }
  .hm-books figure:hover img { transform: translateY(-8px); }
  .hm-books figcaption { font-family: 'Poppins', sans-serif; font-size: 12px; color: rgba(255,255,255,0.7); text-align: center; margin-top: 14px; line-height: 1.4; }
  @media (max-width: 860px) { .hm-authority { grid-template-columns: 1fr; gap: 48px; } .hm-authority__copy .hm-title { text-align: left; } }
  @media (max-width: 768px) { .hm-book-band { padding: 72px 0; } .hm-books { gap: 18px; } .hm-books figure { width: 128px; } .hm-books figure:nth-child(2) { margin-top: 26px; } .hm-authority__copy .hm-title { text-align: center; } .hm-authority__copy p { text-align: left; } }

  /* ── Coaches (light editorial) ── */
  .hm-coaches-zone { background: var(--color-grey-1); position: relative; overflow: hidden; padding: 144px 0; }
  .hm-coaches-zone::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(118, 0, 59, 0.18) 0%, transparent 18%), radial-gradient(ellipse 70% 40% at 50% 32%, rgba(238, 102, 165, 0.10) 0%, transparent 60%), radial-gradient(circle at 92% 14%, rgba(238, 102, 165, 0.22) 0%, transparent 42%), radial-gradient(circle at 6% 75%, rgba(150, 0, 75, 0.16) 0%, transparent 50%), linear-gradient(to bottom, transparent 80%, var(--color-grey-1) 100%); pointer-events: none; z-index: 0; }
  .hm-coaches-zone::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(150, 0, 75, 0.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
  .hm-coaches-zone > * { position: relative; z-index: 1; }
  .hm-coaches-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 40px; align-items: center; max-width: 1120px; margin: 0 auto 64px; }
  .hm-coaches-header__title { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 50px; line-height: 1.12; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0; white-space: nowrap; }
  .hm-coaches-header__title em { font-style: normal; font-weight: 300; }
  .hm-coaches-header__light { font-weight: 300; }
  .hm-coaches-header__divider { width: 1px; align-self: stretch; background: var(--color-grey-2); }
  .hm-coaches-header__sub { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.65; color: var(--color-grey-4); margin: 0; max-width: 600px; }
  @media (max-width: 1100px) { .hm-coaches-header { grid-template-columns: 1fr; gap: 24px; } .hm-coaches-header__divider { display: none; } .hm-coaches-header__title { white-space: normal; } }
  .hm-coaches-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 48px auto 0; }
  .hm-coach-card { background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px -8px rgba(16, 24, 40, 0.12); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease; display: flex; flex-direction: column; }
  .hm-coach-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(150, 0, 75, 0.20); }
  .hm-coach-photo { width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; object-position: top center; background-color: var(--color-grey-1); }
  .hm-coach-info { padding: 18px 18px 20px; }
  .hm-coach-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .hm-coach-info h3 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-blue-black); margin: 0; line-height: 1.25; }
  .hm-coach-title { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--color-berry-red); margin: 4px 0 0; }
  .hm-coach-credential { font-family: 'Nunito Sans', sans-serif; font-size: 12px; color: var(--color-grey-4); margin: 2px 0 0; }
  .hm-coach-bio { font-family: 'Nunito Sans', sans-serif; font-size: 13px; color: var(--color-grey-4); line-height: 1.55; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-grey-2); }
  .hm-coach-linkedin { width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px; background: var(--color-berry-red); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; }
  .hm-coach-linkedin:hover { background: var(--color-dark-red); }
  .hm-coach-linkedin img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
  .hm-coaches-companies { max-width: 1120px; margin: 72px auto 0; text-align: center; border-top: 1px solid var(--color-grey-2); padding-top: 28px; }
  .hm-coaches-companies p { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-grey-3); margin: 0 0 16px; }
  .hm-coaches-companies ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 40px; margin: 0; padding: 0; }
  .hm-coaches-companies li { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--color-grey-4); display: inline-flex; align-items: center; }
  .hm-coaches-companies li img { height: 22px; width: auto; filter: brightness(0); opacity: 0.45; }
  .hm-coaches-companies li img[alt="Anthropic"] { height: 15px; }
  .hm-coaches-companies li img[alt="Kaiser Permanente"] { height: 18px; }
  .hm-coaches-companies li img[alt="Johnson & Johnson"] { height: 26px; }
  .hm-coaches-companies li img[alt="Sam's Club"] { height: 18px; }
  @media (max-width: 900px) { .hm-coaches-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .hm-coaches-grid { grid-template-columns: 1fr; } }

  /* ── Cool band: testimonials + FAQ ── */
  .hm-cool-band { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); position: relative; overflow: hidden; }
  .hm-cool-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 25%, rgba(238, 102, 165, 0.16) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150, 0, 75, 0.28) 0%, transparent 55%); pointer-events: none; z-index: 0; }
  .hm-cool-band > * { position: relative; z-index: 1; }
  .hm-testimonials { padding: 144px 0; }
  .hm-testimonials .hm-title { color: var(--color-true-white); font-size: 36px; margin-bottom: 48px; }
  .hm-tq-list { max-width: 860px; margin: 0 auto; }
  .hm-tq { padding: 44px 0; border-bottom: 1px solid rgba(238, 102, 165, 0.15); display: grid; grid-template-columns: 140px 1fr; gap: 56px; align-items: center; }
  .hm-tq:first-child { border-top: 1px solid rgba(238, 102, 165, 0.15); }
  .hm-tq__person { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; flex-shrink: 0; }
  .hm-tq__avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.14); box-shadow: 0 8px 24px rgba(0,0,0,0.50); }
  .hm-tq__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .hm-tq__name { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-true-white); margin: 0; letter-spacing: -0.01em; }
  .hm-tq__role { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.75); margin: 0; line-height: 1.45; }
  .hm-tq__text { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 400; font-style: italic; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 10px 0 0; letter-spacing: -0.01em; }
  @media (max-width: 720px) { .hm-tq { grid-template-columns: 1fr; gap: 24px; text-align: center; } .hm-tq__person { flex-direction: row; text-align: left; order: 1; } .hm-tq__body { order: 0; text-align: left; } .hm-tq__body .star-rating { justify-content: flex-start; } }
  .hm-monument { position: relative; max-width: 860px; margin: 72px auto 0; padding: 56px 0 0; }
  .hm-monument::before { content: ''; position: absolute; top: 44px; left: -40px; width: 172px; height: 101px; background-image: url('/uploads/icon-quote-mark.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.28; pointer-events: none; z-index: 0; }
  .hm-monument__text { position: relative; z-index: 1; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.7; letter-spacing: -0.01em; color: rgba(255,255,255,0.88); margin: 0; }
  .hm-monument__rule { height: 1px; background: linear-gradient(90deg, var(--color-magenta-2) 0%, rgba(238,102,165,0.25) 55%, transparent 100%); border: none; margin: 40px 0; }
  .hm-monument__attr { display: flex; align-items: center; gap: 20px; }
  .hm-monument__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.18); }
  .hm-monument__logo { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.65; flex-shrink: 0; }
  .hm-monument__sep { width: 1px; height: 34px; background: rgba(255,255,255,0.18); flex-shrink: 0; }
  .hm-monument__name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: var(--color-true-white); line-height: 1.3; }
  .hm-monument__role { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.55); margin-top: 3px; letter-spacing: 0.2px; }
  @media (max-width: 640px) {
    .hm-monument__text { font-size: 18px; }
    .hm-monument__attr { flex-wrap: wrap; gap: 12px 16px; }
    .hm-monument__avatar { width: 56px; height: 56px; }
    .hm-monument__sep { display: none; }
    .hm-monument__logo { height: 26px; max-width: 140px; }
  }
  .hm-faqs { padding: 96px 0; }
  .hm-faqs .hm-title { color: var(--color-true-white); }
  .hm-faq-list { margin: 48px auto 0; max-width: 860px; }
  .hm-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .hm-faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .hm-faq-btn { width: 100%; text-align: left; padding: 28px 0; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: 'Poppins', sans-serif; }
  .hm-faq-btn h3 { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 500; color: var(--color-true-white); line-height: 1.4; letter-spacing: -0.01em; margin: 0; flex: 1; }
  .hm-faq-icon { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px -6px rgba(150, 0, 75, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .hm-faq-icon svg { width: 14px; height: 14px; fill: var(--color-true-white); transition: transform 0.3s ease; flex-shrink: 0; }
  .hm-faq-btn:hover .hm-faq-icon { transform: scale(1.06); }
  .hm-faq-item.open .hm-faq-icon { box-shadow: 0 10px 20px -6px rgba(150, 0, 75, 0.55); }
  .hm-faq-item.open .hm-faq-icon svg { transform: rotate(180deg); }
  .hm-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
  .hm-faq-item.open .hm-faq-answer { max-height: 1200px; }
  .hm-faq-answer p { font-family: 'Nunito Sans', sans-serif; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 1.7; padding-bottom: 28px; margin: 0; max-width: 90ch; }
  @media (max-width: 640px) { .hm-faq-btn h3 { font-size: 17px; } .hm-faq-btn { padding: 22px 0; } }


/* ═══════════════════════════════════════════════════════════════════════════
   Why Product Institute (V1) — wpi-* scoped styles (faithful port of
   why-product-institute-DesignV1.html). Mirrored in puck-config.jsx
   WPI_V1_STYLES for the editor canvas — when you change one, change the
   other. Gold on this page is its own #F2B53B (≠ --color-gold, ≠ home's
   #E8B84B). See claude-work/plan_2026-07-10_why-product-institute.md.
═══════════════════════════════════════════════════════════════════════════ */
  .wpi-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .wpi-container--narrow { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
  .wpi-title { font-family: 'Poppins', sans-serif; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 16px; text-align: center; }
  .wpi-title--primary { font-size: 44px; }
  .wpi-title--secondary { font-size: 36px; }
  .wpi-sub { font-family: 'Nunito Sans', sans-serif; font-size: 18px; line-height: 1.65; max-width: 640px; margin: 0 auto 48px; text-align: center; }
  @media (max-width: 960px) { .wpi-title--primary { font-size: 36px; } .wpi-title--secondary { font-size: 30px; } }
  @media (max-width: 640px) { .wpi-title--primary { font-size: 30px; } .wpi-title--secondary { font-size: 26px; } }
  .wpi-text-gold { color: #F2B53B; }
  .wpi-text-magenta2 { color: var(--color-magenta-2); }
  .wpi-br-md { display: inline; }
  @media (max-width: 640px) { br.wpi-br-md { display: none; } }
  .wpi-br-lg { display: inline; }
  @media (max-width: 960px) { br.wpi-br-lg { display: none; } }

  /* ── Hero + glance (warm dark zone) ── */
  .wpi-zone-hero { background: linear-gradient(to bottom, #5E002F 0%, var(--color-dark-red) 100%); position: relative; overflow: hidden; padding: 88px 0 40px; }
  .wpi-zone-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(238, 102, 165, 0.22) 0%, transparent 45%), radial-gradient(circle at 5% 95%, rgba(238, 102, 165, 0.14) 0%, transparent 50%), radial-gradient(circle at 50% 60%, rgba(150, 0, 75, 0.20) 0%, transparent 70%); pointer-events: none; z-index: 0; }
  .wpi-zone-hero > * { position: relative; z-index: 3; }
  .wpi-zone-hero > .wpi-hero-mark { position: absolute; z-index: 1; }
  .wpi-zone-hero > .wpi-hero-mark-5 { position: absolute; z-index: 2; }
  .wpi-zone-hero > .wpi-hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(4, 0, 3, 0.92) 100%); pointer-events: none; z-index: 2; }
  .wpi-hero-mark { top: -8%; left: -138px; width: 1073px; height: 840px; pointer-events: none; opacity: 0.75; }
  .wpi-hero-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.10)); }
  .wpi-hero-mark path:nth-child(1) { fill: #790635; }
  .wpi-hero-mark path:nth-child(2) { fill: #7C0641; }
  .wpi-hero-mark path:nth-child(3) { fill: #74053B; }
  .wpi-hero-mark-5 { top: -10%; right: -658px; width: 952px; height: 876px; pointer-events: none; opacity: 0.75; transform: rotate(-96deg); transform-origin: center center; }
  @media (max-width: 900px) { .wpi-hero-mark-5 { opacity: 0.20; } }
  @media (max-width: 666px) { .wpi-hero-mark-5 { display: none; } }
  .wpi-hero { padding-top: 96px; padding-bottom: 120px; }
  .wpi-h1 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 56px; line-height: 1.08; letter-spacing: -0.025em; color: var(--color-true-white); margin: 0 0 50px; }
  @media (max-width: 1095px) { .wpi-h1 { font-size: 48px; } }
  @media (max-width: 950px)  { .wpi-h1 { font-size: 40px; } }
  @media (max-width: 520px)  { .wpi-h1 { font-size: 32px; } }
  @media (max-width: 420px)  { .wpi-h1 { font-size: 28px; } }
  .wpi-title-accent { font-weight: 300; font-style: italic; letter-spacing: -0.015em; color: #F2B53B; white-space: nowrap; }
  .wpi-hero__content { text-align: left; max-width: none; margin: 0; }
  .wpi-hero__sub { font-family: 'Poppins', sans-serif; font-weight: 400; color: rgba(255, 255, 255, 0.80); max-width: 720px; margin: 0 0 50px; font-size: 17px; line-height: 1.8; }
  .wpi-hero__ctas { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
  .wpi-hero__ctas .btn-primary { background: linear-gradient(to bottom, var(--color-magenta) 0%, var(--color-dark-red) 100%); color: var(--color-true-white); border: none; height: 52px; padding: 0 32px; border-radius: 999px; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45); }
  .wpi-hero__ctas .btn-primary:hover { background: var(--color-magenta); border-color: var(--color-magenta); box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55); }
  .wpi-hero__ctas .btn-secondary { background: transparent; color: var(--color-true-white); border-color: rgba(255, 255, 255, 0.45); height: 52px; padding: 0 32px; border-radius: 999px; }
  .wpi-hero__ctas .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.70); }
  @media (max-width: 640px) { .wpi-hero { padding-top: 32px; } .wpi-hero__sub { font-size: 15px; } .wpi-hero__ctas { flex-direction: column; align-items: stretch; } }
  .wpi-glance { padding-top: 28px; padding-bottom: 56px; border-top: 1px solid var(--color-magenta-2); }
  .wpi-glance-eyebrow { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 32px; text-align: center; }
  .wpi-stats { display: flex; align-items: stretch; gap: 0; max-width: none; margin: 0; padding: 0; position: relative; }
  .wpi-stats__item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 48px; position: relative; }
  .wpi-stats__item:not(:last-child)::after { content: ''; position: absolute; top: 0; bottom: 0; right: -3px; width: 1px; background: rgba(255,255,255,0.15); }
  .wpi-stats__item strong { font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 600; color: var(--color-true-white); letter-spacing: -0.03em; line-height: 1; }
  .wpi-stats__item strong em { font-style: italic; font-weight: 300; color: var(--color-magenta-2); }
  .wpi-stats__item strong .sparkle-mark { width: 28px; height: 28px; }
  @media (max-width: 1020px) { .wpi-stats__item strong .sparkle-mark { width: 20px; height: 20px; } }
  .wpi-stats__label { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--color-true-white); line-height: 1.3; max-width: none; white-space: nowrap; }
  @media (max-width: 1020px) { .wpi-stats__item strong { font-size: 30px; } .wpi-stats__label { font-size: 12px; } .wpi-stats__item { padding: 0 20px; } }
  @media (max-width: 600px) { .wpi-stats__item strong { font-size: 17px; } .wpi-stats__label { font-size: 9px; } }
  @media (max-width: 550px) { .wpi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 12px; padding: 30px 18px 8px; } .wpi-stats__item:not(:last-child)::after { display: none; } .wpi-stats__label { white-space: normal; } }
  @media (max-width: 775px) { .wpi-stats__item strong { font-size: 24px; } .wpi-stats__label { font-size: 11px; } .wpi-stats__item { padding: 0 14px; } }
  @media (max-width: 620px) { .wpi-stats__item strong { font-size: 20px; } .wpi-stats__label { font-size: 10px; } .wpi-stats__item { padding: 0 10px; } }

  /* ── The Method (dark process diagram) ── */
  .wpi-method { background: linear-gradient(to bottom, #27152A 0%, #630537 100%); position: relative; overflow: hidden; padding: 96px 0 164px; }
  .wpi-method > .wpi-container { position: relative; z-index: 1; }
  .wpi-method .wpi-title { color: var(--color-true-white); text-align: left; }
  .wpi-proc-copy { max-width: 640px; margin: 0 0 48px; }
  .wpi-proc-copy p { font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); margin: 16px 0 0; }
  .wpi-proc-hub { position: relative; }
  .wpi-proc-badge__eyebrow { display: flex; align-items: center; justify-content: flex-start; height: 54px; padding: 0 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.18); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #F2B53B; line-height: 1; margin: 0 0 16px 0; position: relative; }
  .wpi-proc-list { list-style: none; margin: 0; padding: 24px 0 0; position: relative; }
  .wpi-proc-list::before { content: ''; position: absolute; top: -16px; bottom: 24px; left: 32px; width: 1px; background: linear-gradient(to bottom, rgba(242,181,59,0.75) 0%, rgba(242,181,59,0.35) 60%, rgba(242,181,59,0) 100%); }
  .wpi-proc-node { display: block; position: relative; padding: 14px 0 14px 88px; }
  .wpi-proc-num { position: absolute; left: 32px; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.18); color: var(--color-true-white); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; z-index: 2; box-shadow: none; }
  .wpi-proc-num svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }
  .wpi-proc-node--result .wpi-proc-num { background: linear-gradient(135deg, #F2B53B, #C08820); color: var(--color-true-white); box-shadow: 0 0 28px rgba(242,181,59,0.35); }
  .wpi-proc-node--result .wpi-proc-card { background: linear-gradient(140deg, rgba(242, 181, 59, 0.18) 0%, rgba(242, 181, 59, 0.04) 100%); border-color: rgba(242, 181, 59, 0.45); box-shadow: 0 10px 32px rgba(242, 181, 59, 0.16); }
  .wpi-proc-node--result .wpi-proc-card:hover { background: linear-gradient(140deg, rgba(242, 181, 59, 0.26) 0%, rgba(242, 181, 59, 0.08) 100%); border-color: rgba(242, 181, 59, 0.65); }
  .wpi-proc-card { position: relative; background: linear-gradient(140deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; padding: 20px 26px; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; display: grid; grid-template-columns: 128px 1fr; gap: 20px; align-items: center; }
  .wpi-proc-card:hover { transform: translateY(-2px); border-color: rgba(242,181,59,0.4); background: linear-gradient(140deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%); }
  .wpi-proc-card::before { content: ''; position: absolute; top: 50%; left: -34px; width: 34px; height: 1px; background: rgba(242,181,59,0.55); }
  .wpi-proc-card__title { margin: 0; color: var(--color-true-white); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.3; }
  .wpi-proc-card__desc { margin: 0; color: rgba(255,255,255,0.72); font-family: 'Nunito Sans', sans-serif; font-size: 14px; line-height: 1.6; }
  .wpi-proc-chip { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: rgba(242,181,59,0.14); color: #F2B53B; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; }
  @media (min-width: 1000px) { .wpi-method .wpi-container { display: grid; grid-template-columns: minmax(320px, 0.85fr) minmax(440px, 1.15fr); gap: 64px; align-items: start; } .wpi-proc-copy { max-width: none; margin: 0; padding-top: 8px; } }
  @media (max-width: 760px) { .wpi-proc-list::before { left: 22px; } .wpi-proc-num { left: 22px; width: 44px; height: 44px; font-size: 15px; } .wpi-proc-num svg { width: 22px; height: 22px; } .wpi-proc-node { padding: 12px 0 12px 60px; } .wpi-proc-card { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; } .wpi-proc-card::before { left: -16px; width: 16px; } .wpi-proc-card__title { font-size: 17px; } }

  /* ── Featured quote (flat dark-red band, grid monument variant) ── */
  .wpi-ashley { background: var(--color-dark-red); position: relative; overflow: hidden; padding: 112px 0; }
  .wpi-ashley > * { position: relative; z-index: 1; }
  .wpi-monument { position: relative; max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 160px; grid-template-areas: "quote attr" "rule attr"; column-gap: 56px; align-items: start; }
  .wpi-monument::before { content: ''; position: absolute; top: -24px; left: -40px; width: 172px; height: 101px; background-image: url('/uploads/icon-quote-mark.svg'); background-size: contain; background-repeat: no-repeat; opacity: 0.38; pointer-events: none; z-index: 0; }
  .wpi-monument__text { grid-area: quote; position: relative; z-index: 1; font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.7; letter-spacing: -0.01em; color: rgba(255,255,255,0.88); margin: 0; }
  .wpi-monument__text p { margin: 0; }
  .wpi-monument__text p + p { margin-top: 1em; }
  .wpi-monument__rule { grid-area: rule; height: 1px; background: linear-gradient(90deg, var(--color-magenta-2) 0%, rgba(238,102,165,0.25) 55%, transparent 100%); border: none; margin: 32px 0 0; }
  .wpi-monument__attr { grid-area: attr; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 12px; margin-top: -32px; }
  .wpi-monument__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.18); }
  .wpi-monument__logo { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.65; flex-shrink: 0; }
  .wpi-monument__sep { display: none; width: 1px; height: 34px; background: rgba(255,255,255,0.18); flex-shrink: 0; }
  .wpi-monument__name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: var(--color-true-white); line-height: 1.3; }
  .wpi-monument__role { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.55); margin-top: 3px; letter-spacing: 0.2px; }
  @media (max-width: 1000px) { .wpi-monument { display: block; } .wpi-monument__attr { flex-direction: row; align-items: center; text-align: left; gap: 20px; padding-top: 0; margin-top: 0; } .wpi-monument__sep { display: block; } .wpi-monument__rule { margin: 40px 0; } }
  @media (max-width: 640px) { .wpi-monument__text { font-size: 18px; } .wpi-monument::before { left: 0; width: 100px; height: 59px; } .wpi-monument__attr { flex-wrap: wrap; gap: 12px 16px; } .wpi-monument__avatar { width: 56px; height: 56px; } .wpi-monument__sep { display: none; } .wpi-monument__logo { height: 26px; max-width: 140px; } }

  /* ── Ecosystem (berry dark band, masked photo) ── */
  .wpi-eco { background: linear-gradient(to bottom, #680339 0%, #510735 100%); position: relative; overflow: hidden; padding: 96px 0; }
  .wpi-eco > * { position: relative; z-index: 1; }
  .wpi-eco .wpi-title { text-align: left; margin-bottom: 14px; color: var(--color-true-white); }
  .wpi-eco .wpi-sub { text-align: left; margin: 0 0 30px; max-width: none; color: rgba(255,255,255,0.80); }
  .wpi-eco-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: none; margin: 0; }
  .wpi-eco-groups { display: flex; flex-direction: column; gap: 24px; }
  .wpi-eco-group { position: relative; padding-left: 20px; }
  .wpi-eco-group::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--color-berry-red), var(--color-magenta)); }
  .wpi-eco-group h3 { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-true-white); margin: 0 0 6px; }
  .wpi-eco-group p { font-family: 'Nunito Sans', sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.70); margin: 0; }
  .wpi-eco-group p strong { color: var(--color-magenta-2); font-weight: 700; }
  .wpi-eco-photo { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: none; justify-self: end; border-radius: 0; overflow: visible; background: none; border: none; -webkit-mask-image: url('/uploads/organic-mark-8.svg'); mask-image: url('/uploads/organic-mark-8.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; }
  .wpi-eco-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 860px) { .wpi-eco-layout { grid-template-columns: 1fr; gap: 36px; } .wpi-eco-photo { aspect-ratio: 16 / 10; max-width: 520px; margin: 0 auto; width: 100%; } }

  /* ── Outcome book (cool dark) ── */
  .wpi-book { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); position: relative; overflow: hidden; padding: 96px 0 160px; }
  .wpi-book > * { position: relative; z-index: 1; }
  .wpi-book .wpi-title { color: var(--color-true-white); }
  .wpi-book .wpi-sub { font-family: 'Poppins', sans-serif; color: rgba(255,255,255,0.75); max-width: 750px; }
  .wpi-obook { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; max-width: 840px; margin: 48px auto 0; }
  .wpi-obook__cover { display: block; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.30)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .wpi-obook__cover:hover { transform: translateY(-4px); }
  .wpi-obook__cover img { width: 100%; height: auto; border-radius: 4px; display: block; }
  .wpi-obook__info { display: flex; flex-direction: column; gap: 14px; }
  .wpi-obook__quote { font-family: 'Poppins', sans-serif; font-weight: 300; font-style: italic; font-size: 20px; line-height: 1.5; letter-spacing: -0.015em; color: rgba(255,255,255,0.85); margin: 0; }
  .wpi-obook__quote em { color: var(--color-magenta-2); font-weight: 400; }
  .wpi-obook__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 20px; color: var(--color-true-white); margin: 0; }
  .wpi-obook__author { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-magenta-2); margin: 4px 0 0; }
  .wpi-obook__meta { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .wpi-obook__stars { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .wpi-obook__star-icons { display: inline-flex; gap: 2px; }
  .wpi-obook__star-icons svg { width: 15px; height: 15px; fill: var(--color-orange-cat); }
  .wpi-obook__rating { font-family: 'Nunito Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.60); }
  .wpi-obook__rating strong { color: var(--color-true-white); font-weight: 700; }
  .wpi-obook__rating a { color: var(--color-magenta-2); text-decoration: underline; }
  .wpi-obook__copies { display: flex; align-items: center; gap: 6px; font-family: 'Nunito Sans', sans-serif; font-size: 13px; color: rgba(255,255,255,0.60); }
  .wpi-obook__copies strong { color: var(--color-true-white); font-weight: 700; }
  .wpi-obook__copies svg { width: 15px; height: 15px; color: var(--color-magenta-2); flex-shrink: 0; }
  @media (max-width: 640px) { .wpi-obook { grid-template-columns: 1fr; gap: 28px; justify-items: center; max-width: 420px; } .wpi-obook__cover { max-width: 180px; } .wpi-obook__info { align-items: center; text-align: center; } .wpi-obook__stars { justify-content: center; } .wpi-obook__copies { justify-content: center; } }

  /* ── Learning methods (purple dark, glass rows) ── */
  .wpi-lm { background: linear-gradient(155deg, #5C1A55 0%, #3D1040 55%, #2A1235 100%); position: relative; overflow: hidden; padding: 96px 0 160px; }
  .wpi-lm::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 25%, rgba(238,102,165,0.18) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150,0,75,0.22) 0%, transparent 55%); pointer-events: none; z-index: 0; }
  .wpi-lm > * { position: relative; z-index: 1; }
  .wpi-lm .wpi-title { color: var(--color-true-white); text-align: center; }
  .wpi-lm .wpi-sub { font-family: 'Poppins', sans-serif; color: rgba(255,255,255,0.70); max-width: 1000px; text-align: center; margin: 0 auto; }
  .wpi-lm-header { max-width: 920px; margin: 0 auto 56px; text-align: center; }
  .wpi-lm-list { display: flex; flex-direction: column; gap: 40px; max-width: 920px; margin: 0 auto; list-style: none; padding: 0; }
  .wpi-lm-item { display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .wpi-lm-item:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32); }
  .wpi-lm-item img { width: 46%; flex-shrink: 0; aspect-ratio: 3/2; align-self: flex-start; height: auto; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
  .wpi-lm-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 40px; }
  .wpi-lm-item:nth-child(5) img { object-fit: contain; padding: 20px; background: rgba(0,0,0,0.12); }
  @media (max-width: 640px) { .wpi-lm-item { flex-direction: column; } .wpi-lm-item img { width: 100%; height: auto; align-self: auto; } }
  .wpi-lm-title { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -0.015em; color: var(--color-true-white); margin: 0 0 6px; transition: color 0.25s ease; }
  .wpi-lm-desc { font-family: 'Nunito Sans', sans-serif; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.70); margin: 0; transition: color 0.25s ease; }

  /* ── Industries (deep red band: scale bar + sector grid) ── */
  .wpi-ind { background: linear-gradient(to bottom, #5E002F 0%, var(--color-dark-red) 100%); position: relative; overflow: hidden; padding: 48px 0 96px; }
  .wpi-ind::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 65%, var(--color-dark-red) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 25%), linear-gradient(to bottom, rgba(118, 0, 59, 0.18) 0%, transparent 18%), radial-gradient(ellipse 70% 40% at 50% 32%, rgba(238, 102, 165, 0.10) 0%, transparent 60%), radial-gradient(circle at 92% 14%, rgba(238, 102, 165, 0.22) 0%, transparent 42%), radial-gradient(circle at 6% 75%, rgba(150, 0, 75, 0.16) 0%, transparent 50%); pointer-events: none; z-index: 0; }
  .wpi-ind > * { position: relative; z-index: 1; }
  .wpi-ind .wpi-title { color: var(--color-true-white); }
  .wpi-ind .wpi-sub { color: rgba(255,255,255,0.80); font-family: 'Poppins', sans-serif; max-width: 860px; }
  .wpi-stat-band { max-width: 920px; margin: 0 auto 160px; padding-top: 72px; padding-bottom: 0; position: relative; }
  .wpi-stat-band::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100vw - 48px); max-width: 1152px; height: 1px; background: var(--color-berry-red); }
  .wpi-stat-band__eyebrow { position: relative; z-index: 1; text-align: center; margin: 0 0 10px; text-transform: none; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: var(--color-true-white); }
  .wpi-scale-bar { position: relative; z-index: 1; display: flex; max-width: 920px; margin: 0 auto; border-bottom: none; }
  .wpi-scale-bar__item { flex: 1; text-align: center; padding: 30px 12px; position: relative; }
  .wpi-scale-bar__item:not(:last-child)::after { content: ''; position: absolute; top: 24%; bottom: 24%; right: 0; width: 1px; background: rgba(255,255,255,0.2); }
  .wpi-scale-bar__num { font-family: 'Poppins', sans-serif; font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--color-true-white); margin: 0; }
  .wpi-scale-bar__num em { font-style: normal; font-weight: inherit; font-size: 1em; color: var(--color-berry-red); }
  .wpi-scale-bar__logo { display: block; max-height: 22px; max-width: 120px; width: auto; margin: 16px auto 0; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.85; }
  @media (max-width: 720px) { .wpi-scale-bar { flex-wrap: wrap; border-top: none; } .wpi-scale-bar__item { flex: 1 1 50%; padding: 22px 8px; border-top: none; } .wpi-scale-bar__item:not(:last-child)::after { display: none; } .wpi-scale-bar__num { font-size: 28px; } }
  .wpi-sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
  .wpi-sector-card { position: relative; background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 16px; padding: 28px 28px 26px; overflow: hidden; box-shadow: 0 4px 12px -8px rgba(16, 24, 40, 0.12); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
  .wpi-sector-card::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: linear-gradient(90deg, var(--color-berry-red), var(--color-magenta)); border-radius: 0 0 3px 0; opacity: 0.65; transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; }
  .wpi-sector-card:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -16px rgba(150, 0, 75, 0.22); border-color: rgba(238, 102, 165, 0.45); }
  .wpi-sector-card:hover::before { width: 64px; opacity: 1; }
  .wpi-sector-card__icon { width: 32px; height: 32px; color: var(--color-berry-red); margin-bottom: 14px; }
  .wpi-sector-card__icon img { width: 100%; height: 100%; display: block; }
  .wpi-sector-card__name { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0 0 10px; }
  .wpi-sector-card__desc { font-family: 'Nunito Sans', sans-serif; font-size: 14px; line-height: 1.6; color: var(--color-grey-4); margin: 0 0 16px; }
  .wpi-sector-card__logos { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--color-grey-2); }
  .wpi-sector-card__logos img { max-width: 100%; max-height: 22px; width: auto; height: auto; object-fit: contain; filter: brightness(0); opacity: 0.55; transition: opacity 0.25s ease; }
  .wpi-sector-card:hover .wpi-sector-card__logos img { opacity: 0.85; }
  @media (max-width: 920px) { .wpi-sector-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .wpi-sector-grid { grid-template-columns: 1fr; } }
  .wpi-soft-cta-wrap { text-align: center; margin-top: 48px; }
  .wpi-soft-cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--color-true-white); text-decoration: none; border: 1.5px solid rgba(255,255,255,0.70); border-radius: 999px; padding: 12px 28px; transition: border-color 0.2s ease, background 0.2s ease, gap 0.2s ease, color 0.2s ease; }
  .wpi-soft-cta:hover { gap: 12px; color: var(--color-true-white); border-color: var(--color-true-white); background: rgba(255,255,255,0.10); }
  .wpi-soft-cta svg { width: 13px; height: 13px; }

  /* ── Coaches (dark-red → blue-black band, white cards) ── */
  .wpi-coaches { background: linear-gradient(to bottom, var(--color-dark-red) 0%, var(--color-blue-black) 100%); position: relative; overflow: hidden; padding: 112px 0; }
  .wpi-coaches > * { position: relative; z-index: 1; }
  .wpi-coaches .wpi-title { color: var(--color-true-white); }
  .wpi-coaches .wpi-title em { color: #F2B53B; font-weight: 300; }
  .wpi-coaches .wpi-sub { color: var(--color-true-white); font-family: 'Poppins', sans-serif; max-width: none; }
  .wpi-coaches-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 48px auto 0; }
  .wpi-coach-card { background: var(--color-true-white); border: 1px solid var(--color-grey-2); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px -8px rgba(16, 24, 40, 0.12); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease; display: flex; flex-direction: column; }
  .wpi-coach-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(150, 0, 75, 0.20); }
  .wpi-coach-photo { width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; object-position: top center; background-color: var(--color-grey-1); }
  .wpi-coach-info { padding: 18px 18px 20px; }
  .wpi-coach-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .wpi-coach-info h3 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-blue-black); margin: 0; line-height: 1.25; }
  .wpi-coach-title { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--color-berry-red); margin: 4px 0 0; }
  .wpi-coach-credential { font-family: 'Nunito Sans', sans-serif; font-size: 12px; color: var(--color-grey-4); margin: 2px 0 0; }
  .wpi-coach-bio { font-family: 'Nunito Sans', sans-serif; font-size: 13px; color: var(--color-grey-4); line-height: 1.55; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--color-grey-2); }
  .wpi-coach-linkedin { width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px; background: var(--color-berry-red); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; }
  .wpi-coach-linkedin:hover { background: var(--color-dark-red); }
  .wpi-coach-linkedin img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
  @media (max-width: 900px) { .wpi-coaches-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .wpi-coaches-grid { grid-template-columns: 1fr; } }

  /* ── Cool band: outcomes + FAQ + closing form ── */
  .wpi-cool-band { background: linear-gradient(155deg, var(--color-blue-black) 0%, #1A0E1F 55%, #2A0F2F 100%); position: relative; overflow: hidden; padding: 96px 0; }
  .wpi-cool-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 50%, rgba(238, 102, 165, 0.16) 0%, transparent 45%), radial-gradient(circle at 8% 95%, rgba(150, 0, 75, 0.28) 0%, transparent 55%); pointer-events: none; z-index: 0; }
  .wpi-cool-band > * { position: relative; z-index: 1; }
  .wpi-outcomes { padding-bottom: 160px; }
  .wpi-outcomes .wpi-title { color: var(--color-true-white); }
  .wpi-outcomes .wpi-sub { color: rgba(255, 255, 255, 0.9); font-family: 'Poppins', sans-serif; }
  .wpi-tq-list { max-width: 860px; margin: 0 auto; }
  .wpi-tq { padding: 44px 0; border-bottom: 1px solid rgba(238, 102, 165, 0.15); display: grid; grid-template-columns: 140px 1fr; gap: 56px; align-items: center; }
  .wpi-tq:first-child { border-top: 1px solid rgba(238, 102, 165, 0.15); }
  .wpi-tq__person { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; flex-shrink: 0; }
  .wpi-tq__avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.14); box-shadow: 0 8px 24px rgba(0,0,0,0.50); }
  .wpi-tq__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .wpi-tq__name { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-true-white); margin: 0; letter-spacing: -0.01em; }
  .wpi-tq__role { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.75); margin: 0; line-height: 1.45; }
  .wpi-tq__text { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 400; font-style: italic; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 10px 0 0; letter-spacing: -0.01em; }
  @media (max-width: 720px) { .wpi-tq { grid-template-columns: 1fr; gap: 24px; text-align: center; } .wpi-tq__person { flex-direction: row; text-align: left; order: 1; } .wpi-tq__body { order: 0; text-align: left; } .wpi-tq__body .star-rating { justify-content: flex-start; } }
  .wpi-faqs .wpi-title { color: var(--color-true-white); }
  .wpi-faq-list { margin: 48px 0 0; }
  .wpi-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
  .wpi-faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .wpi-faq-btn { width: 100%; text-align: left; padding: 28px 0; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: 'Poppins', sans-serif; }
  .wpi-faq-btn h3 { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 500; color: var(--color-true-white); line-height: 1.4; letter-spacing: -0.01em; margin: 0; }
  .wpi-faq-icon { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--color-berry-red), var(--color-dark-red)); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 12px -6px rgba(150, 0, 75, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .wpi-faq-icon img { width: 14px; height: 14px; filter: brightness(0) invert(1); transition: transform 0.3s ease; }
  .wpi-faq-btn:hover .wpi-faq-icon { transform: scale(1.06); }
  .wpi-faq-item.open .wpi-faq-icon { box-shadow: 0 10px 20px -6px rgba(150, 0, 75, 0.55); }
  .wpi-faq-item.open .wpi-faq-icon img { transform: rotate(180deg); }
  .wpi-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
  .wpi-faq-item.open .wpi-faq-answer { max-height: 1200px; }
  .wpi-faq-answer p { font-family: 'Nunito Sans', sans-serif; font-size: 16px; color: rgba(255, 255, 255, 0.9); line-height: 1.7; padding-bottom: 28px; margin: 0; max-width: 90ch; }
  .wpi-closing { margin-top: 160px; padding-top: 72px; padding-bottom: 100px; position: relative; }
  .wpi-closing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .wpi-closing__title { text-align: left; color: var(--color-true-white); }
  .wpi-closing__sub { text-align: left; margin-left: 0; color: rgba(255, 255, 255, 0.9); }
  .wpi-closing__trust-list { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
  .wpi-closing__trust-item { display: flex; align-items: center; gap: 14px; color: var(--color-true-white); font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; }
  .wpi-closing__individuals { margin-top: 36px; font-family: 'Nunito Sans', sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
  .wpi-closing__ctas { display: flex; gap: 12px; margin-top: 18px; }
  .wpi-closing__ctas .btn-secondary { background: transparent; color: var(--color-true-white); border-color: var(--color-true-white); height: 58px; padding: 0 40px; border-radius: 999px; }
  .wpi-closing__ctas .btn-secondary:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--color-true-white); }
  @media (max-width: 1180px) { .wpi-closing__grid { grid-template-columns: 1fr; gap: 48px; } }
  .wpi-form-box { position: relative; background: var(--color-true-white); border-radius: 20px; padding: 36px 36px 28px; box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.45), 0 0 80px -20px rgba(238, 102, 165, 0.25); border: none; overflow: hidden; }
  .wpi-form-box::before { content: ''; position: absolute; top: 0; left: 0; width: 64px; height: 4px; background: linear-gradient(90deg, var(--color-berry-red), var(--color-magenta)); border-radius: 0 0 4px 0; }
  .wpi-form-box__eyebrow { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--color-berry-red); margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
  .wpi-form-box__eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--color-magenta-2); border-radius: 4px; }
  .wpi-form-box__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.015em; color: var(--color-blue-black); margin: 0 0 4px; }
  .wpi-form-box__sub { font-family: 'Nunito Sans', sans-serif; font-size: 14px; color: var(--color-grey-4); line-height: 1.5; margin: 0 0 22px; }
  .wpi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .wpi-form-group { display: flex; flex-direction: column; gap: 6px; }
  .wpi-form-group--full { grid-column: 1 / -1; }
  .wpi-form-group label { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; color: var(--color-grey-4); text-transform: uppercase; letter-spacing: 1.4px; }
  .wpi-form-group input, .wpi-form-group select { padding: 11px 14px; border: 1.5px solid var(--color-grey-2); border-radius: 8px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; color: var(--color-blue-black); background: var(--color-true-white); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; width: 100%; min-height: 44px; }
  .wpi-form-group input::placeholder { color: var(--color-grey-3); }
  .wpi-form-group input:hover, .wpi-form-group select:hover { border-color: var(--color-grey-3); }
  .wpi-form-group input:focus, .wpi-form-group select:focus { outline: none; border-color: var(--color-magenta); box-shadow: 0 0 0 3px rgba(198, 47, 117, 0.14); }
  .wpi-form-submit { width: 100%; margin-top: 8px; height: 48px; font-size: 15px; gap: 10px; }
  .wpi-form-privacy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; color: var(--color-grey-4); letter-spacing: 0.6px; margin: 12px 0 0; grid-column: 1 / -1; }
  .wpi-form-privacy__check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--color-magenta-2), var(--color-berry-red)); color: var(--color-true-white); font-weight: 700; }
  .wpi-form-privacy__check svg { width: 9px; height: 9px; }
  .wpi-form-recaptcha { grid-column: 1 / -1; font-size: 11px; color: #94a3b8; line-height: 1.4; margin: 4px 0 0; text-align: center; font-family: 'Nunito Sans', sans-serif; }
  .wpi-form-recaptcha a { color: inherit; }
  @media (max-width: 720px) { .wpi-form-grid { grid-template-columns: 1fr; } .wpi-form-group--full { grid-column: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   404 page — error-404 scoped styles (faithful port of 404-vDesign.html,
   middle <main> only; nav/footer are our global partials). Rendered by
   src/views/not-found.ejs on the catch-all's miss path. Background comes
   from the synced .zone-warm-dark; values below are verbatim source spec.
   ═══════════════════════════════════════════════════════════════════════ */
.error-404 {
  min-height: calc(100vh - 68px); /* 68px = .site-nav__inner height (matches the source's fixed header) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px;
}

/* Ghost numeral — decorative type-as-graphic layer */
.error-404__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(280px, 42vw, 560px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  letter-spacing: -0.025em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.error-404__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 560px;
}

/* Hero-tier H1 — 64 / 48 / 36 per VMelissa README tier scale */
.error-404 .h1-header {
  color: var(--color-true-white);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.error-404 .b1-body {
  color: rgba(255, 255, 255, 0.92);
  max-width: 420px;
}

.error-404__ctas {
  margin-top: 8px;
}

.error-404__ctas .btn-icon--left { transform: scaleX(-1); }

/* Pill CTA override — scoped to .error-404__ctas (source: ctas.md pill spec) */
.error-404__ctas .btn-primary {
  background: var(--color-true-white);
  color: var(--color-berry-red);
  border-color: var(--color-true-white);
  height: 58px;
  padding: 0 40px;
  border-radius: 999px;
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.55),
    0 6px 14px -6px rgba(0, 0, 0, 0.35);
}
.error-404__ctas .btn-primary:hover {
  background: var(--color-magenta-2);
  color: var(--color-true-white);
  border-color: var(--color-magenta-2);
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.60),
    0 8px 16px -6px rgba(0, 0, 0, 0.40);
}

/* Responsive — hero H1 tier steps per VMelissa README */
@media (max-width: 960px) {
  .error-404 .h1-header { font-size: 48px; }
}

@media (max-width: 640px) {
  .error-404 .h1-header { font-size: 36px; }
  .error-404__ghost { font-size: clamp(200px, 60vw, 280px); }
}