/* styles/sections/pilot-split.css
 * Pilot band (Product Leadership yyrQL, Gc4x7, l6Gvc5): white under a hairline, dither edge at
 * the foot. "Start with one team" (section intro, numbered steps, the pilot arrow link) beside
 * "Runs on your terms" (title, body, the "Enterprise plan options" label, the capability list
 * and the Trust Center link). D: 680 + 80 + 520; W: 1080 + 80 + 520, the terms column 24 lower.
 * The capability list is a dl of div > dt + dd under a 1.5px ink rule: from D a row is the
 * capability (200) and its detail 24 apart, centred; on M the detail sits 24 under it. */
@layer sections {
  .pilot-band {
    padding-block: 88px;
    box-shadow: inset 0 1px var(--line);
  }

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

  .pilot-band__start,
  .pilot-band__terms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .pilot-band__start {
    gap: 28px;
  }

  .pilot-band__start > .numbered-list,
  .pilot-band__terms > .term-list {
    align-self: stretch;
  }

  .pilot-band__intro {
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-gap: 28px;
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: round(nearest, 1.5em, 1px);
  }

  .pilot-band__terms {
    gap: var(--space-20);
  }

  .pilot-band__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--ink);
  }

  .pilot-band__body {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--ink-muted);
  }

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

  .term-list {
    margin: 0;
    box-shadow: inset 0 1.5px var(--ink);
  }

  .term-list > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding-block: 16px;
    box-shadow: inset 0 -1px var(--line);
  }

  .term-list dt {
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    color: var(--ink);
  }

  .term-list dd {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
  }

  /* The Trust link sits 28 below the list (gap 20 + its 8px pad). The 8 is on the list, so
     the link's own margin stays free for the shared hover chip (-6px -10px). */
  .pilot-band__terms > .term-list {
    margin-bottom: 8px;
  }

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

    /* Start keeps at least 440px; below about 1200 Runs on your terms wraps under it */
    .pilot-band__inner {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: var(--space-48) var(--space-80);
    }

    .pilot-band__start {
      flex: 1 1 440px;
      min-width: 0;
    }

    .pilot-band__intro {
      --intro-lede-size: 18px;
    }

    .pilot-band__terms {
      flex: 0 0 520px;
    }

    .pilot-band__title {
      font-size: 20px;
      line-height: 24px;
    }

    .term-list > div {
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr);
      align-items: center;
      gap: var(--space-24);
      min-height: 52px;
    }
  }

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

    .pilot-band__terms {
      padding-top: 24px;
    }
  }

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