/* ==========================================================================
   Gizie for Business — landing page
   Built to the Figma frame "Gizie Business - Landing Page" (393:2142), a
   1441 x 7153.6 desktop canvas. Every value below is the Figma value.

   Layout strategy
   ---------------
   .canvas is a fixed 1441px stage; each <section> is a fixed-height band and
   children sit at their exact Figma coordinates. Between 1000px and 1441px the
   whole stage is scaled proportionally so the composition stays pixel-exact.
   Below 1000px the absolute positioning is unwound into a flow layout.
   ========================================================================== */

@font-face {
  font-family: "Cal Sans";
  src: url("/assets/fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400;
  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;
}

: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;

  /* card chrome used by the two stacked bento cards */
  --card-soft: #fcfcfc;
  --card-soft-line: #ececec;

  --font-display: "Cal Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-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;
}
.btn--primary { background: var(--orange); color: #fff; gap: 10px; }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--white { background: #fff; border: 1px solid #fff; color: var(--ink); }
.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__text { display: flex; align-items: flex-end; gap: 2px; }
.logo__word { width: 79.606px; height: 35.728px; }
.logo__tag {
  width: 62px;
  height: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: var(--ink-2);
  text-align: center;
  line-height: 24px;
}

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

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

.hero {
  height: 1024px;
  background: var(--page);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media-inner { position: absolute; inset: 0; }

.hero__photo-bg {
  position: absolute;
  left: 12px;
  top: 561px;
  width: 1418px;
  height: 463px;
  z-index: 0;
}
.hero__calendar {
  position: absolute;
  left: 123px;
  top: 448.641px;
  width: 369px;
  height: 575.359px;
  z-index: 2;
}
.hero__chart {
  position: absolute;
  left: 1015px;
  top: 634px;
  width: 328px;
  height: 277px;
  /* the export bakes the page background into the card's corner arcs, so the
     card's own radius is re-applied here to let the photo behind show */
  border-radius: 22.879px;
  z-index: 2;
}
.hero__woman {
  position: absolute;
  left: 318.568px;
  top: 396.954px;
  width: 821.432px;
  height: 715.093px;
  overflow: hidden;
  z-index: 3;
}
/* cut-out fill, positioned exactly as the Figma image fill */
.hero__woman img {
  position: absolute;
  left: -214.226px;
  top: -11.585px;
  width: 1285.503px;
  height: 726.679px;
}
.hero__stats {
  position: absolute;
  left: 749.015px;
  top: 931.235px;
  width: 313.985px;
  height: 70.123px;
  border-radius: 20.932px;
  z-index: 4;
}

.nav {
  position: absolute;
  left: 101.221px;
  top: 31px;
  width: 1243.559px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}
.nav__actions { display: flex; align-items: center; gap: 16px; height: 64px; }
.nav__actions .btn { height: 64px; }
.nav__actions .btn--ghost { width: 182px; padding: 10px 14px; }
.nav__actions .btn--primary { width: 219px; padding: 10px 24px; }
.nav__actions .btn--primary span { width: 118px; text-align: center; }

.nav__burger { display: none; }

.hero__head {
  position: absolute;
  left: 103px;
  top: 145px;
  width: 1240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  z-index: 5;
}
.hero__headline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero__title {
  width: 891px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 84px;
  color: var(--ink);
  text-align: center;
}
/* Figma runs the gradient across the whole 891px line, not the word, so
   "clockwork" only gets its orange-to-peach end. The word sits at 538–801px
   of that line; as fractions they hold at every font size. */
.hero__title .grad-text { background-size: 338.9% 100%; background-position: 85.7% 0; }
.hero__sub {
  width: 670px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
  text-align: center;
}
.hero__cta { display: flex; align-items: center; gap: 16px; height: 64px; }
.hero__cta .btn { height: 64px; }
.hero__cta .btn--primary { width: 219px; padding: 10px 24px; }
.hero__cta .btn--primary span { width: 118px; text-align: center; }
.hero__cta .btn--text { width: 179px; padding: 10px 14px; color: var(--ink); }

/* ============================================================ 2. stats === */

.stats {
  height: 253px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 194px;
  padding: 73px 100px;
}
.stats__title {
  width: 384px;
  height: 78px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  color: var(--ink);
}
.stats__list { display: flex; gap: 12px; text-align: center; }
.stat { width: 211px; display: flex; flex-direction: column; align-items: center; }
.stat__value {
  width: 100%;
  height: 87px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 600;
  line-height: 84px;
  letter-spacing: -2.8px;
  color: var(--ink);
}
.stat__label {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--ink-2);
}

/* ============================================================= 3. why ==== */

.why { height: 1246.617px; background: var(--page); }

.why__head {
  position: absolute;
  left: 438.5px;
  top: 93px;
  width: 564px;
  display: flex;
  flex-direction: column;
}
.why__title {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 84px;
  color: var(--ink);
}
.why__title .logo__mark {
  width: 40.332px;
  height: 40.332px;
  border-radius: 9.39px;
}
.why__title .logo__mark img { width: 40.332px; height: 41.553px; top: -0.63px; }
.why__sub {
  width: 564px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
  text-align: center;
}

.bento {
  position: absolute;
  left: 96px;
  top: 283px;
  width: 1249px;
  height: 870.617px;
}
.card {
  position: absolute;
  background: var(--surface);
  border-radius: 30px;
  overflow: hidden;
}
.card__head { position: absolute; left: 20px; top: 46px; }
.card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: -0.8px;
  color: #000;
}
.card__desc {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.28px;
  color: var(--ink-2);
}
.card__art { position: absolute; overflow: hidden; }
.card__art img { position: absolute; }

