/* ============================================================
   Homepage, built to Josh's mockup (WF-10, Nov 2026): sizes,
   weights, radii, shadows and colours are the mockup's own, at
   1440 wide. Narrower screens scale the same design down.
   Rounded corners are squircles where the browser can draw them,
   as in the mockup and the app.
   ============================================================ */

.home, .pg {
  --ink: #0E1424;
  /* #6A7390 (the brand's muted) is 4.2:1 on the #F2F3F7 page; this one
     holds 4.5:1 on the page and on white. */
  --muted: #5F6884;
  --navy: #0A1A4F;
  --blue: #3070FF;
  /* blue words (links, labels) use the brand's deep blue for 4.5:1 */
  --blue-ink: #1F5BFF;
  --lime: #D4FF3A;
  --page: #F2F3F7;
  --unit: #CFDCFF;
  --frost: rgba(255, 255, 255, 0.14);
  --hair: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  --card-shadow: 0 20px 50px -34px rgba(14, 20, 36, 0.3);
  --chip-shadow: 0 18px 40px -16px rgba(10, 20, 60, 0.45);
  --sky-card: linear-gradient(180deg, #0F2E91 0%, #1F4FD8 38%, #3E72EE 72%, #6F96F2 100%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* critically damped spring, approximated: fast out, no overshoot */
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1);
  --font-heading: Geist, -apple-system, system-ui, sans-serif;
  --font-body: Geist, -apple-system, system-ui, sans-serif;
  font-family: var(--font-body);
  color: var(--ink);
}
body.v2.home, body.v2.pg { background: var(--page); }
.home main, .pg main { overflow-x: clip; }
.home [data-sq], .pg [data-sq] { border-radius: var(--r); }
@supports (corner-shape: squircle) {
  .home [data-sq], .pg [data-sq] { corner-shape: squircle; border-radius: calc(var(--r) * 1.6); }
}

