/* The cvewatch.dev page: the landing's own tokens over ds.css, and the layout classes the design
   expressed as inline styles (the CSP allows no inline style). Dark is the default theme; the
   toggle sets data-theme="light" on <html>. */

:root {
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(20px, 5vw, 64px);
  color-scheme: dark;
  --color-bg: #141313; --color-surface: #1f1d1d; --color-text: #f3f2f2;
  --color-divider: color-mix(in srgb, #f3f2f2 30%, transparent);
  --color-neutral-100: #2d2b2b; --color-neutral-200: #444141; --color-neutral-300: #605d5d;
  --color-neutral-400: #7d7979; --color-neutral-500: #9b9797; --color-neutral-600: #bab6b6;
  --color-neutral-700: #d7d3d3; --color-neutral-800: #eae7e7; --color-neutral-900: #f8f4f4;
  --color-accent-100: #4d170e; --color-accent-200: #7c1405; --color-accent-300: #ae1800;
  --color-accent-800: #ffe0d9; --color-accent-900: #fff2ef;
  --kicker: #ff9783; --fix: #ff9783; --advisory: #9b9797; --muted: #bab6b6; --link: #ff9783;
  --shadow-sm: 0 0 0 1px color-mix(in srgb, #f3f2f2 10%, transparent);
  --shadow-md: 0 0 0 1px color-mix(in srgb, #f3f2f2 12%, transparent), 0 8px 24px rgba(0, 0, 0, .5);
}
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b;
  --color-accent-100: #fff2ef; --color-accent-200: #ffe0d9; --color-accent-300: #ffc4b8;
  --color-accent-800: #7c1405; --color-accent-900: #4d170e;
  --kicker: #ae1800; --fix: #ae1800; --advisory: #605d5d; --muted: #605d5d; --link: #ae1800;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
}

body { min-height: 100vh; text-wrap: pretty; }
a { color: var(--link); }
a:hover { color: var(--color-accent); }
code, pre, .mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* — page frame — */
.nav { padding-inline: var(--gutter); }
.nav-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { width: 10px; height: 10px; background: var(--color-accent); display: inline-block; }
.nav-links { display: flex; gap: 24px; }
.nav-links .dashed { border: 1px dashed var(--color-divider); padding: 0 6px; }
.theme-toggle { min-width: 0; padding: 6px 10px; font-size: 12px; }
@media (max-width: 640px) { .nav-links { display: none; } }

.section { border-bottom: 2px solid var(--color-divider); }
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  display: flex; flex-direction: column; gap: 28px;
}
.wrap-gap-40 { gap: 40px; }
.head { display: flex; flex-direction: column; gap: 8px; }
.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--kicker); }
.label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.h2-narrow { max-width: 24ch; }
.note { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 64ch; }
.note-sm { font-size: 13px; }
.grid-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 40px; align-items: start;
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack-12 { gap: 12px; }

/* — hero — */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; right: clamp(0px, 4vw, 64px); top: 24px; margin: 0;
  font-size: 12px; line-height: 1.7; color: var(--color-text); opacity: .07;
  pointer-events: none; user-select: none; text-align: left;
}
.hero-inner {
  position: relative; max-width: 1120px; margin: 0 auto;
  padding: clamp(48px, 8vw, 104px) var(--gutter) clamp(40px, 6vw, 72px);
}
.hero-copy { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 0 -.04em;
}
.lede { font-size: 17px; line-height: 1.6; margin: 0; max-width: 58ch; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.inline-form .input { flex: 1 1 220px; min-height: 44px; }
.btn-tall { min-height: 44px; justify-content: flex-start; flex: 0 0 auto; }
.confirm {
  margin: 0; font-size: 15px;
  border-left: 2px solid var(--color-accent); padding-left: 12px;
}
.terminal {
  display: block; font-size: 13px; line-height: 1.5; padding: 12px 14px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  overflow-x: auto; white-space: pre; min-height: calc(13px * 1.5 + 26px);
}
.prompt { color: var(--muted); user-select: none; }
.caption { font-size: 12px; color: var(--muted); }

/* — how it works — */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 2px solid var(--color-divider);
}
.steps li { padding: 20px clamp(0px, 2vw, 24px); display: flex; flex-direction: column; gap: 10px; }
.steps li:first-child { padding-left: 0; }
.steps li:last-child { padding-right: 0; }
.step-no { font-size: 13px; color: var(--muted); }
.steps h3 { font-size: 20px; line-height: 1.2; margin: 0; }
.steps p { margin: 0; font-size: 14.5px; color: var(--muted); }
.code-chip {
  font-size: 12px; color: var(--color-text); background: var(--color-surface);
  padding: 6px 10px; align-self: flex-start; overflow-x: auto; max-width: 100%; white-space: nowrap;
}
.code-inline { font-size: 12.5px; }

