/* Dark by default (the user's choice, 2026-11-06; <html data-theme="dark"> in build.mjs); light when the visitor switches to it.
   Layout: the Run My AI app's own look on the web - graphite greys in light, deep blacks with a fine grain and lit-from-
   above rims in dark, no colour accent (ink and ivory only, as the logo), Space Grotesk like the wordmark, and the
   logo's leaning slashes as the one decoration. Sections are left-aligned bands separated by hairlines. */
:root {
  --page: #e5e6e8;          /* Run My AI Light: page */
  --bar: #edeef0;           /* sidebar grey: strip, header, footer */
  --fill: #f1f2f4;          /* boxes and inputs */
  --border: #cacdd1;
  --selected: #d9dbde;
  --text: #222428;
  --text-2: #52565c;
  --muted: #83878d;
  --rim: #ffffff;           /* the lit-from-above line on a box's top edge */
  --rim-mix: 75%;
  --name: #141414;          /* the logo's ink */
  --btn-bg: #222428;
  --btn-fg: #f1f2f4;
  --slash: #000000;         /* light: the slashes are shades darker */
  --grain-img: none;
  --focus: #222428;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.84rem;
  --step-0: 1rem;
  --step-1: 1.18rem;
  --step-3: clamp(1.7rem, 1.2rem + 2.1vw, 2.35rem);
  --step-4: clamp(2.2rem, 1.25rem + 4.1vw, 3.9rem);
  --radius: 10px;
}
:root[data-theme="dark"] {
  --page: #060606;
  --bar: #030303;
  --fill: #0e0e0e;
  --border: #1e1e1e;
  --selected: #161616;
  --text: #e6e6e6;
  --text-2: #a0a0a0;
  --muted: #6e6e6e;
  --rim: #ffffff;
  --rim-mix: 16%;
  --name: #f4efe6;
  --btn-bg: #e6e6e6;
  --btn-fg: #060606;
  --slash: #ffffff;
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --focus: #e6e6e6;
  color-scheme: dark;
}

