/* cpleks.com — the site's one stylesheet.
 *
 * The palette, radii and weights are the panel's own (web/src/components/ui.css):
 * the same near-black ground, the same three greys of ink, the same green, the
 * same amber and coral, the same cyan focus ring. A buyer who opens the panel
 * after reading this site should recognise it. Two things differ on purpose:
 *
 *  - The panel commits to one dark look; a public site cannot, so both themes
 *    are designed here. Dark is the default token set; light is chosen by the
 *    reader's system (prefers-color-scheme) or by the toggle (data-theme on
 *    <html>, stored by site.js).
 *  - The panel's faintest ink (#6B7684) is below 4.5:1 on its ground, which is
 *    acceptable for a console's labels and not for a page people read. The
 *    site's --ink3 and --coral are lifted a step so that every text token
 *    passes WCAG AA (4.5:1) on every ground token of its theme, and the focus
 *    ring passes 3:1 — measured, in both themes, when the tokens last changed.
 *  - A form field's edge is the only thing that marks it as a field (its fill
 *    is within 1.1:1 of a card), so it has its own token, --input-edge, at
 *    3:1 or more against the fill and every ground (WCAG 1.4.11). --border-lit
 *    stays for decorative card edges. `php shop/web/dev/design-preview.php
 *    --check` measures it.
 *
 * No web font: the system stack. Archivo is vendored inside the panel; this
 * site loads nothing from a third-party host (docs/SHOP.md §1).
 *
 * No inline styles anywhere in the templates: the CSP is default-src 'self',
 * which blocks style attributes. Every visual is a class in this file.
 *
 * The class vocabulary other parts may use (docs/SHOP.md §4.4) is marked
 * "VOCABULARY" below; everything else belongs to the layout and the marketing
 * pages and may change without notice.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: dark;
  --bg:         #0F1216;
  --bg-alt:     #12161B;
  --panel:      #171B21;
  --panel2:     #1D222A;
  --panel3:     #232A34;
  --border:     #262C35;
  --border-lit: #333B47;
  --input-edge: #6B7684;
  --ink:        #E8EBEF;
  --ink2:       #A3ACB9;
  --ink3:       #939EAD;

  --accent:      #6EE787;
  --accent-lo:   #2FA85C;
  --accent-ink:  #6EE787;
  --accent-hover:#9BF0AC;
  --accent-dim:  #1F3A28;
  --accent-edge: #2F5F3C;
  --on-accent:   #0F1216;

  --amber:       #F0A64B;
  --amber-edge:  #6B5324;
  --amber-bg:    #221D14;
  --coral:       #F4776C;
  --coral-edge:  #6B302B;
  --coral-bg:    #241618;
  --cyan:        #4CC9E8;
  --info-edge:   #2A4C5B;
  --info-bg:     #14212A;

  --glow:        #1A2430;
  --glow2:       #1B2A26;
  --violet:      #B39DFB;
  --grid-line:   rgba(232, 235, 239, .045);
  --shadow:      0 18px 50px rgba(0, 0, 0, .45);
  --shot-bg:     #0C0F12;

  --r-sm: 9px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 16px;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 16px;
  --measure: 72ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:         #F5F6F8;
    --bg-alt:     #ECEFF3;
    --panel:      #FFFFFF;
    --panel2:     #F3F5F8;
    --panel3:     #E8EBF0;
    --border:     #DCE0E6;
    --border-lit: #C5CCD5;
    --input-edge: #7A8491;
    --ink:        #12161B;
    --ink2:       #3F4A58;
    --ink3:       #566170;

    --accent:      #3FCB6C;
    --accent-lo:   #26A657;
    --accent-ink:  #1B7A43;
    --accent-hover:#145F33;
    --accent-dim:  #E3F5E8;
    --accent-edge: #9AD5AE;
    --on-accent:   #0B1A10;

    --amber:       #8F5600;
    --amber-edge:  #E2C38C;
    --amber-bg:    #FFF6E5;
    --coral:       #B3362B;
    --coral-edge:  #EDB3AD;
    --coral-bg:    #FFF0EE;
    --cyan:        #0B7FA0;
    --info-edge:   #A9D3E2;
    --info-bg:     #EEF7FB;

    --glow:        #E2EBF4;
    --glow2:       #E3F1E8;
  --violet:      #5B3FC4;
  --grid-line:   rgba(18, 22, 27, .06);
    --shadow:      0 18px 44px rgba(18, 22, 27, .12);
    --shot-bg:     #E9ECF1;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:         #F5F6F8;
  --bg-alt:     #ECEFF3;
  --panel:      #FFFFFF;
  --panel2:     #F3F5F8;
  --panel3:     #E8EBF0;
  --border:     #DCE0E6;
  --border-lit: #C5CCD5;
  --input-edge: #7A8491;
  --ink:        #12161B;
  --ink2:       #3F4A58;
  --ink3:       #566170;

  --accent:      #3FCB6C;
  --accent-lo:   #26A657;
  --accent-ink:  #1B7A43;
  --accent-hover:#145F33;
  --accent-dim:  #E3F5E8;
  --accent-edge: #9AD5AE;
  --on-accent:   #0B1A10;

  --amber:       #8F5600;
  --amber-edge:  #E2C38C;
  --amber-bg:    #FFF6E5;
  --coral:       #B3362B;
  --coral-edge:  #EDB3AD;
  --coral-bg:    #FFF0EE;
  --cyan:        #0B7FA0;
  --info-edge:   #A9D3E2;
  --info-bg:     #EEF7FB;

  --glow:        #E2EBF4;
  --glow2:       #E3F1E8;
  --violet:      #5B3FC4;
  --grid-line:   rgba(18, 22, 27, .06);
  --shadow:      0 18px 44px rgba(18, 22, 27, .12);
  --shot-bg:     #E9ECF1;
}

/* ------------------------------------------------------------------ base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; outline: none; }

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); letter-spacing: -0.028em; font-weight: 750; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); letter-spacing: -0.022em; }
h3 { font-size: 1.12rem; }
p { margin: 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--accent-dim); color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

code, kbd, pre, samp { font-family: var(--mono); font-size: .92em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Controls that need the script are hidden until it has run, so a reader
   without JavaScript never meets a button that does nothing. */
html:not(.js) .js-only { display: none !important; }

/* `hidden` means hidden whatever the element's class says: .btn and .field
   set a display of their own, which would otherwise outrank the browser's
   [hidden] rule and draw a control a page's script has not switched on yet
   (the renewal page's button, the sign-in page's code field). */
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 100;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border-lit);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 10px; }

/* ------------------------------------------------ VOCABULARY: structure -- */

.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 720px) { :root { --gutter: 28px; } }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack > * { margin: 0; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  min-width: 0;
}
@media (max-width: 480px) { .card { padding: 18px 16px; } }

.muted { color: var(--ink2); }
.mono { font-family: var(--mono); font-size: .92em; }
.keep { white-space: nowrap; }

/* A page the web tier draws itself (the account, sign-in, a message, the
   guide, a legal text) puts a bare .container straight into <main>; it gets
   the same breathing room as a marketing page's head. The marketing pages
   wrap theirs in sections, so this never doubles up. */
