/* Installer homepage, blue redesign 2026-10-18 (approved mockup).

   Every rule is scoped under .hp: installer.css owns the rest of the site
   and shares class names with this file (.hero, .btn, .card), and a test
   fails if a selector here escapes the scope.

   Homes (the default) is the white hero with blue text; Property &
   business flips it to the blue hero with white text and a portfolio
   photo, and the featured band under it flips the other way. The switch
   only toggles .aud-homes / .aud-business on .hp, so all the copy for
   both audiences is in the HTML for crawlers. */

.hp {
  --blue: #153a8e;
  --blue-deep: #0f2c6e;
  --blue-night: #0b2157;
  --blue-soft: #2d6add;
  --sky: #eef3fc;
  --sky-line: #d7e2f7;
  --ink: #153a8e;
  --ink-body: #2b3a5c;
  --ink-muted: #5a6889;
  --light: #7cc7ff;
  --on-blue-soft: rgba(255, 255, 255, 0.86);
  --display: "Inter Tight", "Instrument", ui-sans-serif, system-ui, sans-serif;
  --text: "Instrument", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --hwrap: 1120px;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color: var(--ink-body);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.hp img,
.hp video {
  display: block;
  max-width: 100%;
}
.hp p {
  margin: 0;
}
.hp figure {
  margin: 0;
}
.hp .hwrap {
  max-width: var(--hwrap);
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.hp .eyebrow {
  font: 700 12px/1.2 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.hp h1,
.hp h2,
.hp h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
.hp h2 {
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.05;
}
.hp h3 {
  font-size: clamp(22px, 4.6vw, 28px);
  line-height: 1.1;
}
.hp section {
  padding-block: clamp(56px, 9vw, 96px);
}
.hp .section-head {
  display: grid;
  align-content: start;
  gap: 14px;
  max-width: 44rem;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hp .section-head p {
  font-size: 18px;
  color: var(--ink-muted);
}
.hp .section-head strong {
  color: var(--ink);
  font-weight: 600;
}
.hp :focus-visible {
  outline: 3px solid var(--blue-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- buttons ---------- */
.hp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  border: 0;
  font: 700 17px/1 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}
.hp .btn-main {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(21, 58, 142, 0.25);
}
.hp .btn-main:hover {
  background: var(--blue-deep);
  color: #fff;
  transform: translateY(-2px);
}
.hp .btn-line {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--sky-line);
}
.hp .btn-line:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.hp .btn-sky {
  background: var(--light);
  color: var(--blue-night);
  box-shadow: 0 6px 18px rgba(124, 199, 255, 0.35);
}
.hp .btn-sky:hover {
  background: #a3d8ff;
  color: var(--blue-night);
  transform: translateY(-2px);
}
.hp .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--light);
  padding-bottom: 2px;
}

/* ================= HERO ================= */
.hp .hero {
  display: block;
  padding: 0;
  min-height: 0;
  background: none;
}
/* installer.css gives inner pages' .hero a scrim; this hero has none. */
.hp .hero::before,
.hp .hero::after {
  content: none;
  display: none;
}
/* Landscape on phones (the clip is 16:9, so nothing is cropped), which
   brings the headline and buttons up into the first screen. */
.hp .hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: #2b3033;
}
.hp .hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hp .hero-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hp .media-tag {
  position: absolute;
  left: var(--gutter-l);
  bottom: 14px;
  font: 600 11px/1 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 9px;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}
.hp .media-toggle {
  position: absolute;
  right: var(--gutter-r);
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.hp .media-toggle[hidden] {
  display: none;
}

.hp .hero-panel {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  padding-block: 22px 44px;
}
.hp .wipe {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  clip-path: circle(0 at 50% 0);
  pointer-events: none;
}
.hp .hero-panel .hwrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
}
.hp .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hp .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 20px/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.hp .wordmark svg {
  width: 32px;
  height: 32px;
  flex: none;
}
.hp .burger {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  border: 0;
  background: var(--sky);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hp .burger:hover {
  background: var(--sky-line);
}
.hp .burger i,
.hp .burger i::before,
.hp .burger i::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}
.hp .burger i::before,
.hp .burger i::after {
  content: "";
  position: absolute;
  left: 0;
}
.hp .burger i::before {
  top: -6px;
}
.hp .burger i::after {
  top: 6px;
}

.hp .seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  justify-self: start;
  padding: 4px;
  border-radius: 999px;
  background: var(--sky);
}
.hp .seg button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 600 15px/1 var(--text);
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s ease;
}
.hp .seg button[aria-pressed="true"] {
  color: #fff;
}
.hp .seg .thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 999px;
  background: var(--blue);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Plain text, not a pill: with the switch above and two buttons below,
   a third button-shaped thing made the first screen read as all buttons. */
