/* =====================================================================
   GitCaliber design system.

   Light is the default reading environment, because reports are prose and
   people read them for minutes rather than seconds. Dark is a first class
   alternative, not an afterthought.

   Structure comes from type, spacing and hairlines rather than from boxes.
   A card is reserved for a discrete object somebody acts on: a plan, a
   comparison, a set of private notes. Prose does not live in a card.

   Nothing here encodes approval. Teal means an owner proved an account is
   theirs. Amber means a report is old. Neither is a judgment of a person,
   and no colour is ever the only way a state is expressed.
   ===================================================================== */

/* ---------- Tokens: dark, the default ---------- */
:root {
  --canvas: #0B1018;
  --surface: #121A26;
  --surface-sunken: #182231;
  --ink: #F3F6FA;
  --ink-2: #A8B2C1;
  --ink-3: #8C97A8;
  --hairline: #2A3648;
  --hairline-strong: #3B4A60;
  --navy: #0B1018;
  --action: #7C96FF;
  --action-hover: #9DB0FF;
  --action-quiet: #1B2540;
  --action-ink: #0B1018;
  --verify: #5AD4BF;
  --verify-quiet: #102A28;
  --warn: #E5A857;
  --warn-quiet: #2C2113;
  --error: #F98A80;
  --error-quiet: #2E1715;
  --focus: #9DB0FF;
  --mark: #F3F6FA;

  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* 8px system. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);

  --measure: 68ch;
  --page: 1120px;
  --reading: 720px;

  color-scheme: dark;
}

/* ---------- Tokens: light, only when explicitly chosen ----------
   Dark holds regardless of the system setting. Light is available to anyone
   who asks for it by stamping data-theme="light" on the root, but it is never
   applied on the system's say-so, because the default is a decision rather
   than a guess. */
:root[data-theme="light"] {
  --canvas: #F7F8FA;
  --surface: #FFFFFF;
  --surface-sunken: #F1F3F7;
  --ink: #0E1420;
  --ink-2: #556274;
  --ink-3: #626F81;
  --hairline: #DDE3EA;
  --hairline-strong: #C3CCD8;
  --navy: #172334;
  --action: #315CF5;
  --action-hover: #2447CE;
  --action-quiet: #EEF2FE;
  --action-ink: #FFFFFF;
  --verify: #087B6A;
  --verify-quiet: #E6F4F1;
  --warn: #9A5B13;
  --warn-quiet: #FDF3E4;
  --error: #B42318;
  --error-quiet: #FEF0EF;
  --focus: #315CF5;
  --mark: #172334;
  --shadow-1: 0 1px 2px rgba(14, 20, 32, 0.05);
  --shadow-2: 0 4px 16px rgba(14, 20, 32, 0.07);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.02em; }
h2 { font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -0.014em; }
h3 { font-size: 17px; letter-spacing: -0.008em; }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); padding-left: var(--s5); }
li { margin-bottom: var(--s2); }
img, svg { max-width: 100%; }

a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One visible focus treatment everywhere, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s4);
  top: calc(-1 * var(--s9));
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  transition: top 140ms ease;
}
.skip-link:focus { top: var(--s4); text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s5); }
.wrap-reading { max-width: var(--reading); margin: 0 auto; padding: 0 var(--s5); }
.stack > * + * { margin-top: var(--s5); }
.spacer { height: var(--s6); }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }
.measure { max-width: var(--measure); }

.grid { display: grid; gap: var(--s5); }
.grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .grid.cols3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid.cols2 { grid-template-columns: 1fr; }
}

/* ---------- Header ---------- */
header.site {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.site .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
}
/* The mark is the G of the word. It sits on the baseline at cap height, so
   the icon and the initial are one thing and the header never says G twice. */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo .mark { width: 0.71em; height: 0.71em; color: var(--mark); flex-shrink: 0; }
/* One word, told apart by weight rather than colour, so it survives a single
   ink and does not depend on distinguishing two hues. */
.logo .w-it { font-weight: 500; }
.logo .w-cal { font-weight: 700; }

