/* =============================================================================
   GeoVerio — atlas theme · public layout layer
   -----------------------------------------------------------------------------
   Everything specific to the marketing/docs surfaces: chrome, hero, module
   bands, pricing, docs, auth, footer.

   References ONLY --gv-* tokens. Zero colour literals, zero magic px.
   Load order: tokens.css → base.css → components.css → theme.css
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CHROME — header
   The header is the one element on every page, so it sets the density of the
   whole product. 56px, one hairline, no shadow until scrolled.
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: var(--gv-z-header);
  background: color-mix(in srgb, var(--gv-bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(var(--gv-blur-md));
  border-bottom: var(--gv-border-width) solid transparent;
  transition: border-color var(--gv-duration-base) var(--gv-ease-standard),
              background-color var(--gv-duration-base) var(--gv-ease-standard);
}
.hdr.is-stuck { border-bottom-color: var(--gv-border); }
.hdr__in { display: flex; align-items: center; gap: var(--gv-space-5); height: 56px; }

.brand { display: inline-flex; align-items: center; gap: var(--gv-space-2); text-decoration: none; color: var(--gv-fg); flex: none; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__text { font-weight: var(--gv-weight-semibold); letter-spacing: var(--gv-tracking-tight); font-size: var(--gv-text-lg); }
.brand:focus-visible { box-shadow: var(--gv-focus-ring); border-radius: var(--gv-radius-md); }

.nav { display: flex; align-items: center; gap: var(--gv-space-1); }
.nav__link {
  display: inline-flex; align-items: center; height: 34px;
  padding-inline: var(--gv-space-3); border-radius: var(--gv-radius-md);
  color: var(--gv-fg-secondary); text-decoration: none;
  font-size: var(--gv-text-md); font-weight: var(--gv-weight-medium);
  transition: color var(--gv-duration-fast) var(--gv-ease-standard),
              background-color var(--gv-duration-fast) var(--gv-ease-standard);
}
.nav__link:hover { color: var(--gv-fg); background: var(--gv-surface-hover); }
.nav__link[aria-current="page"] { color: var(--gv-fg); }
.hdr__right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--gv-space-2); }
.hdr__sep { width: var(--gv-border-width); height: 20px; background: var(--gv-border); flex: none; }

/* Mobile drawer. The panel is placed BEFORE the trigger in reading order and
   focus is moved into it on open, so tabbing does not fall through to the page. */
.burger { display: none; }
.nav-panel { display: contents; }
@media (max-width: 860px) {
  .nav-panel {
    display: block; position: fixed; inset: 56px 0 auto 0;
    background: var(--gv-bg); border-bottom: var(--gv-border-width) solid var(--gv-border);
    padding: var(--gv-space-3) var(--gv-gutter) var(--gv-space-5);
    box-shadow: var(--gv-shadow-3);
    visibility: hidden; opacity: 0; translate: 0 -8px;
    transition: opacity var(--gv-duration-base) var(--gv-ease-standard),
                translate var(--gv-duration-base) var(--gv-ease-standard),
                visibility var(--gv-duration-base);
  }
  .nav-panel.is-open { visibility: visible; opacity: 1; translate: 0 0; }
  .nav { flex-direction: column; align-items: stretch; gap: var(--gv-space-0-5); }
  .nav__link { height: 44px; font-size: var(--gv-text-base); }
  .nav__auth { display: flex; gap: var(--gv-space-2); margin-top: var(--gv-space-3); padding-top: var(--gv-space-3); border-top: var(--gv-border-width) solid var(--gv-border); }
  .nav__auth .gv-btn { flex: 1; }
  .burger { display: inline-flex; }
  /* The signup affordance never leaves the mobile header. */
  .hdr__cta-mobile { display: inline-flex; }
}
@media (min-width: 861px) { .hdr__cta-mobile { display: none; } }

/* -----------------------------------------------------------------------------
   HERO
   Two columns: claim on the left, live product proof on the right. The proof is
   real markup, not an image, so it is selectable, searchable and weightless.
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--gv-space-16) var(--gv-space-12); position: relative; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gv-space-12); align-items: center; }
.hero__title {
  font-size: var(--gv-text-display); line-height: 1.03;
  letter-spacing: var(--gv-tracking-tight); font-weight: var(--gv-weight-semibold);
  max-width: 17ch;
}
.hero__title em { font-family: var(--gv-font-display); font-style: italic; font-weight: var(--gv-weight-regular); color: var(--gv-accent); letter-spacing: var(--gv-tracking-none); }
.hero__lede { margin-top: var(--gv-space-5); font-size: var(--gv-text-lg); line-height: var(--gv-leading-lg); color: var(--gv-fg-secondary); max-width: 52ch; }
.hero__cta { margin-top: var(--gv-space-8); display: flex; gap: var(--gv-space-3); flex-wrap: wrap; }

/* Status strip — replaces the bare module count that contradicted the headline.
   It states capability and reliability instead of inventory. */
