/* styles/sections/statement-hero.css
 * A white hero with no actions: the display headline, a deck, then the register (register.css).
 * About frames: E1ppOz (1440), VxCAm (390), A0ireP (1920). The headline is the display-xl role on
 * D and display-lg on M and W (both 120 from D), on a whole-pixel 0.95 line (49, 114). Between
 * frame widths it scales with the content width (52 at the 342 column, 120 at the 1280 one), so
 * each line holds the frame's break: four lines on M, two from D. The deck is 19/28 on M, the
 * body-lg role at 20/30 on D (640 measure), 26/38 on W (820 measure).
 * The hero ends on the links row, so it is lifted over the next section (z-index 1, under the
 * header's 100): the links' hover and pressed chips, focus ring and 44px hit area hang past its
 * bottom edge uncut. */
@layer sections {
  .statement-hero {
    position: relative;
    z-index: 1;
    padding-top: var(--section-md);
    background: var(--white);
    color: var(--ink);
  }

  .statement-hero__inner {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .statement-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: min(var(--t-display-lg-size), 15.21cqi);
    font-weight: 600;
    line-height: round(nearest, 0.95em, 1px);
    letter-spacing: var(--t-display-lg-ls);
  }

  .statement-hero__deck {
    margin: 0;
    font-size: 19px;
    line-height: 28px;
  }

  @media (min-width: 900px) {
    .statement-hero__inner {
      gap: var(--space-32);
    }

    .statement-hero__title {
      font-size: min(var(--t-display-xl-size), 9.375cqi);
      letter-spacing: var(--t-display-xl-ls);
    }

    .statement-hero__deck {
      max-width: 640px;
      font-size: var(--t-body-lg-size);
      line-height: 30px;
    }
  }

  @media (min-width: 1680px) {
    .statement-hero__inner {
      gap: var(--space-56);
    }

    .statement-hero__title {
      font-size: min(var(--t-display-lg-size), 9.375cqi);
      letter-spacing: var(--t-display-lg-ls);
    }

    .statement-hero__deck {
      max-width: 820px;
      font-size: 26px;
      line-height: 38px;
    }
  }
}