nav.links { display: flex; align-items: center; gap: var(--s5); }
nav.links a {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  padding: var(--s2) 0;
}
nav.links a:hover { color: var(--ink); text-decoration: none; }
nav.links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
nav.links .btn { color: var(--action-ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  width: 44px; height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; }
  nav.links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    padding: var(--s2) var(--s5) var(--s5);
    box-shadow: var(--shadow-2);
  }
  nav.links.open { display: flex; }
  nav.links a { padding: var(--s3) 0; min-height: 44px; display: flex; align-items: center; }
  nav.links .btn { justify-content: center; margin-top: var(--s2); }
  header.site { position: relative; }
}

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid var(--hairline);
  margin-top: var(--s9);
  padding: var(--s6) 0 var(--s7);
  color: var(--ink-2);
  font-size: 14px;
  background: var(--surface);
}
footer.site .foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
}
footer.site a { color: var(--ink-2); }
footer.site a:hover { color: var(--ink); }
footer.site .foot-note { flex-basis: 100%; margin: var(--s2) 0 0; max-width: var(--measure); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  background: var(--action);
  /* Ink on the action colour is a token: dark on the light blue in dark mode,
     white on the deep blue in light. Both measured above 5:1. */
  color: var(--action-ink);
  border: 1px solid transparent;
  padding: 11px var(--s5);
  min-height: 44px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--action-hover); text-decoration: none; color: var(--action-ink); }
.btn.secondary {
  background: var(--surface);
  border-color: var(--hairline-strong);
  color: var(--ink);
}
.btn.secondary:hover { background: var(--surface-sunken); color: var(--ink); }
.btn.quiet {
  background: none;
  border-color: transparent;
  color: var(--action);
  padding-left: var(--s2);
  padding-right: var(--s2);
}
.btn.quiet:hover { background: var(--action-quiet); color: var(--action-hover); }
.btn.small { min-height: 36px; padding: var(--s2) var(--s3); font-size: 14px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-busy { position: relative; color: transparent; }
.btn.is-busy::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--action-ink);
  animation: spin 700ms linear infinite;
}
.btn.secondary.is-busy::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
label, .lbl {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.hint { font-size: 13px; color: var(--ink-2); margin: var(--s1) 0 0; }

input, textarea, select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 11px var(--s3);
  min-height: 44px;
  font: inherit;
  font-size: 15px;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, textarea:hover, select:hover { border-color: var(--ink-3); }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
select { cursor: pointer; }

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error);
}
.field { margin-bottom: var(--s4); }
.field-error {
  display: block;
  color: var(--error);
  font-size: 13px;
  margin-top: var(--s2);
  font-weight: 500;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  min-height: 0;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--action);
  cursor: pointer;
}

/* The target input, on the homepage and the dashboard. */
.target-form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.target-form input { flex: 1 1 260px; min-width: 0; }
.target-form .btn { flex-shrink: 0; }

/* ---------- Cards, used only for discrete objects ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--s5); }
.panel h2 { margin: 0 0 var(--s3); font-size: 19px; }
.panel h3 { margin: 0 0 var(--s3); }
.panel > :last-child { margin-bottom: 0; }

/* An editorial section: a rule and a label, no box. */
.section { margin: var(--s7) 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

/* ---------- Status ---------- */
.notice {
  background: var(--action-quiet);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--action);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  margin: var(--s3) 0;
  font-size: 15px;
  color: var(--ink);
}
.notice.error { background: var(--error-quiet); border-left-color: var(--error); }
.notice.warn { background: var(--warn-quiet); border-left-color: var(--warn); }
.notice.ok { background: var(--verify-quiet); border-left-color: var(--verify); }
.notice p:last-child { margin-bottom: 0; }
.notice strong { font-weight: 600; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px var(--s3);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
/* Teal plus a word. The colour is never the only signal. */
.chip.verified {
  background: var(--verify-quiet);
  border-color: var(--verify);
  color: var(--verify);
}
.chip.stale {
  background: var(--warn-quiet);
  border-color: var(--warn);
  color: var(--warn);
}

/* ---------- Skeletons ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--hairline) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton-line { height: 14px; margin-bottom: var(--s3); }
.skeleton-line.short { width: 45%; }
.skeleton-line.medium { width: 72%; }

/* ---------- Progress, for the assessment wait ---------- */
.progress-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.progress-steps li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  color: var(--ink-3);
  font-size: 15px;
}
.progress-steps li .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--hairline-strong);
  flex-shrink: 0;
}
.progress-steps li[data-state="active"] { color: var(--ink); font-weight: 500; }
.progress-steps li[data-state="active"] .dot {
  border-color: var(--action);
  background: var(--action);
  animation: pulse 1.4s ease-in-out infinite;
}
.progress-steps li[data-state="done"] { color: var(--ink-2); }
.progress-steps li[data-state="done"] .dot {
  border-color: var(--verify);
  background: var(--verify);
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* =====================================================================
   Report.
   Prose, not panels. Structure comes from type and hairlines so a reader
   working through many people can find the same thing in the same place.
   ===================================================================== */
.report { max-width: var(--reading); margin: 0 auto; padding: var(--s6) 0 var(--s8); }

.report-head { margin-bottom: var(--s5); }
.subject {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s2);
  overflow-wrap: anywhere;
}
.domain { color: var(--ink-2); margin: var(--s2) 0 0; font-size: 16px; }
.asof { font-size: 13px; color: var(--ink-2); margin: var(--s3) 0 0; }
.asof.stale {
  color: var(--warn);
  border-left: 2px solid var(--warn);
  padding-left: var(--s3);
  font-weight: 500;
}
.links { font-size: 14px; margin: var(--s3) 0 0; display: flex; gap: var(--s3); flex-wrap: wrap; }