.hero__strip {
  margin-top: var(--gv-space-8); padding-top: var(--gv-space-5);
  border-top: var(--gv-border-width) solid var(--gv-border);
  display: flex; flex-wrap: wrap; gap: var(--gv-space-3) var(--gv-space-6);
  font-family: var(--gv-font-mono); font-size: var(--gv-text-xs); color: var(--gv-fg-muted);
}
.hero__strip b { color: var(--gv-fg); font-weight: var(--gv-weight-medium); }
.hero__strip .dot { width: 6px; height: 6px; border-radius: var(--gv-radius-full); background: var(--gv-success); display: inline-block; margin-inline-end: var(--gv-space-2); vertical-align: middle; }

@media (max-width: 960px) {
  .hero { padding-block: var(--gv-space-10) var(--gv-space-8); }
  .hero__in { grid-template-columns: 1fr; gap: var(--gv-space-8); }
  .hero__title { max-width: 18ch; }
}

/* -----------------------------------------------------------------------------
   MODULE BANDS
   The alternating band was the strongest layout in the audited product; it is
   kept and tightened. Text and figure both snap to the container edges.
   -------------------------------------------------------------------------- */
.band { padding-block: var(--gv-section-y); border-top: var(--gv-border-width) solid var(--gv-border); }
.band--alt { background: var(--gv-bg-subtle); }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gv-space-12); align-items: center; }
.band--alt .band__in { direction: rtl; }
.band--alt .band__in > * { direction: ltr; }
.band__no { font-family: var(--gv-font-mono); font-size: var(--gv-text-xs); letter-spacing: var(--gv-tracking-wide); color: var(--gv-accent-ink); }
.band__h { margin-top: var(--gv-space-3); font-size: var(--gv-text-3xl); line-height: var(--gv-leading-3xl); letter-spacing: var(--gv-tracking-tight); }
.band__p { margin-top: var(--gv-space-3); color: var(--gv-fg-secondary); max-width: 46ch; }
.band__meta { margin-top: var(--gv-space-6); display: flex; flex-wrap: wrap; gap: var(--gv-space-6); }
.band__meta > div { display: grid; gap: var(--gv-space-1); }
.band__meta span { font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs); letter-spacing: var(--gv-tracking-wide); text-transform: uppercase; color: var(--gv-fg-muted); }
.band__meta b { font-weight: var(--gv-weight-medium); font-size: var(--gv-text-sm); }
.band__meta b.mono { font-family: var(--gv-font-mono); }
.band__link { margin-top: var(--gv-space-6); display: inline-flex; align-items: center; gap: var(--gv-space-2); min-height: var(--gv-target-min); font-weight: var(--gv-weight-medium); font-size: var(--gv-text-md); text-decoration: none; }
.band__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 960px) {
  .band__in, .band--alt .band__in { grid-template-columns: 1fr; gap: var(--gv-space-6); direction: ltr; }
}

/* -----------------------------------------------------------------------------
   SECTION HEADS
   -------------------------------------------------------------------------- */
.sec { padding-block: var(--gv-section-y); border-top: var(--gv-border-width) solid var(--gv-border); }
.sec--alt { background: var(--gv-bg-subtle); }
.sec--flush { border-top: none; }
.sec__head { max-width: 62ch; }
.sec__head--center { margin-inline: auto; text-align: center; }
.sec__h { font-size: var(--gv-text-3xl); line-height: var(--gv-leading-3xl); letter-spacing: var(--gv-tracking-tight); margin-top: var(--gv-space-3); }
.sec__p { margin-top: var(--gv-space-3); color: var(--gv-fg-secondary); }

/* Page hero for interior routes — a rule and a title, no aurora, no gradient text. */
.phero { padding-block: var(--gv-space-12) var(--gv-space-8); }
.phero__title { font-size: var(--gv-text-hero); line-height: 1.08; letter-spacing: var(--gv-tracking-tight); margin-top: var(--gv-space-3); }
.phero__sub { margin-top: var(--gv-space-4); font-size: var(--gv-text-lg); color: var(--gv-fg-secondary); max-width: 58ch; }
.phero--center { text-align: center; }
.phero--center .phero__sub { margin-inline: auto; }
.crumbs { display: flex; align-items: center; gap: var(--gv-space-2); font-size: var(--gv-text-sm); color: var(--gv-fg-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--gv-target-min); color: var(--gv-fg-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--gv-fg); text-decoration: underline; }

