/* styles/sections/context-gaps.css
 * /return-on-tokens/ "Your codebase is not your product context": the h2 and lede beside a
 * ruled list of what an agent cannot read from code, each with a mono example chip. One
 * column below 900px; 5fr and 7fr from 900px. The section padding and h2 measure come from
 * band-rhythm.css. */
@layer sections {
  .rot-why-grid {
    display: grid;
    gap: var(--space-48);
    align-items: start;
  }

  .rot-why-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule-edge);
    list-style: none;
  }

  .rot-why-list li {
    display: grid;
    gap: 6px;
    padding-block: var(--space-24);
    border-bottom: 1px solid var(--rule-edge);
  }

  .rot-why-item {
    font-weight: 600;
    line-height: 1.375;
  }

  .rot-why-eg {
    justify-self: start;
    padding: 2px var(--space-8);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink-2);
  }

  @media (width >= 900px) {
    .rot-why-grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-96);
    }
  }
}