/* styles/sections/case-split.css
 * Prove It band (Product Leadership i1Ek9, EqpxB, ZYULe): white under a hairline; the lead
 * (section intro: heading, deck 480 wide from D) beside "Bring three numbers", its numbered list
 * (numbered-list.css) and the primary button. D: lead 640 + 80 + inputs 560; W: 1040 + 80 + 560.
 * The lead gives way first between 900 and 1440. M stacks, 48 apart. */
@layer sections {
  .prove-band {
    padding-block: 72px 88px;
    box-shadow: inset 0 1px var(--line);
  }

  .prove-band__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
  }

  .prove-band__lead {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-gap: var(--space-20);
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: round(nearest, 1.5em, 1px);
  }

  .prove-band__inputs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    padding-top: 12px;
  }

  .prove-band__inputs > .numbered-list {
    align-self: stretch;
  }

  .prove-band__label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--ink);
  }

  @media (min-width: 900px) {
    .prove-band {
      padding-block: 120px 144px;
    }

    /* The lead keeps at least 400px; below about 1200 the inputs wrap under it */
    .prove-band__inner {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: var(--space-48) var(--space-80);
    }

    .prove-band__lead {
      --intro-lede-size: 18px;
      flex: 1 1 400px;
      min-width: 0;
    }

    .prove-band__lead .section-intro__lede {
      max-width: 480px;
    }

    .prove-band__inputs {
      flex: 0 0 560px;
    }
  }

  @media (min-width: 1680px) {
    .prove-band {
      padding-block: 144px 173px;
    }

  }

  /* Between 900 and the D frame the heading scales with the viewport (56 at 1440) */
  @media (min-width: 900px) {
    .prove-band__lead {
      --intro-heading-size: min(var(--t-h1-size), 3.9vw);
    }
  }
}