/*
 * ═══════════════════════════════════════════════════════════════════════════
 * UNITY — the shared theme.  THE canonical copy.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * One theme for every Innotel project, not just the OnTrak ones. `theme/README.md`
 * is the adoption guide for a new project; this file is the palette.
 *
 * Every product ships a byte-identical copy of this file (each app is built from its
 * own directory, so a file outside the build context cannot be imported).
 * `theme/tests/test_theme_copies.py` fails if any copy drifts, which is what stops
 * "one palette" from becoming five opinions over six months.
 *
 * ── Two names worth keeping apart ──────────────────────────────────────────
 *
 *   **Unity** (this)   the theme: three schemes, two modes, one vocabulary.
 *   **OnTrak Unity**  the portal that is one of the things wearing it. The theme
 *                     came first and the product took its name, which is the
 *                     direction that causes no trouble.
 *
 * ── What is here, and why it is shaped this way ────────────────────────────
 *
 * THREE SCHEMES, TWO MODES, ONE VOCABULARY.
 *
 *   scheme "desk"        the training range and the service desk — the violet
 *                        family that Tix and OnTrak IT Support Training already
 *                        use, so those two apps change least.
 *   scheme "operations"  the operations consoles — the graphite-and-blue family
 *                        that OnTrak Sync and the Unity portal already use.
 *   scheme "soc"         the security-operations console — the navy-and-cyan
 *                        family Sentinel wears, in the visual language of the
 *                        open-source SIEM consoles.
 *
 *   mode "light" / "dark" applies to all three, and `system` follows the machine.
 *
 * A product picks its default scheme; the person can override either axis, and the
 * choice is remembered per browser. That is the whole point of the exercise: the
 * same page should be readable in a bright office and at 3am, and an operator who
 * has learned one product's colours should not have to relearn them in the next.
 *
 * The vocabulary is deliberately semantic — `--surface`, `--ink-faint`,
 * `--attention` — and never visual. A class that says what a thing *is* (a
 * finding, an outage, an SLA breach) cannot quietly pick a new colour, and
 * `--unknown` exists as its own token because a check that never ran must never be
 * painted the same as a check that passed.
 *
 * Usage: set `data-scheme` and `data-mode` on <html> (see unity-theme.js), then use
 * the tokens. No component should name a raw colour.
 */

/* ══ scheme: desk — light ═══════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  --canvas: #f7f6fb;
  --surface: #ffffff;
  --surface-muted: #f1effa;
  --surface-sunken: #ebe7f6;
  --line: #e4e0f0;
  --line-strong: #cec8e3;

  --ink: #191430;
  --ink-soft: #4b4468;
  --ink-faint: #6d6789;

  --brand: #5f3fe6;
  --brand-soft: #ece8ff;
  --brand-ink: #ffffff;
  --brand-ring: #b9a8f7;

  --ok: #146c2e;
  --ok-soft: #e4f6e8;
  --info: #1360a8;
  --info-soft: #e5f0fb;
  --bad: #b3261e;
  --bad-soft: #fdeceb;
  --attention: #8a5a00;
  --attention-soft: #fdf3dd;
  --unknown: #6b6b76;
  --unknown-soft: #efeff3;

  /* The products' identifying colours. A tone is a *label*, never the only
     signal: every tile also carries the product's name in text. */
  --tone-its: #4d6b00;
  --tone-tix: #0a5c9e;
  --tone-sentinel: #b0246a;
  --tone-sync: #05685e;
  --tone-genie: #7c3aed;
  --tone-lab: #b45309;
  --tone-unity: #0891b2;

  --shadow-card: 0 1px 2px rgb(25 20 48 / 5%), 0 10px 30px -14px rgb(25 20 48 / 18%);
  --shadow-pop: 0 8px 28px -8px rgb(25 20 48 / 26%);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
}

