/* davidnastase.com, version 4: the clean site, with a character for every agent.
   Layout idea: a white page with lots of air, left-aligned sections split by hairlines.
   One accent, Highlighter Yellow, with two jobs only: a marker stroke behind words,
   and every button that leads to DaveOS. Everything else is ink and grey.
   Colours and type come from David's brand system (ink, paper, signal, Archivo, IBM Plex Mono). */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #FFFFFF;
  --soft: #F6F6F3;
  --card: #FFFFFF;
  --text: #111317;
  --muted: #5B5F68;
  --faint: #6E727A;
  --line: #E6E6E0;
  --line-strong: #CFCFC8;
  --signal: #FFE14D;
  --on-signal: #111317;
  --mark-soft: #FFF6C4;
  --btn-bg: #111317;
  --btn-fg: #FFFFFF;
  --focus: #2643D9;
  --shadow: 0 1px 2px rgba(17, 19, 23, .05), 0 18px 44px rgba(17, 19, 23, .09);
  --header-bg: rgba(255, 255, 255, .88);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --gutter: clamp(20px, 5vw, 40px);
  --wide: 70rem;
  --narrow: 46rem;
  --measure: 40rem;
  --section: clamp(64px, 9vw, 112px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111317;
    --soft: #181B20;
    --card: #1C1F25;
    --text: #F6F6F3;
    --muted: #A7ACB6;
    --faint: #8E939D;
    --line: #2A2E36;
    --line-strong: #3F444E;
    --mark-soft: #3A3312;
    --btn-bg: #F6F6F3;
    --btn-fg: #111317;
    --focus: #FFE14D;
    --shadow: 0 0 0 1px #2A2E36;
    --header-bg: rgba(17, 19, 23, .88);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111317;
  --soft: #181B20;
  --card: #1C1F25;
  --text: #F6F6F3;
  --muted: #A7ACB6;
  --faint: #8E939D;
  --line: #2A2E36;
  --line-strong: #3F444E;
  --mark-soft: #3A3312;
  --btn-bg: #F6F6F3;
  --btn-fg: #111317;
  --focus: #FFE14D;
  --shadow: 0 0 0 1px #2A2E36;
  --header-bg: rgba(17, 19, 23, .88);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(28px, 4.6vw, 42px); letter-spacing: -.03em; line-height: 1.06; }
h3 { font-size: 21px; letter-spacing: -.015em; line-height: 1.2; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--signal); color: var(--on-signal); }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: var(--narrow); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--signal); color: var(--on-signal); padding: 10px 14px; z-index: 30; font-weight: 600; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

/* ---------- small type ---------- */
.label { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0; }
.lede { font-size: clamp(18px, 1rem + .5vw, 21px); line-height: 1.5; color: var(--muted); max-width: 34rem; }
.fine { font-size: 14px; line-height: 1.5; color: var(--faint); margin: 0; }
.muted { color: var(--muted); }
.num-tab { font-variant-numeric: tabular-nums; }

/* The marker: David's highlighter behind the words that matter */
.hl {
  background-image: linear-gradient(transparent 58%, var(--signal) 58%, var(--signal) 92%, transparent 92%);
  padding: 0 .08em;
  margin: 0 -.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { background-image: none; color: var(--signal); } }
