/* Archivepanel — public site stylesheet.
   Shares the interface tokens, typography scale and square-cornered,
   rule-based construction of the dashboard (internal/web/static/app.css) so
   the marketing site and the product read as one system. Anything here that
   is not in the dashboard is layout the application has no use for: the hero,
   the section bands and the document shell used by the legal pages. */

:root {
  --ink:          #0f1723;
  --ink-2:        #1c2531;
  --body:         #2b3542;
  --muted:        #5b6676;
  --faint:        #8b98a8;
  --line:         #dde2e9;
  --line-strong:  #c4cddb;
  --surface:      #ffffff;
  --surface-alt:  #f7f9fb;
  --canvas:       #eef1f5;
  --accent:       #14417a;
  --accent-hover: #0e2f59;
  --accent-soft:  #e8eef7;
  --accent-lift:  #7ea6dd;   /* accent legible on the ink background */
  --ok:           #14663f;
  --ok-soft:      #e4f1ea;
  --warn:         #7d5100;
  --warn-soft:    #fbf1de;
  --err:          #9b2c2c;
  --err-soft:     #f8e9e9;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 26px;
}

* { box-sizing: border-box; }
/* Content here is centred in .wrap, and the short pages — 404, the legal pages
   on a tall window — have no scrollbar while the long ones do. Without a
   reserved gutter the whole page slides sideways by a scrollbar's width as you
   move between them. Reserve it whether or not the page scrolls; where
   scrollbar-gutter is not implemented (Safari before 18.2) force the scrollbar
   to be present instead, which holds the same width. Overlay scrollbars take
   no space to begin with, so neither rule shows anything there. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; }
h1 { font-size: 26px; line-height: 1.22; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 15px; }
h4 { font-size: 13.5px; }
p { margin: 0 0 12px; }
/* A long address or identifier wraps rather than widening the page — the only
   thing that should ever scroll sideways here is a table that opted into it. */
