/* Brimline site. Cool gradient page, glass surfaces, 1px borders, one accent (a second one, violet, only in
   gradients and halos), the gauge colours of the design tokens (site/tokens.css). Light by default, dark with
   the system. Motion is opacity and transform only, and always optional: see the end of this file. */

:root {
  --pad: 16px;
  --topbar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  position: relative;
  background: var(--sg-bg) var(--sg-page-bg);
  color: var(--sg-text);
  font: var(--sg-text-m)/var(--sg-leading) var(--sg-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Two soft halos behind the top of the page (decoration only, never under small text at its peak: see tests/test_contrast.py) */
body::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; z-index: -1; pointer-events: none;
  background: var(--sg-halo-1), var(--sg-halo-2);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sg-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: var(--sg-leading-tight); margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: var(--sg-text-xxl); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--sg-text-xl); font-weight: 650; }
h3 { font-size: var(--sg-text-m); font-weight: 650; letter-spacing: 0; }
p, ul, ol, dl { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .35em; }
b, strong { font-weight: 600; }

code {
  font-family: var(--sg-font-mono); font-size: .86em;
  background: var(--sg-track); padding: .1em .35em; border-radius: 4px;
  overflow-wrap: anywhere;
}

.wrap { width: min(var(--sg-max), 100% - 2 * var(--pad)); margin-inline: auto; }
.narrow { max-width: var(--sg-measure); }
.center { text-align: center; }
.small { font-size: var(--sg-text-s); color: var(--sg-text-2); }
.lead { font-size: 1.15rem; color: var(--sg-text-2); }
.eyebrow { font-size: var(--sg-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-accent); margin-bottom: .6em; }
.note { font-size: var(--sg-text-s); color: var(--sg-text-2); margin-top: var(--sg-space-l); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--sg-text); color: var(--sg-bg); padding: 8px 14px; border-radius: var(--sg-radius-control); text-decoration: none;
}
.skip:focus { top: 12px; }

/* Buttons */
.cta { display: flex; flex-wrap: wrap; gap: var(--sg-space-m); margin: var(--sg-space-xl) 0 var(--sg-space-l); }
.cta.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: var(--sg-radius-control);
  font: 600 var(--sg-text-s)/1.2 var(--sg-font-sans); text-decoration: none; text-align: center;
  border: 1px solid transparent;
}
.btn-primary { background: var(--sg-accent); background: var(--sg-button-bg); color: var(--sg-surface); }
.btn-ghost { border-color: var(--sg-border); color: var(--sg-text); background: var(--sg-surface-2); }
.btn-primary:hover { box-shadow: 0 0 0 2px var(--sg-bg), 0 0 0 4px var(--sg-button-bg); } /* feedback without motion */
.btn-ghost:hover { border-color: var(--sg-text-2); }
@media (prefers-color-scheme: dark) { .btn-primary { color: var(--sg-bg); } }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--sg-surface-2); border-bottom: 1px solid var(--sg-border);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar { background: color-mix(in srgb, var(--sg-surface-2) 82%, transparent); backdrop-filter: blur(12px); }
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-l); min-height: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--sg-text); text-decoration: none; font-weight: 650; font-size: 1.05rem; }
.glyph { width: 22px; height: 22px; flex: none; }
.glyph-liquid { fill: var(--sg-gauge-ok); }
.nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav li + li { margin-top: 0; }
.nav a { display: block; padding: 8px 10px; border-radius: var(--sg-radius-control); color: var(--sg-text-2); text-decoration: none; font-size: var(--sg-text-s); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--sg-text); background: var(--sg-track); }
.nav .lang { border: 1px solid var(--sg-border); padding: 5px 9px; margin-left: 4px; font-weight: 600; }
@media (max-width: 420px) { .hide-xs { display: none; } .nav a { padding: 8px 8px; } }

/* Sections */
.section { padding: var(--sg-space-4xl) 0; }
.section-alt { background: var(--sg-band); border-block: 1px solid var(--sg-border); }
.head { max-width: var(--sg-measure); margin-bottom: var(--sg-space-xxl); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-xxl); align-items: start; }
.grid2.tight { gap: var(--sg-space-l); margin-bottom: var(--sg-space-l); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-l); }
.grid3.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--sg-surface-2); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card);
  box-shadow: var(--sg-shadow); padding: var(--sg-space-xl);
}
.card > :last-child, .card ul:last-child { margin-bottom: 0; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--sg-text-2); font-size: var(--sg-text-s); }