/* The five second answer. Largest text on the page, and first. */
.lead {
  border-left: 3px solid var(--action);
  padding: var(--s1) 0 var(--s1) var(--s5);
  margin: 0 0 var(--s6);
}
.lead p {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.56;
  margin: 0;
}

/* Source facts, one glance. */
.facts { margin-bottom: var(--s6); }
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  padding: var(--s4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.fact { display: flex; flex-direction: column; min-width: 76px; }
.fact-n {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fact-k { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.fact-note {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  margin: var(--s3) 0 0;
  max-width: var(--measure);
}

.sec {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--hairline);
}
.report section { margin-bottom: var(--s7); }
.prose { font-size: 16px; line-height: 1.7; margin: 0; max-width: var(--measure); }

/* Evidence carries the report, and the repository name is what a reader
   goes and opens, so it leads. */
.ev-list, .lang-list { list-style: none; margin: 0; padding: 0; }
.ev {
  border-left: 2px solid var(--hairline-strong);
  padding: 0 0 0 var(--s4);
  margin-bottom: var(--s5);
}
.ev:last-child { margin-bottom: 0; }
.ev-repo {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s2);
  overflow-wrap: anywhere;
}
.ev-body { font-size: 16px; line-height: 1.65; max-width: var(--measure); display: block; }

.lang {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.lang:last-child { border-bottom: none; }
.lang-name { font-weight: 600; }
.lang-ev { color: var(--ink-2); line-height: 1.55; }

.obs-list { display: flex; flex-direction: column; gap: var(--s4); }
.obs { display: grid; grid-template-columns: 128px 1fr; gap: var(--s4); }
.obs-k { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.obs-v { font-size: 16px; line-height: 1.65; max-width: var(--measure); }

@media (max-width: 640px) {
  .lang, .obs { grid-template-columns: 1fr; gap: var(--s1); }
  .lang { padding: var(--s3) 0; }
}

/* The part a reader returns to, before a call or an interview. */
.use-it { border-top: 1px solid var(--hairline); padding-top: var(--s5); }
.use-it > div { margin-bottom: var(--s5); }
.use-it > div:last-child { margin-bottom: 0; }
.opener-k { font-size: 14px; color: var(--ink-2); font-weight: 500; margin-bottom: var(--s2); }
.opener-v { font-size: 16px; line-height: 1.65; margin: 0; max-width: var(--measure); }
.opener .opener-v {
  border-left: 2px solid var(--hairline-strong);
  padding-left: var(--s4);
}
.ask-list { list-style: none; margin: 0; padding: 0; }
.ask {
  font-size: 16px;
  line-height: 1.6;
  padding: var(--s3) 0 var(--s3) var(--s5);
  position: relative;
  border-bottom: 1px solid var(--hairline);
  max-width: var(--measure);
}
.ask:last-child { border-bottom: none; }
.ask::before {
  content: "?";
  position: absolute;
  left: 0;
  top: var(--s3);
  color: var(--ink-3);
  font-weight: 600;
}
/* A limitation is not a criticism, so it is set apart rather than styled as
   a warning about the person. */
.gap .opener-v {
  color: var(--ink-2);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  padding: var(--s4);
}

.disclaimer {
  color: var(--ink-2);
  font-size: 13px;
  border-top: 1px solid var(--hairline);
  padding-top: var(--s4);
  margin-top: var(--s5);
  max-width: var(--measure);
}

/* ---------- Private notes ---------- */
.notes-panel {
  border-left: 3px solid var(--hairline-strong);
  background: var(--surface-sunken);
}
.notes-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0; flex-wrap: wrap; }
.notes-k { font-size: 14px; color: var(--ink-2); min-width: 60px; font-weight: 500; }
.notes-row select { width: auto; min-width: 170px; }
.stars { display: inline-flex; gap: var(--s1); }
.star {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-3);
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.star:hover { border-color: var(--action); }
.star.on { color: var(--ink); border-color: var(--action); background: var(--action-quiet); }

/* ---------- Usage ---------- */
.usage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.usage-n { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
.usage-d { color: var(--ink-2); font-size: 14px; margin-top: var(--s1); }
.usage-p {
  margin: var(--s4) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  color: var(--ink-2);
}

/* ---------- Report list ---------- */
.report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s4) 0;
}
.report-row:last-child { border-bottom: none; }
.report-row .who { font-weight: 600; overflow-wrap: anywhere; }
.report-row .kind {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
  padding: 1px var(--s2);
}
.report-row .meta { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.empty {
  text-align: center;
  padding: var(--s7) var(--s5);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  color: var(--ink-2);
}
.empty h3 { color: var(--ink); margin-bottom: var(--s2); }
.empty p { max-width: 44ch; margin-left: auto; margin-right: auto; }

/* ---------- Pricing ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 780px;
  margin: var(--s6) auto 0;
}
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
}
.plan.featured { border-color: var(--action); box-shadow: var(--shadow-2); }
.plan-name { font-size: 15px; font-weight: 600; margin: 0 0 var(--s3); }
.plan-price { margin: 0 0 var(--s1); }
.plan-price .amt { font-size: 40px; font-weight: 700; letter-spacing: -0.025em; }
.plan-price .per { color: var(--ink-2); font-size: 15px; font-weight: 400; }
.plan-sub { color: var(--ink-2); font-size: 13px; margin: 0 0 var(--s5); }
.plan-list { list-style: none; margin: 0 0 var(--s5); padding: 0; flex: 1; }
.plan-list li {
  padding: var(--s2) 0 var(--s2) var(--s5);
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: var(--s1);
  top: 15px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}

/* ---------- Comparison ---------- */
.table-scroll { overflow-x: auto; margin: var(--s5) 0; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 560px;
}
table.data th, table.data td {
  border-bottom: 1px solid var(--hairline);
  padding: var(--s3) var(--s4);
  text-align: left;
  vertical-align: top;
}
table.data th {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 600;
  border-bottom: 1px solid var(--hairline-strong);
}
table.data caption { text-align: left; color: var(--ink-2); font-size: 14px; margin-bottom: var(--s3); }

/* Below the table's minimum, the same data becomes stacked sections so
   nothing has to be read sideways. */
.cmp-cards { display: none; }
@media (max-width: 700px) {
  .table-scroll { display: none; }
  .cmp-cards { display: block; }
  .cmp-card {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--s4);
    margin-bottom: var(--s4);
    background: var(--surface);
  }
  .cmp-card h3 { margin-bottom: var(--s3); }
  .cmp-card dt { font-size: 13px; color: var(--ink-2); margin-top: var(--s3); }
  .cmp-card dd { margin: var(--s1) 0 0; }
}

/* ---------- Marketing ---------- */
.hero { padding: var(--s8) 0 var(--s7); }
.hero h1 { max-width: 18ch; }
.hero .lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink-2);
  max-width: 56ch;
  margin: var(--s4) 0 var(--s6);
}
.swap {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  color: var(--ink-2);
  margin-top: var(--s5);
}
.swap .to { color: var(--verify); font-weight: 600; }
.swap .arrow { color: var(--ink-3); }