/* -----------------------------------------------------------------------------
   PRICING
   A responsive grid, not a horizontal rail. The rail clipped the top tier at
   1440px and showed one of five plans at 390px. Plans wrap; nothing is hidden.
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: var(--gv-space-4); align-items: stretch;
  grid-template-columns: repeat(var(--plan-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(min(var(--plan-cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 900px)  { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .plans { grid-template-columns: 1fr; } }
.plan {
  display: flex; flex-direction: column;
  padding: var(--gv-space-5);
  background: var(--gv-surface);
  border: var(--gv-border-width) solid var(--gv-border);
  border-radius: var(--gv-radius-lg);
  position: relative;
}
.plan--featured { border-color: var(--gv-accent-border); box-shadow: var(--gv-shadow-2), var(--gv-highlight); }
.plan__tag {
  position: absolute; inset-block-start: 0; inset-inline-start: var(--gv-space-5);
  translate: 0 -50%;
  font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs); letter-spacing: var(--gv-tracking-wide);
  text-transform: uppercase; padding: var(--gv-space-1) var(--gv-space-2);
  background: var(--gv-accent-solid); color: var(--gv-fg-on-accent); border-radius: var(--gv-radius-full);
}
.plan__name { font-size: var(--gv-text-lg); font-weight: var(--gv-weight-semibold); letter-spacing: var(--gv-tracking-snug); }
.plan__desc { margin-top: var(--gv-space-2); font-size: var(--gv-text-sm); line-height: var(--gv-leading-sm); color: var(--gv-fg-secondary); min-height: 3.75rem; }
.plan__price { margin-top: var(--gv-space-4); display: flex; align-items: baseline; gap: var(--gv-space-2); }
.plan__price b { font-size: var(--gv-text-3xl); line-height: 1; letter-spacing: var(--gv-tracking-tight); font-weight: var(--gv-weight-semibold); font-variant-numeric: tabular-nums; }
.plan__price span { font-size: var(--gv-text-sm); color: var(--gv-fg-muted); }
.plan__cta { margin-top: var(--gv-space-5); }
.plan__cta .gv-btn { width: 100%; }
.plan__list { list-style: none; padding: 0; margin: var(--gv-space-5) 0 0; display: grid; gap: var(--gv-space-2); font-size: var(--gv-text-sm); }
.plan__list li { display: flex; gap: var(--gv-space-2); align-items: flex-start; color: var(--gv-fg-secondary); }
.plan__list svg { color: var(--gv-accent); margin-top: 0.16em; }
.plan__note { margin-top: var(--gv-space-4); font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs); color: var(--gv-fg-muted); }

/* Enterprise tier — the self-serve ceiling was $99 with no path onward. */
.plan--enterprise { background: var(--gv-bg-subtle); border-style: dashed; }

/* -----------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--gv-space-0-5); max-width: 76ch; }
.faq details { border-bottom: var(--gv-border-width) solid var(--gv-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gv-space-4);
  padding: var(--gv-space-4) 0; min-height: var(--gv-target-comfortable);
  cursor: pointer; list-style: none;
  font-weight: var(--gv-weight-medium); font-size: var(--gv-text-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; rotate: 45deg; translate: 0 -2px; color: var(--gv-fg-muted); transition: rotate var(--gv-duration-base) var(--gv-ease-standard); }
.faq details[open] summary::after { rotate: -135deg; translate: 0 2px; }
.faq summary:focus-visible { box-shadow: var(--gv-focus-ring); border-radius: var(--gv-radius-md); }
.faq p { padding-bottom: var(--gv-space-4); color: var(--gv-fg-secondary); max-width: 68ch; }

/* -----------------------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------------------- */
.cmp th, .cmp td { white-space: nowrap; }
.cmp tbody th { font-weight: var(--gv-weight-medium); color: var(--gv-fg); text-align: start; }
.cmp td { color: var(--gv-fg-secondary); font-variant-numeric: tabular-nums; }
.cmp .is-featured { background: var(--gv-accent-subtle); color: var(--gv-fg); }

/* -----------------------------------------------------------------------------
   CLOSING BAND
   -------------------------------------------------------------------------- */