/* Hero */
.hero { padding: var(--sg-space-4xl) 0; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sg-space-3xl); align-items: center; }
.hero h1 { margin-bottom: .45em; }
.hero-mock { margin: 0; }


/* Hero: the providers Brimline reads */
.hero-providers { margin: var(--sg-space-xl) 0 var(--sg-space-m); }
.hero-providers-title { margin: 0 0 var(--sg-space-s); font-size: var(--sg-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--sg-text-2); }
.hero-providers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-s) var(--sg-space-l); }
.hero-providers li { display: inline-flex; align-items: center; gap: .45em; margin: 0; font-size: var(--sg-text-s); font-weight: 600; color: var(--sg-text); }
.plogo { width: 1.35em; height: 1.35em; flex: none; }

/* What Brimline does: several accounts, one gauge */
.multi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sg-space-3xl); align-items: start; margin-top: var(--sg-space-3xl); }
.multi-text { position: sticky; top: 96px; }
.multi .shots { margin: 0; }
.multi-text h3 { font-size: var(--sg-text-xl, 1.5rem); margin-bottom: .5em; }
.multi-text > p { color: var(--sg-text-2); }
.multi-bar { display: inline-flex; align-items: center; gap: 4px; margin: var(--sg-space-l) 0 var(--sg-space-m); padding: 14px 18px; border-radius: 12px; background: var(--sg-surface-2); border: 1px solid var(--sg-border); box-shadow: var(--sg-shadow); }
.mb-track { display: flex; width: 260px; height: 32px; padding: 4px; border: 2.5px solid var(--sg-text); border-radius: 8px; gap: 2px; }
.mb-track i { display: block; height: 100%; border-radius: 2px; }
.mb-track .a1 { width: 14.5%; } .mb-track .a2 { width: 5.5%; } .mb-track .a3 { width: 23.5%; } .mb-track .a4 { width: 17.75%; }
.mb-alert { font: 800 30px/1 var(--sg-font, system-ui); color: var(--sg-gauge-crit); width: 10px; text-align: center; }
.a1 { background: #7445D6; } .a2 { background: #1B6B4C; } .a3 { background: #8C7400; } .a4 { background: #1C68C9; }
.multi-legend { list-style: none; margin: 0 0 var(--sg-space-m); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-xs, 6px) var(--sg-space-l); font-size: var(--sg-text-s); }
.multi-legend li { display: inline-flex; align-items: center; gap: .45em; margin: 0; }
.multi-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.multi-cap { font-size: var(--sg-text-s); color: var(--sg-text-2); }
@media (prefers-color-scheme: dark) {
  .a1 { background: #B48CFF; } .a2 { background: #5CCB98; } .a3 { background: #F4D63A; } .a4 { background: #62AEF5; }
}
@media (max-width: 900px) {
  .multi { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-xl); }
  .multi-text { position: static; }
  .mb-track { width: 200px; }
}

/* Principles */
.principles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sg-space-l); margin: 0; }
.principles li { margin: 0; padding: var(--sg-space-xl); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); background: var(--sg-surface-2); box-shadow: var(--sg-shadow); }
.principles h3 { margin-bottom: .35em; }
.principles p { margin: 0; color: var(--sg-text-2); font-size: var(--sg-text-s); }

/* Code blocks with a copy button */
.code { position: relative; margin: var(--sg-space-m) 0 var(--sg-space-l); }
.code pre {
  margin: 0; padding: var(--sg-space-l); padding-right: 76px;
  background: var(--sg-surface-2); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); box-shadow: var(--sg-shadow);
  font: 13.5px/1.6 var(--sg-font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.code pre code { background: none; padding: 0; font-size: inherit; }
.code-label { margin: 0 0 var(--sg-space-xs); line-height: 20px; font-size: var(--sg-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sg-text-2); }
.copy {
  position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 4px 10px;
  font: 600 var(--sg-text-xs)/1 var(--sg-font-sans); color: var(--sg-text-2);
  background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-control); cursor: pointer;
}
.copy:hover { color: var(--sg-text); }
.code-label ~ .copy { top: 32px; }
.copy.done { color: var(--sg-accent); border-color: var(--sg-accent); }
.copy[hidden] { display: none; }

