/* Hero Project sales page, version 2: a story-led layout in the site's ink, blue and purple style.
   The myths row, the scrolling reviews, the Hero Hub Pro card and the edition picker reuse the current
   sales page components; this file adds the new sections and keeps every button in the site blue. */
.hp2-body {
  --hp2-shadow: 6px 6px 0 var(--v2-ink);
  --hp2-burst: polygon(50% 0%, 59% 9%, 71% 4%, 75% 16%, 88% 15%, 87% 28%, 98% 34%, 92% 45%, 100% 55%, 90% 62%, 94% 75%, 81% 78%, 79% 91%, 67% 89%, 59% 100%, 50% 92%, 41% 100%, 33% 89%, 21% 91%, 19% 78%, 6% 75%, 10% 62%, 0% 55%, 8% 45%, 2% 34%, 13% 28%, 12% 15%, 25% 16%, 29% 4%, 41% 9%);
}
/* overflow-x: hidden on body makes it a scroll container and breaks position: sticky for the value recap
   devices; clip cuts the overflow the same way without that side effect. */
body.hp2-body { overflow-x: hidden; overflow-x: clip; }
.hp2 { padding-bottom: 80px; }
.hp2 h1, .hp2 h2, .hp2 h3 { text-wrap: balance; }
.hp2 p { text-wrap: pretty; }

