/* styles/sections/proof-strip.css
 * /return-on-tokens/: the ruled strip under the hero with the measured stat (+49 pts, from
 * the paper) beside its h2, line and paper link. One column below 900px; from 900px the stat
 * sits in a 3fr column behind a rule. Measures are the pre-swap pixel widths (h2 34ch at
 * 30px, body 60ch at 16px). */
@layer sections {
  .rot-proof {
    padding-block: var(--space-48);
    border-block: 1px solid var(--line-2);
  }

  .rot-proof-grid {
    display: grid;
    gap: var(--space-24);
    align-items: center;
  }

  .rot-proof-num {
    margin-bottom: var(--space-8);
    color: var(--fern);
    font-family: var(--font-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .rot-label {
    color: var(--ink-55);
  }

  .rot-proof h2 {
    max-width: 649px;
    margin-bottom: var(--space-8);
  }

  .rot-proof p {
    max-width: 570px;
    margin-bottom: var(--space-8);
    color: var(--ink-muted);
  }

  /* Standalone link: a 44px hit area around its text line, without moving it. */
  .rot-arrow-link {
    position: relative;
  }

  .rot-arrow-link::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 44px;
    transform: translateY(-50%);
  }

  @media (width >= 900px) {
    .rot-proof-grid {
      grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
      gap: var(--space-48);
    }

    .rot-proof-stat {
      padding-right: var(--space-32);
      border-right: 1px solid var(--rule-edge);
    }
  }
}