/* Comparison table: Brimline first, one row per feature. The first column stays in place while the rest scrolls sideways. */
.cmp-hint { display: none; margin: 0 0 var(--sg-space-s); font-size: var(--sg-text-xs); color: var(--sg-text-2); }
.cmp-wrap { position: relative; overflow-x: auto; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); background: var(--sg-surface-2); box-shadow: var(--sg-shadow); }
.cmp-wrap:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
.cmp { width: 100%; min-width: 65rem; border-collapse: separate; border-spacing: 0; font-size: var(--sg-text-xs); line-height: 1.45; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: var(--sg-space-m); border-top: 1px solid var(--sg-border); }
.cmp thead th { border-top: 0; font-size: var(--sg-text-xs); font-weight: 650; color: var(--sg-text); vertical-align: bottom; }
.cmp thead th a { color: inherit; }
.cmp thead th.cmp-me { box-shadow: inset 0 3px 0 var(--sg-accent); }
.cmp tbody th, .cmp tfoot th, .cmp thead th:first-child { position: sticky; left: 0; z-index: 1; width: 11rem; min-width: 11rem; background: var(--sg-surface-2); box-shadow: 1px 0 0 var(--sg-border); font-weight: 600; color: var(--sg-text); }
.cmp td { color: var(--sg-text-2); min-width: 9rem; }
.cmp td.cmp-me { background: var(--sg-surface); color: var(--sg-text); border-left: 1px solid var(--sg-border); border-right: 1px solid var(--sg-border); }
.cmp-tag { display: block; font-size: var(--sg-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sg-text-2); }
.cmp p { margin: 0; }
.cmp-st { display: flex; gap: var(--sg-space-xs); align-items: baseline; font-size: var(--sg-text-s); font-weight: 650; color: var(--sg-text); }
.cmp-st [aria-hidden] { display: inline-block; width: 1.1em; text-align: center; color: var(--sg-accent); }
.cmp-value a { color: inherit; }
.cmp-note { margin-top: var(--sg-space-xxs); }
.cmp-note a { color: inherit; text-decoration-color: var(--sg-border); text-underline-offset: 2px; }
.cmp-note a:hover { color: var(--sg-text); text-decoration-color: currentColor; }
.cmp-more { margin-top: var(--sg-space-xs); }
.cmp-more summary { display: inline-flex; gap: var(--sg-space-xs); align-items: center; cursor: pointer; list-style: none; color: var(--sg-accent); font-weight: 600; }
.cmp-more summary::-webkit-details-marker { display: none; }
.cmp-more summary::before { content: "+"; display: inline-block; width: 1em; text-align: center; }
.cmp-more[open] summary::before { content: "\00d7"; }
.cmp-more p { margin-top: var(--sg-space-xs); }
.cmp tfoot th, .cmp tfoot td { font-weight: 400; color: var(--sg-text-2); }
.cmp-ver { display: block; }

/* Providers */
/* Six tracks: three cards on the first row, two wider ones on the second (no card alone on its row) */
.providers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sg-space-l); }
.providers li { grid-column: span 2; }
.providers li:nth-child(n+4) { grid-column: span 3; }
.providers li { margin: 0; padding: var(--sg-space-xl); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); background: var(--sg-surface-2); box-shadow: var(--sg-shadow); display: flex; flex-direction: column; gap: var(--sg-space-s); align-items: flex-start; }
.prov-name { font-weight: 650; font-size: var(--sg-text-l); }
.prov-note { font-size: var(--sg-text-s); color: var(--sg-text-2); }
.prov-note code { white-space: nowrap; }
.badge { font-size: var(--sg-text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--sg-border); color: var(--sg-text-2); }
.badge-now { border-color: var(--sg-accent); color: var(--sg-accent); }
.providers li:not(.prov-now) { background: transparent; box-shadow: none; }

