.start-page {
  overflow: hidden;
}

.start-page__band {
  background: var(--color-blush-surface);
}

.start-page__hero {
  padding-block: 4.5rem;
}

.start-page__hero-grid,
.start-page__ritual-grid,
.start-page__progress-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 2rem;
}

.start-page__hero-copy,
.start-page__ritual-copy,
.start-page__progress-copy,
.start-page__steps-intro,
.start-page__habits-intro,
.start-page__next-intro,
.start-page__care-context,
.start-page__editorial-thesis {
  min-width: 0;
}

.start-page__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 38.125rem;
}

.start-page__hero-copy .eyebrow,
.start-page__hero-copy h1,
.start-page__hero-copy p {
  margin: 0;
}

.start-page__editorial-badge {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-feature-line);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-meta);
  font-weight: 700;
  line-height: var(--line-meta);
}

.start-page__hero-lead {
  max-width: 35rem;
}

.start-page__hero-button {
  min-height: 3rem;
}

.start-page__hero-media {
  width: 100%;
  min-width: 0;
  max-width: 28rem;
  justify-self: end;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-feature-line);
  border-radius: var(--radius-feature);
  background: var(--color-white);
  box-shadow: var(--shadow-gentle);
}

.start-page__hero-image-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  background: var(--color-blush-surface);
}

.start-page__hero-image-wrap img,
.start-page__wide-image-wrap img,
.start-page__square-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-page__hero-media figcaption {
  margin: 0.75rem 0 0;
}

.start-page__tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.start-page__tag-list li {
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  color: var(--color-muted-ink);
  font-size: var(--text-meta);
  line-height: var(--line-meta);
}

.start-page__steps-intro,
.start-page__habits-intro,
.start-page__next-intro {
  max-width: 37.5rem;
  margin-bottom: 2rem;
}

.start-page__steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.start-page__step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 100%;
  gap: 1rem;
}

.start-page__step-card > * {
  margin: 0;
}

.start-page__step-number {
  color: var(--color-tangerine-dark);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.start-page__step-number--paw::after {
  content: " ✦";
  color: var(--color-coral);
  font-size: 1rem;
  vertical-align: top;
}

.start-page__text-link {
  margin-top: auto;
  font-weight: 700;
}

.start-page__marked-note {
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-coral);
  color: var(--color-muted-ink);
  font-weight: 600;
}

.start-page__ritual-grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
}

.start-page__ritual-copy {
  max-width: 40.625rem;
}

.start-page__ritual-callout {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: var(--line-lead);
}

.start-page__ritual-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.start-page__ritual-list li {
  min-width: 0;
  padding-left: 0.25rem;
}

.start-page__ritual-media,
.start-page__progress-media {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.start-page__wide-image-wrap {
  aspect-ratio: 3 / 2;
}

.start-page__ritual-media figcaption,
.start-page__progress-media figcaption {
  margin-top: 0.5rem;
}

.start-page__care-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  padding: 2.5rem;
  border: 1px solid var(--color-feature-line);
  border-radius: 1.25rem;
  background: var(--color-white);
  box-shadow: var(--shadow-gentle);
}

.start-page__care-context {
  max-width: 26.25rem;
  padding-right: 2.5rem;
  border-right: 1px solid var(--color-line);
}

.start-page__checklist {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-page__checklist li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

.start-page__checklist li > div,
.start-page__checklist h3,
.start-page__checklist p {
  min-width: 0;
}

.start-page__checklist h3 {
  margin-bottom: 0.5rem;
}

.start-page__checklist p {
  max-width: 38.75rem;
  margin-bottom: 0;
}

.start-page__check-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #ffd9bc;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 800;
}

.start-page__editorial-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  padding: 2.5rem;
  border: 1px solid var(--color-feature-line);
  border-radius: var(--radius-feature);
  background: var(--color-white);
  box-shadow: var(--shadow-gentle);
}

.start-page__editorial-thesis {
  max-width: 27.5rem;
}

.start-page__thesis-copy {
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
}

.start-page__evidence {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.start-page__evidence article {
  min-width: 0;
  padding: 1.25rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-white);
}

.start-page__evidence h3 {
  margin-bottom: 0.5rem;
}

.start-page__evidence p {
  max-width: 35rem;
  margin-bottom: 0;
}