main > .container { padding-block: clamp(36px, 5vw, 64px) 24px; }

/* Structure the vocabulary leaves to plain elements, styled once so every
   part's pages agree: a definition list, a disclosure, preformatted text. */
dl { margin: 0; }
dt { color: var(--ink2); font-weight: 600; }
dd { margin: 0; }
.row > dt { min-width: 10rem; }
pre { overflow-x: auto; max-width: 100%; }
details > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details > summary:hover { color: var(--accent-ink); }
details[open] > summary { margin-bottom: .75rem; }
.card details { border-top: 1px solid var(--border); padding-top: .9rem; }

/* --------------------------------------------------- VOCABULARY: buttons -- */

.btn {
  font: inherit;
  font-size: .95rem;
  font-weight: 550;
  line-height: 1.2;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-lit);
  background: var(--panel2);
  color: var(--ink);
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--panel3); color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.btn .icon { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: linear-gradient(150deg, var(--accent), var(--accent-lo));
  color: var(--on-accent);
  border-color: transparent;
  font-weight: 650;
}
.btn-primary:hover { background: linear-gradient(150deg, var(--accent-hover), var(--accent)); color: var(--on-accent); }
:root[data-theme="light"] .btn-primary:hover { background: linear-gradient(150deg, #5BD983, var(--accent-lo)); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn-primary:hover { background: linear-gradient(150deg, #5BD983, var(--accent-lo)); }
}

.btn-secondary { background: var(--panel2); border-color: var(--border-lit); }

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink2);
  padding-inline: 12px;
}
.btn-quiet:hover { background: var(--panel2); color: var(--ink); }

.btn-lg { font-size: 1.02rem; padding: 13px 22px; min-height: 50px; border-radius: var(--r-md); }
.btn-block { width: 100%; }

/* ----------------------------------------------------- VOCABULARY: forms -- */

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.label { font-size: .92rem; font-weight: 600; color: var(--ink); }

.input,
textarea.input,
select.input {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--panel2);
  border: 1px solid var(--input-edge);
  border-radius: var(--r-md);
  padding: 11px 14px;
  width: 100%;
  min-height: 46px;
}
.input:hover:not(:disabled) { border-color: var(--ink3); }
textarea.input { font-family: var(--mono); font-size: .9rem; line-height: 1.5; resize: vertical; }
.input::placeholder { color: var(--ink3); opacity: 1; }
.input:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); }
.input:disabled { opacity: .6; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--coral); }

.hint { font-size: .86rem; color: var(--ink3); line-height: 1.5; }

/* --------------------------------------------------- VOCABULARY: notices -- */

.notice {
  border: 1px solid var(--info-edge);
  background: var(--info-bg);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  line-height: 1.55;
}
.notice > * + * { margin-top: .5rem; }
.notice-ok    { border-color: var(--accent-edge); background: var(--accent-dim); }
.notice-warn  { border-color: var(--amber-edge);  background: var(--amber-bg); }
.notice-error { border-color: var(--coral-edge);  background: var(--coral-bg); }
.notice strong { color: var(--ink); }

/* ----------------------------------------------------- VOCABULARY: pills -- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-lit);
  background: var(--panel2);
  color: var(--ink2);
  white-space: nowrap;
  line-height: 1.4;
}
.pill-ok   { border-color: var(--accent-edge); color: var(--accent-ink); }
.pill-warn { border-color: var(--amber-edge);  color: var(--amber); }
.pill-bad  { border-color: var(--coral-edge);  color: var(--coral); }

/* ------------------------------------------------------ VOCABULARY: kbd --- */

.kbd, kbd {
  font-family: var(--mono);
  font-size: .82em;
  padding: 1px 7px;
  border: 1px solid var(--border-lit);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel2);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------- VOCABULARY: table --- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  border-spacing: 0;
  overflow: hidden;
}
.table th, .table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink3);
  background: var(--panel2);
}
.table tr:last-child td { border-bottom: 0; }
.table td.mono, .table .mono { word-break: break-all; }
@media (max-width: 640px) {
  /* A table wider than a phone scrolls inside itself, never the page. */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------- VOCABULARY: prose --- */

.prose {
  max-width: var(--measure);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.02rem;
}
.prose > * + * { margin-top: 1em; }
/* A guide chapter's fragment is its own div.prose inside the article.prose
   the web tier wraps it in: the inner one adds nothing of its own. */
.prose .prose { max-width: none; font-size: inherit; line-height: inherit; }
.prose h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); margin-bottom: .2em; }
.prose h2 { font-size: 1.45rem; margin-top: 2.1em; padding-top: .2em; }
.prose h3 { font-size: 1.14rem; margin-top: 1.7em; }
.prose h4 { font-size: 1rem; margin-top: 1.4em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose li > ul, .prose li > ol { margin-top: .35em; }
.prose strong { font-weight: 650; }
.prose small, .prose .muted { color: var(--ink2); }
.prose a { color: var(--accent-ink); }
.prose code {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .08em .38em;
  font-size: .88em;
}
.prose pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.55;
  font-size: .9rem;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose blockquote {
  margin-inline: 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid var(--border-lit);
  color: var(--ink2);
}
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.prose th { color: var(--ink2); font-weight: 650; }
.prose dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4em 1.2em; }
.prose dt { color: var(--ink2); font-weight: 600; }
.prose dd { margin: 0; }
.prose hr { margin: 2.2em 0; }
.prose .notice { max-width: none; }
.prose figure, .prose .figure { margin-block: 1.6em; }
@media (max-width: 640px) {
  .prose table { display: block; overflow-x: auto; }
  .prose dl { grid-template-columns: 1fr; gap: .1em; }
  .prose dd + dt { margin-top: .6em; }
}

/* --------------------------------------------------- VOCABULARY: figure --- */

.figure { margin: 0; min-width: 0; }
.figure > img,
.figure > a > img,
.figure .shot-frame {
  width: 100%;
  border: 1px solid var(--border-lit);
  border-radius: var(--r-lg);
  background: var(--shot-bg);
  box-shadow: var(--shadow);
}
.figure .shot-frame { overflow: hidden; }
.figure a.shot-frame { display: block; }
.figure .shot-frame img { width: 100%; }
.figure a.shot-frame:hover { border-color: var(--accent-edge); }
.figure figcaption {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--ink2);
  line-height: 1.5;
}

/* The empty frame drawn until a screenshot exists: the panel's shape (a rail
   and a body) in its own quiet greys, with the screen's name in the middle.
   It says what will be here without pretending to be it. */
.shot-empty {
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-columns: 9% 1fr;
}
.shot-rail {
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex; flex-direction: column; align-items: center;
  gap: 10%; padding-top: 18%;
}
.shot-rail i {
  display: block; width: 46%; aspect-ratio: 1; border-radius: 28%;
  background: var(--panel3);
}
.shot-rail i:first-child { background: var(--accent-dim); border: 1px solid var(--accent-edge); }
.shot-body {
  position: relative;
  display: flex; flex-direction: column;
  padding: 6% 7%;
  gap: 6%;
}
.shot-bar { display: block; height: 7%; width: 38%; border-radius: 6px; background: var(--panel3); }
.shot-name {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border: 1px dashed var(--border-lit);
  border-radius: var(--r-md);
  color: var(--ink2);
  font-weight: 600;
  font-size: clamp(.8rem, .7rem + .5vw, 1.05rem);
  padding: 0 1em;
}
.shot-lines { display: flex; gap: 4%; height: 12%; }
.shot-lines i { flex: 1; border-radius: 8px; background: var(--panel2); border: 1px solid var(--border); }

