/* site.css — the base layout shared by every page. Consumes tokens.css ONLY (the cloud's law:
   colours and px live in tokens.css; this file composes them). Same brand as the app, not the
   same shell — no sidebar, no rail, no board. Since 2026-09-15 the v2 world (static/css/v2.css,
   loaded after this file) owns the look; this file keeps the base, the chrome, the prose pages
   (technical, legal) and the screenshot lightbox. The v1 home's components (the card file, the
   loop ring, tabs, tiles, the money and comparison strips, the request form) were removed with
   the v1 home — they live at git tag v1-next-maistro-io. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: var(--mc-font);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mc-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; border-radius: var(--mc-r-xs); }
img, video { max-width: 100%; height: auto; }
code, pre, .mono { font-family: var(--mc-font-mono); }
code { font-size: .9em; background: var(--mc-surface); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); padding: 0 .35em; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.012em; margin: 0 0 .5em; font-weight: 650; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: var(--mc-fs-lg); }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--mc-sp-5); }
.skip { position: absolute; left: -999em; top: 0; background: var(--mc-surface-solid); padding: var(--mc-sp-2) var(--mc-sp-4); z-index: 100; }
.skip:focus { left: var(--mc-sp-4); top: var(--mc-sp-4); }
.eyebrow { font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); margin: 0 0 var(--mc-sp-3); }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--mc-muted); max-width: 42em; }
.muted { color: var(--mc-muted); }
.small { font-size: var(--mc-fs-sm); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--mc-sp-2); padding: var(--mc-sp-3) var(--mc-sp-5); border-radius: var(--mc-r-xs); border: var(--mc-hairline-w) solid transparent; font: inherit; font-weight: 600; cursor: pointer; transition: transform var(--mc-tr), background var(--mc-tr); white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(var(--mc-lift)); }
.btn-primary { background: var(--mc-accent); color: var(--mc-on-accent); }
.btn-ghost { background: var(--mc-surface); color: var(--mc-text); border-color: var(--mc-hairline); }
.btn-ghost:hover { border-color: var(--mc-accent); }
.btns { display: flex; flex-wrap: wrap; gap: var(--mc-sp-3); }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: var(--mc-bg); border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-sp-4); min-height: calc(var(--mc-sp-6) * 2); }
.lockup { display: inline-flex; align-items: center; }
.logochip { display: inline-grid; place-items: center; background: var(--mc-logo-chip); border-radius: var(--mc-r-xs); padding: var(--mc-sp-1) var(--mc-sp-2); }
.logochip img { height: var(--mc-logo-h); width: auto; display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--mc-sp-4); }
.nav-list a { color: var(--mc-text); font-weight: 500; }
.nav-list a[aria-current="page"] { color: var(--mc-accent); }
.nav-list .btn { padding: var(--mc-sp-2) var(--mc-sp-4); }
.nav-signin a { color: var(--mc-muted); }
.nav-toggle { display: none; font: inherit; background: var(--mc-surface); color: var(--mc-text); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); padding: var(--mc-sp-2) var(--mc-sp-3); }
.theme { font: inherit; font-size: var(--mc-fs-lg); background: var(--mc-surface); color: var(--mc-text); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); width: var(--mc-sp-6); height: var(--mc-sp-6); display: grid; place-items: center; cursor: pointer; }
@media (max-width: 56em) {
  .nav-toggle { display: inline-block; }
  .nav-list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--mc-bg-2); border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); padding: var(--mc-sp-3) var(--mc-sp-5) var(--mc-sp-5); }
  .nav-open .nav-list { display: flex; }
  .nav-list li { padding: var(--mc-sp-2) 0; }
}

/* page heads (prose pages) */
.hero { padding: calc(var(--mc-sp-6) * 2.5) 0 calc(var(--mc-sp-6) * 2); }
.hero-page { padding-bottom: var(--mc-sp-6); }
.hero h1 { margin-bottom: var(--mc-sp-4); }
.hero .lede { margin-bottom: var(--mc-sp-5); }
figcaption { font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); color: var(--mc-muted); margin-top: calc(-1 * var(--mc-sp-2)); }
figure { margin: 0 0 var(--mc-sp-5); }

/* product screenshots — one pair per subject, the theme picks (tools/shots.py) */
.shot { margin: var(--mc-sp-4) 0 var(--mc-sp-5); }
.shot img { display: block; width: 100%; height: auto; border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); background: var(--mc-surface-solid); cursor: zoom-in; }
.shot img.light { display: none; }
html.light .shot img.dark { display: none; }
html.light .shot img.light { display: block; }
.shot figcaption { margin-top: var(--mc-sp-2); }
.lightbox { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--mc-bg) 92%, transparent); display: grid; place-items: center; padding: var(--mc-sp-5); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: calc(100vh - var(--mc-sp-6) * 3); width: auto; height: auto; border-radius: var(--mc-r-xs); border: var(--mc-hairline-w) solid var(--mc-hairline); background: var(--mc-surface-solid); }
.lightbox figcaption { color: var(--mc-text); font-size: 1rem; text-align: center; max-width: 60em; margin-top: var(--mc-sp-3); }
.lightbox .close { position: absolute; top: var(--mc-sp-4); right: var(--mc-sp-4); font: inherit; font-size: var(--mc-fs-xl); line-height: 1; width: var(--mc-sp-6); height: var(--mc-sp-6); border-radius: var(--mc-r-xs); border: var(--mc-hairline-w) solid var(--mc-hairline); background: var(--mc-surface-solid); color: var(--mc-text); cursor: pointer; }
body.lightbox-open { overflow: hidden; }
.shot.tight { margin: var(--mc-sp-3) 0 0; }
.prose .shot { max-width: none; }
[hidden] { display: none !important; }

/* prose pages */
.prose { max-width: 46em; padding-bottom: calc(var(--mc-sp-6) * 2); }
.prose h2 { margin-top: calc(var(--mc-sp-6) * 1.5); font-size: 1.6rem; }
.prose h3 { margin-top: var(--mc-sp-6); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: var(--mc-sp-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--mc-sp-2) var(--mc-sp-3); border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); vertical-align: top; }
.prose th { font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted); }
.prose pre { background: var(--mc-surface-solid); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); padding: var(--mc-sp-4); overflow-x: auto; font-size: .86rem; }
.prose blockquote { border-left: 1px solid var(--mc-hairline); margin: var(--mc-sp-5) 0; padding-left: var(--mc-sp-4); color: var(--mc-muted); }
.note { background: var(--mc-surface); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); padding: var(--mc-sp-3) var(--mc-sp-4); font-size: .95rem; }
.slot { border: var(--mc-hairline-w) dashed var(--mc-hairline); border-radius: var(--mc-r-xs); padding: var(--mc-sp-3) var(--mc-sp-4); color: var(--mc-muted); font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); }

/* footer */
.foot { border-top: var(--mc-hairline-w) solid var(--mc-hairline); padding: calc(var(--mc-sp-6) * 1.5) 0 var(--mc-sp-6); color: var(--mc-muted); font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--mc-sp-6); align-items: start; }
@media (max-width: 48em) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .logochip { margin-bottom: var(--mc-sp-3); }
.brand-line { font-size: 1.05rem; color: var(--mc-text); font-weight: 500; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mc-sp-3) var(--mc-sp-5); }
.foot-nav a { color: var(--mc-muted); }
.foot-meta { grid-column: 1 / -1; font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); margin: 0; }