/* ==========================================================================
   HOMEPAGE, SECOND EDITION

   Dark, with the page taking on the deep tint of whichever part of the
   story is on screen. The tints are the four colours of the mark, darkened
   until white type sits on them comfortably; the bright versions are kept
   for the corners, the tags and the one button that matters.

   Everything is scoped under body.home-v2 so it cannot reach any other
   page while the rest of the site keeps its current look.
   ========================================================================== */

body.home-v2 {
  /* The four colours of the mark itself, read off assets/brand/mark.png.
     The button blue is the product's own, as it is inside the app. */
  --blue: #3D68B1;
  --green: #1CA74A;
  --orange: #F36F21;
  --purple: #583F99;
  --action: #2962FF;
  --action-dark: #1D48C4;

  --night:  #070B1F;
  --t-blue: #071A4A;
  --t-green: #04261B;
  --t-orange: #2A1503;
  --t-purple: #160E3A;

  --text: #F3F5FB;
  --soft: #B3BCD4;
  --line: rgba(255, 255, 255, .12);

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);

  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The fixed colour layer. Its colour is set from JavaScript as each part
   comes into view; the transition is what makes it feel like a change of
   light rather than a change of page. */
body.home-v2 .hv-tone {
  position: fixed; inset: 0; z-index: -1;
  background: var(--tone, var(--night));
  transition: background-color 900ms cubic-bezier(.2, .7, .2, 1);
}
body.home-v2 main { position: relative; z-index: 1; background: transparent; }

.home-v2 .hv-wrap {
  width: min(100% - 2 * var(--gut), var(--wrap));
  margin-inline: auto;
}

.home-v2 .hv-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: #fff; color: var(--night); padding: 8px 14px; border-radius: 8px;
}
.home-v2 .hv-skip:focus { left: 8px; }

.home-v2 :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }

.home-v2 h1, .home-v2 h2, .home-v2 h3 {
  font-family: var(--display);
  color: var(--text);
  letter-spacing: -.025em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
.home-v2 p { margin: 0; text-wrap: pretty; }
.home-v2 a { color: inherit; }

/* ---------------------------------------------------------------- buttons */
.home-v2 .hv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, transform .15s;
}
.home-v2 .hv-btn:active { transform: translateY(1px); }
.home-v2 .hv-btn-fill { background: var(--action); color: #fff; border: 1px solid var(--action); }
.home-v2 .hv-btn-fill:hover { background: var(--action-dark); border-color: var(--action-dark); }
.home-v2 .hv-btn-ink { background: #fff; color: var(--ink); border: 1px solid #C9D0DC; }
.home-v2 .hv-btn-ink:hover { border-color: var(--ink); }
.home-v2 .hv-btn-line { border: 1px solid rgba(255,255,255,.55); color: #fff; background: transparent; }
.home-v2 .hv-btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.home-v2 .hv-btn-lg { min-height: 54px; padding: 14px 28px; font-size: 1.02rem; }

.home-v2 .hv-more {
  display: inline-block; margin-top: 22px; font-weight: 600; font-size: .98rem;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ----------------------------------------------------------------- header */
/* WHITE, over a dark page — Govind's call, and Wistia's own arrangement.
   A lit bar reads as the one fixed thing on a page whose colour keeps
   changing underneath it, and the logo keeps its real colours instead of
   a white knock-out. */
.home-v2 .hv-head {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid #E6E9F0;
  transition: box-shadow .3s;
}
.home-v2 .hv-head.stuck { box-shadow: 0 6px 24px -12px rgba(7, 11, 31, .45); }
.home-v2 .hv-head .head-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.home-v2 .hv-head .brand img { height: 34px; width: auto; display: block; }
.home-v2 .hv-head .nav { display: flex; align-items: center; gap: 20px; flex: 1; }
.home-v2 .hv-head .nav-list { display: flex; gap: 4px; list-style: none; margin: 0 auto 0 16px; padding: 0; }
.home-v2 .hv-head .nav-list > li > a {
  color: #0D1B2A; font-weight: 600; font-size: .95rem; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; display: inline-block;
}
.home-v2 .hv-head .nav-list > li > a:hover { background: #F1F4FA; }
.home-v2 .hv-head .head-actions { display: flex; align-items: center; gap: 10px; }
.home-v2 .hv-head .hv-link { color: #0D1B2A; font-weight: 600; font-size: .95rem; text-decoration: none; padding: 8px 10px; }
.home-v2 .hv-head .hv-link:hover { color: var(--action); }
/* The header's own buttons, dark-on-white rather than the page's
   white-on-dark: same shape, the other way round. */
.home-v2 .hv-head .hv-btn-line { border-color: var(--action); color: var(--action); }
.home-v2 .hv-head .nav .hv-btn-fill, .home-v2 .hv-head .nav .hv-btn-fill:hover { color: #fff; }
.home-v2 .hv-head .hv-btn-line:hover { background: #EAF0FF; border-color: var(--action); }

.home-v2 .hv-head .mega { color: var(--ink, #0D1B2A); }

/* The old theme styles every `.nav a` that is not its own `.btn` — which
   includes these, and at a higher specificity than .hv-btn alone. That is
   what turned the white label dark and the pill into a rounded box. */
.home-v2 .hv-head .nav a.hv-btn { padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.home-v2 .hv-head .nav a.hv-btn-fill { color: #fff; }
.home-v2 .hv-head .nav a.hv-btn-line { color: var(--action); }
.home-v2 .hv-head .nav a.hv-link { padding: 8px 10px; border-radius: 8px; }

.home-v2 .menu-toggle { display: none; }

/* ==========================================================================
   THE SECTIONS

   No two built alike. Each one has its own shape and its own moment, the
   way Wistia's homepage does: a screen that comes into focus, pictures
   floating round a sentence, a story that runs sideways, tiles that show
   rather than tell, cards that stack as you scroll, a calculator that
   prints an invoice, a hub, a clock.
   ========================================================================== */

.home-v2 .hv-sec-title { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; }
.home-v2 .hv-sec-lede { margin-top: 18px; color: var(--soft); font-size: 1.08rem; max-width: 56ch; }

/* ------------------------------------------------------------------ mark */
/* The logo's own proportions: two pieces and the gap between them make
   392 across and 408 down, so each piece is 46% of the box. The pieces
   never touch. */
.home-v2 .hv-mark { position: relative; aspect-ratio: 392 / 408; }
.home-v2 .hv-mark .hv-corner { position: absolute; width: 46.17%; height: auto; }
.home-v2 .hv-mark .hv-corner-tl { top: 0; left: 0; }
.home-v2 .hv-mark .hv-corner-tr { top: 0; right: 0; }
.home-v2 .hv-mark .hv-corner-bl { bottom: 0; left: 0; }
.home-v2 .hv-mark .hv-corner-br { bottom: 0; right: 0; }

/* ------------------------------------------------------------------ hero */
.home-v2 .hv-hero { padding: clamp(56px, 10vh, 104px) 0 0; text-align: center; overflow: clip; }
.home-v2 .hv-hero-copy { max-width: 920px; }
.home-v2 .hv-pill {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 26px;
  padding: 6px 16px; border-radius: 999px; font-size: .92rem; color: var(--soft);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
}
.home-v2 .hv-pill b { color: #fff; }
.home-v2 .hv-hero h1 { font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 600; letter-spacing: -.035em; }
.home-v2 .hv-lede {
  margin: 26px auto 0; max-width: 44ch;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--soft);
}
/* The rotating line, stacked in one grid cell so it wraps on a phone and
   is as tall as its longest line: nothing below it jumps. */
.home-v2 .rot.hv-rot {
  display: grid; height: auto; overflow: hidden; margin: 8px auto 0; max-width: 30ch;
  font-family: var(--display); font-size: clamp(1.4rem, 2.8vw, 2.15rem);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: #fff;
}
.home-v2 .rot.hv-rot > span { position: relative; grid-area: 1 / 1; width: auto; white-space: normal; }
.home-v2 .hv-hero .hv-lede-end { margin-top: 16px; }
.home-v2 .hv-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.home-v2 .hv-fine { margin-top: 16px; font-size: .92rem; color: #8F99B6; }
.home-v2 .hv-facts {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  color: var(--soft); font-size: .95rem;
}
.home-v2 .hv-facts li { display: inline-flex; align-items: center; gap: 8px; }
.home-v2 .hv-facts svg { width: 18px; height: 18px; color: #6FC145; flex: none; }

/* The stage the pieces settle around, with room for perspective: the
   screen starts tilted back and out of focus, and scrolling brings it
   upright and sharp. */
.home-v2 .hv-stage {
  --cs: clamp(44px, 6vw, 84px);
  position: relative; margin-top: clamp(48px, 8vh, 88px);
  padding: calc(var(--cs) * .6);
  max-width: 1160px; perspective: 1400px;
}
.home-v2 .hv-stage .hv-corner { position: absolute; width: var(--cs); height: auto; z-index: 2; will-change: transform; }
.home-v2 .hv-stage .hv-corner-tl { top: 0; left: 0; }
.home-v2 .hv-stage .hv-corner-tr { top: 0; right: 0; }
.home-v2 .hv-stage .hv-corner-bl { bottom: 0; left: 0; }
.home-v2 .hv-stage .hv-corner-br { bottom: 0; right: 0; }
.home-v2 .hv-stage .hv-frame { transform-origin: 50% 0; will-change: transform, filter; }

/* ------------------------------------------------------------------ frame */
.home-v2 .hv-frame {
  margin: 0; border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.25);
}
.home-v2 .hv-frame-bar {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: #EEF1F6; border-bottom: 1px solid #DDE2EA;
}
.home-v2 .hv-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CDD3DD; }
.home-v2 .hv-frame-bar span { margin-left: 12px; font-size: 11px; color: #7A8496; font-family: var(--font); }
.home-v2 .hv-frame img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9.4; object-fit: cover; object-position: top left;
}
.home-v2 .hv-frame-hero img { aspect-ratio: 16 / 10.4; }

/* --------------------------------------------------------------- marquee */
.home-v2 .hv-marq { padding: clamp(64px, 10vh, 104px) 0 0; overflow: clip; }
/* the strips fade out at both edges instead of being cut off */
.home-v2 .hv-marq-track, .home-v2 .hv-reach-belt {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.home-v2 .hv-marq-label { text-align: center; color: #8F99B6; font-size: .95rem; margin-bottom: 20px; }
.home-v2 .hv-marq-track { display: flex; width: max-content; animation: hv-slide 52s linear infinite; }
.home-v2 .hv-marq:hover .hv-marq-track { animation-play-state: paused; }
.home-v2 .hv-marq-track span {
  display: inline-flex; align-items: center; gap: 18px; padding: 0 26px;
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 600;
  letter-spacing: -.02em; color: #DCE1EE; white-space: nowrap;
}
.home-v2 .hv-marq-track i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
@keyframes hv-slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------- instead, with collage */
.home-v2 .hv-instead {
  position: relative; overflow: clip;
  min-height: 118vh; display: grid; align-items: center;
  padding: 120px 0;
}
.home-v2 .hv-instead > .hv-wrap { position: relative; z-index: 2; }
.home-v2 .hv-instead-line {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.24; letter-spacing: -.02em;
  max-width: 28ch; margin-inline: auto; text-align: center; color: #8A94B2;
}
.home-v2 .hv-instead-line s { text-decoration: none; }
/* The strike is a line laid over each word, drawn from its left edge. The
   words carry it across the spaces between them, so a phrase reads as
   one continuous stroke even where it wraps. At rest it is fully drawn;
   the script takes it back to nothing only when it is there to draw it. */
.home-v2 .hv-sw { position: relative; display: inline-block; }
.home-v2 .hv-sw::after {
  content: ""; position: absolute; z-index: 1;
  left: -.04em; right: -.04em; top: 54%; height: .085em; border-radius: .05em;
  background: linear-gradient(90deg, #F8891F, #EF5124);
  transform-origin: 0 50%; transform: scaleX(var(--k, 1));
}
.home-v2 .hv-sw:not(:last-child)::after { right: -.3em; }
.home-v2 .hv-instead-end { display: block; margin-top: .4em; color: var(--text); }

.home-v2 .hv-collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.home-v2 .hv-float {
  position: absolute; margin: 0; overflow: hidden; will-change: transform;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.8);
  border: 1px solid rgba(255,255,255,.14);
}
.home-v2 .hv-float img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.home-v2 .hv-float-phone { border-radius: 20px; border: 5px solid #11151F; aspect-ratio: 9 / 17; }
.home-v2 .hv-float-photo { border-radius: 18px; aspect-ratio: 4 / 3; }
.home-v2 .hv-float-screen { border-radius: 12px; aspect-ratio: 16 / 10; background: #fff; }
.home-v2 .hv-float-screen img { object-position: top left; }
.home-v2 .hv-float-0 { width: 150px; left: 4%;  top: 8%;  transform: rotate(-6deg); }
.home-v2 .hv-float-1 { width: 250px; right: 5%; top: 6%;  }
.home-v2 .hv-float-2 { width: 300px; left: 9%;  bottom: 7%; }
.home-v2 .hv-float-3 { width: 140px; right: 8%; bottom: 10%; transform: rotate(5deg); }
.home-v2 .hv-float-4 { width: 200px; left: 30%; top: 2%; opacity: .55; }
.home-v2 .hv-float-5 { width: 260px; right: 27%; bottom: 2%; opacity: .55; }

/* --------------------------------------------------- the story, sideways */
.home-v2 .hv-story { padding: clamp(72px, 12vh, 136px) 0 clamp(56px, 8vh, 96px); }
.home-v2 .hv-story-head { max-width: 900px; text-align: center; }
.home-v2 .hv-story-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); font-weight: 600; }
.home-v2 .hv-story-head p { margin: 18px auto 0; color: var(--soft); font-size: 1.08rem; max-width: 56ch; }
.home-v2 .hv-story-pin { margin-top: 56px; overflow: hidden; }
.home-v2 .hv-story-track {
  display: flex; align-items: stretch; gap: 22px; width: max-content;
  padding: 10px max(var(--gut), calc((100vw - var(--wrap)) / 2)) 30px;
}
/* Without the script, and on a phone, the row simply scrolls sideways. */
.home-v2 .hv-story-pin:not(.is-pinned) { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-v2 .hv-story-pin:not(.is-pinned)::-webkit-scrollbar { display: none; }
.home-v2 .hv-story-pin:not(.is-pinned) .hv-story-track > * { scroll-snap-align: center; }
.home-v2 .hv-story-photo {
  position: relative; margin: 0; width: min(640px, 82vw); border-radius: 28px; overflow: hidden; flex: none;
}
.home-v2 .hv-story-photo img, .home-v2 .hv-story-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-v2 .hv-story-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 28px 26px;
  background: linear-gradient(rgba(7,11,31,0), rgba(7,11,31,.9));
  font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.3; color: #fff;
}
.home-v2 .hv-loss {
  flex: none; width: min(340px, 78vw); display: flex; flex-direction: column;
  padding: 22px; border-radius: 26px;
  background: #0F1530; border: 1px solid rgba(255,255,255,.1);
}
.home-v2 .hv-loss h3 { margin-top: 22px; font-size: 1.3rem; font-weight: 600; }
.home-v2 .hv-loss > p { margin-top: 8px; color: var(--soft); font-size: .98rem; }
.home-v2 .hv-story-end {
  flex: none; width: min(460px, 82vw); align-self: center; padding: 0 20px;
  font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.08; letter-spacing: -.025em; color: #fff;
}

/* the six things, as photographs with the app's own kind of label
   floating over the corner: Wistia's composite, built in HTML so the words
   stay words */
.home-v2 .hv-comp { position: relative; margin: 0 0 8px; }
.home-v2 .hv-comp img { display: block; width: 100%; height: 230px; object-fit: cover; border-radius: 18px; }
.home-v2 .hv-chip {
  position: absolute; left: 14px; bottom: -14px; max-width: calc(100% - 28px);
  display: grid; grid-template-columns: 10px 1fr; column-gap: 9px; align-items: center;
  padding: 10px 14px; border-radius: 14px; background: #fff; color: #1A2233;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(13,27,42,.06);
}
.home-v2 .hv-chip i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: #D1343C; box-shadow: 0 0 0 4px rgba(209,52,60,.15); }
.home-v2 .hv-chip-amber i { background: #F3A21B; box-shadow: 0 0 0 4px rgba(243,162,27,.18); }
.home-v2 .hv-chip b { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.home-v2 .hv-chip small { font-size: .76rem; color: #6B7280; line-height: 1.3; }
.home-v2 .hv-chip-ask { grid-template-columns: 1fr; border-radius: 16px 16px 16px 4px; }
.home-v2 .hv-chip-ask i { display: none; }
.home-v2 .hv-chip-ask b { font-family: var(--display); font-size: 1.02rem; }
.home-v2 .hv-loss h3 { margin-top: 30px; }

/* living photographs fill their frame exactly as the stills did */
.home-v2 .hv-loop { display: block; width: 100%; height: 100%; object-fit: cover; background: #0F1530; }

/* ------------------------------------------------------ the light sheet */
/* A white sheet laid over the dark page, rounded at the top like a page
   being turned: the turn in the argument. */
.home-v2 .hv-sheet {
  position: relative; z-index: 2;
  background: #F2F4F9; color: var(--ink); --line: #E3E7EF;
  border-radius: clamp(28px, 4vw, 56px);
  margin: clamp(24px, 4vh, 48px) clamp(8px, 1.4vw, 20px);
  padding: clamp(72px, 10vh, 120px) 0;
}
.home-v2 .hv-sheet h2, .home-v2 .hv-sheet h3 { color: var(--ink); }
.home-v2 .hv-sheet-head { text-align: center; max-width: 780px; margin: 0 auto; }
.home-v2 .hv-mark-turn { width: 60px; margin: 0 auto 28px; }
.home-v2 .hv-sheet-head h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 600; }
.home-v2 .hv-sheet-head p { margin-top: 18px; font-size: 1.12rem; color: var(--ink-2); }
.home-v2 .hv-sheet .hv-tagline { margin-top: 48px; text-align: center; font-size: 1.05rem; }
.home-v2 .hv-sheet .hv-tagline-rest { color: var(--ink); margin-left: .3em; }

.home-v2 .hv-bento {
  margin-top: 56px; display: grid; gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.home-v2 .hv-tile {
  grid-column: span 2; position: relative; overflow: hidden;
  border-radius: 28px; padding: 26px; min-height: 360px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.home-v2 .hv-tile h3 { font-size: 1.4rem; font-weight: 600; line-height: 1.12; }
.home-v2 .hv-tile p { font-size: .98rem; line-height: 1.5; }
.home-v2 .hv-tile > [aria-hidden] { margin-bottom: auto; }
.home-v2 .hv-tile-wide { grid-column: span 4; flex-direction: row; align-items: stretch; gap: 26px; }
.home-v2 .hv-tile-full { grid-column: span 6; flex-direction: row; align-items: center; gap: 40px; min-height: 0; }
.home-v2 .hv-tile-copy { flex: 0 0 34%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.home-v2 .hv-tile-full .hv-tile-copy { flex-basis: 36%; justify-content: center; }
.home-v2 .hv-tile-wide > [aria-hidden], .home-v2 .hv-tile-full > [aria-hidden] { margin: 0; flex: 1; }

.home-v2 .hv-tile-blue   { background: radial-gradient(120% 120% at 0% 0%, #5A86D0, #3358A5 55%, #25427F); }
.home-v2 .hv-tile-green  { background: radial-gradient(120% 120% at 100% 0%, #7FCB55, #1CA74A 55%, #12803A); }
.home-v2 .hv-tile-orange { background: radial-gradient(120% 120% at 0% 100%, #FFA13D, #F36F21 55%, #D4531A); }
.home-v2 .hv-tile-purple { background: radial-gradient(120% 140% at 100% 100%, #7E66C4, #583F99 55%, #43307A); }
.home-v2 .hv-tile-ink    { background: #0D1430; }
.home-v2 .hv-tile-white  { background: #fff; box-shadow: 0 1px 0 #E3E7EF inset, 0 20px 50px -30px rgba(13,27,42,.35); }
.home-v2 .hv-tile-blue h3, .home-v2 .hv-tile-green h3, .home-v2 .hv-tile-orange h3,
.home-v2 .hv-tile-purple h3, .home-v2 .hv-tile-ink h3 { color: #fff; }
.home-v2 .hv-tile-blue p, .home-v2 .hv-tile-green p, .home-v2 .hv-tile-orange p,
.home-v2 .hv-tile-purple p, .home-v2 .hv-tile-ink p { color: rgba(255,255,255,.86); }
.home-v2 .hv-tile-white p { color: var(--ink-2); }

/* the little pictures inside the tiles */
.home-v2 .vz-card-h { font-weight: 700; font-size: .78rem; color: #6B7280; margin-bottom: 8px; }
.home-v2 .vz-flow { display: grid; grid-template-columns: auto 48px 1fr; align-items: center; }
.home-v2 .vz-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.home-v2 .vz-src li {
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); white-space: nowrap;
}
.home-v2 .vz-wires { width: 100%; height: 190px; }
.home-v2 .vz-wires path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; animation: hv-flow 1.6s linear infinite; }
@keyframes hv-flow { to { stroke-dashoffset: -18; } }
.home-v2 .vz-card {
  background: #fff; border-radius: 16px; padding: 14px; color: #1A2233;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.55);
}
.home-v2 .vz-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid #EEF0F4; font-size: .82rem; }
.home-v2 .vz-row b { font-weight: 600; }
.home-v2 .vz-row span { grid-row: 2; color: #6B7280; font-size: .74rem; }
.home-v2 .vz-row em { grid-row: span 2; align-self: center; font-style: normal; font-size: .72rem; font-weight: 700; color: #1D48C4; background: #EAF0FF; padding: 3px 8px; border-radius: 999px; }

.home-v2 .vz-merge { position: relative; height: 170px; }
.home-v2 .vz-merge span {
  position: absolute; padding: 6px 12px; border-radius: 10px; font-size: .8rem; font-weight: 700;
  background: #F2F4F9; color: #6B7280; border: 1px dashed #C9D0DC; transform: rotate(var(--r));
}
.home-v2 .vz-merge span:nth-child(1) { left: 0; top: 4px; }
.home-v2 .vz-merge span:nth-child(2) { right: 6px; top: 0; }
.home-v2 .vz-merge span:nth-child(3) { left: 10px; top: 52px; }
.home-v2 .vz-merge span:nth-child(4) { right: 0; top: 50px; }
.home-v2 .vz-one {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 82%;
  padding: 12px 14px; border-radius: 14px; background: var(--ink); color: #fff; display: grid;
  box-shadow: 0 16px 30px -16px rgba(13,27,42,.6);
}
.home-v2 .vz-one b { font-weight: 600; }
.home-v2 .vz-one small { color: #9FB0CC; font-size: .76rem; }

.home-v2 .vz-today { background: #fff; border-radius: 16px; padding: 14px; color: #1A2233; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
.home-v2 .vz-task { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #EEF0F4; font-size: .84rem; }
.home-v2 .vz-task i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid #C9D0DC; flex: none; }
.home-v2 .vz-task.done { color: #9CA3AF; text-decoration: line-through; }
.home-v2 .vz-task.done i { background: #1CA74A; border-color: #1CA74A; }
.home-v2 .vz-task em { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700; color: #fff; background: #D1343C; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

.home-v2 .vz-story { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 14px; }
.home-v2 .vz-story::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: rgba(255,255,255,.18); }
.home-v2 .vz-story li { position: relative; display: flex; justify-content: space-between; color: #fff; font-size: .9rem; }
.home-v2 .vz-story li::before { content: ""; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-blue); box-shadow: 0 0 0 3px #0D1430; }
.home-v2 .vz-story li:nth-child(2)::before { background: #1CA74A; }
.home-v2 .vz-story li:nth-child(3)::before { background: #F36F21; }
.home-v2 .vz-story li:nth-child(4)::before { background: #7E66C4; }
.home-v2 .vz-story span { color: #8F99B6; }

.home-v2 .vz-rules { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 16px; padding: 6px 14px; }
.home-v2 .vz-rules div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: #fff; font-size: .84rem; font-weight: 600; }
.home-v2 .vz-rules div + div { border-top: 1px solid rgba(255,255,255,.2); }
.home-v2 .vz-rules i { width: 36px; height: 20px; border-radius: 999px; background: rgba(0,0,0,.25); position: relative; flex: none; }
.home-v2 .vz-rules i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s; }
.home-v2 .vz-rules i.on { background: #0E6B2E; }
.home-v2 .vz-rules i.on::after { transform: translateX(16px); }

.home-v2 .vz-cal { background: #fff; border-radius: 20px; padding: 18px; color: #1A2233; box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); }
.home-v2 .vz-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.home-v2 .vz-day { min-height: 58px; border-radius: 10px; background: #F5F6FA; padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; }
.home-v2 .vz-day b { font-size: .8rem; font-weight: 600; color: #6B7280; }
.home-v2 .vz-day em { font-style: normal; font-size: .66rem; font-weight: 700; line-height: 1.2; }
.home-v2 .vz-day.ready { background: #E6F7EE; } .home-v2 .vz-day.ready em { color: #157A43; }
.home-v2 .vz-day.due { background: #F1EDFB; } .home-v2 .vz-day.due em { color: #583F99; }

/* ------------------------------------------------------ stacking cards */
/* Each step is a lit card that pins below the header, and the next one
   slides up over it; the one underneath settles back as it is covered. */
.home-v2 .hv-stack-wrap { padding: clamp(72px, 12vh, 136px) 0 clamp(40px, 6vh, 72px); }
.home-v2 .hv-stack-head { text-align: center; max-width: 880px; margin-bottom: 56px; }
.home-v2 .hv-stack-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.8rem); font-weight: 600; }
.home-v2 .hv-stack-head p { margin: 18px auto 0; color: var(--soft); font-size: 1.08rem; max-width: 58ch; }
.home-v2 .hv-card {
  position: sticky; top: calc(88px + var(--i) * 16px);
  height: min(760px, calc(100vh - 120px)); margin-bottom: 10vh;
  border-radius: clamp(28px, 3.4vw, 48px); overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px);
  padding: clamp(32px, 4.5vw, 64px) 0 0 clamp(32px, 4.5vw, 64px);
  box-shadow: 0 -30px 80px -40px rgba(0,0,0,.8);
  transform-origin: 50% 0;
}
.home-v2 .hv-card:last-child { margin-bottom: 0; }
.home-v2 .hv-card-blue   { background: radial-gradient(90% 110% at 0% 0%, #5A86D0 0%, #2E54A0 42%, #142C63 100%); }
.home-v2 .hv-card-green  { background: radial-gradient(90% 110% at 100% 0%, #7FCB55 0%, #17984A 42%, #0A4F28 100%); }
.home-v2 .hv-card-orange { background: radial-gradient(90% 110% at 0% 100%, #FFA13D 0%, #E3621F 42%, #7A2E0B 100%); }
.home-v2 .hv-card-purple { background: radial-gradient(90% 110% at 100% 100%, #8C74D6 0%, #5A3F9E 42%, #28195A 100%); }
.home-v2 .hv-card-copy { display: flex; flex-direction: column; padding-bottom: clamp(32px, 4.5vw, 56px); }
.home-v2 .hv-card-label { display: flex; align-items: center; gap: 10px; font-weight: 600; color: rgba(255,255,255,.9); font-size: .95rem; }
.home-v2 .hv-card-piece { width: 26px; height: auto; filter: brightness(1.25) saturate(1.1); }
.home-v2 .hv-card h2 { margin-top: 22px; font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 600; line-height: 1.04; }
.home-v2 .hv-card-copy > p { margin-top: 18px; color: rgba(255,255,255,.88); font-size: 1.06rem; max-width: 42ch; }
.home-v2 .hv-card-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-v2 .hv-card-points li {
  padding: 7px 13px; border-radius: 12px; font-size: .88rem; line-height: 1.35; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
}
.home-v2 .hv-card .hv-more { margin-top: auto; align-self: flex-start; color: #fff; }
/* The screen runs off the bottom and right edges of the card, as if the
   app were sitting under it. */
.home-v2 .hv-card-shot { position: relative; align-self: end; will-change: transform; }
.home-v2 .hv-card-shot .hv-frame { border-radius: 16px 0 0 0; transform-origin: 0 100%; }
.home-v2 .hv-card-shot .hv-frame img { aspect-ratio: 16 / 11; }
.home-v2 .hv-card-shot .hv-phone {
  position: absolute; left: -6%; bottom: 6%; width: 24%; height: auto;
  border-radius: 22px; border: 6px solid #0E0E12; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}

/* ------------------------------------------------------------- replaces */
.home-v2 .hv-rep { padding: clamp(72px, 12vh, 136px) 0 clamp(56px, 8vh, 96px); }
.home-v2 .hv-rep-head { text-align: center; max-width: 900px; margin: 0 auto; }
.home-v2 .hv-rep-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; }
.home-v2 .hv-rep-head p { margin: 18px auto 0; color: var(--soft); font-size: 1.08rem; max-width: 56ch; }
.home-v2 .hv-rep-table { margin-top: 56px; }
.home-v2 .hv-rep-row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr);
  border-bottom: 1px solid var(--line);
}
.home-v2 .hv-rep-row > * { padding: 22px; }
.home-v2 .hv-rep-row > :first-child { padding-left: 0; }
.home-v2 .hv-rep-headrow { border-bottom-color: rgba(255,255,255,.22); }
.home-v2 .hv-rep-headrow span { padding-top: 16px; padding-bottom: 14px; font-size: .9rem; font-weight: 600; color: #8F99B6; }
.home-v2 .hv-rep-row b { font-family: var(--display); font-size: 1.14rem; font-weight: 600; color: #fff; }
.home-v2 .hv-rep-now { color: #8F99B6; }
.home-v2 .hv-rep-jai, .home-v2 .hv-rep-headrow span:last-child { background: rgba(74,117,190,.2); color: #fff; }
.home-v2 .hv-rep-headrow span:last-child { border-radius: 18px 18px 0 0; }
.home-v2 .hv-rep-row:last-child .hv-rep-jai { border-radius: 0 0 18px 18px; }
.home-v2 .hv-rep-foot { margin: 32px auto 0; color: var(--soft); max-width: 60ch; text-align: center; }

/* --------------------------------------------------------- gst, invoice */
.home-v2 .hv-gst { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-gst-in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.home-v2 .hv-gst-side h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 600; }
.home-v2 .hv-gst-side > p { margin-top: 18px; color: rgba(243,245,251,.84); font-size: 1.06rem; }
.home-v2 .hv-gst-ctl { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-v2 .hv-gst-ctl .gst-f:first-child { grid-column: span 2; }
.home-v2 .hv-gst-ctl .gst-f > span { color: rgba(255,255,255,.75); }
.home-v2 .hv-gst-ctl select, .home-v2 .hv-gst-ctl input {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.24);
}
.home-v2 .hv-gst-ctl select option { color: #0D1B2A; }
.home-v2 .hv-gst-ctl .gst-amt i { color: rgba(255,255,255,.7); }
/* The invoice itself: paper, a letterhead, the parties, the lines. */
.home-v2 .hv-invoice {
  position: relative; background: #fff; color: var(--ink); --line: #E5E7EB;
  border-radius: 10px; padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.8);
  transform: rotate(1.2deg);
}
.home-v2 .hv-invoice::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #3D68B1 0 25%, #1CA74A 25% 50%, #F36F21 50% 75%, #583F99 75%);
}
.home-v2 .hv-inv-top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.home-v2 .hv-inv-mark { width: 34px; flex: none; }
.home-v2 .hv-inv-top > div { display: grid; }
.home-v2 .hv-inv-top b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.home-v2 .hv-inv-top span { color: var(--ink-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.home-v2 .hv-invoice .gst-kind { margin-left: auto; }
.home-v2 .hv-inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.home-v2 .hv-inv-parties > div { display: grid; }
.home-v2 .hv-inv-parties small { font-size: .74rem; font-weight: 700; color: var(--ink-3); }
.home-v2 .hv-inv-parties b { color: var(--ink); font-weight: 600; }
.home-v2 .hv-inv-parties span { color: var(--ink-2); font-size: .92rem; }
.home-v2 .hv-invoice .gst-total { border-top: 2px solid var(--ink); padding-top: 14px; }
.home-v2 .hv-invoice .gst-total b { color: var(--ink); }
.home-v2 .hv-inv-note { margin-top: 16px; font-size: .8rem; color: var(--ink-3); line-height: 1.55; }

/* --------------------------------------------------------------- builder */
.home-v2 .hv-mods { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-mods-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.home-v2 .hv-mods-head h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 600; }
.home-v2 .hv-mods-head p { color: var(--soft); }
.home-v2 .hv-island {
  background: #fff; color: var(--ink); --line: #E5E7EB;
  border-radius: clamp(24px, 3vw, 40px); padding: clamp(24px, 4.5vw, 64px);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.6);
}
.home-v2 .hv-island h2, .home-v2 .hv-island h3, .home-v2 .hv-island h4 { color: var(--ink); }
.home-v2 .hv-island p { color: var(--ink-2); }
.home-v2 .hv-island.builder { margin-top: 48px; }
.home-v2 .hv-mods-foot { margin-top: 20px; }

/* ------------------------------------------------- figures, as the mark */
.home-v2 .hv-figs { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-figs-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.home-v2 .hv-figs-copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; }
.home-v2 .hv-figs-copy p { margin-top: 18px; color: var(--soft); font-size: 1.06rem; max-width: 44ch; }
.home-v2 .hv-figs-mark { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 16px); }
.home-v2 .hv-figs-mark li {
  aspect-ratio: 1 / 1; padding: clamp(18px, 2.6vw, 34px); border-radius: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
}
.home-v2 .hv-figs-mark b { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.03em; }
.home-v2 .hv-figs-mark span { margin-top: 8px; color: rgba(255,255,255,.88); font-size: clamp(.85rem, 1.2vw, 1rem); }
/* each tile rounded hard at its own outer corner, like its piece */
.home-v2 .hv-fig-tl { background: linear-gradient(135deg, #4A75BE, #3358A5); border-top-left-radius: 46% !important; }
.home-v2 .hv-fig-tr { background: linear-gradient(135deg, #6FC145, #16A24A); border-top-right-radius: 46% !important; }
.home-v2 .hv-fig-bl { background: linear-gradient(135deg, #F8891F, #EF5124); border-bottom-left-radius: 46% !important; }
.home-v2 .hv-fig-br { background: linear-gradient(45deg, #6E57AE, #533A94); border-bottom-right-radius: 46% !important; }
.home-v2 .hv-fig-tl, .home-v2 .hv-fig-bl { align-items: flex-end; text-align: right; }

/* ------------------------------------------------------------ who, mosaic */
.home-v2 .hv-who { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-who-mosaic {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 300px 300px;
}
.home-v2 .hv-who-copy { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.home-v2 .hv-who-copy h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; max-width: 16ch; }
.home-v2 .hv-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.home-v2 .hv-links .hv-more { margin-top: 0; }
.home-v2 .hv-who-card { position: relative; display: block; overflow: hidden; border-radius: 26px; text-decoration: none; background: #111a33; }
.home-v2 .hv-who-0 { grid-row: 2 / span 2; }
.home-v2 .hv-who-1 { grid-column: 2 / span 2; }
.home-v2 .hv-who-card img, .home-v2 .hv-who-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.home-v2 .hv-who-card:hover img, .home-v2 .hv-who-card:hover video { transform: scale(1.05); }
.home-v2 .hv-who-text {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px;
  padding: 90px 22px 22px; background: linear-gradient(rgba(5,8,26,0), rgba(5,8,26,.7) 45%, rgba(5,8,26,.95));
}
.home-v2 .hv-who-text b { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: #fff; }
.home-v2 .hv-who-text span { color: #D5DAE8; font-size: .95rem; line-height: 1.45; }

/* --------------------------------------------------------- industry index */
.home-v2 .hv-ind { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-ind-title { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; max-width: 18ch; }
.home-v2 .hv-ind-lede { margin-top: 18px; color: rgba(243,245,251,.8); font-size: 1.08rem; max-width: 56ch; }
.home-v2 .hv-index { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.2); }
.home-v2 .hv-index li { border-bottom: 1px solid rgba(255,255,255,.2); }
.home-v2 .hv-index a {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 28px; align-items: center; gap: 24px;
  padding: 18px 8px; text-decoration: none; position: relative; transition: padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.home-v2 .hv-index a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; border-radius: 4px;
  background: var(--c); transform: translateY(-50%) scale(0); transition: transform .3s;
}
.home-v2 .hv-index b { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.home-v2 .hv-index span { color: rgba(243,245,251,.72); font-size: 1rem; }
.home-v2 .hv-index svg { width: 22px; height: 22px; color: #fff; opacity: .5; transition: transform .3s, opacity .3s; }
.home-v2 .hv-index a:hover { padding-left: 30px; }
.home-v2 .hv-index a:hover::before { transform: translateY(-50%) scale(1); }
.home-v2 .hv-index a:hover svg { opacity: 1; transform: translateX(4px); }

/* ----------------------------------------------------------------- reach */
.home-v2 .hv-reach { padding: clamp(72px, 12vh, 136px) 0; overflow: clip; }
.home-v2 .hv-reach-title { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; text-align: center; }
.home-v2 .hv-reach-nums { list-style: none; margin: 40px 0 0; padding: 0; display: flex; justify-content: center; gap: clamp(28px, 8vw, 120px); }
.home-v2 .hv-reach-nums li { display: grid; text-align: center; }
.home-v2 .hv-reach-nums b { font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 8vw, 6.6rem); line-height: 1; letter-spacing: -.04em; color: #fff; }
.home-v2 .hv-reach-nums span { color: var(--soft); margin-top: 6px; }
.home-v2 .hv-reach-lede { margin: 22px auto 40px; text-align: center; color: var(--soft); max-width: 52ch; }
.home-v2 .hv-reach-belt { overflow: hidden; padding: 6px 0; }
.home-v2 .hv-reach-run { display: flex; gap: 12px; width: max-content; animation: hv-slide 60s linear infinite; }
.home-v2 .hv-reach-rev .hv-reach-run { animation-direction: reverse; }
.home-v2 .hv-reach-belt:hover .hv-reach-run { animation-play-state: paused; }
.home-v2 .hv-reach-run a {
  display: grid; padding: 14px 22px; border-radius: 16px; text-decoration: none; white-space: nowrap;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: background-color .2s;
}
.home-v2 .hv-reach-run a:hover { background: rgba(255,255,255,.1); }
.home-v2 .hv-reach-run b { color: #fff; font-weight: 600; font-size: 1.05rem; }
.home-v2 .hv-reach-run span { color: #8F99B6; font-size: .84rem; }
.home-v2 .hv-reach-in { margin-top: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-v2 .hv-reach-in summary { cursor: pointer; padding: 20px 0; font-weight: 600; color: #fff; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.home-v2 .hv-reach-in summary::-webkit-details-marker { display: none; }
.home-v2 .hv-reach-in summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--soft); }
.home-v2 .hv-reach-in[open] summary::after { content: "\2212"; }
.home-v2 .hv-chips { list-style: none; padding: 0 0 22px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-v2 .hv-chips a { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: .9rem; border: 1px solid var(--line); color: #D5DAE8; text-decoration: none; }
.home-v2 .hv-chips a:hover { border-color: #fff; color: #fff; }
.home-v2 .hv-reach .hv-wrap > .hv-more { margin-top: 28px; }

/* ------------------------------------------------------------------- hub */
.home-v2 .hv-hub-wrap { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-hub-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.home-v2 .hv-hub-copy h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 600; }
.home-v2 .hv-hub-copy p { margin: 18px 0 30px; color: rgba(243,245,251,.84); font-size: 1.06rem; }
.home-v2 .hv-hub { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; justify-self: center; }
.home-v2 .hv-hub::before {
  content: ""; position: absolute; inset: 9%; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
}
.home-v2 .hv-hub-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-v2 .hv-hub-wires line {
  stroke: rgba(127,203,85,.7); stroke-width: .35; stroke-dasharray: 1.2 1.6;
  animation: hv-in 2.2s linear infinite; animation-delay: var(--d);
}
@keyframes hv-in { to { stroke-dashoffset: -5.6; } }
.home-v2 .hv-hub-core {
  position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 0 0 22px rgba(255,255,255,.04), 0 30px 60px -20px rgba(0,0,0,.7);
}
.home-v2 .hv-hub-mark { width: 52%; }
.home-v2 .hv-hub-nodes { list-style: none; margin: 0; padding: 0; }
.home-v2 .hv-hub-nodes li {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 7px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #fff;
  background: #0B3322; border: 1px solid rgba(127,203,85,.45);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.7);
}

/* ---------------------------------------------------------------- pocket */
/* Wistia's tabbed feature: the choices down the left, and the picture on
   a lit panel of its own. */
.home-v2 .hv-pocket { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-pocket .hv-split-head { text-align: center; max-width: 820px; margin: 0 auto; display: block; }
.home-v2 .hv-pocket .hv-split-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; }
.home-v2 .hv-pocket .hv-split-head p { margin: 18px auto 0; color: rgba(243,245,251,.8); font-size: 1.08rem; max-width: 52ch; }
.home-v2 .hv-pocket .pocket { margin-top: 48px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; }
.home-v2 .hv-pocket .pk-list { align-content: center; }
.home-v2 .hv-pocket .pk-btn {
  background: transparent; border: 1px solid transparent; border-left: 0; border-radius: 18px;
  color: #fff; padding: 18px 20px;
}
.home-v2 .hv-pocket .pk-btn:hover { box-shadow: none; background: rgba(255,255,255,.05); }
.home-v2 .hv-pocket .pk-btn b { color: rgba(255,255,255,.62); font-size: 1.15rem; transition: color .2s; }
.home-v2 .hv-pocket .pk-btn span { color: rgba(243,245,251,.55); display: none; }
.home-v2 .hv-pocket .pk-btn[aria-selected='true'] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.home-v2 .hv-pocket .pk-btn[aria-selected='true'] b { color: #fff; }
.home-v2 .hv-pocket .pk-btn[aria-selected='true'] span { display: block; color: rgba(243,245,251,.85); }
.home-v2 .hv-pocket .pk-phone { align-self: center; width: min(100%, 300px); }
.home-v2 .hv-pocket .pocket > .pk-phone { position: relative; }
.home-v2 .hv-pocket .pocket::after { content: none; }
.home-v2 .hv-pocket-stage {
  border-radius: 36px; padding: 40px 20px; display: grid; place-items: center;
  background: radial-gradient(80% 90% at 50% 100%, #FFA13D 0%, #E3621F 40%, #6B280A 100%);
}

/* --------------------------------------------------------- the afternoon */
.home-v2 .hv-day-wrap { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-day-title { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 600; text-align: center; }
.home-v2 .hv-day {
  --p: 1; position: relative; list-style: none; margin: 64px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.home-v2 .hv-day::before, .home-v2 .hv-day::after {
  content: ""; position: absolute; left: 0; top: 11px; height: 3px; border-radius: 3px;
}
.home-v2 .hv-day::before { right: 0; background: rgba(255,255,255,.12); }
.home-v2 .hv-day::after {
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, #3D68B1, #1CA74A 40%, #F36F21 70%, #583F99);
}
.home-v2 .hv-day li { position: relative; padding-top: 44px; }
.home-v2 .hv-day li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 6px var(--night); z-index: 1;
}
.home-v2 .hv-day time { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: #fff; letter-spacing: -.02em; }
.home-v2 .hv-day h3 { margin-top: 10px; font-size: 1.15rem; font-weight: 600; }
.home-v2 .hv-day p { margin-top: 8px; color: var(--soft); font-size: .96rem; }
.home-v2 .hv-day-shot { margin: 64px 0 0; }
.home-v2 .hv-day-shot figcaption { margin-top: 16px; text-align: center; color: var(--soft); }

/* ----------------------------------------------------------------- trust */
.home-v2 .hv-trust { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-trust-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.home-v2 .hv-trust-copy h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 600; }
.home-v2 .hv-trust-copy > p { margin-top: 18px; color: rgba(243,245,251,.84); }
.home-v2 .hv-trust-facts { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; }
.home-v2 .hv-trust-facts li { display: grid; }
.home-v2 .hv-trust-facts b { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; color: #fff; }
.home-v2 .hv-trust-facts span { margin-top: 6px; color: rgba(243,245,251,.72); font-size: .9rem; }
.home-v2 .hv-feed {
  border-radius: 28px; padding: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.home-v2 .hv-feed-h { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.home-v2 .hv-feed-h i { width: 9px; height: 9px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: hv-pulse 2s infinite; }
@keyframes hv-pulse { 70% { box-shadow: 0 0 0 10px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
.home-v2 .hv-feed ol { list-style: none; margin: 16px 0 0; padding: 0; }
.home-v2 .hv-feed li { border-top: 1px solid rgba(255,255,255,.12); }
.home-v2 .hv-feed a { display: grid; gap: 4px; padding: 14px 0; text-decoration: none; }
.home-v2 .hv-feed a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.home-v2 .hv-feed-meta { display: flex; align-items: center; gap: 10px; color: #A99BDD; font-size: .82rem; font-variant-numeric: tabular-nums; }
.home-v2 .hv-feed-meta em { font-style: normal; font-weight: 700; font-size: .7rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; }
.home-v2 .hv-feed b { color: #fff; font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.home-v2 .hv-feed-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.home-v2 .hv-feed-foot .hv-more { margin-top: 14px; }
.home-v2 .hv-guides { margin-top: 64px; }
.home-v2 .hv-guides h3 { font-size: 1.35rem; font-weight: 600; }
.home-v2 .hv-guides ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.home-v2 .hv-guides li { border-top: 1px solid rgba(255,255,255,.16); }
.home-v2 .hv-guides a { display: block; padding: 16px 0; text-decoration: none; color: #fff; font-weight: 500; }
.home-v2 .hv-guides a:hover { color: #C9BEF5; }

/* --------------------------------------------------------------- pricing */
/* Dark, with the controls first and three plans that do the sum for you.
   The most popular one wears the whole mark round its edge, turning
   slowly. */
.home-v2 .hv-price { padding: clamp(72px, 12vh, 136px) 0; }
.home-v2 .hv-price-head { text-align: center; max-width: 820px; margin: 0 auto; }
.home-v2 .hv-price-head h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 600; }
.home-v2 .hv-price-head p { margin: 18px auto 0; color: var(--soft); font-size: 1.08rem; max-width: 54ch; }

.home-v2 .hv-calc {
  margin: 44px auto 0; max-width: 920px; display: flex; align-items: center; gap: 28px;
  padding: 22px 26px; border-radius: 24px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.home-v2 .hv-calc-people { flex: 1; }
.home-v2 .hv-calc-people label { display: block; font-weight: 600; color: #fff; margin-bottom: 10px; }
.home-v2 .hv-calc-row { display: flex; align-items: center; gap: 18px; }
.home-v2 .hv-calc-row output {
  min-width: 118px; text-align: right; font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums;
}
.home-v2 .hv-calc input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1; height: 8px; border-radius: 8px; cursor: pointer;
  background: linear-gradient(90deg, #3D68B1, #1CA74A, #F36F21, #583F99) 0 0 / var(--fill, 10%) 100% no-repeat, rgba(255,255,255,.14);
}
.home-v2 .hv-calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 5px rgba(41,98,255,.35), 0 6px 16px rgba(0,0,0,.4);
}
.home-v2 .hv-calc input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 5px rgba(41,98,255,.35), 0 6px 16px rgba(0,0,0,.4);
}
.home-v2 .hv-calc-bill { display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); flex: none; }
.home-v2 .hv-calc-bill button {
  font: inherit; font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.7); cursor: pointer;
  border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; min-height: 44px;
}
.home-v2 .hv-calc-bill button[aria-pressed='true'] { background: #fff; color: var(--ink); }
.home-v2 .hv-calc-bill em { font-style: normal; font-size: .76rem; font-weight: 700; color: #1CA74A; margin-left: 4px; }

.home-v2 .hv-plans { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.home-v2 .hv-plan {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: 30px 28px 28px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.12);
}
/* a wash of the plan's own colour from its corner, as before; the most
   popular one keeps the four colours turning round its edge */
.home-v2 .hv-plan { isolation: isolate; }
.home-v2 .hv-plan::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-v2 .hv-plan-blue::after   { background: radial-gradient(70% 50% at 0% 0%, rgba(74,117,190,.45), transparent 70%); }
.home-v2 .hv-plan-green::after  { background: radial-gradient(70% 50% at 100% 0%, rgba(111,193,69,.35), transparent 70%); }
.home-v2 .hv-plan-orange::after { background: radial-gradient(70% 50% at 0% 100%, rgba(248,137,31,.35), transparent 70%); }
.home-v2 .hv-plan-purple::after { background: radial-gradient(80% 55% at 100% 0%, rgba(126,102,196,.55), transparent 70%); }
.home-v2 .hv-plan.is-featured { border-color: transparent; transform: translateY(-10px); box-shadow: 0 40px 90px -40px rgba(108,77,255,.7); }
.home-v2 .hv-plan.is-featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), #3D68B1, #1CA74A, #F36F21, #583F99, #3D68B1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hv-turn 8s linear infinite;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hv-turn { to { --a: 360deg; } }
.home-v2 .hv-plan-badge {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #6E57AE, #2962FF);
}
.home-v2 .hv-plan-top h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; padding-right: 90px; }
.home-v2 .hv-plan-top p { margin-top: 8px; color: var(--soft); font-size: .95rem; min-height: 3em; }
.home-v2 .hv-plan-price { display: flex; align-items: baseline; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.home-v2 .hv-plan-price b {
  font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 4.6vw, 4rem);
  line-height: 1; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums;
}
.home-v2 .hv-plan-price span { color: var(--soft); font-size: .92rem; }
.home-v2 .hv-plan-total {
  padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.28);
  color: var(--soft); font-size: .9rem; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.home-v2 .hv-plan-total b { color: #fff; font-weight: 600; }
.home-v2 .hv-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.home-v2 .hv-plan-list li { position: relative; padding-left: 28px; color: #E3E8F4; font-size: .95rem; line-height: 1.45; }
.home-v2 .hv-plan-list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(28,167,74,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2346C46E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.home-v2 .hv-plan .hv-btn { margin-top: auto; width: 100%; }
.home-v2 .hv-price-foot { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 28px; color: var(--soft); font-size: .92rem; }
.home-v2 .hv-price-foot .hv-more { margin-top: 0; }

/* -------------------------------------------------------------------- faq */
.home-v2 .hv-faq { padding: clamp(64px, 10vh, 112px) 0; }
.home-v2 .hv-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); }
.home-v2 .hv-faq-side h2 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; }
.home-v2 .hv-faq-side p { margin: 16px 0 24px; color: var(--soft); }
.home-v2 .hv-faq-list details { border-bottom: 1px solid var(--line); }
.home-v2 .hv-faq-list details:first-child { border-top: 1px solid var(--line); }
.home-v2 .hv-faq-list summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-weight: 600; font-size: 1.1rem; color: #fff;
}
.home-v2 .hv-faq-list summary::-webkit-details-marker { display: none; }
.home-v2 .hv-faq-list summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid #9AA4C0; border-bottom: 2px solid #9AA4C0;
  transform: translateY(-70%) rotate(45deg); transition: transform .25s;
}
.home-v2 .hv-faq-list details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.home-v2 .hv-faq-list details p { padding: 0 40px 24px 0; color: var(--soft); }

/* ------------------------------------------------------------------ close */
.home-v2 .hv-close { padding: clamp(96px, 16vh, 176px) 0; text-align: center; }
.home-v2 .hv-close-in { max-width: 860px; }
.home-v2 .hv-mark-close { width: 104px; margin: 0 auto 40px; }
.home-v2 .hv-close h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 600; }
.home-v2 .hv-close p { margin: 22px auto 0; max-width: 46ch; color: var(--soft); font-size: 1.12rem; }

/* ----------------------------------------------------------------- footer */
.home-v2 .hv-foot { border-top: 1px solid var(--line); padding: 72px 0 40px; background: #05081A; position: relative; z-index: 1; }
.home-v2 .hv-foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.home-v2 .hv-foot-brand img { height: 36px; width: auto; }
.home-v2 .hv-foot-brand p { margin-top: 16px; max-width: 42ch; color: var(--soft); font-size: .98rem; }
.home-v2 .hv-foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding: 48px 0; }
.home-v2 .hv-foot-cols h4 { margin: 0 0 14px; font-family: var(--font); font-size: .9rem; font-weight: 600; color: #fff; letter-spacing: 0; }
.home-v2 .hv-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.home-v2 .hv-foot-cols a { color: #9AA4C0; text-decoration: none; font-size: .92rem; }
.home-v2 .hv-foot-cols a:hover { color: #fff; }
.home-v2 .hv-foot-all { display: inline-block; margin-top: 12px; color: #fff !important; font-weight: 600; }
.home-v2 .hv-foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 28px; border-top: 1px solid var(--line); color: #7F89A6; font-size: .86rem;
}
.home-v2 .hv-foot-base b { color: #C9D0E2; font-weight: 600; }
.home-v2 .hv-foot-base a { color: #9AA4C0; margin-left: 16px; white-space: nowrap; }

/* ----------------------------------------------------------------- tablet */
@media (max-width: 1080px) {
  .home-v2 .hv-head .nav-list { margin-left: 4px; }
  .home-v2 .hv-head .hv-link { display: none; }
  .home-v2 .hv-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-v2 .hv-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v2 .hv-tile, .home-v2 .hv-tile-wide { grid-column: span 1; }
  .home-v2 .hv-tile-wide, .home-v2 .hv-tile-full { grid-column: 1 / -1; }
  .home-v2 .hv-day { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .home-v2 .hv-day::before, .home-v2 .hv-day::after { display: none; }
  .home-v2 .hv-float-4, .home-v2 .hv-float-5 { display: none; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 860px) {
  body.home-v2 { font-size: 16px; }
  .home-v2 .menu-toggle {
    display: inline-grid; place-items: center; gap: 4px; margin-left: auto;
    width: 44px; height: 44px; border-radius: 10px;
    border: 1px solid #DDE2EA; background: #fff; cursor: pointer;
  }
  .home-v2 .menu-toggle span { display: block; width: 18px; height: 2px; background: #0D1B2A; border-radius: 2px; }
  .home-v2 .hv-head .nav {
    /* Pinned to the screen, not to the header's inner box. The old theme
       centres its drawer with left:50% and translateX(-50%), so both
       halves are reset. */
    display: none; position: fixed; top: 72px; left: 0; right: 0; width: auto; max-width: none;
    transform: none;
    flex-direction: column; align-items: stretch; gap: 16px; padding: 16px var(--gut) 24px;
    background: #fff; border-bottom: 1px solid #E6E9F0;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .home-v2 .hv-head .nav.open { display: flex; }
  .home-v2 .hv-head .nav-list { flex-direction: column; margin: 0; }
  .home-v2 .hv-head .nav-list > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 4px 8px; }
  .home-v2 .hv-head .head-actions { flex-direction: column; align-items: stretch; }
  .home-v2 .hv-head .hv-link { display: block; }
  .home-v2 .hv-actions .hv-btn { width: 100%; }

  .home-v2 .hv-stage { padding: 26px; }

  /* collage: two small pictures only, clear of the words */
  .home-v2 .hv-instead { min-height: 0; padding: 170px 0 170px; }
  .home-v2 .hv-float-1, .home-v2 .hv-float-2, .home-v2 .hv-float-4, .home-v2 .hv-float-5 { display: none; }
  .home-v2 .hv-float-0 { width: 84px; left: 4%; top: 18px; }
  .home-v2 .hv-float-3 { width: 84px; right: 4%; bottom: 18px; }

  .home-v2 .hv-loss { width: 80vw; }
  .home-v2 .hv-story-photo { width: 86vw; }
  .home-v2 .hv-story-end { width: 76vw; }

  .home-v2 .hv-sheet { margin-inline: 6px; }
  .home-v2 .hv-bento { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-tile, .home-v2 .hv-tile-wide, .home-v2 .hv-tile-full { grid-column: 1; flex-direction: column; min-height: 0; gap: 20px; }
  .home-v2 .hv-tile-wide .hv-tile-copy, .home-v2 .hv-tile-full .hv-tile-copy { order: 2; flex-basis: auto; }
  .home-v2 .vz-flow { grid-template-columns: auto 32px 1fr; }
  .home-v2 .vz-day { min-height: 44px; padding: 4px 5px; }
  .home-v2 .vz-day em { font-size: .56rem; }

  /* the cards stop stacking and simply follow each other */
  .home-v2 .hv-card { position: relative; top: 0; height: auto; margin-bottom: 18px; grid-template-columns: minmax(0, 1fr); padding: 28px 0 0 22px; gap: 24px; }
  .home-v2 .hv-card-copy { padding-right: 22px; padding-bottom: 0; }
  .home-v2 .hv-card .hv-more { margin-top: 22px; }

  .home-v2 .hv-rep-headrow { display: none; }
  .home-v2 .hv-rep-row { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .home-v2 .hv-rep-row > * { padding: 0; }
  .home-v2 .hv-rep-now { margin-top: 10px; }
  .home-v2 .hv-rep-now::before, .home-v2 .hv-rep-jai::before { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 2px; color: #8F99B6; }
  .home-v2 .hv-rep-now::before { content: "Now"; }
  .home-v2 .hv-rep-jai::before { content: "With JAI CRM"; color: #A9C0EA; }
  .home-v2 .hv-rep-jai { margin-top: 12px; padding: 12px 14px; border-radius: 12px; }
  .home-v2 .hv-rep-row:last-child .hv-rep-jai { border-radius: 12px; }

  .home-v2 .hv-gst-in, .home-v2 .hv-figs-in, .home-v2 .hv-hub-in, .home-v2 .hv-trust-in,
  .home-v2 .hv-mods-head, .home-v2 .hv-faq-in { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-calc { flex-direction: column; align-items: stretch; gap: 18px; padding: 18px; }
  .home-v2 .hv-calc-bill { align-self: center; }
  .home-v2 .hv-plans { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-plan.is-featured { transform: none; order: -1; }
  .home-v2 .hv-invoice { transform: none; }
  .home-v2 .hv-inv-top { flex-wrap: wrap; }

  .home-v2 .hv-who-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto 260px 200px 200px; gap: 10px; }
  .home-v2 .hv-who-copy { flex-direction: column; align-items: flex-start; }
  .home-v2 .hv-who-0 { grid-row: auto; grid-column: 1 / -1; }
  .home-v2 .hv-who-1 { grid-column: 1 / -1; }
  .home-v2 .hv-who-text { padding: 60px 14px 14px; }
  .home-v2 .hv-who-text b { font-size: 1.12rem; }
  .home-v2 .hv-who-text span { font-size: .84rem; }

  .home-v2 .hv-index a { grid-template-columns: minmax(0, 1fr) 22px; gap: 6px 14px; padding: 16px 4px; }
  .home-v2 .hv-index span { grid-column: 1; }
  .home-v2 .hv-index svg { grid-column: 2; grid-row: 1 / span 2; }

  .home-v2 .hv-hub-nodes li { font-size: .62rem; padding: 4px 8px; }

  .home-v2 .hv-pocket .pocket { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-pocket .pk-btn span { display: block; }

  .home-v2 .hv-day { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-trust-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .home-v2 .hv-guides ul { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .hv-foot-top { flex-direction: column; }
  .home-v2 .hv-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .home-v2 .hv-foot-base a { margin: 0 16px 0 0; }
}

@media (max-width: 480px) {
  .home-v2 .hv-hub-nodes li { font-size: .56rem; padding: 3px 6px; }
  .home-v2 .hv-comp img { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-v2 .hv-tone { transition: none; }
  .home-v2 * { scroll-behavior: auto !important; }
  .home-v2 .hv-marq-track, .home-v2 .hv-reach-run { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 10px; }
  .home-v2 .hv-marq-track [aria-hidden], .home-v2 .hv-reach-run [aria-hidden] { display: none; }
  .home-v2 .vz-wires path, .home-v2 .hv-hub-wires line, .home-v2 .hv-feed-h i, .home-v2 .hv-plan.is-featured::before { animation: none; }
  .home-v2 .hv-who-card img, .home-v2 .hv-who-card video { transition: none; }
}