/* ---------------------------------------------------- VOCABULARY: steps --- */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 16px 18px 16px 62px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 60px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 16px; top: 15px;
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: .9rem;
  background: var(--accent-dim);
  border: 1px solid var(--accent-edge);
  color: var(--accent-ink);
}
.steps > li > * + * { margin-top: .5rem; }
.prose .steps { padding-left: 0; }
.prose .steps > li + li { margin-top: 0; }

/* ------------------------------------------------------------ the header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand .wordmark { width: 104px; height: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--ink2);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 550;
}
.nav-list a:hover { color: var(--ink); background: var(--panel2); }
.nav-list a[aria-current="page"] { color: var(--ink); background: var(--panel3); }

.nav-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  color: var(--ink2);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.lang-switch:hover { color: var(--ink); background: var(--panel2); }
.lang-switch .lang-code {
  font-size: .72rem; letter-spacing: .06em;
  border: 1px solid var(--border-lit); border-radius: 5px; padding: 1px 5px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--panel2); }
.icon-btn .icon { width: 20px; height: 20px; }

/* The theme toggle shows the theme it will switch TO. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle[data-current="dark"] .icon-sun { display: block; }
.theme-toggle[data-current="dark"] .icon-moon { display: none; }

.nav-toggle { display: none; margin-left: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 880px) {
  html.js .nav-toggle { display: inline-grid; }
  html.js .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  html.js .site-nav.is-open { display: flex; }
  html.js .nav-list { flex-direction: column; align-items: stretch; }
  html.js .nav-list a { min-height: 46px; font-size: 1.02rem; }
  html.js .nav-tools { border-left: 0; margin-left: 0; padding-left: 0; padding-top: 8px; border-top: 1px solid var(--border); justify-content: space-between; }

  /* Without the script the menu cannot open, so the links wrap below the
     brand instead of hiding. */
  html:not(.js) .site-header-inner { flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .site-nav { margin-left: 0; flex-wrap: wrap; width: 100%; }
  html:not(.js) .nav-list { flex-wrap: wrap; }
}

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