.hp .badge {
  justify-self: start;
  font-size: 15px;
  color: var(--ink-muted);
}
.hp .badge b {
  font-weight: 700;
  color: var(--ink);
}
.hp .badge a {
  color: inherit;
  text-decoration: none;
}
.hp .badge a:hover b {
  text-decoration: underline;
  text-decoration-color: var(--light);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* "Get a quote" in the hero's own bar, so it is seen at once without
   adding anything to the first screen. Same place as in the site bar. */
.hp .bar-end {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp .bar-quote {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 700 15px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.hp .bar-quote:hover {
  background: var(--blue-deep);
}
.hp.aud-business .bar-quote {
  background: var(--light);
  color: var(--blue-night);
}
.hp.aud-business .bar-quote:hover {
  background: #a3d8ff;
}
@media (max-width: 460px) {
  .hp .bar .wordmark {
    font-size: 17px;
    gap: 8px;
  }
  .hp .bar .wordmark svg {
    width: 28px;
    height: 28px;
  }
  .hp .bar-quote {
    padding: 0 14px;
    font-size: 14px;
  }
  .hp .bar-end {
    gap: 8px;
  }
}
@media (max-width: 400px) {
  .hp .bar {
    gap: 8px;
  }
  .hp .bar .wordmark {
    font-size: 16px;
    gap: 7px;
  }
  .hp .bar .wordmark svg {
    width: 26px;
    height: 26px;
  }
  .hp .bar-quote {
    min-height: 42px;
    padding: 0 12px;
  }
  .hp .bar-end {
    gap: 6px;
  }
  .hp .burger {
    width: 42px;
    height: 42px;
  }
}
/* The narrowest phones: the tile alone, so the quote button and the
   burger both fit. The name is still the link's accessible name. */
@media (max-width: 360px) {
  .hp .bar .wm-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hp .bar .wordmark svg {
    width: 34px;
    height: 34px;
  }
  .hp .burger {
    width: 42px;
    height: 42px;
  }
}

.hp .hero-panel h1 {
  font-size: clamp(32px, 8.6vw, 54px);
  line-height: 1.03;
  color: var(--ink);
}
.hp .hero-panel h1 em {
  font-style: normal;
  color: var(--blue-soft);
}
.hp .hero-lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-body);
  max-width: 36rem;
}
.hp .hero-lede strong {
  color: var(--ink);
  font-weight: 600;
}
.hp .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hp .facts {
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.hp .facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue-night);
  font-size: 14px;
  font-weight: 600;
}
.hp .facts li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-soft);
}

.hp .starter {
  margin-top: 8px;
  border-radius: 20px;
  background: var(--sky);
  padding: 18px;
  display: grid;
  gap: 14px;
}
.hp .starter-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hp .starter-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}
.hp .starter small {
  display: block;
  color: var(--ink-muted);
  font-size: 14px;
}
.hp .starter strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  text-wrap: balance;
}
.hp .chips {
  flex-wrap: wrap;
  gap: 8px;
}
.hp .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--sky-line);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.hp .chip:hover {
  box-shadow: inset 0 0 0 1px var(--blue);
}