/* ══ scheme: desk — dark ════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;

    --canvas: #100c22;
    --surface: #1a1433;
    --surface-muted: #221a40;
    --surface-sunken: #151029;
    --line: #332a55;
    --line-strong: #453a6e;

    --ink: #f5f3ff;
    --ink-soft: #c3bce0;
    --ink-faint: #9a92bd;

    --brand: #9b83ff;
    --brand-soft: #2a2154;
    --brand-ink: #14102a;
    --brand-ring: #5b46a8;

    --ok: #5ed37a;
    --ok-soft: #16301f;
    --info: #6cc0ff;
    --info-soft: #152a3f;
    --bad: #ff8a80;
    --bad-soft: #34191a;
    --attention: #ffc157;
    --attention-soft: #33260f;
    --unknown: #8f87b3;
    --unknown-soft: #241e42;

    --tone-its: #b4e85c;
    --tone-tix: #6cc0ff;
    --tone-sentinel: #ff7cb4;
    --tone-sync: #3fd3c1;
    --tone-genie: #c4b5fd;
    --tone-lab: #fbbf24;
    --tone-unity: #67e8f9;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -14px rgb(0 0 0 / 60%);
    --shadow-pop: 0 10px 34px -8px rgb(0 0 0 / 66%);
  }
}

/* The same thing, asked for explicitly. A person who picks "dark" gets dark on a
   machine that prefers light, which is the entire reason the toggle exists. */
:root[data-mode="dark"] {
  color-scheme: dark;

  --canvas: #100c22;
  --surface: #1a1433;
  --surface-muted: #221a40;
  --surface-sunken: #151029;
  --line: #332a55;
  --line-strong: #453a6e;

  --ink: #f5f3ff;
  --ink-soft: #c3bce0;
  --ink-faint: #9a92bd;

  --brand: #9b83ff;
  --brand-soft: #2a2154;
  --brand-ink: #14102a;
  --brand-ring: #5b46a8;

  --ok: #5ed37a;
  --ok-soft: #16301f;
  --info: #6cc0ff;
  --info-soft: #152a3f;
  --bad: #ff8a80;
  --bad-soft: #34191a;
  --attention: #ffc157;
  --attention-soft: #33260f;
  --unknown: #8f87b3;
  --unknown-soft: #241e42;

  --tone-its: #b4e85c;
  --tone-tix: #6cc0ff;
  --tone-sentinel: #ff7cb4;
  --tone-sync: #3fd3c1;
  --tone-genie: #c4b5fd;
  --tone-lab: #fbbf24;
  --tone-unity: #67e8f9;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -14px rgb(0 0 0 / 60%);
  --shadow-pop: 0 10px 34px -8px rgb(0 0 0 / 66%);
}

/* ══ scheme: operations — light (graphite neutrals, blue brand) ════════════ */
:root[data-scheme="operations"] {
  color-scheme: light;

  --canvas: #f4f6f8;
  --surface: #ffffff;
  --surface-muted: #eef2f5;
  --surface-sunken: #e6ebef;
  --line: #dde4ea;
  --line-strong: #c2ccd6;

  --ink: #10171d;
  --ink-soft: #46535f;
  --ink-faint: #6b7885;

  --brand: #1f6feb;
  --brand-soft: #e6f0ff;
  --brand-ink: #ffffff;
  --brand-ring: #9dc2ff;

  --tone-its: #3f6212;
  --tone-tix: #1f6feb;
  --tone-sentinel: #9d174d;
  --tone-sync: #0f766e;
  --tone-genie: #7c3aed;
  --tone-lab: #a16207;
  --tone-unity: #0891b2;

  --shadow-card: 0 1px 2px rgb(16 23 29 / 5%), 0 10px 30px -14px rgb(16 23 29 / 18%);
}