.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink2);
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  padding-block: 48px 36px;
}
.footer-grid h2 {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 12px;
}
.footer-brand .wordmark { width: 96px; height: auto; color: var(--ink); display: block; margin-bottom: 14px; }
.footer-company { font-style: normal; line-height: 1.65; }
.footer-company .co-name { color: var(--ink); font-weight: 600; }
.footer-company dl { margin: 10px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.footer-company dt { color: var(--ink3); font-weight: 500; }
.footer-company dd { margin: 0; color: var(--ink2); min-width: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-links a { color: var(--ink2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-base {
  border-top: 1px solid var(--border);
  padding-block: 18px 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--ink3);
  font-size: .86rem;
}
.footer-base .paddle-note { color: var(--ink2); }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-company dl { grid-template-columns: 1fr; gap: 0; }
  .footer-company dd + dt { margin-top: 6px; }
}

/* --------------------------------------------------------------- sections -- */

.band { padding-block: 88px; }
.band-tight { padding-block: 56px; }
.band + .band { border-top: 1px solid var(--border); }
.band-alt { background: var(--bg-alt); }
@media (max-width: 720px) { .band { padding-block: 60px; } .band-tight { padding-block: 40px; } }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink3);
}
.section-head { max-width: 760px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.section-head .lead { color: var(--ink2); font-size: 1.08rem; line-height: 1.65; }
.lead { font-size: 1.1rem; line-height: 1.65; color: var(--ink2); }

.page-head { padding-block: 64px 32px; }
.page-head .lead { max-width: 720px; margin-top: 14px; }
.page-head .notice { max-width: 760px; margin-top: 22px; }
.page-head + .band-tight { padding-top: 8px; }
@media (max-width: 720px) { .page-head { padding-block: 40px 20px; } }

.icon { width: 20px; height: 20px; flex: none; }
h2.h3-like { font-size: 1.12rem; letter-spacing: -0.01em; }

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

.hero {
  position: relative;
  padding-block: 72px 80px;
  background:
    radial-gradient(1100px 560px at 10% -12%, var(--glow) 0%, transparent 62%),
    radial-gradient(900px 480px at 92% 8%, var(--glow2) 0%, transparent 60%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-copy h1 { max-width: 15ch; }
.hero-copy .lead { max-width: 36rem; font-size: 1.14rem; }
.hero-actions { margin-top: 6px; }
.hero-note { font-size: .92rem; color: var(--ink3); }
.hero-shot { min-width: 0; }
@media (max-width: 960px) {
  .hero { padding-block: 48px 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy h1 { max-width: 20ch; }
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 56px;
}
.facts li { background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.facts .fact-value { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.facts .fact-label { font-size: .86rem; color: var(--ink2); }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- features -- */

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

.feature { display: flex; flex-direction: column; gap: 10px; }
.feature h3 { display: flex; align-items: center; gap: 12px; font-size: 1.08rem; }
.feature p { color: var(--ink2); font-size: .97rem; line-height: 1.62; }
.feature .note { font-size: .88rem; color: var(--ink3); }
.feature-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--panel2);
  border: 1px solid var(--border-lit);
  color: var(--accent-ink);
  flex: none;
}

/* ----------------------------------------------------------------- modules -- */

.module-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.module-group h3 {
  font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 12px;
}
.module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.module-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-lit);
  border-radius: 999px;
  background: var(--panel2);
  font-size: .92rem; font-weight: 550;
  color: var(--ink);
}
.module-list li .mod-note { font-size: .76rem; font-weight: 600; line-height: 1; }
.module-list li .mod-note a { color: var(--amber); text-decoration: none; padding: 0 2px; border-radius: 4px; }
.module-list li .mod-note a:hover { text-decoration: underline; }
.footnotes li:target { color: var(--ink); }
.module-count { font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.footnotes { margin-top: 22px; color: var(--ink3); font-size: .88rem; line-height: 1.6; display: grid; gap: 4px; }

/* ------------------------------------------------------------ architecture -- */

.arch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1.2fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 36px;
}
.arch-node {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.arch-node .arch-name { font-family: var(--mono); font-size: .95rem; color: var(--ink); font-weight: 600; }
.arch-node .arch-name.plain { font-family: var(--font); font-size: 1rem; }
.arch-node p { font-size: .9rem; color: var(--ink2); line-height: 1.55; }
.arch-node.arch-root { border-color: var(--accent-edge); }
.arch-node .pill { align-self: flex-start; }
.arch-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 0 10px; min-width: 96px;
  color: var(--ink3); font-size: .78rem; text-align: center; line-height: 1.35;
}
.arch-link svg { width: 64px; height: 12px; color: var(--ink3); }
.arch-link span { max-width: 14ch; }
@media (max-width: 900px) {
  .arch { grid-template-columns: 1fr; }
  .arch-link { padding: 10px 0 10px 22px; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; }
  .arch-link span { max-width: none; }
  .arch-link svg { transform: rotate(90deg); width: 34px; flex: none; }
}
.rules { counter-reset: rule; }
.rule { position: relative; }
.rule h3 { font-size: 1.05rem; }
.rule p { color: var(--ink2); font-size: .96rem; line-height: 1.62; }
.rule .rule-num {
  font-family: var(--mono); font-size: .8rem; color: var(--accent-ink);
  letter-spacing: .06em;
}
.honest {
  margin-top: 22px;
  display: flex; gap: 12px; align-items: flex-start;
}
.honest .icon { color: var(--amber); margin-top: 2px; }

/* ---------------------------------------------------------------- screens -- */

/* A photo strip: one screen at a time at full width, and the next one showing
   at the right edge so the reader can see there is more. The strip starts at
   the container's left edge and runs on to the edge of the window; the band
   clips it there, so the page itself never scrolls sideways. It is a
   scroll-snap row, so a swipe, a trackpad or the arrow keys move it with no
   script at all; site.js (setupGalleries) adds the buttons, the counter and
   one-screen-per-press keys, and quiets every screen but the current one. */
.band-gallery { overflow-x: hidden; overflow-x: clip; }
.gallery { --gap: 20px; --peek: 15%; }
.shots {
  --slide: min(calc(100% - var(--peek)), 1200px);
  position: relative;
  display: flex;
  gap: var(--gap);
  margin-right: calc(50% - 50vw);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.shots::-webkit-scrollbar { display: none; }
/* Room after the last screen, so it too can come to rest at the left edge. */
.shots::after { content: ""; flex: 0 0 calc(100% - var(--slide) - var(--gap)); }
.shots .figure { flex: 0 0 var(--slide); scroll-snap-align: start; }
.shots .figure .shot-frame { box-shadow: none; border-color: var(--border); }
.shots .figure figcaption { margin-top: 14px; font-size: .92rem; }
html.js .shots .figure { opacity: .42; transition: opacity .35s ease; }
html.js .shots .figure.is-active { opacity: 1; }
/* The screen beside the current one is a way to it: a click brings it over. */
html.js .shots .figure:not(.is-active) a.shot-frame { cursor: pointer; }
html.js .shots .figure:not(.is-active):hover { opacity: .7; }

.gallery-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.gallery-count {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .06em;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.gallery-count [data-gallery-at] { color: var(--ink); }
.gallery-nav { display: flex; gap: 8px; }
.gallery-btn { border-color: var(--border-lit); border-radius: 999px; color: var(--ink); }
.gallery-btn:disabled { opacity: .35; cursor: default; background: transparent; }
@media (max-width: 760px) {
  .gallery { --gap: 12px; --peek: 14%; }
  .shots .figure figcaption { margin-top: 10px; font-size: .88rem; }
}

/* ----------------------------------------------------------------- not yet -- */

.notyet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px 26px; }
.notyet li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink2); line-height: 1.55; padding: 6px 0; }
.notyet li .icon { color: var(--ink3); margin-top: 3px; width: 18px; height: 18px; }

/* ----------------------------------------------------------------- pricing -- */

.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }
.price-card { border-color: var(--accent-edge); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price .amount { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.price .per { color: var(--ink2); font-size: 1rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.checklist li .icon { color: var(--accent-ink); margin-top: 2px; width: 18px; height: 18px; }
.price-fine { font-size: .88rem; color: var(--ink3); line-height: 1.55; }
.price-side { display: flex; flex-direction: column; gap: 18px; }
.price-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.price-main .figure .shot-frame { box-shadow: none; }
.price-side .card h3 { margin-bottom: 8px; }
.price-side .card p { color: var(--ink2); }

/* -------------------------------------------------------------------- reqs -- */

.reqs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.reqs li { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.reqs .req-k { font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.reqs .req-v { color: var(--ink); font-weight: 600; }
.reqs .req-n { color: var(--ink2); font-size: .9rem; line-height: 1.5; }

/* --------------------------------------------------------------------- faq -- */

.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.faq details[open] { border-color: var(--border-lit); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 52px 16px 20px;
  font-weight: 620;
  position: relative;
  border-radius: var(--r-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink3);
  border-bottom: 2px solid var(--ink3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 20px 18px; color: var(--ink2); line-height: 1.65; }
.faq .answer > * + * { margin-top: .6rem; }

/* --------------------------------------------------------------------- cta -- */

.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  padding: 34px;
  border-radius: var(--r-xl);
  border: 1px solid var(--accent-edge);
  background:
    radial-gradient(700px 260px at 0% 0%, var(--glow2) 0%, transparent 70%),
    var(--panel);
}
.cta h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.cta p { color: var(--ink2); margin-top: 6px; }
@media (max-width: 520px) { .cta { padding: 24px 18px; } .cta .row { width: 100%; } .cta .btn { flex: 1 1 auto; } }

/* --------------------------------------------------------------- commands -- */

/* A command never wraps (a wrapped line reads as two commands) and scrolls
   inside its own box; the Copy button sits BESIDE the text rather than over
   it, so no part of a long command is ever hidden under the button. */
.cmd {
  display: flex;
  align-items: flex-start;
  background: var(--shot-bg);
  border: 1px solid var(--border-lit);
  border-radius: var(--r-md);
  min-width: 0;
}
.cmd pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre;
}
.cmd-copy {
  flex: none;
  margin: 7px 7px 7px 0;
  min-height: 34px;
  padding: 6px 10px;
  font-size: .82rem;
  background: var(--panel2);
  border-color: var(--border);
}
.cmd-copy .icon { width: 16px; height: 16px; }
.cmd-copy.is-done { color: var(--accent-ink); border-color: var(--accent-edge); }

/* --------------------------------------------------------------- download -- */

.installer { display: flex; flex-direction: column; gap: 16px; }
.installer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.installer-head h2 { font-size: 1.35rem; }
.installer-head .feature-icon { width: 40px; height: 40px; }
.installer .facts-list { margin: 0; padding-left: 1.2em; color: var(--ink2); display: grid; gap: 6px; line-height: 1.55; }
.installer .facts-list strong { color: var(--ink); font-weight: 620; }
.installers { display: grid; gap: 22px; }
.files { display: grid; gap: 8px; }
.file-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel2);
}
.file-row .mono { word-break: break-all; }
.file-row .muted { font-size: .88rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- buy page -- */

.buy-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .buy-grid { grid-template-columns: 1fr; } }
.checkout { display: flex; flex-direction: column; gap: 14px; }
.checkout [data-checkout-error] { display: none; }
.checkout [data-checkout-error].is-shown { display: block; }
.terms-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ------------------------------------------------------------- error pages -- */

.error-page { padding-block: 96px 40px; }
.error-page .code { font-family: var(--mono); color: var(--ink3); font-size: .95rem; letter-spacing: .08em; }
.error-page h1 { margin-top: 8px; }
.error-page .lead { max-width: 40rem; margin-top: 14px; }
.error-page .notice { max-width: 40rem; margin-top: 22px; }
.error-page .row { margin-top: 28px; }

/* ----------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------------ print -- */

@media print {
  .site-header, .site-footer .footer-base, .skip-link, .js-only, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .figure .shot-frame { box-shadow: none; }
  a { color: #000; }
}

/* ============================================================ promo layer ==
 *
 * The marketing pages on top of the panel's own look (the owner, 2026-09-29:
 * "looks like the cpleks interface … but promotional: more images,
 * background tricks, colours, a coding-art approach"). The display type is
 * the panel's own heading treatment — the system face at 125% width, heavy —
 * so on a Mac it is the same wide cut the panel's headings are drawn in. The
 * code-art field behind the hero is a canvas site.js draws; the terminal
 * plate and the window frames are dark in both themes, because they are
 * pictures of a console.
 */

.display {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem);
  text-wrap: balance;
}
.display-2 {
  font-stretch: 125%;
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.75rem);
  text-wrap: balance;
}
.eyebrow-mono {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--accent-ink);
}
.eyebrow-mono .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px var(--accent);
}

