/* Homunculus site. Plain CSS, no build step.
   Colours are the app's own light theme (apps/desktop/src/renderer/src/assets/index.css):
   neutral greys only. Decoration is drawn with ::before / ::after, not images.
   The app look-alikes are in mocks.css.
   Sections: tokens · base · nav · buttons · hero · ideas · section heads · tour ·
   shots · everything · phone · faq · closing · footer · responsive · motion */

/* ───── fonts ───── */
/* Geist, the variable font the app bundles (@fontsource-variable/geist), served from
   this site so pages make no third-party requests. Mono is the system's, as in the app. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ───── tokens ───── */
:root {
  --background: #ffffff;         /* oklch(1 0 0) */
  --foreground: #0a0a0a;         /* oklch(0.145 0 0) */
  --primary: #171717;            /* oklch(0.205 0 0) */
  --sidebar: #fafafa;            /* oklch(0.985 0 0) */
  --muted: #f5f5f5;              /* oklch(0.97 0 0) */
  --muted-foreground: #737373;   /* oklch(0.556 0 0) */
  --border: #e5e5e5;             /* oklch(0.922 0 0) */
  --ring: #a1a1a1;               /* oklch(0.708 0 0) */
  --ink-2: #404040;
  --primary-foreground: #fafafa;
  --btn: var(--primary);         /* the call-to-action button */
  --btn-fg: #fafafa;
  --btn-hover: #2a2a2a;
  --band: #171717;               /* the dark Phone band */
  --nav-bg: rgb(255 255 255 / 0.86);
  --radius: 0.45rem;

  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 30px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.04), 0 30px 70px rgb(0 0 0 / 0.12);
  --page: 72rem;
}
/* Dark: the app's own .dark tokens (assets/index.css), same neutral scale. main.js
   and the inline head script put .dark on <html>, as the app does. */
html.dark {
  color-scheme: dark;
  --background: #0a0a0a;         /* oklch(0.145 0 0) */
  --foreground: #fafafa;         /* oklch(0.985 0 0) */
  --primary: #2e2e2e;            /* oklch(0.3 0 0) */
  --sidebar: #171717;            /* oklch(0.205 0 0) */
  --muted: #262626;              /* oklch(0.269 0 0) */
  --muted-foreground: #a1a1a1;   /* oklch(0.708 0 0) */
  --border: rgb(255 255 255 / 0.1);
  --ring: #737373;               /* oklch(0.556 0 0) */
  --ink-2: #d4d4d4;
  --btn: #fafafa;
  --btn-fg: #0a0a0a;
  --btn-hover: #e5e5e5;
  --band: #171717;
  --nav-bg: rgb(10 10 10 / 0.82);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 30px 70px rgb(0 0 0 / 0.5);
}

/* ───── base ───── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; }
img { display: block; }
::selection { background: var(--foreground); color: var(--background); }
:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--background); padding: 0.5rem 0.8rem; border-radius: var(--radius); box-shadow: var(--shadow); }

code { font: 500 0.86em var(--mono); background: var(--muted); border: 1px solid var(--border); padding: 0.05em 0.35em; border-radius: 4px; white-space: nowrap; }
kbd { font: 500 0.8em var(--sans); padding: 0.05em 0.4em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--background); white-space: nowrap; }

/* a wikilink looks the way the app draws one: bold, dotted underline */
.wl { font-weight: 600; text-decoration: underline dotted var(--muted-foreground); text-underline-offset: 3px; }

