/* What every Reactor page wears: /reactor and /reactor/mission link it from their <page-head>, and
   each keeps only its own rules beside it, as docs pages do with docs.css. Its accent is the site's
   violet, --g-action*, as on every Gateway page; the buttons are chrome.css's. */

/* The page you are on, in Reactor's nav. */
.nav-link[aria-current] { color: var(--g-text); }

.eyebrow {
  display: flex; align-items: center; gap: 8px; font-family: var(--g-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-muted);
}
.eyebrow.rx { color: var(--g-action-text); }
.h1 { margin: 18px 0 0; font-size: 56px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; color: var(--g-text); text-wrap: balance; }
.h1 em { font-style: normal; color: var(--g-action-text); }
.h2 { margin: 14px 0 0; font-size: 36px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; color: var(--g-text); text-wrap: balance; }
.lede { margin: 20px 0 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--g-muted); }
.row { display: flex; gap: 12px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.fine { font-size: 13px; color: var(--g-dim); }
.block { margin-top: 110px; }

.rhero { padding: 86px 0 0; position: relative; }
.rhero::before {
  content: ""; position: absolute; inset: 0 0 -200px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 50% at 78% 10%, var(--g-action-dim), transparent 70%),
    radial-gradient(50% 40% at 12% 0%, var(--g-action-dim), transparent 70%);
}

/* The mission, and how far along it Reactor is. */
.mission { margin-top: 110px; padding: 64px 56px; border-radius: 22px; border: 1px solid var(--g-action-line); background: radial-gradient(80% 120% at 100% 0%, var(--g-action-dim), transparent 60%), var(--g-panel); }
.mission blockquote { margin: 18px 0 0; font-size: 30px; line-height: 1.3; letter-spacing: -0.02em; color: var(--g-text); max-width: 820px; text-wrap: balance; }
.ladder { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--g-line-2); }
.ladder > div { padding: 18px 18px 0 0; position: relative; }
.ladder > div::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--g-dim); }
.ladder > div.now::before { background: var(--g-action); box-shadow: 0 0 12px var(--g-action); }
.ladder > div.next::before { background: transparent; border: 1px solid var(--g-action-text); }
.ladder small { font: 500 10.5px var(--g-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-dim); }
.ladder .now small { color: var(--g-action-text); }
.ladder h4 { margin: 8px 0 0; color: var(--g-text); font-size: 15px; }
.ladder p { margin: 6px 0 0; color: var(--g-muted); font-size: 13.5px; line-height: 1.55; }

.cta { margin-top: 110px; text-align: center; padding: 60px 20px; border-top: 1px solid var(--g-line); }
.cta .row { justify-content: center; }
.cta .lede { margin-inline: auto; }

/* A section reached from a link lands 48px below the header, on top of the 74px the site keeps clear. */
.block, .mission { scroll-margin-top: 48px; }

@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr 1fr; }
  .h1 { font-size: 40px; }
}

/* A phone. The mockup's sizes are a desktop column's: at 390px they set a heading 14 characters to the line. */
@media (max-width: 640px) {
  .rhero { padding-top: 56px; }
  .h1 { font-size: 34px; }
  .h2 { font-size: 28px; }
  .mission { padding: 40px 24px; }
  .mission blockquote { font-size: 24px; }
}