/* The header gets a hairline of the accent under it. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-edge) 30%, var(--accent-edge) 70%, transparent);
  pointer-events: none;
}

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

.promo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 560px at 80% 12%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    radial-gradient(780px 500px at 4% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 60%),
    var(--bg);
}
.codeart {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  opacity: .55;
  pointer-events: none;
  /* Nothing behind the words: the field lives behind the picture. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0, 0, 0, .55) 52%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0, 0, 0, .55) 52%, #000 72%);
}
@media (max-width: 960px) {
  .codeart {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, rgba(0, 0, 0, .6) 70%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 52%, rgba(0, 0, 0, .6) 70%, #000 100%);
  }
}
.promo-hero-grid {
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 62% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 75% at 62% 28%, #000 25%, transparent 78%);
  pointer-events: none;
}
.promo-hero .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: clamp(32px, 4vw, 60px); }
.promo-hero .hero-copy { gap: 22px; }
.promo-hero .hero-copy h1 { max-width: 15ch; }
.promo-hero .hero-copy .lead { max-width: 34rem; font-size: 1.16rem; }
.promo-hero .hero-note { max-width: 34rem; }
@media (max-width: 960px) {
  .promo-hero .hero-grid { grid-template-columns: 1fr; }
  .promo-hero .hero-copy h1 { max-width: 16ch; }
}

.hero-visual { position: relative; min-width: 0; padding-block: 18px 30px; }
.hero-window {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0B0E12;
  border: 1px solid #2C3440;
  box-shadow:
    0 40px 120px -30px color-mix(in srgb, var(--accent) 45%, transparent),
    0 22px 60px -20px rgba(0, 0, 0, .7);
  transform: perspective(1600px) rotateY(-9deg) rotateX(3deg);
  transform-origin: 60% 50%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.hero-visual:hover .hero-window { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.hero-window .figure { margin: 0; }
.hero-window .figure figcaption { display: none; }
.hero-window .shot-frame { border: 0; border-radius: 0; box-shadow: none; }

.window-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  background: #12161C;
  border-bottom: 1px solid #262D37;
  font-family: var(--mono);
  font-size: .76rem;
  color: #8B96A5;
  white-space: nowrap;
  overflow: hidden;
}
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2A313B; flex: none; }
.window-bar i:nth-child(1) { background: #F4776C; }
.window-bar i:nth-child(2) { background: #F0A64B; }
.window-bar i:nth-child(3) { background: #6EE787; }
.window-bar span { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }

/* The chips: three things the server says, floating over the frame. */
.chips { list-style: none; margin: 0; padding: 0; }
.chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  border-radius: 11px;
  background: rgba(14, 18, 23, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid #2E3744;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7);
  font-family: var(--mono);
  font-size: .8rem;
  color: #E8EBEF;
  white-space: nowrap;
}
.chip em { font-style: normal; color: #8B96A5; }
.chip .ok { color: #6EE787; }
.chip .warn { color: #F0A64B; }
.chip-a { left: -26px; top: 22%; }
.chip-b { right: -18px; top: 6%; }
.chip-c { right: 8%; bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .chip { animation: chip-float 7s ease-in-out infinite; }
  .chip-b { animation-delay: -2.3s; }
  .chip-c { animation-delay: -4.6s; }
}
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 960px) {
  .hero-window { transform: none; }
  .hero-visual:hover .hero-window { transform: none; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .chip { position: static; animation: none; }
}

.soon-badge {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent-edge);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent-ink);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .01em;
  box-shadow: 0 0 34px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.soon-badge .pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .soon-badge .pulse { animation: pulse 2.2s ease-out infinite; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 12px transparent; }
}

.promo-hero .facts { margin-top: clamp(40px, 5vw, 64px); background: var(--border); }
.promo-hero .facts li {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 18px 20px;
}
.promo-hero .facts .fact-value { font-stretch: 112%; font-size: 1.06rem; }

/* ------------------------------------------------------------- marquee -- */

.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  padding-block: 15px;
  font-family: var(--mono);
  font-size: .86rem;
  color: var(--ink3);
  white-space: nowrap;
}
.marquee-track span { display: inline-flex; align-items: center; }
.marquee-track span::after {
  content: "";
  width: 5px; height: 5px; margin-inline: 22px;
  border-radius: 1px;
  background: var(--accent-edge);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 80s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------ bands and tiles -- */

.band-glow {
  background:
    radial-gradient(900px 420px at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
    var(--bg);
}
.band-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-color: var(--bg-alt);
}
.band .section-head { gap: 14px; margin-bottom: 44px; }

.tile-green  { --hue: var(--accent); }
.tile-cyan   { --hue: var(--cyan); }
.tile-amber  { --hue: var(--amber); }
.tile-violet { --hue: var(--violet); }
.tile {
  position: relative;
  overflow: hidden;
  gap: 12px;
  padding: 24px 24px 26px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tile::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hue), transparent);
  opacity: .65;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--hue) 40%, var(--border));
  box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--hue) 55%, transparent);
}
.tile h3 { font-size: 1.12rem; font-stretch: 108%; }
.tile-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 13%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--hue) 34%, var(--border));
  margin-bottom: 4px;
}
.tile-icon .icon { width: 22px; height: 22px; }

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

.image-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(96px, 13vw, 176px);
  background: #0B0E11;
  color: #E8EBEF;
}
.image-band::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.image-band::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
}
/* The photograph takes the right-hand side and the words the left, so the
   card's own printed logo is never under the text. */
