/* Nullix — site styles.
 * One stylesheet for every page. Colors are the app's own palettes
 * (src/theme/index.ts: light + obsidian); the site follows the system theme,
 * and the toggle in the header can pin either one.
 * Flat by rule: no gradients, no glows — solid fills and one clear mark. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* App palettes, kept as constants so a phone can show either theme. */
  --L-bg: #F6F6F9;      --D-bg: #111520;
  --L-list: #FFFFFF;    --D-list: #111520;
  --L-chat: #EDEFF4;    --D-chat: #111520;
  --L-surface: #FBFBFD; --D-surface: #151A26;
  --L-raised: #FFFFFF;  --D-raised: #191E2B;
  --L-in: #FFFFFF;      --D-in: #232837;
  --L-ink: #111520;     --D-ink: #F5F6FA;
  --L-ink2: #5A5F6E;    --D-ink2: #A4A9B8;
  --L-ink3: #6A6D79;    --D-ink3: #878DA0;
  --L-line: rgba(17, 21, 32, .10);  --D-line: rgba(245, 246, 250, .10);
  --L-accent: #4E5AEE;  --D-accent: #9AA3FF;
  --L-fill: #4E5AEE;    --D-fill: #4D63FF;
  --L-glass: rgba(255, 255, 255, .78); --D-glass: rgba(35, 40, 55, .78);
  --L-rear: #6F7CFF;    --D-rear: #737FFF;
  --L-green: #117F3A;   --D-green: #22C55E;
  --L-red: #D52525;     --D-red: #F04B4B;
  --L-tintmix: 12%;     --D-tintmix: 22%;
  --L-h-blue: #1F6FEB; --D-h-blue: #5E9BFF; --L-h-indigo: #4F4BD8; --D-h-indigo: #8D8AFF; --L-h-purple: #8A4BD6; --D-h-purple: #C08BFF; --L-h-teal: #0B83A6; --D-h-teal: #4CC3E4; --L-h-mint: #0E8A77; --D-h-mint: #46D1B5; --L-h-green: #1B8A47; --D-h-green: #4FCF7E; --L-h-orange: #D2600A; --D-h-orange: #FF9F4A; --L-h-amber: #B7700A; --D-h-amber: #F5BC45; --L-h-pink: #D1306E; --D-h-pink: #FF74A6; --L-h-red: #D52F2F; --D-h-red: #FF6B66; --L-h-graphite: #5B6275; --D-h-graphite: #A7AEC0;

  /* Site (light). */
  --bg: #FFFFFF;
  --bg-alt: #F6F6F9;
  --card: #FFFFFF;
  --card-alt: #F6F6F9;
  --ink: #111520;
  --ink-2: #4E5363;
  --ink-3: #6A6D79;
  --line: rgba(17, 21, 32, .09);
  --line-strong: rgba(17, 21, 32, .16);
  --accent: #4E5AEE;
  --accent-fill: #4E5AEE;
  --accent-press: #3F4AD6;
  --accent-soft: rgba(78, 90, 238, .10);
  --rear: #6F7CFF;
  --green: #117F3A;
  --red: #D52525;
  --header: rgba(255, 255, 255, .82);
  --frame: #0B0E16;
  --shadow: 0 1px 2px rgba(17, 21, 32, .05), 0 12px 32px -12px rgba(17, 21, 32, .14);
  --phone-shadow: 0 40px 80px -40px rgba(17, 21, 32, .35);
  --band: #111520;
  --band-ink: #F5F6FA;

  /* Phones: "same" follows the page theme, "invert" shows the other one. */
  --S-bg: var(--L-bg); --S-list: var(--L-list); --S-chat: var(--L-chat); --S-surface: var(--L-surface); --S-raised: var(--L-raised); --S-in: var(--L-in); --S-ink: var(--L-ink); --S-ink2: var(--L-ink2); --S-ink3: var(--L-ink3); --S-line: var(--L-line); --S-accent: var(--L-accent); --S-fill: var(--L-fill); --S-glass: var(--L-glass); --S-rear: var(--L-rear); --S-green: var(--L-green); --S-red: var(--L-red); --S-tintmix: var(--L-tintmix);
  --I-bg: var(--D-bg); --I-list: var(--D-list); --I-chat: var(--D-chat); --I-surface: var(--D-surface); --I-raised: var(--D-raised); --I-in: var(--D-in); --I-ink: var(--D-ink); --I-ink2: var(--D-ink2); --I-ink3: var(--D-ink3); --I-line: var(--D-line); --I-accent: var(--D-accent); --I-fill: var(--D-fill); --I-glass: var(--D-glass); --I-rear: var(--D-rear); --I-green: var(--D-green); --I-red: var(--D-red); --I-tintmix: var(--D-tintmix);
  --S-h-blue: var(--L-h-blue); --S-h-indigo: var(--L-h-indigo); --S-h-purple: var(--L-h-purple); --S-h-teal: var(--L-h-teal); --S-h-mint: var(--L-h-mint); --S-h-green: var(--L-h-green); --S-h-orange: var(--L-h-orange); --S-h-amber: var(--L-h-amber); --S-h-pink: var(--L-h-pink); --S-h-red: var(--L-h-red); --S-h-graphite: var(--L-h-graphite);
  --I-h-blue: var(--D-h-blue); --I-h-indigo: var(--D-h-indigo); --I-h-purple: var(--D-h-purple); --I-h-teal: var(--D-h-teal); --I-h-mint: var(--D-h-mint); --I-h-green: var(--D-h-green); --I-h-orange: var(--D-h-orange); --I-h-amber: var(--D-h-amber); --I-h-pink: var(--D-h-pink); --I-h-red: var(--D-h-red); --I-h-graphite: var(--D-h-graphite);
  --c-blue: var(--S-h-blue); --c-indigo: var(--S-h-indigo); --c-purple: var(--S-h-purple); --c-teal: var(--S-h-teal); --c-mint: var(--S-h-mint); --c-green: var(--S-h-green); --c-orange: var(--S-h-orange); --c-amber: var(--S-h-amber); --c-pink: var(--S-h-pink); --c-red: var(--S-h-red); --c-graphite: var(--S-h-graphite);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --r-card: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111520; --bg-alt: #151A26; --card: #191E2B; --card-alt: #151A26;
    --ink: #F5F6FA; --ink-2: #B3B8C6; --ink-3: #8C92A4;
    --line: rgba(245, 246, 250, .09); --line-strong: rgba(245, 246, 250, .16);
    --accent: #9AA3FF; --accent-fill: #4D63FF; --accent-press: #4256EE; --accent-soft: rgba(154, 163, 255, .14);
    --rear: #737FFF; --green: #22C55E; --red: #F04B4B;
    --header: rgba(17, 21, 32, .82); --frame: #05070C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -12px rgba(0, 0, 0, .5);
    --phone-shadow: 0 0 0 1px rgba(245, 246, 250, .12), 0 40px 80px -40px rgba(0, 0, 0, .7);
    --band: #0B0E16; --band-ink: #F5F6FA;
    --S-bg: var(--D-bg); --S-list: var(--D-list); --S-chat: var(--D-chat); --S-surface: var(--D-surface); --S-raised: var(--D-raised); --S-in: var(--D-in); --S-ink: var(--D-ink); --S-ink2: var(--D-ink2); --S-ink3: var(--D-ink3); --S-line: var(--D-line); --S-accent: var(--D-accent); --S-fill: var(--D-fill); --S-glass: var(--D-glass); --S-rear: var(--D-rear); --S-green: var(--D-green); --S-red: var(--D-red); --S-tintmix: var(--D-tintmix);
    --I-bg: var(--L-bg); --I-list: var(--L-list); --I-chat: var(--L-chat); --I-surface: var(--L-surface); --I-raised: var(--L-raised); --I-in: var(--L-in); --I-ink: var(--L-ink); --I-ink2: var(--L-ink2); --I-ink3: var(--L-ink3); --I-line: var(--L-line); --I-accent: var(--L-accent); --I-fill: var(--L-fill); --I-glass: var(--L-glass); --I-rear: var(--L-rear); --I-green: var(--L-green); --I-red: var(--L-red); --I-tintmix: var(--L-tintmix);
    --S-h-blue: var(--D-h-blue); --S-h-indigo: var(--D-h-indigo); --S-h-purple: var(--D-h-purple); --S-h-teal: var(--D-h-teal); --S-h-mint: var(--D-h-mint); --S-h-green: var(--D-h-green); --S-h-orange: var(--D-h-orange); --S-h-amber: var(--D-h-amber); --S-h-pink: var(--D-h-pink); --S-h-red: var(--D-h-red); --S-h-graphite: var(--D-h-graphite);
    --I-h-blue: var(--L-h-blue); --I-h-indigo: var(--L-h-indigo); --I-h-purple: var(--L-h-purple); --I-h-teal: var(--L-h-teal); --I-h-mint: var(--L-h-mint); --I-h-green: var(--L-h-green); --I-h-orange: var(--L-h-orange); --I-h-amber: var(--L-h-amber); --I-h-pink: var(--L-h-pink); --I-h-red: var(--L-h-red); --I-h-graphite: var(--L-h-graphite);
    --c-blue: var(--S-h-blue); --c-indigo: var(--S-h-indigo); --c-purple: var(--S-h-purple); --c-teal: var(--S-h-teal); --c-mint: var(--S-h-mint); --c-green: var(--S-h-green); --c-orange: var(--S-h-orange); --c-amber: var(--S-h-amber); --c-pink: var(--S-h-pink); --c-red: var(--S-h-red); --c-graphite: var(--S-h-graphite);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111520; --bg-alt: #151A26; --card: #191E2B; --card-alt: #151A26;
  --ink: #F5F6FA; --ink-2: #B3B8C6; --ink-3: #8C92A4;
  --line: rgba(245, 246, 250, .09); --line-strong: rgba(245, 246, 250, .16);
  --accent: #9AA3FF; --accent-fill: #4D63FF; --accent-press: #4256EE; --accent-soft: rgba(154, 163, 255, .14);
  --rear: #737FFF; --green: #22C55E; --red: #F04B4B;
  --header: rgba(17, 21, 32, .82); --frame: #05070C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -12px rgba(0, 0, 0, .5);
  --phone-shadow: 0 0 0 1px rgba(245, 246, 250, .12), 0 40px 80px -40px rgba(0, 0, 0, .7);
  --band: #0B0E16; --band-ink: #F5F6FA;
  --S-bg: var(--D-bg); --S-list: var(--D-list); --S-chat: var(--D-chat); --S-surface: var(--D-surface); --S-raised: var(--D-raised); --S-in: var(--D-in); --S-ink: var(--D-ink); --S-ink2: var(--D-ink2); --S-ink3: var(--D-ink3); --S-line: var(--D-line); --S-accent: var(--D-accent); --S-fill: var(--D-fill); --S-glass: var(--D-glass); --S-rear: var(--D-rear); --S-green: var(--D-green); --S-red: var(--D-red); --S-tintmix: var(--D-tintmix);
  --I-bg: var(--L-bg); --I-list: var(--L-list); --I-chat: var(--L-chat); --I-surface: var(--L-surface); --I-raised: var(--L-raised); --I-in: var(--L-in); --I-ink: var(--L-ink); --I-ink2: var(--L-ink2); --I-ink3: var(--L-ink3); --I-line: var(--L-line); --I-accent: var(--L-accent); --I-fill: var(--L-fill); --I-glass: var(--L-glass); --I-rear: var(--L-rear); --I-green: var(--L-green); --I-red: var(--L-red); --I-tintmix: var(--L-tintmix);
    --S-h-blue: var(--D-h-blue); --S-h-indigo: var(--D-h-indigo); --S-h-purple: var(--D-h-purple); --S-h-teal: var(--D-h-teal); --S-h-mint: var(--D-h-mint); --S-h-green: var(--D-h-green); --S-h-orange: var(--D-h-orange); --S-h-amber: var(--D-h-amber); --S-h-pink: var(--D-h-pink); --S-h-red: var(--D-h-red); --S-h-graphite: var(--D-h-graphite);
    --I-h-blue: var(--L-h-blue); --I-h-indigo: var(--L-h-indigo); --I-h-purple: var(--L-h-purple); --I-h-teal: var(--L-h-teal); --I-h-mint: var(--L-h-mint); --I-h-green: var(--L-h-green); --I-h-orange: var(--L-h-orange); --I-h-amber: var(--L-h-amber); --I-h-pink: var(--L-h-pink); --I-h-red: var(--L-h-red); --I-h-graphite: var(--L-h-graphite);
    --c-blue: var(--S-h-blue); --c-indigo: var(--S-h-indigo); --c-purple: var(--S-h-purple); --c-teal: var(--S-h-teal); --c-mint: var(--S-h-mint); --c-green: var(--S-h-green); --c-orange: var(--S-h-orange); --c-amber: var(--S-h-amber); --c-pink: var(--S-h-pink); --c-red: var(--S-h-red); --c-graphite: var(--S-h-graphite);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; letter-spacing: -.011em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--accent-soft); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; text-decoration: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Type ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.eyebrow { color: var(--ink-3); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.h-section { font-size: clamp(36px, 5.2vw, 64px); }
.h-sub { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.1; }
.lead { color: var(--ink-2); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -.016em; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap;
  cursor: pointer; text-decoration: none !important;
  transition: background-color .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: var(--accent-press); }
.btn-quiet { background: var(--bg-alt); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { background: color-mix(in srgb, var(--bg-alt) 80%, var(--ink) 6%); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ── Mark ─────────────────────────────────────────────────────────────── */

.mark { --mk-front: var(--ink); --mk-rear: var(--rear); }

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-alt); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.menu-toggle { display: none; }
.menu-toggle .i-close { display: none; }
.menu-open .menu-toggle .i-menu { display: none; }
.menu-open .menu-toggle .i-close { display: block; }
.theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; } }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (max-width: 860px) {
  .header-actions { margin-left: auto; gap: 4px; }
  .menu-toggle { display: inline-grid; }
  .nav { display: none; }
  .menu-open .nav {
    position: absolute; top: 64px; left: 0; right: 0; display: grid; gap: 0; margin: 0;
    padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(17, 21, 32, .25);
  }
  .menu-open .nav a { padding: 14px 0; border-radius: 0; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
  .menu-open .nav a:last-child { border-bottom: 0; }
  .menu-open .nav a:hover { background: none; color: var(--accent); }
}
@media (max-width: 400px) { .site-header .btn-small { padding: 0 14px; } .brand { font-size: 19px; } }

/* ── Sections ─────────────────────────────────────────────────────────── */

.section { padding: clamp(80px, 11vw, 144px) 0; }
.section.alt { background: var(--bg-alt); }
.section-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* Surfaces: on a white section cards are grey and their insets white; on a
 * grey section it flips. Dark theme keeps a hairline, since its greys are close. */
body, .section { --tile: var(--bg-alt); --inner: var(--bg); }
.section.alt { --tile: var(--card); --inner: var(--bg-alt); }
.card { background: var(--tile); border-radius: var(--r-card); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer { padding: 64px 0 48px; border-top: 1px solid var(--line); background: var(--bg); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-grid h3 { margin-bottom: 14px; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.footer-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.footer-grid a { color: var(--ink-2); }
.footer-grid a:hover { color: var(--ink); }
.footer-about p { margin-top: 14px; max-width: 300px; color: var(--ink-3); }
.footer-grid .brand { color: var(--ink); }
.footer-grid .brand:hover { color: var(--ink); text-decoration: none; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

/* ── Phone (shared by every app replica) ──────────────────────────────── */

.phone {
  --w: 300px;
  position: relative; width: var(--w); aspect-ratio: 300 / 640; flex: none;
  padding: calc(var(--w) * .033); border-radius: calc(var(--w) * .18);
  background: var(--frame); box-shadow: var(--phone-shadow);
  font-size: calc(var(--w) * .0467); /* 14px at 300px: every size inside scales with the phone */
}
.phone::before { /* side button */
  content: ""; position: absolute; right: -2px; top: 26%; width: 3px; height: 13%; border-radius: 0 2px 2px 0; background: var(--frame);
}
.screen {
  position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .148);
  background: var(--a-bg); color: var(--a-ink);
  display: flex; flex-direction: column; isolation: isolate;
  letter-spacing: -.01em; line-height: 1.3;
}
.island { position: absolute; top: .72em; left: 50%; width: 6.6em; height: 1.95em; margin-left: -3.3em; border-radius: 1em; background: #000; z-index: 5; }

/* App tokens inside a phone. */
.app, .app.same {
  --a-bg: var(--S-bg); --a-list: var(--S-list); --a-chat: var(--S-chat); --a-surface: var(--S-surface); --a-raised: var(--S-raised); --a-in: var(--S-in); --a-ink: var(--S-ink); --a-ink2: var(--S-ink2); --a-ink3: var(--S-ink3); --a-line: var(--S-line); --a-accent: var(--S-accent); --a-fill: var(--S-fill); --a-glass: var(--S-glass); --a-rear: var(--S-rear); --a-green: var(--S-green); --a-red: var(--S-red); --a-tintmix: var(--S-tintmix);
  --c-blue: var(--S-h-blue); --c-indigo: var(--S-h-indigo); --c-purple: var(--S-h-purple); --c-teal: var(--S-h-teal); --c-mint: var(--S-h-mint); --c-green: var(--S-h-green); --c-orange: var(--S-h-orange); --c-amber: var(--S-h-amber); --c-pink: var(--S-h-pink); --c-red: var(--S-h-red); --c-graphite: var(--S-h-graphite);
}
.app.invert {
  --a-bg: var(--I-bg); --a-list: var(--I-list); --a-chat: var(--I-chat); --a-surface: var(--I-surface); --a-raised: var(--I-raised); --a-in: var(--I-in); --a-ink: var(--I-ink); --a-ink2: var(--I-ink2); --a-ink3: var(--I-ink3); --a-line: var(--I-line); --a-accent: var(--I-accent); --a-fill: var(--I-fill); --a-glass: var(--I-glass); --a-rear: var(--I-rear); --a-green: var(--I-green); --a-red: var(--I-red); --a-tintmix: var(--I-tintmix);
  --c-blue: var(--I-h-blue); --c-indigo: var(--I-h-indigo); --c-purple: var(--I-h-purple); --c-teal: var(--I-h-teal); --c-mint: var(--I-h-mint); --c-green: var(--I-h-green); --c-orange: var(--I-h-orange); --c-amber: var(--I-h-amber); --c-pink: var(--I-h-pink); --c-red: var(--I-h-red); --c-graphite: var(--I-h-graphite);
}

/* Always dark, whatever the page theme (call tiles, dark bands). */
.app.dark {
  --a-bg: var(--D-bg); --a-list: var(--D-list); --a-chat: var(--D-chat); --a-surface: var(--D-surface); --a-raised: var(--D-raised); --a-in: var(--D-in); --a-ink: var(--D-ink); --a-ink2: var(--D-ink2); --a-ink3: var(--D-ink3); --a-line: var(--D-line); --a-accent: var(--D-accent); --a-fill: var(--D-fill); --a-glass: var(--D-glass); --a-rear: var(--D-rear); --a-green: var(--D-green); --a-red: var(--D-red); --a-tintmix: var(--D-tintmix);
  --c-blue: var(--D-h-blue); --c-indigo: var(--D-h-indigo); --c-purple: var(--D-h-purple); --c-teal: var(--D-h-teal); --c-mint: var(--D-h-mint); --c-green: var(--D-h-green); --c-orange: var(--D-h-orange); --c-amber: var(--D-h-amber); --c-pink: var(--D-h-pink); --c-red: var(--D-h-red); --c-graphite: var(--D-h-graphite);
}

.statusbar { display: flex; align-items: center; justify-content: space-between; height: 3.4em; padding: .5em 1.9em 0 2.3em; flex: none; font-size: 1em; font-weight: 600; letter-spacing: -.02em; }
.statusbar .sb-icons { display: flex; align-items: center; gap: .35em; }
.statusbar svg { height: .82em; width: auto; fill: currentColor; }

/* Tinted tiles and monograms (src/theme/tint.ts): the glyph is the hue,
 * the fill is a soft share of it over the card. --c-* follow the context:
 * page theme by default, the opposite one inside an inverted phone. */
.tint { background: color-mix(in srgb, var(--hue) var(--a-tintmix, var(--S-tintmix)), var(--a-raised, var(--tile, var(--card)))); color: var(--hue); }
.h-blue { --hue: var(--c-blue); }
.h-indigo { --hue: var(--c-indigo); }
.h-purple { --hue: var(--c-purple); }
.h-teal { --hue: var(--c-teal); }
.h-mint { --hue: var(--c-mint); }
.h-green { --hue: var(--c-green); }
.h-orange { --hue: var(--c-orange); }
.h-amber { --hue: var(--c-amber); }
.h-pink { --hue: var(--c-pink); }
.h-red { --hue: var(--c-red); }
.h-graphite { --hue: var(--c-graphite); }

.avatar { display: grid; place-items: center; flex: none; width: 2.9em; height: 2.9em; border-radius: 50%; font-weight: 600; font-size: 1em; letter-spacing: -.02em; }
.tile { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: .6em; }
.tile svg { width: 64%; height: 64%; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body, :root:not([data-theme="light"]) .section, :root:not([data-theme="light"]) .section.alt { --tile: #191E2B; --inner: #232837; --inner-2: #2E3446; }
  :root:not([data-theme="light"]) .card { box-shadow: inset 0 0 0 1px var(--line); }
}
:root[data-theme="dark"] body, :root[data-theme="dark"] .section, :root[data-theme="dark"] .section.alt { --tile: #191E2B; --inner: #232837; --inner-2: #2E3446; }
:root[data-theme="dark"] .card { box-shadow: inset 0 0 0 1px var(--line); }

/* ── Inner pages (privacy, terms, security, status, updates) ──────────── */

.doc-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 48px); }
.doc-hero h1 { font-size: clamp(40px, 6vw, 68px); margin-top: 16px; }
.doc-hero .lead { margin-top: 20px; max-width: 680px; }
.doc-meta { margin-top: 20px; color: var(--ink-3); font-size: 14px; }
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-bottom: 120px; }
.doc-toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; font-size: 14px; }
.doc-toc a { padding: 6px 10px; border-radius: 8px; color: var(--ink-3); }
.doc-toc a:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.prose { max-width: 720px; }
.prose h2 { margin: 56px 0 14px; font-size: 26px; letter-spacing: -.025em; line-height: 1.2; scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; font-size: 18px; letter-spacing: -.015em; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 10px; }
.prose li::marker { color: var(--ink-3); }
.prose strong { color: var(--ink); font-weight: 600; }
.callout { margin: 0 0 40px; padding: 22px 24px; border-radius: 20px; background: var(--bg-alt); color: var(--ink-2); }
.callout strong { color: var(--ink); }
.table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.table td { color: var(--ink-2); }
.table td:first-child { color: var(--ink); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--green); }
.pill.beta { color: var(--accent); }
@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; gap: 0; }
  .doc-toc { display: none; }
}

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