/* ============================================================
   doorstep styles — layout & components
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--text-l);
  font-weight: var(--weight-regular);
  line-height: var(--lh);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

.container {
  width: min(100% - var(--space-2), var(--max));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-8);
}

.section--alt {
  background: var(--light-gray);
}

.section__eyebrow {
  display: inline-block;
  font-size: var(--text);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space);
}

.section__title {
  font-size: var(--section-title);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space);
}

.section__lead {
  font-size: var(--text-l);
  color: var(--gray);
  max-width: 540px;
  line-height: var(--lh);
}

.section__header {
  margin-bottom: var(--space-4);
  max-width: 640px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space) var(--space-2);
  border-radius: var(--radius);
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
    background var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:active {
  opacity: 0.82;
  transform: scale(0.985);
}

.btn--primary {
  background: var(--black);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--dark-gray);
}

.btn--ghost {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--border);
}

.btn--ghost:hover {
  background: var(--light-gray);
}

.btn--pill {
  border-radius: var(--radius-lg);
}

.btn--sm {
  padding: 10px 18px;
  font-size: var(--text);
}

/* ---------- Store badges ---------- */

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  background: var(--black);
  color: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  min-width: 176px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 24px -12px rgba(0, 0, 0, 0.35);
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.store-badge:hover {
  background: var(--dark-gray);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 14px 28px -14px rgba(0, 0, 0, 0.45);
}

.store-badge:active {
  opacity: 0.9;
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 12px -8px rgba(0, 0, 0, 0.3);
}

.store-badge__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.store-badge__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  text-align: left;
}

.store-badge__meta small {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.62;
}

.store-badge__meta strong {
  font-size: 15px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: height var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.nav.is-scrolled {
  height: 56px;
  border-bottom-color: var(--border);
}

.nav__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  width: min(100% - var(--space-2), var(--max));
  margin-inline: auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-bold);
  font-size: var(--headline-s);
  letter-spacing: -0.02em;
}

.logo__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__links a {
  font-size: var(--text);
  font-weight: var(--weight-medium);
  color: var(--gray);
  transition: color var(--dur) var(--ease);
}

.nav__links a:hover {
  color: var(--black);
}

.nav__links a.nav__cta,
.nav__links a.nav__cta:hover {
  color: var(--white);
}

.nav__links a.nav__cta:hover {
  background: var(--dark-gray);
}

.nav__cta {
  display: inline-flex;
}

@media (max-width: 859px) {
  .nav__links a:not(.nav__cta) {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: var(--space-6) var(--space-8);
  overflow: hidden;
}

.hero__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}

.hero__blob--2 {
  width: 320px;
  height: 320px;
  background: var(--light-gray);
  bottom: 10%;
  left: -60px;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
  }
}

@media (max-width: 959px) {
  /* The mockup sits between the lead and the store buttons, so the hero
     follows its content instead of filling a screen it can no longer hold. */
  .hero {
    padding-block: var(--space-3);
  }

  /* Hidden until JS moves it into the copy and marks it --inline. Without
     that it would land below the buttons as a second column leftover. */
  .hero .phone-wrap {
    display: none;
  }

  .hero .phone-wrap--inline {
    --phone-scale: 0.42;
    display: flex;
    height: calc(578px * var(--phone-scale));
    margin-block: var(--space) var(--space-2);
    animation: none;
  }

  /* Scaled rather than resized so the mockup keeps its native proportions,
     and pinned in place — a floating or parallaxed phone would drift into
     the buttons sitting right below it. */
  .hero .phone-wrap--inline .phone {
    transform: scale(var(--phone-scale)) rotate(-1.5deg);
    transform-origin: top center;
    translate: none;
  }

  .hero__grid {
    gap: 0;
  }

  .hero__copy {
    max-width: 660px;
    margin-inline: auto;
    text-align: center;
  }

  .hero .hero__lead {
    margin-inline: auto;
    margin-bottom: var(--space);
  }

  .hero__actions {
    justify-content: center;
  }
}