.close { padding-block: var(--gv-section-y-lg); border-top: var(--gv-border-width) solid var(--gv-border); background: var(--gv-bg-subtle); text-align: center; }
.close h2 { font-family: var(--gv-font-display); font-weight: var(--gv-weight-regular); font-size: var(--gv-text-hero); line-height: 1.15; letter-spacing: var(--gv-tracking-none); max-width: 22ch; margin-inline: auto; }
.close__cta { margin-top: var(--gv-space-8); display: flex; gap: var(--gv-space-3); justify-content: center; flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   AUTH
   -------------------------------------------------------------------------- */
.auth { min-height: calc(100vh - 56px); display: grid; place-items: center; padding: var(--gv-space-12) var(--gv-gutter); }
.auth__card { width: 100%; max-width: 25rem; }
.auth__head { text-align: center; margin-bottom: var(--gv-space-8); }
.auth__head h1 { font-size: var(--gv-text-2xl); line-height: var(--gv-leading-2xl); }
.auth__head p { margin-top: var(--gv-space-2); color: var(--gv-fg-secondary); font-size: var(--gv-text-md); }
.auth__form { display: grid; gap: var(--gv-space-4); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gv-space-4); flex-wrap: wrap; }
.auth__alt { margin-top: var(--gv-space-6); text-align: center; font-size: var(--gv-text-md); color: var(--gv-fg-secondary); }
.auth__alt a { display: inline-flex; align-items: center; min-height: var(--gv-target-min); }
.auth__mark { display: flex; justify-content: center; margin-bottom: var(--gv-space-6); }

/* -----------------------------------------------------------------------------
   FOOTER
   Four columns including Legal, because the audited footer had six links and no
   privacy policy, terms, status or security page.
   -------------------------------------------------------------------------- */
.ftr { border-top: var(--gv-border-width) solid var(--gv-border); padding-block: var(--gv-space-12) var(--gv-space-8); background: var(--gv-bg-subtle); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--gv-space-8); }
.ftr__brand p { margin-top: var(--gv-space-3); color: var(--gv-fg-secondary); font-size: var(--gv-text-sm); max-width: 30ch; }
.ftr__status { margin-top: var(--gv-space-4); display: inline-flex; align-items: center; gap: var(--gv-space-2); font-size: var(--gv-text-sm); text-decoration: none; color: var(--gv-fg-secondary); }
.ftr__status .dot { width: 7px; height: 7px; border-radius: var(--gv-radius-full); background: var(--gv-success); }
.ftr__col h2 { font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs); letter-spacing: var(--gv-tracking-wide); text-transform: uppercase; color: var(--gv-fg-muted); font-weight: var(--gv-weight-medium); }
.ftr__col a { display: block; margin-top: var(--gv-space-3); font-size: var(--gv-text-md); color: var(--gv-fg-secondary); text-decoration: none; min-height: var(--gv-target-min); }
.ftr__col a:hover { color: var(--gv-fg); }
.ftr__bottom { margin-top: var(--gv-space-12); padding-top: var(--gv-space-5); border-top: var(--gv-border-width) solid var(--gv-border); display: flex; flex-wrap: wrap; gap: var(--gv-space-4); justify-content: space-between; font-size: var(--gv-text-sm); color: var(--gv-fg-muted); }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gv-space-8) var(--gv-space-6); } .ftr__brand { grid-column: 1 / -1; } }

/* -----------------------------------------------------------------------------
   DOCS
   A persistent left rail plus a sticky "on this page" rail. The audited docs had
   no sidebar, no TOC, no search and no anchors on pages up to 7,369px tall.
   -------------------------------------------------------------------------- */
.docs { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; gap: var(--gv-space-10); align-items: start; padding-block: var(--gv-space-10) var(--gv-space-20); }
.docs__nav, .docs__toc { position: sticky; top: calc(56px + var(--gv-space-6)); max-height: calc(100vh - 56px - var(--gv-space-12)); overflow-y: auto; }
.docs__navgrp + .docs__navgrp { margin-top: var(--gv-space-6); }
.docs__navgrp h2 { font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs); letter-spacing: var(--gv-tracking-wide); text-transform: uppercase; color: var(--gv-fg-muted); font-weight: var(--gv-weight-medium); margin-bottom: var(--gv-space-2); }
.docs__navlink {
  display: flex; align-items: center; gap: var(--gv-space-2);
  padding: var(--gv-space-2) var(--gv-space-3); margin-inline-start: calc(-1 * var(--gv-space-3));
  border-radius: var(--gv-radius-md); min-height: 34px;
  color: var(--gv-fg-secondary); text-decoration: none; font-size: var(--gv-text-md);
}
.docs__navlink:hover { background: var(--gv-surface-hover); color: var(--gv-fg); }
.docs__navlink[aria-current="page"] { background: var(--gv-accent-subtle); color: var(--gv-accent-ink); font-weight: var(--gv-weight-medium); }
.docs__toc h2 { font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs); letter-spacing: var(--gv-tracking-wide); text-transform: uppercase; color: var(--gv-fg-muted); font-weight: var(--gv-weight-medium); margin-bottom: var(--gv-space-3); }
.docs__toc a { display: block; padding: var(--gv-space-1) 0 var(--gv-space-1) var(--gv-space-3); border-inline-start: 2px solid var(--gv-border); color: var(--gv-fg-muted); text-decoration: none; font-size: var(--gv-text-sm); min-height: var(--gv-target-min); }
.docs__toc a:hover { color: var(--gv-fg); border-inline-start-color: var(--gv-border-control); }
.docs__toc a.is-active { color: var(--gv-accent-ink); border-inline-start-color: var(--gv-accent); }
.docs__body { min-width: 0; }
.docs__body > * + * { margin-top: var(--gv-space-6); }
.docs__body section + section { margin-top: var(--gv-space-16); }
.docs__body h2 { font-size: var(--gv-text-2xl); line-height: var(--gv-leading-2xl); letter-spacing: var(--gv-tracking-tight); scroll-margin-top: calc(56px + var(--gv-space-6)); }
.docs__body h3 { font-size: var(--gv-text-xl); line-height: var(--gv-leading-xl); scroll-margin-top: calc(56px + var(--gv-space-6)); }
.docs__body p { color: var(--gv-fg-secondary); max-width: var(--gv-measure); }
.docs__body ul, .docs__body ol { color: var(--gv-fg-secondary); max-width: var(--gv-measure); padding-inline-start: var(--gv-space-5); display: grid; gap: var(--gv-space-2); }

