.features[data-astro-cid-fhxxz3xz] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--layout-card-min-width), 1fr));
  gap: var(--layout-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-title[data-astro-cid-fhxxz3xz] {
  margin: 0 0 calc(var(--layout-grid-gap) / 4);
  font-size: var(--type-list-title);
}

.feature-body[data-astro-cid-fhxxz3xz] {
  max-width: var(--layout-prose-measure);
  margin: 0;
  color: var(--text);
}
.shots[data-astro-cid-7kyzrqxy] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shot[data-astro-cid-7kyzrqxy] {
  flex: 1 1 calc((100% - 2 * var(--layout-grid-gap)) / 3);
  max-width: calc((100% - 2 * var(--layout-grid-gap)) / 3);
  margin: 0;
}

.shot-figure[data-astro-cid-7kyzrqxy] {
  margin: 0;
}

.shot-image[data-astro-cid-7kyzrqxy] {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--surface2);
  border: var(--detail-line-width) solid var(--line);
  border-radius: var(--radius);
}

.shot-caption[data-astro-cid-7kyzrqxy] {
  padding-block-start: calc(var(--layout-grid-gap) / 3);
  color: var(--muted);
  font-size: var(--type-caption);
}

@media (width <= 900px) {
  .shot[data-astro-cid-7kyzrqxy] {
    flex-basis: calc((100% - var(--layout-grid-gap)) / 2);
    max-width: calc((100% - var(--layout-grid-gap)) / 2);
  }
}

@media (width <= 720px) {
  .shot[data-astro-cid-7kyzrqxy] {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.store-links[data-astro-cid-nbegnzjg] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--layout-grid-gap) / 3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-link[data-astro-cid-nbegnzjg] {
  display: inline-block;
  padding: calc(var(--layout-grid-gap) / 4) calc(var(--layout-grid-gap) / 2);
  color: var(--text);
  font-size: var(--type-small);
  text-decoration: none;
  background-color: var(--surface);
  border: var(--detail-line-width) solid var(--line);
  border-radius: var(--radius);
}

.store-link[data-astro-cid-nbegnzjg]:hover {
  background-color: var(--surface2);
}

.store-link-primary[data-astro-cid-nbegnzjg] {
  color: var(--on-accent);
  background-color: var(--accent);
  border-color: var(--accent);
}
.blocks-home[data-astro-cid-dlekrkyl] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-grid-gap) * 1.5);
}

.blocks-home-prose[data-astro-cid-dlekrkyl] {
  max-width: var(--layout-prose-measure);
}

.block[data-astro-cid-dlekrkyl] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--layout-grid-gap) / 2);
}

.block-heading[data-astro-cid-dlekrkyl] {
  max-width: var(--layout-prose-measure);
  margin: 0;
  font-size: var(--type-h2);
}
.store-badges[data-astro-cid-pxxzedcg] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--layout-grid-gap) / 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-badges[data-astro-cid-pxxzedcg] img[data-astro-cid-pxxzedcg] {
  display: block;
  height: 3rem;
  width: auto;
}

.store-soon[data-astro-cid-pxxzedcg] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.store-soon[data-astro-cid-pxxzedcg] img[data-astro-cid-pxxzedcg] {
  opacity: .45;
  filter: grayscale();
}

.store-soon-label[data-astro-cid-pxxzedcg] {
  color: var(--muted);
  font-size: var(--type-micro);
}
/*
 * The landing page's shapes (R-79 … R-81). Every colour, radius, size and
 * breakpoint is a token (R-28, C-5): the two breakpoints are the ones
 * design/tokens.json names, 900px (columns collapse) and 720px (mobile).
 *
 * The bands run edge to edge, which is why the page asks `Base.astro` for
 * `bleed`; each carries its own inner container at `layout.pageMax`.
 */
.lp {
  --lp-space: calc(var(--layout-grid-gap) * 3);
}

.lp-band {
  padding-block: var(--lp-space);
  padding-inline: var(--layout-gutter);
}

/* The header's bar is `pageMax` including its gutters; the bands pad outside the container, so subtract them to share one left edge. */
.lp-inner {
  max-width: calc(var(--layout-page-max) - 2 * var(--layout-gutter));
  margin-inline: auto;
}

/* The inverse band swaps the two roles; the focus ring needs contrast on it too. */
.lp-band--inverse {
  color: var(--bg);
  background-color: var(--text);
}

.lp-band--accent {
  color: var(--on-accent);
  background-color: var(--accent);
}

/*
 * The focus ring is accent by default (R-58), and accent is the one role with
 * no contrast against the page on a light theme like this one's. Over the
 * page it is `text`; over the inverse band, where accent is the contrast, it
 * stays accent.
 */