@media (max-width: 959px) and (max-height: 700px) {
  .hero .phone-wrap--inline {
    --phone-scale: 0.32;
  }
}

/* Tablets have height to spare — no phone gets this tall, so the size never
   flips as a mobile browser toolbar collapses. */
@media (min-width: 600px) and (max-width: 959px) and (min-height: 900px) {
  .hero .phone-wrap--inline {
    --phone-scale: 0.5;
  }
}

/* Landscape phones are too short for a mockup between the copy and the
   buttons — leave the store row immediately under the lead. */
@media (max-width: 959px) and (max-height: 560px) {
  .hero .phone-wrap--inline {
    display: none;
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--light-gray);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text);
  font-weight: var(--weight-medium);
  color: var(--dark-gray);
  margin-bottom: var(--space-2);
}

.hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.hero__title {
  font-size: var(--hero);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-2);
  color: var(--black);
}

.hero__lead {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--gray);
  max-width: 440px;
  margin-bottom: var(--space-3);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  margin-bottom: var(--space-2);
}

.hero__hint {
  font-size: var(--text);
  color: var(--gray);
}

/* ---------- Phone mockup ---------- */

.phone-wrap {
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.phone {
  width: 284px;
  height: 578px;
  background: linear-gradient(160deg, #3a3a3c 0%, #101012 38%, #000 70%, #232326 100%);
  border-radius: 42px;
  padding: 11px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 2px 3px rgba(255, 255, 255, 0.14) inset,
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 18px 32px -18px rgba(0, 0, 0, 0.45),
    0 42px 70px -26px rgba(0, 0, 0, 0.35);
}

/* Side buttons */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2c2c2e, #48484a 40%, #2c2c2e);
}

.phone::before {
  left: -2px;
  top: 132px;
  height: 34px;
  box-shadow: 0 54px 0 #2c2c2e, 0 104px 0 #2c2c2e;
}

.phone::after {
  right: -2px;
  top: 168px;
  height: 62px;
}

/* Dynamic island */
.phone__notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 24px;
  background: #000;
  border-radius: var(--radius-pill);
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone__notch::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2f3a4a 0%, #0b0f16 60%, #05070a 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone__screen {
  height: 100%;
  background: var(--white);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Glass glare across the screen */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.42) 46%,
    rgba(255, 255, 255, 0.12) 54%,
    rgba(255, 255, 255, 0) 66%
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
}

.phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 6px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
}

.phone__status span:last-child {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  font-size: 0;
}

/* Signal bars + battery */
.phone__status span:last-child::before {
  content: "";
  width: 15px;
  height: 9px;
  background:
    linear-gradient(var(--black) 0 0) 0 100% / 2px 4px no-repeat,
    linear-gradient(var(--black) 0 0) 4.3px 100% / 2px 6px no-repeat,
    linear-gradient(var(--black) 0 0) 8.6px 100% / 2px 8px no-repeat,
    linear-gradient(var(--black) 0 0) 13px 100% / 2px 9px no-repeat;
}

.phone__status span:last-child::after {
  content: "";
  width: 18px;
  height: 9px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  padding: 1px;
  background:
    linear-gradient(var(--black) 0 0) left center / 70% 100% no-repeat content-box;
}

.phone__body {
  flex: 1;
  padding: 8px 14px 0;
  overflow: hidden;
}

.phone__headline {
  font-size: 18px;
  font-weight: var(--weight-bold);
  text-align: center;
  margin: 8px 0 4px;
}

.phone__sub {
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-bottom: 14px;
}

.phone__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--light-gray);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 12px;
}

.phone__chips {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}

.phone__chips--wrap {
  flex-wrap: wrap;
  overflow: visible;
  margin-bottom: 12px;
}

/* Week strip */
.phone__days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin: 10px 0 4px;
}

.phone__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  border-radius: var(--radius);
  background: var(--light-gray);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--dark-gray);
}