/* Screenshots of the app (rendered at 2x, shown at their natural size at most) */
.shots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sg-space-xxl); margin: var(--sg-space-xxl) 0; }
.shot { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.shot img { max-width: 100%; height: auto; }
.shot figcaption { font-size: var(--sg-text-s); color: var(--sg-text-2); margin-top: var(--sg-space-s); text-align: center; }
.docs-body .shots { justify-content: flex-start; margin: var(--sg-space-xl) 0; }

/* Documentation */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--sg-space-3xl); padding: var(--sg-space-3xl) 0 var(--sg-space-4xl); align-items: start; }
.docs-nav { position: sticky; top: calc(var(--topbar-h) + 24px); }
.docs-nav-title { font-size: var(--sg-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-text-2); margin-bottom: var(--sg-space-s); }
.docs-nav ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--sg-border); }
.docs-nav li { margin: 0; }
.docs-nav a { display: block; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--sg-text-2); text-decoration: none; font-size: var(--sg-text-s); }
.docs-nav a:hover { color: var(--sg-text); }
.docs-nav a[aria-current="page"] { color: var(--sg-text); font-weight: 600; border-left-color: var(--sg-accent); }
.docs-body { max-width: var(--sg-measure); min-width: 0; }
.docs-body h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.docs-body h2 { font-size: var(--sg-text-l); margin-top: 1.8em; }
.docs-body .lead { margin-bottom: 1.4em; }
.steps { padding-left: 1.4em; }
.steps > li { padding-left: .2em; margin-top: .8em; }
.defs dt { font-weight: 600; margin-top: .8em; }
.defs dd { margin: .15em 0 0; color: var(--sg-text-2); }
.with-glyph .glyph { display: inline-block; vertical-align: -5px; width: 22px; height: 22px; }
.doc-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sg-space-m); }
.doc-cards li { margin: 0; }
.doc-cards a { display: block; height: 100%; padding: var(--sg-space-l); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); background: var(--sg-surface-2); box-shadow: var(--sg-shadow); text-decoration: none; color: var(--sg-text); }
.doc-cards a:hover { border-color: var(--sg-accent); }
.doc-cards b { display: block; color: var(--sg-accent); margin-bottom: 4px; }
.doc-cards span { display: block; font-size: var(--sg-text-s); color: var(--sg-text-2); }
.pager { display: flex; justify-content: space-between; gap: var(--sg-space-m); margin-top: var(--sg-space-3xl); padding-top: var(--sg-space-xl); border-top: 1px solid var(--sg-border); }
.pager a { display: block; padding: var(--sg-space-m) var(--sg-space-l); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); background: var(--sg-surface-2); text-decoration: none; min-width: 0; }
.pager a:hover { border-color: var(--sg-accent); }
.pager small { display: block; color: var(--sg-text-2); font-size: var(--sg-text-xs); }
.pager span { font-weight: 600; }
.pager-next { margin-left: auto; text-align: right; }

/* FAQ, and the relay page of its old address */
.page-relay { padding: var(--sg-space-3xl) 0 var(--sg-space-4xl); }
.page-relay h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.faq { border-top: 1px solid var(--sg-border); }
.qa { border-bottom: 1px solid var(--sg-border); }
.qa summary { cursor: pointer; padding: var(--sg-space-l) 32px var(--sg-space-l) 0; font-weight: 600; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: var(--sg-space-l); font-weight: 400; color: var(--sg-text-2); font-size: 1.2em; line-height: 1.2; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa-a { padding: 0 0 var(--sg-space-l); color: var(--sg-text-2); }
.qa-a p { margin: 0; }

/* Footer */
.footer { border-top: 1px solid var(--sg-border); padding: var(--sg-space-3xl) 0; font-size: var(--sg-text-s); color: var(--sg-text-2); background: var(--sg-surface-2); }
.footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sg-space-xl); }
.footer-brand p { margin: var(--sg-space-s) 0 0; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-s) var(--sg-space-xl); max-width: 520px; }
.footer-links li { margin: 0; }
.footer-links a { color: var(--sg-text-2); text-decoration: none; }
.footer-links a:hover { color: var(--sg-text); text-decoration: underline; }

/* 404 */
.notfound { padding: var(--sg-space-4xl) 0; }
.notfound-glyph { color: var(--sg-text-2); display: flex; justify-content: center; }
.notfound-glyph .glyph { width: 64px; height: 64px; }

/* Narrow screens */
@media (max-width: 900px) {
  .hero-in, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .grid3, .grid3.grid4 { grid-template-columns: minmax(0, 1fr); }
  .providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .providers li, .providers li:nth-child(n+4) { grid-column: auto; }
  .providers li:last-child { grid-column: 1 / -1; }
  .docs { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-xl); padding-top: var(--sg-space-xl); }
  .docs-nav { position: static; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .docs-nav a { margin: 0; border: 1px solid var(--sg-border); border-radius: 999px; padding: 4px 12px; font-size: var(--sg-text-xs); }
  .docs-nav a[aria-current="page"] { border-color: var(--sg-accent); }
}
@media (max-width: 640px) {
  .section, .hero { padding: var(--sg-space-3xl) 0; }
  .cmp-hint { display: block; }
  .cmp tbody th, .cmp tfoot th, .cmp thead th:first-child { width: 7.5rem; min-width: 7.5rem; padding: var(--sg-space-s); }
  .cmp { min-width: 68rem; }
  .cmp td { min-width: 9.5rem; padding: var(--sg-space-s); }
  .providers { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-s); }
  .providers li:not(.prov-now) { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--sg-space-m) var(--sg-space-l); }
  .providers li:not(.prov-now) .prov-name { font-size: var(--sg-text-m); }
  .pager { flex-direction: column; }
  .pager-next { margin-left: 0; }
  .card, .principles li, .providers li { padding: var(--sg-space-l); }
}