p, li, td, dd, .lede { overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

code, .mono, .num { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
code { color: var(--ink-2); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* Micro-label: the uppercase, letterspaced tag the dashboard uses over every
   panel and statistic. It is the strongest single carrier of the house style,
   so it does most of the section labelling here too. */
.eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--faint); font-weight: 600; margin: 0 0 9px;
}
.eyebrow.on-ink { color: var(--accent-lift); }
.lede { font-size: 15.5px; color: var(--muted); line-height: 1.65; }

/* ---------- masthead ---------- */

.masthead {
  background: var(--ink);
  border-bottom: 1px solid #000;
  color: #fff;
  position: sticky; top: 0; z-index: 40;
}
.masthead .wrap {
  display: flex; align-items: center; gap: 20px; min-height: 54px;
}
/* The wordmark takes the slack, so the navigation and the account buttons sit
   together on the right — and when the row wraps on a narrow screen, the
   navigation drops to a full-width line of its own rather than squeezing. */
.wordmark { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.wordmark:hover { text-decoration: none; }
.brandmark-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; flex: 0 0 27px;
  background: var(--ink-2); border: 1px solid #2c3746; color: #fff;
}
.brandmark-badge .brandmark { width: 17px; height: auto; display: block; }
.wordmark .name {
  font-size: 14.5px; font-weight: 600; color: #fff;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.wordmark .qualifier {
  font-size: 10px; color: #7d8b9d; letter-spacing: 0.16em; text-transform: uppercase;
  border-left: 1px solid #2c3746; padding-left: 10px;
}

.navpanel { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.masthead-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* The menu button exists only below the breakpoint, and only once nav.js has
   revealed it. [hidden] needs the guard because the display rule below would
   otherwise out-specify the user agent's. */
.navbtn { display: none; }
.navbtn[hidden] { display: none !important; }
.navbtn-bars { position: relative; width: 14px; height: 9px; flex: 0 0 14px; }
.navbtn-bars, .navbtn-bars::before, .navbtn-bars::after {
  display: block; border-top: 1.5px solid currentColor;
}
.navbtn-bars::before, .navbtn-bars::after {
  content: ""; position: absolute; left: 0; right: 0;
}
.navbtn-bars::before { top: 3.5px; }
.navbtn-bars::after  { top: 7.5px; }
.site-nav a {
  color: #b7c1cd; font-size: 12.5px; padding: 5px 10px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #fff; text-decoration: none; }
.site-nav a.active { color: #fff; border-bottom-color: var(--accent-lift); }

.linkbtn {
  display: inline-block; background: none; border: 1px solid #37455a; color: #c3cdd9;
  font: inherit; font-size: 11.5px; padding: 5px 12px; cursor: pointer;
  letter-spacing: 0.04em;
}
.linkbtn:hover { background: #1b2534; color: #fff; border-color: #4a5b73; text-decoration: none; }
.linkbtn.solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.linkbtn.solid:hover { background: #1a5197; border-color: #1a5197; color: #fff; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 16px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); cursor: pointer; text-align: center; white-space: nowrap;
}
.btn:hover { background: var(--surface-alt); border-color: var(--muted); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-lg { font-size: 14px; padding: 11px 22px; }
.btn-ghost { background: transparent; border-color: #3d4c62; color: #d3dbe5; }
.btn-ghost:hover { background: #1b2534; border-color: #5a6c86; color: #fff; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* A row of jump links. It shares the button styling but never stacks: seven
   full-width buttons would be a worse index than seven chips on two lines. */
.anchor-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.anchor-nav .btn {
  background: transparent; border-color: #3d4c62; color: #d3dbe5; font-size: 12.5px;
}
.anchor-nav .btn:hover { background: #1b2534; border-color: #5a6c86; color: #fff; }

/* ---------- hero ---------- */

/* The hero continues the masthead's ink rather than sitting under it, so the
   top of the page is one dark block and the product panel beside the headline
   reads as the application lifted onto it. */
.hero {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  border-bottom: 1px solid #000;
  color: #c8d2de;
  padding: 62px 0 66px;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 46px; align-items: center;
}
.hero h1 { color: #fff; font-size: 35px; letter-spacing: -0.022em; line-height: 1.16; }
.hero h1 em { font-style: normal; color: var(--accent-lift); }
.hero .lede { color: #a3b1c2; font-size: 16px; margin-top: 16px; max-width: 34em; }
.hero .btn-row { margin-top: 26px; }
.hero-note {
  margin-top: 18px; font-size: 12px; color: #7d8b9d;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.hero-note .sep { color: #3d4c62; }

/* ---------- hero visual ---------- */

/* A record built from the dashboard's own panel, micro-label and pill rules,
   with two earlier captures of the same address stacked behind it. It cannot
   drift into looking like a different product, because it is the same CSS. */
.hero-visual { position: relative; padding-top: 34px; }

/* Only the top sliver of each earlier capture is left uncovered, so their
   text is pinned to the top of the box rather than centred in the part the
   card hides. */
.snapghost {
  position: absolute; height: 34px; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 7px 14px 0; background: #18212e; border: 1px solid #2c3746;
  font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: #6d7c8f; font-family: var(--mono); line-height: 1;
}
.snapghost.g2 { top: 0;    left: 34px; right: 10px; }
.snapghost.g1 { top: 16px; left: 17px; right: 5px; background: #1c2634; color: #7d8b9d; }

.snapcard {
  position: relative; z-index: 2;
  background: var(--surface); border: 1px solid #2c3746;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.46);
}

.snapcard-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-alt);
}
.snapcard-head .t {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--ink-2); font-weight: 600;
}
.snapcard-seq {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}

/* The drawing keeps a page's proportions and is cropped by the frame rather
   than letterboxed inside it, the way a real preview is. */
.snapcard-shot {
  height: 168px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
}
.snapcard-shot svg { display: block; width: 100%; height: 100%; }

.snapcard-addr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 12px; min-width: 0;
}
.snapcard-addr .lockmark { width: 10px; height: 12px; flex: 0 0 10px; color: var(--ok); }
.snapcard-addr .mono {
  color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.snapcard-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.snapcard-strip > div { padding: 10px 14px; border-right: 1px solid var(--line); min-width: 0; }
.snapcard-strip > div:last-child { border-right: 0; }
.snapcard-strip .k {
  display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--faint); font-weight: 600; margin-bottom: 3px;
}
.snapcard-strip .v { display: block; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }

.snapcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--surface-alt); flex-wrap: wrap;
}
.filechips { display: flex; gap: 5px; flex-wrap: wrap; }
.filechip {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line-strong); background: #fff; padding: 2px 7px;
}
.snapcard-sched {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--faint);
  font-weight: 600;
}

dl.spec { margin: 0; display: grid; grid-template-columns: 116px 1fr; }
dl.spec dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint);
  padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 600;
}
dl.spec dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-2); word-break: break-word; font-size: 13px;
}
dl.spec dt:last-of-type, dl.spec dd:last-of-type { border-bottom: 0; }

.pill {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 3px 7px; border: 1px solid; white-space: nowrap;
}
.pill.complete { color: var(--ok);  background: var(--ok-soft);  border-color: #bcdcc9; }
.pill.running  { color: var(--warn);background: var(--warn-soft);border-color: #e6d3ac; }
.pill.neutral  { color: var(--muted); background: #eef1f5; border-color: var(--line-strong); }

/* ---------- bands ---------- */

.band { padding: 56px 0; border-bottom: 1px solid var(--line); }
.band.alt { background: var(--surface); }
.band.tight { padding: 40px 0; }
.band-head { max-width: 660px; margin-bottom: 30px; }
.band-head p { margin-top: 10px; }
.band-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- pipeline ---------- */

.steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line); background: var(--surface);
}
.step { padding: 16px; border-right: 1px solid var(--line); }
.step:last-child { border-right: 0; }
.step .n {
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  letter-spacing: 0.1em; margin-bottom: 8px;
}
.step h3 { font-size: 13.5px; margin-bottom: 5px; }
.step p { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ---------- feature cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.band.alt .card { background: var(--surface-alt); }
.card-head {
  padding: 10px 15px; border-bottom: 1px solid var(--line); background: var(--surface-alt);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--ink-2); font-weight: 600;
}
.band.alt .card-head { background: var(--surface); }
.card-body { padding: 15px; font-size: 13.5px; color: var(--muted); flex: 1 1 auto; }
.card-body h3 { margin-bottom: 6px; }
.card-body p { line-height: 1.6; }

/* ---------- statistics ---------- */

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); background: var(--surface);
}
.stat { padding: 16px 18px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--faint); margin-bottom: 6px; font-weight: 600;
}
.stat .value {
  font-size: 24px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat .note { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ---------- tables ---------- */

.panel { background: var(--surface); border: 1px solid var(--line); }
.panel + .panel { margin-top: 18px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-alt);
}
.panel-head h2, .panel-head h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-2);
}
.panel-body { padding: 16px; }
.panel-body.tight { padding: 0; }

.tablewrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 600; padding: 9px 16px;
  background: var(--surface-alt); border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.band.alt table.grid th { background: var(--canvas); }
table.grid td {
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: 13px;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid td.mono, table.grid td.num {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.grid td .primary { color: var(--ink); font-weight: 500; display: block; }

/* ---------- checklist ---------- */

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  position: relative; padding: 0 0 0 22px; margin-bottom: 9px;
  font-size: 13.5px; color: var(--muted); line-height: 1.55;
}
.checks li:last-child { margin-bottom: 0; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; background: var(--accent-soft); border: 1px solid var(--accent);
}
.checks li strong { color: var(--ink-2); font-weight: 600; }
.checks.ok li::before { background: var(--ok-soft); border-color: var(--ok); }

/* ---------- callout ---------- */

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  background: var(--surface-alt); padding: 13px 16px; font-size: 13px;
  color: var(--muted);
}
.band.alt .callout { background: var(--canvas); }
.callout strong { color: var(--ink-2); }

/* ---------- closing call to action ---------- */

.cta {
  background: var(--ink); color: #b7c1cd; border-bottom: 1px solid #000;
  padding: 48px 0;
}
.cta .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.cta h2 { color: #fff; font-size: 22px; }
.cta p { margin-top: 8px; font-size: 14px; color: #96a5b7; max-width: 46em; }

/* ---------- document shell (privacy, terms) ---------- */

/* The legal pages borrow the application's shell: a fixed-width rail of
   section links beside the text, the same widths and rules as the dashboard
   sidebar, so a long document still feels like part of the product. */
.doc { display: flex; align-items: flex-start; gap: 0; }
.doc-rail {
  width: 232px; flex: 0 0 232px; position: sticky; top: 54px;
  align-self: flex-start; padding: 26px 22px 26px 0;
  border-right: 1px solid var(--line); max-height: calc(100vh - 54px); overflow-y: auto;
}
.doc-rail .group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--faint); margin: 0 0 9px; font-weight: 600;
}
.doc-rail nav { display: flex; flex-direction: column; }
.doc-rail nav a {
  padding: 5px 10px; color: var(--body); font-size: 12.5px;
  border-left: 2px solid transparent;
}
.doc-rail nav a:hover { background: var(--surface-alt); text-decoration: none; color: var(--accent); }
.doc-main { flex: 1 1 auto; min-width: 0; padding: 26px 0 26px 30px; max-width: 780px; }

