/* ═══════════════════════════════════════════════════════════════════════════
   Rapidity corporate site — additions on top of the shared site.css.

   site.css is a copy of the MITRA site's component layer and is kept
   byte-identical so fixes propagate by re-copying it. Anything this site needs
   that MITRA does not goes here, so the two never diverge silently.

   Same rule as site.css: semantic tokens only, no raw brand hex.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rapidity mark ────────────────────────────────────────────────────────
   Three strokes of decreasing length with an accent terminal: systems being
   brought into line. Carried over from the Squarespace draft, retokenized.
   Deliberately distinct from MITRA's ring-and-monogram seal, because these
   are two brands, not one brand in two skins. */
.rb-mark { width: 28px; height: 28px; flex: none; }
.rb-mark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rb-mark circle { fill: var(--color-accent); stroke: none; }

/* ── Static index rows ────────────────────────────────────────────────────
   .pillar-index assumes every row is a link. The capability index and the
   practice list are not navigable (there is nowhere to go yet), so they use
   a <div> row with the same grid. Keeping the visual language identical
   matters more than the element. */
.pillar-index .index-row {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4) var(--space-1);
}
.pillar-index .index-row .index-desc { grid-column: 2; }

/* Tech-stack footer under a practice row. The Squarespace draft set these in
   IBM Plex Mono; reproduced here with Inter plus tabular figures and wide
   tracking, to hold the two-typeface budget rather than ship a third family
   for one line of micro-copy. */
.stack-line {
  grid-column: 2;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* ── Capability index ─────────────────────────────────────────────────────
   Ten items, denser than the practice rows: this is a scan-and-recognize
   list, not a read-every-word list. */
.capability-index { border-top: 1px solid var(--color-border); list-style: none; }
.capability-index li {
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-1);
}
.capability-index .cap-num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.capability-index .cap-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

/* ── Domain pills ─────────────────────────────────────────────────────────
   The MITRA life domains, shown on the corporate site as a set rather than
   as products. Deliberately not links: the corporate site does not own these
   pages, and a pill that looks clickable but is not is worse than a plain one. */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; }
.pill {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space--1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ── Featured product band ────────────────────────────────────────────────
   The MITRA hand-off on the corporate homepage. One high-emphasis moment per
   page, and on the homepage this is it. */
.featured {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-4), 4vw, var(--space-8));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(var(--space-4), 4vw, var(--space-8));
  align-items: center;
  background: var(--color-surface-raised);
}
.featured-mark {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.featured-mark svg { width: 44px; height: 44px; flex: none; }
.featured-tagline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-top: var(--space-2);
}

/* ── Horizon rail ─────────────────────────────────────────────────────────
   Now / near term / emerging. The timeframe is the point, so it leads. */
.horizon { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--color-border); }
.horizon > li {
  list-style: none;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.horizon > li:last-child { border-right: 0; }
.horizon .when {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-1);
}
.horizon .what { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); }
.horizon p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space--1); }

/* ── Footer entity line ───────────────────────────────────────────────────
   The legal entity is deliberately quiet: it belongs here, in About, and in
   the legal pages, and nowhere else. */
.entity-line {
  font-size: var(--text-sm);
  color: var(--color-text-muted-on-deep);
  margin-top: var(--space-1);
}

/* ── Policy table of contents ─────────────────────────────────────────────
   The privacy policy runs to 31 sections, which is long enough that a reader
   arriving with one question (deletion, AI, California) should not have to
   scroll the whole document to find it. Multi-column only where there is room:
   the single-column fallback on narrow viewports is the correct mobile shape,
   not a degraded one. Numbering comes from the <ol>, so it stays correct if a
   section is inserted, and it matches the "N." prefixes on the headings. */
.policy-toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-6);
}
.policy-toc h2 { margin-top: 0; font-size: var(--text-lg); }
.policy-toc ol {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  max-width: none;
}
.policy-toc li + li { margin-top: var(--space--1); }
@media (min-width: 720px) {
  .policy-toc ol { columns: 2; column-gap: var(--space-5); }
  .policy-toc li { break-inside: avoid; }
}

/* ── Policy version and effective date ────────────────────────────────────
   Replaces the draft banner on a document that is in force. Deliberately
   quiet where the banner was loud: a live policy states its version, it does
   not warn you about itself. Both facts sit together because a version
   identifier without an effective date is what the consent records key on,
   and a reader needs the date. */
.policy-meta {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0;
}
.policy-meta strong { color: var(--color-primary); font-weight: 600; }

/* ── Scrollable policy body ───────────────────────────────────────────────
   The policy text sits in its own scroll region, with the table of contents
   left outside it so navigation stays put while the text moves. Anchor links
   from the ToC still work: the browser scrolls the nearest scrollable
   ancestor, which is this box.

   tabindex="0" on the container is not decoration. A scrollable region that
   only responds to a mouse wheel is a WCAG 2.1.1 keyboard trap in reverse:
   keyboard users cannot reach the content at all. Focusable means arrow keys
   and Page Down work, which is why the focus ring below is kept visible
   rather than suppressed. */
.policy-scroll {
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.policy-scroll > *:first-child { margin-top: 0; }
/* Without this a ToC jump lands the heading flush against the top edge. */
.policy-scroll h2 { scroll-margin-top: var(--space-3); }
.policy-scroll:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* A fixed-height box that clips at 70vh would print as one truncated page. */
@media print {
  .policy-scroll {
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0;
  }
}