/* ───── nav ───── */
/* The element Safari (iOS 26) colours the status-bar strip from: see redrawStatusStrip in main.js. */
.status-strip { position: fixed; top: 0; left: 0; right: 0; height: max(env(safe-area-inset-top), 12px); background: var(--background); z-index: 51; pointer-events: none; }
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.nav::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: var(--border); opacity: 0; transition: opacity 0.2s; }
.nav.is-scrolled::after { opacity: 1; }
.nav-in { max-width: var(--page); margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 2.2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.brand img { border-radius: 6px; }
.nav-links { display: flex; gap: 1.5rem; margin-right: auto; }
.nav-links a { text-decoration: none; color: var(--muted-foreground); font-size: 0.93rem; font-weight: 500; position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--foreground); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
.nav-links a:hover { color: var(--foreground); }
.nav-links a:hover::after { transform: scaleX(1); }

/* the theme button cycles System → Light → Dark, as the app's sidebar button does */
.theme-btn { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-right: -1.4rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted-foreground); cursor: pointer; }
.theme-btn:hover { background: var(--muted); color: var(--foreground); }
.theme-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
html:not([data-theme-mode]) .theme-btn .t-system, html[data-theme-mode='system'] .theme-btn .t-system,
html[data-theme-mode='light'] .theme-btn .t-light, html[data-theme-mode='dark'] .theme-btn .t-dark { display: block; }

/* ───── buttons ───── */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.2rem; border-radius: var(--radius); background: var(--btn); color: var(--btn-fg); font-weight: 600; text-decoration: none; border: 1px solid var(--btn); transition: background 0.15s, transform 0.15s; }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.9rem; }
.btn-ghost { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-ghost:hover { background: var(--muted); }
.btn-ghost::after { content: '→'; transition: transform 0.15s; }
.btn-ghost:hover::after { transform: translateX(3px); }
/* the download buttons carry an Apple mark, drawn as a mask */
.btn[data-download]:not(.btn-sm)::before { content: ''; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--apple) center / contain no-repeat; mask: var(--apple) center / contain no-repeat; }
.btn[data-download]:not([href]) { opacity: 0.4; pointer-events: none; }
:root { --apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.5 2-3.7 2.1-3.8-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.2 1-4.1 2.5-1.8 3.1-.5 7.6 1.3 10.1.8 1.2 1.8 2.6 3.1 2.5 1.2 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.4-.9-2.4-4.1zM14 5.2c.7-.8 1.1-1.9 1-3-1 0-2.1.7-2.8 1.5-.6.7-1.2 1.8-1 2.9 1 .1 2.1-.6 2.8-1.4z'/%3E%3C/svg%3E"); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.fine { color: var(--muted-foreground); font-size: 0.86rem; margin-top: 0.9rem; }

/* ───── hero ───── */
.hero { max-width: 76rem; margin: 0 auto; padding: 4.5rem 1.5rem 5rem; position: relative; }
/* soft dotted field behind the window, like the app's canvas */
.hero::before { content: ''; position: absolute; inset: 14rem -50vw -2rem; z-index: -1; background: radial-gradient(var(--border) 1.1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 55%, #000, transparent 80%); mask: radial-gradient(ellipse 60% 55% at 50% 55%, #000, transparent 80%); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: end; }
.hero-tag { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; font-weight: 500; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.8rem 0.22rem 0.5rem; background: var(--background); }
.hero-tag::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--foreground); box-shadow: 0 0 0 3px var(--muted); }
.hero-title { font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.055em; margin-top: 1.3rem; }
.hero-title em { font-style: normal; position: relative; white-space: nowrap; }
/* hand-drawn underline under "talk to" */
.hero-title em::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -0.1em; height: 0.22em;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C40 4 90 2 197 6' fill='none' stroke='%230a0a0a' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C40 4 90 2 197 6' fill='none' stroke='%230a0a0a' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hero-side { margin-bottom: -3.4rem; }
.hero-lede { font-size: 1.12rem; color: var(--ink-2); }
.hero-side .cta-row { margin-top: 1.6rem; }
.hero-shot { margin: 9rem auto 0; max-width: 70rem; }
.hero-shot .app-mock { box-shadow: var(--shadow-lg); }

/* ───── ideas ───── */
.ideas { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: idea; border-top: 1px solid var(--border); }
.idea { padding: 2.4rem 2rem 2.6rem 0; counter-increment: idea; position: relative; }
.idea + .idea { padding-left: 2rem; border-left: 1px solid var(--border); }
.idea::before { content: counter(idea, decimal-leading-zero); display: block; font: 500 0.8rem var(--mono); color: var(--muted-foreground); margin-bottom: 1.4rem; }
.idea h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; }
.idea p { color: var(--ink-2); }

