/* g1.css: extras for the A2 /developers/, A3 /sandboxes/ and A5 /ai/ landings.
   Everything is prefixed g1-. Tokens come from content.css; nothing here overrides it. */

/* Dark-panel text inside hero illustrations (inline SVG) */
.g1-nm { font: 500 12.5px var(--mono); fill: #e4e4ee; }
.g1-np { font: 500 12.5px var(--mono); fill: #a9a9ff; }
.g1-ok { font: 500 12.5px var(--mono); fill: #6fd39a; }
.g1-nd { font: 500 12px Inter, system-ui, sans-serif; fill: #a1a1b5; }
.g1-cap { font: 500 13px Inter, system-ui, sans-serif; fill: #c4c4d6; }
.g1-big { font: 720 32px Inter, system-ui, sans-serif; fill: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.g1-bar-t { font: 600 12px Inter, system-ui, sans-serif; fill: #18181b; }
.g1-chat-t { font: 600 12px Inter, system-ui, sans-serif; fill: #3a3ab8; }

/* A5: the ladder of Uno AI levels. A bar is hours of AI work; it either stops or keeps going. */
.g1-ladder { margin-top: 32px; border-top: 1px solid var(--ink); max-width: 980px; }
.g1-key { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.g1-rung { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.g1-who b { display: block; font-size: 19px; font-weight: 650; letter-spacing: -.012em; color: var(--ink); }
.g1-who span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g1-track { display: flex; align-items: stretch; min-height: 30px; }
.g1-bar { flex: none; width: var(--w); min-width: 52px; display: flex; align-items: center; padding: 0 10px; background: var(--violet); color: #fff; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 4px 0 0 4px; white-space: nowrap; }
.g1-bar.is-stop { border-radius: 4px; border-right: 4px solid var(--ink); }
.g1-note { flex: 1; min-width: 0; display: flex; align-items: center; padding-left: 12px; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.g1-more { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--violet-ink); background: linear-gradient(90deg, var(--vline), rgba(220, 220, 248, 0)); border-radius: 0 4px 4px 0; }
.g1-meta { grid-column: 2; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.g1-after { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); max-width: 70ch; line-height: 1.55; }
@media (max-width: 760px) {
  .g1-rung { grid-template-columns: 1fr; gap: 8px; }
  .g1-meta { grid-column: 1; }
}