/* ---------- audience switch ---------- */
.hp [data-aud="business"] {
  display: none !important;
}
.hp .ctas[data-aud],
.hp .chips[data-aud],
.hp .tiles[data-aud],
.hp .faq-set[data-aud] {
  display: flex;
}
.hp .tiles[data-aud],
.hp .faq-set[data-aud] {
  display: grid;
}
.hp.aud-business [data-aud="homes"] {
  display: none !important;
}
.hp.aud-business [data-aud="business"] {
  display: revert !important;
}
.hp.aud-business .chips[data-aud="business"],
.hp.aud-business .ctas[data-aud="business"],
.hp.aud-business .facts[data-aud="business"] {
  display: flex !important;
}
.hp.aud-business .faq-set[data-aud="business"],
.hp.aud-business .tiles[data-aud="business"] {
  display: grid !important;
}

/* Property & business: the blue hero, white text, the portfolio photo. */
.hp.aud-business .hero-panel {
  background: var(--blue);
  color: #fff;
}
.hp.aud-business .hero-alt {
  opacity: 1;
  transform: none;
}
.hp.aud-business .media-tag,
.hp.aud-business .media-toggle {
  opacity: 0;
  pointer-events: none;
}
.hp.aud-business .hero-panel h1,
.hp.aud-business .hero-panel .wordmark {
  color: #fff;
}
.hp.aud-business .hero-panel h1 em {
  color: var(--light);
}
.hp.aud-business .hero-lede {
  color: var(--on-blue-soft);
}
.hp.aud-business .hero-lede strong {
  color: #fff;
}
.hp.aud-business .burger {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.hp.aud-business .burger:hover {
  background: rgba(255, 255, 255, 0.18);
}
.hp.aud-business .seg {
  background: rgba(0, 0, 0, 0.2);
}
.hp.aud-business .seg button {
  color: var(--on-blue-soft);
}
.hp.aud-business .seg button[aria-pressed="true"] {
  color: var(--blue);
}
.hp.aud-business .seg .thumb {
  background: #fff;
}
.hp.aud-business .badge {
  color: var(--on-blue-soft);
}
.hp.aud-business .badge b {
  color: #fff;
}
.hp.aud-business .hero-panel .btn-main {
  background: var(--light);
  color: var(--blue-night);
  box-shadow: 0 6px 18px rgba(124, 199, 255, 0.35);
}
.hp.aud-business .hero-panel .btn-main:hover {
  background: #a3d8ff;
}
.hp.aud-business .hero-panel .btn-line {
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.hp.aud-business .hero-panel .btn-line:hover {
  box-shadow: inset 0 0 0 2px #fff;
}
.hp.aud-business .starter {
  background: var(--blue-deep);
}
.hp.aud-business .starter-icon {
  background: var(--blue-night);
}
.hp.aud-business .starter small {
  color: var(--on-blue-soft);
}
.hp.aud-business .starter strong {
  color: #fff;
}
.hp.aud-business .chip {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.hp.aud-business .chip:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* ================= TRUST STRIP ================= */
.hp .trust {
  background: #fff;
  border-bottom: 1px solid var(--sky-line);
  overflow: hidden;
}
.hp .ticker {
  display: flex;
  width: max-content;
  animation: hp-tick 38s linear infinite;
}
.hp .ticker:hover {
  animation-play-state: paused;
}
.hp .ticker ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp .ticker li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}
.hp .ticker li small {
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 14px;
}
.hp .ticker li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--light);
  transform: rotate(45deg);
}
@keyframes hp-tick {
  to {
    transform: translateX(-50%);
  }
}

/* ================= FEATURED LOCK ================= */
/* Blue under the white Homes hero, pale under the blue business hero. */
.hp .featured {
  background: var(--blue);
  transition: background-color 0.5s ease;
}
.hp .feat-copy {
  display: grid;
  gap: 16px;
  align-content: start;
  max-width: 44rem;
}