.card--calendar { left: 1.5px; top: 0; width: 611px; height: 412.617px; }
.card--calendar .card__head { width: 571px; }
.card--calendar .card__art { left: 20px; top: 143px; width: 571px; height: 249.617px; }
.card--calendar .card__art img { left: 0; top: 0; width: 571px; height: 249.617px; }

.card--insights { left: 636.5px; top: 0.308px; width: 611px; height: 412px; }
.card--insights .card__head { width: 571px; }
.card--insights .card__art { left: 20px; top: 143px; width: 571px; height: 249px; }
.card--insights .card__art img { left: 0; top: 0; width: 571px; height: 249px; }

.card--team { left: 0; top: 436.617px; width: 397.333px; height: 431px; }
.card--team .card__head { width: 357.333px; }
.card--team .card__art { left: 20px; top: 161px; width: 357px; height: 250px; }
.card--team .card__art img { left: 0; top: 0; width: 357px; height: 252px; }

.card--marketing { left: 421.333px; top: 436.617px; width: 398px; height: 430px; }
.card--marketing .card__head { width: 358px; }
.card--marketing .card__art {
  left: 20px;
  top: 196px;
  width: 358.667px;
  height: 212.665px;
  /* the promo card overhangs the frame upwards in Figma; the card's own
     rounded clip is what trims it */
  overflow: visible;
}
.card--marketing .card__art img {
  left: 0;
  top: -25.667px;
  width: 379.333px;
  height: 238.333px;
}

.bento__stack {
  position: absolute;
  left: 843.333px;
  top: 436.617px;
  width: 397px;
  height: 434px;
}
.card--soft {
  position: absolute;
  left: 0;
  width: 397px;
  background: var(--card-soft);
  border: 1px solid var(--card-soft-line);
  border-radius: 30px;
  overflow: hidden;
}
.card--payouts { top: 0; height: 207px; }
.card--payouts .card__head { left: 21px; top: 21px; width: 355px; }
.card--payouts .card__art { left: 21px; top: 121px; width: 356px; height: 65px; }
.card--payouts .card__art img { left: 0; top: 0; width: 356px; height: 65px; }

.card--clients { top: 231px; height: 203px; }
.card--clients .card__head { left: 21px; top: 19px; width: 355px; }
.card--clients .card__art { left: 21px; top: 102px; width: 355px; height: 80px; }
.card--clients .card__art img { left: 0; top: 0; width: 355px; height: 80px; }

/* ========================================================== 4. listing === */

.listing { height: 856px; background: var(--page); }

.section-head { position: absolute; left: 103px; top: 70px; width: 564px; }
.section-head h2 {
  height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 44px;
  color: var(--ink);
}
.section-head p {
  margin-top: 4px;
  width: 564px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
}

