/* Technology page (site-v4), the owner-approved redesign of 2026-10-22 (docs/axiom/pages/proposals/technology.md).
   Below the shared hero (owner, 2026-10-24): Home's former "Built on real infrastructure." section (the Yalla2X Box
   film beside the four layers), the "what is proven" groups with their marks (one per environment, sealed run and
   feature area), and the status ledger with its legend. Every type size here is one of the site's --t-* tokens. */

/* the unit beside a figure ("GB", "Level"): the H5 step under the H1 figure */
.tech-unit { font-size: var(--t-h5); letter-spacing: -0.02em; margin-left: 0.12em; }
.tech-unit--pre { margin: 0 0.18em 0 0; }

/* "ARC-AGI-3" and "machine-checked" never break at their hyphens (brand pass, 2026-10-22). In the ledger chip the
   text sits in one inner span, so the chip (an inline flex box) keeps one flex item beside its mark. */
.tech-nobr { white-space: nowrap; }

/* standalone product links (after the proven footnotes, in the status head): the name as a 44px-tall target */
.tech-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 16px; }
.tech-more .link { min-height: 44px; color: var(--ink); }   /* in the status head it would inherit the side column's grey */
.tech-more > span { font-size: var(--t-small); color: var(--ink-2); }

/* what is proven: three ruled groups. From 1440px the label sits in a two-column margin and the cards run four across
   beside it; below that the label stands over the cards (four across, then two, then one). */
.tech-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; align-items: start; padding-block: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.tech-group:last-child { border-bottom: 1px solid var(--line); }
.tech-group__label { grid-column: 1 / 3; margin: 0; padding-top: 0.3em; font-size: var(--t-h5); line-height: 1.2; letter-spacing: -0.02em; }
.tech-group > .tech-proof, .tech-group__text { grid-column: 3 / 13; }
.tech-group__text { padding-top: 0.25em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 65ch; }
.tech-proof { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tech-proof dd { margin: 0; }
.tech-proof__wide { grid-column: span 2; }
/* the sealed-runs card runs the full row: label and figure left, the tick field right */
.tech-proof__run { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 48px); row-gap: 24px; align-items: end; min-height: 0; }
.tech-proof__run > dt { grid-column: 1; grid-row: 1; align-self: start; }
.tech-proof__run > .tech-ticks { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.tech-proof__run > dd:last-child { grid-column: 1; grid-row: 2; }
.tech-arc { display: flex; flex-direction: column; gap: 10px; }
.tech-arc__bars { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 4px; align-items: end; height: 72px; }
.tech-arc__bars i { display: block; height: 22%; border-radius: 2px; background: var(--line-2); }
.tech-arc__bars i.is-l5 { height: 58%; background: var(--ink-3); }
.tech-arc__bars i.is-l8 { height: 100%; background: var(--gold); }
.tech-arc__key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--t-cap); color: var(--ink-2); }
.tech-key::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--line-2); }
.tech-key--l8::before { background: var(--gold); }
.tech-key--l5::before { background: var(--ink-3); }
.tech-ticks { display: grid; grid-template-columns: repeat(41, minmax(0, 1fr)); gap: 3px 2px; }
.tech-ticks i { display: block; aspect-ratio: 5 / 7; border-radius: 1px; background: var(--gold); opacity: 0.85; }   /* one tick shape at every width */
.tech-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)); gap: 3px; }
.tech-units i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--ink); }
.tech-footnote--tight { margin-top: 10px; }

/* status: the ledger's chips one step up from the caption size; the legend under it on the ledger's own three columns
   (30 / 46 / 24, text inset 22px like the cells), one rule across like a last row */
.ledger .chip { font-size: var(--t-small); }
.tech-legend { display: grid; grid-template-columns: 30fr 46fr 24fr; gap: 24px 0; margin: clamp(32px, 4vw, 56px) 0 0; }
.tech-legend > div { padding-top: 16px; border-top: 1px solid var(--line); }
.tech-legend > div + div { padding-left: 22px; }
.tech-legend dt { font-size: var(--t-body); font-weight: 600; }
.tech-legend dd { margin: 8px 0 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); max-width: 65ch; }