.image-band-card::before { background-image: url("../promo/card.webp"); inset: 0 0 0 34%; background-position: 40% 50%; }
.image-band-card::after {
  background: linear-gradient(90deg, #0A0D10 0%, #0A0D10 34%, rgba(10, 13, 16, .55) 44%, rgba(10, 13, 16, 0) 62%, rgba(10, 13, 16, .25) 100%);
}
.image-band-gallery::before { background-image: url("../promo/gallery.webp"); background-position: 50% 45%; }
.image-band-gallery::after {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(10, 13, 16, .55), rgba(10, 13, 16, .88)),
    linear-gradient(180deg, rgba(10, 13, 16, .2), rgba(10, 13, 16, .6));
}
.image-band-copy { max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.image-band h1, .image-band h2 { color: #F3F5F8; }
.image-band p { color: #C3CAD3; font-size: 1.1rem; line-height: 1.65; }
.image-band .eyebrow-mono { color: #6EE787; }
@media (max-width: 860px) {
  .image-band-card::before { inset: 0; background-position: 60% 50%; }
  .image-band-card::after { background: linear-gradient(180deg, rgba(10, 13, 16, .5), rgba(10, 13, 16, .94) 70%); }
  .image-band-card { padding-top: 220px; }
}

.soon-card {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(32px, 5vw, 56px) clamp(22px, 5vw, 56px);
  border-radius: 24px;
  background: rgba(13, 16, 20, .74);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(232, 235, 239, .1);
  box-shadow: 0 40px 120px -40px rgba(110, 231, 135, .35);
}
.soon-card .lead { color: #C3CAD3; max-width: 40rem; }
.soon-card .soon-badge { background: rgba(110, 231, 135, .12); border-color: #2F5F3C; color: #6EE787; }
.soon-card .soon-contact { color: #A3ACB9; }
.soon-card .soon-contact a { color: #6EE787; }
.soon-card .row { justify-content: center; margin-top: 6px; }
.soon-page { min-height: calc(100vh - 64px); display: grid; align-items: center; }

/* ---------------------------------------------------- the terminal plate -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: 28px;
}
.split .section-head { margin-bottom: 0; }
.stack-art {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #11151A;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--accent) 60%, transparent);
}
.stack-art img { width: 100%; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .stack-art { max-width: 460px; }
}

.terminal {
  background: #0B0E12;
  border: 1px solid #2C3440;
  border-radius: 16px;
  overflow: hidden;
  margin: 12px 0 44px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(110, 231, 135, .05) inset;
}
.pipe {
  list-style: none;
  margin: 0;
  padding: 20px 22px 8px;
  display: grid;
  gap: 12px;
  font-family: var(--mono);
  font-size: .9rem;
  color: #C9D1D9;
  counter-reset: step;
}
.pipe li {
  display: grid;
  grid-template-columns: 2.4ch 8ch 2ch minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
}
.pipe li::before { counter-increment: step; content: counter(step, decimal-leading-zero); color: #4A5563; }
.pipe .k { color: #B39DFB; font-weight: 600; }
.pipe .arrow { color: #5B6675; }
.pipe code { color: #C9D1D9; font-size: 1em; overflow-wrap: anywhere; }
.pipe .v { color: #6EE787; white-space: nowrap; }
.pipe .v::before { content: "✓ "; }
.pipe-caption { padding: 10px 22px 22px; color: #A3ACB9; font-size: .96rem; line-height: 1.65; max-width: 84ch; }
@media (max-width: 720px) {
  .pipe li { grid-template-columns: 2.4ch minmax(0, 1fr); gap: 2px 10px; }
  .pipe li::before { grid-row: span 3; }
  .pipe .arrow { display: none; }
}

/* ------------------------------------------------------------- cta glow -- */

.cta-glow {
  background:
    radial-gradient(600px 240px at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(500px 220px at 100% 100%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 70%),
    var(--panel);
  border-color: var(--accent-edge);
}
.cta-glow h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); }

/* Revealed as they scroll in, when the script runs and motion is welcome. */
html.js.motion-ok [data-reveal].will-reveal {
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
html.js.motion-ok [data-reveal].will-reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }

/* ---------------------------------------------------- screenshot viewer -- */

/* A framed screenshot opens over the page (site.js, setupViewer) rather than
   replacing it. Dark in both themes: it is a picture of a console, like the
   window frames above. */
.viewer {
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #2C3440;
  border-radius: 16px;
  background: #0B0E12;
  color: #E8EBEF;
  overflow: hidden;
  box-shadow: 0 40px 120px -30px color-mix(in srgb, var(--accent) 35%, transparent), 0 30px 80px rgba(0, 0, 0, .7);
  cursor: zoom-out;
}
.viewer::backdrop {
  background: rgba(6, 8, 10, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.viewer[open] { display: flex; flex-direction: column; }
.viewer-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 32px - 56px);
  object-fit: contain;
  background: #0B0E12;
  min-height: 0;
}
.viewer-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 18px;
  padding: 14px 18px;
  border-top: 1px solid #262D37;
  background: #12161C;
}
.viewer-caption { color: #C3CAD3; font-size: .94rem; line-height: 1.5; margin: 0; }
.viewer-full { color: #6EE787; font-size: .9rem; cursor: pointer; }
.viewer-full:hover { color: #9BF0AC; }
.viewer-close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(14, 18, 23, .8);
  border: 1px solid #2E3744;
  color: #E8EBEF;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.viewer-close:hover { background: #1D222A; color: #FFFFFF; }
.viewer-step {
  position: absolute; top: calc(50% - 48px);
  border-radius: 999px;
  background: rgba(14, 18, 23, .8);
  border: 1px solid #2E3744;
  color: #E8EBEF;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.viewer-step[hidden] { display: none; }
.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }
.viewer-step:hover { background: #1D222A; color: #FFFFFF; }
.viewer-step:disabled { opacity: .3; cursor: default; }
body.viewer-open { overflow: hidden; }
a.shot-frame { cursor: zoom-in; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: viewer-in .18s ease-out; }
}
@keyframes viewer-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ======================================================= super admin (/sa) ==
 *
 * The site's own administration, drawn in the panel's dress: the same cards,
 * fields and pills as the rest of the site, a bar of its own under the header,
 * and forms laid out on a grid. Nothing here is marketing: no motion, no art.
 */

.sa-bar {
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(600px 120px at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg-alt);
}
.sa-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-height: 56px; }
.sa-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.sa-nav a {
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--ink2); text-decoration: none; font-weight: 550; font-size: .94rem;
}
.sa-nav a:hover { background: var(--panel2); color: var(--ink); }
.sa-nav a[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, var(--panel3)), var(--panel3));
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.sa-who { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: .9rem; }

.sa-page { padding-block: 34px 24px; }
.sa-narrow { max-width: 560px; padding-block: clamp(36px, 7vw, 80px) 24px; }
.sa-auth { padding: 28px; position: relative; }
.sa-auth::before, .sa-group::before, .sa-licence::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6;
}
.sa-group, .sa-licence { position: relative; }
.sa-lead { max-width: 72ch; }
.sa-pre { white-space: pre-wrap; }
.sa-break { overflow-wrap: anywhere; }
.sa-crumb { color: var(--ink3); font-family: var(--mono); font-size: .86rem; }
.sa-crumb a { color: var(--ink2); text-decoration: none; }

.sa-facts { margin-top: 4px; }

.sa-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sa-check { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel2); }
.sa-check a { color: var(--ink); text-decoration: none; }
.sa-check a:hover { text-decoration: underline; }
.sa-check-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink3); }
.sa-check-ok .sa-check-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.sa-check-warn { border-color: var(--amber-edge); }
.sa-check-warn .sa-check-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sa-check-info .sa-check-dot { background: var(--cyan); }

.sa-scroll { overflow-x: auto; max-width: 100%; }
.sa-flush { padding: 0; overflow: hidden; }
.sa-flush .table { border: 0; border-radius: 0; }
.sa-empty { padding: 20px 24px; }
.sa-table td a { font-weight: 600; text-decoration: none; }
.sa-search .input { max-width: 420px; }

.sa-action > summary { font-weight: 620; }
.sa-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px 18px;
  margin-top: 6px;
}
.sa-wide { grid-column: 1 / -1; }
.sa-form-foot { grid-column: 1 / -1; display: flex; gap: 10px; }
.sa-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sa-from {
  font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); border: 1px solid var(--accent-edge); border-radius: 999px;
  padding: 1px 7px; margin-left: 6px; white-space: nowrap; vertical-align: 1px;
}
.sa-form > .field:not(.sa-wide) { align-self: end; }
.sa-check-row { display: flex; align-items: center; gap: 10px; font-weight: 550; cursor: pointer; }
.sa-check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.sa-small { font-size: .88rem; font-weight: 500; color: var(--ink2); margin-top: 4px; }
.sa-bad { color: var(--coral); }
.sa-test { border-top: 1px solid var(--border); padding-top: 14px; }
.sa-test .input { max-width: 320px; }