.listing__body {
  position: absolute;
  left: 103px;
  top: 230px;
  width: 1217px;
  height: 526px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.listing__col { width: 673px; display: flex; flex-direction: column; gap: 12px; }

.panel {
  position: relative;
  width: 100%;
  background: var(--surface);
  border-radius: 32px;
}
.panel--open { padding: 36px 66px 36px 24px; display: flex; flex-direction: column; gap: 37px; }
.panel--closed {
  padding: 24px 12px 24px 24px;
  display: flex;
  align-items: center;
  gap: 176px;
}
.panel__toggle {
  position: absolute;
  right: 26px;
  width: 40px;
  height: 36px;
  flex: none;
}
.panel--open > .panel__toggle { top: 37.4px; }
.panel__plus { width: 44px; height: 44px; flex: none; }

.panel__q-lg {
  width: 410px;
  font-size: 24px;
  font-weight: 600;
  line-height: 53px;
  letter-spacing: -0.96px;
  color: #000;
}
.panel__q-md {
  width: 410px;
  font-size: 20px;
  font-weight: 600;
  line-height: 53px;
  letter-spacing: -0.8px;
  color: #000;
}
.panel__body {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: var(--ink-2);
}
.checks { width: 444px; display: flex; flex-direction: column; gap: 24px; }
.check { display: flex; align-items: center; gap: 8px; }
.check img { width: 24px; height: 24px; flex: none; }
.check p {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.28px;
  color: var(--ink-2);
}
.check--top { align-items: flex-start; }
.progress {
  width: 511px;
  height: 5px;
  background: var(--page);
  border-radius: 9px;
  overflow: hidden;
}
.progress span { display: block; width: 392px; height: 6px; background: var(--orange); }

.listing__phone { position: relative; width: 503px; height: 505px; flex: none; }
.listing__phone img {
  position: absolute;
  left: 0;
  top: -81.5px;
  width: 503px;
  height: 587.395px;
}

/* ============================================================ 5. roles === */

.roles { height: 835px; background: var(--page); overflow: hidden; }
/* The Figma "Ellipse 2" is a 2098px sunrise-gradient disc with a 392px blur,
   cropped by the band. Reproduced as a masked gradient so it stays crisp and
   costs nothing to paint. */
.roles__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, #fdc978 -104%, #ff7446 66.6%, #ff233b 121%);
  --glow-mask: radial-gradient(
    118% 126% at 50% 116%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 18%,
    rgba(0, 0, 0, 0.86) 32%,
    rgba(0, 0, 0, 0.72) 46%,
    rgba(0, 0, 0, 0.54) 60%,
    rgba(0, 0, 0, 0.34) 75%,
    rgba(0, 0, 0, 0.16) 89%,
    rgba(0, 0, 0, 0.03) 100%
  );
  -webkit-mask-image: var(--glow-mask);
  mask-image: var(--glow-mask);
}
/* The exported SVG carries a 25px / 20.27px bleed for the line drop-shadows,
   so it is offset back by exactly that much. */
.roles__lines {
  position: absolute;
  left: 146.537px;
  top: 266.73px;
  width: 1148px;
  height: 433px;
  z-index: 1;
}
.roles__title {
  position: absolute;
  left: 439px;
  top: 63.383px;
  width: 564px;
  height: 70px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  color: var(--ink);
  text-align: center;
}

.role {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
}
.role__id { display: flex; align-items: center; justify-content: center; gap: 12px; }
.role__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
.role__avatar img { width: 48px; height: 48px; }
.role__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: var(--ink);
}
.role__job {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink-2);
}
.pills { display: flex; align-items: center; gap: 7px; width: 100%; }
.pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--surface);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink-2);
  white-space: nowrap;
}
.pill img { width: 14px; height: 14px; flex: none; }
.pill--off { color: var(--line); }

.role--reception { left: 102.5px; top: 196px; width: 257px; height: 89px; }
.role--manager   { left: 436.5px; top: 243px; width: 257px; height: 89px; }
.role--staff     { left: 836.5px; top: 244px; width: 257px; height: 89px; }
.role--supplier  { left: 1131.5px; top: 195px; width: 236px; height: 89px; }
.role--owner {
  left: 440px;
  top: 644px;
  width: 562px;
  height: 97px;
  align-items: center;
}
.role--owner .role__id {
  background: var(--surface);
  border-radius: 100px;
  padding: 4px 24px 4px 5px;
}
.role--owner .pills { justify-content: center; }