/* ══ scheme: operations — dark ═════════════════════════════════════════════ */
:root[data-scheme="operations"][data-mode="dark"] {
  color-scheme: dark;

  --canvas: #0b1015;
  --surface: #121a22;
  --surface-muted: #17212b;
  --surface-sunken: #0e151c;
  --line: #1e2a35;
  --line-strong: #2b3a48;

  --ink: #e6edf3;
  --ink-soft: #a9b8c6;
  --ink-faint: #78899a;

  --brand: #2f81f7;
  --brand-soft: #16243a;
  --brand-ink: #ffffff;
  --brand-ring: #1f4468;

  --ok: #3fb950;
  --ok-soft: #12261a;
  --info: #58a6ff;
  --info-soft: #14202e;
  --bad: #f85149;
  --bad-soft: #2d1615;
  --attention: #d29922;
  --attention-soft: #2a2110;
  --unknown: #8b949e;
  --unknown-soft: #1a222b;

  --tone-its: #7ee787;
  --tone-tix: #79c0ff;
  --tone-sentinel: #ff7b72;
  --tone-sync: #56d4dd;
  --tone-genie: #d0bcff;
  --tone-lab: #fbbf24;
  --tone-unity: #67e8f9;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 34%), 0 12px 32px -14px rgb(0 0 0 / 62%);
}

@media (prefers-color-scheme: dark) {
  :root[data-scheme="operations"]:not([data-mode="light"]) {
    color-scheme: dark;

    --canvas: #0b1015;
    --surface: #121a22;
    --surface-muted: #17212b;
    --surface-sunken: #0e151c;
    --line: #1e2a35;
    --line-strong: #2b3a48;

    --ink: #e6edf3;
    --ink-soft: #a9b8c6;
    --ink-faint: #78899a;

    --brand: #2f81f7;
    --brand-soft: #16243a;
    --brand-ink: #ffffff;
    --brand-ring: #1f4468;

    --ok: #3fb950;
    --ok-soft: #12261a;
    --info: #58a6ff;
    --info-soft: #14202e;
    --bad: #f85149;
    --bad-soft: #2d1615;
    --attention: #d29922;
    --attention-soft: #2a2110;
    --unknown: #8b949e;
    --unknown-soft: #1a222b;

    --tone-its: #7ee787;
    --tone-tix: #79c0ff;
    --tone-sentinel: #ff7b72;
    --tone-sync: #56d4dd;
    --tone-genie: #d0bcff;
    --tone-lab: #fbbf24;
    --tone-unity: #67e8f9;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 34%), 0 12px 32px -14px rgb(0 0 0 / 62%);
  }
}

/* ══ scheme: soc — light (cool neutrals, cyan brand) ══════════════════════
 * The security-operations console's own scheme: Sentinel. Deep navy in the dark,
 * a cool near-white in the light, and a cyan brand that means "this is the SOC"
 * the way violet means the desk and blue means operations. Modelled on the
 * open-source SIEM consoles (UTMStack and its neighbours), which is the visual
 * language somebody who works a security queue already reads without being told.
 */
:root[data-scheme="soc"] {
  color-scheme: light;

  --canvas: #f2f5f9;
  --surface: #ffffff;
  --surface-muted: #e9eff6;
  --surface-sunken: #dfe8f2;
  --line: #d3dfeb;
  --line-strong: #b3c4d6;

  --ink: #071a2b;
  --ink-soft: #37506a;
  --ink-faint: #5d7691;

  --brand: #0f6fd1;
  --brand-soft: #e0edfb;
  --brand-ink: #ffffff;
  --brand-ring: #93c0ea;

  --ok: #0d6b46;
  --ok-soft: #e2f5eb;
  --info: #0f6fd1;
  --info-soft: #e0edfb;
  --bad: #b3252b;
  --bad-soft: #fdeaea;
  --attention: #8a5a00;
  --attention-soft: #fdf2da;
  --unknown: #64748b;
  --unknown-soft: #edf1f6;

  --tone-its: #4d6b00;
  --tone-tix: #0f6fd1;
  --tone-sentinel: #0e7f9c;
  --tone-sync: #0f766e;
  --tone-genie: #7c3aed;
  --tone-lab: #b45309;
  --tone-unity: #0891b2;

  --shadow-card: 0 1px 2px rgb(7 26 43 / 5%), 0 10px 30px -14px rgb(7 26 43 / 18%);
}