/* Copyable heading anchor — the section ids existed but nothing linked to them. */
.anchor { color: var(--gv-fg-subtle); text-decoration: none; margin-inline-start: var(--gv-space-2); opacity: 0; font-weight: var(--gv-weight-regular); }
h2:hover > .anchor, h3:hover > .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:focus-visible { box-shadow: var(--gv-focus-ring); border-radius: var(--gv-radius-sm); }

@media (max-width: 1240px) { .docs { grid-template-columns: 200px minmax(0, 1fr); } .docs__toc { display: none; } }
@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; gap: var(--gv-space-6); padding-block: var(--gv-space-6) var(--gv-space-12); }
  .docs__nav { position: static; max-height: none; padding-bottom: var(--gv-space-5); border-bottom: var(--gv-border-width) solid var(--gv-border); }
}

/* Endpoint block */
.ep { border: var(--gv-border-width) solid var(--gv-border); border-radius: var(--gv-radius-lg); overflow: hidden; scroll-margin-top: calc(56px + var(--gv-space-6)); }
.ep__head { display: flex; align-items: center; gap: var(--gv-space-3); flex-wrap: wrap; padding: var(--gv-space-3) var(--gv-space-4); background: var(--gv-bg-subtle); border-bottom: var(--gv-border-width) solid var(--gv-border); }
.ep__path { font-family: var(--gv-font-mono); font-size: var(--gv-text-sm); overflow-x: auto; }
.ep__body { padding: var(--gv-space-5); display: grid; gap: var(--gv-space-5); }

/* Quickstart steps */
.steps { display: grid; gap: var(--gv-space-4); counter-reset: step; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--gv-space-4); }
.step__no { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--gv-radius-full); background: var(--gv-accent-subtle); color: var(--gv-accent-ink); font-family: var(--gv-font-mono); font-size: var(--gv-text-xs); font-weight: var(--gv-weight-medium); }
.step__h { font-size: var(--gv-text-lg); font-weight: var(--gv-weight-semibold); letter-spacing: var(--gv-tracking-snug); }
.step__b { margin-top: var(--gv-space-2); display: grid; gap: var(--gv-space-3); }
.step__b p { color: var(--gv-fg-secondary); }

/* Playground — restyled; every DOM hook docs.js depends on is unchanged. */
.pg { border: var(--gv-border-width) solid var(--gv-border); border-radius: var(--gv-radius-lg); background: var(--gv-surface); overflow: hidden; }
.pg__head { display: flex; align-items: center; gap: var(--gv-space-3); padding: var(--gv-space-3) var(--gv-space-4); border-bottom: var(--gv-border-width) solid var(--gv-border); background: var(--gv-bg-subtle); }
.pg__title { font-size: var(--gv-text-md); font-weight: var(--gv-weight-semibold); }
.pg__body { padding: var(--gv-space-5); display: grid; gap: var(--gv-space-4); }
.pg__fields { display: grid; gap: var(--gv-space-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pg__bar { display: flex; align-items: center; gap: var(--gv-space-3); flex-wrap: wrap; }
.pg__latency { font-family: var(--gv-font-mono); font-size: var(--gv-text-xs); color: var(--gv-fg-muted); }
.pg-invalid { border-color: var(--gv-danger) !important; }
.pg-ta-list {
  list-style: none; margin: var(--gv-space-1) 0 0; padding: var(--gv-space-1);
  background: var(--gv-surface-raised);
  border: var(--gv-border-width) solid var(--gv-border-strong);
  border-radius: var(--gv-radius-md);
  box-shadow: var(--gv-shadow-3);
  position: absolute; inset-inline: 0; z-index: var(--gv-z-dropdown);
  max-height: 17rem; overflow-y: auto;
}
.pg-ta-wrap { position: relative; }
.pg-ta-list li { padding: var(--gv-space-2) var(--gv-space-3); border-radius: var(--gv-radius-sm); cursor: pointer; font-size: var(--gv-text-md); }
.pg-ta-list li:hover, .pg-ta-list li.pg-ta-active { background: var(--gv-accent-subtle); color: var(--gv-accent-ink); }
.pg-ta-flash { border-color: var(--gv-accent) !important; }

/* -----------------------------------------------------------------------------
   TRUST STRIP — logo-free, claim-free, verifiable only.
   -------------------------------------------------------------------------- */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gv-space-6); }