.phone__day small {
  font-size: 8px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
}

.phone__day--on {
  background: var(--dark-gray);
  color: var(--white);
}

.phone__day--on small {
  color: rgba(255, 255, 255, 0.6);
}

/* Small group heading inside a screen */
.phone__label {
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 7px;
}

.phone__field + .phone__label {
  margin-top: 14px;
}

.phone__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: #e8f7ec;
  color: var(--green);
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.phone__note svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.phone__chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--black);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

.phone__chip--on {
  background: var(--dark-gray);
  color: var(--white);
}

.phone__chip--off {
  background: var(--white);
  color: var(--black);
}

.phone__card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.phone__photo {
  height: 110px;
  background: linear-gradient(135deg, #dfe7ef 0%, #f0f3f6 50%, #c9d6e2 100%);
  position: relative;
}

.phone__photo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 5px;
}

.phone__card-body {
  padding: 10px 12px;
}

.phone__card-title {
  font-size: 13px;
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
}

.phone__card-meta {
  font-size: 11px;
  color: var(--gray);
}

.phone__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.phone__stat {
  background: var(--light-gray);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}

.phone__stat strong {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.phone__stat span {
  font-size: 9px;
  color: var(--gray);
}

.phone__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--dark-gray);
  padding: 10px 4px 18px;
  margin-top: auto;
}

/* Home indicator */
.phone__tabs::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
}

.phone__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 8px;
}

.phone__tab--active {
  color: var(--white);
}

.phone__tab svg {
  width: 16px;
  height: 16px;
}

/* Stacked screens inside showcase phone */
.phone__screen--stack {
  position: relative;
}

.phone__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}

.phone__layer.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1;
}

.phone__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
  border-top: 1px solid var(--light-gray);
}

.phone__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--light-gray);
}

/* Profile photo */
.phone__thumb {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--light-gray);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}

.phone__thumb img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Verified check on the photo */
.phone__thumb::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 9px 9px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Stacked mini avatars for group viewings */
.phone__avatars {
  display: flex;
  flex-shrink: 0;
  padding-left: 4px;
}

.phone__mini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -8px;
  background: var(--light-gray);
  overflow: hidden;
  flex-shrink: 0;
}

.phone__mini img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.phone__row-body {
  flex: 1;
  min-width: 0;
}

.phone__row-body strong {
  display: block;
  font-size: 12px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone__row-body span {
  display: block;
  font-size: 10px;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count line above a list */
.phone__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--gray);
}

.phone__meta strong {
  color: var(--black);
  font-weight: var(--weight-bold);
}

.phone__pill {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--light-gray);
  color: var(--gray);
}

.phone__pill--green {
  background: #e8f7ec;
  color: var(--green);
}

.phone__pill--blue {
  background: #e6f4fe;
  color: var(--blue);
}

.phone__pill--slot {
  background: var(--light-gray);
  color: var(--gray);
}

.phone__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 12px;
}

.phone__field:first-of-type {
  margin-top: 8px;
  border-top: 1px solid var(--light-gray);
}

.phone__field-label {
  color: var(--dark-gray);
  font-weight: var(--weight-medium);
}

.phone__field-value {
  color: var(--gray);
  font-weight: var(--weight-bold);
}

/* ---------- Showcase (pinned scroll) ---------- */

.showcase {
  --p: 0;
  background: var(--white);
}

.showcase__track {
  height: 320vh;
  position: relative;
}

.showcase__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-2);
}

.showcase__grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  width: min(100% - var(--space-2), var(--max));
}

@media (min-width: 960px) {
  .showcase__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
  }
}

.showcase__copy {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  position: relative;
  min-height: 280px;
}

.showcase__rail {
  width: 2px;
  background: var(--border);
  border-radius: 1px;
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
  margin-block: 8px;
}

.showcase__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black);
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
  border-radius: 1px;
}

.showcase__steps {
  flex: 1;
  position: relative;
  min-height: 240px;
}

