/* ==========================================================================
   Gizie (customer) — landing page
   Built to the Figma frame "Gize Customer" (658:4526), a 1441px-wide desktop
   canvas. Every value below is the Figma value.

   Same stage model as business-v2.css: a fixed 1441px stage, one fixed-height
   band per section, children at their exact Figma coordinates. 1000–1440px
   scales the stage; below 1000px the absolute positioning unwinds into flow.
   ========================================================================== */

@font-face {
  font-family: "Cal Sans";
  src: url("/assets/fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* the heavier cut the reference sets its QR card caption in */
@font-face {
  font-family: "Cal Sans";
  src: url("/assets/fonts/CalSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
/* the search composer and the testimonial name are set in Instrument Serif */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Figma variables — Brand */
  --orange: #ff7446;
  --red: #ff233b;
  --peach: #fdc978;
  --sunrise: linear-gradient(90deg, #ff233b 0%, #ff7446 50%, #fdc978 100%);
  --sunrise-icon: linear-gradient(54.7945deg, #ff233b 28.696%, #fdc978 100.35%);

  /* Figma variables — Neutral Light */
  --ink: #1a1714;
  --ink-2: #6b635d;
  --line: #dad3cd;
  --surface: #ffffff;
  --page: #fbf8f6;

  --field-line: #ffeee3;
  --serif-orange: #ff6200;

  --font-display: "Cal Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  --stage: 1441px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

:focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* router.js sends focus to <main> after a swap so keyboard and screen-reader
   users land on the new page; that focus is programmatic, never a visible
   focus ring. Without this the whole page picks up the ring above. */
main:focus,
main:focus-visible { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 99;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------- stage --- */

.stage {
  width: var(--stage);
  margin-inline: auto;
  position: relative;
  transform-origin: top center;
}
.band { position: relative; width: var(--stage); }

/* ------------------------------------------------------------ primitives -- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.btn--primary { background: var(--orange); color: #fff; gap: 10px; }
.btn--ghost { border: 1px solid #828282; color: var(--ink-2); }
.btn--white { background: #fff; border: 1px solid #fff; color: var(--ink); }
.btn--dark { background: #000; color: #fff; gap: 10px; }
.btn__icon { width: 24px; height: 24px; flex: none; }

.logo { display: flex; align-items: center; gap: 15px; padding: 6px 2px; }
.logo__mark {
  position: relative;
  width: 42.953px;
  height: 42.953px;
  border-radius: 10px;
  background: var(--sunrise-icon);
  overflow: hidden;
  flex: none;
}
.logo__mark img { position: absolute; left: 0; top: -0.672px; width: 42.953px; height: 44.253px; }
.logo__word { width: 79.606px; height: 35.728px; }

.grad-text {
  background: var(--sunrise);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================= 1. hero === */

/* Figma "Before Scroll" (658:4527). The frame is 1444 wide at x -1.5, so its
   children land 1.5px left of their Figma x on the 1441 stage. The Trusted
   Clients strip is part of this frame too, along its bottom edge. */
/* clipped top and bottom only: the nav runs past the stage on wide screens */
.hero { height: 1397px; clip-path: inset(0 -100vw); background: var(--page); }

/* Figma "Ellipse 2": the exported blur, its centre where the design's
   2017.5px rotated wrapper puts it, below the band's bottom edge */
.hero__wash {
  position: absolute;
  left: -577.48px;
  top: 163.23px;
  width: 2592px;
  height: 2592px;
  transform: rotate(-150.99deg);
  pointer-events: none;
  z-index: 0;
}
.hero__phone {
  position: absolute;
  left: 187.5px;
  top: 546px;
  width: 795px;
  height: 884px;
  z-index: 1;
}
/* wraps the phone and its two cards; it is only a box below 1000px */
.hero__visual { display: contents; }

/* The reference pins the nav 100px from the viewport edges, not the stage's,
   so on wide screens it outgrows the 1441px stage. --vw is the viewport
   width without the scrollbar, kept by the stage fit in customer-v2.js. */
.nav {
  position: absolute;
  left: 50%;
  top: 22px;
  width: calc(var(--vw, 1441px) - 200px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  z-index: 5;
}
.logo--nav { padding: 0; }
.logo--nav img { width: 142px; height: 55px; }
.nav__actions { display: flex; align-items: center; gap: 16px; height: 64px; }
.nav__actions .btn { height: 64px; }
.nav__actions .btn--ghost { width: 166px; padding: 10px 14px; color: #9e9e9e; }
.nav__actions .btn--primary { width: 219px; padding: 10px 24px; }
.nav__actions .btn--primary span { width: 137px; text-align: center; }

/* Hovering the nav's "Get Mobile App" drops a QR card 10px under it; keyboard
   focus opens it too. Pointer-only devices never see it — on a phone the
   button simply scrolls to the download section. */
.nav__get { position: relative; }
.qr-pop {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: 200px;
  height: 275px;
  margin-left: -100px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms;
  z-index: 10;
}
/* bridges the 10px gap so the pointer can travel onto the card */
.qr-pop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
.qr-pop img { position: absolute; left: 2px; top: 0; width: 195px; height: 195px; }
.qr-pop p {
  position: absolute;
  left: 0;
  right: 0;
  top: 213px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 21.6px;
  text-align: center;
  color: #000;
}
@media (hover: hover) {
  .nav__get:hover .qr-pop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
}
.nav__get:focus-within .qr-pop { opacity: 1; visibility: visible; transition-delay: 0s; }

.hero__head {
  position: absolute;
  left: 327.5px;
  top: 160px;
  width: 810px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  z-index: 4;
}
.hero__copy {
  width: 810px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.hero__title {
  width: 810px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 65px;
  color: var(--ink);
}
.hero__title em { font-style: normal; color: var(--red); }
.hero__sub {
  width: 516px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink);
}

.composer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.composer__bar {
  width: 803px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: #fff;
  border-radius: 100px;
}
.composer__fields { display: flex; align-items: center; gap: 10px; width: 714px; }
.field {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 30px;
  background: #fff;
  border: 1px solid var(--field-line);
  border-radius: 120px;
  text-align: left;
}
.field__label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field__value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--serif-orange);
  white-space: nowrap;
}
.composer__go {
  width: 60px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19px 30px;
  background: var(--red);
  border-radius: 120px;
  cursor: pointer;
}
.composer__go img { width: 24px; height: 24px; }
.composer__note {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ink);
}
.composer__note .mini-mark {
  width: 20.33px;
  height: 20.33px;
  border-radius: 3.971px;
  background: var(--sunrise-icon);
  transform: rotate(-0.48deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.composer__note .mini-mark img { width: 7.967px; height: 9.071px; }

/* The two cards floating off the phone. The design sets them in Satoshi,
   which the site does not ship, so they fall back to the body face. */
.hcard {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  background: #fff;
  font-family: "Satoshi", var(--font-body);
  white-space: nowrap;
}
.hcard--pro {
  left: 808.5px;
  top: 625px;
  width: 276px;
  gap: 10.417px;
  padding: 10.804px 0 10.804px 12.435px;
  border: 1.036px solid #f0f0f0;
  border-radius: 39.73px 100px 100px 0;
  box-shadow: 0 4px 12px rgba(73, 73, 73, 0.1);
}
.hcard__avatar {
  position: relative;
  width: 62.405px;
  height: 62.405px;
  border-radius: 50%;
  background: #e4a862;
  overflow: hidden;
  flex: none;
}
.hcard__avatar img { position: absolute; left: 0.76px; top: 6.65px; width: 49.628px; height: 58.313px; }
.hcard__body {
  display: flex;
  flex-direction: column;
  padding-right: 7.161px;
  transform: rotate(-0.77deg);
}
.hcard__name { font-size: 17.64px; font-weight: 700; line-height: 1.5; color: #161716; }
.hcard__meta {
  display: flex;
  align-items: center;
  gap: 6.887px;
  font-size: 12.604px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
}
.hcard__meta img { width: 5.393px; height: 5.393px; flex: none; }

.hcard--points {
  left: 343.5px;
  top: 880px;
  height: 52px;
  gap: 31px;
  padding: 0 8.06px 0 13.483px;
  border-radius: 15.168px 0 15.168px 15.168px;
  box-shadow: 0 4px 9px rgba(172, 172, 172, 0.25);
}
.hcard__earn { display: flex; align-items: center; gap: 9.27px; }
/* four coins, each turned, stacked down the frame — top one drawn last */
.hcard__coins { position: relative; width: 24.488px; height: 26.937px; flex: none; }
.hcard__coins img { position: absolute; width: 23.61px; height: 24.488px; left: 0.44px; transform: rotate(57.65deg); }
.hcard__coins img:nth-child(1) { z-index: 4; left: 0; top: -8.31px; width: 24.488px; height: 25.395px; transform: rotate(23.77deg); }
.hcard__coins img:nth-child(2) { z-index: 3; top: -1.78px; }
.hcard__coins img:nth-child(3) { z-index: 2; top: 4.27px; }
.hcard__coins img:nth-child(4) { z-index: 1; top: 10.32px; }
.hcard__pts {
  width: 71.16px;
  font-size: 13.483px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--orange);
  text-align: center;
  transform: rotate(-0.77deg);
}
.hcard__redeem {
  width: 93.287px;
  height: 31.692px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 84.269px;
  background: #eeaf67;
  font-family: var(--font-body);
  font-size: 11.798px;
  font-weight: 600;
  letter-spacing: -0.236px;
  color: #fff;
}

.hero__fade {
  position: absolute;
  left: 0;
  top: 1159px;
  width: 1441px;
  height: 238px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(-0.628deg, var(--page) 2.8134%, rgba(255, 255, 255, 0) 96.612%);
}

.trusted {
  position: absolute;
  left: 364.5px;
  top: 1330px;
  height: 47px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 60px 0 46px;
  z-index: 4;
}
.trusted__title {
  width: 109px;
  height: 43px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.trusted__logos {
  display: flex;
  align-items: center;
  gap: 12.412px;
  margin: 0;
  padding: 0 5.111px;
  list-style: none;
}
.trusted__logos li { position: relative; width: 67.17px; height: 46.727px; flex: none; }
.trusted__logos span { position: absolute; }
.trusted__logos img { width: 100%; height: 100%; }

/* ============================================================== 2. app === */

/* Figma "Wireframe - 3" (658:4608) */
.app { height: 1361px; background: var(--page); overflow: hidden; }
/* Figma "Ellipse 2": the exported blur, its centre where the design's
   rotated 2017.5px wrapper puts it */
.app__wash {
  position: absolute;
  left: -554.23px;
  top: 221.77px;
  width: 2592px;
  height: 2592px;
  transform: rotate(-150.99deg);
  z-index: 0;
  pointer-events: none;
}
/* Two fades inside the frame, under the phone, settle the wash into the
   page; two more from the page frame (658:5016, 658:5017) lie over
   everything along the bottom edge. Those two reach solid page colour at the
   seam, which is what lets the phone dissolve into the next band instead of
   being cut off. */
.app__fade {
  position: absolute;
  left: 0;
  width: 1441px;
  z-index: 2;
  pointer-events: none;
}
.app__fade--a {
  top: 1034px;
  height: 369px;
  background: linear-gradient(1.252deg, #fff 4.4296%, rgba(255, 255, 255, 0) 96.584%);
}
.app__fade--b { display: none; }
.app__fade--c {
  top: 1214px;
  height: 147px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(251, 248, 246, 0), var(--page));
}
.app__fade--d {
  top: 1284px;
  height: 77px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(251, 248, 246, 0), var(--page));
}

.app__head {
  position: absolute;
  left: 304px;
  top: 181px;
  width: 833.778px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  z-index: 4;
}
.app__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 54px;
  color: var(--ink);
  text-align: center;
}
.app__title-row { display: flex; align-items: flex-start; gap: 17px; }
.app__title-lead { display: flex; align-items: flex-start; gap: 7px; }
.app__title-lead span { width: 190px; text-align: center; }
.app__title .mini-mark {
  width: 56.308px;
  height: 56.308px;
  border-radius: 10.998px;
  background: var(--sunrise-icon);
  transform: rotate(-0.48deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 0.235px;
}
.app__title .mini-mark img { width: 22.066px; height: 25.124px; }
.app__title-tail { width: 563px; text-align: left; }
.btn--dark { width: 219px; height: 64px; padding: 10px 24px; }
.btn--dark span { width: 137px; text-align: center; }

/* The art is the phone at 484px wide, 4% larger than the design's 465px
   phone; it keeps its own size so it can run past the band's bottom edge
   (an opaque cut inside the band would show through the fades). Its frame
   lands on the design's top (508) and centre (720.4). The last 80px fade
   out, so the scroll parallax can never lift a hard edge into view. */
.app__phone {
  position: absolute;
  left: 404px;
  top: 472px;
  width: 633px;
  height: 889px;
  z-index: 3;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent);
}
.app__col { position: absolute; width: 284px; display: flex; flex-direction: column; gap: 16px; z-index: 4; }
.app__col--left { left: 120px; top: 676.5px; }
.app__col--right { left: 1037px; top: 675px; }

.fcard {
  border-radius: 30px;
  padding: 34px 20px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fcard--light { background: #fff; height: 392px; }
/* the two columns are 600 / 603 tall in Figma — the light card absorbs it */
.app__col--left .fcard--light { height: 389px; }
.fcard--photo {
  position: relative;
  height: 195px;
  justify-content: flex-end;
  gap: 8px;
  padding: 101px 20px 36px;
  overflow: hidden;
  isolation: isolate;
}
.fcard--photo img.fcard__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.fcard--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.fcard__icon { width: 36px; height: 36px; }
.fcard__body { display: flex; flex-direction: column; gap: 8px; }
.fcard__title { font-size: 20px; font-weight: 600; letter-spacing: -0.8px; color: #000; }
.fcard__desc { width: 244px; font-size: 16px; font-weight: 400; letter-spacing: -0.32px; color: var(--ink-2); }
.fcard--photo .fcard__title { color: #fff; }
.fcard--photo .fcard__desc { color: var(--page); }

/* ========================================================= 3. discover === */

.discover { height: 1018px; background: var(--page); }
.section-head {
  position: absolute;
  width: 564px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.section-head h2 {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 44px;
  color: var(--ink);
}
.section-head p {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
}
.discover .section-head { left: 438.5px; top: 116px; }

/* Figma 658:5669 — two 669px cards side by side. Each carousel runs flush to
   the card's outer edge, so the start card has no right padding and the end
   card no left padding, and the rail is rounded only on its inner side. */
.shelves {
  position: absolute;
  left: 51px;
  top: 278px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.shelf {
  width: 657px;
  height: 624px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 22px 0 52px 12px;
  background: #fff;
  border-radius: 36px;
}
.shelf--end { width: 658px; padding: 22px 12px 52px 0; }
.shelf__title {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 84px;
  color: var(--ink);
  white-space: nowrap;
}
.shelf--end .shelf__title { gap: 12px; }
.shelf__icon { flex: none; }
.shelf__icon--lotus { width: 31px; height: 31px; }
.shelf__icon--heart { width: 33.578px; height: 28px; }

.chips {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.chip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 45px;
  padding: 0 24px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
/* "All" carries no icon, so it is narrower; the selected colour lives on
   [aria-pressed] so any chip can take it. */
.chip--all { width: 64px; padding: 0; }
.chip[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.chip img { flex: none; }
.chip__dot { width: 16px; height: 16px; }

.shelf__rail {
  position: relative;
  width: 645px;
  height: 357px;
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}
.shelf--end .shelf__rail { width: 646px; border-radius: 0 20px 20px 0; }
/* Three 301px cards in a 645px window, starting at the first card, so the
   third is cut by the card's outer edge. */
.shelf__track {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__btn {
  position: absolute;
  top: 124.5px;
  width: 54px;
  height: 54px;
  border-radius: 50px;
  z-index: 2;
  cursor: pointer;
}
.shelf__btn img { width: 54px; height: 54px; }
.shelf__btn--prev img { transform: scaleX(-1); }
.shelf__btn:disabled { opacity: 0.5; cursor: default; }
.shelf__btn--prev { left: 13px; }
.shelf__btn--next { right: 8px; }
/* they drive the track; without the script it still scrolls by hand */
html:not(.js) .shelf__btn { display: none; }

.venue { width: 301px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 16px; scroll-snap-align: start; }
.venue__img { width: 301px; height: 268px; border-radius: 24px; object-fit: cover; }
.venue__foot { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 0 5.5px; }
.venue__text { width: 234px; display: flex; flex-direction: column; gap: 8px; }
.venue__name { font-size: 16px; font-weight: 600; line-height: 21px; color: var(--ink); }
.venue__meta { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 21px; white-space: nowrap; }
.venue__meta b { font-weight: 600; color: var(--orange); }
.venue__meta span { font-weight: 500; color: var(--ink-2); }
.venue__meta img { width: 5px; height: 5px; flex: none; }
.venue__rate { width: 44px; display: flex; align-items: center; gap: 3px; }
.venue__rate img { width: 14px; height: 14px; }
.venue__rate span { font-size: 12px; font-weight: 600; line-height: 21px; color: var(--ink-2); }

/* =========================================================== 5. steps ==== */

.steps { height: 874px; background: var(--page); overflow: hidden; }
.steps .section-head {
  left: 50px;
  top: 101px;
  width: 564px;
  text-align: left;
}
.steps .section-head h2 { justify-content: flex-start; }

.steps__body { position: absolute; left: 50px; top: 216px; width: 1341px; height: 592px; }
.steps__list {
  position: absolute;
  left: 0;
  top: 49px;
  width: 510px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}
.step {
  height: 156.6px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 34px 20px 36px;
  border-radius: 30px;
}
.step--card { background: #fff; }
.step__icon { width: 36px; height: 36px; flex: none; }
.step__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.step__title { font-size: 20px; font-weight: 600; line-height: 53px; letter-spacing: -0.8px; color: #000; }
.step__desc { font-size: 14px; font-weight: 500; line-height: 16.8px; letter-spacing: -0.28px; color: var(--ink-2); }

/* the three screens, already clipped to their 682 x 592 frame */
.steps__fan {
  position: absolute;
  left: 659px;
  top: 0;
  width: 682px;
  height: 592px;
}
/* page-coloured fades over the fan's left edge and its foot */
.steps__fade { position: absolute; z-index: 2; pointer-events: none; }
.steps__fade--side {
  left: 592.8px;
  top: 174.5px;
  width: 203px;
  height: 634px;
  background: linear-gradient(90deg, var(--page) 39%, rgba(251, 248, 246, 0));
}
.steps__fade--foot {
  left: 749.3px;
  top: 587px;
  width: 691.7px;
  height: 287px;
  background: linear-gradient(0deg, var(--page) 39%, rgba(251, 248, 246, 0));
}

/* ========================================================== 4. points ==== */

.points { height: 1284px; background: var(--surface); overflow: hidden; }
.points .section-head {
  left: 438.5px;
  top: 50px;
  width: 564px;
  z-index: 4;
}
.points .section-head h2 {
  height: 102px;
  display: block;
  font-size: 48px;
  line-height: 51px;
}
.points__plate {
  position: absolute;
  left: 101px;
  top: 359px;
  width: 1238px;
  height: 631px;
  border-radius: 74px;
  background: var(--line);
  z-index: 1;
}
/* a cut-out: the plate shows through around the two subjects */
.points__photo { position: absolute; left: 0; top: 204.5px; width: 1441px; height: 1079px; z-index: 2; }
.points__fade {
  position: absolute;
  left: 0;
  width: 1441px;
  z-index: 3;
  opacity: 0.8;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 248, 246, 0), var(--page));
}
.points__fade--a { top: 1138px; height: 146px; }
.points__fade--b { top: 1164px; height: 120px; }
/* the stacked fallback for phones — hidden on the desktop composition */
.points__mobile { display: none; }
.pcard { position: absolute; z-index: 4; }
.pcard--points { left: 94.5px; top: 178.5px; width: 527px; height: 294.5px; }
.pcard--offer { left: 999px; top: 73px; width: 439px; height: 329.5px; }
.pcard--booked { left: 26.5px; top: 662px; width: 348px; height: 175px; }
.pcard--review { left: 1005px; top: 796px; width: 440px; height: 243px; }
.pcard img { width: 100%; height: 100%; }

/* ========================================================== 6. stories == */

.stories {
  height: 1080px;
  background: linear-gradient(180deg, #fff 1.93%, var(--page) 48.94%);
}
.stories .section-head { left: 436.5px; top: 77px; width: 567px; }
.stories .section-head h2 { font-size: 40px; }
.stories .section-head p { margin-top: 12px; font-weight: 400; line-height: 28px; }

.carousel { position: absolute; left: 374.5px; top: 252px; width: 691px; height: 722px; }
.carousel__view {
  position: absolute;
  left: 90px;
  top: 0;
  width: 510px;
  height: 722px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story { position: relative; width: 510px; height: 722px; flex: none; margin: 0; }
.story__img { width: 100%; height: 100%; object-fit: cover; }
.story__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 153px;
  padding: 36px 16px 0;
  background: #fff;
}
.story__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
  color: var(--ink);
}
.story__quote {
  display: block;
  width: 478px;
  max-width: 100%;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-2);
  quotes: "\201C" "\201D";
}
.story__chrome {
  position: absolute;
  left: 8px;
  top: 20px;
  width: 494px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.story__bars { display: flex; gap: 12px; }
.story__bars i {
  position: relative;
  width: 142px;
  height: 7px;
  border-radius: 40px;
  background: #fff;
  overflow: hidden;
}
.story__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ff7447;
  transform: scaleX(0);
  transform-origin: left center;
}
.story__bars i.is-done::after,
.story__bars i.is-on::after { transform: none; }
.story__pause { width: 32px; height: 32px; cursor: pointer; }
.story__pause img { width: 32px; height: 32px; }
.carousel__btn {
  position: absolute;
  top: 334px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.carousel__btn img { width: 54px; height: 54px; }
.carousel__btn--prev { left: 0; }
.carousel__btn--next { left: 637px; }

/* ============================================================== 7. cta === */

/* Owners' questions, between the stories and the app download. A closed item
   carries its add icon on the right; an open one moves the close icon under
   the answer, on the left. */
.faq { height: 784px; background: var(--page); }
.faq__intro { position: absolute; left: 101px; top: 109px; width: 564px; }
.faq__intro h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 44px;
}
.faq__intro p {
  max-width: 474px;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}
.faq__items {
  position: absolute;
  left: 667px;
  top: 69px;
  width: 673px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  position: relative;
  padding: 0 24px;
  border-radius: 32px;
  background: #fff;
}
.faq__item summary {
  height: 92px;
  display: flex;
  align-items: center;
  padding-right: 64px;
  list-style: none;
  cursor: pointer;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.72px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__toggle {
  position: absolute;
  right: 19px;
  top: 24px;
  width: 44px;
  height: 44px;
  background: url("/assets/img/v2/faq-open.svg") center / contain no-repeat;
}
.faq__item[open] summary { height: auto; padding-top: 36px; line-height: 34px; }
.faq__item[open] p {
  max-width: 583px;
  margin-top: 16px;
  padding-bottom: 88px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  letter-spacing: -0.28px;
}
.faq__item[open] .faq__toggle {
  left: 24px;
  right: auto;
  top: auto;
  bottom: 36px;
  width: 40px;
  height: 36px;
  background-image: url("/assets/img/v2/faq-close.svg");
}

.closing { height: 1257px; background: var(--page); }

.cta {
  position: absolute;
  left: 100px;
  top: 0;
  width: 1241px;
  height: 639px;
  background: var(--surface);
  border-radius: 60px;
}
.cta__photo {
  position: absolute;
  left: 358px;
  top: -107px;
  width: 883px;
  height: 746px;
  overflow: hidden;
  border-top-right-radius: 186px;
  border-bottom-right-radius: 62px;
}
.cta__photo img {
  position: absolute;
  left: -26.82%;
  top: 0.05%;
  width: 126.79%;
  height: 99.95%;
}
.cta__qr {
  position: absolute;
  left: 80px;
  top: 119px;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
}
.cta__qr img { width: 150px; height: 150px; }
.cta__copy {
  position: absolute;
  left: 86px;
  top: 315px;
  width: 567px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.cta__title {
  height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
}
/* the reference runs the brand gradient up the glyphs, not across them */
.cta__title.grad-text {
  background-image: linear-gradient(1deg, #ff233b 0%, #ff7446 50%, #fdc978 100%);
}
.cta__lede {
  margin-top: 12px;
  width: 490px;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: var(--ink-2);
}
.stores { display: flex; align-items: center; gap: 18px; width: 490px; }
.store {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 236px;
  height: 67px;
  background: var(--ink);
  border-radius: 50px;
}
.store--apple { padding: 10px 16px; }
.store--play { padding: 10px 8px 10px 16px; }
.store img { flex: none; }
.store--apple img { width: 47px; height: 47px; }
.store--play img { width: 37px; height: 37px; }
.store small { display: block; font-size: 14px; font-weight: 600; color: var(--line); }
.store strong { display: block; font-size: 18px; font-weight: 600; color: #fff; }

/* =========================================================== 8. footer === */

.footer { position: absolute; left: 0; top: 639px; width: 1441px; }

.band-cta {
  margin-top: 90px;
  height: 224px;
  background: var(--peach);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 42px 100px;
  overflow: hidden;
}
.band-cta__left { display: flex; gap: 42px; width: 698px; height: 140px; }
.band-cta__text { position: relative; z-index: 1; width: 389px; display: flex; flex-direction: column; gap: 12px; }
.band-cta__text h2 { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 22px; letter-spacing: -0.48px; color: var(--ink); }
.band-cta__text p { font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -0.32px; color: var(--ink-2); }
.band-cta__art { position: relative; width: 267px; height: 175.775px; flex: none; }
.band-cta__art img { position: absolute; left: -69px; top: -20.952px; width: 336px; height: 203px; }
.band-cta__actions { display: flex; align-items: center; gap: 16px; height: 50px; }
.band-cta__actions .btn { height: 50px; }
.band-cta__actions .btn--white { width: 186px; padding: 10px 14px; }
.band-cta__actions .btn--primary { width: 184px; padding: 10px 16px; }
.band-cta__actions .btn--primary span { width: 118px; text-align: center; }

.footer__main {
  height: 239px;
  background: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 267px;
  padding: 42px 48px 42px 116px;
  overflow: hidden;
}
.footer__brand { width: 372px; display: flex; flex-direction: column; gap: 20px; }
.footer__brand p { font-size: 16px; font-weight: 400; line-height: 22px; color: var(--ink-2); }
.footer__cols { display: flex; gap: 97px; }
.footer__col { display: flex; flex-direction: column; gap: 25px; }
.footer__col h3 { font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; line-height: 18px; }
.footer__col a { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--ink-2); }
.footer__col a:hover { color: #fff; }

.footer__bar {
  height: 65px;
  background: var(--ink);
  border-top: 1px solid #2c2c2c;
  display: flex;
  align-items: center;
  padding: 23px 48px 23px 104px;
}
.footer__bar p { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--ink-2); }

/* ====================================================== scaled desktop === */

@media (min-width: 1000px) and (max-width: 1440.98px) {
  .stage { transform: scale(var(--k, 1)); transform-origin: top left; }
  /* the nav spans the stage here, so the hero can clip on all four sides */
  .hero { clip-path: none; overflow: hidden; }
}

/* ============================================================ responsive = */

@media (max-width: 999.98px) {
  .stage { width: 100%; transform: none; height: auto !important; }
  .band { width: 100%; }

  .hero, .app, .discover, .steps, .points, .stories, .faq, .closing { height: auto; }

  /* ------------------------------------------------------------- hero -- */
  .hero { display: flex; flex-direction: column; padding: 20px 20px 0; clip-path: none; overflow: hidden; }
  /* the glow keeps its Figma place relative to the band's bottom edge */
  .hero__wash {
    left: 50%;
    top: auto;
    bottom: -1150px;
    width: 1900px;
    height: 1900px;
    margin-left: -950px;
  }
  .nav { position: static; order: 0; width: 100%; height: auto; gap: 12px; transform: none; }
  .nav__actions { height: auto; gap: 10px; }
  .nav__actions .btn { height: 46px; }
  .nav__actions .btn--ghost { display: none; }
  .nav__actions .btn--primary { width: auto; padding: 10px 18px; }
  .nav__actions .btn--primary span { width: auto; }
  .qr-pop { display: none; }
  .logo { gap: 10px; padding: 0; }
  .logo__mark { width: 34px; height: 34px; border-radius: 8px; }
  .logo__mark img { width: 34px; height: 35.03px; top: -0.53px; }
  .logo__word { width: 63px; height: 28.3px; }

  .hero__head {
    position: static;
    order: 1;
    width: 100%;
    margin-top: 44px;
    align-items: stretch;
    gap: 32px;
  }
  .hero__copy { width: 100%; }
  .hero__title { width: 100%; font-size: 40px; line-height: 44px; }
  .hero__sub { width: 100%; max-width: 516px; }
  .composer__bar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 28px;
    padding: 10px;
  }
  .composer { align-items: stretch; }
  .composer__fields { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .field { padding: 10px 20px; border-radius: 22px; }
  .composer__go { width: 100%; padding: 14px; border-radius: 22px; }
  /* flex items break the sentence badly once it wraps — flow it as text */
  .composer__note { display: block; line-height: 22px; text-align: center; }
  .composer__note .mini-mark { display: inline-flex; vertical-align: -5px; margin: 0 2px; }

  /* The phone becomes a box of its own and the cards place against it.
     `scale` composes with the transform the motion loop writes, so the
     cards shrink without fighting their float. */
  .hero__visual {
    display: block;
    position: relative;
    order: 2;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 795 / 884;
    margin: 28px auto 0;
  }
  .hero__phone { left: 0; top: 0; width: 100%; height: 100%; }
  .hcard { scale: 0.64; }
  .hcard--pro { left: auto; right: -12px; top: 6%; transform-origin: right top; }
  .hcard--points { left: -12px; top: 36%; transform-origin: left top; }
  .hero__fade { top: auto; bottom: 0; width: 100%; height: 180px; }

  .trusted {
    position: relative;
    order: 3;
    left: auto;
    top: auto;
    height: auto;
    flex-direction: column;
    gap: 4px;
    margin-top: -24px;
    padding: 0 0 28px;
  }
  .trusted__logos { flex-wrap: wrap; justify-content: center; row-gap: 0; padding: 0; }

  /* -------------------------------------------------------------- app -- */
  .app { padding: 56px 20px; }
  .app__fade, .app__wash { display: none; }
  .app__head { position: static; width: 100%; gap: 28px; }
  .app__title { font-size: 26px; line-height: 36px; gap: 4px; }
  .app__title-row { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .app__title-lead { gap: 6px; align-items: center; }
  .app__title-lead span { width: auto; }
  .app__title .mini-mark { width: 34px; height: 34px; border-radius: 7px; }
  .app__title .mini-mark img { width: 13px; height: 15px; }
  .app__title-tail { width: auto; text-align: center; }
  .btn--dark { padding: 10px 28px; font-size: 16px; }
  .btn--dark span { width: auto; }

  .app__phone {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 28px auto 0;
  }
  .app__col { position: static; width: 100%; margin-top: 16px; }
  .fcard--light { height: auto; gap: 28px; }
  .fcard--photo { height: auto; padding: 60px 20px 24px; }
  .fcard__desc { width: 100%; }

  /* --------------------------------------------------------- discover -- */
  .discover { padding: 56px 0; }
  .section-head { position: static !important; width: 100% !important; padding: 0 20px; }
  .section-head h2 { height: auto; font-size: 26px; line-height: 34px; }
  .section-head p { font-size: 16px; }
  .shelves { position: static; flex-direction: column; gap: 16px; margin-top: 28px; padding: 0 20px; }
  .shelf,
  .shelf--end { width: 100%; height: auto; gap: 14px; padding: 8px 0 20px; border-radius: 28px; overflow: hidden; }
  .shelf__title { height: 56px; font-size: 22px; line-height: 56px; }
  .chips {
    height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .shelf__rail,
  .shelf--end .shelf__rail { width: 100%; height: auto; border-radius: 0; }
  .shelf__track {
    gap: 12px;
    padding: 16px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
  }
  .shelf__btn { display: none; }
  .venue { width: 240px; scroll-snap-align: start; }
  .venue__img { width: 240px; height: 214px; }
  .venue__text { width: 180px; }
  .venue__meta { flex-wrap: wrap; white-space: normal; }

  /* ------------------------------------------------------------ steps -- */
  .steps { padding: 56px 20px; }
  .steps .section-head { padding: 0; }
  .steps__body { position: static; width: 100%; height: auto; margin-top: 28px; }
  .steps__list { position: static; width: 100%; }
  .step { height: auto; gap: 20px; padding: 24px 20px; align-items: flex-start; }
  .step__title { line-height: 34px; font-size: 20px; }
  .steps__fan {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 24px auto 0;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
  }
  .steps__fade { display: none; }

  /* ----------------------------------------------------------- points -- */
  .points { padding: 56px 0 0; }
  .points .section-head { padding: 0 20px; }
  .points .section-head h2 { height: auto; font-size: 26px; line-height: 34px; }
  .points__plate { display: none; }
  .points__photo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 24px;
  }
  .points__fade { display: none; }
  .pcard { display: none; }
  .points__mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px 0;
  }
  .points__mobile img { width: 100%; height: auto; }

  /* ---------------------------------------------------------- stories -- */
  .stories { padding: 56px 20px; }
  .carousel {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 28px;
  }
  .carousel__view {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 510px;
    height: auto;
    aspect-ratio: 510 / 722;
    margin: 0 auto;
  }
  .story { width: 100%; height: 100%; }
  .story__chrome { left: 8px; right: 8px; width: auto; }
  .story__bars { flex: 1; margin-right: 12px; gap: 8px; }
  .story__bars i { flex: 1; width: auto; }
  .story__cap { height: auto; padding: 20px 16px 22px; }
  .story__name { font-size: 22px; }
  .carousel__btn { display: none; }

  /* ------------------------------------------------------------- FAQ -- */
  .faq { padding: 56px 20px; }
  .faq__intro, .faq__items { position: static; width: 100%; }
  .faq__items { margin-top: 28px; }
  .faq__intro h2 { font-size: 26px; line-height: 34px; }
  .faq__intro p { font-size: 16px; line-height: 24px; }
  .faq__item { border-radius: 24px; padding: 0 18px; }
  .faq__item summary { min-height: 76px; height: auto; padding: 16px 52px 16px 0; font-size: 16px; line-height: 22px; }
  .faq__toggle { right: 16px; top: 18px; width: 40px; height: 40px; }
  .faq__item[open] summary { padding-top: 24px; }
  .faq__item[open] p { padding-bottom: 76px; }
  .faq__item[open] .faq__toggle { bottom: 24px; left: 18px; }

  /* -------------------------------------------------------- cta/foot --- */
  .closing { padding: 40px 0 0; }
  .cta {
    position: static;
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    height: auto;
    margin: 0 20px;
    padding: 32px 22px 0;
    border-radius: 32px;
    overflow: hidden;
  }
  .cta__qr { position: static; order: 1; margin-bottom: 26px; }
  .cta__copy { position: static; order: 2; width: 100%; gap: 28px; }
  .cta__title { height: auto; font-size: 28px; line-height: 38px; }
  .cta__lede { width: 100%; }
  .stores { width: 100%; flex-wrap: wrap; gap: 12px; }
  .store { width: 100%; max-width: 236px; }
  .cta__photo {
    position: relative;
    order: 3;
    left: auto;
    top: auto;
    width: calc(100% + 44px);
    height: 0;
    padding-bottom: 84.5%;
    margin: 28px -22px 0;
    border-radius: 0;
  }

  .footer { position: static; width: 100%; margin-top: 48px; }
  .band-cta {
    margin-top: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 32px 20px;
  }
  .band-cta__left { width: 100%; height: auto; flex-direction: column; gap: 20px; }
  .band-cta__text { width: 100%; }
  .band-cta__actions { height: auto; flex-wrap: wrap; gap: 12px; }
  .footer__main {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 40px 20px;
  }
  .footer__brand { width: 100%; }
  .footer__cols { flex-wrap: wrap; gap: 32px 40px; }
  .footer__bar { height: auto; padding: 20px; }
}




/* ======================================================= full-bleed bands ===

   Above 1441px the stage is centred at its Figma width and the window is
   wider, so a band whose background is not --page used to read as a stripe
   with the page colour down either side. These rules widen the paint without
   moving the composition: each band draws its own background into the gutters
   through a pair of pseudo-elements pinned just outside its edges.

   `background: inherit` copies the band's own background (flat colour or the
   vertical gradient on .stories), and top/bottom 0 gives the pseudo the band's
   exact height, so the gradient lines up across the seam.
   ========================================================================= */

@media (min-width: 1441px) {

  /* The gutter fills reach past the window on purpose, and the page's
     `body { overflow-x: hidden }` does not contain them: body is not
     positioned, so it never clips an absolutely positioned descendant whose
     containing block sits inside it, and the window ends up 700-odd pixels
     horizontally scrollable. Clipping at the root does contain them. `clip`
     rather than `hidden` because it creates no scroll container of its own —
     nothing here can be scrolled sideways to, so there is nothing to scroll. */
  html {
    overflow-x: clip;
  }

  .points,
  .stories,
  .band-cta,
  .footer__main,
  .footer__bar {
    position: relative;
  }

  .points::before,
  .points::after,
  .stories::before,
  .stories::after,
  .band-cta::before,
  .band-cta::after,
  .footer__main::before,
  .footer__main::after,
  .footer__bar::before,
  .footer__bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50vw;
    background: inherit;
    pointer-events: none;
  }
  /* pinned to the outside of the band, so no content can sit under them */
  .points::before,
  .stories::before,
  .band-cta::before,
  .footer__main::before,
  .footer__bar::before { right: 100%; }
  .points::after,
  .stories::after,
  .band-cta::after,
  .footer__main::after,
  .footer__bar::after  { left: 100%; }

  /* these clipped overflowing art with `overflow: hidden`, which would also
     clip the gutter paint above. inset() keeps the top and bottom clip and
     opens the sides; nothing in them overflows horizontally. */
  .app,
  .points,
  .band-cta,
  .footer__main {
    overflow: visible;
    clip-path: inset(0 -100vw);
  }

  /* The bar's 1px rule has to carry across the seam too, so its gutter pieces
     start one pixel higher and repeat the border. */
  .footer__bar::before,
  .footer__bar::after {
    top: -1px;
    border-top: inherit;
  }

  /* The glows behind the hero and the app mockups are 2592px images that
     already run past the stage on both sides; their bands' clip-path
     clips them only vertically. The gradient fades laid over them have to
     widen to the window, or they would stop at 1441px and leave the glow
     showing raw in the gutter. Each widens from the centre so it stays
     registered with the composition.

     The photo behind the points cards is deliberately NOT in this list. Its
     art is 2882x2158, the same 1.34 aspect as its 1441x1079 band, so it was
     composed to land in that box exactly — and the floating cards are placed
     against the two subjects. Widening the box crops to fill it, which cuts
     the subjects' heads off and pulls the cards out of register. That band's
     white background bleeds on its own, which is what the gutter needs. */
  .app__fade,
  .hero__fade {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
  }

  /* The hero's glow is 2592px across and already runs past the stage on
     both sides, so it only needs the band to stop clipping it sideways; the
     band still clips vertically, where the glow and the phone run past it. */
  .hero {
    overflow: visible;
    clip-path: inset(0 -100vw);
  }

  /* The band's white behind the gutters, under the glow. Unlike the bands
     above, these two need an explicit z-index: the glow they back onto is a
     real child, and ::after is the last child, so without this the
     right-hand one would paint over it. The clip-path above makes .hero a
     stacking context, so -1 lands behind the band's children and goes no
     further. */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50vw;
    background: inherit;
    z-index: -1;
    pointer-events: none;
  }
  .hero::before { right: 100%; }
  .hero::after  { left: 100%; }

}

/* ======================================================= client-side nav ===

   router.js appends this bar to <body> and toggles .is-busy while it fetches
   the next route. The two landing pages need their own copy: the policy pages
   get theirs from styles.css, which these two do not load.
   ========================================================================= */

.route-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 300;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--sunrise);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.route-progress.is-busy {
  opacity: 1;
  animation: route-progress 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes route-progress {
  0%   { transform: scaleX(0);    opacity: 1; }
  70%  { transform: scaleX(0.85); opacity: 1; }
  100% { transform: scaleX(1);    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .route-progress.is-busy { animation: none; transform: scaleX(1); }
}

/* ========================================================== QR modal == */
/* Opened from the nav logo. Framer's overlay: an 80% black backdrop and a
   966 x 628 orange card at 48% of the viewport's height, shown and hidden
   with no transition. Every position below is the Framer layer's own. On a
   viewport too small for the card, customer-v2.js scales it down whole
   (--qr-k) rather than reflowing it. */

.qr-modal {
  position: fixed;
  inset: auto;
  top: calc(48% - 314px);
  left: calc(50% - 483px);
  width: 966px;
  height: 628px;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 42px;
  overflow: hidden;
  background: rgb(255, 116, 70);
  color: #fff;
  scale: var(--qr-k, 1);
  outline: none;
}
.qr-modal::backdrop { background: rgba(0, 0, 0, 0.8); }
.qr-modal__art { position: absolute; left: 0; top: 0; width: 966px; height: 628px; }
/* the phone's screen, all but blacked out under the code */
.qr-modal__screen {
  position: absolute;
  left: 183.7px;
  top: 53.1px;
  width: 279px;
  height: 607px;
  border-radius: 41px;
  background: rgba(26, 23, 20, 0.96);
}
.qr-modal__code {
  position: absolute;
  left: 191.15px;
  top: 273.86px;
  width: 264.91px;
  height: 264.91px;
  display: grid;
  place-items: center;
  border-radius: 19.09px;
  background: #fff;
}
.qr-modal__code img { width: 259px; height: 259px; }
.qr-modal__copy {
  position: absolute;
  left: 587px;
  top: 88px;
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 9.05px;
}
.qr-modal__copy h2 {
  font-family: var(--font-display);
  font-size: 49px;
  font-weight: 400;
  line-height: 52.08px;
  letter-spacing: normal;
  color: #fff;
}
.qr-modal__copy p {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14.4px;
  color: #fff;
}
.qr-modal__arrow { position: absolute; left: 521px; top: 300px; width: 205px; height: 156px; }