.sample-frame {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--surface);
}
.sample-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-sunken);
  font-size: 13px;
  color: var(--ink-2);
}
.sample-bar .tag {
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 2px var(--s3);
  font-size: 12px;
}
.sample-body { padding: var(--s5); }
.sample-body .report { padding: 0; max-width: none; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.steps li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--action);
  padding-top: 2px;
}
.steps strong { display: block; margin-bottom: var(--s1); }
.steps span { color: var(--ink-2); font-size: 15px; }

.principles { list-style: none; padding: 0; margin: 0; }
.principles li {
  padding: var(--s3) 0 var(--s3) var(--s5);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  margin: 0;
  max-width: var(--measure);
}
.principles li:last-child { border-bottom: none; }
.principles li::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 10px; height: 2px;
  background: var(--ink-3);
}

details.faq {
  border-bottom: 1px solid var(--hairline);
  padding: var(--s3) 0;
}
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--s2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-2); font-weight: 400; font-size: 20px; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { color: var(--ink-2); max-width: var(--measure); margin: var(--s2) 0 var(--s3); }

/* ---------- Auth ---------- */
.form-narrow {
  max-width: 420px;
  margin: var(--s8) auto var(--s9);
}
.or {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s4);
  color: var(--ink-2);
  font-size: 13px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.btn.github {
  background: var(--surface-sunken);
  border-color: var(--hairline-strong);
  color: var(--ink);
}
.btn.github:hover { background: var(--hairline); color: var(--ink); }