/* Shared pieces */
.hp2-section { margin-top: clamp(72px, 9vw, 120px); }
.hp2-heading { max-width: 860px; margin: 0 auto 40px; }
.hp2-heading--center { text-align: center; }
.hp2-heading h2 { margin: 0; color: var(--v2-ink); font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; }
.hp2-heading > p:not(.hp2-pill) { max-width: 62ch; margin: 18px auto 0; color: var(--v2-copy); font-size: 1.05rem; font-weight: 500; line-height: 1.55; }
.hp2-pill {
  display: inline-block; margin: 0 0 18px; padding: 8px 16px;
  border: 2px solid var(--v2-ink); border-radius: 999px; color: var(--v2-ink); background: var(--v2-paper);
  box-shadow: 3px 3px 0 var(--v2-ink); font-size: .78rem; font-weight: 850; letter-spacing: .02em;
}
/* Same blue button as the rest of the site (home, Hero Hub). */
.hp2-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 32px;
  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.12rem; font-weight: 900; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hp2-cta:hover { color: #fff; background: #3a5f98; transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--v2-ink); }
/* Filled buttons use the shared sunburst hover (button-rays.css). The buy bar button lights up when the bar
   itself is hovered. */
.hp2-sticky:hover .btn-rays::before, .hp2-sticky:hover .btn-rays::after, .hp2-sticky:focus-visible .btn-rays::before, .hp2-sticky:focus-visible .btn-rays::after { opacity: 1; }
.hp2-sticky:hover .btn-rays { text-shadow: 0 1px 3px rgba(20, 38, 64, .55); }
.hp2-sticky:hover .btn-rays::after, .hp2-sticky:focus-visible .btn-rays::after { animation: btnRaysGlow 3.4s ease-in-out infinite; }
.hp2-cta:focus-visible, .hp2-sticky:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 4px; }
.hp2-icon {
  display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px;
  border: 2px solid var(--v2-ink); border-radius: 16px; color: #fff; background: var(--v2-purple); box-shadow: 3px 3px 0 var(--v2-ink);
}
.hp2-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 1. Hero: no panel, everything centered in reading order. */
.hp2-hero { display: flex; flex-direction: column; align-items: center; max-width: 920px; margin: 0 auto; padding-top: clamp(8px, 2vw, 24px); text-align: center; }
.hp2-hero h1 { margin: 0; color: var(--v2-ink); font-size: clamp(2.7rem, 6.6vw, 5.6rem); font-weight: 900; line-height: .92; letter-spacing: -.055em; }
.hp2-hero h1 span { color: #fff; font-style: italic; -webkit-text-stroke: 2px var(--v2-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--v2-ink); }
.hp2-hero__lead { max-width: 46ch; margin: 20px 0 0; color: var(--v2-copy); font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 500; line-height: 1.5; }
/* Program facts: the program pages' translucent bar, centered under the promise. */
.home-v2 .hp2-program-bar { justify-content: center; margin-top: 22px; }
.home-v2 .hp2-program-bar span { text-align: left; }
.hp2-hero__proof { width: min(640px, 100%); margin: 34px 0 0; }
.hp2-hero__proof figcaption { margin: 0 0 16px; color: var(--v2-ink); font-size: clamp(1.1rem, 2vw, 1.4rem); font-style: italic; font-weight: 900; }
.hp2-before-after { display: flex; justify-content: center; align-items: flex-start; padding: 0 8px 18px; }
.hp2-before-after > div { position: relative; width: 54%; flex: none; overflow: hidden; border: 3px solid var(--v2-ink); border-radius: 24px; background: var(--v2-paper); box-shadow: 5px 5px 0 var(--v2-ink); }
.hp2-before-after > div:first-child { z-index: 0; margin-right: -8%; transform: rotate(-4deg); }
.hp2-before-after > div:last-child { z-index: 1; margin-top: 28px; transform: rotate(3deg); }
.hp2-before-after img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.hp2-before-after span {
  position: absolute; right: 12px; top: 12px; padding: 6px 14px;
  border: 2px solid var(--v2-ink); border-radius: 999px; color: var(--v2-ink); background: var(--v2-paper);
  font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
}
.hp2-before-after > div:last-child span { color: #fff; background: var(--v2-purple); }
.hp2-hero__actions { display: grid; justify-items: center; align-self: stretch; margin-top: 26px; }
.hp2-hero__meta { margin: 14px 0 0; color: var(--v2-copy); font-size: .82rem; font-weight: 700; }
/* The proof numbers use the program pages' translucent facts bar. */
/* The proof numbers sit directly on the page: no frame, bigger figures, thin dividers. */
.home-v2 .hp2-stats { justify-content: center; margin-top: 34px; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home-v2 .hp2-stats li { padding: 4px 30px; }
.home-v2 .hp2-stats li + li::before { top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: rgba(31, 58, 95, .16); }
.home-v2 .hp2-stats span { gap: 6px; text-align: center; }
.home-v2 .hp2-stats b { font-size: 1.65rem; font-weight: 900; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.home-v2 .hp2-stats small { font-size: .62rem; letter-spacing: .12em; }

/* 2. Myths: the current sales page's icon row. */
.hp2-myths .hero-mythbust-grid { display: grid; margin: 0; }

/* 3. Results: the scrolling reviews keep their own styles. */
.hp2-results .hero-review-stories-wrap { margin: 0; }

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

/* 4. Method timeline */
.hp2-method__steps { position: relative; display: grid; gap: 64px; margin: 0; padding: 0; list-style: none; }
.hp2-method__steps::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--v2-purple); }
.hp2-method__steps li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); align-items: center; }
.hp2-method__visual { position: relative; grid-column: 1; margin: 0 0 18px; }
.hp2-method__visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 3px solid var(--v2-ink); border-radius: 24px; box-shadow: 5px 5px 0 var(--v2-ink); }
.hp2-method__num {
  grid-column: 2; justify-self: center; display: grid; place-items: center; width: 58px; height: 58px; z-index: 1;
  border: 3px solid var(--v2-ink); border-radius: 18px; color: #fff; background: var(--v2-ink);
  box-shadow: 0 0 0 7px var(--v2-bg), 0 0 0 10px var(--v2-purple); font-size: 1.15rem; font-weight: 900;
}
.hp2-method__copy { grid-column: 3; }
.hp2-method__copy h3 { margin: 0; color: var(--v2-ink); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.hp2-method__copy p { margin: 14px 0 0; color: var(--v2-copy); font-size: 1rem; font-weight: 500; line-height: 1.6; }
.hp2-method__steps li:nth-child(even) .hp2-method__visual { grid-column: 3; grid-row: 1; }
.hp2-method__steps li:nth-child(even) .hp2-method__copy { grid-column: 1; grid-row: 1; }
.hp2-method__steps li:nth-child(even) .hp2-method__num { grid-row: 1; }
.hp2-ui-card {
  position: absolute; right: -14px; bottom: -18px; display: grid; gap: 2px; min-width: 190px; padding: 14px 16px;
  border: 2px solid var(--v2-ink); border-radius: 18px; background: var(--v2-paper); box-shadow: 4px 4px 0 var(--v2-ink);
}
.hp2-method__steps li:nth-child(even) .hp2-ui-card { right: auto; left: -14px; }
.hp2-ui-card small { color: var(--v2-copy); font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hp2-ui-card strong { color: var(--v2-ink); font-size: .95rem; font-style: italic; font-weight: 900; }
.hp2-ui-card b { margin-top: 2px; color: var(--v2-ink); font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.hp2-ui-card em { color: var(--v2-purple); font-size: .76rem; font-style: normal; font-weight: 800; }

/* What an aesthetic physique is: the Captain alone on the page, four markers lit one by one. Markers are placed
   in the figure's own coordinates (--fx, --fy), so the stage can change shape: 508 x 446 on desktop like the
   reference, taller on phones so the figure is larger. Labels scale with the stage width. */
.hp2-anatomy {
  --ar: 1.139; --fh: .935; --ft: .0325; --fw: calc(var(--fh) * .4267 / var(--ar));
  container-type: inline-size; position: relative; width: min(508px, 100% - 24px); aspect-ratio: var(--ar); margin: 0 auto;
}
.hp2-anatomy { isolation: isolate; }
/* The home hero's translucent comic star behind the Captain, a third wider than the figure is tall and centered
   on the upper chest, never wider than the screen. It reuses the home star shape (.h3-programs-star). */
.home-v2 .hp2-anatomy__star { top: calc((var(--ft) + .32 * var(--fh)) * 100%); width: min(calc(var(--fh) * 1.35 * 100cqw / var(--ar)), 96vw); }
.hp2-anatomy__figure { position: absolute; top: calc(var(--ft) * 100%); left: 50%; width: auto; height: calc(var(--fh) * 100%); max-width: none; transform: translateX(-50%); }
.hp2-anatomy__markers { margin: 0; padding: 0; list-style: none; }
.hp2-anatomy__marker { --dx: calc(50% + (var(--fx) - .5) * var(--fw) * 100%); --dy: calc((var(--ft) + var(--fy) * var(--fh)) * 100%); cursor: default; }
.hp2-anatomy__marker:focus { outline: none; }
.hp2-anatomy__line { position: absolute; top: var(--dy); height: 1.5px; background: rgba(31, 58, 95, .35); transform: translateY(-50%); transition: background .3s ease, height .3s ease; }
.hp2-anatomy__marker.is-left .hp2-anatomy__line { left: 0; width: var(--dx); }
.hp2-anatomy__marker.is-right .hp2-anatomy__line { left: var(--dx); right: 0; }
.hp2-anatomy__marker.is-active .hp2-anatomy__line { height: 2.5px; background: var(--v2-ink); }
.hp2-anatomy__dot {
  position: absolute; left: var(--dx); top: var(--dy); z-index: 1; width: 2.4cqw; height: 2.4cqw; min-width: 8px; min-height: 8px;
  border: 2px solid #fff; border-radius: 50%; background: var(--v2-purple); transform: translate(-50%, -50%);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hp2-anatomy__marker.is-active .hp2-anatomy__dot { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 0 5px rgba(91, 74, 158, .3), 0 0 18px 6px rgba(91, 74, 158, .45); }
.hp2-anatomy__label {
  position: absolute; top: var(--dy); z-index: 2; max-width: 35%; padding: .31em .76em;
  border: 3px solid var(--v2-ink); border-radius: 8px; color: #fff; background: var(--v2-ink);
  font-size: 2.9cqw; font-weight: 800; line-height: 1.2; transform: translateY(-50%);
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}
/* One line per label like the reference; only the longest one wraps. */
.hp2-anatomy__marker:not([data-anatomy-label="3"]) .hp2-anatomy__label { max-width: none; white-space: nowrap; }
.hp2-anatomy__marker.is-left .hp2-anatomy__label { left: 0; }
.hp2-anatomy__marker.is-right .hp2-anatomy__label { right: 0; }
.hp2-anatomy__label small { display: block; margin: .15em 0 0 1em; font-size: .78em; font-weight: 700; opacity: .8; }
.hp2-anatomy__marker.is-active .hp2-anatomy__label { color: var(--v2-ink); background: #fff; box-shadow: 3px 3px 0 var(--v2-purple); }
.hp2-anatomy__marker:focus-visible .hp2-anatomy__label { outline: 3px solid var(--v2-purple); outline-offset: 3px; }
@media (max-width: 640px) {
  /* Phones: a taller stage so the figure is about a quarter larger, labels a touch smaller to keep clear of it. */
  .hp2-anatomy { --ar: .95; --fh: .96; --ft: .02; }
  .hp2-anatomy__label { font-size: 2.7cqw; }
}

/* 5. Inside the Hero Hub */
.hp2-inside__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) minmax(0, 1fr); align-items: center; gap: 28px; }
.hp2-inside__features { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; }
.hp2-inside__features li { display: grid; justify-items: center; gap: 10px; padding-bottom: 30px; border-bottom: 2px solid var(--v2-outline); text-align: center; }
.hp2-inside__features li:last-child { padding-bottom: 0; border-bottom: 0; }
.hp2-inside__features h3 { margin: 6px 0 0; color: var(--v2-ink); font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; }
.hp2-inside__features p { max-width: 32ch; margin: 0; color: var(--v2-copy); font-size: .98rem; font-weight: 500; line-height: 1.55; }
.hp2-phones { position: relative; height: 600px; }

/* 6. What you get: a staggered timeline. With JavaScript, the line fills as you scroll and each
   card slides in when it reaches the screen; without it, everything is shown at once. */
.hp2-get__timeline { --hp2-line: 1; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 88px; row-gap: 22px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.hp2-get__timeline::before, .hp2-get__timeline::after { content: ""; position: absolute; top: 10px; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px; }
.hp2-get__timeline::before { bottom: 10px; background: var(--v2-outline); }
.hp2-get__timeline::after { height: calc((100% - 20px) * var(--hp2-line)); background: linear-gradient(var(--v2-purple), var(--v2-action)); box-shadow: 0 0 14px rgba(91, 74, 158, .45); }
.hp2-get__timeline li {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 16px;
  grid-column: 1; padding: 22px 22px 24px; border: 3px solid var(--v2-ink); border-radius: 22px;
  background: var(--v2-paper); box-shadow: 5px 5px 0 var(--v2-ink);
}
.hp2-get__timeline li:nth-child(even) { grid-column: 2; }
.hp2-get__timeline li:nth-child(1) { grid-row: 1 / 3; }
.hp2-get__timeline li:nth-child(2) { grid-row: 2 / 4; }
.hp2-get__timeline li:nth-child(3) { grid-row: 3 / 5; }
.hp2-get__timeline li:nth-child(4) { grid-row: 4 / 6; }
.hp2-get__timeline li:nth-child(5) { grid-row: 5 / 7; }
.hp2-get__timeline li:nth-child(6) { grid-row: 6 / 8; }
.hp2-get__timeline li:nth-child(7) { grid-row: 7 / 9; }
.hp2-get__timeline li::after {
  content: ""; position: absolute; top: 34px; right: -56px; width: 18px; height: 18px;
  border: 3px solid var(--v2-ink); border-radius: 50%; background: var(--v2-purple); box-shadow: 0 0 0 5px var(--v2-bg), 0 0 16px 6px rgba(91, 74, 158, .5);
  transition: background .4s ease, box-shadow .4s ease;
}
.hp2-get__timeline li:nth-child(even)::after { right: auto; left: -56px; }
.hp2-get__timeline .hp2-icon { grid-row: span 2; }
.hp2-get__timeline h3 { margin: 4px 0 0; color: var(--v2-ink); font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; }
.hp2-get__timeline p { margin: 0; color: var(--v2-copy); font-size: .95rem; font-weight: 500; line-height: 1.55; }
.hp2-get__timeline.is-animated li { opacity: 0; transform: translateX(-46px); transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1); }
.hp2-get__timeline.is-animated li:nth-child(even) { transform: translateX(46px); }
.hp2-get__timeline.is-animated li::after { background: var(--v2-paper); box-shadow: 0 0 0 5px var(--v2-bg); }
.hp2-get__timeline.is-animated li.is-visible:nth-child(n) { opacity: 1; transform: none; }
.hp2-get__timeline.is-animated li.is-visible::after { background: var(--v2-purple); box-shadow: 0 0 0 5px var(--v2-bg), 0 0 16px 6px rgba(91, 74, 158, .5); }

/* 7. Hero Hub Pro bonus: the card under its title, then what Hero Hub tracks. */
/* No frame: the floating Pro calendar and its price sit directly on the page. */
.home-v2 .hp2-bonus__offer { max-width: 480px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hp2-bonus__offer .hero-hub-included__tag { top: 10px; right: calc(50% - 150px); }
.hp2-track__heading { margin: clamp(56px, 7vw, 80px) auto 32px; }
.hp2-track__heading h3 { margin: 0; color: var(--v2-ink); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }
.hp2-track__heading > p { max-width: 58ch; margin: 12px auto 0; color: var(--v2-copy); font-size: 1rem; font-weight: 500; line-height: 1.55; }
/* The bonus title carries a small offset note, like the (V-taper) label. */
.hp2-bonus__aside { display: block; width: max-content; margin: 6px auto 0; color: var(--v2-ink); font-size: max(1.05rem, .3em); font-weight: 700; letter-spacing: -.01em; transform: translateX(32%) rotate(-3deg); }
@media (max-width: 640px) { .hp2-bonus__aside { transform: translateX(18%) rotate(-3deg); } }

/* The tablet and phone artwork, standing on the star. */
.hp2-phones.hp2-devices { display: grid; place-items: center; height: auto; }
.hp2-devices__art { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(20, 42, 70, .2)); }
/* Star behind the two Hero Hub phones, turned the other way from the one behind the Captain. */
.hp2-phones { isolation: isolate; }
.home-v2 .hp2-phones .hp2-phones__star { top: 50%; z-index: -1; width: 175%; transform: translate(-50%, -50%) rotate(22deg); opacity: .75; }
/* Frosted pills with a glowing green dot: the PDF on the tablet's top-left corner, the Hero Hub on the phone's right edge.
   The offset uses translate so the float animation can own transform. */
.hp2-devices__pill {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 11px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; color: var(--v2-ink); background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 10px 24px rgba(20, 42, 70, .18);
  font-size: .66rem; font-weight: 900; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  animation: hp2PillFloat 5s ease-in-out infinite;
}
.hp2-devices__pill--pdf { top: 5%; left: 0; translate: -18% 0; }
.hp2-devices__pill--hub { top: 74%; right: 4%; translate: 22% 0; animation-delay: -2.5s; }
.hp2-devices__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25), 0 0 10px 2px rgba(61, 220, 132, .85); animation: hp2DotGlow 1.8s ease-in-out infinite; }
@keyframes hp2PillFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hp2DotGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(61, 220, 132, .25), 0 0 10px 2px rgba(61, 220, 132, .85); } 50% { box-shadow: 0 0 0 5px rgba(61, 220, 132, .12), 0 0 16px 4px rgba(61, 220, 132, .55); } }

