.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-64);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  min-width: 0;
}
.hero-copy .lede {
  margin-bottom: var(--gap-pair);
}
.hero-visual {
  --visual-height: 560px;
  display: flex;
  justify-content: center;
  min-width: 0;
  height: var(--visual-height);
  padding-top: var(--space-48);
  overflow: clip;
  background:
    radial-gradient(70% 55% at 50% 100%, color-mix(in srgb, var(--accent) 34%, transparent), transparent),
    linear-gradient(180deg, var(--night-2), var(--night));
}
.hero-visual .phone {
  width: min(78%, 300px);
}

.phone {
  --bezel: 6px;
  --screen-radius: 38px;
  flex: none;
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: #0b0e14;
  box-shadow:
    0 0 0 var(--stroke) color-mix(in srgb, #fff 14%, transparent),
    0 24px 48px -24px #0009;
}
.phone img {
  width: 100%;
  border-radius: var(--screen-radius);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-block);
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-list li {
  display: flex;
  flex-direction: column;
  gap: var(--gap-pair);
  min-width: 0;
  padding-top: var(--gap-group);
  border-top: var(--stroke) solid var(--line-strong);
}
.feature-list svg {
  width: var(--space-24);
  height: var(--space-24);
  margin-bottom: var(--gap-pair);
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-list h3 {
  font: var(--type-card);
  text-wrap: balance;
}
.feature-list p {
  color: var(--muted);
  font: var(--type-compact);
  text-wrap: pretty;
}

.screen-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-group);
}
.screen-card {
  --card-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block);
  height: var(--card-height);
  padding-bottom: 0;
  overflow: clip;
  background: var(--well);
}
.screen-copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-pair);
  align-self: stretch;
}
.screen-copy h3 {
  font: var(--type-title);
  letter-spacing: var(--tracking-title);
}
.screen-copy p {
  color: var(--muted);
  font: var(--type-compact);
}
.screen-card .phone {
  width: min(100%, 250px);
}

.use-cases {
  overflow: clip;
}
.scroll-container {
  display: grid;
  gap: var(--gap-pair);
  margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.scroll-row {
  display: flex;
  overflow: clip;
}
.scroll-content {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap-pair);
  padding-right: var(--gap-pair);
}
.habit-tag {
  display: block;
  padding: var(--space-8) var(--space-16);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-capsule);
  background: var(--surface);
  white-space: nowrap;
  font: var(--type-nav);
}
.scroll-left .scroll-content {
  animation: drift 90s linear infinite;
}
.scroll-right .scroll-content {
  animation: drift 100s linear infinite reverse;
}
.scroll-slow .scroll-content {
  animation-duration: 120s;
}
.scroll-container:hover .scroll-content {
  animation-play-state: paused;
}
@keyframes drift {
  to {
    transform: translateX(-100%);
  }
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-group);
}
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--gap-group);
}
.stars {
  font: var(--type-meta);
  letter-spacing: 0.15em;
}
.testimonial blockquote {
  flex: 1;
  font: var(--type-body);
  font-style: italic;
  text-wrap: pretty;
}
.testimonial figcaption {
  color: var(--muted);
  font: var(--type-compact);
}

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--gap-block) var(--space-48);
  align-items: start;
}
.faq .section-heading {
  position: sticky;
  top: calc(var(--header-height) + var(--gap-block));
  margin: 0;
}
.faq-list {
  border-top: var(--stroke) solid var(--line-strong);
}
.faq-item {
  border-bottom: var(--stroke) solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: var(--space-64);
  padding-block: var(--gap-group);
  font: var(--type-card);
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--accent);
}
.faq-icon {
  position: relative;
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 7px 0 auto;
  height: var(--stroke-focus);
  border-radius: var(--stroke);
  background: currentColor;
  transition: transform var(--motion-state) var(--ease-standard);
}
.faq-icon::after {
  transform: rotate(90deg);
}
.faq-item[open] .faq-icon::after {
  transform: rotate(0deg);
}
.faq-answer p {
  max-width: 60ch;
  padding: 0 var(--gap-block) var(--space-24) 0;
  color: var(--muted);
}

@media (width < 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-block);
  }
  .hero-visual {
    --visual-height: 480px;
    padding-top: var(--gap-block);
  }
  .hero-visual .phone {
    width: min(72%, 280px);
  }
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-block) var(--space-24);
  }
  .screen-rail {
    display: flex;
    gap: var(--gap-pair);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .screen-rail::-webkit-scrollbar {
    display: none;
  }
  .screen-card {
    --card-height: 520px;
    flex: 0 0 min(80%, 320px);
    scroll-snap-align: start;
  }
  .screen-card .phone {
    width: min(100%, 230px);
  }
  .testimonials-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-pair);
  }
  .faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .faq .section-heading {
    position: static;
    margin-bottom: var(--heading-gap);
  }
}
@media (width < 600px) {
  .hero-visual {
    --visual-height: 420px;
  }
  .feature-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
  }
  .feature-list li {
    display: grid;
    grid-template-columns: var(--space-24) minmax(0, 1fr);
    gap: var(--gap-label) var(--gap-group);
  }
  .feature-list svg {
    grid-row: span 2;
    margin: 0;
  }
}