/* notekpr website. Hand-written, no build step, no third-party requests.
   Three voices: a bold sans for what we say, the mono of Markdown for what it
   is (kickers like "## Draw"), and Excalidraw's hand for notes in the margin.
   Palette follows the app (notekpr's crates/web/static/style.css); sticky-note yellow
   and the hand-drawn font come from drawings. */

@font-face {
  font-family: "Excalifont";
  src: url(fonts/Excalifont-Latin.woff2) format("woff2");
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-2: #f7f7f5;
  --bg-3: #efefec;
  --fg: #22221f;
  --fg-2: #4a4a46;
  --muted: #84847e;
  --border: #e6e6e1;
  --border-strong: #d4d4cd;
  --accent: #5b5bd6;
  --accent-fg: #ffffff;
  --accent-bg: #ececfb;
  --accent-ink: #4545b8;
  --ok: #2f9e5a;
  --cipher: #6b6b9e;
  --code-bg: #f3f2ef;
  --hl-bg: #fff1a8;
  --sticky: #ffdf6b;
  --sticky-ink: #4d3f08;
  --coral: #e8590c;
  --pink: #d6336c;
  --teal: #0c8599;
  --dot: #d9d9e3;
  --glow-1: rgba(91, 91, 214, 0.18);
  --glow-2: rgba(255, 196, 70, 0.20);
  --night: #15151b;
  --night-2: #1d1d26;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hand: "Excalifont", "Segoe Print", "Bradley Hand", cursive;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(30, 30, 60, 0.10), 0 1px 3px rgba(30, 30, 60, 0.06);
  --shadow-lg: 0 30px 80px -20px rgba(40, 40, 110, 0.35), 0 8px 24px rgba(30, 30, 60, 0.10);
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
  --step-3: clamp(2.5rem, 1.5rem + 4.4vw, 4.6rem);
  --measure: 66ch;
  --page: 74rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17171b; --bg-2: #1e1e23; --bg-3: #27272d;
    --fg: #ececea; --fg-2: #c8c8c3; --muted: #8e8e96;
    --border: #2d2d34; --border-strong: #3d3d45;
    --accent: #8b8cf4; --accent-fg: #15151a; --accent-bg: #2a2a46; --accent-ink: #a9aaff;
    --ok: #4cc27a; --cipher: #9d9dd0; --code-bg: #232328; --hl-bg: #5a4f14;
    --sticky: #e9c95a; --sticky-ink: #3b3006; --coral: #ff8a4c; --pink: #f06595; --teal: #3bc9db;
    --dot: #2c2c36; --glow-1: rgba(139, 140, 244, 0.20); --glow-2: rgba(255, 196, 70, 0.08);
    --night: #0f0f14; --night-2: #18181f;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17171b; --bg-2: #1e1e23; --bg-3: #27272d;
  --fg: #ececea; --fg-2: #c8c8c3; --muted: #8e8e96;
  --border: #2d2d34; --border-strong: #3d3d45;
  --accent: #8b8cf4; --accent-fg: #15151a; --accent-bg: #2a2a46; --accent-ink: #a9aaff;
  --ok: #4cc27a; --cipher: #9d9dd0; --code-bg: #232328; --hl-bg: #5a4f14;
  --sticky: #e9c95a; --sticky-ink: #3b3006; --coral: #ff8a4c; --pink: #f06595; --teal: #3bc9db;
  --dot: #2c2c36; --glow-1: rgba(139, 140, 244, 0.20); --glow-2: rgba(255, 196, 70, 0.08);
  --night: #0f0f14; --night-2: #18181f;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--step-0)/1.6 var(--sans);
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--accent-ink); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-bg); }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.center { text-align: center; margin-inline: auto; }

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

.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.site-head .wrap { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; padding-block: 0.65rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); text-decoration: none; font: 650 1.08rem/1 var(--mono); letter-spacing: -0.01em; }
.brand svg { width: 28px; height: 28px; flex: none; transition: transform 0.4s cubic-bezier(.2,.9,.3,1.4); }
.brand:hover svg { transform: rotate(-12deg) scale(1.06); }
.site-nav { display: flex; align-items: center; gap: 0.25rem 1.2rem; flex-wrap: wrap; margin-left: auto; font-size: var(--step--1); }
.site-nav a { color: var(--fg-2); text-decoration: none; padding-block: 0.25rem; }
.site-nav a:hover { color: var(--fg); }
.site-nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav .btn { padding: 0.5rem 0.9rem; color: var(--accent-fg); box-shadow: none; }