/* — alert mock-ups — */
.alert {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  font-size: 13px; line-height: 1.55;
}
.alert-exact {
  box-shadow: var(--shadow-md); padding: 14px 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
}
.alert-exact .k { color: var(--muted); }
.alert-exact .fix { color: var(--fix); }
.alert-head {
  grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline;
  font-family: var(--font-body); font-size: 13px; margin-bottom: 6px;
}
.badge {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--color-divider); padding: 0 4px;
}
.alert-fast {
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--advisory);
}
.alert-time { font-family: var(--font-body); font-size: 12px; color: var(--muted); }

/* — comparison — */
.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 560px; }
/* Row headers for screen readers, styled as the design's plain bold first column rather than
   as ds.css's uppercase column headers. */
.table th.cap {
  font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--color-text); width: 40%; border-bottom-width: 1px;
}
.table .feed { color: var(--muted); }
.table th.ours { color: var(--color-text); }

/* — chips — */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { font-family: var(--mono); font-size: 13px; padding: 5px 10px; border: 1px solid var(--color-divider); }
.chip-planned { border-style: dashed; color: var(--muted); }

/* — trust grid — */
.cells {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 2px solid var(--color-divider); border-left: 2px solid var(--color-divider);
}
.cell {
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
  border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
}
.cell h3 { font-size: 17px; margin: 0; }
.cell p { margin: 0; font-size: 14px; color: var(--muted); }
.cell code { font-size: 12.5px; color: var(--color-text); }

/* — pricing — */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan { padding: 20px; gap: 14px; border-top: 2px solid var(--color-divider); }
.plan-pro { border-top-color: var(--color-accent); }
.plan .card-kicker { color: var(--kicker); }
.price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.price small { font-size: 14px; font-weight: 400; color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* — waitlist — */
.waitlist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px clamp(32px, 5vw, 80px);
}
.waitlist-intro p { margin: 8px 0 0; font-size: 15px; color: var(--muted); max-width: 40ch; }
.repo-link {
  margin-top: 16px; align-self: flex-start; display: inline-flex; gap: 8px; align-items: center;
  font-size: 14px; text-decoration: none; border: 1px dashed var(--color-divider);
  padding: 8px 12px; color: var(--color-text);
}
.repo-link small { font-size: 11px; color: var(--muted); }
.form { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.form .input { min-height: 44px; }
.form .btn-tall { align-self: flex-start; }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* A legend labels the radio group the way ds.css's .field > label labels an input. */
.fieldset > legend {
  padding: 0; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.req { color: var(--kicker); }
.opt { color: var(--muted); }
.choice {
  font: inherit; font-size: 14px; min-height: 40px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
}
.choice[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: #141313; font-weight: 600;
}
.seg { flex-wrap: wrap; }
.seg-opt { min-height: 40px; }
.seg-opt:has(input:checked) { color: #141313; }
.input::placeholder { color: var(--muted); }
.done {
  display: flex; flex-direction: column; gap: 12px; align-self: start;
  border-left: 2px solid var(--color-accent); padding-left: 20px;
}
.done h3 { font-size: 22px; margin: 0; }
.done p { margin: 0; font-size: 15px; color: var(--muted); }
.done .summary { font-family: var(--mono); font-size: 13px; }
.error { margin: 0; font-size: 14px; color: var(--kicker); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* — FAQ — */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px;
  align-items: center; padding: 16px 0; font-weight: 600; font-size: 16px; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.plus { font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--muted); transition: transform .15s; flex: none; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 0 18px; font-size: 15px; color: var(--muted); max-width: 64ch; }

/* — footer — */
.footer {
  max-width: 1120px; margin: 0 auto; padding: 32px var(--gutter) 48px;
  display: flex; flex-direction: column; gap: 16px; font-size: 13px; color: var(--muted);
}
.footer-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.footer-row .site { color: var(--color-text); font-weight: 600; text-decoration: none; }
.footer-row a { text-decoration: none; color: inherit; border-bottom: 1px dashed var(--color-divider); }
.footer p { margin: 0; max-width: 80ch; }

/* — prose pages (privacy, remove, 404) — */
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -.02em; margin: 0; }
.prose h2 { font-size: 20px; margin: 16px 0 0; }
.prose p, .prose li { font-size: 15px; color: var(--muted); max-width: 64ch; }
.prose p { margin: 0; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose strong { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) { .plus { transition: none; } }