/* Anchors under the sticky bar (the fade between pages is in transition.css) */
section[id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* Motion: opacity and transform only, never required to read the page.
   Appearing on scroll: main.js puts reveal-ready on <html> (only when the browser can observe scrolling and
   the visitor has not asked for less motion), then is-visible on each .reveal as it comes into view.
   Without the script, or with reduced motion, nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity .55s ease-out, transform .55s ease-out; }
  .reveal-ready .reveal:not(.is-visible):not(:focus-within) { opacity: 0; transform: translateY(14px); }
  .reveal:nth-child(2) { transition-delay: .06s; }
  .reveal:nth-child(3) { transition-delay: .12s; }
  .reveal:nth-child(n+4) { transition-delay: .18s; }

  /* Small lifts on what can be pressed or read as a card */
  .btn, .doc-cards a, .pager a, .qa summary::after { transition: transform .2s ease-out; }
  .btn:hover, .doc-cards a:hover, .pager a:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.98); }
  .reveal.is-visible:hover { transition-delay: 0s; }
  /* Cards that do not reveal (the Accounts page) get the same lift, eased, instead of jumping */
  .card:not(.reveal) { transition: transform .2s ease-out; }
  .card:hover, .principles li:hover, .providers li:hover { transform: translateY(-3px); transition-duration: .2s; }
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* Gauges that rise (scripts/gauges.py tells how and checks it). Over each gauge of a capture of the app sits its
   cover: the same gauge with nothing in it (gauge-track-*.png, cut out of a capture), as wide as the fill goes. When
   a gauge comes into view its cover slides out to the right and uncovers the capture, which is the real picture: two opposite translations
   (.gm-a moves right, .gm-b, the track, moves left by the same amount) so the track stays still and only the window
   onto it moves. At the end the cover is out of its window and what is shown is the capture, untouched. The
   covers exist only once main.js has put gauge-ready on <html>, and never with reduced motion: without the script,
   or with less motion, the capture is shown as it is. Positions are in pixels of the capture (2x), as percentages. */