/* Up to four lock cards: in a row on a computer, swiped on a phone. */
.hp .locks {
  list-style: none;
  margin: 32px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l));
  padding: 4px var(--gutter-r) 8px var(--gutter-l);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 300px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter-l);
  scrollbar-width: none;
}
.hp .locks::-webkit-scrollbar {
  display: none;
}
.hp .lock-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(11, 33, 87, 0.16);
}
.hp .lock-media {
  display: block;
  aspect-ratio: 5 / 4;
  background: var(--sky);
}
.hp .lock-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp .lock-brand {
  display: grid;
  place-items: center;
  background: var(--blue-night);
  text-decoration: none;
}
.hp .lock-brand span {
  font: 800 52px/1 var(--display);
  letter-spacing: -0.03em;
  color: #fff;
}
.hp .lock-body {
  display: grid;
  gap: 6px;
  padding: 18px 18px 20px;
  flex: 1;
  align-content: start;
}
.hp .lock-body h3 {
  font-size: 19px;
  line-height: 1.2;
}
.hp .lock-body h3 a {
  color: var(--ink);
  text-decoration: none;
}
.hp .lock-price {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 15px;
}
.hp .lock-price strong {
  font: 800 30px/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 4px;
}
.hp .lock-alt {
  color: var(--ink-muted);
  font-size: 14px;
}
.hp .lock-deal {
  justify-self: start;
  margin-top: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sky);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.hp .lock-link {
  justify-self: start;
  margin-top: 8px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--light);
}
.hp .featured .tiles {
  margin-top: 28px;
}
/* Wide screens: four cards across. With more than four the row keeps
   going sideways, reached with the arrows under it (or a trackpad). */
@media (min-width: 900px) {
  .hp .locks {
    margin-left: 0;
    margin-right: 0;
    padding: 4px 0 24px;
    grid-auto-columns: calc((100% - 3 * 14px) / 4);
    scroll-padding-left: 0;
  }
}
.hp .row-arrows {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.hp .row-arrows[hidden] {
  display: none;
}
.hp .row-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.hp.aud-business .row-arrow {
  border-color: var(--sky-line);
  color: var(--ink);
}
.hp .row-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.hp .row-arrow:focus-visible {
  outline: 3px solid var(--light);
  outline-offset: 2px;
}
.hp .feat-copy h2 {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.1;
  color: #fff;
}
.hp .feat-copy .eyebrow {
  color: var(--light);
}
.hp .feat-copy p {
  font-size: 18px;
  color: var(--on-blue-soft);
}
.hp .feat-copy mark {
  background: linear-gradient(transparent 62%, rgba(124, 199, 255, 0.45) 0);
  color: #fff;
  font-weight: 600;
  padding: 0 2px;
}
.hp .tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.hp .tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--blue-deep);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.5s ease,
    color 0.5s ease;
}
.hp .tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.hp .tile span {
  color: var(--light);
}
.hp.aud-business .featured {
  background: var(--sky);
}
.hp.aud-business .feat-copy h2 {
  color: var(--ink);
}
.hp.aud-business .feat-copy .eyebrow {
  color: var(--blue-soft);
}
.hp.aud-business .feat-copy p {
  color: var(--ink-body);
}
.hp.aud-business .feat-copy mark {
  color: var(--ink);
}
.hp.aud-business .tile {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 var(--sky-line);
}
.hp.aud-business .tile:hover {
  box-shadow: 0 10px 22px rgba(21, 58, 142, 0.12);
}
.hp.aud-business .tile span {
  color: var(--blue-soft);
}