.sa-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.sa-dl dd { margin: 0; overflow-wrap: anywhere; }
.sa-licence-head { justify-content: space-between; }
.sa-keyline {
  margin: 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--shot-bg); border: 1px solid var(--border-lit);
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .86rem;
}
.sa-codes {
  list-style: none; margin: 0; padding: 14px; border-radius: var(--r-md);
  background: var(--shot-bg); border: 1px dashed var(--border-lit);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px; font-size: 1rem;
}
.sa-qr { margin: 12px 0; }
.sa-qr .qr { border-radius: 10px; display: block; }
.sa-secret { letter-spacing: .08em; word-spacing: .2em; }
.sa-code { letter-spacing: .18em; font-size: 1.1rem; }
.sa-account { color: var(--ink2); }
@media (max-width: 560px) { .sa-dl { grid-template-columns: 1fr; } .sa-who { margin-left: 0; } }

/* The header's two doors (Sign in, Sign up) — or My account once signed in. */
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: .9rem; }
.nav-auth { display: flex; align-items: center; gap: 6px; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--border); }
.nav-auth .btn[aria-current="page"] { border-color: var(--accent-edge); }
@media (max-width: 880px) {
  html.js .nav-auth { border-left: 0; margin-left: 0; padding: 8px 0 0; border-top: 1px solid var(--border); }
  html.js .nav-auth .btn { flex: 1 1 0; min-height: 44px; }
  html:not(.js) .nav-auth { border-left: 0; margin-left: 0; padding-left: 0; }
}

/* ===================================================== the super admin, as an app
 * The owner: "i like nframed style very much". /sa is an application — a
 * sidebar and a work area, the site's own palette — rather than a page of the
 * website: templates/layout.php leaves out the header and footer when the
 * section is "sa", and every page wraps src/views/sa-nav.php and its work in
 * .sa-shell. Sign-in, setup and the recovery codes are .sa-bare: centred, no
 * sidebar. Everything below is new; the older .sa-* rules above are left to the
 * few classes still shared. */
body.sa-body { background: var(--bg); }
main.sa-app { display: block; }
.sa-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.sa-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 14px 16px; background: var(--bg-alt); border-right: 1px solid var(--border);
}
.sa-brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 20px; color: var(--ink); text-decoration: none; }
.sa-brand .wordmark, .sa-bare-brand .wordmark { height: 22px; width: auto; }
.sa-brand-tag { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.sa-menu { display: flex; flex-direction: column; gap: 3px; }
.sa-menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px;
  color: var(--ink2); font-size: .93rem; font-weight: 520; text-decoration: none;
}
.sa-menu a .icon, .sa-side-foot .icon { width: 18px; height: 18px; flex: none; }
.sa-menu a:hover { background: var(--panel); color: var(--ink); }
.sa-menu a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent-ink); }
.sa-menu a:focus-visible, .sa-side-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sa-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.sa-who-line { display: flex; align-items: center; gap: 9px; padding: 2px 4px 2px 12px; min-height: 36px; color: var(--ink2); font-size: .88rem; }
.sa-who-line .theme-toggle { margin-left: auto; }
.sa-side-link {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 8px;
  color: var(--ink3); font: 500 .86rem var(--font); text-decoration: none;
  background: none; border: 0; cursor: pointer; width: 100%; text-align: left;
}
.sa-side-link:hover { color: var(--ink); background: var(--panel); }
.sa-signout:hover { color: var(--coral); }

.sa-work { padding: 34px 40px 64px; max-width: 1240px; min-width: 0; }
.sa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 20px; }
.sa-h1 { margin: 0; font-size: 1.6rem; font-weight: 660; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
.sa-count { font: 600 12px/1.6 var(--mono); color: var(--ink2); background: var(--panel); border: 1px solid var(--border-lit); border-radius: 20px; padding: 1px 10px; }
.sa-crumb { margin: 0 0 6px; font-family: var(--mono); font-size: .84rem; color: var(--ink3); }
.sa-crumb a { color: var(--ink2); text-decoration: none; }
.sa-crumb a:hover { color: var(--accent-ink); }
.sa-dim { color: var(--ink3); }
.sa-small { font-size: .82rem; font-weight: 500; }
.sa-strong { color: var(--ink); font-weight: 600; text-decoration: none; }
.sa-strong:hover { color: var(--accent-ink); }
.sa-ok { color: var(--accent-ink); }
.sa-bad { color: var(--coral); }
.sa-warn-text { color: var(--amber); }
.sa-foot-note { margin: 16px 0 0; font-size: .82rem; color: var(--ink3); max-width: 80ch; }
.sa-lead { max-width: 80ch; margin: 0 0 16px; }
.sa-stack { display: flex; flex-direction: column; gap: 18px; }
.sa-work .notice { margin: 0 0 16px; }

.sa-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border-lit);
  background: var(--panel); color: var(--ink); font: 600 .88rem var(--font); text-decoration: none;
}
.sa-btn .icon { width: 16px; height: 16px; }
.sa-btn:hover { border-color: var(--accent-edge); }
.sa-btn:focus-visible, .sa-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-btn-p { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sa-btn-p:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sa-btn-s { padding: 5px 11px; font-size: .82rem; }
.sa-btn-bad:hover { border-color: var(--coral-edge); color: var(--coral); }
.sa-btn-p.sa-btn-bad { background: var(--coral); border-color: var(--coral); color: var(--on-accent); }
.sa-icon {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; vertical-align: middle;
  border-radius: 7px; border: 1px solid var(--border); background: var(--panel2); color: var(--ink3); cursor: pointer;
}
.sa-icon .icon { width: 14px; height: 14px; }
.sa-icon:hover { color: var(--ink); border-color: var(--accent-edge); }
.sa-icon.is-done { color: var(--accent-ink); border-color: var(--accent-edge); }

.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; margin-bottom: 18px; }
.sa-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.sa-kpi-v { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sa-kpi-text { font-size: 1.15rem; font-family: var(--mono); letter-spacing: 0; }
.sa-kpi-k { margin-top: 5px; font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.sa-kpi-s { margin-top: 2px; font-size: .78rem; color: var(--ink3); }
.sa-kpis-sm .sa-kpi { padding: 12px 16px; }
.sa-kpis-sm .sa-kpi-v { font-size: 1.4rem; }

.sa-status { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sa-status li {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--border); font-size: .86rem;
}
.sa-status a { color: var(--ink); text-decoration: none; }
.sa-status a:hover { text-decoration: underline; }
.sa-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); flex: none; }
.sa-status-ok .sa-status-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.sa-status-warn { border-color: var(--amber-edge); }
.sa-status-warn .sa-status-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.sa-status-info .sa-status-dot { background: var(--cyan); }