/* ---------------------------------------------------------------- type */

h1, h2, h3 { font-family: var(--sans); font-weight: 780; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); line-height: 1.12; }
h3 { font-size: var(--step-1); font-weight: 680; letter-spacing: -0.015em; line-height: 1.25; }
/* Docs-like pages (features, security, self-host) show the Markdown a heading would have, faintly. */
.md h1::before, .md h2::before, .md h3::before { font-family: var(--mono); color: var(--accent); opacity: 0.55; font-weight: 500; font-size: 0.55em; vertical-align: 0.3em; letter-spacing: 0; }
.md h1::before { content: "# "; }
.md h2::before { content: "## "; }
.md h3::before { content: "### "; }
p { margin: 0; max-width: var(--measure); }
.lede { font-size: var(--step-1); color: var(--fg-2); line-height: 1.55; }
.eyebrow { font: 500 var(--step--1)/1.4 var(--mono); color: var(--muted); letter-spacing: 0.02em; }
.kicker { font: 600 0.95rem/1.2 var(--mono); color: var(--accent-ink); letter-spacing: 0.01em; }
.kicker span { color: var(--muted); font-weight: 400; }
code, kbd { font-family: var(--mono); font-size: 0.9em; }
:not(pre) > code { background: var(--code-bg); padding: 0.08em 0.35em; border-radius: 4px; }
kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0.05em 0.4em; background: var(--bg); }
strong { font-weight: 650; }
.hand { font-family: var(--hand); font-weight: 400; letter-spacing: 0; }
.mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--sticky) 70%, transparent) 58%); padding-inline: 0.06em; }

/* ---------------------------------------------------------------- blocks */