/* ---------- buttons and pills ---------- */
.hbtn {
  --r: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; font: 600 17px/1 var(--font-body); white-space: nowrap; text-decoration: none;
  transition: scale 380ms var(--spring), translate 380ms var(--spring), background-color 200ms var(--ease), box-shadow 300ms var(--ease);
}
.hbtn:active { scale: 0.97; transition-duration: 90ms; }
.hbtn__arrow { display: inline-block; transition: translate 380ms var(--spring); }
.hbtn:hover .hbtn__arrow, .hclose__link:hover .hbtn__arrow { translate: 4px 0; }
.hbtn--white { background: #fff; color: var(--navy); }
.hbtn--frost { background: var(--frost); color: #fff; box-shadow: var(--hair); }
.hbtn--primary { background: var(--blue); color: #fff; }
.hbtn--card { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -16px rgba(14, 20, 36, 0.35), inset 0 0 0 1px #E3E6EE; }
.home a:focus-visible, .home button:focus-visible, .pg a:focus-visible, .pg button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.hfeat__rail:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.pill {
  --r: 999px; display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 16px 0 10px;
  background: #fff; box-shadow: 0 6px 18px -10px rgba(14, 20, 36, 0.25); color: var(--ink); font: 500 14px/1 var(--font-body);
}
.pill__ico { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); }
.pill--sky { background: var(--frost); box-shadow: var(--hair); color: #fff; }

/* ---------- header ---------- */
.hh { position: fixed; inset: 0 0 auto; z-index: 40; transition: background-color 300ms var(--ease), backdrop-filter 300ms var(--ease), box-shadow 300ms var(--ease); }
.hh.is-scrolled { background: rgba(15, 46, 145, 0.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
/* The bar keeps one height; the row eases up 16px as the glass arrives, on the
   compositor, instead of the padding snapping (which made it jump at the top). */
.hh.is-scrolled .hh__inner { translate: 0 0; }
@media (prefers-reduced-transparency: reduce) { .hh.is-scrolled { background: #0F2E91; backdrop-filter: none; } }
.hh__inner { display: flex; align-items: center; gap: 40px; max-width: 1440px; margin: 0 auto; padding: 12px 56px; translate: 0 16px; transition: translate 500ms var(--spring); }
.hh__brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 800 18px/1 var(--font-body); letter-spacing: -0.3px; }
.hh__brand img { height: 18px; width: auto; filter: invert(1); }
.hh__nav { display: flex; gap: 32px; margin-left: 24px; }
.hh__nav a { position: relative; color: #fff; opacity: 0.85; font: 500 15px/1 var(--font-body); text-decoration: none; transition: opacity 200ms var(--ease); }
.hh__nav a:hover { opacity: 1; }
.hh__navfoot, .hh__nav .hh__get { display: none; }
.hh__login { margin-left: auto; color: #fff; font: 500 15px/1 var(--font-body); text-decoration: none; }
.hh__cta { transition: scale 380ms var(--spring), background-color 200ms var(--ease); }
.hh__cta:active { scale: 0.96; transition-duration: 90ms; }
.hh__cta { --r: 12px; display: inline-flex; align-items: center; height: 44px; margin-left: auto; padding: 0 20px; background: #fff; color: var(--navy); font: 600 15px/1 var(--font-body); text-decoration: none; }
.hh__menu, .hh__sr { display: none; }
.hh__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 1023px) {
  .hh { position: fixed; }
  /* no translate at all here (even 0): it would trap the full-screen menu inside the bar */
  .hh__inner, .hh.is-scrolled .hh__inner { gap: 12px; padding: 12px 16px; translate: none; }
  .hh__login { margin-left: auto; }
  .hh__cta { margin-left: auto; height: 40px; padding: 0 16px; }
  .hh__menu {
    display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px;
    background: var(--frost); box-shadow: var(--hair); cursor: pointer;
  }
  .hh__menu span:not(.hh__sr) { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform 200ms var(--ease); }
  .hh.is-open .hh__menu span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .hh.is-open .hh__menu span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (max-width: 559px) { .hh__cta, .hh__login { display: none; } .hh__menu { margin-left: auto; } }

/* ---------- the sky: hero, fan and Scott's video ---------- */
.hsky { position: relative; color: #fff; isolation: isolate; }
.hsky__bg {
  position: absolute; z-index: -2; left: -200px; right: -200px; top: 0; overflow: hidden;
  /* the sky ends 330px into the 562px video frame: 41% of the frame plus everything below it */
  bottom: calc(min(1000px, 100vw - 32px) * 0.2321 + var(--below-frame, 232px));
  background: linear-gradient(180deg, #0F2E91 0%, #1A44C8 30%, #2457E0 55%, #3466E8 78%, #5584EF 100%);
  border-radius: 0 0 50% 50% / 0 0 150px 150px;
}
.hsky__mark { position: absolute; left: calc(50% + 200px - 450px); top: 160px; width: 900px; max-width: none; height: auto; filter: invert(1); opacity: 0.05; }
.hsky__glow { position: absolute; z-index: -1; left: 50%; pointer-events: none; }
.hsky__glow--white { top: 1270px; width: 2000px; height: 960px; margin-left: -1000px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0) 72%); }
.hsky__glow--blue { top: 1790px; width: 1300px; height: 500px; margin-left: -650px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(48, 112, 255, 0.35), rgba(48, 112, 255, 0) 70%); }

.hero { padding: 110px 16px 0; text-align: center; }
.hero__kicker {
  --r: 999px; display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 16px;
  background: var(--frost); box-shadow: var(--hair); color: #fff; font: 500 14px/1 var(--font-body); text-decoration: none;
}
.hero__kicker i { width: 8px; height: 8px; border-radius: 4px; background: var(--lime); }
.hero h1 { margin: 22px auto 0; max-width: 1100px; color: #fff; font: 700 clamp(44px, 5.84vw, 84px)/1 var(--font-heading); letter-spacing: -0.042em; }
.hero__sub { max-width: 640px; margin: 20px auto 0; color: var(--unit); font: 400 20px/1.45 var(--font-body); }
.hero__cta { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }
.hero__checks { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--unit); font: 400 14px/1.3 var(--font-body); }
.hero__checks li { display: inline-flex; align-items: center; gap: 6px; }
.hero__checks li::before {
  content: ""; width: 15px; height: 15px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4FF3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* the fan: seven before/afters, the centre one named */
.hfan { --u: 1; position: relative; height: calc(460px * var(--u)); margin-top: 66px; }
.hfan__glow { position: absolute; left: 50%; top: calc(300px * var(--u)); width: 900px; height: 260px; margin-left: -450px; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 65%); }
.hfan__row {
  position: absolute; left: 50%; top: 0; width: 1700px; height: 430px; margin-left: -850px;
  perspective: 1400px; transform: scale(var(--u)); transform-origin: 50% 0; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.hfan.is-dragging .hfan__row { cursor: grabbing; }
.hfan__item {
  position: absolute; left: 50%; top: 50%; width: 320px; height: 410px; margin: -205px 0 0 -160px; display: block; text-decoration: none;
  -webkit-tap-highlight-color: transparent; will-change: transform;
  animation: hfan-in 1100ms var(--spring) backwards; animation-delay: calc(var(--d) * 70ms + 640ms);
}
.hfan.is-live .hfan__item { animation: none; }
.hfan__item img { -webkit-user-drag: none; pointer-events: none; }
.hfan__card { --r: 26px; position: relative; display: block; height: 100%; padding: 6px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 40px 70px -30px rgba(6, 20, 80, 0.6); transition: background-color 400ms var(--ease), translate 420ms var(--spring); }
.hfan__item.is-active .hfan__card { background: rgba(255, 255, 255, 0.95); }
.hfan__badge {
  --r: 11px; position: absolute; left: 50%; bottom: -18px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  background: var(--lime); color: var(--navy); font: 700 15px/1 var(--font-body); white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35);
  translate: -50% 6px; scale: 0.9; opacity: 0; transition: opacity 300ms var(--ease), translate 450ms var(--spring), scale 450ms var(--spring);
}
.hfan__badge b { font-weight: 500; }
.hfan__item.is-active .hfan__badge { translate: -50% 0; scale: 1; opacity: 1; }
.hfan.is-dragging .hfan__badge, .hfan.is-turning .hfan__badge { opacity: 0; transition-duration: 150ms; }
.hfan__item:focus-visible { outline: none; }
.hfan__item:focus-visible .hfan__card { outline: 3px solid var(--lime); outline-offset: 3px; }
/* the fan deals out from a stack behind the centre card */
@keyframes hfan-in { from { opacity: 0; translate: calc(var(--k) * -232px) 90px; scale: 0.86; } }

/* two photo tiles cut from one before/after composite; the before in grey */
.pair { display: flex; gap: 6px; }
.pair__t { --r: 20px; position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; background: #DBDBDB; }
.pair__t img { position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; object-position: 0 25%; }
.pair__t--after img { left: -100%; object-position: 100% 25%; }

/* Scott's video */
.hvid { padding: 140px 16px 0; text-align: center; }
.hsec h2, .hvid h2 { margin: 18px auto 0; font: 700 clamp(34px, 3.6vw, 52px)/1.05 var(--font-heading); letter-spacing: -2px; color: var(--ink); text-wrap: balance; }
.hvid h2 { color: #fff; }
.hvid__sub { margin: 12px auto 0; max-width: 760px; color: var(--unit); font: 400 19px/1.45 var(--font-body); text-wrap: balance; }
.hvid__frame {
  --r: 36px; position: relative; max-width: 1000px; margin: 60px auto 0; aspect-ratio: 1000 / 562; overflow: hidden;
  background: #DBDBDB; box-shadow: 0 40px 90px -40px rgba(6, 20, 80, 0.45); text-align: left;
}
.hvid__poster, .hvid__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* contain, not cover: the frame is the video's shape anyway, and iPhone's own full-screen
   player copies cover and crops the video to the phone's shape */
.hvid__frame video { object-fit: contain; }
.hvid__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 60, 0.35), rgba(10, 20, 60, 0) 35%, rgba(10, 20, 60, 0) 60%, rgba(10, 20, 60, 0.55)); pointer-events: none; }
.hvid__who { position: absolute; left: 28px; top: 24px; display: flex; align-items: center; gap: 10px; color: #fff; }
.hvid__av { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--navy); font: 700 14px/1 var(--font-body); }
.hvid__who b { display: block; font: 700 16px/1.3 var(--font-body); }
.hvid__who small { display: block; font: 400 13px/1.3 var(--font-body); opacity: 0.85; }
.hvid__play { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 200ms var(--ease); }
.hvid__play:hover { transform: scale(1.04); }
.hvid__play:active { transform: scale(0.97); }
.hvid__play i, .wplay i { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25) 40%, rgba(255, 255, 255, 0) 70%); }
.hvid__play > span, .wplay > span { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 16px 40px rgba(6, 20, 80, 0.35); }
.hvid__bar { position: absolute; left: 28px; right: 28px; bottom: 24px; }
.hvid__track { --r: 3px; position: relative; height: 5px; background: rgba(255, 255, 255, 0.35); }
.hvid__track i { position: absolute; top: -2px; width: 3px; height: 9px; border-radius: 2px; background: #fff; }
.hvid__track b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: #fff; }
.hvid__times { display: flex; justify-content: space-between; margin-top: 10px; color: #fff; font: 400 13px/1 var(--font-body); opacity: 0.9; }
.hvid__frame.is-playing .hvid__poster, .hvid__frame.is-playing .hvid__shade, .hvid__frame.is-playing .hvid__who, .hvid__frame.is-playing .hvid__play, .hvid__frame.is-playing .hvid__bar { display: none; }
.hvid__chapters { --r: 24px; display: flex; max-width: 1000px; margin: 20px auto 0; padding: 8px; list-style: none; background: #fff; box-shadow: 0 10px 30px -20px rgba(14, 20, 36, 0.25); text-align: left; }
.hvid__chapters li { flex: 1; display: flex; }
.hvid__chapters button {
  --r: 18px; flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--ink); font: 600 15px/1.25 var(--font-body); transition: background-color 200ms var(--ease);
}
.hvid__chapters button small { display: block; color: var(--muted); font: 400 13px/1.3 var(--font-body); }
.hvid__chapters button.is-on { background: #EEF3FF; }
.hvid__cico { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #F2F3F7; fill: var(--blue); }
.hvid__chapters .is-on .hvid__cico { background: var(--blue); fill: #fff; }
.hvid__cta { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }
.hvid__cta p { margin: 14px 0 0; color: var(--muted); font: 400 15px/1.5 var(--font-body); }
.hvid__cta p a { color: var(--blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- light sections ---------- */
.hsec { --pt: 0px; --pb: 0px; max-width: 1440px; margin: 0 auto; padding: 0 80px; }
/* v2.css pads every main > section (with !important on phones); the homepage sets its own */
body.v2.home main > section.hsec, body.v2.home main > section.hclose { padding-top: var(--pt) !important; padding-bottom: var(--pb) !important; }
.hsec__head { text-align: center; }
.hsec__sub { max-width: 620px; margin: 14px auto 0; color: var(--muted); font: 400 19px/1.5 var(--font-body); text-wrap: balance; }

.hstats { --pt: 140px; --pb: 90px; }
.hstats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.hstats__grid li { --r: 30px; padding: 32px 26px 30px; background: #fff; box-shadow: var(--card-shadow); text-align: center; }
.hstats__grid i { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--lime); }
.hstats__grid b { display: block; margin-top: 20px; font: 800 46px/1.1 var(--font-heading); letter-spacing: -1.8px; color: var(--ink); }
.hstats__grid span { display: block; margin-top: 2px; color: var(--muted); font: 400 15px/1.4 var(--font-body); }

.hfeat { --pt: 70px; --pb: 70px; }
.hfeat__rail {
  display: flex; gap: 18px; margin: 48px -80px 0; padding: 0 80px 30px; scroll-padding-inline: 80px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.hfeat__rail::-webkit-scrollbar { display: none; }
@media (min-width: 1441px) { .hfeat__rail { margin-inline: calc(640px - 50vw); padding-inline: calc(50vw - 640px); scroll-padding-inline: calc(50vw - 640px); } }
.fcard { --r: 34px; flex: none; display: flex; flex-direction: column; width: 420px; height: 620px; padding: 10px; background: #fff; box-shadow: 0 20px 50px -38px rgba(14, 20, 36, 0.3); scroll-snap-align: start; }
.fcard__head { display: flex; gap: 16px; padding: 22px 22px 20px; }
.fcard__head > div { flex: 1; }
.fcard__head h3 { margin: 0; font: 700 24px/1.2 var(--font-heading); letter-spacing: -0.5px; color: var(--ink); }
.fcard__head p { margin: 6px 0 0; color: var(--muted); font: 400 16px/1.5 var(--font-body); }
.fcard__go { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #F2F3F7; transition: transform 160ms var(--ease); }
.fcard__go:active { transform: scale(0.94); }
.fcard__stage { --r: 24px; position: relative; flex: 1; overflow: hidden; background-color: #F5F6FA; background-image: radial-gradient(#DCE0EA 1px, transparent 1px); background-size: 14px 14px; }
.fcard--sky { background: var(--sky-card); }
.fcard--sky h3 { color: #fff; }
.fcard--sky .fcard__head p { color: var(--unit); }
.fcard--sky .fcard__go { background: rgba(255, 255, 255, 0.08); }
.fcard--sky .fcard__stage { background: rgba(255, 255, 255, 0.08); }
.fphone { position: absolute; left: 50%; bottom: -50px; width: 230px; margin-left: -115px; }
.fphone__body { height: 380px; padding: 8px 8px 0; border-radius: 38px 38px 0 0; background: #0E1424; }
.fphone__screen { height: 100%; overflow: hidden; border-radius: 30px 30px 0 0; }
.fphone__screen img { display: block; width: 100%; height: auto; }
.fchip { --r: 16px; position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; box-shadow: var(--chip-shadow); line-height: 1.25; text-align: left; }
.fchip--l { left: -60px; top: 22%; }
.fchip--r { right: -60px; bottom: 16%; }
.fchip b { display: block; color: var(--ink); font: 700 14px/1.25 var(--font-body); white-space: nowrap; }
.fchip small { display: block; color: var(--muted); font: 400 12px/1.25 var(--font-body); white-space: nowrap; }
.fchip__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-style: normal; }
.fchip__ico--sm { width: 28px; height: 28px; }
.fchip__start { --r: 9px; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; background: var(--lime); color: var(--navy); font: 600 14px/1 var(--font-body); white-space: nowrap; }
.fchip__ring { flex: none; }
.fchip--macros { display: block; width: 242px; padding: 4px 16px 12px; }
.fmacro { margin-top: 10px; }
.fmacro > div { display: flex; align-items: center; justify-content: space-between; font: 400 13px/1.3 var(--font-body); }
.fmacro > div b { font-size: 13px; }
.fmacro > div span { color: var(--muted); }
.fmacro > i { --r: 4px; display: block; height: 7px; margin-top: 5px; background: #EEF0F5; }
.fmacro > i b { --r: 4px; display: block; height: 100%; background: var(--blue); }
.fchip--pill { --r: 999px; gap: 8px; padding: 8px 14px 8px 8px; }
.fchip--pill b { font-size: 16px; }
.fchip__rank { display: flex !important; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #FFD54A; color: var(--navy) !important; font-size: 12px !important; }
.fchip__av { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fchip--weeks { gap: 5px; padding: 10px; }
.fchip--weeks span { --r: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #F2F3F7; }
.fchip--weeks span.on { background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hfeat__ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: -6px; }
.hfeat__btns { display: flex; gap: 10px; }
.hround { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px -12px rgba(14, 20, 36, 0.3); cursor: pointer; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.hround:active { transform: scale(0.94); }
.hround:disabled { opacity: 0.4; cursor: default; }
.hfeat__dots { display: flex; gap: 6px; }
.hfeat__dots i { width: 8px; height: 8px; border-radius: 4px; background: #C9CFDB; transition: width 250ms var(--ease), background-color 250ms var(--ease); }
.hfeat__dots i.is-on { width: 24px; background: var(--blue); }

/* ---------- results wall ---------- */
.hwall { --pt: 70px; --pb: 70px; }
.home .wall { position: relative; height: 940px; margin-top: 48px; overflow: hidden; columns: auto; column-gap: normal; }
.wall__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wall__col { display: flex; flex-direction: column; gap: 16px; }
.wcard { --r: 28px; position: relative; display: block; margin: 0; background: #fff; box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; }
.wphoto { padding: 8px; }
.wphoto__foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 8px 6px; }
.wphoto__foot b { font: 700 16px/1.2 var(--font-body); }
.wkg { --r: 999px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; background: var(--lime); color: var(--navy); font: 700 14px/1 var(--font-body); white-space: nowrap; }
.wchat { --r: 24px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(14, 20, 36, 0.45); }
.wchat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EEF0F5; }
.wchat__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.wchat__head b { display: block; font: 700 14px/1.3 var(--font-body); }
.wchat__head small { display: block; color: var(--muted); font: 400 11px/1.3 var(--font-body); }
.wchat__body { padding: 14px; }
.wchat__in { max-width: 78%; margin: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #F0F1F5; color: var(--ink); font: 400 14px/1.4 var(--font-body); }
.wchat__out { width: fit-content; max-width: 70%; margin: 8px 0 0 auto; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, #5B8CFF, #7B61FF); color: #fff; font: 400 14px/1.4 var(--font-body); }
.wquote { padding: 26px; }
.wquote__stars { display: flex; gap: 2px; }
.wquote blockquote { margin: 12px 0 0; font: 600 19px/1.4 var(--font-body); color: var(--ink); }
.wquote figcaption { margin-top: 12px; color: var(--muted); font: 400 14px/1.4 var(--font-body); }
.wvideo { height: 380px; overflow: hidden; background: #DBDBDB; box-shadow: none; }
.wvideo > img, .wvideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wvideo__btn { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; background: none; cursor: pointer; }
.wplay { position: absolute; inset: 0; }
.wplay i { inset: -18px; }
.wvideo__top { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.wvideo__top b { color: #fff; font: 700 16px/1.2 var(--font-body); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }
.wstat, .wprize { padding: 26px; }
.wstat b, .wprize b { display: block; font: 800 46px/1.1 var(--font-heading); letter-spacing: -1.8px; color: var(--ink); }
.wstat span, .wprize span { display: block; margin-top: 4px; color: var(--muted); font: 400 15px/1.4 var(--font-body); }
.wprize { background: var(--sky-card); color: #fff; }
.wprize b { color: var(--lime); }
.wprize span { color: var(--unit); }
.wall__fade {
  position: absolute; z-index: 3; left: -80px; right: -80px; bottom: 0; height: 440px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 14px; padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(242, 243, 247, 0), rgba(242, 243, 247, 0.85) 45%, #F2F3F7 66%);
}
.wall__fade span { color: var(--muted); font: 400 15px/1 var(--font-body); }
.hwall__fine { max-width: 640px; margin: 28px auto 0; color: var(--muted); font: 400 12px/1.5 var(--font-body); text-align: center; }

@media (hover: hover) {
  .hbtn--white:hover, .hbtn--card:hover { background: #F5F7FF; }
  .hbtn--frost:hover { background: rgba(255, 255, 255, 0.2); }
  .hbtn--primary:hover { background: #1F5BFF; }
  .hvid__chapters button:not(.is-on):hover { background: #F5F6FA; }
}

/* ---------- narrower screens: the same design, scaled ---------- */
@media (max-width: 1279px) {
  .hsec { padding-inline: 40px; }
  .hfeat__rail { margin-inline: -40px; padding-inline: 40px; scroll-padding-inline: 40px; }
  .wall__fade { left: -40px; right: -40px; }
}
@media (max-width: 1100px) {
  .wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__col:nth-child(n + 3) { display: none; }
  .home .wall { height: 1180px; }
}
@media (max-width: 899px) {
  .hfan { --u: 0.7; }
  .hstats__grid { grid-template-columns: repeat(2, 1fr); }
  .hvid__chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .hsky__bg { --below-frame: 312px; }
}
@media (max-width: 699px) {
  .hsec { padding-inline: 16px; }
  .hfeat__rail { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .wall__fade { left: -16px; right: -16px; }
  .hero { padding-top: 96px; }
  .hero__br { display: none; }
  .hero__sub { font-size: 17px; }
  .hero__cta { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto; }
  .hero__checks { flex-direction: column; }
  .hfan { --u: 0.6; margin-top: 48px; }
  .hfan__glow { width: 600px; margin-left: -300px; }
  .hsky__bg { border-radius: 0 0 50% 50% / 0 0 60px 60px; --below-frame: 470px; }
  .hsky__mark { left: 120px; width: 600px; top: 220px; }
  .hvid { padding-top: 96px; }
  .hvid__sub, .hsec__sub { font-size: 17px; }
  .hsec h2, .hvid h2 { letter-spacing: -1.2px; }
  .hvid__frame { --r: 24px; margin-top: 40px; }
  .hvid__who { left: 14px; top: 14px; }
  .hvid__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .hvid__play svg { width: 26px; height: 26px; }
  .hvid__bar { left: 14px; right: 14px; bottom: 12px; }
  .hvid__chapters { grid-template-columns: 1fr; }
  .hvid__cta .hbtn { width: 100%; max-width: 360px; }
  .hstats { --pt: 96px; --pb: 40px; }
  .hfeat, .hwall { --pt: 64px; --pb: 48px; }
  .hhow { --pt: 48px; --pb: 32px; }
  .hstats__grid { gap: 12px; }
  .hstats__grid li { padding: 24px 12px; }
  .hstats__grid i { width: 48px; height: 48px; }
  .hstats__grid b { margin-top: 16px; font-size: 32px; letter-spacing: -1px; }
  .hstats__grid span { font-size: 14px; }
  .fcard { width: min(420px, calc(100vw - 48px)); height: 580px; }
  .fchip--l { left: -40px; }
  .fchip--r { right: -40px; }
  .wall__grid { grid-template-columns: 1fr; }
  .wall__col:nth-child(2) { display: flex; }
  .home .wall { height: 1500px; }
}
@media (prefers-reduced-motion: reduce) {
  .hfan__item { animation: none; }
  .hbtn, .hround, .hvid__play, .fcard__go, .hvid__chapters button, .hfeat__dots i { transition: none; }
  .hh__inner { transition: none; }
}
@media (max-width: 899px) { .hsky__glow { display: none; } }

/* ============================================================
   Below the results: how it works, the guarantee, questions,
   the closing band and the footer (8wtc-landing-page-full)
   ============================================================ */
.hhow { --pt: 70px; --pb: 60px; }
.hhow__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 48px 0 0; padding: 0; list-style: none; }
.hstep { --r: 30px; position: relative; padding: 28px 28px 30px; background: #fff; box-shadow: var(--card-shadow); }
.hstep + .hstep::before { content: ""; position: absolute; left: -18px; top: 54px; width: 18px; border-top: 2px dashed #CDD3E0; }
.hstep__top { display: flex; justify-content: space-between; align-items: center; }
.hstep__ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--lime); transition: scale 420ms var(--spring); }
.hstep__tag { --r: 8px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; background: #EAF0FF; color: var(--blue-ink); font: 600 13px/1 var(--font-body); }
.hstep h3 { margin: 28px 0 0; font: 700 21px/1.25 var(--font-heading); letter-spacing: -0.4px; color: var(--ink); }
.hstep p { margin: 10px 0 0; color: var(--muted); font: 400 16px/1.55 var(--font-body); }

.hguar { --pt: 90px; --pb: 40px; }
.hguar__card {
  --r: 40px; position: relative; display: grid; grid-template-columns: 340px 1fr; align-items: center; overflow: hidden; padding: 70px 70px 70px 0;
  background:
    radial-gradient(420px 320px at 170px 50%, rgba(48, 112, 255, 0.35), transparent 70%),
    radial-gradient(520px 360px at 85% 95%, rgba(91, 70, 220, 0.35), transparent 70%),
    #0A1033;
  color: #fff;
}
.hguar__shield { position: relative; display: flex; justify-content: center; }
.hguar__shield::before { content: ""; position: absolute; inset: -60px; background: radial-gradient(circle, rgba(212, 255, 58, 0.28), transparent 60%); }
.hguar__shield svg { position: relative; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.35)); }
.hguar__card.is-in .hguar__shield svg { animation: shield-in 900ms var(--spring) 120ms backwards; }
@keyframes shield-in { from { opacity: 0; scale: 0.82; rotate: -8deg; } }
.hguar__eyebrow { margin: 0; color: var(--lime); font: 700 13px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.hguar h2 { margin: 16px 0 0; color: #fff; font: 700 clamp(32px, 3.4vw, 48px)/1.08 var(--font-heading); letter-spacing: -1.6px; text-wrap: balance; }
.hguar__text { max-width: 600px; margin: 18px 0 0; color: rgba(255, 255, 255, 0.72); font: 400 18px/1.55 var(--font-body); }
.hguar__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.hguar__chips li {
  --r: 12px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font: 600 16px/1 var(--font-body);
}
.hguar__chips i { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); }

.hfaq { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: start; --pt: 120px; --pb: 120px; }
.hfaq__side { position: sticky; top: 100px; }
.hfaq h2 { margin: 18px 0 0; font: 700 clamp(40px, 4vw, 56px)/1.02 var(--font-heading); letter-spacing: -2px; color: var(--ink); }
.hfaq__sub { margin: 18px 0 0; color: var(--muted); font: 400 18px/1.5 var(--font-body); }
.hfaq__help { --r: 24px; display: flex; flex-direction: column; align-items: flex-start; margin-top: 36px; padding: 24px; background: #fff; box-shadow: var(--card-shadow); }
.hfaq__face { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; object-fit: cover; }
.hfaq__help b { margin-top: 18px; font: 700 18px/1.3 var(--font-heading); }
.hfaq__help span { margin-top: 6px; color: var(--muted); font: 400 14px/1.4 var(--font-body); }
.hfaq__touch { --r: 10px; display: inline-flex; align-items: center; height: 48px; margin-top: 20px; padding: 0 24px; background: var(--ink); color: #fff; font: 600 15px/1 var(--font-body); text-decoration: none; transition: scale 380ms var(--spring), background-color 200ms var(--ease); }
.hfaq__touch:active { scale: 0.96; transition-duration: 90ms; }
.hfaq__list { display: flex; flex-direction: column; gap: 10px; }
.hq { --r: 20px; background: #fff; box-shadow: var(--card-shadow), inset 0 0 0 2px transparent; transition: box-shadow 300ms var(--ease); }
.hq[open] { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--blue); }
.hq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 80px; padding: 0 24px; cursor: pointer; list-style: none;
  color: var(--ink); font: 600 18px/1.35 var(--font-body);
}
.hq summary::-webkit-details-marker { display: none; }
.hq summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #F2F3F7; transition: background-color 300ms var(--ease), scale 380ms var(--spring); }
.hq summary i::before, .hq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--ink); transition: rotate 380ms var(--spring), background-color 300ms var(--ease), opacity 300ms var(--ease); }
.hq summary i::after { rotate: 90deg; }
.hq[open] summary i { background: var(--blue); }
.hq[open] summary i::before, .hq[open] summary i::after { background: #fff; }
.hq[open] summary i::after { rotate: 0deg; opacity: 0; }
.hq summary:active i { scale: 0.9; }
.hq__a { overflow: hidden; }
.hq__a p { margin: 0; padding: 0 76px 24px 24px; color: var(--muted); font: 400 16px/1.6 var(--font-body); }
.hq__a a { color: var(--blue-ink); font-weight: 600; }

.hclose {
  position: relative; z-index: 2; overflow: hidden; margin-top: -1px; --pt: 190px; --pb: 200px; padding-inline: 16px; text-align: center; color: #fff;
  clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
  background:
    radial-gradient(600px 420px at 18% 62%, rgba(36, 87, 224, 0.5), transparent 70%),
    radial-gradient(640px 420px at 82% 58%, rgba(91, 70, 220, 0.45), transparent 70%),
    #060B22;
}
.hclose__field { position: absolute; inset: 0; pointer-events: none; }
.cghost { --r: 22px; position: absolute; width: 170px; height: 150px; overflow: hidden; border-radius: 22px; opacity: 0.16; rotate: var(--rot); }
.cghost img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) blur(1px); }
.cghost--1 { left: -40px; top: 80px; --rot: -10deg; } .cghost--2 { left: 22%; top: 60px; --rot: 8deg; } .cghost--3 { left: 54%; top: 40px; --rot: 6deg; }
.cghost--4 { left: 70%; top: 90px; --rot: -8deg; } .cghost--5 { right: -30px; top: 40px; --rot: 12deg; } .cghost--6 { left: -20px; top: 430px; --rot: 8deg; }
.cghost--7 { left: 27%; top: 470px; --rot: -4deg; } .cghost--8 { left: 43%; top: 500px; --rot: 6deg; } .cghost--9 { right: -20px; top: 480px; --rot: -10deg; }
.hclose__cards { position: absolute; inset: 0; pointer-events: none; }
.ccard {
  --r: 20px; position: absolute; z-index: 2; display: block; width: 190px; padding: 8px; pointer-events: auto;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; text-decoration: none; rotate: var(--rot);
  translate: 0 var(--py, 0px); transition: rotate 500ms var(--spring), scale 500ms var(--spring);
}
.ccard:hover { rotate: 0deg; scale: 1.04; }
.ccard .pair__t { --r: 14px; }
.ccard em { position: absolute; z-index: 1; top: 8px; left: 8px; padding: 3px 7px; border-radius: 6px; background: #fff; color: var(--ink); font: 600 11px/1 var(--font-body); font-style: normal; }
.ccard__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 2px; }
.ccard__foot b { font: 700 14px/1 var(--font-body); }
.ccard .wkg { height: 24px; padding: 0 8px; font-size: 12px; }
.ccard--a { left: 6%; top: 150px; --rot: -8deg; } .ccard--b { right: 6%; top: 120px; --rot: 7deg; }
.ccard--c { left: 10%; top: 480px; --rot: 5deg; } .ccard--d { right: 9%; top: 470px; --rot: -6deg; }
.hclose__inner { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; }
.pill--dark { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; text-decoration: none; }
.hclose h2 { margin: 26px 0 0; color: #fff; font: 700 clamp(48px, 6.6vw, 96px)/1 var(--font-heading); letter-spacing: -0.045em; }
.hclose__sub { max-width: 600px; margin: 26px auto 0; color: rgba(207, 220, 255, 0.85); font: 400 20px/1.6 var(--font-body); }
.hclose__cta { display: flex; justify-content: center; align-items: center; gap: 36px; margin-top: 40px; }
.hbtn--lg { --r: 16px; height: 64px; padding: 0 32px; font-size: 19px; }
.hclose__link { color: #fff; font: 600 19px/1 var(--font-body); text-decoration: none; }
.hclose__proof { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; color: rgba(207, 220, 255, 0.9); font: 400 14px/1.4 var(--font-body); text-align: left; }
.hclose__faces { display: flex; }
.hclose__faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #3070FF; }
.hclose__faces img + img { margin-left: -10px; }
.hclose__stars { display: block; color: #FFB800; font-size: 15px; letter-spacing: 2px; }

.hfoot { position: relative; z-index: 1; background: #fff; color: var(--ink); }
/* tucks under the closing band's slanted edge */
body:has(.hclose) .hfoot { margin-top: -80px; padding-top: 80px; }
.hfoot__inner { max-width: 1440px; margin: 0 auto; padding: 40px 80px 50px; }
.hfoot__grid { display: grid; grid-template-columns: 460px repeat(3, 1fr); gap: 32px; }
.hfoot__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 20px/1 var(--font-body); }
.hfoot__logo img { height: 20px; width: auto; }
.hfoot__brand p { max-width: 380px; margin: 16px 0 0; color: var(--muted); font: 400 15px/1.6 var(--font-body); }
.hfoot__stores { display: flex; gap: 10px; margin-top: 22px; }
.fstore { --r: 10px; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; background: var(--ink); color: #fff; fill: #fff; text-decoration: none; font: 700 16px/1.05 var(--font-body); transition: scale 380ms var(--spring); }
.fstore:active { scale: 0.96; transition-duration: 90ms; }
.fstore small { display: block; font: 400 11px/1.2 var(--font-body); opacity: 0.85; }
.hfoot h4 { margin: 0; font: 600 15px/1 var(--font-body); color: var(--ink); }
.hfoot ul { margin: 16px 0 0; padding: 0; list-style: none; }
.hfoot li + li { margin-top: 12px; }
.hfoot li a { color: var(--muted); font: 400 15px/1.3 var(--font-body); text-decoration: none; transition: color 200ms var(--ease); }
.hfoot li a:hover { color: var(--ink); }
.hfoot__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 50px; padding-top: 24px; border-top: 1px solid #E6E9F0; color: var(--muted); font: 400 13px/1.4 var(--font-body); }

/* ============================================================
   Micro-interactions (apple-design): feedback on press, things
   lift towards the pointer, nothing bounces unless thrown.
   Hover and press use the separate translate/scale properties so
   they compose with reveal animations instead of fighting them.
   ============================================================ */
.hstats__grid li, .hstep, .wcard, .fcard, .hround, .hvid__chapters button, .hguar__chips li, .fcard__go, .hfan__card, .hvid__play > span, .wplay > span {
  transition: translate 420ms var(--spring), scale 380ms var(--spring), box-shadow 420ms var(--ease), rotate 420ms var(--spring), background-color 250ms var(--ease);
}
.fphone, .fchip { transition: translate 520ms var(--spring); }
.pair__t img { transition: scale 700ms var(--spring); }
.hround:active, .hvid__chapters button:active, .fcard__go:active { scale: 0.94; transition-duration: 90ms; }
.wcard:active, .hstep:active { scale: 0.985; transition-duration: 90ms; }
.hfeat__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hfeat__rail.is-dragging * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .hfeat__rail { cursor: grab; }
  .hstats__grid li:hover, .hstep:hover { translate: 0 -4px; box-shadow: 0 30px 60px -34px rgba(14, 20, 36, 0.38); }
  .hstep:hover .hstep__ico { scale: 1.08; }
  .wcard:hover { translate: 0 -4px; box-shadow: 0 34px 60px -34px rgba(14, 20, 36, 0.4); }
  .wphoto:hover .pair__t img { scale: 1.04; }
  .fcard:hover .fphone { translate: 0 -10px; }
  .fcard:hover .fchip--l { translate: -6px -4px; }
  .fcard:hover .fchip--r { translate: 6px -4px; }
  .fcard__go:hover { rotate: 45deg; background: #E6E9F2; }
  .fcard--sky .fcard__go:hover { background: rgba(255, 255, 255, 0.16); }
  .hround:not(:disabled):hover { translate: 0 -2px; box-shadow: 0 12px 24px -12px rgba(14, 20, 36, 0.4); }
  .hguar__chips li:hover { translate: 0 -2px; background: rgba(255, 255, 255, 0.12); }
  .hfan:not(.is-dragging):not(.is-turning) .hfan__item.is-active:hover .hfan__card { translate: 0 -8px; }
  .hvid__play:hover > span, .wvideo__btn:hover .wplay > span { scale: 1.06; }
  .hq summary:hover i { background: #E6E9F2; }
  .hq[open] summary:hover i { background: var(--blue); }
  .hfaq__touch:hover { background: #1E2640; }
}

/* ---------- narrower screens for the new sections ---------- */
@media (max-width: 1100px) {
  .hhow__steps { grid-template-columns: repeat(2, 1fr); }
  .hstep:nth-child(3)::before { display: none; }
  .hguar__card { grid-template-columns: 240px 1fr; padding: 56px 48px 56px 0; }
  .hfaq { grid-template-columns: 1fr; gap: 40px; }
  .hfaq__side { position: static; }
  .hfoot__inner { padding-inline: 40px; }
  .hfoot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .hfoot__brand { grid-column: 1 / -1; }
  .ccard--c, .ccard--d { display: none; }
}
@media (max-width: 699px) {
  .hhow__steps { grid-template-columns: 1fr; gap: 12px; }
  .hstep::before { display: none; }
  .hstep h3 { margin-top: 20px; }
  .hguar { --pt: 40px; --pb: 24px; }
  .hguar__card { --r: 28px; grid-template-columns: 1fr; padding: 40px 22px 32px; text-align: center; }
  .hguar__shield svg { width: 100px; height: 122px; }
  .hguar__copy { margin-top: 24px; }
  .hguar__chips { justify-content: center; }
  .hguar__text { font-size: 16px; }
  .hfaq { --pt: 72px; --pb: 80px; }
  .hq summary { min-height: 68px; padding: 0 16px; font-size: 16px; }
  .hq__a p { padding: 0 16px 20px; font-size: 15px; }
  .hclose { --pt: 130px; --pb: 150px; clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); }
  .ccard { display: none; }
  .hclose__sub { font-size: 17px; }
  .hclose__cta { flex-direction: column; gap: 20px; }
  .hclose__cta .hbtn { width: 100%; max-width: 360px; }
  .hfoot__inner { padding: 36px 16px 110px; }
  .hfoot__grid { grid-template-columns: 1fr 1fr; }
  .hfoot__bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hstats__grid li, .hstep, .wcard, .fcard, .hround, .hvid__chapters button, .hguar__chips li, .fcard__go, .hfan__card, .fphone, .fchip, .pair__t img, .ccard, .hq, .hq summary i, .hq summary i::before, .hq summary i::after, .hbtn__arrow { transition: none; }
  .hguar__card.is-in .hguar__shield svg { animation: none; }
  .ccard { translate: none; }
}

/* ============================================================
   Round 3: hero entrance, load more, adaptive header glass,
   phone closing band, and more micro-interactions
   ============================================================ */

/* Hero entrance: the header settles, then the words materialise one by
   one (rise + un-blur), then the copy, buttons and checks, then the fan
   deals out. Plays once on load. */
.hh { animation: hh-in 700ms var(--spring) 80ms backwards; }
@keyframes hh-in { from { opacity: 0; translate: 0 -12px; } }
.hw { display: inline-block; animation: hw-in 900ms var(--spring) backwards; animation-delay: calc(140ms + var(--w) * 70ms); }
@keyframes hw-in { from { opacity: 0; translate: 0 0.32em; filter: blur(10px); } }
.hin { animation: hin-in 800ms var(--spring) backwards; animation-delay: var(--d, 0ms); }
@keyframes hin-in { from { opacity: 0; translate: 0 14px; } }

/* Header glass: navy over the sky and the dark closing band, light frosted
   glass with dark text over the light sections (vibrancy, not a flat bar). */
.hh.is-scrolled.is-light {
  background: rgba(255, 255, 255, 0.68); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(14, 20, 36, 0.08), 0 8px 24px -16px rgba(10, 26, 79, 0.25);
}
.hh.is-light .hh__brand, .page-light .hh .hh__brand { color: var(--ink); }
.hh.is-light .hh__brand img, .page-light .hh .hh__brand img { filter: none; }
.hh.is-light .hh__nav a, .page-light .hh .hh__nav a { color: var(--ink); opacity: 0.7; }
.hh.is-light .hh__nav a:hover, .hh.is-light .hh__nav a.is-current { opacity: 1; }
.hh.is-light .hh__cta, .page-light .hh .hh__cta { background: var(--blue); color: #fff; }
.hh.is-light .hh__menu, .page-light .hh .hh__menu { background: rgba(14, 20, 36, 0.06); box-shadow: inset 0 0 0 1px rgba(14, 20, 36, 0.08); }
.hh.is-light .hh__menu span:not(.hh__sr), .page-light .hh .hh__menu span:not(.hh__sr) { background: var(--ink); }
.hh__brand, .hh__nav a, .hh__cta, .hh__menu, .hh__menu span { transition: color 300ms var(--ease), background-color 300ms var(--ease), opacity 200ms var(--ease), scale 380ms var(--spring); }
.hh__brand img { transition: filter 300ms var(--ease); }
@media (prefers-reduced-transparency: reduce) { .hh.is-scrolled.is-light { background: #fff; backdrop-filter: none; } }

/* Results: load more */
.wall:not(.is-open) .wmore { display: none; }
.home .wall.is-open { height: auto; overflow: visible; }
.wall.is-open .wall__fade { position: relative; left: 0; right: 0; height: auto; padding: 40px 0 0; background: none; }
.wall.is-open .wmore { animation: wmore-in 700ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes wmore-in { from { opacity: 0; translate: 0 24px; scale: 0.98; } }

/* Cards come alive as they arrive: chat bubbles arrive in order, kg tags
   and stars light up. */
.wchat__in, .wchat__out { transition: opacity 500ms var(--ease), translate 600ms var(--spring), scale 600ms var(--spring); }
.seen-on .wcard:not(.is-seen) .wchat__in { opacity: 0; translate: -12px 6px; }
.seen-on .wcard:not(.is-seen) .wchat__out { opacity: 0; translate: 12px 6px; scale: 0.92; }
.wcard.is-seen .wchat__out { transition-delay: 650ms; transform-origin: 100% 100%; }
.wkg { transition: scale 500ms var(--spring) 200ms, opacity 400ms var(--ease) 200ms; }
.seen-on .wcard:not(.is-seen) .wkg { opacity: 0; scale: 0.8; }
.wquote__stars svg { transition: opacity 300ms var(--ease), scale 450ms var(--spring); }
.seen-on .wcard:not(.is-seen) .wquote__stars svg { opacity: 0.2; scale: 0.7; }
.wquote__stars svg:nth-child(2) { transition-delay: 60ms; } .wquote__stars svg:nth-child(3) { transition-delay: 120ms; }
.wquote__stars svg:nth-child(4) { transition-delay: 180ms; } .wquote__stars svg:nth-child(5) { transition-delay: 240ms; }

/* How it works: the dashed connectors draw in after the cards */
.hstep + .hstep::before { transform-origin: 0 50%; transition: scale 600ms var(--spring); }
.reveal-on .hhow__steps:not(.is-in) .hstep + .hstep::before { scale: 0 1; }
.hhow__steps.is-in .hstep:nth-child(2)::before { transition-delay: 300ms; }
.hhow__steps.is-in .hstep:nth-child(3)::before { transition-delay: 420ms; }
.hhow__steps.is-in .hstep:nth-child(4)::before { transition-delay: 540ms; }

/* Guarantee: a soft light follows the pointer across the card */
.hguar__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 60%);
}
.hguar__card:hover::after { opacity: 1; }

/* Rail dots are buttons now */
.hfeat__dots { align-items: center; }
.hfeat__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #C9CFDB; cursor: pointer; transition: width 300ms var(--spring), background-color 250ms var(--ease); }
.hfeat__dots button.is-on { width: 24px; background: var(--blue); }
.hfeat__dots button::before { content: ""; display: block; margin: -18px -6px; height: 44px; }

@media (hover: hover) and (pointer: fine) {
  .hbtn--white:hover, .hbtn--primary:hover { translate: 0 -1px; box-shadow: 0 14px 28px -14px rgba(10, 26, 79, 0.45); }
  a.hero__kicker:hover { background: rgba(255, 255, 255, 0.22); }
  .hvid__frame { transition: translate 500ms var(--spring), box-shadow 500ms var(--ease); }
  .hvid__frame:hover { translate: 0 -4px; box-shadow: 0 50px 100px -40px rgba(6, 20, 80, 0.55); }
  .hvid__poster { transition: scale 900ms var(--spring); }
  .hvid__frame:hover .hvid__poster { scale: 1.02; }
  .hstats__grid li:hover i { scale: 1.08; rotate: -6deg; }
  .hstats__grid i { transition: scale 420ms var(--spring), rotate 420ms var(--spring); }
  .hq summary { transition: color 200ms var(--ease); }
  .hq summary:hover { color: var(--blue-ink); }
  .hfeat__dots button:not(.is-on):hover { background: #9FA8BC; }
  .ccard:hover { z-index: 3; }
  .hclose__link:hover { opacity: 0.85; }
}

/* Phone closing band: no faded field behind the words; two crisp cards
   sit above the heading instead of overlapping it. */
@media (max-width: 699px) {
  .hclose__field { display: none; }
  .hclose__cards { position: relative; inset: auto; display: flex; justify-content: center; gap: 0; margin-bottom: 28px; pointer-events: auto; }
  .ccard { position: relative; display: block; left: auto; right: auto; top: auto; width: 150px; translate: none !important; }
  .ccard--a { --rot: -6deg; margin-right: 8px; z-index: 2; }
  .ccard--b { --rot: 6deg; margin-top: 18px; }
  .ccard--c, .ccard--d { display: none; }
  .ccard .pair { height: 92px !important; }
  .hclose { --pt: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh, .hw, .hin, .hfan__item { animation: none; }
  .wall.is-open .wmore { animation: wmore-fade 300ms ease both; }
  @keyframes wmore-fade { from { opacity: 0; } }
  .wcard:not(.is-seen) .wchat__in, .wcard:not(.is-seen) .wchat__out, .wcard:not(.is-seen) .wkg, .wcard:not(.is-seen) .wquote__stars svg { opacity: 1; translate: none; scale: none; }
  .hhow__steps:not(.is-in) .hstep + .hstep::before { scale: 1 1; }
}

/* ============================================================
   Round 4
   ============================================================ */



/* Primary CTA: an arrow in a disc. On hover the button lifts, the disc
   grows and the arrow runs out to the right as a new one slides in. */
.hbtn--go { gap: 12px; padding-right: 12px; }
.hbtn__ico { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: var(--navy); transition: scale 420ms var(--spring), background-color 250ms var(--ease); }
.hbtn--primary .hbtn__ico { background: #fff; }
.hbtn__ico svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: translate 460ms var(--spring); }
.hbtn--primary .hbtn__ico svg { stroke: var(--blue); }
.hbtn__ico svg + svg { translate: -30px 0; }
.hbtn--lg.hbtn--go { padding-right: 14px; }
.hbtn--lg .hbtn__ico { width: 40px; height: 40px; }
.hbtn { transition: scale 380ms var(--spring), translate 420ms var(--spring), background-color 250ms var(--ease), box-shadow 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hbtn:hover { translate: 0 -2px; }
  .hbtn--white:hover { background: #fff; box-shadow: 0 18px 36px -16px rgba(6, 20, 80, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.18); }
  .hbtn--primary:hover { background: #2A66F5; box-shadow: 0 18px 36px -14px rgba(48, 112, 255, 0.65), 0 0 0 4px rgba(48, 112, 255, 0.14); }
  .hbtn--frost:hover { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 30px -18px rgba(6, 20, 80, 0.6); }
  .hbtn--card:hover { box-shadow: 0 20px 36px -18px rgba(14, 20, 36, 0.4), inset 0 0 0 1px #D5DAE6; }
  .hbtn--go:hover .hbtn__ico { scale: 1.08; }
  .hbtn--go:hover .hbtn__ico svg:first-child { translate: 30px 0; }
  .hbtn--go:hover .hbtn__ico svg + svg { translate: 0 0; }
  .hh__cta:hover { translate: 0 -1px; box-shadow: 0 12px 26px -14px rgba(6, 20, 80, 0.6); }
  .hclose__link .hbtn__arrow, .hclose__link:hover .hbtn__arrow { transition: translate 380ms var(--spring); }
}
.hbtn:active, .hh__cta:active { translate: 0 0; scale: 0.97; transition-duration: 90ms; }
.hh__cta { transition: scale 380ms var(--spring), translate 380ms var(--spring), background-color 250ms var(--ease), color 250ms var(--ease), box-shadow 350ms var(--ease); }

/* The hero tag wiggles once when the pointer lands on it; its dot pulses. */
.hero__kicker { transition: rotate 450ms var(--spring), scale 450ms var(--spring), background-color 250ms var(--ease); }
.hero__kicker i { position: relative; }
.hero__kicker i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--lime); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .hero__kicker:hover { rotate: -1.5deg; scale: 1.02; }
  .hero__kicker:hover i::after { animation: dot-pulse 900ms var(--ease); }
}
@keyframes kicker-wiggle { 0% { rotate: 0deg; } 25% { rotate: -3deg; scale: 1.03; } 55% { rotate: 2deg; scale: 1.03; } 80% { rotate: -1deg; } 100% { rotate: 0deg; scale: 1; } }
@keyframes dot-pulse { from { opacity: 0.6; scale: 1; } to { opacity: 0; scale: 2.4; } }

/* Cards that lift on hover keep their hit area under the pointer, so the
   bottom edge doesn't flicker between hovered and not. */
.hstats__grid li, .wlt__steps li { position: relative; }
.hstats__grid li::after, .hstep::after, .wcard::after, .tier::after, .wlt__steps li::after, .fcard::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }

/* Rails: while the spring or a drag moves a rail, scroll-snap stands aside. */
.hfeat__rail.is-moving, .plans__grid.is-moving { scroll-snap-type: none; }
.plans__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.plans__grid.is-dragging * { pointer-events: none; }
.fphone { transform: translateX(var(--px, 0px)); }

/* Guarantee */
.hguar__lead { margin: 12px 0 0; color: #fff; font: 600 clamp(20px, 1.8vw, 24px)/1.35 var(--font-heading); letter-spacing: -0.3px; }
.hguar h2 { font-size: clamp(40px, 4.4vw, 60px); }

/* Questions: a chat bubble instead of a face */
.hfaq__bubble { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lime); }
.hfaq__bubble i { position: absolute; right: 1px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--success-color, #03CB4C); box-shadow: 0 0 0 3px #fff; }
.hfaq__help:hover .hfaq__bubble svg { animation: kicker-wiggle 560ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hbtn__ico, .hbtn__ico svg, .hfan__badge, .hfan__card { transition: none; }
  .hero__kicker:hover, .hero__kicker:hover i::after, .hfaq__help:hover .hfaq__bubble svg { animation: none; }
}

/* ============================================================
   Test pass (Nov 2026): 44px tap targets, 16px body text
   ============================================================ */
.hh__brand, .hfoot__logo { min-height: 44px; }
.hh__nav a { padding-block: 15px; }
@media (max-width: 1023px) { .hh__nav a { padding-block: 0; } }
.hfoot ul { margin-top: 6px; }
.hfoot li + li { margin-top: 0; }
.hfoot li a { display: inline-flex; align-items: center; min-height: 44px; }
a.hero__kicker, a.pill { position: relative; }
a.hero__kicker::before, a.pill::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.hclose__link { display: inline-flex; align-items: center; min-height: 44px; }
.plans__guar a, .hvid__cta p a { display: inline-flex; align-items: center; min-height: 44px; }
.plans__dots button::before, .hfeat__dots button::before { margin: -18px -9px; }
.hvid__cta p { font-size: 16px; }
.hh__cta { min-height: 44px; }
@media (max-width: 1023px) { .hh__cta { height: 44px; } }
:is(.home, .pg) .cc .btn { min-height: 44px; border-radius: 14px; }
:is(.home, .pg) .cc .btn--primary { background: var(--blue); color: #fff; }
:is(.home, .pg) .cc { font-family: var(--font-body); }
.hfoot__legal { max-width: 80ch; margin: 14px 0 0; color: var(--muted); font: 400 13px/1.5 var(--font-body); }

/* ============================================================
   Round 5
   ============================================================ */
/* The stats come in one card after another, rising a little further than other reveals */
[data-reveal-group].hstats__grid.is-in > li { animation: stat-rise 900ms var(--spring) backwards; }
.hstats__grid.is-in > li:nth-child(1) { animation-delay: 0ms; }
.hstats__grid.is-in > li:nth-child(2) { animation-delay: 120ms; }
.hstats__grid.is-in > li:nth-child(3) { animation-delay: 240ms; }
.hstats__grid.is-in > li:nth-child(4) { animation-delay: 360ms; }
@keyframes stat-rise { from { opacity: 0; transform: translateY(36px) scale(0.96); } }

/* The video arrives: the heading rises, the frame lifts and grows into place */
.hvid__frame[data-reveal].is-in:not(.is-static) { animation: vsl-in 1100ms var(--spring) backwards; }
@keyframes vsl-in { from { opacity: 0; transform: translateY(48px) scale(0.94); } }
.hvid__chapters[data-reveal].is-in:not(.is-static) { animation-delay: 150ms; }
.hvid__cta[data-reveal].is-in:not(.is-static) { animation-delay: 250ms; }
.hvid__play { transition: transform 200ms var(--ease); }

/* Focus: blue on light surfaces, lime on the sky and the dark bands (lime is invisible on a light page) */
:is(body.home, body.pg) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
:is(body.home, body.pg) :is(.hsky, .hclose, .hguar__card, .pguar, .pg-sky, .pghead, [data-dark], .hh:not(.is-light), .wlt, .tier--sky, .fcard--sky, .wprize) :is(a, button, summary, input, select, [tabindex]):focus-visible { outline-color: var(--lime); }
body.page-light .hh :is(a, button):focus-visible, .hh.is-open .hh__nav a:focus-visible { outline-color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .hstats__grid.is-in > li, .hvid__frame[data-reveal].is-in { animation: none; }
}

/* ============================================================
   Phone and tablet menu: the sky opens over the page, with the
   links large and white, one after another, and Join now at the
   foot. The bar stays on top; the button turns into a close.
   ============================================================ */
@media (max-width: 1023px) {
  html:has(.hh.is-open) { overflow: hidden; }
  .hh.is-open, .hh.is-open.is-scrolled, .hh.is-open.is-scrolled.is-light { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* the header's blur makes it the box a fixed child sits in, so while it faded
     the full-screen menu was stuck at the header's height and then jumped. Drop
     the blur at once while the menu is open or fading away. */
  .hh.is-open, .hh.is-closing { transition: none; }
  .hh.is-closing, .hh.is-closing.is-scrolled, .hh.is-closing.is-scrolled.is-light { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hh__nav {
    position: fixed; inset: 0; z-index: -1; display: none; flex-direction: column; gap: 0; margin: 0;
    padding: calc(84px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0F2E91 0%, #1A44C8 48%, #2D5BE6 100%); overflow-y: auto; overscroll-behavior: contain;
  }
  .hh.is-open .hh__nav { display: flex; animation: hh-sky-in 360ms var(--spring); }
  .hh.is-closing .hh__nav { display: flex; animation: hh-sky-out 220ms var(--ease) forwards; pointer-events: none; }
  @keyframes hh-sky-in { from { opacity: 0; } }
  @keyframes hh-sky-out { to { opacity: 0; } }
  .hh .hh__nav > a, .hh.is-light .hh__nav > a, .page-light .hh .hh__nav > a {
    display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 4px; border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; opacity: 1;
    font: 700 clamp(30px, 7.4vw, 40px)/1.1 var(--font-heading); letter-spacing: -0.035em;
  }
  .hh__nav > a::after {
    content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-top: 2.5px solid var(--lime); border-right: 2.5px solid var(--lime);
    rotate: 45deg; transition: translate 350ms var(--spring);
  }
  .hh__nav > a:active::after { translate: 4px 0; }
  .hh.is-open .hh__nav > a, .hh.is-open .hh__navfoot { animation: hh-link-in 560ms var(--spring) backwards; }
  .hh.is-open .hh__nav > a:nth-child(1) { animation-delay: 40ms; }
  .hh.is-open .hh__nav > a:nth-child(2) { animation-delay: 85ms; }
  .hh.is-open .hh__nav > a:nth-child(3) { animation-delay: 130ms; }
  .hh.is-open .hh__nav > a:nth-child(4) { animation-delay: 175ms; }
  .hh.is-open .hh__navfoot { animation-delay: 230ms; }
  @keyframes hh-link-in { from { opacity: 0; translate: 0 18px; } }
  .hh__navfoot { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: auto; padding-top: 32px; }
  :is(.hh, .hh.is-light, .page-light .hh) .hh__nav .hh__navcta {
    justify-content: center; width: 100%; height: 56px; min-height: 56px; padding-block: 0; opacity: 1;
    background: #fff; color: var(--navy); font: 700 17px/1 var(--font-body);
  }
  :is(.hh, .hh.is-light, .page-light .hh) .hh__nav .hh__get {
    display: flex; justify-content: center; align-items: center; min-height: 44px; padding-block: 0; opacity: 1;
    color: rgba(255, 255, 255, 0.82); font: 600 16px/1 var(--font-body); text-decoration: none;
  }
  /* the bar while open: white logo and close button over the sky; Join now lives in the menu */
  .hh.is-open .hh__brand { color: #fff; }
  .hh.is-open .hh__brand img { filter: invert(1); }
  .hh.is-open .hh__menu { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
  .hh.is-open .hh__menu span:not(.hh__sr) { background: #fff; }
  .hh.is-open .hh__cta { opacity: 0; pointer-events: none; }
  .hh .hh__nav a:focus-visible { outline-color: var(--lime); }
}
@media (prefers-reduced-motion: reduce) {
  .hh.is-open .hh__nav, .hh.is-closing .hh__nav, .hh.is-open .hh__nav > a, .hh.is-open .hh__navfoot { animation: none; }
}


/* How it works: each step's number in the lime disc */
.hstep__n { color: var(--navy); font: 800 22px/1 var(--font-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* See more results grows the wall downwards; the browser mustn't chase the button */
.home .wall, .home .wall__fade { overflow-anchor: none; }

/* Carousels in motion: a touch of blur and a slight step back while they move fast */
.hfeat__rail.is-blurring .fcard { filter: blur(var(--mb, 0px)); transform: scale(var(--ms, 1)); }

/* The bar that sits at the foot of the page on phones: the site's own buttons
   on frosted glass, one waitlist button while the New Year waitlist is open */
.sticky-cta.hsticky {
  --r: 22px; gap: 8px; padding: 8px; border: 0; grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 18px 40px -18px rgba(10, 26, 79, 0.4), inset 0 0 0 1px rgba(14, 20, 36, 0.06);
  transition: transform 450ms var(--spring), opacity 250ms var(--ease), visibility 0s linear 0s;
}
.sticky-cta.hsticky--one { grid-template-columns: 1fr; }
.sticky-cta.hsticky .hbtn { --r: 14px; width: 100%; height: 50px; min-height: 50px; padding: 0 16px; font-size: 16px; }
.sticky-cta.hsticky .hbtn--card { box-shadow: inset 0 0 0 1px #E3E6EE; }
@media (prefers-reduced-transparency: reduce) { .sticky-cta.hsticky { background: #fff; backdrop-filter: none; } }
/* the menu covers it */
html:has(.hh.is-open) .sticky-cta { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms var(--ease), visibility 0s linear 150ms; }

/* ============================================================
   Waitlist pop-up on the redesigned pages: the checkout's own form.
   Grey 54px fields that turn white with a blue edge as you type, the
   checkout's tick box, and the site's 14px squircle button. It rises
   in as a card (a sheet from the bottom on phones) and settles.
   ============================================================ */
:is(body.home, body.pg) .wlp__backdrop { background: rgba(10, 16, 51, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: wlp-fade 300ms var(--ease); }
:is(body.home, body.pg) .wlp__card {
  width: min(520px, 100%); padding: 32px 28px 26px; border-radius: 30px; corner-shape: squircle; background: #fff; color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(10, 26, 79, 0.45); font-family: var(--font-body); animation: wlp-up 420ms var(--spring);
}
@supports (corner-shape: squircle) { :is(body.home, body.pg) .wlp__card { border-radius: 48px; } }
@keyframes wlp-up { from { opacity: 0; translate: 0 40px; } }
@keyframes wlp-fade { from { opacity: 0; } }
:is(body.home, body.pg) .wlp__x {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -14px -12px 0 0; border-radius: 50%; background: #F2F3F7; color: var(--ink);
  font: 400 24px/1 var(--font-body); transition: scale 300ms var(--spring), background-color 200ms var(--ease);
}
:is(body.home, body.pg) .wlp__x:active { scale: 0.92; }
:is(body.home, body.pg) .wlp .eyebrow { margin: 0; color: var(--blue); font: 700 13px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
:is(body.home, body.pg) .wlp__card h3 { margin: 12px 0 0; color: var(--ink); font: 700 32px/1.05 var(--font-heading); letter-spacing: -0.03em; }
:is(body.home, body.pg) .wlp__sub { margin: 10px 0 22px; color: var(--muted); font: 400 16px/1.5 var(--font-body); }
:is(body.home, body.pg) .wlp__grid { gap: 16px 12px; }
:is(body.home, body.pg) .wlp__grid label, :is(body.home, body.pg) .wlp__label { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font: 600 14px/1.3 var(--font-body); }
:is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input {
  height: 54px; margin: 0; padding: 0 16px; border: 1.5px solid #E1E5EE; border-radius: 18px; background: #F2F3F7; color: var(--ink);
  font: 500 16px/1.25 var(--font-body); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), background-color 150ms var(--ease);
}
@supports (corner-shape: squircle) {
  :is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input { corner-shape: squircle; border-radius: 28px; }
}
:is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select {
  padding-right: 40px; cursor: pointer;
  background: #F2F3F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1424' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
}
:is(body.home, body.pg) .wlp__grid input::placeholder, :is(body.home, body.pg) .wlp .mp__phone-row input::placeholder { color: #9AA2B5; }
:is(body.home, body.pg) .wlp__grid input:focus, :is(body.home, body.pg) .wlp__grid select:focus, :is(body.home, body.pg) .wlp .mp__phone-row select:focus, :is(body.home, body.pg) .wlp .mp__phone-row input:focus {
  outline: none; border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 1px var(--blue);
}
:is(body.home, body.pg) .wlp__grid input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #F2F3F7 inset; -webkit-text-fill-color: var(--ink); }
:is(body.home, body.pg) .wlp .mp__phone-row { margin: 0; gap: 8px; grid-template-columns: 152px minmax(0, 1fr); }
:is(body.home, body.pg) .wlp .mp__phone-row select { padding-left: 14px; padding-right: 30px; background-position: right 11px center; }
/* the tick box, as at checkout */
:is(body.home, body.pg) .wlp .mp__consent { gap: 12px; margin-top: 20px; color: var(--muted); font: 500 14px/1.5 var(--font-body); }
:is(body.home, body.pg) .wlp .mp__consent input {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #C5CBD8; border-radius: 7px;
  background: #fff no-repeat center / 13px 13px; cursor: pointer; transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
:is(body.home, body.pg) .wlp .mp__consent input:checked {
  border-color: var(--blue); background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:is(body.home, body.pg) .wlp .mp__consent input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the site's button: 14px squircle, not a pill */
:is(body.home, body.pg) .wlp__go {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; min-height: 56px; margin-top: 22px; padding: 0 20px;
  border: 0; border-radius: 14px; background: var(--blue); color: #fff; font: 700 17px/1 var(--font-body); letter-spacing: 0; box-shadow: none;
  cursor: pointer; transition: scale 380ms var(--spring), background-color 200ms var(--ease);
}
@supports (corner-shape: squircle) { :is(body.home, body.pg) .wlp__go { corner-shape: squircle; border-radius: 22px; } }
:is(body.home, body.pg) .wlp__go:active { scale: 0.97; transition-duration: 90ms; }
:is(body.home, body.pg) .wlp__go:disabled { opacity: 0.6; }
:is(body.home, body.pg) .wlp .mp__error { margin-top: 14px; color: #C81E1E; font: 600 14px/1.4 var(--font-body); }
:is(body.home, body.pg) .wlp__fine { margin-top: 14px; color: var(--muted); font: 400 13px/1.5 var(--font-body); }
:is(body.home, body.pg) .wlp__done { padding: 20px; border-radius: 20px; background: #F2F3F7; }
:is(body.home, body.pg) .wlp__done b { color: var(--ink); font: 700 20px/1.2 var(--font-heading); }
:is(body.home, body.pg) .wlp__done span { color: var(--muted); font: 400 15px/1.5 var(--font-body); }
@media (hover: hover) and (pointer: fine) {
  :is(body.home, body.pg) .wlp__go:hover { background: #2A64F0; }
  :is(body.home, body.pg) .wlp__x:hover { background: #E7E9EF; }
}
@media (max-width: 600px) {
  :is(body.home, body.pg) .wlp { padding: 0; }
  /* first and last name stay side by side; everything else is full width */
  :is(body.home, body.pg) .wlp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(body.home, body.pg) .wlp__card { width: 100%; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; corner-shape: round; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.home, body.pg) .wlp__card, :is(body.home, body.pg) .wlp__backdrop { animation: none; }
}

/* ============================================================
   New Year copy (Nov 2026): the pieces the new words need, in the
   page's existing look
   ============================================================ */
.hero__lead { max-width: 720px; margin: 22px auto 0; color: #fff; font: 600 clamp(20px, 1.8vw, 24px)/1.35 var(--font-heading); letter-spacing: -0.3px; text-wrap: balance; }
.hero__lead + .hero__sub { margin-top: 12px; font-size: 18px; }
.hero__sub b { color: #fff; font-weight: 600; }
.hsec__sub b { color: var(--ink); font-weight: 600; }
.hbtn__arrow--down { transition: translate 380ms var(--spring); }
@media (hover: hover) and (pointer: fine) { .hbtn:hover .hbtn__arrow--down { translate: 0 3px; } }

/* video: a lead line, then Watch and the main button side by side */
.hvid__lead { margin: 0; color: var(--ink); font: 500 18px/1.5 var(--font-body); text-align: center; }
.hvid__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.hbtn__play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; }
.hbtn__play svg { margin-left: 2px; }

.hsec__cta { display: flex; justify-content: center; margin-top: 36px; }

@media (max-width: 699px) {
  .hero__lead { font-size: 19px; }
  .hero__lead + .hero__sub { font-size: 16px; }
  .hvid__btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-inline: auto; }
  .hsec__cta .hbtn { width: 100%; }
}
button.hbtn { border: 0; cursor: pointer; }

/* Hero: the prize line sits straight under the heading */
.hero__lead b { color: var(--lime); font-weight: 700; }

/* Stats on phones: two equal columns whatever the number's length */
@media (max-width: 699px) {
  .hstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hstats__grid b { font-size: clamp(22px, 7vw, 32px); letter-spacing: -0.04em; white-space: nowrap; }
}

/* Results wall on phones: one list, so "See more" adds the new stories after
   everything already shown and nothing moves under your thumb */
@media (max-width: 699px) {
  .wall__grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .wall__col:nth-child(-n + 2) { display: contents; }
  .wall .wmore { order: 1; }
}

/* Waitlist pop-up on phones: the whole form fits on one screen, no scrolling.
   The fields carry their names as placeholders, so the labels step aside. */
:is(body.home, body.pg) .wlp__grid input::placeholder { color: transparent; }
@media (max-width: 600px) {
  :is(body.home, body.pg) .wlp__card { padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); max-height: none; overflow: visible; }
  :is(body.home, body.pg) .wlp .eyebrow { display: none; }
  :is(body.home, body.pg) .wlp__x { width: 36px; height: 36px; margin: -4px -6px 0 0; font-size: 22px; }
  :is(body.home, body.pg) .wlp__card h3 { margin-top: 4px; font-size: 26px; }
  :is(body.home, body.pg) .wlp__sub { margin: 6px 0 14px; font-size: 15px; }
  :is(body.home, body.pg) .wlp__grid { gap: 8px; }
  :is(body.home, body.pg) .wlp__grid label { gap: 0; font-size: 0; }
  :is(body.home, body.pg) .wlp__label { display: none; }
  :is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input { height: 48px; }
  :is(body.home, body.pg) .wlp__grid input::placeholder { color: #9AA2B5; }
  :is(body.home, body.pg) .wlp .mp__consent { margin-top: 12px; font-size: 13px; line-height: 1.4; }
  :is(body.home, body.pg) .wlp__go { height: 52px; min-height: 52px; margin-top: 14px; }
}
:is(body.home, body.pg) .wlp .mp__phone-row input::placeholder { color: #9AA2B5; }

/* ============================================================
   Waitlist pop-up, Nov 2026 design ("Waitlist pop-up 1: white sheet,
   matches the hero"): a white sheet with a grab handle, the hero's pill
   badge, a heavy uppercase title, white 52px fields that ring blue on
   focus, and the uppercase blue button with its arrow. Field names live
   in the boxes as placeholders. Rises from the bottom on phones; a card
   in the middle on wider screens.
   ============================================================ */
:is(body.home, body.pg) .wlp__backdrop { background: rgba(15, 17, 22, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:is(body.home, body.pg) .wlp__card { width: min(460px, 100%); padding: 22px 22px 24px; border-radius: 24px; background: #fff; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.4), 0 30px 80px -30px rgba(10, 16, 51, 0.45); }
@supports (corner-shape: squircle) { :is(body.home, body.pg) .wlp__card { border-radius: 38px; } }
:is(body.home, body.pg) .wlp__grab { display: none; }
:is(body.home, body.pg) .wlp__x { width: 40px; height: 40px; margin: 0 -4px 0 0; border-radius: 12px; background: #F3F4F7; color: #171A21; font: 400 22px/1 var(--font-body); }
:is(body.home, body.pg) .wlp .wlp__kicker {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 13px 0 10px; border-radius: 999px; background: #fff;
  box-shadow: 0 8px 20px -12px rgba(23, 26, 33, 0.3), inset 0 0 0 1px #E1E4EC; color: #171A21; font: 500 12px/1 var(--font-body); letter-spacing: 0; text-transform: none;
}
:is(body.home, body.pg) .wlp__kicker i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7BC41C; box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.55); }
:is(body.home, body.pg) .wlp__card h3 { margin: 16px 0 0; color: #171A21; font: 900 34px/0.94 var(--font-heading); letter-spacing: -0.045em; text-transform: uppercase; }
:is(body.home, body.pg) .wlp__sub { margin: 12px 0 20px; color: #5D6474; font: 400 15px/1.5 var(--font-body); }
:is(body.home, body.pg) .wlp__grid { gap: 10px; }
:is(body.home, body.pg) .wlp__grid label { gap: 0; font-size: 0; }
:is(body.home, body.pg) .wlp__label { display: none; }
:is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input {
  height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background-color: #fff; box-shadow: inset 0 0 0 1px #E1E4EC; color: #171A21; font: 400 16px/1.25 var(--font-body);
}
@supports (corner-shape: squircle) {
  :is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input { border-radius: 22px; }
}
:is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select { background-color: #fff; }
:is(body.home, body.pg) .wlp__grid input::placeholder, :is(body.home, body.pg) .wlp .mp__phone-row input::placeholder { color: #8A90A0; }
:is(body.home, body.pg) .wlp__grid input:focus, :is(body.home, body.pg) .wlp__grid select:focus, :is(body.home, body.pg) .wlp .mp__phone-row select:focus, :is(body.home, body.pg) .wlp .mp__phone-row input:focus {
  background-color: #fff; box-shadow: inset 0 0 0 1.5px #3070FF, 0 0 0 4px rgba(48, 112, 255, 0.15);
}
:is(body.home, body.pg) .wlp__grid input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #fff inset, inset 0 0 0 1px #E1E4EC; }
:is(body.home, body.pg) .wlp .mp__phone-row { grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
:is(body.home, body.pg) .wlp .mp__consent { gap: 12px; margin-top: 14px; color: #5D6474; font: 400 13px/1.45 var(--font-body); }
:is(body.home, body.pg) .wlp .mp__consent input { border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #C3C9D6; }
:is(body.home, body.pg) .wlp .mp__consent input:checked { box-shadow: none; }
:is(body.home, body.pg) .wlp__go {
  position: relative; height: 56px; min-height: 56px; margin-top: 16px; padding: 0 52px; border-radius: 14px; background: #3070FF;
  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.7);
}
:is(body.home, body.pg) .wlp__go::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233070FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: translate 380ms var(--spring);
}
@media (hover: hover) and (pointer: fine) { :is(body.home, body.pg) .wlp__go:hover::after { translate: 3px 0; } }
:is(body.home, body.pg) .wlp__fine { margin: 10px 0 0; color: #8A90A0; font: 400 12px/1.4 var(--font-body); text-align: center; }
@media (max-width: 600px) {
  :is(body.home, body.pg) .wlp { padding: 0; align-items: end; }
  :is(body.home, body.pg) .wlp__card { width: 100%; max-height: 100dvh; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; corner-shape: round; }
  :is(body.home, body.pg) .wlp__grab { display: block; width: 40px; height: 5px; margin: -10px auto 14px; border-radius: 3px; background: #D5D9E3; }
  :is(body.home, body.pg) .wlp__x { margin-top: 4px; }
  :is(body.home, body.pg) .wlp .eyebrow.wlp__kicker { display: inline-flex; }
  :is(body.home, body.pg) .wlp__card h3 { margin-top: 16px; font-size: 34px; }
  :is(body.home, body.pg) .wlp__sub { margin: 12px 0 20px; font-size: 15px; }
  :is(body.home, body.pg) .wlp__grid { gap: 10px; }
  :is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input { height: 52px; }
  :is(body.home, body.pg) .wlp .mp__consent { margin-top: 14px; font-size: 13px; }
  :is(body.home, body.pg) .wlp__go { height: 56px; min-height: 56px; margin-top: 16px; }
}

/* the pop-up's fields match the checkout's: a light grey fill and a pale
   edge, turning white with a blue edge while you type */
:is(body.home, body.pg) .wlp__grid input, :is(body.home, body.pg) .wlp__grid select, :is(body.home, body.pg) .wlp .mp__phone-row select, :is(body.home, body.pg) .wlp .mp__phone-row input {
  background-color: #F4F5F8; box-shadow: inset 0 0 0 1.5px #E3E7F0;
}
:is(body.home, body.pg) .wlp__grid input:focus, :is(body.home, body.pg) .wlp__grid select:focus, :is(body.home, body.pg) .wlp .mp__phone-row select:focus, :is(body.home, body.pg) .wlp .mp__phone-row input:focus {
  background-color: #fff; box-shadow: inset 0 0 0 1.5px #3070FF, 0 0 0 1px #3070FF;
}
:is(body.home, body.pg) .wlp__grid input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #F4F5F8 inset, inset 0 0 0 1.5px #E3E7F0; }
/* the pop-up growing out of the phone bar's button runs its own animation */
.wlp.is-morph .wlp__card, .wlp.is-morph .wlp__backdrop { animation: none; }
.wlp__tint { position: absolute; inset: 0; z-index: 3; background: #3070FF; pointer-events: none; }

/* ── Cookie choices, in the Nov 2026 look (homepage, /welcome-back and every v3 page):
   a dark card like the phone bar, a Michroma label, the site's uppercase 14px buttons ── */
:is(body.home--v3, body.v3) .cc {
  --r: 20px; max-width: 420px; padding: 20px 20px 18px; border: 0; border-radius: 20px; corner-shape: squircle;
  background: #1B1D22; color: #fff; box-shadow: 0 30px 60px -24px rgba(10, 12, 18, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
}
:is(body.home--v3, body.v3) .cc h4 { margin: 0 0 10px; color: rgba(255, 255, 255, 0.6); font: 400 10px/1 var(--wide, "Michroma", sans-serif); letter-spacing: 0.24em; text-transform: uppercase; }
:is(body.home--v3, body.v3) .cc p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.78); font-size: 13px; line-height: 1.55; }
:is(body.home--v3, body.v3) .cc p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, 0.45); }
:is(body.home--v3, body.v3) .cc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:is(body.home--v3, body.v3) .cc .cc__row .btn {
  --r: 14px; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; corner-shape: squircle;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: scale 160ms var(--ease, ease), background-color 200ms var(--ease, ease);
}
:is(body.home--v3, body.v3) .cc .cc__row .btn--primary { background: var(--blue); color: #fff; box-shadow: 0 12px 24px -12px rgba(48, 112, 255, 0.7); }
:is(body.home--v3, body.v3) .cc .cc__row .btn--outline { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
:is(body.home--v3, body.v3) .cc .btn:active { scale: 0.97; }
:is(body.home--v3, body.v3) .cc .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { :is(body.home--v3, body.v3) .cc .cc__row .btn--outline:hover { background: rgba(255, 255, 255, 0.12); } }
@media (max-width: 639px) { :is(body.home--v3, body.v3) .cc { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px 16px 16px; } }

/* Full screen: the video stays landscape and whole, centred, with the same video
   blurred behind it filling the screen (home.js paints it into .hvid__blur). */
.hvid__frame.is-full { max-width: none; margin: 0; aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; box-shadow: none; }
.hvid__frame.is-full video { z-index: 1; object-fit: contain; background: transparent; }
.hvid__blur { display: none; }
.hvid__frame.is-full .hvid__blur { display: block; position: absolute; z-index: 0; inset: -8%; width: 116%; height: 116%; filter: blur(28px) brightness(0.62) saturate(1.15); }
/* when the bare video is full screen (the player couldn't be), it's contained, with
   the poster blurred behind it */
.hvid__frame video:fullscreen { object-fit: contain; background: transparent; }
.hvid__frame video:-webkit-full-screen { object-fit: contain; background: transparent; }
.hvid__frame video::backdrop { background: #000 var(--poster, none) center / cover no-repeat; filter: blur(28px) brightness(0.62); }