/* ---------- Misc ---------- */
.share-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
.copybox {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  flex: 1 1 260px;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--ink);
}
.evidence li { margin-bottom: var(--s3); }
.spin { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   Print.
   Interviews happen with a resume on the table, so the report has to
   survive leaving the browser. Ink on paper, no controls, no navigation.
   ===================================================================== */
@media print {
  :root {
    --canvas: #fff; --surface: #fff; --surface-sunken: #fff;
    --ink: #111; --ink-2: #444; --ink-3: #666;
    --hairline: #bbb; --hairline-strong: #999;
    --action: #222; --verify: #222; --warn: #222;
  }
  header.site, footer.site, .btn, .share-row, .copybox, .usage-p,
  .skip-link, .nav-toggle, .notes-panel .share-row { display: none !important; }

  body { background: #fff; color: #111; font-size: 11pt; }
  .wrap, .wrap-reading, .report { max-width: none; padding: 0; }

  .report section, .ev, .obs, .lead, .use-it > div, .panel { break-inside: avoid; }
  .sec { break-after: avoid; }
  .panel { box-shadow: none; border: 1px solid #bbb; }

  .lead { border-left: 2px solid #333; }
  .links a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }

  .notes-panel { border: 1px solid #bbb; padding: 12px; }
  .notes-panel::before {
    content: "Private notes, written by the person who printed this.";
    display: block;
    font-size: 9pt;
    color: #444;
    margin-bottom: 8px;
  }
  .notes-panel textarea, .notes-panel select {
    border: none; padding: 0; color: #111; background: none; resize: none;
  }
  a { color: #111; text-decoration: none; }
}

/* Small utilities that replaced the last inline styles. */
.measure-center { margin-inline: auto; }
.form-narrow .hint.center,
.form-narrow .muted.center { margin-top: var(--s4); }

/* =====================================================================
   Homepage. One viewport, nothing to scroll for. A visitor should know
   what this does and what to do inside the first second, so there is one
   headline, one line under it, one input, and the mechanic in one line.
   ===================================================================== */
.home {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.home main {
  flex: 1;
  display: flex;
  align-items: center;
}
.home-hero { width: 100%; max-width: 680px; margin: 0 auto; padding: var(--s7) var(--s5); }
.home-hero h1 {
  font-size: clamp(32px, 5.4vw, 52px);
  letter-spacing: -0.026em;
  line-height: 1.06;
  margin-bottom: var(--s4);
}
.home-hero .lede {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-2);
  margin: 0 0 var(--s6);
  max-width: 46ch;
}
.home-hero .swap { margin-top: var(--s5); }
.home-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 14px;
}
.home-facts li { margin: 0; }
.home-facts li + li::before { content: "\00b7"; margin-right: var(--s4); }
.home footer.site { margin-top: 0; padding: var(--s4) 0; }
.home footer.site .foot-note { display: none; }
@media (max-height: 640px) {
  .home-hero { padding-top: var(--s5); padding-bottom: var(--s5); }
  .home-facts { margin-top: var(--s4); }
}
.sample-intro { padding-bottom: 0; }