/* ============================================================ 6. steps === */

.steps { height: 1007px; background: var(--page); }
.steps__card {
  position: absolute;
  left: 100px;
  top: 64.5px;
  width: 1241px;
  height: 918px;
  background: var(--surface);
  border-radius: 40px;
}
.steps__title {
  position: absolute;
  left: 309px;
  top: 66px;
  width: 623px;
  height: 88px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  color: var(--ink);
  text-align: center;
}
.steps__stage {
  position: absolute;
  left: 129.5px;
  top: 221px;
  width: 982px;
  height: 612px;
}
/* Exported with a bleed for the connector drop-shadows; offset back to the
   frame origin the same way the roles diagram is. */
.steps__arrows {
  position: absolute;
  left: 278px;
  top: 154.553px;
  width: 431px;
  height: 318px;
}
.steps__phone {
  position: absolute;
  left: 293px;
  top: -58.174px;
  width: 407.674px;
  height: 758.73px;
}
.steps__col {
  position: absolute;
  top: 55px;
  width: 284px;
  height: 531px;
  display: flex;
  flex-direction: column;
  gap: 47px;
  z-index: 2;
}
.steps__col--left { left: 0; }
.steps__col--right { left: 698px; }
.step {
  height: 242px;
  border-radius: 30px;
  padding: 34px 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 49px;
}
.step--tint { background: var(--page); }
.step--plain { background: var(--surface); }
.step__icon { width: 32px; height: 32px; }
.step__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: #000;
}
.step__desc {
  margin-top: 8px;
  width: 244px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: var(--ink-2);
}

/* ============================================================== 7. faq === */

.faq {
  height: 732px;
  background: var(--page);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 69px 101px 89px;
}
.faq__head {
  width: 564px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.faq__head h2 {
  height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 44px;
  color: var(--ink);
}
.faq__head p {
  width: 474px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
}
.faq__list { width: 673px; display: flex; flex-direction: column; gap: 12px; }
.faq__list .panel--open { gap: 16px; }
.faq__list .panel--open > .panel__toggle { top: 32.2px; }
.faq__q-open {
  width: 410px;
  height: 34px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.72px;
  color: #000;
}
.faq__a {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.28px;
  color: var(--ink-2);
}
.faq__q {
  width: 410px;
  height: 17px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 53px;
  letter-spacing: -0.72px;
  color: #000;
}

/* ======================================================= 8. cta + footer = */

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

.cta {
  position: absolute;
  left: 100px;
  top: 0;
  width: 1241px;
  height: 639px;
  background: var(--surface);
  border-radius: 60px;
}
.cta__photo {
  position: absolute;
  right: 32.188px;
  bottom: -1px;
  width: 763.623px;
  height: 736.617px;
  overflow: hidden;
  border-bottom-right-radius: 22.22px;
}
.cta__photo img {
  position: absolute;
  left: 0.305px;
  top: 0;
  width: 789.816px;
  height: 736.617px;
}
.cta__qr {
  position: absolute;
  left: 60px;
  top: 139px;
  width: 150px;
  height: 150px;
  background: var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.cta__qr img { width: 150px; height: 150px; }
.cta__copy {
  position: absolute;
  left: 66px;
  top: 321px;
  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;
}
.cta__lede {
  margin-top: 12px;
  width: 459px;
  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;
}

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

.band-cta {
  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; height: 140px; width: 698px; }
.band-cta__text { width: 389px; display: flex; flex-direction: column; gap: 12px; }
.band-cta__text h2 { font-size: 18px; font-weight: 700; line-height: 22px; color: var(--ink); }
.band-cta__text p { font-size: 16px; font-weight: 500; line-height: 22px; 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 24px; }
.band-cta__actions .btn--primary span { width: 118px; text-align: center; }

.footer__main {
  height: 234px;
  background: var(--ink);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 267px;
  padding: 42px 48px 42px 68px;
  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: 24px; }
.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: 12px;
}
.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);
}

/* The footer in the reference spans the viewport even though the page content
   sits on a 1441px canvas. Keep the dark footer content aligned to that canvas
   while carrying its background and the peach callout to both window edges. */