/* ───── section heads ───── */
.sec-head { max-width: var(--page); margin: 0 auto 3.5rem; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.sec-title { font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.sec-title::after { content: '.'; }
.sec-lede { color: var(--ink-2); font-size: 1.12rem; max-width: 36rem; }
/* a heading with its line underneath, left-aligned (the tour) */
.sec-head-stack { grid-template-columns: 1fr; gap: 1rem; align-items: start; }

/* ───── tour ───── */
.tour { background: var(--sidebar); border-block: 1px solid var(--border); padding: 7rem 0; counter-reset: stop; }
.stop { max-width: var(--page); margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; counter-increment: stop; position: relative; }
.stop + .stop::before { content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: var(--border); }
.stop:nth-child(odd of .stop) .shot { order: -1; }
.stop-text h3 { font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.9rem; }
.stop-text h3::before { content: counter(stop, decimal-leading-zero) ' / 08'; display: block; font: 500 0.78rem var(--mono); color: var(--muted-foreground); letter-spacing: 0; margin-bottom: 0.8rem; }
.stop-text p { color: var(--ink-2); font-size: 1.04rem; }

/* ───── shots (the app look-alikes; their styles live in mocks.css) ───── */
/* Animations inside a look-alike wait until it's on screen (main.js adds .is-live).
   Paused, a delayed animation holds its first frame, so a card that fades in later
   stays hidden until then. Without JS (no html.js) nothing is held. */
html.js .app-mock:not(.is-live), html.js .app-mock:not(.is-live) *,
html.js .app-mock:not(.is-live)::before, html.js .app-mock:not(.is-live)::after,
html.js .app-mock:not(.is-live) *::before, html.js .app-mock:not(.is-live) *::after { animation-play-state: paused !important; }
/* The hero's reply is typed in once it's live; until then it stays hidden, so a slow
   load never paints the finished answer and then wipes it. */
html.js .app-mock:not(.is-live) [data-reply] { visibility: hidden; }
.shot { min-width: 0; }
.shot .app-mock { box-shadow: var(--shadow); }

/* ───── everything ───── */
.all { padding: 7rem 0 5rem; }
.groups { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; columns: 2; column-gap: 4rem; }
.group { break-inside: avoid; margin-bottom: 3.2rem; position: relative; }
.group h3 { font-size: 1.2rem; font-weight: 700; padding-bottom: 0.8rem; margin-bottom: 0.3rem; border-bottom: 2px solid var(--foreground); display: flex; justify-content: space-between; align-items: baseline; }
.group::before { content: attr(data-count); position: absolute; right: 0; top: 0.3rem; font: 500 0.78rem var(--mono); color: var(--muted-foreground); }
.group dl { display: grid; grid-template-columns: 10.5rem 1fr; }
.group dt, .group dd { padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.group dt { font-weight: 600; font-size: 0.94rem; padding-right: 1rem; display: flex; gap: 0.55rem; }
.group dt::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 0.58em; background: var(--foreground); }
.group dd { color: var(--ink-2); font-size: 0.94rem; }

/* ───── phone ───── */
.phone { background: var(--band); color: #fafafa; border-block: 1px solid var(--border); }
.phone { padding: 7rem max(1.5rem, calc((100% - var(--page)) / 2 + 1.5rem)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
.phone .sec-lede, .phone .steps p { color: #d4d4d4; }
.phone .sec-lede { margin-top: 1.2rem; }
.phone .fine { color: #a3a3a3; }
.phone a { color: #fafafa; }
.steps { counter-reset: step; margin: 2.4rem 0 1.4rem; display: flex; flex-direction: column; gap: 1.4rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.3rem 1fr; column-gap: 1rem; }
.steps li::before { content: counter(step); grid-row: span 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1.5px solid #fafafa; display: grid; place-items: center; font-weight: 600; }
.steps h3 { font-size: 1.05rem; font-weight: 600; }
.shot-phone { justify-self: center; width: 100%; max-width: 20rem; }

/* ───── faq ───── */
.faq { max-width: 48rem; margin: 0 auto; padding: 7rem 1.5rem; }
.faq .sec-title { margin-bottom: 2rem; }
details { border-bottom: 1px solid var(--border); }
details:first-of-type { border-top: 1px solid var(--border); }
summary { list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; font-weight: 600; font-size: 1.08rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; position: absolute; right: 0.3rem; top: 50%; width: 0.8rem; height: 0.8rem; transform: translateY(-50%);
  background: linear-gradient(var(--foreground) 0 0) center / 100% 1.5px no-repeat, linear-gradient(var(--foreground) 0 0) center / 1.5px 100% no-repeat; transition: transform 0.2s; }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--ink-2); padding: 0 2.5rem 1.3rem 0; }

/* ───── closing ───── */
.closing { text-align: center; padding: 7rem 1.5rem 8rem; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.closing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(var(--border) 1.1px, transparent 1.3px) 0 0 / 22px 22px; -webkit-mask: radial-gradient(ellipse 50% 60% at 50% 50%, #000, transparent 80%); mask: radial-gradient(ellipse 50% 60% at 50% 50%, #000, transparent 80%); }
.closing h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.closing p { color: var(--ink-2); font-size: 1.12rem; margin-top: 1.2rem; }
.closing .cta-row { justify-content: center; }

/* ───── footer ───── */
.foot { max-width: var(--page); margin: 0 auto; padding: 2.2rem 1.5rem 3rem; border-top: 1px solid var(--border); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; color: var(--muted-foreground); font-size: 0.88rem; }
.foot .brand { color: var(--foreground); }
.foot [data-release-foot] { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; }

/* ───── responsive ───── */
@media (max-width: 960px) {
  .hero-top, .stop, .phone, .sec-head { grid-template-columns: 1fr; }
  .hero-top { gap: 1.5rem; }
  .hero-side { margin-bottom: 0; }
  .hero-shot { margin-top: 3rem; }
  .hero { padding-top: 3.5rem; }
  .stop { gap: 2rem; }
  .stop:nth-child(odd of .stop) .shot { order: 0; }
  .groups { columns: 1; }
  .phone { gap: 3.5rem; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .theme-btn { margin-left: auto; }
  .ideas { grid-template-columns: 1fr; }
  .idea, .idea + .idea { padding: 2rem 0; border-left: 0; }
  .idea + .idea { border-top: 1px solid var(--border); }
  .tour, .all, .faq, .phone { padding-block: 4.5rem; }
  .group dl { grid-template-columns: 1fr; }
  .group dt { border-bottom: 0; padding-bottom: 0.1rem; }
  .group dd { padding-top: 0; padding-left: 1.1rem; }
  .foot [data-release-foot] { margin-left: 0; width: 100%; }
}

/* ───── motion ───── */
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───── flows ───── */
.flows { padding: 7rem 0 2rem; }
.flow-grid { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; counter-reset: flow; }
.flow { counter-increment: flow; border: 1px solid var(--border); border-radius: 14px; padding: 2rem; background: var(--sidebar); display: flex; flex-direction: column; }
.flow h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; }
.flow h3::before { content: counter(flow, decimal-leading-zero); display: block; font: 500 0.78rem var(--mono); color: var(--muted-foreground); letter-spacing: 0; margin-bottom: 0.7rem; }
.flow > p { color: var(--ink-2); margin-top: 0.6rem; }
.flow .shot { padding-top: 1.6rem; }
@media (max-width: 860px) { .flow-grid { grid-template-columns: 1fr; } .flows { padding-top: 4.5rem; } }
@media (max-width: 720px) { .flow { padding: 1.4rem 1.2rem 0; } }
.flows-page { padding-top: 5rem; }
.more-link { max-width: var(--page); margin: 0 auto; padding: 2.4rem 1.5rem 0; }
.more-link a { font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.more-link a::after { content: '→'; transition: transform 0.15s; }
.more-link a:hover::after { transform: translateX(3px); }
.nav-links a[aria-current='page'] { color: var(--foreground); }

/* ───── text pages (getting started, changelog, privacy) ───── */
.doc { max-width: 46rem; margin: 0 auto; padding: 5rem 1.5rem 6rem; }
.doc-head { padding-bottom: 2.8rem; border-bottom: 1px solid var(--border); }
.doc-kicker { font: 500 0.82rem var(--mono); color: var(--muted-foreground); margin-bottom: 1rem; }
.doc-head .sec-lede { margin-top: 1.3rem; }
.doc h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; color: var(--foreground); }
.doc p, .doc li, .doc dd { color: var(--ink-2); }
.doc p + p { margin-top: 0.8rem; }
.doc a:not(.btn):not(.brand) { font-weight: 500; }
.doc-sec { padding-top: 3rem; }
.doc-sec > h2 { margin-bottom: 0.9rem; }
.doc-sec ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.doc-sec ul li { position: relative; padding-left: 1.3rem; }
.doc-sec ul li::before { content: ''; position: absolute; left: 0.2rem; top: 0.72em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--foreground); }

.doc-steps { margin: 3rem 0 0; gap: 2.6rem; }
.doc-steps li { grid-template-columns: 2.3rem minmax(0, 1fr); }
.doc-steps li::before { border-color: var(--foreground); grid-row: span 9; }
.doc-steps h2 { line-height: 2.3rem; margin-bottom: 0.35rem; }

.doc-list { display: grid; grid-template-columns: 11rem minmax(0, 1fr); margin-top: 0.4rem; }
.doc-list dt, .doc-list dd { padding: 0.95rem 0; border-top: 1px solid var(--border); }
.doc-list dt { font-weight: 600; padding-right: 1.5rem; }

.releases { display: flex; flex-direction: column; }
.release { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 2.6rem 0; border-bottom: 1px solid var(--border); }
.release header { position: sticky; top: 5.5rem; align-self: start; }
.release h2 { font: 700 1.5rem var(--sans); letter-spacing: -0.03em; }
.release h2 a { text-decoration: none; }
.release time { display: block; color: var(--muted-foreground); font-size: 0.88rem; margin-top: 0.2rem; }
.release ul { display: flex; flex-direction: column; gap: 0.45rem; }
.release li { position: relative; padding-left: 1.3rem; }
.release li::before { content: ''; position: absolute; left: 0.2rem; top: 0.72em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--ring); }

.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--foreground); }
.foot-links a[aria-current='page'] { color: var(--foreground); }

@media (max-width: 720px) {
  .doc { padding-top: 3.5rem; }
  .doc-list { grid-template-columns: 1fr; }
  .doc-list dt { padding-bottom: 0.2rem; }
  .doc-list dd { border-top: 0; padding-top: 0; }
  .release { grid-template-columns: 1fr; gap: 0.9rem; }
  .release header { position: static; }
}

/* the narrowest phones: keep Download on screen */
@media (max-width: 400px) {
  .nav-in { gap: 1.2rem; padding-inline: 1rem; }
  .theme-btn { margin-right: -0.6rem; }
}

/* the nav's Download is as tall as the theme button beside it */
.nav .btn-sm { height: 2.1rem; padding-block: 0; line-height: 1; }