/* ================= SLIDER ================= */
.hp .slider {
  position: relative;
}
.hp .slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.hp .slides::-webkit-scrollbar {
  display: none;
}
.hp .slide {
  flex: 0 0 min(88%, 760px);
  scroll-snap-align: start;
  border-radius: 24px;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hp .slide-media {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  background: #20283a;
}
.hp .slide-media--white {
  background: #fff;
}
.hp .slide-media img,
.hp .slide-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp .slide-media figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 5px 9px;
  border-radius: 4px;
}
.hp .slide-copy {
  padding: 22px 22px 26px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.hp .slide-copy .eyebrow {
  color: var(--light);
}
.hp .slide-copy h3 {
  color: #fff;
}
.hp .slide-copy p {
  color: var(--on-blue-soft);
}
.hp .slide-copy strong {
  color: #fff;
  font-weight: 600;
}
.hp .slide-copy .price-line {
  font-size: 14px;
  color: var(--on-blue-soft);
}
.hp .slide-copy .slide-link {
  justify-self: start;
  margin-top: 4px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--light);
}
.hp .slider-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.hp .dots {
  display: flex;
  gap: 8px;
}
.hp .dots button {
  width: 34px;
  height: 24px;
  border: 0;
  padding: 9px 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.hp .dots button::before,
.hp .dots button i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 6px;
  border-radius: 3px;
}
.hp .dots button::before {
  background: var(--sky-line);
}
.hp .dots button i {
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(0);
}
.hp .dots button[aria-current="true"] i {
  transform: scaleX(1);
}
.hp .arrows {
  display: flex;
  gap: 8px;
}
.hp .arrows button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--sky);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.hp .arrows button:hover {
  background: var(--sky-line);
}
.hp .count {
  font: 700 14px/1 var(--text);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ================= PROCESS ================= */
.hp .process {
  background: var(--blue);
  color: #fff;
}
.hp .process h2,
.hp .process h3 {
  color: #fff;
}
.hp .process .eyebrow {
  color: var(--light);
}
.hp .process .section-head p {
  color: var(--on-blue-soft);
}
.hp .process .section-head strong {
  color: #fff;
}
.hp .steps {
  position: relative;
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp .steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.hp .steps .rail {
  position: absolute;
  left: 27px;
  top: 28px;
  width: 2px;
  height: 0;
  background: var(--light);
}
.hp .step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.hp .step-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-deep);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  font: 800 18px/1 var(--display);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}
.hp .step.is-done .step-dot {
  background: var(--light);
  color: var(--blue-night);
  box-shadow: none;
}
.hp .step-body {
  padding: 12px 0 18px;
  display: grid;
  gap: 6px;
}
.hp .step-body h3 {
  font-size: 22px;
}
.hp .step-body p {
  color: var(--on-blue-soft);
  font-size: 16px;
}
.hp .process .link-arrow {
  color: #fff;
  margin-top: 18px;
}