/* ══ scheme: soc — dark (near-black navy, cyan) ═══════════════════════════ */
:root[data-scheme="soc"][data-mode="dark"] {
  color-scheme: dark;

  --canvas: #04080f;
  --surface: #0a1420;
  --surface-muted: #0f1c2b;
  --surface-sunken: #060d17;
  --line: #16273a;
  --line-strong: #23405c;

  --ink: #e6f2fb;
  --ink-soft: #a6c1d8;
  --ink-faint: #7590aa;

  --brand: #22c7e0;
  --brand-soft: #0a2c36;
  --brand-ink: #04161d;
  --brand-ring: #17788c;

  --ok: #3ad77f;
  --ok-soft: #0d2a1b;
  --info: #4cc6ff;
  --info-soft: #0c2437;
  --bad: #ff5f6d;
  --bad-soft: #33141a;
  --attention: #ffbb4d;
  --attention-soft: #33260f;
  --unknown: #7b93ad;
  --unknown-soft: #131f2c;

  --tone-its: #7ee787;
  --tone-tix: #6cb6ff;
  --tone-sentinel: #4fd0e8;
  --tone-sync: #56d4dd;
  --tone-genie: #d0bcff;
  --tone-unity: #67e8f9;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 14px 34px -14px rgb(0 0 0 / 70%);
  --shadow-pop: 0 10px 34px -8px rgb(0 0 0 / 70%);
}

@media (prefers-color-scheme: dark) {
  :root[data-scheme="soc"]:not([data-mode="light"]) {
    color-scheme: dark;

    --canvas: #04080f;
    --surface: #0a1420;
    --surface-muted: #0f1c2b;
    --surface-sunken: #060d17;
    --line: #16273a;
    --line-strong: #23405c;

    --ink: #e6f2fb;
    --ink-soft: #a6c1d8;
    --ink-faint: #7590aa;

    --brand: #22c7e0;
    --brand-soft: #0a2c36;
    --brand-ink: #04161d;
    --brand-ring: #17788c;

    --ok: #3ad77f;
    --ok-soft: #0d2a1b;
    --info: #4cc6ff;
    --info-soft: #0c2437;
    --bad: #ff5f6d;
    --bad-soft: #33141a;
    --attention: #ffbb4d;
    --attention-soft: #33260f;
    --unknown: #7b93ad;
    --unknown-soft: #131f2c;

    --tone-its: #7ee787;
    --tone-tix: #6cb6ff;
    --tone-sentinel: #4fd0e8;
    --tone-sync: #56d4dd;
    --tone-genie: #d0bcff;
    --tone-unity: #67e8f9;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 14px 34px -14px rgb(0 0 0 / 70%);
    --shadow-pop: 0 10px 34px -8px rgb(0 0 0 / 70%);
  }
}

/* ══ the shared primitives ═════════════════════════════════════════════════
 * Small, opinionated, and the same in every product: a surface, a button, a field,
 * a pill and a table. Everything else is a product's own layout, built out of
 * these, so two apps cannot drift in ways nobody notices until somebody has to
 * use both.
 */

.ot-surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ot-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ot-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.ot-panel > header h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-muted);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.ot-btn:hover:not(:disabled) { border-color: var(--brand-ring); }
.ot-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ot-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}
.ot-btn--quiet { background: transparent; }

.ot-field > span {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.ot-field input,
.ot-field select,
.ot-input {
  width: 100%;
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
}
.ot-input:focus, .ot-field input:focus, .ot-field select:focus {
  outline: 2px solid var(--brand-ring);
  outline-offset: 1px;
  border-color: var(--brand);
}

.ot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--ink-soft);
  padding: 2px 10px;
  font-size: 11.5px;
  white-space: nowrap;
}
.ot-pill--ok { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.ot-pill--bad { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.ot-pill--attention { border-color: var(--attention); color: var(--attention); background: var(--attention-soft); }
.ot-pill--unknown { border-color: var(--unknown); color: var(--unknown); background: var(--unknown-soft); }
.ot-pill--brand { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.ot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); flex: none; }
.ot-dot--ok { background: var(--ok); }
.ot-dot--bad { background: var(--bad); }
.ot-dot--attention { background: var(--attention); }

.ot-table { width: 100%; border-collapse: collapse; }
.ot-table th, .ot-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 13px;
}
.ot-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
  background: var(--surface-muted);
}
.ot-table tbody tr:last-child td { border-bottom: none; }
.ot-table tbody tr:hover { background: var(--surface-muted); }