/* The logo files: ink on light, ivory on dark */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--page);
  background-image: var(--grain-img);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img, svg, canvas { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; margin: 0; color: var(--text); }
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.005em; }
p { margin: 0; }
strong { font-weight: 600; }
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede { font-size: var(--step-1); color: var(--text-2); max-width: 58ch; }
.prose { max-width: 66ch; display: grid; gap: 14px; align-content: start; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--fill); padding: 6px 10px; z-index: 20; }
.page-head { display: grid; gap: 16px; position: relative; }
.sub-h { margin: 30px 0 14px; }
ul.plain { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

/* A box drawn the app's way: its fill, a hairline edge, and a lit-from-above rim on the top edge */
.box, .signup, .model, .col, .video, .flow, .table-scroll, .count-cells div {
  background: var(--fill);
  border: 1px solid var(--border);
  border-top-color: color-mix(in srgb, var(--rim) var(--rim-mix), var(--border));
  border-radius: var(--radius);
}

/* Strip and header */
.strip { background: var(--bar); border-bottom: 1px solid var(--border); }
.strip .wrap {
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; justify-content: space-between;
  padding-block: 6px; font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.strip b { color: var(--text); font-weight: 600; }
.site-head { background: var(--bar); border-bottom: 1px solid var(--border); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-block: 12px; }

/* The lockup, as the app draws it (lib/ui/sidebar.dart _Logo): the mark 15 % bigger than the name, 57 px apart at 256 */
.brand { display: inline-block; text-decoration: none; flex: none; }
.lockup { position: relative; display: block; width: 155.8px; height: 26.3px; }
.lockup .mark { position: absolute; left: 0; top: 0; width: 32.1px; height: 21.3px; }
.lockup .name { position: absolute; left: 39.2px; top: 2.7px; width: 116.6px; height: 23.6px; }
.lockup img { width: 100%; height: 100%; }   /* no display here: the light / dark rules above decide which file shows */
.lockup .logo-light, .lockup .logo-dark { position: absolute; inset: 0; }

.nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; white-space: nowrap; }
.nav a {
  display: block; padding: 6px 11px; border-radius: 8px; color: var(--text-2); text-decoration: none;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 500;
}
.nav a:hover { background: var(--selected); color: var(--text); }
.nav a[aria-current="page"] { background: var(--selected); color: var(--text); }
.head-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
/* The theme switch, a square icon button: sun in dark = go light, moon in light = go dark */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex: none;
  background: transparent; color: var(--text-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: var(--selected); }
.icon-btn .i-moon { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-moon { display: block; }
.nav .i-nav { display: none; }
/* Narrow screens: the logo and the theme icon on top; the page links become a tab bar fixed at the bottom of the screen
   (icon over name, above the phone's home-bar inset), and the page leaves room for it at its end */
@media (max-width: 760px) {
  .site-head .wrap { padding-block: 10px; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; overflow: visible;
    background: var(--bar); border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .nav li { flex: 1 1 0; min-width: 0; }
  .nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 0.72rem; text-align: center; }
  .nav .i-nav { display: block; width: 20px; height: 20px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* Buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  padding: 11px 18px; border-radius: 9px; border: 1px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; cursor: pointer;
}
.btn:hover { opacity: 0.88; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--selected); opacity: 1; }
.btn.small { padding: 7px 13px; font-size: 0.86rem; }
input[type="email"], input[type="text"], select, textarea {
  font: inherit; color: var(--text); background: var(--fill);
  border: 1px solid var(--border); border-top-color: color-mix(in srgb, var(--rim) var(--rim-mix), var(--border));
  border-radius: 9px; padding: 10px 12px; width: 100%; min-width: 0;
}
textarea { min-height: 90px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: 0.85rem; color: var(--text-2); }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.inline-form input[type="email"] { flex: 1 1 180px; }
.inline-form input[type="email"], .inline-form .btn { height: 42px; padding-block: 0; }   /* box and button the same height */
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; }
input[type="checkbox"] { accent-color: var(--text); }
.form-lead { flex-basis: 100%; margin: 0 0 2px; font-size: 0.95rem; font-weight: 500; color: var(--text); }   /* the line above the email box */
.form-out { flex-basis: 100%; }
.form-out:empty { display: none; }
.form-note { font-size: 0.85rem; color: var(--text-2); border-left: 2px solid var(--border); padding-left: 10px; }
.form-done { font-weight: 600; color: var(--text); }

/* Sections */
section { padding-block: clamp(36px, 6vw, 72px); }
section + section { border-top: 1px solid var(--border); }
.sec-head { display: grid; gap: 8px; margin-bottom: 26px; max-width: 70ch; align-content: start; }

/* Hero, with the logo's slashes low on the left */
.hero { position: relative; overflow: hidden; padding-block: clamp(34px, 6vw, 72px) clamp(32px, 5vw, 60px); }
.hero > .wrap { position: relative; z-index: 1; }
.slashes { position: absolute; left: 0; bottom: 0; width: min(440px, 70%); height: 100%; pointer-events: none; z-index: 0; }
.slashes i {
  position: absolute; bottom: 0; width: 56px; transform-origin: bottom left; transform: skewX(-16.7deg);
  background: linear-gradient(to top, var(--sl), transparent);
}
.slashes i:nth-child(1) { left: 6%; height: 30%; --sl: color-mix(in srgb, var(--slash) 4%, transparent); }
.slashes i:nth-child(2) { left: calc(6% + 72px); height: 44%; --sl: color-mix(in srgb, var(--slash) 6%, transparent); }
.slashes i:nth-child(3) { left: calc(6% + 144px); height: 58%; --sl: color-mix(in srgb, var(--slash) 8%, transparent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-copy { display: grid; gap: 20px; min-width: 0; }
.hero-note { max-width: 58ch; font-size: 0.95rem; color: var(--text-2); border-left: 2px solid var(--border); padding: 2px 0 2px 14px; }
.hero h1 em { font-style: normal; color: var(--text-2); }
.hero-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.95rem; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.countdown .t { font-family: var(--font-display); font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.count-cells { display: flex; gap: 8px; }
.count-cells div { display: grid; justify-items: center; min-width: 58px; padding: 8px 10px; }
.count-cells b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.count-cells span { font-family: var(--font-display); font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.local-time { font-size: 0.88rem; color: var(--muted); }

/* The memory path diagram */
.flow { margin: 0; padding: 12px; min-width: 0; }
.flow canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; }
.flow-caption { margin-top: 8px; font-size: 0.8rem; color: var(--muted); }

/* Tables */
.table-scroll { overflow-x: auto; }
table.spec { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.spec th, .spec td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec thead th {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); background: var(--selected);
}
.spec tbody tr:last-child td { border-bottom: 0; }
.spec .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec .ours { color: var(--text); font-weight: 600; }
.spec .factor { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.spec td small { display: block; color: var(--muted); font-size: 0.8rem; }
.foot { margin-top: 12px; font-size: 0.86rem; color: var(--muted); max-width: 80ch; }

/* What you get */
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.promise { padding: 18px 20px 18px 0; display: grid; gap: 6px; border-bottom: 1px solid var(--border); min-width: 0; align-content: start; }
.promise .label { color: var(--text); }

/* Video spot: the faint logo, as the app shows on an empty chat */
.video { aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; text-align: center; padding: 18px; gap: 12px; align-content: center; }
.video .faint { width: 92px; opacity: 0.16; }
.video p { max-width: 44ch; color: var(--muted); font-size: 0.9rem; }
.video-embed { display: block; padding: 0; overflow: hidden; aspect-ratio: 16 / 10; }
.video-embed video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.video-embed { position: relative; }
.zoom-open { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 15px; cursor: pointer; }
.zoom-open:hover { background: rgba(0, 0, 0, 0.8); }
.zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2vmin; background: rgba(0, 0, 0, 0.88); cursor: zoom-out; }
.zoom-video { width: min(96vw, calc(96vh * 1.6)); aspect-ratio: 16 / 10; border-radius: var(--radius); background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.zoom-close { position: fixed; top: 14px; right: 14px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 18px; cursor: pointer; }
body.is-zoomed { overflow: hidden; }   /* not .zoom-open: that is the button's class */

/* Status pills: no colour, shown by fill and line */
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; color: var(--text-2);
}
.s-done { background: var(--text); border-color: var(--text); color: var(--page); }
.s-building { border-color: var(--text); color: var(--text); }
.s-building::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.s-next { border-style: solid; color: var(--text-2); }
.s-after { border-style: dashed; color: var(--muted); }

/* Progress board */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.col { padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.col h3 { font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.col li { font-size: 0.93rem; padding-left: 16px; position: relative; color: var(--text); }
.col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; border: 1px solid var(--text); }
.col.c-done li::before { background: var(--text); }
.col.c-building li::before { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); }
.col.c-next li { color: var(--text-2); } .col.c-next li::before { border-color: var(--text-2); }
.col.c-after li { color: var(--muted); } .col.c-after li::before { border: 1px dashed var(--muted); }
.board.snap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board.snap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .board { grid-template-columns: minmax(0, 1fr); } }

.launch-bar { display: grid; gap: 8px; max-width: 640px; }
.launch-bar .track { height: 8px; background: var(--selected); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.launch-bar .fill { height: 100%; background: var(--text); width: 0; }
.launch-bar .row { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-size: 0.78rem; color: var(--muted); }

/* Update log */
.updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 78ch; }
.updates li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.updates li:first-child { padding-top: 0; }
.updates time { font-family: var(--font-display); font-size: 0.85rem; color: var(--muted); padding-top: 2px; }
.updates h3 { font-size: 1.05rem; margin-bottom: 4px; }
.updates p { color: var(--text-2); }
@media (max-width: 560px) { .updates li { grid-template-columns: minmax(0, 1fr); } }

/* Models and cards */
.models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.model { padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.model p { color: var(--text-2); }
.model .meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.model-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Vote */
.vote { display: grid; gap: 10px; max-width: 560px; }
.vote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.vote-row button {
  font: inherit; font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--fill); color: var(--text);
}
.vote-row button[aria-pressed="true"] { background: var(--text); color: var(--page); border-color: var(--text); }

/* Two columns */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Sign-up box */
.signup { padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.signup details { border-top: 1px solid var(--border); padding-top: 12px; }
.signup summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }

/* FAQ */
.faq { display: grid; max-width: 78ch; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); padding: 15px 0; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; color: var(--text-2); max-width: 70ch; }
.faq details ul { margin: 10px 0 0; padding-left: 1.2em; color: var(--text-2); max-width: 70ch; }
.faq details li { margin: 6px 0; }
.faq details b { color: var(--text); font-weight: 600; }


/* Steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; max-width: 74ch; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.steps li::before { content: counter(s); font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 1.1rem; }
.steps h3 { font-size: 1.05rem; margin-bottom: 4px; }
.steps p { color: var(--text-2); }

/* Copy field */
.copy { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy code { font-family: var(--font-mono); background: var(--fill); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; user-select: all; }

/* Footer */
.site-foot { border-top: 1px solid var(--border); background: var(--bar); }
.site-foot .wrap { padding-block: 32px; display: grid; gap: 22px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.foot-grid ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.93rem; }
.foot-grid a { color: var(--text-2); text-decoration: none; }
.foot-grid a:hover { color: var(--text); }
.preview-note { font-size: 0.8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* The pitch: one question, four short answers */
.pitch { display: grid; gap: 26px; }
.pitch h2 { max-width: 28ch; font-size: var(--step-3); }
.pitch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.pitch-list li { display: grid; gap: 4px; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--border); }
.pitch-list b { font-family: var(--font-display); font-weight: 600; }
.pitch-list span { color: var(--text-2); }

/* "Open-sourcing on launch day": its own line under the one-liner, the same size, in ink and bold - visible by place and weight, no fill */
.lede-pair { display: grid; gap: 4px; }
.os-line { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--text); }
.local-time { color: var(--text-2); font-weight: 500; }
.pitch h2 { max-width: 34ch; }

/* How it works: table of contents and code block */
.toc { max-width: 74ch; }
.toc ol { columns: 2 240px; column-gap: 32px; margin: 8px 0 0; padding-left: 1.3em; }
.toc li { margin: 3px 0; break-inside: avoid; }
.code-block { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; background: var(--fill); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; }

/* Benchmarks: per-row source and conditions */
.row-notes { list-style: none; margin: 12px 0 0; padding: 0; max-width: 80ch; font-size: 0.86rem; color: var(--text-2); }
.row-notes li { margin: 6px 0; }
.row-notes b { color: var(--text); font-weight: 600; }

/* Home: community links */
.socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* the community buttons: each platform's own logo and colour (logos from Simple Icons, CC0) */
.socials.stacked { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
.btn.social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn.social.discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.btn.social.youtube { background: #FF0000; border-color: #FF0000; color: #fff; }
.btn.social.github { background: #181717; border-color: #181717; color: #fff; }
:root[data-theme="dark"] .btn.social.github { border-color: #3a3a3a; }
.btn.social.linkedin { background: #0A66C2; border-color: #0A66C2; color: #fff; }

/* Author page */
.author-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text); margin: 0 0 10px; }
.author-photo { display: block; width: 184px; height: 184px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--border); margin: 0 auto 18px; }
.author-head { text-align: center; }
.author-head h1 { margin-inline: auto; font-size: var(--step-3); }