.showcase__step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.showcase__step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.showcase__eyebrow {
  display: block;
  font-size: var(--text);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space);
}

.showcase__title {
  font-size: var(--section-title);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space);
}

.showcase__text {
  font-size: clamp(15px, 2vw, 17px);
  color: var(--gray);
  max-width: 420px;
  line-height: var(--lh);
}

.showcase__phone-wrap {
  display: flex;
  justify-content: center;
}

.phone--showcase {
  transform: none;
  animation: none;
  will-change: transform;
}

@media (max-width: 959px) {
  .showcase__track {
    height: 300vh;
  }

  .showcase__stage {
    /* Clear the sticky nav via top, not padding — padding would leave a
       blank band between the hero and the phone before the stage pins.
       svh, not dvh: dvh grows while mobile toolbars collapse, which resizes
       the pinned stage mid-scroll and makes the phone jump. */
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    height: calc(100svh - var(--nav-h));
    padding-block: var(--space-2);
  }

  .showcase__grid {
    align-content: center;
    justify-items: center;
    gap: var(--space);
  }

  .showcase__copy {
    min-height: 0;
    width: 100%;
  }

  .showcase__rail {
    display: none;
  }

  .showcase__steps {
    min-height: 175px;
    text-align: center;
  }

  .showcase__text {
    margin-inline: auto;
  }

  .showcase__phone-wrap {
    order: -1;
    /* The mockup keeps its native 284x578 box and is scaled visually, so the
       wrapper reserves only the scaled height. Sized to nearly fill the
       pinned stage so the block stays centred without a large dead band. */
    --phone-scale: 0.82;
    height: calc(578px * var(--phone-scale));
    align-items: flex-start;
  }
}

@media (max-width: 959px) and (max-height: 760px) {
  .showcase__phone-wrap {
    --phone-scale: 0.6;
  }

  .showcase__grid {
    gap: 10px;
  }

  .showcase__steps {
    min-height: 150px;
  }
}

/* Landscape phones are too short to pin anything — fall back to plain flow. */
@media (max-width: 959px) and (max-height: 560px) {
  .showcase__track {
    height: auto;
  }

  .showcase__stage {
    position: relative;
    height: auto;
    padding-block: var(--space-4);
  }

  .showcase__steps {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .showcase__step {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: var(--space-2);
  counter-reset: step;
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    position: relative;
  }

  .steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--border);
    z-index: 0;
  }
}

.step {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.step__num {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: var(--text);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space);
}

.step__title {
  font-size: var(--headline-s);
  font-weight: var(--weight-bold);
  margin-bottom: 6px;
}

.step__text {
  font-size: var(--text);
  color: var(--gray);
}

/* ---------- Split (Vermieter / About) ---------- */

.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.split__visual {
  background: var(--light-gray);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

/* On the tinted about section the default panel disappears into the background */
.split__visual--brand {
  background: var(--white);
  border-color: var(--border);
}

/* Stacked, the copy has to lead — the panel only sits first in the DOM so it
   lands on the left of the alternating two-column layout. */
@media (max-width: 859px) {
  .split__visual--brand {
    order: 2;
  }
}

.split__row {
  display: flex;
  align-items: center;
  gap: var(--space);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.split__avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--dark-gray);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.split__row-body strong {
  display: block;
  font-size: var(--text);
  font-weight: var(--weight-bold);
}

.split__row-body span {
  font-size: var(--text-s);
  color: var(--gray);
}

.split__pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: #e8f7ec;
  color: var(--green);
}

.split__pill--blue {
  background: #e6f4fe;
  color: var(--blue);
}

.split__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--space-2);
}

.split__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-l);
}

.split__list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--blue);
}

/* ---------- CTA band ---------- */

.cta {
  background: var(--dark-gray);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}

.cta__title {
  font-size: var(--section-title);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space);
}

.cta__lead {
  font-size: var(--text-l);
  color: rgba(255, 255, 255, 0.65);
  max-width: 480px;
  margin: 0 auto var(--space-3);
}