.sa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.sa-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 18px; min-width: 0; }
.sa-cols .sa-panel { margin-bottom: 0; }
.sa-cols .sa-table { min-width: 0; }
.sa-cols .sa-table th, .sa-cols .sa-table td { padding-inline: 10px; }
.sa-panel > p:last-child { margin-bottom: 0; }
.sa-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sa-panel-head h2 { margin: 0; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.sa-more { font-size: .84rem; color: var(--ink3); text-decoration: none; }
.sa-more:hover { color: var(--accent-ink); }

.sa-tablewrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; background: var(--panel); }
.sa-tablewrap.sa-flat { border: 0; border-radius: 0; background: transparent; margin: 0 -18px -18px; }
.sa-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.sa-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
  font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3);
}
.sa-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sa-table tr:last-child td { border-bottom: 0; }
.sa-table tbody tr:hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.sa-table .keep { white-space: nowrap; }
.sa-table .sa-empty, .sa-empty { padding: 26px 16px; text-align: center; color: var(--ink3); }
.sa-actions { text-align: right; white-space: nowrap; }
.sa-actions > * { margin-left: 6px; }
.sa-actions form { display: inline; }

.sa-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
  font: 600 10.5px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  background: var(--panel2); border: 1px solid var(--border-lit); color: var(--ink2);
}
.sa-badge.ok { background: var(--accent-dim); border-color: var(--accent-edge); color: var(--accent-ink); }
.sa-badge.bad { background: var(--coral-bg); border-color: var(--coral-edge); color: var(--coral); }
.sa-badge.warn { background: var(--amber-bg); border-color: var(--amber-edge); color: var(--amber); }
.sa-badge.alt { background: var(--info-bg); border-color: var(--info-edge); color: var(--cyan); }
.sa-badge.dim { color: var(--ink3); }

.sa-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.sa-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; margin-bottom: -1px;
  color: var(--ink2); text-decoration: none; font-size: .9rem; font-weight: 540; border-bottom: 2px solid transparent;
}
.sa-tabs a:hover { color: var(--ink); }
.sa-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.sa-tab-n { font: 600 11px var(--mono); color: var(--ink3); }
.sa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.sa-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.sa-searchbox {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 240px; max-width: 460px;
  padding: 8px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border-lit); color: var(--ink3);
}
.sa-searchbox .icon { width: 16px; height: 16px; flex: none; }
.sa-searchbox input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: .92rem; padding: 0; }
.sa-searchbox:focus-within { border-color: var(--accent-edge); }

.sa-work input:not([type=checkbox]):not([type=radio]):not([type=search]), .sa-work select, .sa-work textarea,
.sa-dialog input:not([type=checkbox]):not([type=hidden]), .sa-dialog select, .sa-dialog textarea {
  width: 100%; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border-lit);
  background: var(--bg-alt); color: var(--ink); font: inherit; font-size: .92rem;
}
.sa-work input:focus, .sa-work select:focus, .sa-work textarea:focus, .sa-dialog input:focus, .sa-dialog select:focus {
  outline: none; border-color: var(--accent-edge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.sa-work [aria-invalid="true"] { border-color: var(--coral-edge); }
.sa-work .mono, .sa-dialog .mono { font-family: var(--mono); }
.sa-field { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--ink2); }
.sa-field-wrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sa-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sa-grow { flex: 1; min-width: 220px; }

.sa-setform { padding: 4px 18px; }
.sa-setrow {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 12px 36px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.sa-setrow.is-bad { box-shadow: inset 3px 0 0 var(--coral); padding-left: 12px; }
.sa-setlabel { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.sa-setlabel label { font-weight: 600; color: var(--ink); }
.sa-setkey { font-size: .76rem; color: var(--ink3); }
.sa-setmeta { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-bad-text { font-size: .84rem; color: var(--coral); }
.sa-setinput { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sa-setfoot { display: flex; justify-content: flex-end; padding: 14px 0; }
.sa-switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; }
.sa-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sa-switch-ui { width: 44px; height: 24px; border-radius: 12px; background: var(--panel3); border: 1px solid var(--border-lit); position: relative; transition: background .15s ease; }
.sa-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink2); transition: transform .15s ease, background .15s ease; }
.sa-switch input:checked + .sa-switch-ui { background: var(--accent-dim); border-color: var(--accent-edge); }
.sa-switch input:checked + .sa-switch-ui::after { transform: translateX(20px); background: var(--accent); }
.sa-switch input:focus-visible + .sa-switch-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-testmail { margin-top: 18px; }

.sa-keyrow { display: flex; align-items: flex-start; gap: 8px; }
.sa-keyrow .sa-keyline { flex: 1; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--bg-alt); border: 1px solid var(--border); overflow-wrap: anywhere; white-space: pre-wrap; font-size: .82rem; }
.sa-issued { border-color: var(--accent-edge); }

dialog.sa-dialog { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(480px, 94vw); max-height: 92vh; }
dialog.sa-dialog::backdrop { background: rgba(4, 6, 10, .72); backdrop-filter: blur(5px); }
.sa-dialog-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border-lit); box-shadow: var(--shadow); }
.sa-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sa-dialog-head h2 { margin: 0; font-size: 1.1rem; font-weight: 650; }
.sa-dialog-card p { margin: 0; }
.sa-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* No script: every dialog is drawn in place as an ordinary section. */
html:not(.js) dialog.sa-dialog { display: block; position: static; width: auto; max-width: 560px; margin: 18px auto; }

.sa-bare { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 16px; }
.sa-bare > .card, .sa-bare > form, .sa-bare > section { width: min(560px, 100%); }
.sa-bare-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }

@media (max-width: 1100px) {
  .sa-cols { grid-template-columns: minmax(0, 1fr); }
  .sa-setrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sa-shell { grid-template-columns: minmax(0, 1fr); }
  .sa-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; }
  .sa-brand { padding: 0 8px 0 0; }
  .sa-menu { flex-direction: row; flex-wrap: wrap; gap: 2px; width: 100%; }
  .sa-menu a { padding: 7px 10px; font-size: .86rem; }
  .sa-side-foot { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 0; padding-top: 10px; }
  .sa-side-foot .sa-side-link { width: auto; }
  .sa-work { padding: 22px 16px 48px; }
}