.shot-img { position: relative; max-width: 100%; }
.shot-img picture { display: block; }
.shot-panel .shot-img { --h: 1446; }
.shot-states .shot-img { --h: 1560; }
.shot-providers .shot-img { --h: 3082; }
.shot-providers.shot-fr .shot-img { --h: 3110; }
.gms { position: absolute; inset: 0; pointer-events: none; }
.gm { display: none; position: absolute; left: calc(62 / 728 * 100%); width: calc(var(--w) / 728 * 100%); top: calc(var(--y) / var(--h) * 100%); height: calc(16 / var(--h) * 100%); overflow: hidden; }
.gm-a { display: block; width: 100%; height: 100%; overflow: hidden; }
.gm-b {
  display: block; width: 100%; height: 100%;
  background: url("/assets/shots/gauge-track-light.png") 0 0 / calc(604 / var(--w) * 100%) 100% no-repeat;
  background-image: image-set(url("/assets/shots/gauge-track-light.webp") type("image/webp"), url("/assets/shots/gauge-track-light.png") type("image/png"));
}
@media (prefers-color-scheme: dark) {
  .gm-b {
    background-image: url("/assets/shots/gauge-track-dark.png");
    background-image: image-set(url("/assets/shots/gauge-track-dark.webp") type("image/webp"), url("/assets/shots/gauge-track-dark.png") type("image/png"));
  }
}
.gy300 { --y: 300; } .gy418 { --y: 418; } .gy722 { --y: 722; } .gy858 { --y: 858; } .gy1142 { --y: 1142; }
.gy1176 { --y: 1176; } .gy1260 { --y: 1260; } .gy1294 { --y: 1294; } .gy1634 { --y: 1634; }
.gy2164 { --y: 2164; } .gy2192 { --y: 2192; }
.gw18 { --w: 18; } .gw141 { --w: 141; } .gw212 { --w: 212; } .gw248 { --w: 248; } .gw296 { --w: 296; }
.gw356 { --w: 356; } .gw386 { --w: 386; } .gw434 { --w: 434; } .gw493 { --w: 493; } .gw553 { --w: 553; }
.gw604 { --w: 604; }
@keyframes gm-a { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes gm-b { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: no-preference) {
  .gauge-ready .gm { display: block; }
  .gauge-ready .gm.is-done { display: none; }
  .gm:nth-child(2) { --d: .07s; } .gm:nth-child(3) { --d: .14s; } .gm:nth-child(4) { --d: .21s; }
  .gm:nth-child(5) { --d: .28s; } .gm:nth-child(6) { --d: .35s; } .gm:nth-child(n+7) { --d: .42s; }
  .gm.is-visible .gm-a { animation: gm-a 1.4s cubic-bezier(.3, .6, .2, 1) var(--d, 0s) 1 both; }
  .gm.is-visible .gm-b { animation: gm-b 1.4s cubic-bezier(.3, .6, .2, 1) var(--d, 0s) 1 both; }
}
@media print { .gm { display: none !important; } }

/* Héros
   The capture of the window is in the page from the start and holds the space (aspect-ratio). Over it, a hand
   drawn animation of a generic laptop plays once and ends on that capture (4.6 s, no loop). With reduced motion,
   or without CSS animations, only the capture is shown. All durations share one timeline: the keyframes tell the
   story. During the zoom everything but the window (hv-bg) fades out over 0.9 s (50 % to 70 %); the window of the
   drawing is a skeleton, with no text, so the capture can fade in over it in 0.5 s (70 % to 80 %) without two
   texts ever being seen one over the other. The drawing then goes (80 % to 88 %), hidden under the capture.
   The colours of the drawing are tokens (--hv-*), light and dark. */
.hero-stage { position: relative; width: 100%; max-width: 364px; margin-inline: auto; aspect-ratio: 364 / 723; }
.hero-stage picture, .hero-stage img { display: block; width: 100%; height: auto; }
.hero-stage picture { position: relative; z-index: 1; }
.hero-svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
:root {
  --hv-alu-1: #E7ECEF; --hv-alu-2: #C9D2D7; --hv-alu-3: #9FABB2; --hv-key: #252E33;
  --hv-bezel: #0F1518; --hv-glass: #172025; --hv-wall-1: #BEE2E6; --hv-wall-2: #D8D1F6;
  --hv-bar: rgb(255 255 255 / .74); --hv-glare: rgb(255 255 255 / .10); --hv-glare-0: rgb(255 255 255 / 0);
  --hv-shadow: rgb(16 24 28 / .18); --hv-shadow-0: rgb(16 24 28 / 0);
  --hv-cam: #22313A; --hv-win: #ECECEC; --hv-win-line: #B4B8BC; --hv-card: #E3E3E3; --hv-track: var(--sg-track);
  --hv-dot1: #7445D6; --hv-dot2: #1B6B4C; --hv-dot3: #8C7400;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hv-alu-1: #4A565E; --hv-alu-2: #2F393F; --hv-alu-3: #1B2328; --hv-key: #0E1417;
    --hv-bezel: #050809; --hv-glass: #0A0F11; --hv-wall-1: #0F3A40; --hv-wall-2: #2A2358;
    --hv-bar: rgb(16 22 26 / .74); --hv-glare: rgb(255 255 255 / .05); --hv-glare-0: rgb(255 255 255 / 0);
    --hv-shadow: rgb(0 0 0 / .55); --hv-shadow-0: rgb(0 0 0 / 0);
    --hv-cam: #1A262D; --hv-win: #2A2A2A; --hv-win-line: #4A4D50; --hv-card: #3A3A3A; --hv-track: #23282D;
    --hv-dot1: #B48CFF; --hv-dot2: #5CCB98; --hv-dot3: #F4D63A;
  }
}
.hv-st-w1 { stop-color: var(--hv-wall-1); } .hv-st-w2 { stop-color: var(--hv-wall-2); }
.hv-st-a1 { stop-color: var(--hv-alu-1); } .hv-st-a2 { stop-color: var(--hv-alu-2); }
.hv-st-g1 { stop-color: var(--hv-glare); } .hv-st-g0 { stop-color: var(--hv-glare-0); }
.hv-st-s1 { stop-color: var(--hv-shadow); } .hv-st-s0 { stop-color: var(--hv-shadow-0); }
.hv-lip { fill: var(--hv-alu-3); }
.hv-scoop { fill: var(--hv-bezel); opacity: .22; }
.hv-edge { stroke: var(--hv-alu-1); stroke-width: 1; opacity: .9; fill: none; }
.hv-key { fill: var(--hv-key); stroke: var(--hv-key); stroke-width: 1.3; stroke-linejoin: round; }
.hv-pad { fill: var(--hv-alu-1); stroke: var(--hv-alu-3); stroke-width: 1; stroke-linejoin: round; opacity: .9; }
.hv-hinge { fill: var(--hv-alu-3); }
.hv-bezel, .hv-notch { fill: var(--hv-bezel); }
.hv-rim { fill: none; stroke: var(--hv-alu-3); stroke-width: 1; }
.hv-glass { fill: var(--hv-glass); }
.hv-cam { fill: var(--hv-cam); }
.hv-blob { fill: var(--sg-accent); opacity: .10; }
.hv-blob2 { fill: var(--sg-accent-2); opacity: .10; }
.hv-bar { fill: var(--hv-bar); }
.hv-menu { fill: var(--sg-text); opacity: .45; }
.hv-menu-b { opacity: .8; }
.hv-icon, .hv-glyph { fill: var(--sg-text); }
.hv-icon .hv-gline { fill: none; stroke: var(--sg-text); stroke-width: 1.6; stroke-linecap: round; }
.hv-icon .hv-gbang { fill: var(--sg-gauge-crit); }
.hv-dot1 { fill: var(--hv-dot1); } .hv-dot2 { fill: var(--hv-dot2); } .hv-dot3 { fill: var(--hv-dot3); }
.hv-ring { fill: var(--sg-accent); fill-opacity: .18; stroke: var(--sg-accent); stroke-width: 1; }
.hv-desk { fill: var(--sg-surface); opacity: .92; }
.hv-desk-bar { fill: var(--sg-track); }
.hv-tl { fill: var(--sg-border); }
.hv-line { fill: var(--sg-border); }
.hv-tick { fill: var(--sg-border); opacity: .7; }
.hv-cursor { fill: var(--sg-text); stroke: var(--sg-surface); stroke-width: 1.2; stroke-linejoin: round; paint-order: stroke; }
.hv-win { fill: var(--hv-win); stroke: var(--hv-win-line); stroke-width: 2; }
.hv-card { fill: var(--hv-card); }
.hv-track { fill: var(--hv-track); }
.hv-fill.hv-ok { fill: var(--sg-gauge-ok); }
.hv-fill.hv-warn { fill: var(--sg-gauge-warn); }
.hv-fill.hv-crit { fill: var(--sg-gauge-crit); }
.hv-sk { fill: var(--sg-text); opacity: .16; }
.hv-skn { opacity: .3; }
.hv-ska { fill: var(--sg-accent); opacity: .45; }
.hv-world { transform-origin: 0 0; }
.hv-fold { transform-origin: 182px 432px; }
.hv-lid { transform-origin: 182px 430px; }
.hv-ringg { transform-box: fill-box; transform-origin: center; }
.hv-panel { transform-origin: 288px 241px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-svg { display: block; animation: hv-out 4.6s linear 1 both; }
  .hero-stage picture { animation: hv-final 4.6s linear 1 both; }
  .hv-world { animation: hv-zoom 4.6s linear 1 both; }
  .hv-bg { animation: hv-bg 4.6s linear 1 both; }
  .hv-fold { animation: hv-fold 4.6s linear 1 both; }
  .hv-lid { animation: hv-open 4.6s linear 1 both; }
  .hv-on { animation: hv-on 4.6s linear 1 both; }
  .hv-cur { animation: hv-move 4.6s linear 1 both; }
  .hv-ringg { animation: hv-click 4.6s linear 1 both; }
  .hv-panel { animation: hv-pop 4.6s linear 1 both; }
}
/* The hero on a phone (under 768 px). The laptop comes first, the text of the hero after it. Where the browser can link
   an animation to scrolling (Chrome 115, Safari 26, Firefox 159: MDN browser-compat-data, animation-timeline and
   view-timeline-inset), the laptop stays in the middle of the screen (.hero-stage, sticky inside .hero-track, a tall
   box) and the story advances as the visitor scrolls: the laptop opens, the pointer clicks the glyph, the window opens
   and the camera moves onto it, then the capture takes over; once the track is done the page goes on to the text. The
   keyframes are the ones above: 0 % to 100 % of the timeline instead of 0 to 4.6 s. The view timeline of .hero-track is
   inset to the sticky window (while the laptop is held still) so the animation runs exactly while it is pinned.
   Elsewhere (older browsers) the hero plays once by itself, as on a computer. Reduced motion: the capture alone. */
