/* EdgeRift — page CSS for /beta-testing (owner, 2026-10-14). A white hero over the card-art strip and "What testers
   get" / "Sending feedback" in Careers' value columns (both from company.css, loaded first), the four join steps,
   the "Good to know" list (the Specs list) and the apply band.
   Tokens only (no colour values); uppercase only through the shared classes. */

@layer pages {
  /* Phones crop the strip to its middle: keep the iPad with its BETA tag and the magnifier in view. */
  @media (max-width: 767px) { .art-strip--beta img { object-position: 50% 50%; } }

  /* How to join: four numbered steps. Stacked, then two by two from 768, then one row from 1024 (text left). */
  .beta-steps {
    display: grid; gap: 40px; max-width: var(--w-content); margin: var(--gap-cta-media) auto 0;
    padding: 0; list-style: none; counter-reset: step;
  }
  @media (min-width: 768px) { .beta-steps { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } }
  @media (min-width: 1024px) {
    .beta-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: left; }
    .beta-steps li { padding-top: 24px; border-top: 1px solid var(--c-hairline); }
  }
  .beta-steps li { counter-increment: step; }
  .beta-steps li::before {
    content: counter(step); display: block; margin-bottom: 8px;
    font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--c-muted);
    font-variant-numeric: tabular-nums;
  }
  .beta-steps p { max-width: 24em; margin: 8px auto 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
  @media (min-width: 1024px) { .beta-steps p { margin-inline: 0; } }

  /* Under What testers get: the quality assurance note as one white card on the grey band (Support's cards: 24px
     corners, the tile shadow), as wide as the three columns. A red line icon (pm.icon, product.css's rules, scoped:
     this page doesn't load it), the line in two parts, and Careers. Stacked on phones; one row from 768. */
  .beta-qa {
    display: grid; gap: 16px; max-width: var(--w-content); margin: var(--gap-cta-media) auto 0;
    padding: 28px 26px; border-radius: 24px; background: var(--c-bg); box-shadow: var(--shadow-tile); text-align: left;
  }
  .beta-qa .icon {
    display: block; width: 40px; height: 40px; color: var(--c-red);
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .beta-qa__text p { margin-top: 8px; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); text-wrap: pretty; }
  .beta-qa .cta { justify-self: start; }
  @media (min-width: 768px) {
    .beta-qa { grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 32px 40px; }
    .beta-qa .icon { width: 44px; height: 44px; }
  }

  /* Good to know: the Specs list, each answer led by a short bold line */
  .beta-know dt { font-size: var(--t-body); font-weight: 500; color: var(--c-ink); }   /* the lead line, ink at every width */
  .beta-know dd { color: var(--c-muted); line-height: 1.5; }
  .beta-know a { color: var(--c-red-text); }
  .beta-know a:hover { text-decoration: underline; }
}