@media (min-width: 1441px) {
  html { overflow-x: clip; }

  .band-cta {
    width: 100vw;
    margin-left: calc((var(--stage) - 100vw) / 2);
  }

  .footer__main,
  .footer__bar { position: relative; }

  .footer__main { overflow: visible; }

  .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;
  }

  .footer__main::before,
  .footer__bar::before { right: 100%; }

  .footer__main::after,
  .footer__bar::after { left: 100%; }

  .footer__bar::before,
  .footer__bar::after {
    top: -1px;
    border-top: inherit;
  }
}

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

/* Between 1000px and 1441px the stage is scaled so the composition stays
   exactly as drawn. --k is set by the inline script in the page head. */
@media (min-width: 1000px) and (max-width: 1440.98px) {
  /* the stage is wider than the viewport, so it sits flush left and is scaled
     from its top-left corner — that maps 1441px exactly onto the viewport */
  .stage { transform: scale(var(--k, 1)); transform-origin: top left; }
}


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

/* Below 1000px the fixed stage is unwound into a flow layout. The two
   photographic collages (hero, roles) keep their exact composition by being
   scaled as a unit — --k-hero / --k-roles are set by the page script. */
@media (max-width: 999.98px) {
  .stage { width: 100%; transform: none; height: auto !important; }
  .band { width: 100%; }

  .hero,
  .stats,
  .why,
  .listing,
  .roles,
  .steps,
  .faq,
  .closing { height: auto; }

  /* ------------------------------------------------------------- hero -- */
  .hero {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0;
  }
  .nav {
    position: static;
    order: 0;
    width: 100%;
    height: auto;
    gap: 12px;
  }
  .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; gap: 8px; }
  .nav__actions .btn--primary span { width: auto; }
  .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; }
  .logo__tag { width: auto; height: auto; font-size: 12px; line-height: 18px; }

  .hero__head {
    position: static;
    order: 1;
    width: 100%;
    gap: 24px;
    margin-top: 44px;
  }
  .hero__title { width: 100%; font-size: 38px; line-height: 46px; }
  .hero__sub { width: 100%; max-width: 560px; margin-top: 12px; font-size: 16px; }
  .hero__cta { flex-wrap: wrap; justify-content: center; height: auto; gap: 12px; }
  .hero__cta .btn { height: 56px; }
  .hero__cta .btn--text { width: auto; }

  .hero__media {
    position: relative;
    order: 2;
    width: calc(100% + 40px);
    margin: 36px -20px 0;
    height: var(--hero-h, 60vw);
    overflow: hidden;
  }
  .hero__media-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1441px;
    height: 1024px;
    /* lift the empty upper half of the 1024px stage out of view */
    transform: scale(var(--k-hero, 0.26)) translateY(-390px);
    transform-origin: top left;
  }

  /* ------------------------------------------------------------ stats -- */
  .stats {
    flex-direction: column;
    gap: 32px;
    padding: 56px 20px;
    text-align: center;
  }
  .stats__title { width: 100%; height: auto; justify-content: center; font-size: 26px; line-height: 34px; }
  .stats__list { flex-wrap: wrap; justify-content: center; gap: 20px 16px; }
  .stat { width: 150px; }
  .stat__value { height: auto; font-size: 40px; line-height: 52px; letter-spacing: -2px; }
  .stat__label { font-size: 13px; }

  /* -------------------------------------------------------------- why -- */
  .why { padding: 56px 20px; }
  .why__head { position: static; width: 100%; }
  .why__title { height: auto; font-size: 26px; line-height: 34px; gap: 10px; }
  .why__title .logo__mark { width: 28px; height: 28px; border-radius: 7px; }
  .why__title .logo__mark img { width: 28px; height: 28.85px; top: -0.44px; }
  .why__sub { width: 100%; margin-top: 12px; font-size: 16px; }

  .bento {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .card,
  .bento__stack,
  .card--soft {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }
  .bento__stack { display: flex; flex-direction: column; gap: 16px; }
  .card__head {
    position: static;
    width: auto !important;
    padding: 24px 20px 0;
  }
  .card--soft .card__head { padding: 20px 20px 0; }
  .card__art {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 220px !important;
    margin: 20px 0;
    overflow: hidden !important;
  }
  .card__art img {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
  }
  .card--soft .card__art { height: 80px !important; margin-bottom: 20px; }
  .card--payouts .card__art { height: 65px !important; }

  /* ---------------------------------------------------------- listing -- */
  .listing { padding: 56px 20px; }
  .section-head { position: static; width: 100%; }
  .section-head h2 { height: auto; font-size: 26px; line-height: 34px; }
  .section-head p { width: 100%; font-size: 16px; }
  .listing__body {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }
  .listing__col { width: 100%; }
  .panel--open { padding: 26px 22px; gap: 20px; }
  .panel--closed { padding: 20px 18px; gap: 16px; justify-content: space-between; }
  .panel__toggle { right: 18px; }
  .panel--open > .panel__toggle { top: 24px; width: 32px; height: 29px; }
  .panel__plus { width: 36px; height: 36px; }
  .panel__q-lg,
  .panel__q-md,
  .faq__q,
  .faq__q-open {
    display: block;
    width: calc(100% - 48px);
    height: auto;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.4px;
  }
  .checks { width: 100%; gap: 16px; }
  .check p { width: auto; }
  .progress { width: 100%; }
  .listing__phone {
    width: 100%;
    max-width: 503px;
    height: 0;
    padding-bottom: min(100.4%, 505px);
    margin: 70px auto 0;
  }
  .listing__phone img {
    left: 0;
    top: -16.13%;
    width: 100%;
    height: auto;
  }

  /* ------------------------------------------------------------ roles -- */
  .roles { padding: 56px 0 0; }
  .roles__title {
    position: static;
    width: 100%;
    height: auto;
    padding: 0 20px;
    font-size: 28px;
    line-height: 36px;
  }
  .roles__glow {
    inset: auto 0 0 0;
    height: 78%;
    --glow-mask: radial-gradient(
      140% 116% at 50% 116%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.9) 24%,
      rgba(0, 0, 0, 0.68) 46%,
      rgba(0, 0, 0, 0.4) 66%,
      rgba(0, 0, 0, 0.14) 86%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  .roles__lines { display: none; }
  .roles__grid {
    position: relative;
    z-index: 2;
    margin-top: 36px;
    padding: 0 20px 56px;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .role {
    position: static;
    width: 100% !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  .role--owner .pills { justify-content: flex-start; }
  .pills { flex-wrap: wrap; gap: 6px; }

  /* ------------------------------------------------------------ steps -- */
  .steps { padding: 56px 20px; }
  .steps__card {
    position: static;
    width: 100%;
    height: auto;
    padding: 36px 20px;
    border-radius: 32px;
  }
  .steps__title {
    position: static;
    width: 100%;
    height: auto;
    font-size: 28px;
    line-height: 36px;
  }
  .steps__stage {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .steps__arrows { display: none; }
  .steps__phone {
    position: relative;
    left: auto;
    top: auto;
    order: 1;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 8px auto;
  }
  .steps__col {
    position: static;
    width: 100%;
    height: auto;
    gap: 16px;
  }
  .steps__col--left { order: 0; }
  .steps__col--right { order: 2; }
  .step { height: auto; gap: 22px; padding: 24px 20px; }
  .step__desc { width: 100%; }

  /* -------------------------------------------------------------- faq -- */
  .faq { flex-direction: column; padding: 56px 20px; }
  .faq__head { width: 100%; padding: 0; }
  .faq__head h2 { height: auto; font-size: 26px; line-height: 34px; }
  .faq__head p { width: 100%; font-size: 16px; }
  .faq__list { width: 100%; margin-top: 28px; }
  .faq__list .panel--open > .panel__toggle { top: 24px; }

  /* --------------------------------------------------------- cta/foot -- */
  .closing { padding: 56px 0 0; }
  .cta {
    position: static;
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    margin: 0 20px;
    height: auto;
    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;
    right: auto;
    bottom: auto;
    width: calc(100% + 44px);
    margin: 28px -22px 0;
    height: 0;
    padding-bottom: 96.5%;
    border-radius: 0;
  }
  .cta__photo img { left: 0; top: 0; width: 103.43%; height: 100%; }

  .footer { position: static; width: 100%; margin-top: 56px; }
  .band-cta {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 32px 20px;
  }
  .band-cta__left { width: 100%; height: auto; flex-direction: column; gap: 16px; }
  .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; }
}


/* ======================================================= 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); }
}