.doc-head { padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line-strong); }
.doc-head h1 { font-size: 24px; }
.doc-head .meta {
  margin-top: 8px; font-size: 11.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.09em;
}

/* A statement of record inside the body — the operating company under a
   contact section. Smaller and dimmer than the prose it follows, but not the
   uppercase treatment .doc-head .meta gets: this is an address, and an address
   set in capitals is harder to read, not more official. Scoped to a section on
   purpose: .doc-head sits inside .doc-main, so a bare .doc-main .meta would
   match the page's own "Last updated" line and, being later in this file at
   equal specificity, would quietly restyle it. */
.doc-main section .meta { font-size: 12px; color: var(--faint); margin-top: 10px; }

.doc-main section { margin-bottom: 32px; scroll-margin-top: 70px; }
.doc-main section:last-child { margin-bottom: 0; }
.doc-main h2 {
  font-size: 15px; padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.doc-main h2 .idx {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  font-weight: 400; margin-right: 9px;
}
.doc-main h3 { margin: 18px 0 7px; font-size: 13.5px; }
.doc-main p, .doc-main li { font-size: 13.5px; line-height: 1.68; }
.doc-main ul, .doc-main ol { margin: 0 0 12px; padding-left: 20px; }
.doc-main li { margin-bottom: 6px; }
.doc-main li strong { color: var(--ink-2); }
.doc-main table.grid { border: 1px solid var(--line); margin-bottom: 12px; }

/* ---------- footer ---------- */

.sitefoot { background: var(--ink); color: #8b98a8; padding: 40px 0 26px; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 30px; padding-bottom: 26px; border-bottom: 1px solid #222d3c;
}
.foot-about { font-size: 12.5px; line-height: 1.65; max-width: 34em; }
.foot-about .wordmark { margin-bottom: 12px; }
/* The operating company, named where a reader looks for who makes the thing.
   Dimmer than the description above it: it is a statement of record, not part
   of the pitch. */
.foot-about .foot-legal { margin-top: 12px; font-size: 11.5px; color: #6d7c8f; }
.foot-about .foot-legal strong { color: #a3b1c2; font-weight: 600; }
.foot-col h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em;
  color: #6d7c8f; margin-bottom: 10px; font-weight: 600;
}
.foot-col a, .foot-col span { display: block; color: #a3b1c2; font-size: 12.5px; padding: 3px 0; }
.foot-col a:hover { color: #fff; text-decoration: none; }
.foot-base {
  padding-top: 18px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: #6d7c8f;
}

/* ---------- responsive ---------- */

/* Two rules govern everything below. A grid that loses a column must also
   lose the cell borders that were only ever separating those columns, or the
   surviving border doubles up against the container's own edge. And nothing
   is allowed to make the page itself scroll sideways — a wide table scrolls
   inside its own box, or stops being a table. */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Five steps read better stacked than as two columns with a half-empty
     final row. */
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }

  .cards { grid-template-columns: repeat(2, 1fr); }

  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }

  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  :root { --gutter: 16px; }
  body { font-size: 14px; }

  /* The masthead keeps to one row and the navigation becomes a dropdown
     hanging off it. Without nav.js the [data-nav] attribute is never set, the
     button stays hidden, and the panel simply stacks under the wordmark. */
  .masthead .wrap {
    min-height: 0; padding-top: 8px; padding-bottom: 8px;
    flex-wrap: wrap; gap: 10px; position: relative;
  }
  .wordmark .qualifier { display: none; }

  .masthead[data-nav="ready"] .navbtn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid #37455a; color: #c3cdd9;
    font: inherit; font-size: 12px; letter-spacing: 0.04em;
    padding: 8px 12px; cursor: pointer;
  }
  .masthead[data-nav="ready"] .navbtn:hover { background: #1b2534; color: #fff; border-color: #4a5b73; }
  .masthead[data-nav="ready"] .navbtn[aria-expanded="true"] {
    background: #1b2534; color: #fff; border-color: #4a5b73;
  }
  .navbtn:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }

  /* Panel closed by default; nav.js adds .open. It is absolutely positioned so
     opening it does not push the page down under the sticky bar. */
  .masthead[data-nav="ready"] .navpanel { display: none; }
  .masthead[data-nav="ready"] .navpanel.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--ink); padding: 4px var(--gutter) 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }
  .navpanel .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .navpanel .site-nav a {
    padding: 11px 2px; font-size: 14px;
    border-bottom: 1px solid #222d3c; border-left: 0;
  }
  .navpanel .site-nav a.active { color: #fff; border-bottom-color: #222d3c; }
  .navpanel .site-nav a.active::before { content: "\203A\00a0"; color: var(--accent-lift); }
  .navpanel .masthead-right { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
  .navpanel .linkbtn { padding: 10px 12px; font-size: 13px; text-align: center; }

  /* No-script fallback: the panel is inline, so let it wrap to its own row. */
  .masthead:not([data-nav]) .navpanel { flex: 1 0 100%; gap: 10px; flex-wrap: wrap; }
  .masthead:not([data-nav]) .site-nav a { padding: 8px 10px; }

  /* The sticky bar is one row tall here, but an open panel can sit over an
     anchor target, so jumps clear a little more than the bar itself. */
  .band[id] { scroll-margin-top: 90px; }
  .doc-main section { scroll-margin-top: 90px; }

  .hero { padding: 40px 0 44px; }
  .hero.compact { padding: 34px 0 38px; }
  .hero h1 { font-size: 27px; }
  .hero .lede { font-size: 15px; }
  .measure-tight { max-width: none; }
  .hero-visual { padding-top: 30px; }
  .snapcard-shot { height: 148px; }

  .cards, .cards.two, .cards.split { grid-template-columns: 1fr; }
  .checks-2 { grid-template-columns: 1fr; }

  .stat-row { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(odd) { border-right: 0; }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }

  .band { padding: 36px 0; }
  .cta { padding: 36px 0; }

  /* The legal pages drop their side rail and carry the contents as a row of
     chips above the text instead. */
  .doc { flex-direction: column; }
  .doc-rail {
    width: auto; flex: none; position: static; max-height: none;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 18px 0 14px; margin-bottom: 4px;
  }
  .doc-rail nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .doc-rail nav a {
    padding: 6px 10px; font-size: 12px;
    border: 1px solid var(--line); background: var(--surface);
  }
  .doc-rail nav a:hover { border-color: var(--accent); }
  .doc-main { padding: 22px 0 26px; max-width: none; }
  .doc-head h1 { font-size: 21px; }
  .doc-head .meta { letter-spacing: 0.06em; }

  dl.spec { grid-template-columns: 1fr; }
  dl.spec dt { padding-bottom: 0; border-bottom: 0; }

  .panel-body { padding: 14px; }
  .btn { padding: 10px 16px; }
  .btn-lg { padding: 12px 20px; }

  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Below this width a table cannot keep its columns and stay readable, so the
   rows stop being rows: each cell goes full width under its own column
   heading, taken from the <thead> and carried in data-label. */
@media (max-width: 640px) {
  table.grid.stack-sm,
  table.grid.stack-sm tbody,
  table.grid.stack-sm tr,
  table.grid.stack-sm td { display: block; width: 100%; }
  table.grid.stack-sm thead { display: none; }
  table.grid.stack-sm tr {
    padding: 13px 14px; border-bottom: 1px solid var(--line-strong);
  }
  table.grid.stack-sm tr:last-child { border-bottom: 0; }
  table.grid.stack-sm td {
    border: 0; padding: 0 0 9px; white-space: normal;
  }
  table.grid.stack-sm td:last-child { padding-bottom: 0; }
  table.grid.stack-sm td::before {
    content: attr(data-label);
    display: block; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--faint); margin-bottom: 3px;
  }
  /* An empty data-label would otherwise leave a stray blank line. */
  table.grid.stack-sm td[data-label=""]::before { display: none; }
  table.grid.stack-sm td.mono, table.grid.stack-sm td.num { font-size: 12px; }
}

@media (max-width: 480px) {
  h1 { font-size: 22px; }
  .hero h1 { font-size: 24px; }
  .hero .btn-row .btn, .cta .btn-row .btn { flex: 1 1 100%; }
  .stat .value { font-size: 21px; }
  .cta .wrap { gap: 22px; }
  .hero-note { gap: 6px; font-size: 11.5px; }
  .snapcard-strip { grid-template-columns: 1fr 1fr; }
  .snapcard-strip > div:nth-child(2) { border-right: 0; }
  .snapcard-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .snapcard-strip > div:nth-child(3) { grid-column: 1 / -1; }
  .snapcard-head { flex-wrap: wrap; }
  .snapcard-seq { margin-left: 0; order: 3; flex-basis: 100%; }
  .snapcard-shot { height: 132px; }
  .doc-main h2 { font-size: 14.5px; }
}

/* ---------- utilities ---------- */

/* Spacing and measure helpers, so the pages carry no inline style attributes
   and the site can be served under a Content-Security-Policy that refuses
   inline styling outright. */
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-26 { margin-top: 26px; }
.mb-26 { margin-bottom: 26px; }
.measure       { max-width: 44em; }
.measure-tight { max-width: 20em; }
.hero-em { color: #dbe4ef; font-weight: 600; }
.hero.compact { padding: 48px 0 52px; }

/* A two-up whose columns are prose rather than cards: wider gutter, and tops
   aligned instead of stretched. */
.cards.split { gap: 26px; align-items: start; }

/* Two checklists side by side inside one panel body. */
.checks-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 780px) { .checks-2 { grid-template-columns: 1fr; } }

/* Anchored sections clear the sticky masthead when jumped to. */
.band[id] { scroll-margin-top: 62px; }