.cta .store-row {
  justify-content: center;
}

.cta .store-badge {
  background: var(--white);
  color: var(--black);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px -14px rgba(0, 0, 0, 0.55);
}

.cta .store-badge:hover {
  background: var(--white);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 32px -12px rgba(0, 0, 0, 0.6);
}

.cta .store-badge:active {
  background: var(--light-gray);
}

/* ---------- Footer ---------- */

.footer {
  padding-block: var(--space-4) var(--space-3);
  border-top: 1px solid var(--border);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.footer__brand p {
  font-size: var(--text);
  color: var(--gray);
  margin-top: 8px;
  max-width: 280px;
}

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__col h4 {
  font-size: var(--text);
  font-weight: var(--weight-bold);
  margin-bottom: 10px;
}

.footer__col a {
  display: block;
  font-size: var(--text);
  color: var(--gray);
  margin-bottom: 6px;
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover {
  color: var(--black);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text);
  color: var(--gray);
}

/* ---------- Legal pages ---------- */

.legal {
  padding-block: var(--space-6) var(--space-8);
  max-width: 720px;
}

.legal h1 {
  font-size: var(--section-title);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.legal h2 {
  font-size: var(--headline-s);
  font-weight: var(--weight-bold);
  margin-top: var(--space-3);
  margin-bottom: var(--space);
}

.legal p,
.legal li {
  font-size: var(--text-l);
  color: var(--gray);
  margin-bottom: var(--space);
}

.legal ul {
  list-style: disc;
  padding-left: 1.2em;
  margin-bottom: var(--space);
}

.legal a {
  color: var(--blue);
}

/* ---------- Responsive: small screens ---------- */

@media (max-width: 640px) {
  /* One rhythm for the whole page: 45px around every band, 15–30px
     between pieces inside a band. Later desktop rules (hero lead 45px,
     section 60px) otherwise win on a phone and the page reads as
     alternating tight and empty. */
  .hero,
  .section,
  #how,
  .footer {
    padding-block: var(--space-3);
  }

  /* how and tenants share one gray band — don't pay the section
     padding twice in the middle. */
  #how {
    padding-bottom: var(--space-2);
  }

  #tenants {
    padding-top: var(--space-2);
  }

  .section__header {
    margin-bottom: var(--space-2);
  }

  .hero__title {
    margin-bottom: var(--space);
  }

  .hero__lead {
    margin-bottom: var(--space);
  }

  .hero .phone-wrap--inline {
    margin-block: var(--space) var(--space-2);
  }

  .hero__actions {
    gap: 10px;
    margin-bottom: var(--space);
  }

  .store-row {
    gap: 10px;
  }

  /* Two badges share a row where they fit and stack full width where they
     don't — the CTA band is narrower than the hero because of its padding. */
  .store-badge {
    flex: 1 1 auto;
    min-width: 148px;
    justify-content: center;
    padding: 12px 14px;
  }

  .steps {
    gap: 10px;
  }

  #how .section__header {
    margin-bottom: var(--space);
  }

  #how .step {
    padding: 16px;
  }

  #how .step__num {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    margin-bottom: 8px;
  }

  .split {
    gap: var(--space-2);
  }

  .split__visual {
    min-height: 0;
    padding: var(--space) var(--space);
  }

  .split__list {
    margin-top: var(--space);
    gap: 10px;
  }

  .cta {
    padding: var(--space-3) var(--space-2);
  }

  .cta__lead {
    margin-bottom: var(--space-2);
  }

  .footer__top {
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .footer__cols {
    gap: var(--space-2);
  }

  .footer__col {
    min-width: 120px;
  }

  /* Text-height links are a hard tap on a phone — trade the margin for
     padding so the hit area grows without stretching the column. */
  .footer__col a {
    margin-bottom: 0;
    padding-block: var(--space-half);
  }
}

/* ---------- Utility ---------- */

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