.trust__item { display: grid; gap: var(--gv-space-2); }
.trust__k { display: flex; align-items: center; gap: var(--gv-space-2); font-size: var(--gv-text-md); font-weight: var(--gv-weight-medium); }
.trust__k svg { color: var(--gv-accent); }
.trust__v { font-size: var(--gv-text-sm); color: var(--gv-fg-secondary); }

/* -----------------------------------------------------------------------------
   PROSE (CMS-authored pages)
   -------------------------------------------------------------------------- */
.prose h1, .prose h2, .prose h3, .prose h4 { letter-spacing: var(--gv-tracking-tight); font-weight: var(--gv-weight-semibold); }
.prose h2 { font-size: var(--gv-text-2xl); line-height: var(--gv-leading-2xl); margin-top: var(--gv-space-10); }
.prose h3 { font-size: var(--gv-text-xl); line-height: var(--gv-leading-xl); margin-top: var(--gv-space-8); }
.prose p, .prose li { color: var(--gv-fg-secondary); }
.prose > * + * { margin-top: var(--gv-space-4); }
.prose ul, .prose ol { padding-inline-start: var(--gv-space-5); display: grid; gap: var(--gv-space-2); }
.prose pre { background: var(--gv-code-bg); border: var(--gv-border-width) solid var(--gv-code-border); border-radius: var(--gv-radius-lg); padding: var(--gv-space-4); overflow-x: auto; font-family: var(--gv-font-mono); font-size: var(--gv-text-sm); }
.prose blockquote { border-inline-start: 3px solid var(--gv-accent); padding-inline-start: var(--gv-space-4); color: var(--gv-fg-secondary); }
.prose img { border-radius: var(--gv-radius-lg); }

/* -----------------------------------------------------------------------------
   ERROR PAGE
   -------------------------------------------------------------------------- */
.err { min-height: calc(100vh - 56px); display: grid; place-items: center; text-align: center; padding: var(--gv-space-12) var(--gv-gutter); }
.err__code { font-family: var(--gv-font-mono); font-size: var(--gv-text-6xl); font-weight: var(--gv-weight-medium); color: var(--gv-accent); letter-spacing: var(--gv-tracking-tight); }
.err h1 { margin-top: var(--gv-space-4); font-size: var(--gv-text-3xl); }
.err p { margin-top: var(--gv-space-3); color: var(--gv-fg-secondary); max-width: 46ch; margin-inline: auto; }

/* -----------------------------------------------------------------------------
   ENTRANCE ANIMATION
   Additive only: the resting state is VISIBLE. Content can never be trapped at
   opacity 0 if the observer misses it, which is what broke 8 of 10 audited views.
   -------------------------------------------------------------------------- */
.rv { opacity: 1; }
html.js .rv { opacity: 0; translate: 0 8px; transition: opacity var(--gv-duration-slower) var(--gv-ease-out), translate var(--gv-duration-slower) var(--gv-ease-out); }
html.js .rv.in, html.ready .rv { opacity: 1; translate: 0 0; }

@media print {
  .hdr, .ftr, .docs__nav, .docs__toc, .gv-toasts { display: none !important; }
  .rv, html.js .rv { opacity: 1 !important; translate: none !important; }
  .docs { grid-template-columns: 1fr; }
  .gv-code__body { max-height: none; }
}

/* --- Header helpers ------------------------------------------------------- */
@media (max-width: 860px) { .hdr__desk { display: none !important; } }
@media (min-width: 861px) { .nav__auth { display: none; } }
#theme-toggle .gv-icon-moon { display: none; }
#theme-toggle .gv-icon-sun, #theme-toggle .gv-icon-moon { display: inline-flex; }
:root[data-theme="light"] #theme-toggle .gv-icon-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .gv-icon-moon { display: none; }
.is-copied { color: var(--gv-success) !important; }