/* Guarantee sticker straddling the top-right edge of each edition card. */
.hp2-edition-slot { position: relative; min-width: 0; }
.home-v2 .hp2-offer .hp2-editions { gap: 32px; }
.hp2-guarantee {
  position: absolute; top: -26px; right: -18px; z-index: 3; display: grid; place-items: center; width: 92px; aspect-ratio: 1;
  background: var(--v2-ink); transform: rotate(10deg); filter: drop-shadow(3px 3px 0 rgba(8, 18, 34, .45));
  clip-path: var(--hp2-burst);
}
.hp2-guarantee::before {
  content: ""; position: absolute; inset: 4px; background: linear-gradient(160deg, #ffe08a, #f3b93d);
  clip-path: inherit;
}
.hp2-guarantee span { position: relative; color: var(--v2-ink); font-size: .62rem; font-weight: 900; line-height: 1.12; letter-spacing: .04em; text-align: center; text-transform: uppercase; }

/* Value recap: priced cards that levitate on the left, the Hero Hub devices on the right. Each card slides in
   from the left and the devices from the right when they reach the screen (hero-project-page.js); html clips
   the overflow, so they arrive from the edge of the window. */
.hp2-value__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: clamp(28px, 4vw, 60px); max-width: 1220px; margin: 0 auto; padding-top: 14px; }
.hp2-value__list { display: grid; gap: 28px; margin: 0; padding: 0 24px 0 0; list-style: none; }
.hp2-value__card {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; column-gap: 14px;
  padding: 20px 96px 20px 20px; border: 3px solid var(--v2-ink); border-radius: 22px; background: var(--v2-paper); box-shadow: 6px 6px 0 var(--v2-ink);
  animation: hp2Levitate var(--d, 6s) ease-in-out var(--o, 0s) infinite;
}
@keyframes hp2Levitate { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-9px) rotate(calc(var(--r, 0deg) * -1)); } }
.hp2-value__check { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--v2-ink); border-radius: 50%; color: #fff; background: var(--v2-purple); }
.hp2-value__check svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.hp2-value__copy { min-width: 0; padding-top: 3px; }
.hp2-value__copy h3 { margin: 0; color: var(--v2-ink); font-size: clamp(1.05rem, 1.65vw, 1.32rem); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; }
.hp2-value__copy p { margin: 6px 0 0; color: var(--v2-copy); font-size: .95rem; font-weight: 500; line-height: 1.45; }
/* The value sits in a purple starburst on the card's top-right corner, cut from the guarantee badge's shape. */
.hp2-value__badge { position: absolute; top: -26px; right: -24px; z-index: 2; display: grid; place-items: center; width: 102px; aspect-ratio: 1; background: var(--v2-ink); clip-path: var(--hp2-burst); transform: rotate(9deg); }
.hp2-value__badge::before { content: ""; position: absolute; inset: 4px; background: linear-gradient(160deg, #7e68d6, var(--v2-purple) 70%); clip-path: inherit; }
.hp2-value__badge > span { position: relative; display: grid; justify-items: center; color: #fff; line-height: 1; text-align: center; }
.hp2-value__badge small { font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hp2-value__badge b { margin-top: 3px; font-size: 1.55rem; font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }
.hp2-value__badge sup { margin-left: 1px; font-size: .5em; line-height: 0; vertical-align: .75em; }
/* The Hero Hub Pro bonus stands out in purple, with a gold value. */
.hp2-value__item--bonus .hp2-value__card { background: radial-gradient(circle at 0% 0%, #8f7be0, transparent 70%), var(--v2-purple); }
.hp2-value__item--bonus .hp2-value__copy h3 { color: #fff; }
.hp2-value__item--bonus .hp2-value__copy p { color: rgba(255, 255, 255, .86); }
.hp2-value__item--bonus .hp2-value__check { color: var(--v2-purple); background: #fff; }
.hp2-value__item--bonus .hp2-value__badge::before { background: linear-gradient(160deg, #ffe08a, #f3b93d); }
.hp2-value__item--bonus .hp2-value__badge > span { color: var(--v2-ink); }
.hp2-value__item--bonus .hp2-value__badge b { font-size: 1.4rem; }
.hp2-value__tag { display: inline-block; margin: 0 0 7px; padding: 3px 9px; border: 2px solid var(--v2-ink); border-radius: 999px; color: var(--v2-ink); background: #ffe08a; font-size: .64rem; font-weight: 900; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
/* Total, then the one-time price on an ink panel with the gold savings sticker. */
.hp2-value__sum { padding-top: 4px; }
.hp2-value__was { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 8px; color: var(--v2-ink); }
.hp2-value__was span, .hp2-value__now > span { font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hp2-value__was s { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-decoration-color: #e0533d; text-decoration-thickness: 3px; }
.hp2-value__total {
  position: relative; margin-top: 14px; padding: 24px 134px 24px 26px; border: 3px solid var(--v2-ink); border-radius: 22px; color: #fff;
  background: radial-gradient(circle at 0% 0%, rgba(126, 104, 214, .6), transparent 64%), #1d3657; box-shadow: 6px 6px 0 var(--v2-purple);
}
.hp2-value__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.hp2-value__now > span { flex-basis: 100%; color: #c8dbf7; }
.hp2-value__now b { font-size: clamp(2.8rem, 5vw, 3.6rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.hp2-value__now small { color: #c8dbf7; font-size: .92rem; font-weight: 700; }
.hp2-value__save { position: absolute; top: 50%; right: 20px; z-index: 1; display: grid; place-items: center; width: 100px; aspect-ratio: 1; background: var(--v2-ink); transform: translateY(-50%) rotate(10deg); clip-path: var(--hp2-burst); }
.hp2-value__save::before { content: ""; position: absolute; inset: 4px; background: linear-gradient(160deg, #ffe08a, #f3b93d); clip-path: inherit; }
.hp2-value__save span { position: relative; color: var(--v2-ink); font-size: .68rem; font-weight: 900; line-height: 1; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.hp2-value__save b { display: block; margin-top: 2px; font-size: 1.5rem; letter-spacing: -.03em; }
/* The devices stay in view beside the cards while the reader scrolls through them. */
.hp2-value__art { position: sticky; top: max(110px, calc(50vh - 190px)); }
.hp2-value__art .hp2-value__slide { position: relative; isolation: isolate; }
.hp2-value__art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(20, 42, 70, .22)); }
.hp2-value__art img.hp2-value__star { position: absolute; top: 50%; left: 50%; z-index: -1; width: 92%; height: auto; filter: none; opacity: .75; transform: translate(-50%, -50%); pointer-events: none; }
/* Entrance: off to the side until the element reaches the screen, then a quick spring into place. */
.hp2-value.is-animated [data-hp2-slide] > .hp2-value__slide { opacity: 0; transform: translateX(calc(-100% - 60px)); transition: transform .9s cubic-bezier(.2, 1.18, .36, 1) var(--delay, 0ms), opacity .35s ease var(--delay, 0ms); }
.hp2-value.is-animated .hp2-value__art > .hp2-value__slide { transform: translateX(calc(100% + 60px)); }
.hp2-value.is-animated [data-hp2-slide].is-in > .hp2-value__slide { opacity: 1; transform: none; }

/* Final call to action: an ink panel that closes the page. */
.hp2-final {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 0; margin-top: clamp(72px, 9vw, 120px);
  padding: clamp(48px, 7vw, 88px) clamp(22px, 5vw, 64px); border: 3px solid var(--v2-ink); border-radius: 34px;
  background: radial-gradient(circle at 50% 0%, rgba(126, 104, 214, .55), transparent 62%), #1d3657; box-shadow: 8px 8px 0 var(--v2-purple); text-align: center;
}
.home-v2 .hp2-final .hp2-final__star { top: 50%; z-index: -1; width: min(820px, 140%); background: #fff; opacity: .07; }
.hp2-final h2 { max-width: 18ch; margin: 0; color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.hp2-final h2 span { color: #8ab4f2; font-style: italic; }
.hp2-final p { max-width: 60ch; margin: 18px 0 0; color: #c8dbf7; font-size: 1.1rem; font-weight: 500; line-height: 1.55; }
.hp2-final .hp2-cta { margin-top: 30px; border-color: #fff; box-shadow: 5px 5px 0 var(--v2-purple); }
.hp2-final .hp2-cta:hover { box-shadow: 3px 3px 0 var(--v2-purple); }

/* Offer */
.hp2-offer { margin-top: clamp(72px, 9vw, 120px); scroll-margin-top: 90px; }
/* Edition cards: the program artwork fills the card and fades into deep blue at the bottom, where the
   details and the card's own buy button sit. The logo already names the edition, so the title is kept
   for screen readers only. */
.home-v2 .hp2-offer .hp2-edition { position: relative; isolation: isolate; justify-content: flex-end; min-height: 0; aspect-ratio: 1240 / 640; padding: 20px 24px 22px; overflow: hidden; border: 3px solid var(--v2-ink); border-radius: 24px; background: #1d3657; box-shadow: 5px 5px 0 var(--v2-ink); text-align: left; transform: none; }
.home-v2 .hp2-offer .hp2-edition:hover { border: 3px solid var(--v2-ink); transform: none; box-shadow: 5px 5px 0 var(--v2-ink); }
.home-v2 .hp2-offer .hp2-edition.is-chosen { border-color: var(--v2-purple); box-shadow: 5px 5px 0 var(--v2-purple); }
.home-v2 .hp2-offer .hp2-edition > .hp2-edition-art {
  position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: auto; margin: 0; aspect-ratio: 1240 / 630; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 96%); mask-image: linear-gradient(to bottom, #000 56%, transparent 96%);
  transition: transform .4s ease;
}
/* Text over the artwork keeps a soft shadow so it stays readable without a heavy fade. */
.home-v2 .hp2-offer .hp2-edition small, .hp2-edition__price { text-shadow: 0 1px 3px rgba(8, 18, 34, .75); }
@media (min-width: 1101px) { .home-v2 .hp2-offer .hp2-edition > .hp2-edition-art { transform: translateY(-11%); } }
/* Narrower cards: the artwork sits on top and the details follow below it, so they never cover the logo. */
@media (max-width: 1100px) {
  .home-v2 .hp2-offer .hp2-edition { min-height: 0; aspect-ratio: auto; padding: 0 18px 18px; }
  .home-v2 .hp2-offer .hp2-edition > .hp2-edition-art { position: relative; z-index: -1; width: calc(100% + 36px); margin: 0 -18px -22px; }
}
.home-v2 .hp2-offer .hp2-edition h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-v2 .hp2-offer .hp2-edition small { margin-top: 0; color: rgba(255, 255, 255, .88); font-size: .8rem; }
.home-v2 .hp2-offer .hp2-edition small b { margin: 0; color: #fff; font-size: inherit; font-weight: 850; }
.hp2-edition__buy { display: flex; align-items: center; justify-content: space-between; gap: 14px; align-self: stretch; margin-top: 12px; }
.hp2-edition__price { display: grid; gap: 2px; margin: 0; }
.home-v2 .hp2-offer .hp2-edition__price b { margin: 0; color: #fff; font-size: 1.6rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.hp2-edition__price span { color: rgba(255, 255, 255, .7); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* The total value from the recap, struck, with the saving on a gold pill, above the one-time price. */
.hp2-edition__price .hp2-edition__deal { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: rgba(255, 255, 255, .78); font-size: .95rem; letter-spacing: 0; text-transform: none; }
.hp2-edition__deal s { font-weight: 800; text-decoration-color: #ff6b57; text-decoration-thickness: 2px; }
.hp2-edition__deal em { padding: 2px 7px; border: 2px solid var(--v2-ink); border-radius: 999px; color: var(--v2-ink); background: linear-gradient(160deg, #ffe08a, #f3b93d); font-size: .72rem; font-style: normal; font-weight: 900; line-height: 1.2; text-shadow: none; }
.hp2-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border: 2px solid rgba(255, 255, 255, .75); border-radius: 999px; color: #fff; background: var(--v2-action);
  box-shadow: 4px 4px 0 rgba(8, 18, 34, .55); font: inherit; font-size: .98rem; font-weight: 900; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hp2-buy:hover:not(:disabled) { background: #3a5f98; transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(8, 18, 34, .55); }
.hp2-buy:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hp2-buy:disabled { cursor: wait; opacity: .75; }
.hp2-edition__status { align-self: stretch; margin: 0; color: #fff; font-size: .78rem; font-weight: 500; }
.hp2-edition__status:not(:empty) { margin-top: 10px; }
.hp2-edition__status a, .hp2-edition__status a:hover { color: #fff; font-weight: 850; }
.hp2-offer__reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.hp2-offer__reassure li { color: var(--v2-ink); font-size: .88rem; font-weight: 750; }
.hp2-offer__reassure li::before { content: "✓"; margin-right: 7px; color: var(--v2-purple); font-weight: 900; }
.hero-faq-list details a:hover { color: var(--v2-purple); }

/* FAQ: the current sales page's questions, with a centered title like the other sections. */
.hp2 .hero-sales-faq { margin-top: clamp(72px, 9vw, 120px); }
.hp2 .hero-sales-faq > header { text-align: center; }
.hp2 .hero-sales-faq > header h2 { margin: 8px 0 0; color: var(--v2-ink); font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; }

.hp2-faq-more { margin: 24px 0 0; color: var(--v2-copy); font-size: 1rem; font-weight: 500; text-align: center; }
.hp2-faq-more a { color: var(--v2-action); font-weight: 850; text-decoration: none; }
.hp2-faq-more a:hover { color: var(--v2-purple); }

/* Closing: call to action, overall rating with the moderated review form, then the review wall. */
.home-v2 .hp2-closing .hero-review-summary { display: grid; justify-items: center; gap: 12px; max-width: 760px; margin: 0 auto; text-align: center; }
.home-v2 .hp2-closing .hero-review-summary h2 { margin: 0; color: var(--v2-ink); font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; }
.home-v2 .hp2-closing .hero-review-summary__row { justify-content: center; }
.hp2-closing .hero-review-form { max-width: 760px; margin: 20px auto 0; }
.hp2-wall { max-width: 1120px; margin: 34px auto 0; }
/* The clip shows a few rows under a fade; the columns inside are never height-limited, so cards stack instead of overflowing sideways.
   It reaches 6px past the right edge so the cards' stacked shadow is not cut off. */
.hp2-wall__clip { max-height: 760px; margin-right: -6px; padding-right: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.hp2-wall.is-open .hp2-wall__clip { max-height: none; -webkit-mask-image: none; mask-image: none; }
.hp2-wall__grid { columns: 3 260px; column-gap: 20px; }
.hp2-wall__stories, .home-v2 .hp2-wall__approved { display: contents; }
/* The card is filled with ink and its text block with paper, so no white hairline shows around the photo.
   The shadow is stacked one pixel at a time, which extrudes the rounded corner cleanly instead of leaving a notch. */
.hp2-wall__card, .home-v2 .hp2-wall__approved .hero-review-card {
  display: block; break-inside: avoid; margin: 0 0 20px; overflow: hidden;
  border: 3px solid var(--v2-ink); border-radius: 22px; background: var(--v2-ink);
  box-shadow: 1px 1px 0 var(--v2-ink), 2px 2px 0 var(--v2-ink), 3px 3px 0 var(--v2-ink), 4px 4px 0 var(--v2-ink), 5px 5px 0 var(--v2-ink);
}
.hp2-wall__card img, .home-v2 .hp2-wall__approved .hero-review-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-bottom: 3px solid var(--v2-ink); }
.hp2-wall__card > div, .home-v2 .hp2-wall__approved .hero-review-card__body { padding: 16px 18px 18px; background: var(--v2-paper); }
/* Reviews without a photo follow the photo reviews in their own grid. */
.hp2-wall__grid--text { margin-top: 4px; }
.hp2-wall__card--text > div { padding: 18px 20px 20px; }
.hp2-wall__stars, .home-v2 .hp2-wall__approved .hero-review-stars { margin: 0; color: var(--v2-purple); font-size: 1.05rem; letter-spacing: .08em; }
.hp2-wall__card blockquote, .home-v2 .hp2-wall__approved .hero-review-card p { margin: 8px 0 0; color: var(--v2-ink); font-size: .92rem; font-weight: 500; line-height: 1.5; }
.home-v2 .hp2-wall__approved .hero-review-card h3 { margin: 8px 0 0; color: var(--v2-ink); font-size: 1rem; font-weight: 900; }
.hp2-wall__meta, .home-v2 .hp2-wall__approved .hero-review-card footer { margin: 12px 0 0; color: var(--v2-purple); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hp2-wall__more {
  display: flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 4px 2px; border: 0; border-bottom: 3px solid var(--v2-ink);
  color: var(--v2-ink); background: none; font: inherit; font-size: .9rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.hp2-wall__more:hover { color: var(--v2-purple); border-color: var(--v2-purple); }
.hp2-wall__more:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 4px; }

/* Sticky buy bar on phones, shown between the hero button and the offer. */
.hp2-sticky {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px;
  border: 3px solid var(--v2-ink); border-radius: 20px; color: #fff; background: var(--v2-ink); box-shadow: 4px 4px 0 var(--v2-purple);
  font-size: .82rem; font-weight: 750; text-decoration: none;
}
/* The site's base link hover turns text green; the buy bar keeps its colors. */
.hp2-sticky:hover, .hp2-sticky:focus-visible { color: #fff; }
.hp2-sticky:hover b { background: #3a5f98; }
.hp2-sticky b { flex: none; display: inline-flex; gap: 8px; padding: 11px 14px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px; color: #fff; background: var(--v2-action); font-size: .88rem; font-weight: 900; white-space: nowrap; }

@media (max-width: 1080px) {
  .hp2-inside__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp2-phones { grid-column: 1 / -1; grid-row: 1; width: 420px; max-width: 100%; height: 560px; margin: 0 auto 20px; }
}
@media (max-width: 900px) {
  .hp2-method__steps::before, .hp2-get__timeline::before, .hp2-get__timeline::after { left: 27px; }
  .hp2-method__steps li, .hp2-method__steps li:nth-child(even) { grid-template-columns: 54px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .hp2-method__num, .hp2-method__steps li:nth-child(even) .hp2-method__num { grid-column: 1; grid-row: 1; width: 54px; height: 54px; }
  .hp2-method__visual, .hp2-method__steps li:nth-child(even) .hp2-method__visual { grid-column: 2; grid-row: 2; margin: 22px 0 18px; }
  .hp2-method__copy, .hp2-method__steps li:nth-child(even) .hp2-method__copy { grid-column: 2; grid-row: 1; }
  .hp2-method__steps li:nth-child(even) .hp2-ui-card { left: auto; right: -8px; }
  .hp2-get__timeline { grid-template-columns: 1fr; }
  .hp2-get__timeline li, .hp2-get__timeline li:nth-child(n) { grid-column: 1; grid-row: auto; margin-left: 66px; }
  .hp2-get__timeline li::after, .hp2-get__timeline li:nth-child(even)::after { right: auto; left: -50px; }
  .hp2-get__timeline.is-animated li, .hp2-get__timeline.is-animated li:nth-child(even) { transform: translateY(28px); }
  /* Tablets and phones: the devices first, then the cards; the devices no longer stick. */
  .hp2-value__layout { grid-template-columns: 1fr; max-width: 640px; }
  .hp2-value__art { position: relative; top: auto; order: -1; width: min(560px, 100%); margin: 0 auto 8px; }
}
@media (max-width: 760px) {
  .hp2-sticky:not([hidden]) { display: flex; }
  .hp2-wall__clip { max-height: 900px; }
  /* Phones: slightly narrower review cards, centered, with a touch less padding. */
  .hp2-wall { width: 86%; }
  .hp2-wall__card > div, .home-v2 .hp2-wall__approved .hero-review-card__body { padding: 13px 15px 15px; }
  .hp2-wall__card blockquote, .home-v2 .hp2-wall__approved .hero-review-card p { font-size: .86rem; }
}
@media (max-width: 700px) {
  /* Hero Project has nine cards versus five on Zero To Growth, so its loop
     needs proportionally more time to keep the same visual speed per card. */
  .home-v2 .hp2-results:not(.ztg-stories) .h3-testimonials-track { animation-duration: 54s; }
}
@media (max-width: 640px) {
  .hp2 { padding-bottom: 110px; }
  .hp2-hero h1 span { -webkit-text-stroke-width: 1.5px; text-shadow: 3px 3px 0 var(--v2-ink); }
  .hp2-hero__proof { margin-top: 26px; }
  /* Phones: the two photos step diagonally so each one can be much larger. */
  .hp2-before-after { display: grid; padding: 0 4px 10px; }
  .hp2-before-after > div { width: 70%; border-radius: 20px; box-shadow: 4px 4px 0 var(--v2-ink); }
  .hp2-before-after > div:first-child { justify-self: start; margin-right: 0; }
  .hp2-before-after > div:last-child { justify-self: end; margin-top: -18%; }
  .hp2-before-after span { right: 8px; top: 8px; padding: 5px 10px; font-size: .62rem; }
  .hp2-cta { width: 100%; padding: 0 20px; }
  .hp2-buy { padding: 0 18px; font-size: .92rem; }
  .hp2-guarantee { top: -20px; right: -8px; width: 80px; }
  .hp2-guarantee span { font-size: .55rem; }
  .home-v2 .hp2-program-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; row-gap: 6px; width: 100%; margin-top: 18px; padding: 10px 2px; }
  .home-v2 .hp2-program-bar li { flex-direction: column; gap: 6px; padding: 4px 6px; text-align: center; }
  .home-v2 .hp2-program-bar li + li::before { content: ""; }
  .home-v2 .hp2-program-bar span { text-align: center; }
  .home-v2 .hp2-program-bar small { font-size: .52rem; letter-spacing: .06em; }
  .home-v2 .hp2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; width: 100%; margin-top: 28px; padding: 0; }
  .home-v2 .hp2-stats li { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 4px 6px; text-align: center; }
  .home-v2 .hp2-stats li + li::before { content: ""; }
  .home-v2 .hp2-stats span { text-align: center; }
  .home-v2 .hp2-stats b { font-size: 1.3rem; }
  .home-v2 .hp2-stats small { font-size: .52rem; letter-spacing: .06em; }
  .hp2-method__steps { gap: 46px; }
  .hp2-ui-card { right: -6px; bottom: -16px; min-width: 0; padding: 10px 12px; }
  .hp2-ui-card b { font-size: 1.15rem; }
  .hp2-inside__layout { grid-template-columns: 1fr; }
  .hp2-phones { width: 330px; height: 470px; }
  .hp2-get__timeline li, .hp2-get__timeline li:nth-child(n) { margin-left: 52px; padding: 18px 16px 20px; }
  .hp2-get__timeline::before, .hp2-get__timeline::after { left: 20px; }
  .hp2-get__timeline li::after, .hp2-get__timeline li:nth-child(even)::after { left: -43px; }
  .hp2-get__timeline .hp2-icon { width: 44px; height: 44px; border-radius: 14px; }
  .hp2-devices__pill { gap: 6px; padding: 6px 10px 6px 8px; font-size: .54rem; }
  .hp2-devices__pill--pdf { translate: -8% 0; }
  .hp2-devices__pill--hub { translate: 6% 0; }
  .hp2-devices__dot { width: 7px; height: 7px; }
  .hp2-value__list { gap: 24px; padding-right: 12px; }
  .hp2-value__card { grid-template-columns: 28px minmax(0, 1fr); column-gap: 11px; padding: 16px 64px 16px 14px; border-radius: 20px; box-shadow: 5px 5px 0 var(--v2-ink); }
  .hp2-value__check { width: 28px; height: 28px; }
  .hp2-value__check svg { width: 14px; height: 14px; }
  .hp2-value__copy { padding-top: 2px; }
  .hp2-value__copy h3 { font-size: 1rem; }
  .hp2-value__copy p { font-size: .84rem; }
  .hp2-value__badge { top: -22px; right: -14px; width: 80px; }
  .hp2-value__badge small { font-size: .5rem; }
  .hp2-value__badge b { font-size: 1.15rem; }
  .hp2-value__item--bonus .hp2-value__badge { width: 86px; }
  .hp2-value__item--bonus .hp2-value__badge b { font-size: 1rem; }
  .hp2-value__was s { font-size: 1.4rem; }
  .hp2-value__total { padding: 18px 104px 18px 18px; border-radius: 18px; box-shadow: 5px 5px 0 var(--v2-purple); }
  .hp2-value__save { right: 12px; width: 84px; }
  .hp2-value__save b { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-cta { transition: none; }
  .hp2-get__timeline.is-animated li { opacity: 1; transform: none; transition: none; }
  .hp2-value__card { animation: none; }
  .hp2-devices__pill, .hp2-devices__dot { animation: none; }
}