/* ============================================================================
   Mobile-polish layer — loaded AFTER the verbatim design CSS (gradvera-tokens /
   site / cap1-screens / cap-screens). Corrections that would otherwise require
   editing the vendored design stylesheets live here, so provenance of the
   originals stays intact. Added 2026-06 (responsiveness + language picker pass).
   ============================================================================ */

/* --- Product-screen panel overflow on phones --------------------------------
   The vector "app screen" mockups are authored at a fixed width (--gw 620/800px)
   and only VISUALLY scaled by site.js (CSS transform). A transform doesn't shrink
   the layout box, so the fixed-width child blows out its CSS-grid 1fr track
   (default min-width:auto == min-content == 620px) and pushes the page to ~642px
   wide on a 375px viewport. min-width:0 lets the track + wrappers shrink below the
   child's intrinsic width; the existing overflow:hidden on .gv-holder /
   .gv-panelwrap then clips the scaled panel cleanly. */
.fig,
.cap1-steps,
.cap1-step,
.cap1-bridge,
.capx,
.capx.rev,
.cap2-stage,
.cap2-col,
.cap2-panel,
.cap4-vis,
.exchange,
.portal-wrap,
.capx-vis,
.capx-points,
.gv-panelwrap,
.gv-holder,
.gv-screen {
  min-width: 0;
}
.cap1-step,
.cap1-bridge,
.portal-wrap,
.capx-vis,
.gv-panelwrap,
.gv-holder {
  max-width: 100%;
}
.cap1-bridge,
.gv-panelwrap,
.gv-holder {
  overflow: hidden;
}
.cap1-bridge-ln {
  min-width: 0;
}

/* Safety net: a stray wide descendant can never produce a horizontal scrollbar.
   (site.css already sets body overflow-x:hidden; clip is the modern equivalent
   that doesn't establish a scroll container for position:fixed descendants.) */
html {
  overflow-x: clip;
}

/* --- Capability 2 foot overlap on mobile ------------------------------------
   On desktop, .cap2-annot .capx-foot is pulled up (margin-top:-184px) to sit
   beside the floating annotation column. At <=1000px that column is hidden and
   the stacked .cap2-list appears, but the foot kept the negative margin and
   collided with the last list item ("Accept, adjust, or teach Gradvera"). Reset
   it so the foot flows normally below the list. */
@media (max-width: 1000px) {
  .cap2-annot .capx-foot {
    margin-top: 18px;
    justify-content: center;
    text-align: center;
    max-width: none;
  }
}

/* --- Active nav link (scrollspy) --------------------------------------------
   site.css:538 styles .nav a.active as a CREAM pill (--brand-primary-soft, for a
   light surface) — but the header bar is dark, so it clashed with the amber lang
   picker + CTA once scrollspy started applying .active (re-enabled in the mobile
   pass). Bring it into the amber accent family: amber text on a subtle
   amber-tinted pill, consistent over both the transparent and .solid bar. */
.nav a.active {
  color: var(--amber, #e8901c);
  background: rgba(232, 144, 28, 0.14);
}
.hdr.solid .nav a.active {
  background: rgba(232, 144, 28, 0.16);
}

/* A touch more breathing room between the nav buttons (design had gap:2px). */
.nav {
  gap: 8px;
}