/* -----------------------------------------------------------------------------
   DOCS SEARCH  (left rail)
   New classes, because the docs rail had no search at all and reference pages
   run to eight screens — a reader looking for one parameter had to scroll for
   it. The control is rendered by _macros.twig's `docs_search_box` on BOTH docs
   routes and driven by assets/js/docs-search.js.

   Results are laid out IN FLOW rather than as an absolutely positioned popup:
   `.docs__nav` is `overflow-y: auto`, which clips absolutely positioned
   descendants, so a floating panel would be cut off exactly when it got useful.
   In flow it simply scrolls with the rail, on every breakpoint.

   Tokens only — no colour literals, no raw px.
   -------------------------------------------------------------------------- */

/* Without JavaScript the box can never filter anything, and a dead input is
   worse than no input. site.js sets `js` on <html> as its first act. */
html:not(.js) .docs__search { display: none; }

.docs__search h2 { margin-bottom: var(--gv-space-2); }
.docs__search h2 label { cursor: pointer; }
.docs__search-wrap { position: relative; }
.docs__search-input { width: 100%; }

.docs__search-hint {
  margin-top: var(--gv-space-2);
  font-size: var(--gv-text-2xs); line-height: var(--gv-leading-2xs);
  color: var(--gv-fg-muted);
}

.docs__search-list {
  margin-top: var(--gv-space-2);
  padding: var(--gv-space-1);
  background: var(--gv-surface-raised);
  border: var(--gv-border-width) solid var(--gv-border-strong);
  border-radius: var(--gv-radius-md);
  box-shadow: var(--gv-shadow-2);
  max-height: min(24rem, 50vh);
  overflow-y: auto;
}

.docs__search-group + .docs__search-group { margin-top: var(--gv-space-2); }
.docs__search-grouph {
  font-family: var(--gv-font-mono); font-size: var(--gv-text-2xs);
  letter-spacing: var(--gv-tracking-wide); text-transform: uppercase;
  color: var(--gv-fg-muted); font-weight: var(--gv-weight-medium);
  padding: var(--gv-space-1) var(--gv-space-2);
}

/* One option = one target. `min-height` holds the WCAG 2.2 floor even when the
   label is a single short word like `q`. */
.docs__search-opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gv-space-2);
  min-height: var(--gv-target-min);
  padding: var(--gv-space-2);
  border-radius: var(--gv-radius-sm);
  cursor: pointer;
  font-size: var(--gv-text-sm); line-height: var(--gv-leading-sm);
  color: var(--gv-fg-secondary);
}
.docs__search-opt:hover { background: var(--gv-surface-hover); color: var(--gv-fg); }

/* Keyboard focus never leaves the input, so the active option carries the
   selection indicator itself — and never by colour alone: it also gains a
   border marker on the leading edge. */
.docs__search-opt.is-active,
.docs__search-opt[aria-selected="true"] {
  background: var(--gv-accent-subtle);
  color: var(--gv-accent-ink);
  box-shadow: inset var(--gv-border-width-thick) 0 0 0 var(--gv-accent);
}
.docs__search-optt { min-width: 0; overflow-wrap: anywhere; font-family: var(--gv-font-mono); }
.docs__search-optm { flex: none; font-size: var(--gv-text-2xs); color: var(--gv-fg-muted); }
.docs__search-empty { margin-top: var(--gv-space-2); padding: var(--gv-space-2); font-size: var(--gv-text-sm); color: var(--gv-fg-muted); }

/* -----------------------------------------------------------------------------
   CODE SAMPLE PANE NOTE
   New class. A non-GET endpoint whose spec carries no `body_example` gets a
   placeholder body, and the pane has to say so — otherwise a reader pastes a
   sample that is syntactically perfect and semantically empty. It sits OUTSIDE
   `pre > code`, so docs.js's copy button (which reads the code element) never
   copies prose into the clipboard.
   -------------------------------------------------------------------------- */
.code-pane__note {
  padding: var(--gv-space-3) var(--gv-space-4);
  border-top: var(--gv-border-width) solid var(--gv-code-border);
  font-size: var(--gv-text-sm); line-height: var(--gv-leading-sm);
  color: var(--gv-fg-muted);
}

/* -----------------------------------------------------------------------------
   COPY AS CURL
   New class. A separate hook from `.js-copy` on purpose: that handler resolves
   its text from the response body, and this button copies a reconstructed
   request instead. Same "copied" affordance as its neighbour so the pair reads
   as one control group.
   -------------------------------------------------------------------------- */
.js-copy-curl.copied { color: var(--gv-success-ink); }


/* =============================================================================
   Atlas V2 — brand-pack typography pass.
   Geist replaces Instrument Serif as the display voice: the serif italic was a
   skin device, not a brand asset, and Geist ships no italic — a synthesised
   oblique would look broken. Display text is Geist at the wordmark weight
   (650) with tight tracking; emphasis is carried by the accent colour alone.
   The wordmark lockup follows the pack spec: 650 / -0.04em.
   ========================================================================== */
