/* ============================================================
   Homepage, Nov 2026 design ("8WTC homepage desktop"): a light
   page with heavy uppercase headings, dark bands for the video,
   the results and the close, Michroma for the small labels, and
   uppercase tracked buttons. Only the homepage loads this
   (body.home--v3); every section keeps its markup and behaviour.
   ============================================================ */
body.home--v3 {
  --ink: #171A21; --muted: #5D6474; --dark: #1D1E22; --dark-card: #26282E; --hair-l: #E1E4EC;
  --wide: Michroma, var(--font-body);
  background: #F3F4F7; color: var(--ink);
}

/* ---------- shared pieces ---------- */
body.home--v3 .hsec h2, body.home--v3 .hvid h2, body.home--v3 .hclose h2, body.home--v3 .hfaq h2, body.home--v3 .hguar h2 {
  font: 900 clamp(36px, 3.9vw, 56px)/0.94 var(--font-heading); letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance;
}
body.home--v3 .hsec h2 { color: var(--ink); max-width: 900px; }
body.home--v3 .hsec__sub { color: var(--muted); font-size: 16px; line-height: 1.6; }
body.home--v3 .pill { --r: 999px; height: 38px; padding: 0 14px 0 6px; background: #fff; box-shadow: 0 6px 18px -12px rgba(23, 26, 33, 0.35), inset 0 0 0 1px var(--hair-l); color: var(--ink); font-size: 14px; }
body.home--v3 .pill__ico { width: 26px; height: 26px; background: var(--blue); }
body.home--v3 .pill__ico svg { stroke: #fff; }
body.home--v3 .pill__ico svg path[fill] { fill: #fff; }
body.home--v3 :is(.hvid, .hwall, .hclose) .pill { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; }
body.home--v3 .pill--sky .pill__ico { background: var(--lime); }
body.home--v3 .pill--sky .pill__ico svg path { fill: var(--ink); }

/* buttons: 14px squircle, uppercase tracked labels */
body.home--v3 .hbtn { --r: 14px; height: 56px; padding: 0 26px; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
body.home--v3 .hbtn--go { padding-right: 12px; }
body.home--v3 .hbtn--primary { background: var(--blue); color: #fff; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65); }
body.home--v3 .hbtn--card { background: #fff; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(29, 30, 34, 0.35), inset 0 0 0 1px var(--hair-l); }
body.home--v3 .hbtn--white { background: var(--blue); color: #fff; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65); }
body.home--v3 .hbtn--white .hbtn__ico, body.home--v3 .hbtn--primary .hbtn__ico { background: #fff; }
body.home--v3 .hbtn--white .hbtn__ico svg, body.home--v3 .hbtn--primary .hbtn__ico svg { stroke: var(--blue); }
body.home--v3 .hbtn__ico { width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) {
  body.home--v3 .hbtn--primary:hover, body.home--v3 .hbtn--white:hover { background: #2A64F0; }
  body.home--v3 .hbtn--card:hover { background: #F7F8FB; }
}

/* ---------- header ---------- */
body.home--v3 .hh__nav a { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
body.home--v3 .hh.is-light .hh__nav a { color: #3D414B; opacity: 1; }
body.home--v3 .hh.is-light .hh__nav a:hover, body.home--v3 .hh.is-light .hh__nav a.is-current { color: var(--ink); }
body.home--v3 .hh__cta { --r: 14px; height: 44px; padding: 0 22px; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
body.home--v3 .hh.is-light .hh__cta { background: var(--blue); color: #fff; }
body.home--v3 .hh.is-scrolled:not(.is-light) { background: rgba(23, 26, 33, 0.72); }
body.home--v3 .hh.is-light .hh__brand, body.home--v3 .hh.is-light .hh__brand span { color: var(--ink); }

/* ---------- hero: light, heavy, the photos in a flat row ---------- */
body.home--v3 .hsky { color: var(--ink); }
body.home--v3 .hsky__bg, body.home--v3 .hsky__glow { display: none; }
body.home--v3 .hero { padding-top: 132px; }
body.home--v3 .hero__kicker { --r: 999px; background: #fff; box-shadow: 0 6px 18px -12px rgba(23, 26, 33, 0.35), inset 0 0 0 1px var(--hair-l); color: var(--ink); }
body.home--v3 .hero__kicker i { background: #7BC41C; box-shadow: 0 0 0 4px rgba(212, 255, 58, 0.55); }
body.home--v3 .hero h1 { max-width: 1160px; margin-top: 26px; color: var(--ink); font: 900 clamp(40px, 5vw, 72px)/0.92 var(--font-heading); letter-spacing: -0.045em; text-transform: uppercase; }
body.home--v3 .hero__accent { color: var(--blue); }
body.home--v3 .hero__sub { max-width: 560px; margin-top: 26px; color: var(--muted); font: 500 16px/1.6 var(--font-body); text-wrap: balance; }
body.home--v3 .hero__cta { margin-top: 34px; gap: 10px; }

body.home--v3 .hfan { height: calc(500px * var(--u)); margin-top: 72px; }
body.home--v3 .hfan__glow { display: none; }
body.home--v3 .hfan__row { perspective: none; height: 500px; }
body.home--v3 .hfan__item { width: 260px; height: 480px; margin: -240px 0 0 -130px; }
body.home--v3 .hfan__card {
  --r: 10px; overflow: hidden; padding: 0; background: #1B1D22; isolation: isolate;
  box-shadow: 0 34px 60px -32px rgba(23, 26, 33, 0.55), 0 2px 6px -2px rgba(23, 26, 33, 0.12);
}
body.home--v3 .hfan__item.is-active .hfan__card { background: #1B1D22; }
body.home--v3 .hfan__card .pair { height: 100% !important; gap: 1px; }
body.home--v3 .hfan__card .pair__t { --r: 0px; background: #2A2C33; }
body.home--v3 .hfan__card::before, body.home--v3 .hfan__card::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
body.home--v3 .hfan__card::before { top: 0; height: 90px; background: linear-gradient(rgba(10, 12, 18, 0.45), rgba(10, 12, 18, 0)); }
body.home--v3 .hfan__card::after { bottom: 0; height: 58%; background: linear-gradient(rgba(10, 12, 18, 0), rgba(10, 12, 18, 0.35) 45%, rgba(10, 12, 18, 0.82)); }
body.home--v3 .hfan__badge { display: none; }
body.home--v3 .hfan__tags, body.home--v3 .hfan__label { text-align: left; }
body.home--v3 .hfan__tags { position: absolute; z-index: 2; inset: 14px 0 auto; display: flex; pointer-events: none; }
body.home--v3 .hfan__tags em { flex: 1; padding-left: 12px; color: rgba(255, 255, 255, 0.85); font: 400 9px/1 var(--wide); font-style: normal; letter-spacing: 0.32em; text-transform: uppercase; }
body.home--v3 .hfan__label { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; color: #fff; pointer-events: none; }
body.home--v3 .hfan__name { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--wide); letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
body.home--v3 .hfan__name i { flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--blue); }
body.home--v3 .hfan__kg { font: 900 34px/0.95 var(--font-heading); font-style: oblique 12deg; letter-spacing: -0.04em; text-transform: uppercase; }
body.home--v3 .hfan__item:focus-visible .hfan__card { outline-color: var(--blue); }

/* ---------- the video: a dark band with slanted edges ---------- */
body.home--v3 .hvid { position: relative; margin-top: 110px; padding: 190px 40px 190px; color: #fff; isolation: isolate; }
body.home--v3 .hvid::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); clip-path: polygon(0 90px, 100% 0, 100% calc(100% - 90px), 0 100%);
  background: radial-gradient(60% 34% at 50% 8%, rgba(48, 112, 255, 0.22), rgba(48, 112, 255, 0) 70%), radial-gradient(50% 30% at 50% 62%, rgba(48, 112, 255, 0.2), rgba(48, 112, 255, 0) 70%), var(--dark);
}
body.home--v3 .hvid h2 { color: #fff; }
body.home--v3 .hvid__sub { color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.6; }
body.home--v3 .hvid__frame { --r: 14px; }
body.home--v3 .hvid__play > span { background: var(--lime); }
body.home--v3 .hvid__play > span svg path { fill: var(--ink); }
body.home--v3 .hvid__play i { display: none; }
body.home--v3 .hvid__chapters { --r: 0px; padding: 0; background: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); margin-top: 64px; }
body.home--v3 .hvid__chapters button { --r: 0px; padding: 22px 16px 10px; background: transparent; box-shadow: inset 0 2px 0 transparent; color: #fff; }
body.home--v3 .hvid__chapters button.is-on { background: transparent; box-shadow: inset 0 2px 0 var(--blue); }
body.home--v3 .hvid__chapters button small { color: rgba(255, 255, 255, 0.6); font: 400 11px/1.4 var(--wide); letter-spacing: 0.1em; }
body.home--v3 .hvid__cico { background: rgba(255, 255, 255, 0.08); fill: #fff; }
body.home--v3 .hvid__btns .hbtn--card { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
body.home--v3 .hvid__btns .hbtn__play { background: #fff; color: var(--ink); }

/* ---------- numbers: the first card dark, lime ---------- */
body.home--v3 .hstats { padding-top: 40px; }
body.home--v3 .hstats__grid { grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 14px; }
body.home--v3 .hstats__grid li { --r: 18px; padding: 26px 24px 30px; text-align: left; background: #fff; box-shadow: 0 24px 50px -34px rgba(23, 26, 33, 0.45), inset 0 0 0 1px var(--hair-l); }
body.home--v3 .hstats__grid li:first-child { position: relative; overflow: hidden; background: radial-gradient(90% 70% at 100% 100%, rgba(48, 112, 255, 0.45), rgba(48, 112, 255, 0) 70%), #1B1D22; box-shadow: 0 24px 50px -30px rgba(23, 26, 33, 0.7); }
body.home--v3 .hstats__grid i { --r: 10px; width: 44px; height: 44px; border-radius: 10px; background: #EEF3FF; }
body.home--v3 .hstats__grid i svg { stroke: var(--blue); width: 20px; height: 20px; }
body.home--v3 .hstats__grid i svg path[fill] { fill: var(--blue); }
body.home--v3 .hstats__grid li:first-child i { background: rgba(255, 255, 255, 0.08); }
body.home--v3 .hstats__grid li:first-child i svg { stroke: var(--lime); }
body.home--v3 .hstats__grid b { margin-top: 34px; color: var(--ink); font: 900 clamp(40px, 4.4vw, 64px)/0.95 var(--font-heading); letter-spacing: -0.045em; white-space: nowrap; }
body.home--v3 .hstats__grid li:first-child b { color: var(--lime); }
body.home--v3 .hstats__grid span { margin-top: 12px; color: var(--muted); font: 400 10px/1.4 var(--wide); letter-spacing: 0.2em; text-transform: uppercase; }
body.home--v3 .hstats__grid li:first-child span { color: rgba(255, 255, 255, 0.66); }

/* ---------- the app cards ---------- */
body.home--v3 .fcard { --r: 18px; box-shadow: 0 24px 50px -34px rgba(23, 26, 33, 0.45), inset 0 0 0 1px var(--hair-l); }
body.home--v3 .fcard__head h3 { font: 900 22px/1 var(--font-heading); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); }
body.home--v3 .fcard__head p { font-size: 15px; }
body.home--v3 .fcard__stage { --r: 12px; background: #EEF1F7; background-image: none; }
body.home--v3 .fchip__start { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }

/* ---------- results: a dark band, dark cards ---------- */
body.home--v3 .hwall { --pt: 170px; --pb: 190px; position: relative; margin-top: 40px; color: #fff; isolation: isolate; }
body.home--v3 .wvideo__top .wkg { --r: 8px; height: 26px; padding: 0 10px; background: rgba(10, 12, 18, 0.7); color: #fff; font-size: 12px; }
body.home--v3 .hwall::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 calc(100% - 80px));
  background: radial-gradient(60% 30% at 50% 4%, rgba(48, 112, 255, 0.22), rgba(48, 112, 255, 0) 70%), var(--dark);
}
body.home--v3 .hwall h2 { color: #fff; }
body.home--v3 .hwall .hsec__sub { color: rgba(255, 255, 255, 0.72); }
body.home--v3 .hwall .hsec__sub b { color: #fff; }
body.home--v3 .wcard { --r: 14px; background: var(--dark-card); color: #fff; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
body.home--v3 .wphoto { position: relative; padding: 0; overflow: hidden; }
body.home--v3 .wphoto .pair { gap: 1px; }
body.home--v3 .wphoto .pair__t { --r: 0px; }
body.home--v3 .wphoto::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 45%; bottom: 0; height: auto; background: linear-gradient(rgba(10, 12, 18, 0), rgba(10, 12, 18, 0.82)); pointer-events: none; }
body.home--v3 .wphoto__foot { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; }
body.home--v3 .wphoto__foot b { display: flex; align-items: center; gap: 8px; font: 400 10px/1 var(--wide); letter-spacing: 0.3em; text-transform: uppercase; }
body.home--v3 .wphoto__foot b::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--blue); }
body.home--v3 .wphoto__foot .wkg { height: auto; padding: 0; background: none; color: #fff; font: 900 28px/0.95 var(--font-heading); font-style: oblique 12deg; letter-spacing: -0.04em; text-transform: uppercase; }
body.home--v3 .wchat__head { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.home--v3 .wchat__head small { color: rgba(255, 255, 255, 0.55); }
body.home--v3 .wchat__in { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.home--v3 .wchat__out { background: var(--blue); }
body.home--v3 .wquote blockquote { color: #fff; }
body.home--v3 .wquote figcaption { color: rgba(255, 255, 255, 0.55); font: 400 11px/1.4 var(--wide); letter-spacing: 0.16em; text-transform: uppercase; }
body.home--v3 .wquote__stars svg path { fill: var(--lime); }
body.home--v3 .wstat b { color: #fff; font: 900 52px/0.95 var(--font-heading); letter-spacing: -0.045em; }
body.home--v3 .wstat span { margin-top: 10px; color: rgba(255, 255, 255, 0.6); font: 400 10px/1.4 var(--wide); letter-spacing: 0.2em; text-transform: uppercase; }
body.home--v3 .wprize { background: radial-gradient(90% 90% at 100% 100%, rgba(48, 112, 255, 0.7), rgba(48, 112, 255, 0) 70%), var(--dark-card); }
body.home--v3 .wprize b { font: 900 52px/0.95 var(--font-heading); letter-spacing: -0.045em; }
body.home--v3 .wprize span { color: rgba(255, 255, 255, 0.72); }
body.home--v3 .wall__fade { background: linear-gradient(rgba(29, 30, 34, 0), var(--dark) 70%); }
body.home--v3 .wall__fade .hbtn--card { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
body.home--v3 .wall__fade span { color: rgba(255, 255, 255, 0.6); font: 400 10px/1 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; }

/* ---------- how it works: big slanted numbers, the last card dark ---------- */
body.home--v3 .hhow { padding-top: 80px; }
body.home--v3 .hhow__steps { gap: 14px; }
body.home--v3 .hstep { --r: 18px; padding: 26px 24px 28px; box-shadow: 0 24px 50px -34px rgba(23, 26, 33, 0.45), inset 0 0 0 1px var(--hair-l); }
body.home--v3 .hstep + .hstep::before { display: none; }
body.home--v3 .hstep__n { display: block; width: auto; height: auto; background: none; color: var(--blue); font: 900 56px/0.9 var(--font-heading); font-style: oblique 10deg; letter-spacing: -0.05em; }
body.home--v3 .hstep__tag { --r: 999px; height: 28px; padding: 0 12px; background: #EEF3FF; color: #1F5BFF; font: 400 9px/1 var(--wide); letter-spacing: 0.18em; text-transform: uppercase; }
body.home--v3 .hstep h3 { margin-top: 30px; font: 900 20px/1.05 var(--font-heading); letter-spacing: -0.03em; text-transform: uppercase; }
body.home--v3 .hstep p { color: var(--muted); font-size: 15px; }
body.home--v3 .hstep:last-child { background: radial-gradient(90% 70% at 100% 100%, rgba(48, 112, 255, 0.45), rgba(48, 112, 255, 0) 70%), #1B1D22; box-shadow: 0 24px 50px -30px rgba(23, 26, 33, 0.7); }
body.home--v3 .hstep:last-child .hstep__n { color: var(--lime); }
body.home--v3 .hstep:last-child .hstep__tag { background: rgba(255, 255, 255, 0.08); color: #fff; }
body.home--v3 .hstep:last-child h3 { color: #fff; }
body.home--v3 .hstep:last-child p { color: rgba(255, 255, 255, 0.66); }

/* ---------- guarantee ---------- */
body.home--v3 .hguar__card { --r: 22px; background: radial-gradient(420px 320px at 170px 50%, rgba(48, 112, 255, 0.3), transparent 70%), radial-gradient(520px 360px at 85% 95%, rgba(48, 112, 255, 0.28), transparent 70%), #1B1D22; }
body.home--v3 .hguar__eyebrow { font: 400 11px/1 var(--wide); letter-spacing: 0.3em; }
body.home--v3 .hguar h2 { color: #fff; }
body.home--v3 .hguar__chips li { --r: 10px; }

/* ---------- questions ---------- */
body.home--v3 .hfaq h2 { color: var(--ink); }
body.home--v3 .hq { --r: 14px; }
body.home--v3 .hfaq__help { --r: 18px; }
body.home--v3 .hfaq__touch { --r: 14px; height: 48px; padding: 0 24px; background: var(--blue); font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65); }

/* ---------- the close: dark, slanted top ---------- */
body.home--v3 .hclose { background: radial-gradient(60% 40% at 50% 100%, rgba(48, 112, 255, 0.35), rgba(48, 112, 255, 0) 70%), var(--dark); clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%); }
body.home--v3 .hclose h2 { color: #fff; font-size: clamp(44px, 6vw, 88px); }
body.home--v3 .hclose__sub { color: rgba(255, 255, 255, 0.72); font-size: 16px; }
body.home--v3 .hclose__link { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- footer ---------- */
body.home--v3 .hfoot h4 { font: 400 10px/1 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  body.home--v3 .hstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  body.home--v3 .hfan { --u: 0.72; }
  body.home--v3 .hvid { padding: 150px 24px 150px; }
}
@media (max-width: 699px) {
  body.home--v3 .hero { padding-top: 104px; }
  body.home--v3 .hero h1 { font-size: clamp(34px, 10vw, 44px); letter-spacing: -0.04em; }
  body.home--v3 .hero h1 br { display: none; }
  body.home--v3 .hero__sub { font-size: 15px; }
  body.home--v3 .hero__cta { flex-direction: column; align-items: stretch; }
  body.home--v3 .hfan { --u: 0.62; margin-top: 44px; }
  body.home--v3 .hvid { margin-top: 60px; padding: 120px 16px 120px; }
  body.home--v3 .hvid::before { clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); }
  body.home--v3 .hwall { --pt: 110px; --pb: 120px; }
  body.home--v3 .hwall::before { clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 calc(100% - 40px)); }
  body.home--v3 .hclose { clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
  body.home--v3 .hstats__grid li { padding: 20px 16px 22px; }
  body.home--v3 .hstats__grid b { margin-top: 22px; font-size: clamp(24px, 7.6vw, 34px); }
  body.home--v3 .hstats__grid span { font-size: 8px; letter-spacing: 0.14em; }
  body.home--v3 .hstep__n { font-size: 46px; }
  body.home--v3 .hbtn { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home--v3 .hfan__card { transition: none; }
}
/* wall photos keep the heads in frame however wide the card */
body.home--v3 .wphoto .pair__t img { object-position: 0 6%; }
body.home--v3 .wphoto .pair__t--after img { object-position: 100% 6%; }

/* ============================================================
   Round 2 (5 Nov): video heading width, the badge pulse, the
   chapter rows, the slider's progress track, the phone menu, the
   guarantee glow, a quieter close and the phone bar.
   ============================================================ */

/* the video heading stays two lines, as in the design */
body.home--v3 .hvid h2 { max-width: 720px; margin-inline: auto; }

/* the dot in the hero badge breathes: a slow ring, never a flash */
body.home--v3 .hero__kicker i::after { background: var(--lime); animation: kick-pulse 2400ms cubic-bezier(0.2, 0.9, 0.25, 1) infinite; }
@keyframes kick-pulse { 0% { opacity: 0.7; scale: 1; } 70%, 100% { opacity: 0; scale: 2.6; } }

/* video chapters: a quiet lift on hover, the line along the top fills in */
body.home--v3 .hvid__chapters button { position: relative; border-radius: 0; transition: background-color 250ms var(--ease), box-shadow 300ms var(--ease), scale 300ms var(--spring); }
body.home--v3 .hvid__chapters button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, 0.5); scale: 0 1; transform-origin: 0 50%; transition: scale 450ms var(--spring); }
body.home--v3 .hvid__chapters button.is-on::before { background: var(--blue); scale: 1 1; }
body.home--v3 .hvid__chapters button .hvid__cico { transition: background-color 250ms var(--ease), scale 350ms var(--spring); }
@media (hover: hover) and (pointer: fine) {
  body.home--v3 .hvid__chapters button:not(.is-on):hover { background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); }
  body.home--v3 .hvid__chapters button:not(.is-on):hover::before { scale: 1 1; }
  body.home--v3 .hvid__chapters button:hover .hvid__cico { scale: 1.08; background: rgba(255, 255, 255, 0.14); }
}
body.home--v3 .hvid__chapters button:active { scale: 0.98; }

/* the app slider: "01 — 09" either side of a track that follows the scroll */
body.home--v3 .hfeat__progress { display: flex; align-items: center; gap: 14px; }
body.home--v3 .hfeat__count { min-width: 2ch; color: var(--ink); font: 400 11px/1 var(--wide); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
body.home--v3 .hfeat__count--total { color: #9AA1B5; }
body.home--v3 .hfeat__track { position: relative; width: 180px; height: 3px; overflow: hidden; border-radius: 2px; background: #DADEE8; }
body.home--v3 .hfeat__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 2px; background: var(--ink); }
body.home--v3 .hround { box-shadow: 0 8px 20px -12px rgba(23, 26, 33, 0.35), inset 0 0 0 1px var(--hair-l); }

/* the phone menu: the dark band and the heavy uppercase type */
@media (max-width: 1023px) {
  body.home--v3 .hh__nav { background: radial-gradient(80% 50% at 50% 0%, rgba(48, 112, 255, 0.28), rgba(48, 112, 255, 0) 70%), radial-gradient(70% 40% at 50% 100%, rgba(48, 112, 255, 0.22), rgba(48, 112, 255, 0) 70%), var(--dark); }
  body.home--v3 .hh .hh__nav > a { min-height: 76px; border-bottom-color: rgba(255, 255, 255, 0.1); font: 900 clamp(30px, 8vw, 42px)/1 var(--font-heading); letter-spacing: -0.045em; text-transform: uppercase; }
  body.home--v3 .hh__nav > a::after { border-color: var(--blue); }
  body.home--v3 :is(.hh, .hh.is-light) .hh__nav .hh__navcta { background: var(--blue); color: #fff; font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 14px 28px -14px rgba(48, 112, 255, 0.65); }
  body.home--v3 :is(.hh, .hh.is-light) .hh__nav .hh__get { font: 400 10px/1 var(--wide); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
}

/* the guarantee glow: a circle that fades out well inside its own box */
body.home--v3 .hguar__shield::before { inset: auto; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 255, 58, 0.22), rgba(212, 255, 58, 0.06) 55%, rgba(212, 255, 58, 0)); }

/* the close: the photos behind it step further back */
body.home--v3 .cghost { opacity: 0.06; }
body.home--v3 .cghost img { filter: grayscale(0.6) blur(2px); }
body.home--v3 .hclose__cards { opacity: 0.8; }

/* the phone bar: dark glass, the date on the left, a compact button on the right */
body.home--v3 .sticky-cta.hsticky--ny {
  --r: 18px; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
  background: rgba(29, 30, 34, 0.94); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.home--v3 .hsticky__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.home--v3 .hsticky__info small { color: rgba(255, 255, 255, 0.6); font: 400 9px/1 var(--wide); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
body.home--v3 .hsticky__info b { color: #fff; font: 900 17px/1 var(--font-heading); letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
body.home--v3 .sticky-cta.hsticky--ny .hbtn { width: auto; height: 46px; min-height: 46px; padding: 0 8px 0 18px; font-size: 11px; }
body.home--v3 .sticky-cta.hsticky--ny .hbtn__ico { width: 30px; height: 30px; }
@media (prefers-reduced-transparency: reduce) { body.home--v3 .sticky-cta.hsticky--ny { background: var(--dark); backdrop-filter: none; } }

/* press feedback on the cards you can tap (Apple: respond on press, not release) */
body.home--v3 .hfan__item:active .hfan__card { scale: 0.985; transition: scale 120ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  body.home--v3 .hero__kicker i::after { animation: none; }
  body.home--v3 .hvid__chapters button, body.home--v3 .hvid__chapters button::before { transition: none; }
}
/* the open phone menu is always the dark band, whatever the header was over */
@media (max-width: 1023px) {
  body.home--v3 .hh.is-open .hh__nav > a, body.home--v3 .hh.is-open.is-light .hh__nav > a { color: #fff; }
  body.home--v3 .hh.is-open .hh__brand, body.home--v3 .hh.is-open .hh__brand span, body.home--v3 .hh.is-open.is-light .hh__brand span { color: #fff; }
  body.home--v3 .hh.is-open .hh__brand img { filter: invert(1); }
}
/* the phone bar fits a small screen: tighter label, no arrow on its button */
body.home--v3 .hsticky__info small { font-size: 8px; letter-spacing: 0.14em; overflow: hidden; text-overflow: ellipsis; }
body.home--v3 .hsticky__info b { font-size: 15px; }
body.home--v3 .sticky-cta.hsticky--ny .hbtn { padding: 0 16px; letter-spacing: 0.12em; }

/* ============================================================
   Round 3: the hero row runs off both edges of the screen, and the
   app cards' shadows have room to fall
   ============================================================ */
body.home--v3 .hsky { overflow-x: clip; }
/* only the photo row reaches the screen edges; the words keep the page gutter */
body.home--v3 .hfan { margin-inline: -16px; }
body.home--v3 .hfeat__rail { padding-bottom: 72px; margin-bottom: -40px; }
/* the hero cards aren't links: no pointer hand, just the grab cursor of the row */
body.home--v3 .hfan__item { cursor: inherit; }
body.home--v3 .hfan__item.is-active { cursor: inherit; }

/* phones: the prize-money card takes the full row so its number never meets the edge */
@media (max-width: 699px) {
  body.home--v3 .hstats__grid li:is(:first-child, :nth-child(2)) { grid-column: 1 / -1; }
  body.home--v3 .hstats__grid li:first-child b { font-size: clamp(40px, 12vw, 52px); }
}
/* the slider's controls sit above the room left for the card shadows, so they get the taps */
body.home--v3 .hfeat__ctrl { position: relative; z-index: 2; }
@media (max-width: 699px) {
  body.home--v3 .hfeat__progress { gap: 10px; }
  body.home--v3 .hfeat__track { width: 96px; }
  body.home--v3 .hfeat__ctrl { gap: 20px; margin-top: 18px; }
}
/* The homepage's video thumbnail carries its own title ("LOSE FAT") where the name tag sat,
   and on phones a slightly smaller play button keeps clear of Scott's face. */
body.home--v3:not(.wb) .hvid__who { display: none; }
@media (max-width: 699px) {
  body.home--v3:not(.wb) .hvid__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  body.home--v3:not(.wb) .hvid__play svg { width: 20px; height: 20px; }
}

/* ---------- Scott's video in the hero, under the headline; the results follow it ---------- */
body.home--v3 .hero__vsl { position: relative; max-width: 920px; margin: 36px auto 0; scroll-margin-top: 90px; }
body.home--v3 .hero__vsl .hvid__frame { --r: 22px; max-width: none; margin: 0; box-shadow: 0 50px 90px -50px rgba(23, 26, 33, 0.55), 0 0 0 1px var(--hair-l); }
body.home--v3 .hero__vsl + .hero__cta { margin-top: 28px; }
/* "Watch this first": a quiet label over the video, its small arrow nodding down at it */
body.home--v3 .hero__watch {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content;
  color: var(--muted); font: 400 10px/1 var(--wide); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
}
body.home--v3 .hero__watch-arrow { color: var(--blue); animation: watch-nod 1600ms cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes watch-nod { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
body.home--v3 .hero__vsl .hvid__frame.is-playing ~ .hero__watch, body.home--v3 .hero__vsl:has(.is-playing) .hero__watch { opacity: 0; transition: opacity 200ms var(--ease); }
body.home--v3 .hero__vsl + .hero__cta + .hfan { margin-top: 64px; }
@media (max-width: 699px) {
  body.home--v3 .hero__vsl { margin: 34px -4px 0; }
  body.home--v3 .hero__vsl .hvid__frame { --r: 16px; }
  body.home--v3 .hero__vsl + .hero__cta { margin-top: 22px; }
  body.home--v3 .hero__vsl + .hero__cta + .hfan { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { body.home--v3 .hero__watch-arrow { animation: none; } }
body.home--v3 .hero .hero__watch { margin: 0 auto 14px; }
@media (max-width: 699px) { body.home--v3 .hero .hero__watch { margin-bottom: 12px; } }
/* The prize, in a lime chip inside the tag over the headline */
body.home--v3 .hero__kicker--prize { gap: 10px; padding-right: 6px; }
body.home--v3 .hero__prize { --r: 999px; padding: 6px 11px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 389px) { body.home--v3 .hero__kicker--prize { gap: 8px; white-space: nowrap; font-size: 13px; } body.home--v3 .hero__prize { padding: 5px 9px; font-size: 12px; } }
/* The prize in the headline: ink on a lime marker */
body.home--v3 .hero__win { padding: 0 0.1em; margin: 0 -0.02em; background: linear-gradient(transparent 22%, var(--lime) 22%, var(--lime) 90%, transparent 90%); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Scott's copy pass (6 Nov 2026) ---------- */
/* The tag over the headline: plain caps text, no box, no dot */
body.home--v3 .hero__kicker--text { --r: 0; display: block; height: auto; padding: 0; background: none; box-shadow: none; color: var(--ink); font: 400 11px/1.5 var(--wide); letter-spacing: 0.22em; text-transform: uppercase; text-wrap: balance; }
body.home--v3 .hero__kicker--text:hover { rotate: none; scale: none; }
/* Headline test: one of four shows (hl-test.js sets html[data-hl]; no JS shows "a") */
body.home--v3 .hero__title .hlv { display: none; }
html:not([data-hl]) body.home--v3 .hero__title .hlv[data-hl="a"],
html[data-hl="a"] body.home--v3 .hero__title .hlv[data-hl="a"],
html[data-hl="b"] body.home--v3 .hero__title .hlv[data-hl="b"],
html[data-hl="d"] body.home--v3 .hero__title .hlv[data-hl="d"] { display: inline; }
/* Over the video: "Watch this first", then how long it takes */
body.home--v3 .hero__watch-head { margin: 0 auto 18px; }
body.home--v3 .hero .hero__watch-title { margin: 0; color: var(--ink); font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--font-heading); letter-spacing: -0.03em; }
body.home--v3 .hero .hero__watch-sub { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; color: var(--muted); font: 500 15px/1.4 var(--font-body); }
body.home--v3:not(.wb) .hero__vsl { margin-top: 44px; }
/* Under the video, before the buttons */
body.home--v3 .hero .hero__fit { margin: 28px auto 0; color: var(--ink); font: 600 18px/1.4 var(--font-body); text-wrap: balance; }
body.home--v3 .hero__fit + .hero__cta { margin-top: 18px; }
/* Proof, before the photos: how long, how many, how much */
body.home--v3 .hproof { display: flex; justify-content: center; max-width: 780px; margin: 52px auto 0; padding: 0; list-style: none; }
body.home--v3 .hproof li { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 10px; padding: 0 20px; }
body.home--v3 .hproof li + li { box-shadow: inset 1px 0 0 var(--hair-l); }
body.home--v3 .hproof b { color: var(--ink); font: 800 clamp(28px, 3.2vw, 42px)/1 var(--font-heading); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.home--v3 .hproof span { color: var(--muted); font: 400 10px/1.45 var(--wide); letter-spacing: 0.18em; text-transform: uppercase; text-wrap: balance; }
body.home--v3 .hproof + .hfan { margin-top: 56px; }
@media (max-width: 699px) {
  body.home--v3 .hero__kicker--text { font-size: 10px; letter-spacing: 0.18em; }
  body.home--v3:not(.wb) .hero__vsl { margin-top: 36px; }
  body.home--v3 .hero .hero__watch-head { margin-bottom: 14px; }
  body.home--v3 .hero .hero__fit { margin-top: 22px; font-size: 16px; }
  body.home--v3 .hproof { margin-top: 40px; }
  body.home--v3 .hproof li { gap: 8px; padding: 0 8px; }
  body.home--v3 .hproof b { font-size: clamp(20px, 6.2vw, 26px); }
  body.home--v3 .hproof span { font-size: 8px; letter-spacing: 0.12em; }
  body.home--v3 .hproof + .hfan { margin-top: 36px; }
}
/* Why January usually fails: the heading left, the story right */
body.home--v3 .hjan__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; max-width: 1120px; margin: 0 auto; align-items: start; }
body.home--v3 .hjan .hsec h2, body.home--v3 .hjan h2 { margin: 18px 0 0; text-align: left; }
body.home--v3 .hjan__body p { margin: 0 0 18px; color: var(--muted); font: 400 19px/1.6 var(--font-body); }
body.home--v3 .hjan__body p:last-child { margin-bottom: 0; }
body.home--v3 .hjan__body b { color: var(--ink); font-weight: 700; }
body.home--v3 .hjan__body .hjan__turn { margin: 30px 0; color: var(--ink); font: 700 clamp(24px, 2.4vw, 32px)/1.15 var(--font-heading); letter-spacing: -0.03em; text-wrap: balance; }
@media (max-width: 899px) {
  body.home--v3 .hjan__in { grid-template-columns: 1fr; gap: 24px; }
  body.home--v3 .hjan__body p { font-size: 17px; }
  body.home--v3 .hjan__body .hjan__turn { margin: 24px 0; }
}
body.home--v3 .hjan { --pt: 112px; }
body.home--v3 .hjan__body p { text-wrap: pretty; }
@media (max-width: 699px) { body.home--v3 .hjan { --pt: 64px; } }