:root[data-theme="dark"] .hl { background-image: none; color: var(--signal); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 15px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 19, 23, .16); }
.btn:active { transform: none; box-shadow: none; }
.btn-signal { background: var(--signal); color: var(--on-signal); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--soft); box-shadow: none; }
.btn-lg { min-height: 52px; padding: 14px 22px; font-size: 16px; }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.text-link { font-weight: 600; text-decoration: underline; }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.logo { display: block; line-height: 0; margin-right: auto; }
.logo img { height: 24px; width: auto; }
.logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .logo-light { display: none; } :root:not([data-theme="light"]) .logo .logo-dark { display: block; } }
:root[data-theme="dark"] .logo .logo-light { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }
.nav { display: flex; gap: 26px; }
.nav a { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
@media (max-width: 640px) {
  .site-head .wrap { gap: 14px; min-height: 58px; }
  .logo img { height: 20px; }
  .nav a.opt { display: none; }
}

/* ---------- home: hero ---------- */
.hero { padding-block: clamp(44px, 7vw, 96px) var(--section); }
.hero-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.hero h1 { font-size: clamp(42px, 11.2vw, 88px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 18px 0 24px; }
@media (min-width: 940px) { .hero h1 { font-size: clamp(62px, 6.9vw, 88px); } }
.hero .lede { margin-bottom: 30px; }
.hero .fine { margin-top: 18px; }

/* A picture of a run: what you type, what comes back */
.demo { margin: 0; width: 100%; max-width: 27rem; justify-self: end; background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; }
@media (max-width: 939px) { .demo { justify-self: start; } }
.demo-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.demo-agent { display: inline-flex; align-items: center; gap: 8px; }
.demo-char { width: 30px; flex: none; }
.demo-you { margin: 0 0 16px auto; width: fit-content; max-width: 92%; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-weight: 500; font-size: 15px; line-height: 1.35; }
.demo-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.demo-steps li { display: flex; gap: 14px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.demo-steps li::before { content: ""; flex: none; width: 6px; height: 11px; margin: -3px 4px 0 4px; border: solid var(--text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.demo-steps li.wait { font-weight: 600; }
.demo-steps li.wait::before { width: 12px; height: 12px; margin: 0 1px; border: 1px solid var(--on-signal); border-radius: 50%; background: var(--signal); transform: none; }
.demo figcaption { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--faint); }

/* ---------- the AIs DaveOS connects to: one continuous line of logos that keeps moving ----------
   The logos have no background. On dark pages the dark ones are shown in their light form. */
.ai-band { --k: .68; padding-block: clamp(30px, 4.6vw, 56px); border-top: 1px solid var(--line); overflow: hidden; }
@media (min-width: 720px) { .ai-band { --k: 1; } }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 3.2vw, 34px); }
.ai-lead { margin: 0; font-size: clamp(18px, 1rem + .6vw, 22px); font-weight: 600; letter-spacing: -.015em; }
.ai-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ai-move { display: flex; width: max-content; animation: ai-slide 80s linear infinite; }
.ai-marquee:hover .ai-move, .ai-band.is-paused .ai-move { animation-play-state: paused; }
.ai-track { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.ai-track li { display: flex; align-items: center; padding-inline: calc(42px * var(--k)); }
.ai-track img { height: calc(var(--h) * var(--k)); width: auto; max-width: none; }
.ai-track b { font-size: calc(54px * var(--k)); font-weight: 700; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.ai-band .fine { margin-top: clamp(18px, 2.6vw, 28px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-inv { filter: invert(1); }
  :root:not([data-theme="light"]) .ai-inv-hue { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .ai-inv { filter: invert(1); }
:root[data-theme="dark"] .ai-inv-hue { filter: invert(1) hue-rotate(180deg); }
/* the pause button: small and quiet, for people who need the line to stop */
.ai-pause { display: none; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; place-items: center; }
.js .ai-pause { display: grid; }
.ai-pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.ai-pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.ai-pause:hover { color: var(--text); border-color: var(--text); }
@keyframes ai-slide { to { transform: translateX(-50%); } }

/* ---------- the agents' characters ---------- */
.char { display: block; width: 100%; height: auto; overflow: visible; }
.char .ln { fill: none; stroke: var(--text); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.char .bd { fill: var(--card); stroke: var(--text); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.char .sf { fill: var(--soft); stroke: var(--text); stroke-width: 4; stroke-linejoin: round; }
.char .sg { fill: var(--signal); stroke: var(--text); stroke-width: 4; stroke-linejoin: round; }
.char .sgf { fill: var(--signal); }
.char .ik { fill: var(--text); }
.char .fc { fill: var(--card); }
.char .th { stroke-width: 4; }
.char .gr { stroke-width: 2.5; }
.char .st { stroke-width: 2.5; }
.char .lens { fill: var(--soft); }
.char .sh { fill: var(--text); opacity: .08; }
.char .tx { font: 700 13px/1 var(--mono); fill: var(--bg); }
.char .beam { fill: var(--signal); opacity: .5; }
.char .orb { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 1 10; stroke-linecap: round; }

/* the characters move a little: the radar eye sweeps, the satellite floats */
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-5px); } }
.ah-char .sweep, .row:hover .sweep, .crew a:hover .sweep, .stop-char:hover .sweep { animation: sweep 2.8s linear infinite; }
.ah-char .bob, .row:hover .bob, .crew a:hover .bob, .stop-char:hover .bob { animation: bob 3.2s ease-in-out infinite; }

/* ---------- sections ---------- */
.section { padding-block: var(--section); border-top: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.eyebrow i { flex: 1; height: 1px; background: var(--line); }
.section-head { display: grid; gap: 14px 48px; margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 860px) { .section-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; } }
.section-head .aside { color: var(--muted); margin: 0; max-width: 26rem; }

/* agent rows: the character, the words, the proof. The whole row opens the agent; the video line opens the video. */
.rows { border-top: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 18px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center; }
.row > .row-char { grid-row: 1 / span 3; align-self: start; }
.row > :not(.row-char) { grid-column: 2; }
@media (min-width: 940px) {
  .row { grid-template-columns: 112px minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px 36px; padding: 20px 0; }
  .row > .row-char { grid-row: auto; align-self: center; }
  .row > :not(.row-char) { grid-column: auto; }
}
.row .label { margin-bottom: 8px; }
.row .label a { position: relative; z-index: 1; color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.row .label a:hover { color: var(--text); text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.row h3 { font-size: 24px; letter-spacing: -.02em; }
.row h3 a { text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row p { margin: 6px 0 0; color: var(--muted); max-width: 32rem; }
.row .proof { margin: 0; font-size: 15px; color: var(--text); }
.row .proof b { font-weight: 650; }
.row .go { font-weight: 600; font-size: 15px; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.row:hover h3 a { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.row:hover .go { text-decoration-color: var(--signal); text-decoration-thickness: 3px; }

/* DaveOS band */
.band { background: var(--soft); }
.band + .section { border-top: 1px solid var(--line); }
.band-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) { .band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.band h2 { margin: 14px 0 16px; }
.band .lede { margin-bottom: 26px; }
.band .fine { margin-top: 16px; }

/* a prompt next to DaveOS */
.compare-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.compare thead th { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.compare thead th.is { color: var(--text); }
.compare td { color: var(--muted); }
.compare td.is { color: var(--text); font-weight: 600; }
.compare .is { background: var(--mark-soft); }
.compare tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 420px) { .compare th, .compare td { padding: 13px 14px; font-size: 14.5px; } }

/* about teaser */
.who { display: grid; gap: 22px 36px; align-items: start; }
@media (min-width: 760px) { .who { grid-template-columns: auto minmax(0, 1fr); } }
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--soft); }
.avatar-lg { width: 96px; height: 96px; }
.who h2 { margin-bottom: 16px; }
.who p { max-width: var(--measure); }

.follow { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.follow p { margin: 0; font-size: clamp(20px, 1rem + .9vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; max-width: 34rem; }

/* ---------- page heads (agents, DaveOS, about, prompts) ---------- */
.page-head { padding-block: clamp(32px, 5.5vw, 64px) clamp(44px, 7vw, 80px); }
.crumb { margin: 0 0 30px; font-size: 15px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--text); }
.page-head h1 { font-size: clamp(44px, 8.4vw, 80px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 14px 0 22px; }
.page-head .lede { color: var(--text); max-width: 38rem; margin-bottom: 0; }
.page-head .lede + .lede { color: var(--muted); margin-top: 12px; }
.page-head .sub { font-size: clamp(22px, 1rem + 1.5vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; max-width: 36rem; margin: 0; }
.page-head .sub + .lede { color: var(--muted); margin-top: 14px; }
.page-head .cta { margin-top: 30px; }
.page-head .fine { margin-top: 16px; }

.agent-head { display: grid; grid-template-columns: minmax(0, 1fr) 104px; column-gap: 16px; grid-template-areas: "title char" "body body" "facts facts"; align-items: end; }
.ah-title { grid-area: title; }
.ah-char { grid-area: char; padding-bottom: 14px; }
.ah-body { grid-area: body; }
.agent-head .facts { grid-area: facts; }
.agent-head .label a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.agent-head .label a:hover { color: var(--text); text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.split-side { margin-top: 30px; }
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; max-width: 31rem; }
.crew a { display: block; text-decoration: none; text-align: center; }
.crew span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
.crew a:hover span { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 3px; }
@media (min-width: 940px) {
  .agent-head { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); column-gap: 72px; grid-template-areas: "title char" "body char" "facts char"; align-items: start; }
  .ah-char { align-self: center; padding-bottom: 0; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); gap: 0 56px; align-items: center; }
  .split-side { margin-top: 0; }
}

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 34px 0 0; border-top: 1px solid var(--line); max-width: 48rem; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 600; }

/* ---------- page parts: a title on the left, the content on the right ---------- */
.part { padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
.part > .wrap { display: grid; gap: 20px 56px; }
@media (min-width: 940px) { .part > .wrap:not(.narrow) { grid-template-columns: 15rem minmax(0, 1fr); } }
.part-head { align-self: start; }
@media (min-width: 940px) { .part > .wrap:not(.narrow) > .part-head { position: sticky; top: 96px; } }
.part-head h2 { font-size: clamp(24px, 1.1rem + 1vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
.part-head .label { display: block; margin-top: 10px; }
.part-body { min-width: 0; max-width: 44rem; }
.part .part-body > * { margin-block: 0; }
.part .part-body > * + * { margin-top: 22px; }
.part .part-body > .sources { margin-top: 12px; }
.part-body .lede { color: var(--text); max-width: none; }
.part-body > ul:not([class]) { padding-left: 1.15em; }
.part-body > ul:not([class]) > li + li { margin-top: 8px; }
.part-body > ul:not([class]) > li::marker { color: var(--faint); }

/* one number that matters */
.stat { margin: 0; background: var(--soft); border-radius: var(--radius); padding: 24px 26px; }
.stat .label { display: block; margin-bottom: 12px; }
.stat .num { font-size: clamp(46px, 9vw, 76px); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.stat p { margin: 0; max-width: 32rem; }
.stat .sources { margin-top: 14px; }
.pair { display: grid; gap: 16px; }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; } }

.sources { margin: 0; font-size: 13px; line-height: 1.6; color: var(--faint); }
.sources a { color: var(--muted); }

/* how an agent works: what goes in, the steps, what comes out */
.flow { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px; }
.flow-io { margin: 0; padding: 16px 0; font-weight: 600; }
.flow-io .label { display: block; margin-bottom: 4px; }
.flow .fine { padding: 0 0 16px; }
.flow + .flow { margin-top: 18px; }
.flow-name { margin: 0; padding: 18px 0 2px; font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 6px; padding: 13px 0; }
.steps li + li { border-top: 1px solid var(--line); }
.steps li::before { content: counter(step); font: 500 13px/1.95 var(--mono); color: var(--faint); }
.steps strong { display: block; font-weight: 650; }
.steps.open { border-bottom: 0; }

/* run tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.run-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.run-table caption { text-align: left; padding: 16px 18px 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.run-table th { text-align: left; padding: 10px 18px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); }
.run-table td { padding: 13px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.run-table td small { display: block; color: var(--muted); font-size: 13px; }
.run-table .n { text-align: right; white-space: nowrap; }
.run-table tr.hit td { background: var(--mark-soft); font-weight: 650; }
.run-table tr.over td { color: var(--muted); }
.table-note { margin: 0; padding: 12px 18px 16px; font-size: 13px; line-height: 1.5; color: var(--faint); border-top: 1px solid var(--line); }
@media (max-width: 520px) {
  .run-table { font-size: 14px; }
  .run-table th, .run-table td { padding: 11px 9px; }
  .run-table th:first-child, .run-table td:first-child { padding-left: 14px; }
  .run-table th:last-child, .run-table td:last-child { padding-right: 14px; }
  .run-table caption { padding: 14px 14px 4px; }
  .run-table td small { font-size: 12px; }
  .table-note { padding: 10px 14px 14px; }
}

.note { background: var(--soft); border-radius: var(--radius-sm); padding: 18px 20px; }
.note .label { display: block; margin-bottom: 8px; }
.note p { margin: 0; }
.note p + p { margin-top: 10px; }
.note .quote { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }

.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.log li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.log .label { display: block; margin-bottom: 2px; }

/* ---------- the offer: DaveOS ---------- */
.offer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 34px); }
.offer h2, .offer h3 { font-size: clamp(26px, 4.6vw, 36px); letter-spacing: -.03em; line-height: 1.08; margin: 12px 0 14px; }
.offer p { margin: 0; max-width: 36rem; }
.offer p + p { margin-top: 12px; }
.offer .cta { margin-top: 22px; }
.offer .fine { margin-top: 16px; }
.offer .hl { white-space: nowrap; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { display: flex; gap: 14px; align-items: baseline; font-weight: 500; }
.ticks li::before { content: ""; flex: none; width: 6px; height: 11px; margin: 0 4px; border: solid var(--text); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* agent pages end on a choice: the prompt, or the agent */
.choice { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 820px) { .choice { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.plain { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.plain h3 { font-size: 21px; }
.plain p { margin: 0; color: var(--muted); }
.plain .btn { margin-top: auto; }

/* the stop: what every prompt click sees first */
.stop-head { padding-block: clamp(24px, 5vw, 56px) clamp(36px, 6vw, 56px); }
.stop-head h1 { font-size: clamp(30px, 6vw, 44px); letter-spacing: -.03em; margin: 10px 0 clamp(16px, 3vw, 26px); }
.stop-head .offer { position: relative; }
.stop-char { position: absolute; top: 10px; right: 12px; width: 60px; }
@media (min-width: 720px) { .stop-char { top: 18px; right: 22px; width: 96px; } }
@media (max-width: 520px) {
  .stop-head .offer { padding: 20px; }
  .stop-head .ticks { margin-top: 14px; gap: 6px; }
  .stop-head .offer .cta { margin-top: 18px; }
}

/* prompt sheets */
.sheet { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.sheet + .sheet { margin-top: 22px; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); background: var(--soft); }
.sheet-head .label { color: var(--text); }
.copy { appearance: none; border: 0; border-radius: 10px; background: var(--btn-bg); color: var(--btn-fg); font: 600 14px/1 var(--font); padding: 0 16px; min-height: 38px; cursor: pointer; }
.copy:hover { box-shadow: 0 4px 12px rgba(17, 19, 23, .18); }
.copy[data-done] { background: var(--signal); color: var(--on-signal); }
.prompt { margin: 0; padding: 18px; white-space: pre-wrap; word-wrap: break-word; font: 400 14.5px/1.65 var(--mono); tab-size: 2; }
.prompt b { font-weight: 500; background: var(--signal); color: var(--on-signal); padding: 0 .2em; border-radius: 3px; }
.prompt strong { font-weight: 600; }

/* ---------- DaveOS page ---------- */
.join { background: var(--soft); border-radius: var(--radius); padding: clamp(24px, 4.5vw, 40px); display: grid; gap: 28px 48px; }
@media (min-width: 860px) { .join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 10px 0 12px; }
.price .num { font-size: clamp(64px, 12vw, 96px); font-weight: 700; letter-spacing: -.05em; line-height: .95; }
.price .per { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.join p { margin: 0; max-width: 30rem; }
.join p + p { margin-top: 10px; }
.terms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.terms li { padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.terms li span { color: var(--muted); font-weight: 400; }

/* what's inside: each agent with its character */
.inside { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.inside li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.inside h3 { font-size: 20px; }
.inside h3 a { text-decoration: none; }
.inside h3 a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.inside p { margin: 3px 0 0; color: var(--muted); }
.inside p a { white-space: nowrap; }

/* paying: hidden until the checkout link is set in site.js */
.pay[hidden], .signup[hidden] { display: none; }
.pay .btn { width: 100%; }

.signup label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.signup .field { display: flex; flex-wrap: wrap; gap: 10px; }
.signup input { flex: 1 1 14rem; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: 400 16px/1.2 var(--font); }
.signup input::placeholder { color: var(--faint); }
.signup input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.form-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; min-height: 1.5em; color: var(--muted); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font: 400 26px/1 var(--font); color: var(--faint); }
.faq details[open] summary::after { content: "–"; }
.faq details > p { margin: 0 0 20px; max-width: var(--measure); color: var(--muted); }

/* ---------- about ---------- */
.page-head .avatar-lg { margin-bottom: 26px; }
.page-head .avatar-lg + div > h1 { margin-top: 0; }

/* About page head: the name and the text on the left, David's photo on the side. */
.about-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 30vw, 132px); column-gap: 16px; grid-template-areas: "title photo" "body body"; align-items: center; }
.abh-title { grid-area: title; }
.about-head h1 { margin: 0; font-size: clamp(34px, 11vw, 44px); }
.abh-photo { grid-area: photo; margin: 0; }
.abh-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--soft); }
.abh-body { grid-area: body; margin-top: 24px; }
@media (min-width: 940px) {
  .about-head { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: 72px; grid-template-areas: "title photo" "body photo"; grid-template-rows: auto 1fr; align-items: start; }
  .abh-title { align-self: end; }
  .about-head h1 { font-size: clamp(44px, 8.4vw, 80px); margin-bottom: 22px; }
  .abh-photo { align-self: center; }
  .abh-photo img { border-radius: 22px; }
  .abh-body { margin-top: 0; }
}
.list { margin: 0; border-top: 1px solid var(--line); }
.list > div { display: grid; gap: 4px 32px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .list > div { grid-template-columns: 13rem minmax(0, 1fr); } }
.list dt { font-weight: 650; letter-spacing: -.01em; }
.list dd { margin: 0; color: var(--muted); }
/* the CV lists on the About page: years on the left, the role in ink, the rest in grey */
.cv dd strong { font-weight: 650; color: var(--text); }
@media (min-width: 640px) { .cv > div { grid-template-columns: 9rem minmax(0, 1fr); } }
.cv dt { font: 500 12.5px/1.9 var(--mono); letter-spacing: .04em; color: var(--faint); }
.part .part-body > .cv + .cv { margin-top: 0; border-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li { border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: 15px; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 52px 30px; font-size: 15px; color: var(--muted); }
.foot-grid { display: grid; gap: 30px 48px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .6fr)); } }
.foot-grid .logo { margin-bottom: 14px; }
.foot-grid p { max-width: 22rem; margin: 0; }
.foot-grid h2 { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--text); text-decoration: none; font-weight: 500; }
.foot-grid a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.foot-note { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; font-size: 13px; color: var(--faint); }
.foot-note p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  /* The logo line keeps moving here too: David wants it spinning for everyone. It has a pause button. */
  .char .sweep, .char .bob { animation: none !important; }
}