.gv-display, .gv-display-em, .hero__title em, .close h2 {
  font-family: var(--gv-font-display);
  font-style: normal;
  font-weight: 650;
  letter-spacing: var(--gv-tracking-tight);
}
.gv-display-em, .hero__title em { color: var(--gv-accent-ink); }
.brand__text { font-weight: 650; letter-spacing: -0.04em; }

/* =============================================================================
   Atlas V2.1 — homepage without code.
   The hero diagram and the how-it-works strip replaced the request/response
   frames (decision 2026-07-30: no API output on marketing pages). Everything
   reads tokens; the only gradient is the brand gradient, used as a glow and
   on the key tile — never under text.
   ========================================================================== */

/* --- One-key diagram ----------------------------------------------------- */
.hviz {
  position: relative;
  border: var(--gv-border-width) solid var(--gv-border);
  border-radius: var(--gv-radius-xl);
  background: var(--gv-surface-raised);
  box-shadow: var(--gv-shadow-3);
  padding: var(--gv-space-8);
  overflow: hidden;
}
.hviz__glow {
  position: absolute; inset: -40% -20% auto -20%; height: 70%;
  background: var(--gv-brand-gradient);
  opacity: .12; filter: blur(48px); pointer-events: none;
}
[data-theme="dark"] .hviz__glow { opacity: .18; }
.hviz__key {
  position: relative;
  display: flex; align-items: center; gap: var(--gv-space-3);
  border: var(--gv-border-width) solid var(--gv-border);
  border-radius: var(--gv-radius-lg);
  background: var(--gv-surface);
  padding: var(--gv-space-3) var(--gv-space-4);
}
.hviz__keyicon {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--gv-radius-md);
  background: var(--gv-accent-solid); color: var(--gv-fg-on-accent);
}
.hviz__keylabel { font-weight: var(--gv-weight-semibold); font-size: var(--gv-text-md); }
.hviz__keychip {
  margin-inline-start: auto;
  font-size: var(--gv-text-2xs); color: var(--gv-fg-muted);
  border: var(--gv-border-width) solid var(--gv-border);
  border-radius: var(--gv-radius-full);
  padding: var(--gv-space-1) var(--gv-space-3);
  background: var(--gv-bg-subtle);
  white-space: nowrap;
}
.hviz__stem {
  width: 2px; height: var(--gv-space-6); margin-inline-start: var(--gv-space-8);
  background: linear-gradient(to bottom, var(--gv-border), var(--gv-accent));
}
.hviz__mods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gv-space-3); position: relative; }
.hviz__mod {
  display: flex; align-items: center; gap: var(--gv-space-3);
  border: var(--gv-border-width) solid var(--gv-border);
  border-radius: var(--gv-radius-lg);
  background: var(--gv-surface);
  padding: var(--gv-space-3) var(--gv-space-4);
}
.hviz__modicon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--gv-radius-md);
  background: var(--gv-accent-muted);
  color: var(--gv-accent-ink);
}
.hviz__modtext { display: grid; gap: 1px; min-width: 0; }
.hviz__modtext b { font-size: var(--gv-text-md); font-weight: var(--gv-weight-semibold); }
.hviz__modtext i {
  font-style: normal; font-size: var(--gv-text-sm); color: var(--gv-fg-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hviz__modok { margin-inline-start: auto; color: var(--gv-success); flex: none; }
.hviz__foot {
  margin-top: var(--gv-space-5); text-align: center;
  font-size: var(--gv-text-2xs); letter-spacing: var(--gv-tracking-wide);
  text-transform: uppercase; color: var(--gv-fg-muted);
}
@media (max-width: 640px) { .hviz__keychip { display: none; } }

/* --- How it works -------------------------------------------------------- */
.hsteps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gv-space-6);
}
.hsteps__item {
  counter-increment: step; position: relative;
  border: var(--gv-border-width) solid var(--gv-border);
  border-radius: var(--gv-radius-lg);
  background: var(--gv-surface);
  padding: var(--gv-space-6);
}
.hsteps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: var(--gv-space-4); right: var(--gv-space-5);
  font-family: var(--gv-font-mono); font-size: var(--gv-text-xs);
  color: var(--gv-fg-muted);
}
.hsteps__icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--gv-radius-md);
  background: var(--gv-accent-muted);
  color: var(--gv-accent-ink);
}
.hsteps__h { margin-top: var(--gv-space-4); font-size: var(--gv-text-lg); font-weight: var(--gv-weight-semibold); }
.hsteps__p { margin-top: var(--gv-space-2); font-size: var(--gv-text-md); line-height: var(--gv-leading-md); color: var(--gv-fg-secondary); }