.ot-note {
  border-left: 3px solid var(--line-strong);
  background: var(--surface-muted);
  color: var(--ink-soft);
  padding: 9px 12px;
  font-size: 12.5px;
  border-radius: 0 6px 6px 0;
}
.ot-note--warn { border-left-color: var(--attention); background: var(--attention-soft); color: var(--ink); }
.ot-note--bad { border-left-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.ot-note--ok { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ink); }

.ot-muted { color: var(--ink-faint); }
.ot-dim { color: var(--ink-soft); }
.ot-mono { font-family: var(--mono); font-size: 12.5px; }
.ot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── the theme switch ──────────────────────────────────────────────────────
 * The control that flips light → dark → system. It lives here rather than in each
 * product's stylesheet because a switch that looks different in each of five apps
 * is precisely the drift this file exists to prevent, and because the markup is
 * the same everywhere: a group of buttons that call `window.OntrakTheme`.
 *
 * A product drops its <ThemeToggle> into its masthead and gets these styles; it
 * does not restyle them.
 */
.ot-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.ot-theme button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-faint);
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.ot-theme button:hover { color: var(--ink); }
.ot-theme button[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 600;
}
.ot-theme svg { width: 13px; height: 13px; }

/* ── the front door ────────────────────────────────────────────────────────
 * The sign-in gate, the masthead above it and the footer below it — the page a
 * person is handed when they follow a link to a product they are not yet signed
 * in to. It lives here rather than in each product's stylesheet for the reason
 * `.ot-theme` does: nobody chooses which product they arrive at first, and six
 * front doors drawn six ways is drift that nothing fails on.
 *
 * A product brings two things of its own and nothing else. Its name, in the
 * wordmark, and its tone — `--tone-<product>` is where the mark's gradient lands,
 * which is why that token must exist in every scheme and every mode. The mark
 * itself is one silhouette everywhere, the shield, with the product's own stroke
 * inside it: the family is recognisable at a glance and the product is still
 * legible. `.masthead__mark` is the same shape at the masthead's size.
 */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page__main { flex: 1; padding: var(--space-5) 0 var(--space-6); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
/* `text-decoration: none` is on the base rule rather than only on `:hover` because
   this is a link the browser would otherwise underline by default — and the two
   products that never reset anchors globally (Genie and Sentinel) were the ones
   showing it. The name is a wordmark here, not a link somebody is meant to click. */
.masthead__brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.masthead__brand:hover { text-decoration: none; }
.masthead__brand strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.masthead__brand span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.masthead__mark { width: 30px; height: 30px; flex: none; }
.masthead__tools { display: flex; align-items: center; gap: 10px; }

.footer {
  padding: 16px 0 26px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* The gate: one centred card holding the mark, the name and the single control.
   A column with its own rhythm rather than a margin on each child, because the
   card also has to hold an error, or the sentence that says no provider is
   configured here, and the gap is what keeps it from looking collapsed in any of
   those cases. `width: 100%` because the product that wraps it in a centred flex
   row would otherwise shrink the card to its content. */
.gate {
  width: 100%;
  max-width: 420px;
  margin: 9vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 28px 28px;
  text-align: center;
}
/* The mark and the name are one lockup, so they are one column: the shield above
   the words at every product, rather than beside them at one of them. */
.gate__mark-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gate__mark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.gate__mark span { color: var(--brand); }
.gate__mark-svg {
  width: 44px;
  height: 44px;
  flex: none;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 12%));
}

/* An anchor, not a button: the handshake is a browser navigation, and fetching it
   is what breaks it. */
.sso-button {
  display: block;
  text-align: center;
  /* The same reset as the masthead's: an anchor is underlined by default, and this
     one is a button. Left to the products, two of the six drew it underlined. */
  text-decoration: none;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--brand-ink);
  font-weight: 650;
  font-size: 13.5px;
}
.sso-button:hover { text-decoration: none; filter: brightness(1.06); }