.lp :focus-visible {
  outline-color: var(--text);
}

.lp-band--inverse :focus-visible {
  outline-color: var(--accent);
}

.lp-title {
  max-width: var(--layout-prose-measure);
  margin: 0 0 calc(var(--layout-grid-gap) * 1.5);
  font-size: clamp(var(--type-section-title-min), 5vw, var(--type-section-title-max));
}

.lp-hero-title {
  margin: 0;
  font-size: clamp(var(--type-hero-title-min), 8vw, var(--type-hero-title-max));
}

.lp-lead {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-hero-intro);
}

.lp-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
}

.lp-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-grid-gap);
}

.lp-copy > p {
  margin: 0;
}

.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: calc(var(--layout-grid-gap) * 2);
}

.lp-pic {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

.lp-pic--square {
  aspect-ratio: 1 / 1;
}

.lp-pic--portrait {
  aspect-ratio: 4 / 5;
}

.lp-pic--wide {
  aspect-ratio: 16 / 9;
}

/* Hero */
.lp-hero {
  padding-block-start: calc(var(--layout-grid-gap) * 2);
}

.lp-hero .lp-copy {
  gap: calc(var(--layout-grid-gap) * 1.25);
}

/* Cards */
.lp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--layout-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-cards figure {
  margin: 0;
}

.lp-cards figcaption {
  margin-block-start: calc(var(--layout-grid-gap) / 2);
  font-size: var(--type-small);
  font-weight: 600;
}

/* Steps */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--layout-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.lp-steps li {
  padding-block-start: var(--layout-grid-gap);
  border-block-start: var(--detail-line-width) solid var(--muted);
  counter-increment: step;
}

.lp-steps li::before {
  content: counter(step);
  display: block;
  margin-block-end: calc(var(--layout-grid-gap) / 2);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: var(--type-h2);
  font-weight: var(--font-heading-weight);
  line-height: 1;
}

.lp-steps h3,
.lp-bullets h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 600;
}

.lp-steps p,
.lp-bullets p {
  margin: 0;
  font-size: var(--type-small);
}

.lp-steps p {
  max-width: 32ch;
}

/* Feature */
.lp-split--feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
}

.lp-phone {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 9 / 14;
  object-fit: contain;
}

.lp-split--feature .lp-title {
  margin-block-end: 0;
}

.lp-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--layout-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-bullets li {
  position: relative;
  padding-inline-start: calc(var(--layout-grid-gap) * 1.5);
}

.lp-bullets li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.3em;
  inset-inline-start: 0;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--accent);
  border: calc(var(--detail-line-width) * 2) solid var(--text);
  border-radius: 50%;
}

/* Callout */
.lp-callout {
  padding: calc(var(--layout-grid-gap) * 1.5);
  border: calc(var(--detail-line-width) * 2) solid var(--text);
  border-radius: var(--radius);
}

.lp-callout .lp-title {
  margin-block-end: var(--layout-grid-gap);
}

.lp-split--callout {
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
}

/* FAQ: native disclosure, so it works without script and by keyboard. */
.lp-faq {
  max-width: var(--layout-prose-measure);
}

.lp-faq details {
  border-block-start: calc(var(--detail-line-width) * 2) solid var(--text);
}

.lp-faq details:last-child {
  border-block-end: calc(var(--detail-line-width) * 2) solid var(--text);
}

.lp-faq summary {
  padding-block: calc(var(--layout-grid-gap) * 0.75);
  font-weight: 600;
  cursor: pointer;
}

.lp-faq details p {
  margin: 0;
  padding-block-end: calc(var(--layout-grid-gap) * 0.75);
  color: var(--muted);
}

/* Closing band */
.lp-cta {
  scroll-margin-block-start: var(--layout-header-height);
}

.lp-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-grid-gap);
  text-align: center;
}

.lp-cta .lp-title {
  margin: 0;
}

.lp-cta .lp-note {
  color: inherit;
}

@media (width <= 900px) {
  .lp-split,
  .lp-split--feature,
  .lp-split--callout {
    grid-template-columns: 1fr;
  }

}

@media (width <= 720px) {
  .lp-steps,
  .lp-cards {
    grid-template-columns: 1fr;
  }

  .lp-pic--portrait {
    aspect-ratio: 16 / 10;
  }

  .lp {
    --lp-space: calc(var(--layout-grid-gap) * 2);
  }

  .lp-band {
    padding-inline: var(--layout-gutter-mobile);
  }

  .lp-lead {
    font-size: var(--type-hero-intro-mobile);
  }
}