.start-page__habits-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

.start-page__habit-card {
  grid-column: span 3;
  min-width: 0;
}

.start-page__habit-card--primary {
  grid-column: span 6;
}

.start-page__habit-card p {
  margin-bottom: 0;
}

.start-page__habit-card--primary p {
  max-width: 32.5rem;
}

.start-page__progress-grid {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 2.5rem;
  align-items: start;
}

.start-page__progress-media {
  max-width: 23.75rem;
}

.start-page__square-image-wrap {
  aspect-ratio: 1 / 1;
}

.start-page__progress-copy {
  max-width: 38.75rem;
}

.start-page__progress-quote {
  max-width: 32.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-left-color: var(--color-coral);
  background: var(--color-white);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.start-page__next-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.start-page__next-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 100%;
  gap: 1rem;
}

.start-page__next-card > * {
  margin: 0;
}

.start-page__next-card p {
  max-width: 26.25rem;
}

.start-page__next-card a {
  min-height: 2.75rem;
  margin-top: auto;
  padding-top: 0.375rem;
  font-weight: 700;
}

.start-page__download-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 48.75rem;
  margin-inline: auto;
  padding: 3rem;
  text-align: center;
}

.start-page__download-panel > * {
  margin: 0;
}

.start-page__download-panel .eyebrow {
  margin-bottom: 0.75rem;
}

.start-page__download-panel h2 {
  max-width: 37.5rem;
  margin-bottom: 1rem;
}

.start-page__download-panel > p:not(.start-page__download-note) {
  max-width: 37.5rem;
  margin-bottom: 1.5rem;
}

.start-page__download-button {
  min-height: 3rem;
}

.start-page__download-note {
  margin-top: 0.75rem;
}

@media (max-width: 56.1875rem) {
  .start-page__hero-grid,
  .start-page__ritual-grid,
  .start-page__progress-grid,
  .start-page__care-panel,
  .start-page__editorial-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .start-page__hero-copy,
  .start-page__ritual-copy,
  .start-page__progress-copy,
  .start-page__care-context,
  .start-page__editorial-thesis {
    max-width: none;
  }

  .start-page__hero-media {
    justify-self: start;
    max-width: 28.75rem;
  }

  .start-page__ritual-media {
    max-width: 43.75rem;
  }

  .start-page__care-context {
    padding-right: 0;
    padding-bottom: 1.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .start-page__editorial-panel {
    gap: 2rem;
  }

  .start-page__habits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-page__habit-card,
  .start-page__habit-card--primary {
    grid-column: span 1;
  }

  .start-page__habit-card--primary {
    grid-column: 1 / -1;
  }

  .start-page__progress-media {
    order: 2;
    max-width: 26.25rem;
  }

  .start-page__progress-copy {
    order: 1;
  }

  .start-page__next-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 43.8125rem) and (max-width: 56.1875rem) {
  .start-page__steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-page__step-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 43.75rem) {
  .start-page__hero,
  .start-page__ritual,
  .start-page__editorial,
  .start-page__download {
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
  }

  .start-page__hero {
    padding-block: 3rem;
  }

  .start-page__hero-copy {
    gap: 1.25rem;
  }

  .start-page__hero-button,
  .start-page__download-button {
    width: 100%;
  }

  .start-page__hero-media {
    max-width: 28.75rem;
  }

  .start-page__steps-grid,
  .start-page__habits-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .start-page__step-card:nth-child(3),
  .start-page__habit-card,
  .start-page__habit-card--primary {
    grid-column: span 1;
  }

  .start-page__care-panel,
  .start-page__editorial-panel {
    gap: 1.5rem;
    padding: 1.125rem;
    border-radius: 1.25rem;
  }

  .start-page__checklist {
    gap: 1.25rem;
  }

  .start-page__checklist li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .start-page__check-number {
    width: 2.25rem;
    height: 2.25rem;
  }

  .start-page__thesis-copy {
    font-size: 1.375rem;
  }

  .start-page__progress-quote {
    max-width: none;
    padding: 1rem 0 1rem 1rem;
    font-size: 1.125rem;
  }

  .start-page__download-panel {
    padding: 1.5rem;
    border-radius: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .start-page *,
  .start-page *::before,
  .start-page *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}