@layer components {

  /* Hero: the headline, alone, with room around it. The action lives in the
     sticky navbar, so the first viewport opens on a sentence rather than a
     button. The space below is what makes it read as an opening instead of
     just another section title. */
  .homeHero {
    margin-block: var(--space-xl) 3.5rem;
    text-align: center;
  }

  /* hyphens: manual overrides the global heading default — auto-hyphenation
     is fine for a trip name in a table and wrong for the one sentence that sells the page.
     `balance` distributes the wrapped lines instead of leaving a short tail. */
  .homeHero h1 {
    margin-block: 0;
    hyphens: manual;
    text-wrap: balance;
  }

  /* Section rhythm: a clear breath above each flanked heading, a tighter gap
     below it, so every heading binds to the text it introduces rather than
     floating equidistant between two sections. */
  .homePage > section {
    margin-block-start: 3.5rem;
  }

  .homePage > section > h2 {
    margin-block: 0 1.25rem;
  }

  /* Founders portrait. Held well under the column width — this is a person,
     not a landscape, and at full column width it would dominate the section
     it is meant to introduce. */
  .founders {
    margin: var(--space-lg) 0;
    text-align: center;
  }

  .founders__photo {
    width: min(100%, 20rem);
    height: auto;
    border-radius: var(--radius-md);
  }

  .founders figcaption {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
  }

  .claim {
    font-weight: 400;
    margin-block-end: var(--space-sm);
    text-wrap: pretty;
  }

  .claim + p {
    margin-block-start: 0;
  }

  .pricing__fee {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-block-end: var(--space-md);
  }

  .pricing__examples {
    margin-block: var(--space-md);
    padding-inline-start: 1.5em;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .pricing__examples > li::marker {
    color: var(--color-text-muted);
  }

  /* height: auto is required, not decorative: the intrinsic width/height
     attributes on these images (there to reserve space and stop layout shift)
     otherwise pin the rendered height while max-width shrinks the width,
     squashing every photo. */
  ul.homeImages img {
    max-width: min(100%, var(--max-width));
    height: auto;
  }

  /* Block margin only: a horizontal margin here inset the photos inside an
     already-constrained column, so nothing on the page shared a left edge. */
  ul.homeImages {
    list-style: none;
    max-width: min(100%, var(--max-width));
    margin-block: var(--space-lg) 0;
    margin-inline: 0;
    padding: 0;
    border-radius: var(--radius-md);
    display: flex;
    gap: 4vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Without this, a two-finger swipe past the last photo chains to the
       browser's back gesture and drops the visitor off the page. */
    overscroll-behavior-x: contain;
    /* The scrollbar is one of the surfaces we did not draw but still ship.
       Thin, in the system's hairline grey, on the paper it sits on. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-surface);
  }

  /* Arrow-key scrolling of the focused list glides between slides instead of
     jumping. Motion is opt-in, never the default. */
  @media (prefers-reduced-motion: no-preference) {
    ul.homeImages {
      scroll-behavior: smooth;
    }
  }

  /* Chrome's UA default is `figure { margin: 1em 40px }`. Resetting the <ul>
     and its <li> does not reach the <figure> inside, so the photos were inset
     40px while every paragraph spanned the full column — the exact
     misalignment the margin-inline reset above exists to prevent. */
  ul.homeImages figure {
    margin: 0;
  }

  ul.homeImages > li {
    list-style-type: none;
    flex: 0 0 100%;
    padding: 0;
    max-width: min(100%, var(--max-width));
    scroll-snap-align: center;
    text-align: center;
  }

  /* The ◄ ► glyphs are real markup (aria-hidden) rather than pseudo-elements,
     so screen readers no longer announce "black left-pointing pointer" around
     every caption. They stay decorative — the carousel is scrolled, not
     clicked. Each slide states its own position so the six-photo count is
     visible without any JS. */
  .carousel__arrow {
    margin: 0 var(--space-md);
    color: var(--color-caption);
  }

  .carousel__position {
    display: block;
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }

  ul.homeImages:focus-visible {
    outline: 2px solid var(--color-theme);
    outline-offset: 4px;
  }

  /* "How we help you" steps: numbered ordered list where each step's
     label sits on its own line above the explanation, so the four-step
     shape stays scannable instead of collapsing into a wall of text. */
  ol.howList {
    padding-inline-start: 1.5em;
    margin: var(--space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  ol.howList > li {
    padding-inline-start: var(--space-md);
  }

  ol.howList > li::marker {
    color: var(--color-text-muted);
    font-weight: 400;
  }

  .howList__label {
    display: block;
    font-weight: 400;
    margin-bottom: var(--space-sm);
  }

  .howList__detail {
    display: block;
    font-weight: 300;
    line-height: 1.5;
  }

  /* Testimonials. Photo beside quote on desktop, stacked on a phone. The
     photo is held to a fixed 3:4 ratio so seven different cameras, framings
     and lighting conditions read as one set. Deliberately not a card and
     deliberately not a circular avatar: a group of four in falling snow
     survives at 200px and disappears at 56px. */
  .review {
    margin-block: var(--space-xl);
    margin-inline: 0;
    display: flex;
    gap: var(--space-lg);
    /* Centered, not top-aligned: the 3:4 photo is taller than every quote, so
       flex-start leaves a dead gap under each attribution. */
    align-items: center;
  }

  .review__photo {
    flex: 0 0 12rem;
    width: 12rem;
    height: auto;
    border-radius: var(--radius-md);
  }

  .review blockquote {
    margin: 0;
  }

  .review blockquote p {
    margin: 0;
  }

  .review__author {
    margin-top: var(--space-md);
    color: var(--color-text-muted);
  }

  .review__author::before {
    content: "— ";
  }

  @media (max-width: 34rem) {
    .review {
      flex-direction: column;
      align-items: stretch;
    }

    /* Stays small when stacked. At full column width a 3:4 snapshot becomes
       ~470px tall, which both outshouts the quote it is supporting and adds
       roughly 900px of scroll across three testimonials. */
    .review__photo {
      flex-basis: auto;
      width: 10rem;
      /* Centered on its own, rather than via align-items on .review: that
         would shrink the quote to its content width too. */
      align-self: center;
    }
  }

  /* Closing CTA image: a single framed photo, not a one-item carousel. */
  .homeImage--single {
    margin: var(--space-lg) 0 0;
    text-align: center;
  }

  .homeImage--single .homeImage {
    max-width: min(100%, var(--max-width));
    height: auto;
  }

  /* CTA button: the page's "true primary" per DESIGN.md.
     Inverts the default link styling to brand color + paper text.
     --color-theme tracks the navbar today and swaps to indigo deep
     once the design_plan.md token migration lands. */
  .cta-container {
    margin: var(--space-lg) 0;
    text-align: center;
  }

  a.cta-button,
  a.cta-button:visited {
    display: inline-block;
    padding: 0.75em 1.5em;
    background: var(--color-theme);
    color: var(--color-text-light);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 400;
    line-height: 1.2;
    min-height: 44px;
    box-sizing: border-box;
    transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  a.cta-button:hover {
    background: var(--color-theme-hover);
    text-decoration: none;
  }

  a.cta-button:focus-visible {
    outline: 2px solid var(--color-theme);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    a.cta-button {
      transition: none;
    }
  }
}