/*
 * Homepage visual redesign — styles 10a (desktop) and 8a (mobile).
 * Structure, artwork and motion remain owned by index.html and home.js.
 */

/* base.css defaults <html> to a dark bg; while auth-guard.js hides the
   body during its session check, that dark html bg was flashing behind
   it on these now-light pages. */
html:has(body.home-v2) { background: #c8dbf7; overflow-x: hidden; }

/* Horizontal clipping lives on <html> above, not on <body>: overflow-x
   on body (or .dash-body, see dashboard-redesign.css) makes body a CSS
   scroll container, which silently breaks position:sticky for every
   descendant (e.g. the dashboard topbar and the training session bar)
   because body's box auto-grows and never itself produces a scroll
   offset — the real page scroll happens on <html> instead. */
body.home-v2 {
  --v2-bg: #c8dbf7;
  --v2-paper: #ffffff;
  --v2-ink: #1f3a5f;
  --v2-copy: #3a5c87;
  --v2-tab: #476d9b;
  --v2-action: #4a72b0;
  --v2-purple: #5b4a9e;
  --v2-illustration: #8fb0df;
  --v2-soft: #e4eefb;
  --v2-outline: #a9c4ea;
  --v2-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
  color: var(--v2-ink);
  background: var(--v2-bg);
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 500;
}

@media (min-width: 1400px) {
  .home-v2 .nv__center-side--right > .nv__link--start:first-child {
    margin-right: 4px;
  }
}

.home-v2 *,
.home-v2 *::before,
.home-v2 *::after {
  box-sizing: border-box;
  font-family: "Archivo", Arial, sans-serif !important;
}

.home-v2 .home-v2-bg {
  background: var(--v2-bg) !important;
  background-image: none !important;
  filter: none !important;
}

.home-v2 .home-v2-halo,
.home-v2 .h3-page-bg,
.home-v2 .h3-orb,
.home-v2 [data-beam-bloom="true"] { display: none !important; }

.home-v2 .h3-root {
  --green: var(--v2-purple);
  --card-bg: var(--v2-paper);
  --card-border: var(--v2-ink);
  color: var(--v2-ink);
  background: var(--v2-bg);
  font-family: "Archivo", Arial, sans-serif;
}

.home-v2 a,
.home-v2 button { font-family: inherit; }

/* Navigation */
.home-v2 .nv {
  border-bottom: 3px solid var(--v2-ink);
  color: var(--v2-ink);
  background: var(--v2-bg);
  box-shadow: none;
  backdrop-filter: none;
}

.home-v2 .nv__logo,
.home-v2 .nv__link,
.home-v2 .nv__dd-btn,
.home-v2 .nv__profile-btn-name { color: var(--v2-ink); }

.home-v2 .nv__logo {
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.home-v2 .nv__logo-icon { filter: grayscale(1) contrast(1.35); }

.home-v2 .nv__logo-icon--full {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.home-v2 .nv__link,
.home-v2 .nv__dd-btn {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-v2 .nv__link--start,
.home-v2 .nv__profile-btn {
  border: 3px solid var(--v2-ink);
  border-radius: 999px;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 4px 4px 0 var(--v2-ink);
}

.home-v2 .nv__link:hover,
.home-v2 .nv__dd-btn:hover,
.home-v2 .nv__pill--hub:hover,
.home-v2 .nv__dd:hover .nv__pill--hub,
.home-v2 .nv__pill--programs:hover,
.home-v2 .nv__dd:hover .nv__pill--programs,
.home-v2 .nv__pill--learn:hover,
.home-v2 .nv__dd:hover .nv__pill--learn { color: var(--v2-purple) !important; }

.home-v2 .nv__link--start:hover,
.home-v2 .nv__profile-btn:hover,
.home-v2 .nv__dd:hover .nv__pill--profile,
.home-v2 .nv__pill--profile:hover {
  color: #fff !important;
  background-color: var(--v2-action);
  background: var(--v2-action);
  border-color: var(--v2-ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--v2-ink);
}

.home-v2 .nv__link--start:focus-visible,
.home-v2 .nv__profile-btn:focus-visible {
  outline: none;
}

.home-v2 .nv__logo:hover,
.home-v2 .nv__logo:focus-visible {
  color: var(--v2-purple);
  text-shadow: none;
  outline: none;
}

.home-v2 .nv__profile-avatar,
.home-v2 .nv__notif-badge { color: #fff; background: var(--v2-purple); }

.home-v2 .nv__profile-btn:hover .nv__profile-btn-name,
.home-v2 .nv__dd:hover .nv__profile-btn-name { color: #fff; }

.home-v2 .gs__trigger {
  border: 3px solid var(--v2-ink);
  border-radius: 999px;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 4px 4px 0 var(--v2-ink);
}

.home-v2 .gs__trigger kbd {
  border-color: var(--v2-outline);
  color: var(--v2-copy);
  background: var(--v2-soft);
}

.home-v2 .nv__burger span { background: var(--v2-ink); }

.home-v2 .nv__dd-menu,
.home-v2 .nv__hub-menu,
.home-v2 .nv__programs-menu,
.home-v2 .nv__learn-menu,
.home-v2 .nv__dd-menu--profile {
  border: 3px solid var(--v2-ink);
  border-radius: 0;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 6px 6px 0 var(--v2-ink);
}

.home-v2 .nv__menu-link,
.home-v2 .nv__hub-label,
.home-v2 .nv__program-title,
.home-v2 .nv__account-card,
.home-v2 .nvm a,
.home-v2 .nvm button { color: var(--v2-ink); }

.home-v2 .nv__menu-link:hover { color: var(--v2-ink) !important; background: var(--v2-soft); }

.home-v2 .nvm::before { background: rgba(31, 58, 95, .5); backdrop-filter: none; }

/* Dropdown copy still carried the dark-theme grays/limes — rewrite for the paper panels. */
.home-v2 .nv__panels-title { color: var(--v2-copy); }

.home-v2 .nv__notif-markread { color: var(--v2-action); }

.home-v2 .nv__account-card {
  background: var(--v2-soft);
  border-color: var(--v2-outline);
}
.home-v2 .nv__account-card strong { color: var(--v2-ink); }
.home-v2 .nv__account-card span:not(.nv__profile-avatar) { color: var(--v2-copy); }

.home-v2 .nv__account-links a { color: var(--v2-ink); }
.home-v2 .nv__account-links a:hover { color: var(--v2-purple); background: var(--v2-soft); }
.home-v2 .nv__account-links a span { color: var(--v2-purple); }

.home-v2 .nv__profile-dashboard { color: #fff; background: var(--v2-action); }
.home-v2 .nv__profile-dashboard:hover { color: #fff; background: #3a5f98; }
.home-v2 .nv__account-links .nv__profile-dashboard { display: block; margin-bottom: 4px; padding: 9px 10px; border-radius: 999px; color: #fff; background: var(--v2-action); font-size: .8rem; font-weight: 700; text-align: center; }
.home-v2 .nv__account-links .nv__profile-dashboard:hover { color: #fff; background: #3a5f98; }
.home-v2 .nv__profile-signout { color: #a13f2c; background: rgba(211, 115, 93, .12); }
.home-v2 .nv__profile-signout:hover { color: #8c3424; background: rgba(211, 115, 93, .2); }

/* Site footer injected by app-pages.js on every member and info page. */
.home-v2 .site-footer { border-top-color: var(--v2-outline); color: var(--v2-copy); }
.home-v2 .site-footer a { color: var(--v2-action); }
.home-v2 .site-footer a:hover { color: var(--v2-purple); }

/* Hero Hub nav entry with a New sticker, in the style of the Pro and Save 33% tags. */
.home-v2 .nv__new {
  display: inline-block; margin-left: 6px; padding: 2px 5px; transform: rotate(-8deg);
  border: 2px solid var(--v2-ink); border-radius: 5px; color: #fff; background: #e0533d; box-shadow: 2px 2px 0 var(--v2-ink);
  font-size: .55rem; font-weight: 900; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; vertical-align: middle; white-space: nowrap;
}

.home-v2 .nv__notif-empty { color: var(--v2-copy); }
.home-v2 .nv__notif-item:hover { background: var(--v2-soft); }
.home-v2 .nv__notif-item:hover .nv__notif-icon,
.home-v2 .nv__notif-item:focus-visible .nv__notif-icon { color: #fff; }
.home-v2 .nv__notif-item.is-unread { background: var(--v2-soft); }
.home-v2 .nv__notif-title { color: var(--v2-ink); }
.home-v2 .nv__notif-body { color: var(--v2-copy); }
.home-v2 .nv__notif-date { color: var(--v2-copy); }
.home-v2 .nv__notif-dot { background: var(--v2-purple); }

.home-v2 .nv__hub-all-btn {
  color: var(--v2-action);
  border-color: var(--v2-outline);
  background-color: var(--v2-soft);
}
.home-v2 .nv__hub-all-btn:hover {
  color: #fff;
  border-color: var(--v2-action);
  background-color: var(--v2-action);
}

.home-v2 .nv__programs-menu .nv__program-card { border-color: var(--v2-outline); background: var(--v2-soft); }
.home-v2 .nv__programs-menu .nv__program-card:hover { border-color: var(--v2-action); background: var(--v2-soft); }
.home-v2 .nv__programs-menu .nv__program-title { color: var(--v2-ink); text-shadow: none; }
.home-v2 .nv__programs-menu .nv__program-title small { color: var(--v2-ink); text-shadow: none; }
/* Best seller sticker on the Hero Project card: same style as the Hero Hub New sticker, overlapping the card's top edge. */
.home-v2 .nv__programs-menu .nv__program-card--hero-project { overflow: visible; }
.home-v2 .nv__programs-menu .nv__program-card::before { border-radius: inherit; }
.home-v2 .nv__programs-menu .nv__bestseller { position: absolute; top: -9px; left: 12px; z-index: 2; margin: 0; }
.home-v2 .nvm__panel { border-top: 2px solid var(--v2-ink); background: var(--v2-paper); }

/* Mobile navigation — remove the legacy lime palette from nav.css. */
.home-v2 .nvm__link--start {
  color: var(--v2-action) !important;
}

.home-v2 .nvm__link:hover,
.home-v2 .nvm__btn:hover,
.home-v2 .nvm__sublink:hover {
  color: var(--v2-action);
  border-color: var(--v2-outline);
  background: var(--v2-soft);
}

.home-v2 .nvm__link.is-active {
  outline-color: var(--v2-outline);
}

.home-v2 .nvm__sublink.nvm__sublink--green {
  color: var(--v2-action);
  border-color: var(--v2-outline);
  background: var(--v2-soft);
}

/* Account state (nav-account.js): a visitor sees Sign in, a member sees their profile menu. Without the
   script the visitor state shows, so a profile is never displayed to someone who is not signed in. */
html:not([data-account="member"]) .nv__profile-dd,
html:not([data-account="member"]) .nvm__profile-section { display: none !important; }
html[data-account="member"] .nv__signin,
html[data-account="member"] .nvm__signin { display: none !important; }
.home-v2 .nv__signin {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border: 3px solid var(--v2-ink); border-radius: 999px; color: var(--v2-ink); background: var(--v2-paper);
  box-shadow: 4px 4px 0 var(--v2-ink); font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.home-v2 .nv__signin:hover { color: #fff; background-color: var(--v2-action); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--v2-ink); }
.home-v2 .nv__signin:focus-visible, .home-v2 .nvm__signin:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 3px; }
.home-v2 .nvm__panel .nvm__signin {
  display: flex; align-items: center; justify-content: center; padding: 13px 14px;
  border: 0; color: #fff; background: var(--v2-action);
  font-size: 1rem; font-weight: 800; text-decoration: none;
}
.home-v2 .nvm__panel .nvm__signin:hover { color: #fff; background: #3a5f98; }
@media (prefers-reduced-motion: reduce) { .home-v2 .nv__signin { transition: none; } }

.home-v2 .nvm__profile-toggle {
  color: var(--v2-ink);
  border-color: var(--v2-outline);
  background: var(--v2-soft);
}

.home-v2 .nvm__profile-toggle:hover {
  color: #fff;
  border-color: var(--v2-action);
  background: var(--v2-action);
}

.home-v2 .nvm__profile-toggle-name {
  color: var(--v2-ink);
}

.home-v2 .nvm__profile-toggle:hover .nvm__profile-toggle-name {
  color: #fff;
}

.home-v2 .nvm__profile-action-btn:hover {
  color: var(--v2-action);
  border-color: var(--v2-outline);
  background: var(--v2-soft);
}
.home-v2 .nvm .nvm__profile-action-btn--hub,
.home-v2 .nvm .nvm__profile-action-btn--hub:hover { color: #fff; border-color: var(--v2-action); background: var(--v2-action); text-align: center; }
.home-v2 .nvm .nvm__profile-logout { color: #a13f2c; border-color: transparent; background: rgba(211, 115, 93, .12); }
.home-v2 .nvm .nvm__profile-logout:hover { color: #8c3424; border-color: transparent; background: rgba(211, 115, 93, .2); }

/* Type system */
.home-v2 .h3-title-line,
.home-v2 .h3-overlay-title,
.home-v2 .h3-tools-title {
  color: var(--v2-ink);
  font-family: "Archivo", Arial, sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.home-v2 .h3-title-accent,
.home-v2 .h3-green { color: var(--v2-purple); text-shadow: none; }

.home-v2 .h3-eyebrow {
  border: 0;
  border-radius: 0;
  color: var(--v2-copy);
  background: transparent;
  font-family: var(--v2-mono) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1;
  text-transform: uppercase;
}

.home-v2 .h3-hero-desc,
.home-v2 .h3-overlay-desc,
.home-v2 .h3-tools-sub {
  color: var(--v2-copy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

/* Hero — current layout, character and animation stay intact */
.home-v2 .h3-hero {
  max-width: 1440px;
  padding-top: 58px;
  margin-bottom: 52px;
}

.home-v2 .h3-hero-stage { min-height: 650px; }

.home-v2 .h3-title-line {
  font-size: clamp(3.5rem, 5.2vw, 5.7rem);
  line-height: .98;
}

/* The longest hero word (TRANSFORM. is ~6.94em wide) must fit its column, or it widens the column and pushes the character off center. */
.home-v2 .h3-hero-left--title { container-type: inline-size; }
@media (min-width: 901px) {
  .home-v2 .h3-hero-left--title .h3-title-line { font-size: min(clamp(3.5rem, 5.2vw, 5.7rem), 14cqi); }
}

/* Join the Hero Hub, below the tools carousel. */
.home-v2 .h3-hub-cta-wrap { margin-top: 34px; text-align: center; }
.home-v2 .h3-hub-cta {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 15px 30px;
  border: 3px solid var(--v2-ink); border-radius: 999px; color: #fff; background: var(--v2-action);
  box-shadow: 5px 5px 0 var(--v2-ink); font-size: 1.1rem; font-weight: 900; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.home-v2 .h3-hub-cta span { font-size: .85rem; font-weight: 700; opacity: .85; }
.home-v2 .h3-hub-cta:hover { color: #fff; background: #3a5f98; transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--v2-ink); }
.home-v2 .h3-hub-cta:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-hub-cta { transition: none; } }

.home-v2 .h3-hero-desc {
  max-width: 44ch;
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
}

.home-v2 .h3-hero-desc b { font-weight: 800; }

.home-v2 .h3-particles span {
  background: var(--v2-purple);
  box-shadow: none;
}

.home-v2 .h3-hero-center::after,
.home-v2 .h3-hero-center::before { display: none; }

.home-v2 .h3-hero-grid {
  opacity: .62;
  filter: grayscale(1) sepia(1) saturate(2.5) hue-rotate(175deg) contrast(1.1);
}

.home-v2 .h3-hero-char { filter: drop-shadow(6px 6px 0 rgba(31, 58, 95, .18)); }

/* "Let me fix that": a speech bubble by the hero's head. The figure floats as one, so the bubble moves with him. */
.home-v2 .h3-hero-figure { position: relative; z-index: 2; width: 100%; max-width: 200px; animation: h3FloatA 5.5s ease-in-out infinite; }
.home-v2 .h3-hero-figure .h3-hero-char { display: block; max-width: none; animation: none; }
.home-v2 .h3-hero-bubble { position: absolute; left: 47%; top: -7%; width: 62%; height: auto; pointer-events: none; user-select: none; }
@media (max-width: 900px) { .home-v2 .h3-hero-figure { max-width: 190px; } }
@media (max-width: 560px) { .home-v2 .h3-hero-figure { max-width: 140px; } }
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-hero-figure { animation: none; } }

.home-v2 .h3-fcard,
.home-v2 .h3-fcard-1,
.home-v2 .h3-fcard-2 {
  border: 3px solid var(--v2-ink);
  border-radius: 0;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 6px 6px 0 var(--v2-ink);
}

.home-v2 .h3-fcard:hover,
.home-v2 .h3-fcard-1:hover,
.home-v2 .h3-fcard-2:hover {
  border-color: var(--v2-ink);
  background: var(--v2-paper);
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--v2-ink);
}

.home-v2 .h3-fcard-stat {
  color: var(--v2-ink);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.home-v2 .h3-fcard-label {
  color: var(--v2-copy);
  font-family: var(--v2-mono) !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.7;
}

.home-v2 .h3-fcard-top-img,
.home-v2 .h3-fcard-img { filter: grayscale(.3) saturate(.55) hue-rotate(172deg); }

.home-v2 .h3-fcard-discover {
  border: 3px solid var(--v2-ink);
  border-radius: 999px;
  color: #fff;
  background: var(--v2-purple);
  box-shadow: 4px 4px 0 var(--v2-ink);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-v2 .h3-scroll-line { width: 64px; height: 3px; background: var(--v2-ink); }

/* Program showcase */
.home-v2 .h3-overlay-section { width: 100%; padding: 64px 44px; }

.home-v2 .h3-overlay-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px;
}

.home-v2 .h3-overlay-title {
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  line-height: 1.02;
}

.home-v2 .h3-overlay-desc { max-width: 44ch; }
.home-v2 .h3-overlay-features { gap: 12px; }

.home-v2 .h3-overlay-item {
  padding: 14px 16px;
  border: 3px solid var(--v2-ink);
  border-radius: 0;
  color: var(--v2-ink);
  background: var(--v2-paper);
  opacity: 1;
}

.home-v2 .h3-overlay-item.is-active,
.home-v2 .h3-overlay-item:hover {
  border-color: var(--v2-ink);
  color: #fff;
  background: var(--v2-purple);
  box-shadow: 4px 4px 0 var(--v2-ink);
}

.home-v2 .h3-overlay-num {
  color: var(--v2-copy);
  font-family: var(--v2-mono) !important;
  font-size: 15px;
  font-weight: 700;
}

.home-v2 .h3-overlay-item.is-active .h3-overlay-num,
.home-v2 .h3-overlay-item.is-active .h3-overlay-item-title,
.home-v2 .h3-overlay-item.is-active .h3-overlay-item-desc,
.home-v2 .h3-overlay-item:hover .h3-overlay-num,
.home-v2 .h3-overlay-item:hover .h3-overlay-item-title,
.home-v2 .h3-overlay-item:hover .h3-overlay-item-desc { color: #fff; }

.home-v2 .h3-overlay-item-title {
  color: var(--v2-ink);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}

.home-v2 .h3-overlay-item-desc {
  color: var(--v2-copy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.home-v2 .h3-overlay-right {
  border: 3px solid var(--v2-ink);
  border-radius: 0;
  background: var(--v2-illustration);
}

/* Mascot panel: no frame, no tinted backdrop, just the character on the
   page's own background — matches the reference "hands-free" treatment. */
.home-v2 .h3-overlay-right:has(.h3-overlay-img-wrap--program.is-visible) {
  aspect-ratio: 1 / 1;
  border: 0;
  overflow: visible;
  background: transparent;
}

.home-v2 .h3-overlay-program-pattern { display: none; }

/* Achievements step: three trophies float out of sync over a soft aura, frameless like the mascot. */
.home-v2 .h3-overlay-right:has(.h3-overlay-img-wrap--achievements.is-visible) { border: 0; overflow: visible; background: transparent; }
.home-v2 .h3-overlay-img-wrap--achievements { overflow: visible; }
.home-v2 .h3-trophy-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.home-v2 .h3-trophy-rays { position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .7) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 30deg); -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .35) 32%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .35) 32%, transparent 62%); animation: h3TrophyRays 40s linear infinite; }
.home-v2 .h3-trophy-glow { position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1.3; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 222, 140, .6), rgba(255, 200, 110, .2) 55%, rgba(255, 200, 110, 0)); animation: h3TrophyGlow 3.6s ease-in-out infinite; }
.home-v2 .h3-trophy-particles { position: absolute; inset: 0; pointer-events: none; }
.home-v2 .h3-trophy-particles i { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 6px 2px rgba(255, 196, 84, .9), 0 0 14px 4px rgba(255, 214, 130, .45); opacity: 0; animation: h3TrophyParticle var(--t) ease-in-out var(--d) infinite; }
.home-v2 .h3-trophy-particles i.is-cool { background: #fff; box-shadow: 0 0 6px 2px rgba(120, 170, 255, .85), 0 0 14px 4px rgba(160, 200, 255, .5); }
/* Positions mirror the source artwork (1123 × 827); the gold star sits behind the arm, which hides its clipped corner. */
.home-v2 .h3-trophy-set { position: relative; width: 84%; aspect-ratio: 1123 / 827; }
.home-v2 .h3-trophy { position: absolute; height: auto; filter: drop-shadow(0 14px 16px rgba(31, 58, 95, .22)); animation: h3TrophyFloat var(--t, 3.6s) ease-in-out var(--d, 0s) infinite; }
.home-v2 .h3-trophy--gold { z-index: 1; left: 65.6%; top: 1.4%; width: 33%; --t: 4.1s; --d: -2.3s; --amp: -6px; }
.home-v2 .h3-trophy--arm { z-index: 2; left: 16%; top: 5.7%; width: 66.6%; --t: 3.6s; --d: 0s; --amp: -10px; }
.home-v2 .h3-trophy--bronze { z-index: 3; left: 0; top: 16.3%; width: 27%; --t: 3.2s; --d: -1.1s; --amp: -12px; }
/* Follow the system step: three chapter cards float out of sync, frameless like the trophies.
   Each layer shares one canvas (1200 × 711), so stacking them rebuilds the composition. */
.home-v2 .h3-overlay-right:has(.h3-overlay-img-wrap--system.is-visible) { border: 0; overflow: visible; background: transparent; }
.home-v2 .h3-overlay-img-wrap--system { overflow: visible; }
.home-v2 .h3-system-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.home-v2 .h3-system-glow { position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 1.5; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25) 55%, rgba(255, 255, 255, 0)); animation: h3TrophyGlow 4.2s ease-in-out infinite; }
.home-v2 .h3-system-set { position: relative; width: 116%; max-width: none; aspect-ratio: 1200 / 711; }
@media (max-width: 760px) { .home-v2 .h3-system-set { width: 110%; } }
.home-v2 .h3-system-card { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 16px 22px rgba(31, 58, 95, .18)); animation: h3SystemFloat var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
/* Track your progress step: three tilted screens fanned left to right, each floating on its own rhythm.
   The tilt uses the separate rotate property so it stacks with the float animation's transform. */
.home-v2 .h3-system-set--track { width: 112%; aspect-ratio: 2000 / 1039; }
@media (max-width: 760px) { .home-v2 .h3-system-set--track { width: 132%; margin-left: -9%; } }
.home-v2 .h3-system-set--track .h3-system-card { right: auto; bottom: auto; height: auto; }
.home-v2 .h3-track-card--exercise { z-index: 1; left: 10.25%; top: 13%; width: 34.5%; rotate: -6deg; --t: 4.6s; --d: -1.6s; --amp: -7px; }
.home-v2 .h3-track-card--log { z-index: 2; left: 35%; top: 6.5%; width: 29.75%; rotate: 1.5deg; --t: 4.1s; --d: -0.5s; --amp: -10px; }
.home-v2 .h3-track-card--chart { z-index: 3; left: 43.5%; top: 37%; width: 53%; rotate: 4.5deg; --t: 3.5s; --d: -2.4s; --amp: -13px; }
@keyframes h3SystemFloat { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(var(--amp, -10px)) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-system-card, .home-v2 .h3-system-glow { animation: none; } }

/* How does it work, step 03: the three progress screens, each floating on its own rhythm. */
.home-v2 .h3-progress-set { position: relative; width: 112%; aspect-ratio: 1690 / 856; }
.home-v2 .h3-progress-layer { position: absolute; inset: 0; width: 100%; height: 100%; animation: h3ProgressFloat 6s ease-in-out infinite; }
.home-v2 .h3-progress-layer--photos { animation-duration: 5.2s; animation-delay: -1.7s; }
.home-v2 .h3-progress-layer--ratio { animation-duration: 4.6s; animation-delay: -3.1s; }
@keyframes h3ProgressFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 760px) { .home-v2 .h3-progress-set { width: 120%; } }

/* Devices: the member space on a computer and a phone, each floating on its own rhythm. */
.home-v2 .h3-devices { width: min(1180px, calc(100% - 88px)); margin: 40px auto 20px; text-align: center; }
.home-v2 .h3-devices h1,
.home-v2 .h3-devices h2 {
  max-width: 860px; margin: 0 auto; color: var(--v2-ink);
  font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.02; text-transform: uppercase; text-wrap: balance;
}
.home-v2 .h3-devices-copy .h3-hero-desc { max-width: 52ch; margin: 16px auto 0; }
.home-v2 .h3-devices-art { position: relative; max-width: 760px; margin: 36px auto 0; padding-bottom: 32px; }
.home-v2 .h3-devices-art img { display: block; width: 100%; height: auto; }
.home-v2 .h3-devices-monitor { position: relative; z-index: 1; animation: h3DevicesFloat 6s ease-in-out infinite; }
.home-v2 .h3-devices-phone { position: absolute; inset: 0 0 auto; z-index: 2; animation: h3DevicesFloat 4.6s ease-in-out -1.9s infinite; }
.home-v2 .h3-devices-shadow {
  position: absolute; left: 12%; right: 12%; bottom: 4px; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 58, 95, .26), rgba(31, 58, 95, 0));
  animation: h3DevicesShadow 6s ease-in-out infinite;
}
@keyframes h3DevicesFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes h3DevicesShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .65; } }
@media (max-width: 900px) { .home-v2 .h3-devices { width: calc(100% - 32px); } .home-v2 .h3-devices-art { max-width: 100%; } }
/* Create your free Hero Hub step: the same floating computer and phone, frameless like the other steps. */
.home-v2 .h3-devices-art--overlay { width: 112%; max-width: none; margin: 0; }
@media (max-width: 760px) { .home-v2 .h3-devices-art--overlay { width: 104%; } }
/* Find your starting point and Learn & keep improving: frameless scenes whose pieces float out of sync.
   The set keeps a 4:3 canvas inside the panel; the tilt uses the rotate property so it stacks with the float. */
.home-v2 .h3-scene-set { position: relative; height: 100%; max-width: 100%; aspect-ratio: 4 / 3; }
.home-v2 .h3-scene-float { position: absolute; height: auto; filter: drop-shadow(0 14px 18px rgba(31, 58, 95, .22)); animation: h3SystemFloat var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
.home-v2 .h3-start-cover { top: 13%; width: 31%; border-radius: 10px; }
.home-v2 .h3-start-cover--hero { left: 13%; rotate: -8deg; --t: 4.4s; --d: -1.2s; --amp: -8px; }
.home-v2 .h3-start-cover--zero { right: 13%; rotate: 7deg; --t: 3.9s; --d: -2.6s; --amp: -11px; }
.home-v2 .h3-start-captain { z-index: 1; left: 36%; bottom: 0; width: 28%; --t: 3.6s; --d: -.4s; --amp: -6px; }
.home-v2 .h3-learn-captain { z-index: 1; left: 31%; bottom: 0; width: 38%; --t: 4.2s; --d: -1.8s; --amp: -6px; }
.home-v2 .h3-learn-icon { width: 13%; }
.home-v2 .h3-learn-icon--calories { left: 13%; top: 14%; rotate: -10deg; --t: 3.4s; --d: -.6s; --amp: -12px; }
.home-v2 .h3-learn-icon--bodyfat { right: 12%; top: 10%; rotate: 8deg; --t: 3.9s; --d: -2.1s; --amp: -10px; }
.home-v2 .h3-learn-icon--onerm { right: 15%; bottom: 18%; rotate: -6deg; --t: 3.2s; --d: -1.4s; --amp: -13px; }
.home-v2 .h3-learn-icon--exercises { left: 11%; bottom: 22%; width: 15%; rotate: 9deg; --t: 4.6s; --d: -3s; --amp: -9px; }
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-scene-float { animation: none; } }
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-progress-layer, .home-v2 .h3-devices-art img, .home-v2 .h3-devices-shadow { animation: none; } }
@keyframes h3TrophyFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(var(--amp, -10px)) rotate(1.5deg); } }
@keyframes h3TrophyGlow { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@keyframes h3TrophyRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes h3TrophyParticle { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 75% { opacity: .8; } 100% { opacity: 0; transform: translateY(-90px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .home-v2 .h3-trophy, .home-v2 .h3-trophy-glow, .home-v2 .h3-trophy-rays { animation: none; }
  .home-v2 .h3-trophy-particles i { animation: none; opacity: .6; }
}

.home-v2 .h3-overlay-img-wrap--program,
.home-v2 .h3-overlay-program-art {
  overflow: visible;
}

.home-v2 .h3-overlay-program-pushup {
  position: absolute;
  z-index: 1;
  right: -10%;
  bottom: 5%;
  width: 108%;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1);
}

.home-v2 .h3-overlay-program-figure {
  inset: auto auto -4% -3%;
  width: 68%;
  height: 108%;
  z-index: 2;
  filter: none;
  transform: none;
}

@media (min-width: 901px) {
  .home-v2 .h3-overlay-right:has(.h3-overlay-img-wrap--program.is-visible) {
    aspect-ratio: 4 / 3;
  }
  .home-v2 .h3-overlay-program-pushup {
    right: -14%;
    bottom: 6%;
    width: 100%;
  }
  .home-v2 .h3-overlay-program-figure {
    inset: auto auto -12% -7%;
    width: 68%;
    height: 124%;
    transform: none;
  }
  .home-v2 .h3-overlay-right:hover .h3-overlay-program-art {
    transform: none;
    filter: none;
  }
}

/* Tools carousel */
.home-v2 .h3-tools-wrap {
  max-width: 1180px;
  padding-inline: 44px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 70px, #000 calc(100% - 70px), transparent);
}

.home-v2 .h3-tools-title {
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.02;
}

.home-v2 .h3-tools-sub { max-width: 44ch; margin-inline: auto; }

.home-v2 .h3-fan-card,
.home-v2 .h3-fan-card--active,
.home-v2 .h3-fan-card:hover {
  border: 3px solid var(--v2-ink);
  border-radius: 0;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 6px 6px 0 var(--v2-ink);
}

.home-v2 .h3-fan-card { filter: none; }
.home-v2 .h3-fan-card-img { background: var(--v2-illustration); }
.home-v2 .h3-fan-card-img img { filter: grayscale(.3) saturate(.55) hue-rotate(172deg); }

.home-v2 .h3-fan-card-title {
  color: var(--v2-ink);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.home-v2 .h3-fan-arrow { color: var(--v2-ink); }

.home-v2 .h3-slides-dots {
  border: 3px solid var(--v2-ink);
  border-radius: 999px;
  background: var(--v2-paper);
}

.home-v2 .h3-sdot { border-radius: 999px; background: var(--v2-soft); }
.home-v2 .h3-sdot-active { background: var(--v2-purple); box-shadow: none; }

/* Recent content */
.home-v2 .h3-content { max-width: 1180px; padding-inline: 44px; }

/* Route banner */

/* Video and footer */

.home-v2 footer[style] {
  border-top: 3px solid var(--v2-ink) !important;
  color: var(--v2-ink) !important;
  background: var(--v2-bg) !important;
  font-family: var(--v2-mono) !important;
}

.home-v2 footer[style] * { font-family: var(--v2-mono) !important; }

.home-v2 footer[style] a {
  color: var(--v2-ink) !important;
  font-size: 11px;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.home-v2 .scroll-to-top-btn { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(175deg); }

.home-v2 .support-block-btn {
  border: 3px solid var(--v2-ink) !important;
  color: #fff !important;
  background: var(--v2-purple) !important;
  box-shadow: 4px 4px 0 var(--v2-ink) !important;
}

/* App-like mobile adaptation from spec 8a. */
@media (max-width: 900px) {
  .home-v2 .nv {
    border-bottom-width: 2px;
    background: var(--v2-paper);
  }

  .home-v2 .h3-hero {
    padding: 60px 20px 0;
    margin-bottom: 24px;
  }

  .home-v2 .h3-hero-stage { min-height: 0; }

  .home-v2 .h3-title-line,
  .home-v2 .h3-overlay-title,
  .home-v2 .h3-tools-title {
    color: #2e5182;
    font-style: italic;
    letter-spacing: -.02em;
    text-transform: none;
  }

  /* The steps title stays like the other section titles on phones: ink, upright, uppercase. */
  .home-v2 .h3-overlay-title { color: var(--v2-ink); font-style: normal; text-transform: uppercase; }

  .home-v2 .h3-title-line {
    font-size: clamp(2.7rem, 12vw, 4.8rem);
    line-height: 1.05;
  }

  /* The hero title keeps its desktop look on mobile: dark blue, upright capitals. */
  .home-v2 .h3-hero-left--title .h3-title-line {
    color: var(--v2-ink);
    font-size: min(clamp(2.7rem, 12vw, 4.8rem), 14cqi);
    font-style: normal;
    letter-spacing: -.015em;
    line-height: .98;
    text-transform: uppercase;
  }

  .home-v2 .h3-hero-desc {
    color: #3a5c87;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
  }

  .home-v2 .h3-eyebrow {
    color: #3a5c87;
    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 10px;
    letter-spacing: .16em;
  }

  .home-v2 .h3-fcard,
  .home-v2 .h3-fcard-1,
  .home-v2 .h3-fcard-2,
  .home-v2 .h3-overlay-inner,
  .home-v2 .h3-fan-card,
  .home-v2 .h3-fan-card--active,
  .home-v2 .h3-fan-card:hover {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(46, 81, 130, .12);
  }

  .home-v2 .h3-fcard:hover,
  .home-v2 .h3-fcard-1:hover,
  .home-v2 .h3-fcard-2:hover {
    border: 0;
    transform: none;
    box-shadow: 0 6px 18px rgba(46, 81, 130, .16);
  }

  .home-v2 .h3-fcard-stat,
  .home-v2 .h3-fan-card-title {
    font-style: italic;
    text-transform: none;
  }

  .home-v2 .h3-overlay-section,
  .home-v2 .h3-tools-wrap,
  .home-v2 .h3-content { padding-inline: 20px; }

  .home-v2 .h3-overlay-section { padding-block: 36px; }
  .home-v2 .h3-overlay-inner { padding: 20px; }

  .home-v2 .h3-overlay-right { border: 0; border-radius: 16px; }

  .home-v2 .h3-overlay-item {
    border: 0;
    border-radius: 14px;
    background: var(--v2-soft);
  }

  .home-v2 .h3-overlay-item.is-active,
  .home-v2 .h3-overlay-item:hover {
    border: 0;
    background: var(--v2-purple);
    box-shadow: none;
  }

  .home-v2 .h3-fcard-discover {
    border: 0;
    border-radius: 14px;
    box-shadow: none;
  }

}

@media (max-width: 560px) {
  .home-v2 .h3-hero { padding-top: 44px; }
  .home-v2 .h3-title-line { font-size: clamp(2.7rem, 14vw, 4.05rem); }

  .home-v2 .h3-overlay-title { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; }

  .home-v2 .h3-tools-title { font-size: clamp(2rem, 10vw, 3rem); }
  .home-v2 .h3-fcard-label { font-family: "Archivo", Arial, sans-serif !important; font-size: 12px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .h3-fcard,
  .home-v2 .h3-fan-card { transition: none; }
}

/* Feedback refinement pass — keep the original interactions, remove oversized shells. */

/* Images keep their source colours. */
.home-v2 .nv__logo-icon,
.home-v2 .h3-fcard-top-img,
.home-v2 .h3-fcard-img,
.home-v2 .h3-overlay-program-pattern,
.home-v2 .h3-overlay-program-figure,
.home-v2 .h3-fan-card-img img,
.home-v2 .scroll-to-top-btn { filter: none !important; }

/* The hero grid uses the same navy as the headline, without changing its motion. */
.home-v2 .h3-hero-grid {
  opacity: .5;
  filter: brightness(0) saturate(100%) invert(20%) sepia(21%) saturate(1890%) hue-rotate(174deg) brightness(91%) contrast(89%);
  mix-blend-mode: multiply;
}

/* Restore the original vertical drawing animation and recolour it navy. */
.home-v2 .h3-scroll-line {
  display: block;
  width: 1px;
  height: 38px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--v2-ink), transparent);
  animation: h3-scrolldn 1.8s ease-in-out infinite;
}

/* Violet is an accent, never a heading colour. */
.home-v2 .h3-title-line .h3-title-accent,
.home-v2 .h3-overlay-title .h3-title-accent,
.home-v2 .h3-tools-title .h3-title-accent { color: inherit; }
.home-v2 .h3-fcard-stat .h3-green { color: var(--v2-ink); }

/* Descriptions use the same Archivo family as the rest of the site. */
.home-v2 .h3-fcard-label {
  color: var(--v2-copy);
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

/* These are page sections, not giant cards. */
.home-v2 .h3-overlay-inner {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Program steps remain a plain interactive list with muted inactive states. */
.home-v2 .h3-overlay-features { gap: 22px; }

.home-v2 .h3-overlay-item,
.home-v2 .h3-overlay-item.is-active,
.home-v2 .h3-overlay-item:hover {
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  color: var(--v2-ink);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.home-v2 .h3-overlay-item .h3-overlay-num,
.home-v2 .h3-overlay-item .h3-overlay-item-title,
.home-v2 .h3-overlay-item .h3-overlay-item-desc {
  color: #879bb5;
  transition: color .22s ease;
}

.home-v2 .h3-overlay-item.is-active .h3-overlay-item-title,
.home-v2 .h3-overlay-item.is-active .h3-overlay-item-desc,
.home-v2 .h3-overlay-item:hover .h3-overlay-item-title,
.home-v2 .h3-overlay-item:hover .h3-overlay-item-desc { color: var(--v2-ink); }

.home-v2 .h3-overlay-item.is-active .h3-overlay-num,
.home-v2 .h3-overlay-item:hover .h3-overlay-num { color: var(--v2-purple); }

/* Start-here rows use the soft rounded app-card treatment. */

/* The tools fan echoes the central phone surrounded by square cards. */
@media (min-width: 901px) {
  .home-v2 .h3-fan-stage { height: 500px; }

  .home-v2 .h3-fan-card,
  .home-v2 .h3-fan-card:hover {
    width: 300px;
    border: 3px solid var(--v2-ink);
    border-radius: 30px;
    background: var(--v2-paper);
    box-shadow: 4px 4px 0 var(--v2-ink);
  }

  .home-v2 .h3-fan-card--active,
  .home-v2 .h3-fan-card--active:hover {
    width: 268px;
    padding: 10px;
    border-radius: 30px;
    box-shadow: 6px 6px 0 var(--v2-ink);
  }

  .home-v2 .h3-fan-card-img {
    aspect-ratio: 1 / 1;
  }

  .home-v2 .h3-fan-card--active .h3-fan-card-img {
    aspect-ratio: 1 / 1;
    border: 2px solid var(--v2-ink);
    border-radius: 20px;
    background: var(--v2-illustration);
  }
}

/* Buttons are blue; violet stays available for selected badges and highlights. */
.home-v2 .h3-fcard-discover,
.home-v2 .h3-fan-arrow,
.home-v2 .support-block-btn {
  color: #fff !important;
  background: var(--v2-action) !important;
}

.home-v2 .h3-fcard-discover:hover,
.home-v2 .h3-fan-arrow:hover,
.home-v2 .support-block-btn:hover { background: #3a5f98 !important; }

.home-v2 .support-block-btn svg { fill: #fff !important; }

@media (max-width: 900px) {
  .home-v2 .h3-overlay-inner {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-v2 .h3-overlay-item,
  .home-v2 .h3-overlay-item.is-active,
  .home-v2 .h3-overlay-item:hover {
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Keep the complete desktop navigation inside its grid tracks on medium
   desktop widths while preserving the complete Search control. */
@media (min-width: 1400px) and (max-width: 1900px) {
  .home-v2 .nv { gap: 8px; padding-inline: 16px; }
  .home-v2 .nv__start { gap: 10px; }
  .home-v2 .nv__center { min-width: 0; padding-inline: 4px; }
  .home-v2 .nv__center-side { gap: 2px; }
  .home-v2 .nv__nav-gap { width: 18px; }
  .home-v2 .nv__link,
  .home-v2 .nv__dd-btn {
    padding-inline: 8px;
    font-size: .7rem;
    letter-spacing: .055em;
  }
  .home-v2 .nv__right { gap: 6px; }
  .home-v2 .nv__profile-btn {
    max-width: 200px;
    gap: 7px;
    padding: 0 16px 0 10px;
  }
  .home-v2 .nv__profile-btn-name { max-width: 104px; }
  .home-v2 .gs__trigger {
    display: inline-flex;
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 7px;
    padding: 5px 14px;
  }
  .home-v2 .gs__trigger-label,
  .home-v2 .gs__trigger kbd { display: inline-flex; }
  .home-v2 .nv__icon { padding: 6px; }
}

@media (min-width: 1400px) and (max-width: 1550px) {
  .home-v2 .nv__right > .nv__icon { display: none; }
  .home-v2 .nv__profile-btn-name { max-width: 84px; }
}

/* Shared auth/config error panel (auth-guard.js, supabase-client.js) */
.home-v2 .auth-configuration-error {
  border: 0;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 0 6px 18px rgba(46, 81, 130, .16);
}
.home-v2 .auth-configuration-error strong { color: var(--v2-ink); }
.home-v2 .auth-configuration-error span { color: var(--v2-copy); }
.home-v2 .auth-configuration-error a { color: #fff; background: var(--v2-purple); }

/* Shared site-search modal (site-search.js) — injected sitewide */
.home-v2 .site-search {
  border: 1px solid var(--v2-outline);
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 0 30px 80px rgba(31, 58, 95, .28);
}
.home-v2 .site-search::backdrop { background: rgba(31, 58, 95, .45); backdrop-filter: blur(6px); }
.home-v2 .site-search header { border-bottom-color: var(--v2-outline); }
.home-v2 .site-search header svg { color: var(--v2-copy); }
.home-v2 .site-search input { color: var(--v2-ink); }
.home-v2 .site-search input::placeholder { color: var(--v2-copy); }
.home-v2 .site-search header button { color: var(--v2-copy); background: var(--v2-soft); border: 1px solid var(--v2-outline); }
.home-v2 .site-search header button:hover { color: var(--v2-ink); background: var(--v2-outline); }
.home-v2 .site-search__hint { color: var(--v2-copy); }
.home-v2 .site-search__results a { border-color: transparent; }
.home-v2 .site-search__results a:hover,
.home-v2 .site-search__results a:focus-visible { border-color: var(--v2-outline); background: var(--v2-soft); }
.home-v2 .site-search__results strong { color: var(--v2-ink); }
.home-v2 .site-search__results small { color: var(--v2-copy); }
.home-v2 .site-search__results em { color: var(--v2-action); }
.home-v2 .site-search__empty { color: var(--v2-copy); }
.home-v2 .site-search footer { border-top-color: var(--v2-outline); color: var(--v2-copy); }
.home-v2 .site-search footer kbd { color: var(--v2-copy); background: var(--v2-soft); border-color: var(--v2-outline); }

/* Member reviews — continuous right-moving marquee. */
.home-v2 .h3-testimonials {
  position: relative;
  width: 100%;
  margin: 64px 0 0;
  padding: 0 0 20px;
  overflow: hidden;
}

.home-v2 .h3-testimonials.h3-reveal {
  opacity: 1;
  transform: none;
}

.home-v2 .h3-testimonials-intro {
  width: min(1180px, calc(100% - 88px));
  margin: 0 auto 30px;
}

.home-v2 .h3-testimonials-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--v2-copy);
  font-family: var(--v2-mono) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.home-v2 .h3-testimonials-intro h2 {
  max-width: 820px;
  margin: 0;
  color: var(--v2-ink);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-transform: uppercase;
}

.home-v2 .h3-testimonials-intro > p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--v2-copy);
  font-family: var(--v2-mono) !important;
  font-size: 14px;
  line-height: 1.6;
}

.home-v2 .h3-testimonials-marquee {
  width: 100%;
  padding: 8px 0 14px;
  overflow: hidden;
}

.home-v2 .h3-testimonials-track {
  display: flex;
  width: max-content;
  animation: h3TestimonialsRight 52s linear infinite;
  will-change: transform;
}

.home-v2 .h3-testimonials-marquee:hover .h3-testimonials-track,
.home-v2 .h3-testimonials-marquee:focus-within .h3-testimonials-track {
  animation-play-state: paused;
}

.home-v2 .h3-testimonials-group {
  display: flex;
  align-items: stretch;
  gap: 22px;
  margin: 0;
  padding: 0 22px 0 0;
  list-style: none;
}

.home-v2 .h3-testimonials-group > li {
  display: flex;
  width: clamp(280px, 24vw, 340px);
  flex: 0 0 auto;
}

.home-v2 .h3-testimonial-card {
  display: flex;
  width: 100%;
  min-height: 500px;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--v2-ink);
  border-radius: 0;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 5px 5px 0 var(--v2-ink);
}

/* Reviewer first name, between the stars and the quote. */
.home-v2 .h3-testimonial-name { margin: 8px 0 0; color: var(--v2-ink); font-size: .95rem; font-weight: 900; }
.home-v2 .h3-testimonial-copy .h3-testimonial-name + blockquote { margin-top: 4px; }

.home-v2 .h3-testimonial-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-bottom: 3px solid var(--v2-ink);
  object-fit: cover;
  object-position: center 34%;
  background: var(--v2-soft);
}

.home-v2 .h3-testimonials-group > li:nth-child(2) .h3-testimonial-photo,
.home-v2 .h3-testimonials-group > li:nth-child(5) .h3-testimonial-photo {
  object-position: center center;
}

.home-v2 .h3-testimonials-group > li:nth-child(3) .h3-testimonial-photo {
  object-position: center 28%;
}

.home-v2 .h3-testimonials-group > li:nth-child(4) .h3-testimonial-photo {
  object-position: center 22%;
}

.home-v2 .h3-testimonial-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
}

.home-v2 .h3-testimonial-stars {
  margin-bottom: 10px;
  color: var(--v2-ink);
  font-size: 20px;
  letter-spacing: .08em;
  line-height: 1;
}

.home-v2 .h3-testimonial-copy blockquote {
  margin: 0 0 18px;
  color: var(--v2-ink);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}

.home-v2 .h3-testimonial-meta {
  margin: auto 0 0;
  color: var(--v2-copy);
  font-family: var(--v2-mono) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}

@keyframes h3TestimonialsRight {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 700px) {
  .home-v2 .h3-testimonials {
    margin-top: 48px;
    padding-bottom: 14px;
  }

  .home-v2 .h3-testimonials-intro {
    width: calc(100% - 40px);
    margin-bottom: 28px;
  }

  .home-v2 .h3-testimonials-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
  }

  .home-v2 .h3-testimonials-intro h2 {
    font-size: clamp(2.15rem, 10.5vw, 3rem);
    line-height: 1.02;
  }

  .home-v2 .h3-testimonials-intro > p {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.55;
  }

  /* Keep the sales-page review stories moving a little faster on narrow screens. */
  .home-v2 .h3-testimonials-track { animation-duration: 30s; }
  .home-v2 .h3-testimonials-group { gap: 16px; padding-right: 16px; }
  .home-v2 .h3-testimonials-group > li { width: min(78vw, 300px); }
  .home-v2 .h3-testimonial-card { min-height: 470px; box-shadow: 4px 4px 0 var(--v2-ink); }
  .home-v2 .h3-testimonial-copy { padding: 17px 18px 19px; }
  .home-v2 .h3-testimonial-stars { font-size: 19px; }
  .home-v2 .h3-testimonial-copy blockquote { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .h3-testimonials-marquee {
    overflow-x: auto;
    padding-inline: 20px;
    scroll-snap-type: x mandatory;
  }

  .home-v2 .h3-testimonials-track {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .home-v2 .h3-testimonials-group > li { scroll-snap-align: start; }
  .home-v2 .h3-testimonials-group[aria-hidden="true"] { display: none; }
}

/* The second homepage program is a preview, not an interactive destination yet. */

/* Program library — compact header, one clear primary route and one preview. */

/* ── Home programs: a simple product row over a translucent comic star ── */
.home-v2 .h3-programs { position: relative; isolation: isolate; margin: 7rem auto 0; padding: 20px 0 30px; text-align: center; }
.home-v2 .h3-programs-star,
.home-v2 .h3-hero-star {
  position: absolute; top: 52%; left: 50%; z-index: -1;
  width: min(1180px, 150vw); aspect-ratio: 1;
  background: var(--v2-paper);
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 73.5084L118.661 8.17639L117.64 69.9551L162.01 43.3426L128.501 88.915L185.472 89.3285L137.163 103.776L197.5 137.296L123.174 121.437L153.34 159.009L117.64 137.6L118.537 191.824L98.1124 142.831L67.3414 185.926L84.9031 131.902L52.0261 161.564L64.2955 123.305L2.5 140.927L66.4717 104.466L22.6747 83.5598L64.2955 84.2501L25.8883 48.7407L78.589 69.9551L78.043 37.0707L100 73.5084Z' fill='white'/%3E%3C/svg%3E%0A") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 73.5084L118.661 8.17639L117.64 69.9551L162.01 43.3426L128.501 88.915L185.472 89.3285L137.163 103.776L197.5 137.296L123.174 121.437L153.34 159.009L117.64 137.6L118.537 191.824L98.1124 142.831L67.3414 185.926L84.9031 131.902L52.0261 161.564L64.2955 123.305L2.5 140.927L66.4717 104.466L22.6747 83.5598L64.2955 84.2501L25.8883 48.7407L78.589 69.9551L78.043 37.0707L100 73.5084Z' fill='white'/%3E%3C/svg%3E%0A") center / contain no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Same translucent star behind the hero character. The center column stops being its own
   stacking layer so the star (z-index -1) sits behind the headline and cards too. */
.home-v2 .h3-hero-center { z-index: auto; }
.home-v2 .h3-hero-star { top: calc(50% - 95px); z-index: -1; width: min(403px, 92vw); }
@media (max-width: 820px) { .home-v2 .h3-hero-star { top: calc(50% - 72px); } }
.home-v2 .h3-programs-title { margin: 0; color: var(--v2-ink); font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 900; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; }
.home-v2 .h3-programs-subtitle { margin: 18px 0 44px; color: var(--v2-ink); font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
.home-v2 .h3-programs-list { display: flex; justify-content: center; gap: clamp(28px, 5vw, 70px); }
.home-v2 .h3-programs-card { display: grid; justify-items: center; gap: 10px; width: min(360px, 40vw); color: var(--v2-ink); text-decoration: none; }
.home-v2 .h3-programs-frame { display: block; width: 100%; margin: 0 14px 22px 0; overflow: hidden; border: 3px solid var(--v2-ink); border-radius: 8px; box-shadow: 14px 14px 0 var(--v2-ink); transition: transform .18s ease, box-shadow .18s ease; }
.home-v2 .h3-programs-frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.home-v2 .h3-programs-card:hover .h3-programs-frame, .home-v2 .h3-programs-card:focus-visible .h3-programs-frame { transform: translate(4px, 4px); box-shadow: 10px 10px 0 var(--v2-ink); }
.home-v2 .h3-programs-name { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }
.home-v2 .h3-programs-price { font-size: clamp(1.05rem, 1.7vw, 1.35rem); }
/* Program details: the editions under the name, and a Best seller sticker on Hero Project. */
.home-v2 .h3-programs-card { position: relative; }
.home-v2 .h3-programs-meta { margin-top: -4px; color: var(--v2-copy); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-v2 .h3-programs-badge {
  position: absolute; z-index: 2; top: -12px; right: 0; padding: 5px 10px; transform: rotate(6deg);
  border: 2px solid var(--v2-ink); border-radius: 7px; color: var(--v2-ink); background: #ffc94a; box-shadow: 3px 3px 0 var(--v2-ink);
  font-size: .72rem; font-weight: 900; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
}
/* View all programs: a quieter white button under the cards, so the cards stay the main action. */
.home-v2 .h3-programs-more { margin-top: 40px; text-align: center; }
.home-v2 .h3-programs-all {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px;
  border: 3px solid var(--v2-ink); border-radius: 999px; color: var(--v2-ink); background: var(--v2-paper);
  box-shadow: 5px 5px 0 var(--v2-ink); font-size: 1rem; font-weight: 900; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-v2 .h3-programs-all span { transition: transform .15s ease; }
.home-v2 .h3-programs-all:hover { color: var(--v2-ink); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--v2-ink); }
.home-v2 .h3-programs-all:hover span { transform: translateX(3px); }
.home-v2 .h3-programs-all:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-programs-all, .home-v2 .h3-programs-all span { transition: none; } }
@media (max-width: 700px) {
  .home-v2 .h3-programs { margin-top: 4.5rem; }
  .home-v2 .h3-programs-more { margin-top: 18px; }
  /* The row runs edge to edge (past the page padding) so cards slide off the screen instead of being cut short of it;
     the side padding centres the first and last card. */
  .home-v2 .h3-programs-list { justify-content: flex-start; gap: 22px; margin-inline: calc(50% - 50vw); overflow-x: auto; padding: 20px 14vw 18px; scroll-snap-type: x mandatory; scroll-padding-inline: 14vw; scrollbar-width: none; }
  .home-v2 .h3-programs-list::-webkit-scrollbar { display: none; }
  .home-v2 .h3-programs-card { flex: 0 0 72vw; width: 72vw; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-programs-frame { transition: none; } }

/* Tools fan: white rounded cards tilted around a raised violet center card. */
.home-v2 .h3-tools-wrap .h3-fan-stage { height: 360px; overflow: visible; }
.home-v2 .h3-tools-wrap .h3-fan-card,
.home-v2 .h3-tools-wrap .h3-fan-card:hover {
  --lift: 0px;
  width: 226px;
  padding: 14px 14px 18px;
  border: 0;
  border-radius: 22px;
  color: var(--v2-ink);
  background: var(--v2-paper);
  box-shadow: 0 12px 28px rgba(31, 58, 95, .16);
  opacity: 1;
  filter: none;
  overflow: visible;
  transform: translateX(calc(var(--offset) * 236px)) translateY(var(--lift)) rotate(calc(var(--offset) * 3.5deg));
  z-index: calc(10 - var(--abs-offset) * 3);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), scale .25s ease, box-shadow .25s ease, background .2s ease;
}
.home-v2 .h3-tools-wrap .h3-fan-card:hover { box-shadow: 0 16px 32px rgba(31, 58, 95, .22); }
@media (hover: hover) and (pointer: fine) {
  .home-v2 .h3-tools-wrap .h3-fan-card:hover { scale: 1.05; }
}
.home-v2 .h3-tools-wrap .h3-fan-card--active,
.home-v2 .h3-tools-wrap .h3-fan-card--active:hover {
  --lift: -26px;
  width: 246px;
  padding: 14px 14px 20px;
  border: 0;
  border-radius: 22px;
  background: var(--v2-purple);
  box-shadow: 0 18px 36px rgba(63, 51, 128, .32);
}
.home-v2 .h3-tools-wrap .h3-fan-card-img,
.home-v2 .h3-tools-wrap .h3-fan-card--active .h3-fan-card-img {
  aspect-ratio: 1.45;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #7fa8d8;
}
.home-v2 .h3-tools-wrap .h3-fan-card-img img,
.home-v2 .h3-tools-wrap .h3-fan-card--active .h3-fan-card-img img { width: 100%; height: 100%; object-fit: contain; filter: none; transform: none; }
.home-v2 .h3-tools-wrap .h3-fan-card-body { padding: 14px 2px 0; }
.home-v2 .h3-tools-wrap .h3-fan-card-title {
  color: var(--v2-ink);
  font-size: 19px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: none;
}
.home-v2 .h3-tools-wrap .h3-fan-card-desc { margin-top: 6px; color: var(--v2-copy); font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.home-v2 .h3-tools-wrap .h3-fan-card--active .h3-fan-card-title,
.home-v2 .h3-tools-wrap .h3-fan-card--active .h3-fan-card-desc { color: rgba(255, 255, 255, .86); }
.home-v2 .h3-tools-wrap .h3-fan-card:focus-visible { outline: 3px solid var(--v2-action); outline-offset: 4px; }

.home-v2 .h3-tools-wrap .h3-fan-nav { gap: 14px; margin-top: 8px; }
.home-v2 .h3-tools-wrap .h3-fan-arrow {
  width: 40px;
  height: 40px;
  border: 2px solid var(--v2-outline) !important;
  border-radius: 50%;
  color: var(--v2-ink) !important;
  background: var(--v2-paper) !important;
  box-shadow: 0 4px 12px rgba(31, 58, 95, .12);
}
.home-v2 .h3-tools-wrap .h3-fan-arrow:hover { color: #fff !important; border-color: var(--v2-action) !important; background: var(--v2-action) !important; transform: none; }
.home-v2 .h3-tools-wrap .h3-slides-dots { gap: 7px; padding: 0 6px; border: 0; background: transparent; }
.home-v2 .h3-tools-wrap .h3-sdot { width: 7px; height: 7px; border-radius: 999px; background: var(--v2-illustration); }
.home-v2 .h3-tools-wrap .h3-sdot-active { width: 22px; background: var(--v2-purple); }

@media (max-width: 820px) {
  .home-v2 .h3-tools-wrap .h3-fan-card,
  .home-v2 .h3-tools-wrap .h3-fan-card:hover { width: 196px; transform: translateX(calc(var(--offset) * 188px)) translateY(var(--lift)) rotate(calc(var(--offset) * 3.5deg)); }
  .home-v2 .h3-tools-wrap .h3-fan-card--active,
  .home-v2 .h3-tools-wrap .h3-fan-card--active:hover { width: 212px; }
}
@media (max-width: 560px) {
  .home-v2 .h3-tools-wrap .h3-fan-stage { height: 300px; }
  .home-v2 .h3-tools-wrap .h3-fan-card,
  .home-v2 .h3-tools-wrap .h3-fan-card:hover { width: 170px; padding: 11px 11px 15px; transform: translateX(calc(var(--offset) * 158px)) translateY(var(--lift)) rotate(calc(var(--offset) * 4deg)); }
  .home-v2 .h3-tools-wrap .h3-fan-card--active,
  .home-v2 .h3-tools-wrap .h3-fan-card--active:hover { width: 186px; padding: 11px 11px 16px; }
  .home-v2 .h3-tools-wrap .h3-fan-card-title { font-size: 16px; }
  .home-v2 .h3-tools-wrap .h3-fan-card-desc { font-size: 11.5px; }
}

/* ══════════════ Features deck: everything the site offers, one rounded card per part ══════════════ */
.home-v2 .h3-features { width: min(1180px, calc(100% - 88px)); margin: 40px auto 30px; text-align: center; }
.home-v2 .h3-features h2 {
  max-width: 860px; margin: 0 auto; color: var(--v2-ink);
  font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.02; text-transform: uppercase; text-wrap: balance;
}
.home-v2 .h3-features-copy .h3-hero-desc { max-width: 640px; margin: 16px auto 0; text-wrap: balance; }
.home-v2 .h3-deck { margin-top: 34px; }
/* Without JavaScript the cards stay readable as a scrolling row. */
.home-v2 .h3-deck-stage { display: flex; gap: 20px; overflow-x: auto; padding: 6px 12px 22px; scroll-snap-type: x mandatory; }
.home-v2 .h3-feature-card {
  position: relative; display: flex; flex: 0 0 300px; flex-direction: column; gap: 12px; box-sizing: border-box; width: 300px; padding: 16px 16px 20px;
  border: 3px solid var(--v2-ink); border-radius: 26px; color: var(--v2-ink); background: var(--v2-paper);
  box-shadow: 8px 8px 0 var(--v2-ink); text-align: left; scroll-snap-align: center;
}
/* Snap points only serve the scrolling row without JavaScript: left on, they scroll the stacked deck sideways on mobile. */
.home-v2 .h3-deck.is-ready .h3-deck-stage { position: relative; display: block; height: 430px; overflow: visible; padding: 0; scroll-snap-type: none; }
.home-v2 .h3-deck.is-ready .h3-feature-card { scroll-snap-align: none; }
.home-v2 .h3-deck.is-ready .h3-feature-card {
  position: absolute; top: 0; left: 50%; height: 410px; margin-left: -150px; z-index: calc(10 - var(--abs-offset, 0));
  transform: translateX(calc(var(--offset, 0) * (82% - var(--abs-offset, 0) * 12%))) scale(calc((1 - var(--abs-offset, 0) * .12) * var(--zoom, 1)));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
/* A small zoom under the pointer, kept inside the transform so side cards stay in place. */
@media (hover: hover) and (pointer: fine) {
  .home-v2 .h3-deck.is-ready .h3-feature-card:hover { --zoom: 1.04; transition-duration: .3s, .3s; }
}
.home-v2 .h3-deck.is-ready .h3-feature-card:not(.is-active) { cursor: pointer; box-shadow: 6px 6px 0 var(--v2-ink); }
/* Side cards keep their text, faded, so the whole deck reads at a glance. */
.home-v2 .h3-deck.is-ready .h3-feature-card:not(.is-active) :is(.h3-feature-head, .h3-feature-title, .h3-feature-desc) { opacity: .4; }
.home-v2 .h3-deck.is-ready .h3-feature-card :is(.h3-feature-head, .h3-feature-title, .h3-feature-desc) { transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .home-v2 .h3-deck.is-ready .h3-feature-card:not(.is-active):hover :is(.h3-feature-head, .h3-feature-title, .h3-feature-desc) { opacity: .7; }
}
.home-v2 .h3-feature-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--v2-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.home-v2 .h3-feature-head b { color: var(--v2-copy); font-weight: 700; letter-spacing: .08em; }
/* Same New sticker as the Hero Hub menu entry, in the menu's typeface. */
.home-v2 .h3-feature-head .nv__new { margin-left: 8px; font-family: "Archivo", Arial, sans-serif; letter-spacing: .04em; }
.home-v2 .h3-feature-visual {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  border: 2px solid var(--v2-ink); border-radius: 16px; background: var(--v2-illustration);
}
/* Percentage heights need a definite box, so these visuals are positioned inside the frame. */
.home-v2 .h3-feature-reader { position: absolute; bottom: -4%; left: 50%; width: auto; height: 100%; transform: translateX(-50%); }
.home-v2 .h3-feature-figure { width: 112%; max-width: none; height: auto; transform: scaleX(-1) translateY(6%); }
.home-v2 .h3-feature-icons { display: grid; grid-template-columns: repeat(2, 76px); gap: 12px; }
.home-v2 .h3-feature-icons span { display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid var(--v2-ink); border-radius: 18px; background: var(--v2-paper); box-shadow: 3px 3px 0 var(--v2-ink); }
.home-v2 .h3-feature-icons img { width: 52px; height: 52px; object-fit: contain; }
.home-v2 .h3-feature-covers { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.home-v2 .h3-feature-covers img { width: auto; height: 84%; border-radius: 10px; filter: drop-shadow(0 8px 12px rgba(31, 58, 95, .3)); }
.home-v2 .h3-feature-covers img:first-child { transform: rotate(-6deg) translateX(14px); }
.home-v2 .h3-feature-covers img:last-child { position: relative; z-index: 1; transform: rotate(5deg) translateX(-14px); }
.home-v2 .h3-feature-devices { position: relative; display: block; width: 104%; }
.home-v2 .h3-feature-devices img { display: block; width: 100%; height: auto; }
.home-v2 .h3-feature-devices img + img { position: absolute; inset: 0; }
.home-v2 .h3-feature-title { margin: -4px 0 0; color: var(--v2-ink); font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; text-transform: uppercase; }
/* The title link stretches over the whole card, so a click anywhere opens its section. */
.home-v2 .h3-feature-title a { color: inherit; text-decoration: none; transition: color .2s ease; }
.home-v2 .h3-feature-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.home-v2 .h3-feature-card { transition: box-shadow .2s ease; }
.home-v2 .h3-feature-card:not(.is-active), .home-v2 .h3-deck:not(.is-ready) .h3-feature-card { cursor: pointer; }
.home-v2 .h3-feature-card:has(.h3-feature-title a:hover), .home-v2 .h3-deck.is-ready .h3-feature-card.is-active:hover { box-shadow: 11px 11px 0 var(--v2-ink); }
.home-v2 .h3-feature-card:hover .h3-feature-title a { color: var(--v2-action); }
.home-v2 .h3-feature-card:has(.h3-feature-title a:focus-visible) { outline: 3px solid var(--v2-purple); outline-offset: 4px; }
.home-v2 .h3-feature-title a:focus-visible { outline: none; }
.home-v2 .h3-feature-desc { margin: 0; color: var(--v2-copy); font-size: .88rem; line-height: 1.5; }
.home-v2 .h3-deck-nav { display: none; }
.home-v2 .h3-deck.is-ready .h3-deck-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.home-v2 .h3-deck-nav .h3-fan-arrow {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 2px solid var(--v2-outline) !important; border-radius: 50%; color: var(--v2-ink) !important; background: var(--v2-paper) !important; box-shadow: 0 4px 12px rgba(31, 58, 95, .12);
}
.home-v2 .h3-deck-nav .h3-fan-arrow:hover { color: #fff !important; border-color: var(--v2-action) !important; background: var(--v2-action) !important; transform: none; }
.home-v2 .h3-deck-dots { display: flex; align-items: center; gap: 7px; }
.home-v2 .h3-deck-dots .h3-sdot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--v2-illustration); cursor: pointer; transition: width .25s ease; }
.home-v2 .h3-deck-dots .h3-sdot-active { width: 22px; background: var(--v2-purple); }
.home-v2 .h3-hub-cta-wrap--home { margin: 10px 0 30px; }
@media (max-width: 900px) {
  .home-v2 .h3-features { width: calc(100% - 32px); }
  .home-v2 .h3-deck.is-ready .h3-deck-stage { height: 440px; overflow: hidden; overflow: clip; margin-inline: -16px; }
  .home-v2 .h3-deck.is-ready .h3-feature-card { width: 270px; height: 420px; margin-left: -135px; }
  .home-v2 .h3-deck.is-ready .h3-feature-card.is-far { opacity: 0; pointer-events: none; }
  .home-v2 .h3-deck.is-ready .h3-feature-card { transform: translateX(calc(var(--offset, 0) * 78%)) scale(calc((1 - var(--abs-offset, 0) * .12) * var(--zoom, 1))); }
}
@media (prefers-reduced-motion: reduce) {
  .home-v2 .h3-deck.is-ready .h3-feature-card, .home-v2 .h3-deck .h3-feature-card * { transition: none; }
}

/* ══════════════ Not sure where to start: the program quiz ══════════════ */
.home-v2 .h3-quiz-cta {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  max-width: 980px; margin: 70px auto 0; padding: 26px 36px 26px 30px;
  border: 3px solid var(--v2-ink); border-radius: 26px; background: var(--v2-paper); box-shadow: 8px 8px 0 var(--v2-ink);
}
.home-v2 .h3-quiz-cta-figure { width: auto; height: 170px; margin: -40px 0 -26px; }
.home-v2 .h3-quiz-cta-eyebrow { margin: 0; color: var(--v2-purple); font-family: var(--v2-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.home-v2 .h3-quiz-cta h2 { margin: 6px 0 8px; color: var(--v2-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; text-transform: uppercase; }
.home-v2 .h3-quiz-cta-copy > p:last-child { max-width: 48ch; margin: 0; color: var(--v2-copy); font-size: .95rem; line-height: 1.55; }
.home-v2 .h3-quiz-cta-button { white-space: nowrap; }
@media (max-width: 760px) {
  .home-v2 .h3-quiz-cta { grid-template-columns: 1fr; justify-items: center; gap: 14px; margin: 50px 16px 0; padding: 24px 20px; text-align: center; }
  .home-v2 .h3-quiz-cta-figure { height: 150px; margin: 0; }
  .home-v2 .h3-quiz-cta-copy > p:last-child { margin-inline: auto; }
}

/* ══════════════ Latest content: the newest video on the left, the newest articles and the free tools on the right ══════════════ */
.home-v2 .h3-resources {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
  box-sizing: border-box; max-width: 1280px; margin: 80px auto 100px; padding: 0 24px;
}
.home-v2 .h3-resources-main { display: flex; flex-direction: column; gap: 22px; }
.home-v2 .h3-resources-title { margin: 0; color: var(--v2-ink); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.home-v2 .h3-resources-head p { margin: 10px 0 0; color: var(--v2-copy); font-size: 1rem; }
.home-v2 .h3-resources-col { display: flex; flex-direction: column; gap: 12px; }
.home-v2 .h3-resources-col-title { margin: 0; color: var(--v2-copy); font-family: var(--v2-mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
/* Articles and tools share the column height, so the three columns end together. */
.home-v2 :is(.h3-resource-list, .h3-tool-list) { display: grid; flex: 1; grid-auto-rows: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.home-v2 .h3-resource-card {
  position: relative; display: block; overflow: hidden; border: 3px solid var(--v2-ink); border-radius: 22px;
  color: var(--v2-ink); background: var(--v2-paper); box-shadow: 6px 6px 0 var(--v2-ink); text-decoration: none;
}
.home-v2 .h3-resource-video { aspect-ratio: 16 / 9; background: var(--v2-ink); }
.home-v2 .h3-resource-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.home-v2 .h3-resource-caption { display: grid; gap: 4px; padding: 14px 18px 16px; border-top: 3px solid var(--v2-ink); }
.home-v2 .h3-resource-caption strong { font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.home-v2 .h3-resource-kicker { color: var(--v2-purple); font-family: var(--v2-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.home-v2 .h3-resource-more { display: inline-flex; align-items: center; gap: 4px; color: var(--v2-action); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.home-v2 .h3-resource-more:hover { color: var(--v2-purple); }
.home-v2 .h3-resource-card--article { height: 100%; min-height: 180px; box-sizing: border-box; border-radius: 20px; box-shadow: 5px 5px 0 var(--v2-ink); }
/* The covers carry their headline on the left, so the crop keeps that side. */
.home-v2 .h3-resource-card--article img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; transform-origin: left center; transition: transform .35s ease; }
.home-v2 .h3-resource-overlay {
  position: absolute; inset: auto 0 0; display: grid; gap: 4px; padding: 44px 18px 16px;
  background: linear-gradient(0deg, rgba(15, 30, 52, .95) 0%, rgba(15, 30, 52, .8) 52%, rgba(15, 30, 52, 0) 100%);
}
.home-v2 .h3-resource-overlay strong { color: #fff; font-size: 1.15rem; font-weight: 900; line-height: 1.15; }
.home-v2 .h3-resource-overlay .h3-resource-more { color: #dfe8f7; }
.home-v2 .h3-resource-card--article:hover img { transform: scale(1.04); }
.home-v2 .h3-resource-card--article:focus-visible, .home-v2 .h3-tool-row:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 4px; }
/* Free tools: frosted rows like the program stats bar, with small icons and a quiet type label. */
.home-v2 .h3-tool-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; box-sizing: border-box; padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 16px; color: var(--v2-ink); background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-decoration: none; transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.home-v2 .h3-tool-row:hover { color: var(--v2-ink); border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .55); transform: translateY(-2px); }
.home-v2 .h3-tool-row img { width: 32px; height: 32px; object-fit: contain; }
.home-v2 .h3-tool-row strong { display: block; font-size: .95rem; font-weight: 800; line-height: 1.2; }
.home-v2 .h3-tool-type { display: block; margin-top: 4px; color: var(--v2-copy); font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-v2 .h3-resource-chevron { flex: 0 0 auto; }
.home-v2 .h3-tool-row > .h3-resource-chevron { color: var(--v2-ink); opacity: .55; transition: opacity .2s ease, transform .2s ease; }
.home-v2 .h3-tool-row:hover > .h3-resource-chevron { opacity: 1; transform: translateX(2px); }
@media (max-width: 1100px) {
  .home-v2 .h3-resources { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-v2 .h3-resources-main { grid-column: 1 / -1; }
  .home-v2 .h3-resource-list { grid-auto-rows: auto; }
  .home-v2 .h3-resource-card--article { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}
@media (max-width: 720px) {
  .home-v2 .h3-resources { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 60px; padding: 0 16px; }
  .home-v2 .h3-tool-list { grid-auto-rows: auto; }
}
@media (prefers-reduced-motion: reduce) { .home-v2 .h3-tool-row, .home-v2 .h3-resource-card--article img { transition: none; } }