/* CapSeal - shared responsive layer.
 *
 * Loaded after each page's own inline <style>, so equal-specificity rules here
 * win without needing !important. Every page defines --ink, --ink-2, --line,
 * --mute, --mute-2 and --seal, so this file only uses those six.
 *
 * The problem this fixes: every page hid .navlinks below its breakpoint, and
 * .menu-btn was declared display:none and never turned back on anywhere. On a
 * phone that left eighteen pages with no navigation at all - no way to reach
 * the file checker, API keys, pricing or the legal pages except by typing a
 * URL. Six more pages had no media queries whatsoever.
 */

/* --------------------------------------------------------------- overflow ---
 * Nothing may scroll the page sideways. Wide things scroll inside themselves,
 * which is handled per-element below.
 */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }

/* ------------------------------------------------------------------- nav ---
 * A real drawer, anchored under the bar. Every nav on the site is
 * position:sticky, which is a positioned ancestor, so the panel resolves
 * against it.
 */
.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: #EDEFF4;
  padding: 9px 13px;
  border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  min-height: 40px;
}
.menu-btn:hover { border-color: var(--seal); color: var(--seal); }
.menu-btn::after { content: "Menu"; }
nav.nav-open .menu-btn::after { content: "Close"; }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }

  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 22px 16px;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  nav.nav-open .navlinks { display: flex; }

  /* index.html hides individual links rather than the container, so the links
     have to be turned back on explicitly and at higher specificity. */
  nav.nav-open .navlinks a,
  nav.nav-open .navlinks a:not(.nav-cta) {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 2px;
    margin: 0;
    font-size: 15.5px;
    border-bottom: 1px solid var(--line);
  }
  nav.nav-open .navlinks a.nav-cta {
    justify-content: center;
    margin-top: 14px;
    border-bottom: none;
    border-radius: 9px;
  }
}

/* ----------------------------------------------------------------- grids ---
 * Every multi-column construct used anywhere on the site, collapsed at one
 * breakpoint so pages stay consistent with each other.
 */
@media (max-width: 900px) {
  .grid-2, .grid-3, .trust-grid, .who-grid, .compare, .verdicts, .tiers,
  .tg, .benefits, .roi-panel, .fgrid, .sdk-grid, .layers, .layer-list,
  .brief-figs, .figs {
    grid-template-columns: 1fr;
  }
  .flow, .steps, .strip .wrap { grid-template-columns: 1fr 1fr; }
  .fgrid { gap: 26px; }

  /* Borders drawn for a row read wrong once it is a column. */
  .stat, .step, .tier, .vp { border-right: none; }
  .strip .wrap > * + *, .flow > * + * { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .flow, .steps, .strip .wrap, .figs, .brief-figs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- type and spacing ---
 */
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  section { padding: 56px 0; }
  header.hero, .hero { padding-top: 44px; padding-bottom: 30px; }

  h1, .hero h1 { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.1; }
  .sec-title { font-size: clamp(23px, 6vw, 32px); }
  .lead, .hero-sub, .sec-intro, .bigline { font-size: 16.5px; }
  .bigline { line-height: 1.45; }

  .ctaband, .cta, .final { padding: 52px 0; }
  .ctaband h2, .cta h2, .final h2 { font-size: clamp(23px, 6.4vw, 34px); }

  /* Stacked buttons at full width beat two half-width ones that wrap oddly. */
  .btn-primary, .btn-ghost { display: block; text-align: center; margin-bottom: 10px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------- wide content that must
 * scroll inside its own box rather than widening the page.
 */
@media (max-width: 900px) {
  pre, .code pre, .sdk pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
  .tscroll > table { min-width: 520px; margin-bottom: 0; }

  /* Grid and flex children default to min-width:auto, so a card holding a long
     unbreakable install command cannot shrink below that command's width - it
     widens its whole column instead, and the page with it. This is what pushed
     the developers page 190px past the viewport. */
  .sdk, .card, .layer, .step, .qa, .tier, .vp, .fig, .brief-fig, .stat, .pillar {
    min-width: 0;
  }
  .sdk pre, .card pre, .code pre { max-width: 100%; }
  .sdk-links { flex-wrap: wrap; }

  /* The home-page diagram re-lays out into a single column below 700px, so it
     must not be forced wide. The workflow diagrams keep a fixed landscape
     composition and scroll inside their own panel instead. */
  .how-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .how-diagram:not(.is-portrait) svg { min-width: 680px; }
  .how-diagram.is-portrait { overflow-x: visible; }
  .how-diagram.is-portrait svg { min-width: 0; width: 100%; }
  .wf { padding: 14px; }
}

/* ---------------------------------------------------------------- forms ---
 * iOS zooms the page in on focus for any input under 16px, and never zooms
 * back out. Every field on the site is smaller than that by design.
 */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
  button, .btn-primary, .btn-ghost, summary { min-height: 44px; }
}

/* --------------------------------------------------------------- footers ---
 */
@media (max-width: 760px) {
  .foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fbase { line-height: 1.7; }
}