/* ================= NOTES ================= */
.hp .notes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.hp .notes {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
.hp .note {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border-radius: 20px;
  background: var(--sky);
  text-decoration: none;
  color: var(--ink-body);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.hp .note:hover {
  transform: translateY(-4px);
  background: #e4ecfb;
}
.hp .note h3 {
  font-size: 22px;
  line-height: 1.15;
}
.hp .note .read {
  font-weight: 700;
  color: var(--ink);
}

/* ================= COVERAGE ================= */
.hp .coverage {
  background: var(--sky);
}
.hp .cov-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
.hp .map {
  position: relative;
  border-radius: 24px;
  background: var(--blue-night);
  overflow: hidden;
  aspect-ratio: 36 / 24;
  max-width: 100%;
}
.hp .map svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hp .map .route {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
}
.hp .map .route.lit {
  stroke: var(--light);
  stroke-width: 2.4;
}
.hp .map .node {
  fill: #9fb6e8;
  transition: fill 0.3s ease;
}
.hp .map .node.lit {
  fill: var(--light);
}
.hp .map .hub {
  fill: #fff;
}
.hp .map .lbl {
  font: 600 8px var(--text);
  fill: rgba(255, 255, 255, 0.55);
}
.hp .map .lbl.lit {
  fill: #fff;
}
.hp .map .grid-dot {
  fill: rgba(255, 255, 255, 0.06);
}
.hp .map .tag {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.hp .areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
}
.hp .area {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: var(--ink);
  font: 600 15px/1 var(--text);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--sky-line);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.hp .area:hover {
  box-shadow: inset 0 0 0 1px var(--blue);
}
.hp .area[aria-pressed="true"] {
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}
.hp .area-go {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

/* ================= FAQ ================= */
.hp .faq-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
.hp .faq-set {
  gap: 10px;
}
.hp .faq-set details {
  border-radius: 16px;
  background: var(--sky);
  padding: 0 20px;
  transition: background 0.2s ease;
}
.hp .faq-set details[open] {
  background: #e4ecfb;
}
.hp .faq-set summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.hp .faq-set summary::-webkit-details-marker {
  display: none;
}
.hp .faq-set summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--blue-soft);
  font: 400 22px/1 var(--text);
  transition: transform 0.3s ease;
}
.hp .faq-set details[open] summary::after {
  transform: rotate(45deg);
}
.hp .faq-set details p {
  padding: 0 0 18px;
  color: var(--ink-body);
}

/* ================= CTA ================= */
.hp .cta-band {
  background: var(--blue);
  color: #fff;
}
.hp .cta-band .hwrap {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.hp .cta-band h2 {
  color: #fff;
}
.hp .cta-band p {
  font-size: 19px;
  color: var(--on-blue-soft);
}
.hp .cta-band strong {
  color: #fff;
}

/* ---------- motion ---------- */
.hp.js-motion .reveal {
  opacity: 0;
  transform: translateY(28px);
}

@media (min-width: 760px) {
  .hp .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hp .notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hp .slide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .hp .slide-media {
    aspect-ratio: auto;
    min-height: 360px;
  }
  .hp .slide-copy {
    padding: 34px;
    align-content: center;
  }
}
@media (min-width: 980px) {
  .hp .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .hp .hero-media {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .hp .hero-panel {
    padding-block: 30px 56px;
    display: flex;
  }
  .hp .hero-panel .hwrap {
    margin: 0;
    padding-left: 52px;
    padding-right: max(40px, env(safe-area-inset-right, 0px));
    max-width: 640px;
  }
  .hp .cov-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }
  .hp .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 56px;
  }
  .hp .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .hp .steps::before {
    left: 28px;
    right: 28px;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .hp .steps .rail {
    left: 28px;
    top: 27px;
    height: 2px;
    width: 0;
  }
  .hp .step {
    grid-template-columns: minmax(0, 1fr);
  }
  .hp .step-body {
    padding: 4px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp .ticker {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }
  .hp .ticker ul + ul {
    display: none;
  }
  .hp .hero-alt,
  .hp .featured,
  .hp .tile {
    transition: none;
  }
}

/* ---------- computers: proper header, hero fills the first screen ----------
   980px and up only, so phones and small tablets are untouched (owner,
   2026-10-18). The site bar is shown at the top (installer.css), so the
   hero's own phone bar goes. The hero and the trust strip together fill
   the screen under the bar: the dark blue section no longer peeks in at the
   bottom of a tall screen, and the words get room around them.
   --hp-top is the bar plus the trust strip, measured by home.js; the
   figure here is the same height on a normal desktop, used until then. */
@media (min-width: 980px) {
  .hp .bar {
    display: none;
  }
  /* stretch: the inner pages' .hero rule (align-items: flex-end) also
     reached this grid, so the panel sat at the bottom of the row with a
     band of white page above it, seen as a white strip once the panel
     turned blue. */
  .hp .hero {
    min-height: calc(100svh - var(--hp-top, 132px));
    align-items: stretch;
  }
  /* Words start from the top, not centred: the business words are taller,
     and centring moved the Homes / Property & business switch up a line
     when it was pressed. Padding keeps the longer business words inside
     the first screen too. */
  .hp .hero-panel {
    align-items: flex-start;
    padding-block: clamp(28px, 4.5vh, 72px);
  }
  .hp .hero-panel .hwrap {
    gap: clamp(22px, 2.6vh, 32px);
  }
}

/* ---------- how our prices work (2026-10-31) ----------
   Before the lock cards: lock + fitting, or fitting a lock they already
   have. White panels on the page's pale blue so it reads as its own
   section before the dark blue lock row. */
.hp .pricing-ways {
  background: var(--sky);
}
.hp .pricing-ways h2 {
  margin-top: 10px;
}
.hp .ways {
  display: grid;
  gap: 16px;
  margin-top: clamp(22px, 3vw, 32px);
}
.hp .way {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 0 var(--sky-line);
}
.hp .way-label {
  margin: 0;
  font: 700 13px/1.2 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.hp .way-price {
  margin: 0;
  font-size: 18px;
  color: var(--ink-body);
}
.hp .way-price strong {
  font: 800 clamp(40px, 6vw, 52px) / 1 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hp .way-what,
.hp .way-note,
.hp .way-call {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-body);
}
.hp .way-what strong {
  color: var(--ink);
}
.hp .way-note {
  font-size: 15.5px;
  color: var(--ink-muted);
}
.hp .way ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.hp .way li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-body);
}
.hp .way li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--blue-soft);
}
.hp .way .btn {
  justify-self: start;
  margin-top: 6px;
}
.hp .way-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.hp .way-actions .btn {
  margin-top: 0;
}
.hp .way-call a,
.hp .hero-call a {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.hp .way-foot {
  margin: 18px 0 0;
  font-size: 15.5px;
  color: var(--ink-muted);
}
@media (min-width: 760px) {
  .hp .ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Phone line under the hero buttons, both audiences. */
.hp .hero-call {
  margin: -6px 0 0;
  font-size: 16px;
  color: var(--ink-muted);
}
.hp.aud-business .hero-call,
.hp.aud-business .hero-call a {
  color: #fff;
}

/* Phone number on the hero video, phones only (owner, 2026-10-31). A solid
   dark pill with white text and a soft shadow, so it reads over any frame
   of the clip, light or dark. */
.hp .media-phone {
  position: absolute;
  top: 12px;
  left: var(--gutter-l);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(11, 33, 87, 0.88);
  color: #fff;
  font: 700 15px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hp .media-phone:hover,
.hp .media-phone:focus-visible {
  background: rgba(11, 33, 87, 1);
  color: #fff;
}
@media (min-width: 980px) {
  .hp .media-phone {
    display: none;
  }
}

/* Closing band: phone beside the quote button (owner, 2026-10-31). */
.hp .cta-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hp .btn-call {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.hp .btn-call:hover {
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
/* Under the coverage map: the next step once the area is covered. */
.hp .area-cta {
  margin: 16px 0 0;
  font-size: 16.5px;
  color: var(--ink-body);
}
.hp .area-cta a {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* The hero reel (owner, 2026-11-03): three real clips, phone, fingerprint
   and code, played in turn. Phones keep the full-width video at the top and
   get a next arrow beside pause; the cards are for computers only. */
.hp .reel {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hp .reel-cards {
  display: none;
}
.hp .media-toggle {
  right: calc(var(--gutter-r) + 48px);
  z-index: 3;
}
.hp .hero-alt {
  z-index: 2;
  pointer-events: none; /* only a picture; never in the way of the cards */
}
.hp .media-next {
  position: absolute;
  right: var(--gutter-r);
  bottom: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.hp .media-next[hidden] {
  display: none;
}
.hp.aud-business .media-next {
  opacity: 0;
  pointer-events: none;
}

/* Computers ("option C"): the footage is 16:9 but the column is nearly
   square, so covering it cut the lock out of frame. The video shows whole,
   with the cards under it, the pair centred top to bottom over a blurred
   blue-grey wash of the poster that matches the page. Layering: wash
   (pseudo-elements), then the reel, the business photo over both, the
   controls on top. */
@media (min-width: 980px) {
  .hp .hero-media {
    background: #d3dcec url("../home/arrival.161e835e0115.jpg") center / cover no-repeat;
  }
  .hp .hero-media::before,
  .hp .hero-media::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }
  .hp .hero-media::before {
    inset: -40px;
    background: inherit;
    filter: blur(30px) grayscale(1);
  }
  .hp .hero-media::after {
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(221, 230, 244, 0.86),
      rgba(196, 210, 234, 0.9)
    );
  }
  /* The video sits flush at the top; the cards take the rest of the
     column, their stills growing or shrinking so no band is left empty.
     In flow (not absolute), so if the cards need more room than the words
     beside them, the hero grows instead of cutting them off. */
  .hp .reel {
    position: relative;
    inset: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .hp .reel video {
    position: static;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .hp .reel-cards {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 18px 20px 20px;
    list-style: none;
  }
  .hp .reel-cards li {
    display: flex;
  }
  .hp .reel-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(96px, 1fr) auto auto auto;
    width: 100%;
    padding: 0 0 16px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(21, 58, 142, 0.12);
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition:
      outline-color 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .hp .reel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(21, 58, 142, 0.18);
  }
  .hp .reel-card:focus-visible {
    outline-color: var(--blue-soft);
  }
  .hp .reel-card[aria-pressed="true"] {
    outline-color: var(--blue);
  }
  .hp .reel-card img {
    position: static; /* installer.css absolutely positions .hero img */
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
    margin-bottom: 14px;
  }
  .hp .reel-card[aria-pressed="false"] img {
    opacity: 0.82;
  }
  .hp .reel-name {
    padding: 0 16px;
    font: 700 17px/1.2 var(--display, var(--text));
    letter-spacing: -0.01em;
  }
  .hp .reel-door {
    padding: 3px 16px 0;
    font: 600 11.5px/1.2 var(--text);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--blue-soft);
  }
  .hp .reel-text {
    padding: 9px 16px 0;
    font: 400 14px/1.5 var(--text);
    color: var(--ink-body);
  }
  .hp .reel-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: calc(var(--p, 0) * 100%);
    background: var(--blue-soft);
  }
  .hp .reel-card[aria-pressed="false"] .reel-bar {
    display: none;
  }
  .hp .media-next {
    display: none;
  }
  /* On the video's top corner, clear of the cards. */
  .hp .media-toggle {
    top: 14px;
    bottom: auto;
    right: 14px;
  }
}
/* Wide screens: the three cards share rows (subgrid), so titles and words
   line up across them whatever each description's length. */
@media (min-width: 1280px) {
  .hp .reel-cards {
    grid-template-rows: minmax(96px, 1fr) auto auto auto;
  }
  .hp .reel-cards li {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
  .hp .reel-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}
/* Narrow computers: three columns made the stills tall slivers, so the
   cards stack, still on the left and words on the right. */
@media (min-width: 980px) and (max-width: 1279px) {
  .hp .reel-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }
  .hp .reel-card {
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: center;
    padding: 0 0 0;
  }
  .hp .reel-card img {
    grid-row: 1 / -1;
    margin: 0;
  }
  .hp .reel-name {
    padding-top: 16px;
    align-self: end;
  }
  .hp .reel-text {
    padding-bottom: 14px;
  }
}
@media (min-width: 980px) and (prefers-reduced-motion: reduce) {
  .hp .reel-card {
    transition: none;
  }
  .hp .reel-card:hover {
    transform: none;
  }
}

/* Phones: which clip is playing, and a bar per clip so it is clear there
   are more (owner, 2026-11-03). Same dark pill as the phone number and the
   controls; the controls lift to clear the bars. Computers have the cards. */
.hp .reel-chip {
  position: absolute;
  left: var(--gutter-l);
  bottom: 25px;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: 700 13px/1 var(--text);
  white-space: nowrap;
  pointer-events: none;
}
.hp .reel-chip small {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}
.hp .reel-steps {
  position: absolute;
  left: var(--gutter-l);
  right: var(--gutter-r);
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 5px;
}
.hp .reel-chip[hidden],
.hp .reel-steps[hidden] {
  display: none;
}
.hp .reel-step {
  flex: 1;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.hp .reel-step i {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
}
.hp .reel-step i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.hp .reel-step:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.hp .media-toggle,
.hp .media-next {
  bottom: 20px;
}
.hp.aud-business .reel-chip,
.hp.aud-business .reel-steps {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 980px) {
  .hp .reel-chip,
  .hp .reel-steps {
    display: none;
  }
  .hp .media-toggle {
    bottom: auto;
  }
}