main { display: block; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.md .section + .section { border-top: 1px solid var(--border); }
.md .section { padding-block: clamp(3rem, 6vw, 5rem); }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.75rem; }
.section-head { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { align-items: center; text-align: center; }
.section-head.center p { margin-inline: auto; }

.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btns.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.25rem; border-radius: 999px;
  font: 650 var(--step--1)/1 var(--sans); text-decoration: none;
  border: 1px solid var(--border-strong); color: var(--fg); background: var(--bg);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn:hover { border-color: var(--fg-2); transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.big { padding: 1rem 1.6rem; font-size: 1rem; }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

pre {
  margin: 0; overflow-x: auto;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.15rem; font: 400 0.9rem/1.65 var(--mono); color: var(--fg);
}
pre .c { color: var(--muted); }
pre .p { color: var(--accent-ink); user-select: none; }

.badge { display: inline-block; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.55rem; border-radius: 999px; background: var(--accent-bg); color: var(--accent-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.chips li { list-style: none; font: 500 0.82rem/1 var(--mono); padding: 0.5rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fg-2); background: var(--bg); }

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

.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(40rem 26rem at 18% 8%, var(--glow-1), transparent 70%),
    radial-gradient(36rem 24rem at 86% 18%, var(--glow-2), transparent 70%),
    radial-gradient(48rem 30rem at 50% 100%, var(--glow-1), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.8;
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
}
.hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.hero-head h1 { max-width: 24ch; font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem); }
.hero-head .lede { max-width: 40rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.38rem 0.5rem 0.38rem 0.45rem;
  border: 1px solid var(--border-strong); border-radius: 999px; background: color-mix(in srgb, var(--bg) 85%, transparent);
  font-size: 0.86rem; color: var(--fg-2); text-decoration: none; box-shadow: var(--shadow);
}
.pill b { font: 650 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-fg); background: var(--accent); padding: 0.32rem 0.5rem; border-radius: 999px; }
.pill:hover { color: var(--fg); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; margin: 0.5rem 0 0; padding: 0; font: 500 0.82rem/1.3 var(--mono); color: var(--muted); }
.trust li { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.trust li::before { content: "✓"; color: var(--ok); font-weight: 700; }

/* "noise": the word scrambles now and then (site.js). */
.noise { position: relative; white-space: nowrap; color: var(--accent); }
.noise[data-s] .w { color: transparent; }
.noise[data-s]::after { content: attr(data-s); position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 600; letter-spacing: -0.04em; color: var(--cipher); }
.noise .scribble { position: absolute; left: -4%; bottom: -0.12em; width: 108%; height: 0.32em; overflow: visible; color: var(--coral); pointer-events: none; }

/* The stage: the app, with notes in the margin. */
.hero-stage { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.margin-note { position: absolute; z-index: 3; font-family: var(--hand); font-size: 1.35rem; line-height: 1.15; color: var(--coral); pointer-events: none; }
.margin-note svg { display: block; overflow: visible; }
.margin-note.flip-hint { right: -1.5rem; top: -4.6rem; width: 15rem; text-align: left; transform: rotate(3deg); }
.margin-note.flip-hint svg { width: 5rem; height: 3.2rem; margin: 0.3rem 0 0 1.2rem; }
@media (max-width: 900px) { .margin-note.flip-hint { position: static; transform: none; margin: 0 auto 0.75rem; text-align: center; } .margin-note.flip-hint svg { display: none; } }

/* ---------------------------------------------------------------- the app mock */

.app {
  --w-side: 13.5rem; --w-panel: 15rem;
  margin: 0; position: relative; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg);
  box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; font-size: 0.95rem;
}
.app-bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.dots { display: inline-flex; gap: 6px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.crumb { font: 500 0.8rem/1 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb b { color: var(--fg-2); font-weight: 600; }
.who { display: inline-flex; margin-left: auto; flex: none; }
.who span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 0.72rem/1 var(--sans); color: #fff; border: 2px solid var(--bg-2); margin-left: -6px; }
.who .a { background: #5b5bd6; }
.who .b { background: #1098ad; }
.who .c { background: #e8590c; }
.seg2 { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); flex: none; }
.seg2 button { font: 600 0.78rem/1 var(--sans); padding: 0.45rem 0.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.seg2 button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.seg2 button.srv[aria-pressed="true"] { background: var(--night); color: #b9f6ca; }

.app-body { display: grid; grid-template-columns: var(--w-side) minmax(0, 1fr) var(--w-panel); min-height: 27rem; position: relative; }
.app-side { border-right: 1px solid var(--border); background: var(--bg-2); padding: 0.9rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.86rem; }
.app-side .vault { font-weight: 700; padding: 0.25rem 0.5rem 0.6rem; display: flex; gap: 0.45rem; align-items: center; }
.app-side .lbl { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.75rem 0.5rem 0.35rem; }
.app-side a { color: var(--fg-2); text-decoration: none; padding: 0.32rem 0.5rem; border-radius: 6px; display: flex; gap: 0.45rem; white-space: nowrap; overflow: hidden; }
.app-side a.on { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.app-note { padding: 1.6rem clamp(1.2rem, 3vw, 2.6rem); position: relative; min-width: 0; }
.app-note .title { font: 780 1.9rem/1.15 var(--sans); letter-spacing: -0.02em; margin-bottom: 0.9rem; display: flex; gap: 0.6rem; align-items: center; }
.app-note .line { min-height: 1.75em; line-height: 1.75; white-space: pre-wrap; position: relative; }
.app-note .line.task { padding-left: 1.6em; }
.app-note .line.task::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 1.02em; height: 1.02em; border: 1.6px solid var(--border-strong); border-radius: 4px; transition: background 0.2s, border-color 0.2s; }
.app-note .line.task.done::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; border-color: var(--accent); }
.app-note .line.task.done .txt { color: var(--muted); text-decoration: line-through; }
.app-note .callout { margin-top: 0.6rem; border-left: 3px solid var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); border-radius: 6px; padding: 0.55rem 0.8rem; }
.app-note .callout b { color: var(--teal); }
.app-note .tag { color: var(--accent-ink); }
.app-note .wl { color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.app-note .hl { background: var(--hl-bg); border-radius: 3px; padding-inline: 2px; }
.app-note .md-mk { color: var(--muted); font-family: var(--mono); font-size: 0.85em; }
.caret { display: inline-block; width: 2px; height: 1.25em; margin-left: 1px; vertical-align: -0.22em; background: var(--fg); animation: blink 1.05s steps(1) infinite; position: relative; }
.caret.bob { background: #1098ad; animation: none; }
.caret.bob::after { content: "Bob"; position: absolute; left: 0; top: -1.25em; font: 700 0.66rem/1 var(--sans); color: #fff; background: #1098ad; padding: 0.18rem 0.35rem; border-radius: 4px 4px 4px 0; white-space: nowrap; }
@keyframes blink { 50% { opacity: 0; } }
.app-panel { border-left: 1px solid var(--border); padding: 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.82rem; background: var(--bg); }
.app-panel .lbl { font: 600 0.68rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.comment { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; background: var(--bg-2); display: flex; flex-direction: column; gap: 0.35rem; }
.comment .by { display: flex; align-items: center; gap: 0.4rem; font-weight: 650; color: var(--fg); }
.comment .by i { width: 18px; height: 18px; border-radius: 50%; background: #e8590c; display: inline-block; }
.comment p { color: var(--fg-2); }
.comment .at { color: var(--accent-ink); font-weight: 600; }
.mini-graph { border: 1px solid var(--border); border-radius: 10px; height: 8rem; position: relative; background: radial-gradient(var(--dot) 1px, transparent 1px) 0 0/14px 14px; }
.mini-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.backlinks a { display: block; color: var(--fg-2); text-decoration: none; padding: 0.15rem 0; }

/* What the server sees: the same window, ciphertext only. */
.app-server {
  position: absolute; inset: 0; z-index: 2; padding: 1.2rem 1.4rem; background: var(--night); color: #9e9ec8;
  font: 400 0.78rem/1.6 var(--mono); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.app[data-view="server"] .app-server { opacity: 1; visibility: visible; }
.app-server .head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #c7c7e6; font-weight: 600; }
.app-server .head span { color: #6f6f99; font-weight: 400; }
.rows { display: flex; flex-direction: column; gap: 0.15rem; word-break: break-all; }
.rows div { animation: drop 0.35s ease both; }
.rows .v { color: #a9aaff; font-weight: 700; }
.rows .e { color: #4cc27a; }
.rows .n { color: #6f6f99; }
.rows .t { color: #c7c7e6; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); background: rgba(169,170,255,.15); } to { opacity: 1; transform: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: auto; font: 400 0.72rem/1.3 var(--mono); color: #8a8ab0; }
.legend span::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 2px; margin-right: 0.35em; vertical-align: 0.02em; background: var(--c, var(--muted)); }
.scrambling { color: var(--cipher) !important; font-family: var(--mono); }

@media (max-width: 1080px) { .app-body { grid-template-columns: var(--w-side) minmax(0, 1fr); } .app-panel { display: none; } }
@media (max-width: 720px) { .app-body { grid-template-columns: minmax(0, 1fr); min-height: 22rem; } .app-side { display: none; } .who { display: none; } .crumb { display: none; } .seg2 { margin-left: auto; } .seg2 button { padding: 0.42rem 0.55rem; font-size: 0.72rem; } .app-bar { gap: 0.5rem; padding-inline: 0.6rem; } }

/* ---------------------------------------------------------------- works-with strip */

.strip { padding-block: 1.6rem 0; }
.strip p { margin-inline: auto; text-align: center; font: 500 0.82rem/1.4 var(--mono); color: var(--muted); }
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem; margin: 0.9rem 0 0; padding: 0; }
.strip li { list-style: none; font: 750 1.15rem/1 var(--sans); letter-spacing: -0.02em; color: color-mix(in srgb, var(--fg) 55%, transparent); }

/* ---------------------------------------------------------------- feature rows */

.feature-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature.flip .feature-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }
.feature-copy > p { color: var(--fg-2); }
.feature.wide .feature-grid { grid-template-columns: minmax(0, 1fr); }
.feature.wide .feature-copy { align-items: center; text-align: center; max-width: 46rem; margin-inline: auto; }
.feature.canvas { background: radial-gradient(var(--dot) 1.2px, transparent 1.2px) 0 0/24px 24px, var(--bg); border-block: 1px solid var(--border); }
.feature.tint { background: var(--bg-2); border-block: 1px solid var(--border); }

.shot { position: relative; margin: 0; min-width: 0; }
.window { border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-lg); transform: perspective(1600px) rotateY(var(--tilt, -4deg)) rotateX(2deg); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.feature.flip .window { --tilt: 4deg; }
.shot:hover .window { transform: none; }
.window .app-bar { padding: 0.5rem 0.75rem; }
.window img { width: 100%; }
.shot.bare img { border-radius: 12px; filter: drop-shadow(0 24px 40px rgba(30,30,80,.25)); }
.shot .inset { position: absolute; left: -7%; bottom: -22%; width: 36%; transform: rotate(-3deg); --tilt: 0deg; }
.shot .inset .window { transform: none; }

.sticky {
  position: absolute; z-index: 3; width: 11.5rem; padding: 0.9rem 1rem 1.1rem; background: var(--sticky); color: var(--sticky-ink);
  font-family: var(--hand); font-size: 1.12rem; line-height: 1.2; box-shadow: 0 12px 24px -10px rgba(0,0,0,.35); transform: rotate(var(--r, -4deg));
  border-radius: 2px 2px 10px 2px;
}
.sticky::before { content: ""; position: absolute; top: -10px; left: 50%; width: 3.4rem; height: 1.2rem; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border-strong) 60%, transparent); }
.sticky.tl { left: -2.2rem; top: -2rem; }
.sticky.tr { right: -1.6rem; top: -2.4rem; --r: 5deg; }
.sticky.bl { left: -2rem; bottom: -2rem; --r: 3deg; }
.sticky.br { right: -1.4rem; bottom: -2.2rem; --r: -3deg; }
@media (max-width: 900px) { .sticky { position: relative; inset: auto; margin: -1rem auto 0; display: block; } }

/* Terminal and folder (your own tools). */
.term { background: var(--night); color: #d6d6e6; border-radius: 12px; border: 1px solid #2a2a35; box-shadow: var(--shadow-lg); overflow: hidden; }
.term .app-bar { background: #1c1c25; border-bottom-color: #2a2a35; }
.term .crumb { color: #8a8ab0; }
.term pre { background: transparent; border: 0; color: #d6d6e6; font-size: 0.86rem; padding: 1rem 1.2rem 1.2rem; }
.term pre .p { color: #8b8cf4; }
.term pre .c { color: #6f6f99; }
.term pre .ok { color: #69db7c; }
.term pre .y { color: #ffd43b; }
.tools { position: relative; padding-bottom: 3rem; }
.tools .tree { position: absolute; right: -1.5rem; bottom: -1rem; width: min(17rem, 60%); transform: rotate(2deg); }
.tree { font: 400 0.88rem/1.75 var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.15rem; overflow-x: auto; white-space: pre; color: var(--fg-2); box-shadow: var(--shadow); }
.tree .d { color: var(--fg); font-weight: 650; }
.tree .c { color: var(--muted); }

/* ---------------------------------------------------------------- private by design (night) */

.night { background: var(--night); color: #e7e7f2; position: relative; overflow: hidden; isolation: isolate; }
.night::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 26rem at 80% 0%, rgba(139,140,244,.25), transparent 70%), radial-gradient(30rem 20rem at 0% 100%, rgba(255,196,70,.10), transparent 70%); }
.night h2, .night h3 { color: #fff; }
.night p { color: #b9b9cf; }
.night .kicker { color: #a9aaff; }
.night a { color: #c3c4ff; }
.envelope { border: 1px solid #2c2c3a; border-radius: 14px; background: #191922; padding: 1.25rem 1.4rem; font: 400 0.84rem/1.65 var(--mono); color: #9d9dd0; word-break: break-all; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.envelope .v { color: #a9aaff; font-weight: 700; }
.envelope .e { color: #4cc27a; }
.envelope .n { color: #6f6f99; }
.envelope .tg { color: #e7e7f2; }
.envelope .legend { margin-top: 0.9rem; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; }
.points li { list-style: none; border: 1px solid #2c2c3a; border-radius: 14px; padding: 1.25rem 1.3rem; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 0.5rem; }
.points .ico { font-size: 1.5rem; }
.points p { font-size: 0.97rem; }
.night-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.night .hand-note { font-family: var(--hand); color: var(--sticky); font-size: 1.3rem; transform: rotate(-3deg); display: inline-block; }

/* ---------------------------------------------------------------- in the box */

.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1rem; margin: 0; padding: 0; }
.box-grid li { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.15rem 1.2rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; min-width: 0; }
.box-grid li:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.box-grid .ico { font-size: 1.35rem; line-height: 1; }
.box-grid b { font: 680 1rem/1.35 var(--sans); }
.box-grid span { color: var(--fg-2); font-size: 0.94rem; }

/* ---------------------------------------------------------------- switching */

.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.from { border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; background: var(--bg); display: flex; flex-direction: column; gap: 0.7rem; position: relative; overflow: hidden; }
.from::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--c, var(--accent-bg)); opacity: 0.5; }
.from .k { font: 600 0.8rem/1 var(--mono); color: var(--muted); }
.from h3 { font-size: 1.25rem; }
.from p { color: var(--fg-2); font-size: 0.97rem; }

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

.plans-head { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.5rem; }
.plans-head h3 { font-size: 1.35rem; }
.plans-head h3::before { content: "### "; font: 500 0.75em/1 var(--mono); color: var(--accent); opacity: 0.55; letter-spacing: 0; }
.plans-head p { color: var(--fg-2); }
.plans-head .chips { margin-top: 0.35rem; }
.addons + .plans-head { margin-top: clamp(3rem, 6vw, 4.5rem); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan { border: 1px solid var(--border); border-radius: 18px; padding: 1.5rem 1.35rem; background: var(--bg); display: flex; flex-direction: column; gap: 1rem; position: relative; }
.plan.hot { border: 2px solid var(--accent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.plan .ribbon { position: absolute; top: -0.8rem; left: 1.2rem; font: 650 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; background: var(--accent); color: var(--accent-fg); padding: 0.4rem 0.6rem; border-radius: 999px; }
.plan .name { font: 750 1.2rem/1.2 var(--sans); }
.plan .for { color: var(--muted); font-size: 0.92rem; min-height: 2.6em; }
.plan .price { font: 800 2.4rem/1 var(--sans); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 0.35rem; }
.plan .price small { font: 500 0.85rem/1 var(--sans); color: var(--muted); letter-spacing: 0; }
.plan .price.soon { font-size: 1.5rem; color: var(--fg-2); }
.plan .cost { display: flex; flex-direction: column; gap: 0.45rem; }
.plan .cost .price.soon { min-height: 2.4rem; align-items: center; }
.plan .per { font-size: 0.85rem; color: var(--muted); }
.plan ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.plan li { list-style: none; padding-left: 1.5rem; position: relative; font-size: 0.94rem; color: var(--fg-2); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.plan li b { color: var(--fg); }
.plan .btn { width: 100%; }
.btn[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.calc { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); }
.calc[hidden] { display: none; }
.calc .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; }
.calc label { font-size: 0.9rem; color: var(--fg-2); }
.calc input[type=number] { width: 6.5rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: var(--fg); font: 650 0.9rem/1.2 var(--mono); text-align: right; }
.calc input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); }
.calc .sum { font-size: 0.92rem; color: var(--fg-2); }
.calc .sum b { font: 800 1.5rem/1 var(--sans); letter-spacing: -0.02em; color: var(--fg); }
.btn[aria-disabled="true"]:hover { transform: none; }
.addons { margin-top: 1.25rem; border: 1px dashed var(--border-strong); border-radius: 18px; padding: 1.2rem 1.35rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; background: var(--bg-2); }
.addons .copy { display: flex; flex-direction: column; gap: 0.3rem; }
.addons .copy p { color: var(--fg-2); font-size: 0.95rem; }
.addons ul { justify-content: flex-end; max-width: 30rem; }
.selfhost { margin-top: 1rem; border-radius: 18px; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; background: var(--night); color: #e7e7f2; }
.selfhost .big { font: 800 2rem/1 var(--sans); color: #fff; }
.selfhost p { color: #b9b9cf; }
.selfhost b { color: #fff; }
.selfhost .btn { background: transparent; color: #fff; border-color: #44445a; }
.fine { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); text-align: center; max-width: none; }

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

.faq { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 0 1.2rem; transition: border-color 0.2s; }
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow); }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem 0; font: 650 1.04rem/1.35 var(--sans); display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.4rem/1 var(--mono); color: var(--accent-ink); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.1rem; color: var(--fg-2); }

/* ---------------------------------------------------------------- final call */

.cta { text-align: center; }
.cta-box { position: relative; border-radius: 28px; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; background: linear-gradient(135deg, #3b3bb0, #5b5bd6 45%, #8b5cf6); color: #fff; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; box-shadow: var(--shadow-lg); }
.cta-box::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.2px); background-size: 24px 24px; mask-image: radial-gradient(closest-side, #000, transparent); }
.cta-box h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); }
.cta-box p { color: rgba(255,255,255,.85); }
.cta-box .btn { background: #fff; color: #3b3bb0; border-color: #fff; }
.cta-box .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-box .hand { font-size: 1.4rem; color: var(--sticky); transform: rotate(-3deg); }

/* ---------------------------------------------------------------- the video */

/* The link: a play button with a slow ring, next to the buttons. */
.watch-link { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.9rem 0.3rem 0.3rem; border-radius: 999px; font: 650 1rem/1 var(--sans); color: var(--fg); text-decoration: none; }
.watch-link .play { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow); color: var(--accent); transition: transform 0.2s cubic-bezier(.2,.9,.3,1.4); }
.watch-link .play::before { content: ""; margin-left: 0.2rem; border-style: solid; border-width: 0.45rem 0 0.45rem 0.75rem; border-color: transparent transparent transparent currentColor; }
.watch-link .play::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: ring 3.2s ease-out 1.5s infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.55; } 60%, 100% { transform: scale(1.45); opacity: 0; } }
.watch-link .len { font: 500 0.8rem/1 var(--mono); color: var(--muted); }
.watch-link:hover .play { transform: scale(1.08); }
.cta-box .watch-link { color: #fff; }
.cta-box .watch-link .play { background: #fff; border-color: #fff; color: #3b3bb0; }
.cta-box .watch-link .play::after { border-color: #fff; }
.cta-box .watch-link .len { color: rgba(255,255,255,.7); }

/* The player: a dialog with the chapters beside the video (below it on phones). */
.watch { width: min(78rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--bg); color: var(--fg); box-shadow: var(--shadow-lg); overflow: hidden; }
.watch[open] { display: flex; flex-direction: column; animation: watch-in 0.3s cubic-bezier(.2,.7,.2,1); }
.watch::backdrop { background: rgba(12, 12, 22, 0.66); backdrop-filter: blur(6px); }
.watch[open]::backdrop { animation: fade-in 0.3s ease; }
@keyframes watch-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
html:has(.watch[open]) { overflow: hidden; scrollbar-gutter: stable; }
.watch-head { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.7rem 0.7rem 1.2rem; border-bottom: 1px solid var(--border); }
.watch-head .hand { font-size: 1.3rem; color: var(--coral); transform: rotate(-4deg); }
.watch-close { margin-left: auto; width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg-2); font: 500 1rem/1 var(--sans); cursor: pointer; }
.watch-close:hover { color: var(--fg); border-color: var(--fg-2); }
.watch-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; }
.watch-screen { position: relative; align-self: start; background: #000; }
.watch video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.watch-end { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; background: rgba(12, 12, 22, 0.55); backdrop-filter: blur(4px); }
.watch-end[hidden] { display: none; }
.watch-end .again { cursor: pointer; }
/* contain: size keeps the list from making the row taller than the video: it scrolls instead. */
.chapters { position: relative; contain: size; overflow-y: auto; margin: 0; padding: 0.4rem; border-left: 1px solid var(--border); }
.chapters li { list-style: none; }
.chapters button { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.15rem 0.5rem; width: 100%; padding: 0.55rem 0.65rem; border: 0; border-radius: 8px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.chapters button:hover { background: var(--bg-2); }
.chapters time { grid-row: span 2; font: 500 0.78rem/1.6 var(--mono); color: var(--muted); }
.chapters b { font-size: 0.92rem; font-weight: 650; line-height: 1.35; }
.chapters b .badge { margin-left: 0.3rem; vertical-align: 0.1em; font-size: 0.62rem; padding: 0.22rem 0.4rem; }
.chapters span:not(.badge) { grid-column: 2; font-size: 0.84rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
/* What is playing: its line in full, as a transcript. */
.chapters button[aria-current] { background: var(--accent-bg); }
.chapters [aria-current] time { color: var(--accent-ink); }
.chapters [aria-current] span:not(.badge) { color: var(--fg-2); -webkit-line-clamp: unset; line-clamp: none; }
@media (prefers-reduced-motion: reduce) {
  .watch-link .play::after { animation: none; }
  .watch[open], .watch[open]::backdrop { animation: none; }
}
@media (max-width: 900px) {
  .watch { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px; }
  .watch-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .chapters { contain: none; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .watch-head { padding-left: 1rem; }
  .watch-head .hand { display: none; }
}

/* ---------------------------------------------------------------- docs pages (features, security, self-host) */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.split > * { min-width: 0; }
.editors { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.editors span { font: 500 var(--step--1)/1 var(--mono); padding: 0.45rem 0.65rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fg-2); }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: step; padding: 0; margin: 0; }
.flow li { list-style: none; counter-increment: step; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); min-width: 0; }
.flow li::before { content: counter(step); font: 650 0.8rem/1 var(--mono); color: var(--accent-fg); background: var(--accent); width: 1.6rem; height: 1.6rem; border-radius: 999px; display: inline-grid; place-items: center; }
.flow p { color: var(--fg-2); font-size: 0.98rem; }
.md .flow h3::before { content: none; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.pillar { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.pillar .k { font: 600 var(--step--1)/1.3 var(--mono); color: var(--accent-ink); }
.pillar p { color: var(--fg-2); }
.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.4rem 2rem; margin: 0; padding: 0; }
.grid-list li { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.grid-list b { font: 680 0.98rem/1.35 var(--sans); }
.grid-list span { color: var(--fg-2); font-size: 0.96rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
th { font: 600 0.8rem/1.3 var(--mono); color: var(--muted); background: var(--bg-2); letter-spacing: 0.02em; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }
.yes { color: var(--ok); font-weight: 600; }
.no { color: var(--muted); }
table.compare { min-width: 56rem; font-size: 0.9rem; }
table.compare td:nth-child(2), table.compare th:nth-child(2) { background: color-mix(in srgb, var(--accent-bg) 55%, transparent); }
table.compare th:nth-child(2) { color: var(--accent-ink); }
.fine-left { font-size: 0.85rem; color: var(--muted); }
.their { font-size: 0.9rem; color: var(--muted); }
.page-head { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.1rem; position: relative; }
.prose { display: flex; flex-direction: column; gap: 1rem; }
.prose ul { margin: 0; padding-left: 1.2rem; max-width: var(--measure); display: flex; flex-direction: column; gap: 0.4rem; }
.prose li { color: var(--fg-2); }
.prose li strong { color: var(--fg); }
.callout { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 1rem 1.15rem; background: var(--bg-2); display: flex; flex-direction: column; gap: 0.5rem; max-width: 52rem; }
.callout .eyebrow { color: var(--accent-ink); }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; }
.keys li { list-style: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.keys .name { font: 650 0.95rem/1.3 var(--mono); }
.keys .what { color: var(--fg-2); font-size: 0.95rem; }
.keys .where { font: 400 0.8rem/1.4 var(--mono); color: var(--muted); }
.fp { font: 500 1rem/1.5 var(--mono); letter-spacing: 0.06em; color: var(--fg); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* The docs pages get a little of the home page's glow behind their heading. */
.md .page-head::before { content: ""; position: absolute; inset: -4rem -20vw auto; height: 22rem; z-index: -1; background: radial-gradient(30rem 14rem at 20% 40%, var(--glow-1), transparent 70%); pointer-events: none; }
.md { position: relative; isolation: isolate; }

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

.site-foot { border-top: 1px solid var(--border); background: var(--bg-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.foot-grid .about { display: flex; flex-direction: column; gap: 0.8rem; color: var(--fg-2); font-size: 0.94rem; }
.foot-grid .about .hand { font-size: 1.25rem; color: var(--accent-ink); }
.foot-grid h4 { margin: 0 0 0.7rem; font: 600 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.foot-grid ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.foot-grid li { list-style: none; font-size: 0.94rem; }
.foot-grid a { color: var(--fg-2); text-decoration: none; }
.foot-grid a:hover { color: var(--fg); text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; padding-block: 1.2rem 2rem; border-top: 1px solid var(--border); font: 400 0.8rem/1.4 var(--mono); color: var(--muted); }
/* Who makes it: coolapso.sh, as on searchbase.md. */
.footer-credit { display: inline-flex; align-items: center; gap: 9px; font: 500 0.82rem/1 var(--mono); color: var(--muted); text-decoration: none; }
.footer-credit img { width: 22px; height: 22px; border-radius: 5px; }
.footer-credit:hover { color: var(--accent-ink); }

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

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.draw-in path { stroke-dasharray: var(--len, 600); stroke-dashoffset: 0; }
.js .draw-in path { stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1.2s ease 0.3s; }
.js .draw-in.in path, .js .in .draw-in path { stroke-dashoffset: 0; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(var(--r, -4deg)); } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .draw-in path { stroke-dashoffset: 0; transition: none; }
  .float, .caret, .rows div { animation: none; }
  .window, .shot:hover .window { transform: none; transition: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .addons { grid-template-columns: minmax(0, 1fr); }
  .addons ul { justify-content: flex-start; max-width: none; }
}
@media (max-width: 900px) {
  .feature-grid, .feature.flip .feature-grid, .night-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .tools .tree { position: relative; right: auto; bottom: auto; margin: -1.5rem 0 0 auto; }
  .feature.flip .feature-copy { order: 0; }
  .pillars, .flow, .points, .cards3 { grid-template-columns: minmax(0, 1fr); }
  .window { transform: none; }
  .shot .inset { position: relative; right: auto; bottom: auto; width: 80%; margin: -2rem 0 0 auto; }
  .selfhost { grid-template-columns: minmax(0, 1fr); }
  .plans, .plans.two { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav .opt { display: none; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-head h1 br { display: none; }
}