@media (max-width: 767px) {
  .hero-fig { order: -1; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-fig {
      --hero-w: min(100vw - 2 * var(--pad), 364px, (100svh - var(--topbar-h) - 24px) * .5035);
      --hero-h: calc(var(--hero-w) * 723 / 364);
      --hero-off: calc((100svh - var(--topbar-h) - var(--hero-h)) / 2);
    }
    .hero-track {
      height: calc(var(--hero-h) + 150svh);
      view-timeline: --hero block;
      view-timeline-inset: calc(var(--topbar-h) + var(--hero-off)) var(--hero-off);
    }
    .hero-stage { position: sticky; top: calc(var(--topbar-h) + var(--hero-off)); width: var(--hero-w); max-width: none; }
    .hero-svg, .hero-stage picture, .hv-world, .hv-bg, .hv-fold, .hv-lid, .hv-on, .hv-cur, .hv-ringg, .hv-panel {
      animation-duration: auto; animation-timeline: --hero; animation-range: contain 0% contain 100%;
    }
  }
}
/* Hide without removing, drawn (hiding_figure() in scripts/pages.py) */
.hidefig { margin: 0; padding: var(--sg-space-xl); background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-card); box-shadow: var(--sg-shadow); }
.hidefig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-xl); counter-reset: hf; }
.hidefig-steps li { counter-increment: hf; }
.hidefig-steps p { margin: 0 0 var(--sg-space-s); font-size: var(--sg-text-s); }
.hidefig-steps li > p:first-child::before { content: counter(hf) ". "; font-weight: 700; color: var(--sg-accent); }
.mb { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 34px; padding: 0 14px; border-radius: var(--sg-radius-control); background: var(--sg-track); color: var(--sg-text); overflow: hidden; }
.mb .mb-i { width: 17px; height: 17px; flex: none; fill: currentColor; }
.mb-app { display: inline-flex; flex: none; }
.mb-bar { flex: none; width: 3px; height: 18px; border-radius: 2px; background: var(--sg-accent); }
.mb-arrow { flex: none; font-weight: 700; font-size: 18px; line-height: 1; color: var(--sg-accent); }
.mb-own { display: inline-flex; flex: none; }
.mb-own .mb-gauge { height: 18px; width: 40px; }
.mb-clock { flex: none; font-size: var(--sg-text-s); font-variant-numeric: tabular-nums; }
.hidefig-hint { display: flex; align-items: center; gap: var(--sg-space-s); color: var(--sg-text-2); font-size: var(--sg-text-xs) !important; margin-top: var(--sg-space-s) !important; }
.hidefig-hint kbd { font: inherit; font-weight: 600; padding: 1px 6px; border: 1px solid var(--sg-border); border-radius: 4px; background: var(--sg-bg); color: var(--sg-text); }
.hidefig figcaption { margin-top: var(--sg-space-l); font-size: var(--sg-text-xs); color: var(--sg-text-2); }