@media (min-width: 901px) and (max-width: 1199px) {
  .ledger td:last-child { width: 32%; }   /* room for the 14px chips as two-line stamps (the shared 24% gave three lines) */
}

@media (max-width: 1439px) {
  .tech-group { grid-template-columns: minmax(0, 1fr); }
  .tech-group__label, .tech-group > .tech-proof, .tech-group__text { grid-column: auto; }
  .tech-group__text { padding-top: 0; }
}
@media (max-width: 1199px) {
  .tech-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-proof__wide { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  /* one column: a single rule over the legend, plain terms under it (ruled items would read as more ledger rows) */
  .tech-legend { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .tech-legend > div, .tech-legend > div + div { padding: 0; border-top: 0; }
}
@media (max-width: 767px) {
  .tech-proof__wide, .tech-proof__run { grid-column: auto; }
  .tech-proof { grid-template-columns: 1fr; }
  .tech-proof__run { display: flex; align-items: stretch; }   /* the stat's own column layout again */
  .tech-proof__run > .tech-ticks { align-self: auto; }        /* full width, so the 41-column tick field has room */
  .tech-ticks { gap: 2px 1px; }
}

/* RSIS (owner, 2026-10-26: "lot of spaces ... people have to scroll it so long"): a tighter vertical rhythm than the page's
   --sec. It sat right under the systems section with no top padding; that section is gone (owner, 2026-10-27: "remove the
   The superintelligence in your pocket"), so the card now opens the page under the hero with the same padding above and below. */
.section.tech-rsis { --tech-pad: clamp(40px, 4.5vw, 72px); padding-block: var(--tech-pad); }

/* RSIS (owner, 2026-10-26: the same words and picture "in a different way", no orange, the brand yellow): one compact card. The
   words sit on Midnight, where the brand gold (--gold, 11.8:1) can be text: the RSIS pill filled with it, the heading's second
   line in it. The owner's picture keeps its own light ground beside them; multiply turns the picture's white into the panel's
   tone, so the loop sits on the card with no box and nothing of it is cropped. */
.tech-rsis__card {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-radius: var(--r-xl); overflow: hidden; background: var(--dark); color: var(--on-dark);
}
.tech-rsis__text { align-self: center; padding: clamp(24px, 4vw, 64px); }
.tech-rsis__text > * + * { margin-top: 24px; }
.tech-rsis__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tech-rsis__pill {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-sm); background: var(--gold); color: var(--dark);
  font-size: var(--t-body); font-weight: 700; letter-spacing: 0.16em;
}
.tech-rsis__name { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-2); }
.tech-rsis__nobr { white-space: nowrap; }   /* "Self-Improvement" never splits at its hyphen on a phone */
.tech-rsis__line { display: block; }
.tech-rsis__line--gold { color: var(--gold); }
.tech-rsis__text .lead { max-width: 56ch; color: var(--on-dark-2); }
/* the picture's top and bottom white is trimmed from the layout only (negative margins, in % of its width), never its sides,
   so Evaluate, Refine, Improve, Repeat and the loop's ends always show */
/* owner, 2026-10-26: the card fully black, the owner's dark picture on the same Midnight (no light ground, no melt) */
.tech-rsis__media { display: flex; align-items: center; overflow: hidden; background: var(--dark); }
.tech-rsis__media img { flex: none; width: 100%; height: auto; margin-block: -4% -6%; }
@media (max-width: 1023px) {
  .tech-rsis__card { grid-template-columns: minmax(0, 1fr); }
  .tech-rsis__media { padding-inline: max(0px, calc((100% - 560px) / 2)); }   /* the picture at most 560px wide, centred */
}
@media (max-width: 767px) {
  /* a phone: the loop as large as the width allows; only white is trimmed (6% a side, the loop's ends keep a margin) */
  .tech-rsis__media img { width: 112%; max-width: none; margin: -9% -6% -13%; }
}