/* styles/sections/foundation-band.css
 * /strategy/ "Introducing Our One-Day Product Graph Foundation": a dark ink band, the h2
 * beside the lead, intro and bulleted questions from 900px; stacked below. */
@layer sections {
  .product-foundation {
    --focus-ring: var(--mist);

    padding-block: var(--space-64);
    background: var(--ink);
    color: var(--white);
  }

  .foundation-content {
    display: grid;
    gap: var(--space-48);
    align-items: center;
    text-align: center;
  }

  .foundation-details {
    text-align: left;
  }

  .foundation-details .section-subtitle {
    margin-bottom: var(--space-32);
    color: var(--white-80);
  }

  .framework-intro {
    margin: var(--space-24) 0 var(--space-48);
    font-weight: 500;
  }

  /* Before the swap the question list was 20px at every width: the body-lg
     role's 900px step. */
  .foundation-questions {
    --t-body-lg-size: 20px;

    margin: 0;
    padding-left: var(--space-24);
    list-style: disc;
  }

  .foundation-questions li {
    margin-bottom: var(--space-16);
  }

  @media (width >= 900px) {
    .foundation-content {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-96);
      text-align: left;
    }
  }
}