.mb { min-width: 0; }
@media (max-width: 480px) {
  .hidefig { padding: var(--sg-space-l); }
  .mb { gap: 8px; padding: 0 8px; height: 30px; }
  .mb .mb-i { width: 14px; height: 14px; }
  .mb-own .mb-gauge { height: 15px; width: 32px; }
  .mb-bar { height: 15px; }
  .mb-clock { font-size: var(--sg-text-xs); }
}
@keyframes hv-fold { 0% { transform: none; animation-timing-function: ease-in; } 7%, 100% { transform: scaleY(0); } }
@keyframes hv-open { 0%, 7% { transform: scaleY(0); animation-timing-function: ease-out; } 18%, 100% { transform: none; } }
@keyframes hv-on { 0%, 14% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes hv-move { 0%, 22% { opacity: 0; transform: translate(150px, 350px); } 26% { opacity: 1; transform: translate(150px, 350px); animation-timing-function: ease-in-out; } 40%, 47% { opacity: 1; transform: translate(290px, 227px); } 55%, 100% { opacity: 0; transform: translate(290px, 227px); } }
@keyframes hv-click { 0%, 41% { transform: scale(1); } 44% { transform: scale(1.7); } 49%, 100% { transform: scale(1); } }
@keyframes hv-pop { 0%, 43% { opacity: 0; transform: translateY(-6px); animation-timing-function: ease-out; } 49%, 100% { opacity: 1; transform: none; } }
@keyframes hv-zoom { 0%, 50% { transform: none; animation-timing-function: ease-in-out; } 68%, 100% { transform: translate(-1197.4px, -1154.2px) scale(4.7895); } }
@keyframes hv-bg { 0%, 50% { opacity: 1; animation-timing-function: ease-in-out; } 70%, 100% { opacity: 0; } }
@keyframes hv-final { 0%, 70% { opacity: 0; animation-timing-function: ease-in-out; } 80%, 100% { opacity: 1; } }
@keyframes hv-out { 0%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }