/* Hand-written, no build step, no webfonts: everything here is either a system
   font or a colour. This is a static translation of the AI SaaS design system
   (the generated app's own DaisyUI-style tokens and classes) — the class names
   match the design system's, so a change there is easy to carry across, but
   only the classes this page actually uses are copied in.

   Two themes, Dark and Light, are swapped with data-theme on
   <html>. With no data-theme the visitor's prefers-color-scheme picks one, so
   the page is themed correctly with its script turned off; the script only
   adds an override, remembered in localStorage. */

/* ---------- Theme ---------- */

/* Dark is the default, and the dark half of prefers-color-scheme. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-base-100: #100d0c;
  --color-base-200: #1a1514;
  --color-base-300: #2f2523;
  --color-base-content: #f6f1ee;
  --color-primary: #f2703a;
  --color-primary-content: #1a0d07;
  --color-neutral: #0a0807;
  --color-neutral-content: #f6f1ee;
  --color-glow: #f5a524;
  --color-glow-strong: #fbbf4a;
  --color-warning: #f5a524;
  --color-warning-content: #1a0d07;
  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;
  --depth: 1;
}

/* Light, twice on purpose: once for a visitor whose system prefers light and
   who has not picked a theme, once for anyone who picked it explicitly. A
   custom-property block cannot be shared between two selectors that live in
   different at-rules, so keep these two identical. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-base-100: #faf8f5;
    --color-base-200: #f1ede6;
    --color-base-300: #e4ddd2;
    --color-base-content: #1c1917;
    --color-primary: #b4370a;
    --color-primary-content: #ffffff;
    --color-neutral: #1c1917;
    --color-neutral-content: #faf8f5;
    --color-glow: #0f766e;
    --color-glow-strong: #0d9488;
    --color-warning: #b45309;
    --color-warning-content: #ffffff;
    --radius-selector: 0.125rem;
    --radius-field: 0.125rem;
    --radius-box: 0.25rem;
    --depth: 0;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --color-base-100: #faf8f5;
  --color-base-200: #f1ede6;
  --color-base-300: #e4ddd2;
  --color-base-content: #1c1917;
  --color-primary: #b4370a;
  --color-primary-content: #ffffff;
  --color-neutral: #1c1917;
  --color-neutral-content: #faf8f5;
  --color-glow: #0f766e;
  --color-glow-strong: #0d9488;
  --color-warning: #b45309;
  --color-warning-content: #ffffff;
  --radius-selector: 0.125rem;
  --radius-field: 0.125rem;
  --radius-box: 0.25rem;
  --depth: 0;
}

/* Everything else derives from the theme above. Declared on :root only,
   because the theme only ever lives on <html> here — there is no nested
   theme for these to recompute under. */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --border: 1px;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --surface-card: color-mix(in oklab, var(--color-base-200) 50%, transparent);
  --surface-tint: color-mix(in oklab, var(--color-base-200) 30%, transparent);
  --text-strong: color-mix(in oklab, var(--color-base-content) 80%, transparent);
  /* 66%, not the design system's 60%: at 60% Light's muted text falls just
     under WCAG AA's 4.5:1 on every tinted surface (#39). */
  --text-muted: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  --border-subtle: color-mix(in oklab, var(--color-base-content) 5%, transparent);
  --border-strong: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  /* 50%, not 20%: an input or checkbox border is what identifies the control,
     so it needs WCAG's 3:1 for UI components in both themes (#39). */
  --border-field: color-mix(in oklab, var(--color-base-content) 50%, transparent);
  --primary-soft: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --primary-line: color-mix(in oklab, var(--color-primary) 20%, transparent);
}

/* ---------- Base ---------- */

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

html {
  background: var(--color-base-100);
  color: var(--color-base-content);
  -webkit-font-smoothing: antialiased;
  /* In-page links land below the sticky navbar, not under it. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: 1rem/1.5 var(--font-sans);
  /* A long unbroken token — a package name, a URL — must wrap rather than push
     the page sideways on a phone. */
  overflow-wrap: break-word;
  transition: background-color 0.3s, color 0.3s;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

/* The browser's own [hidden] rule loses to any author display value (e.g.
   .progress-panel's flex), so restate it: script-revealed controls must stay
   hidden when the script does not run. */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

/* Towards the text colour rather than white: that lightens in Dark and
   darkens in Light, where white would drop the link below 4.5:1. */
a:hover {
  color: color-mix(in oklab, var(--color-primary), var(--color-base-content) 20%);
}

code,
pre {
  font-family: var(--font-mono);
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: color-mix(in oklab, var(--color-primary) 30%, transparent);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Off-screen until a keyboard user tabs to it: the navbar is eleven stops
   long on a desktop. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border-radius: var(--radius-field);
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
  color: var(--color-primary-content);
}

.container {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.eyebrow {
  font: 500 0.875rem/1.25rem var(--font-mono);
  color: var(--color-primary);
}

.text-gradient {
  color: transparent;
  background: linear-gradient(to right, var(--color-primary), var(--color-glow-strong));
  -webkit-background-clip: text;
  background-clip: text;
}

/* The only atmosphere on the page: two large blurred orbs fixed behind it. */
.ambient {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
}

.ambient::before {
  top: -12rem;
  left: -12rem;
  width: 600px;
  height: 600px;
  background: color-mix(in oklab, var(--color-primary) 4%, transparent);
}

.ambient::after {
  bottom: -12rem;
  right: -12rem;
  width: 500px;
  height: 500px;
  background: color-mix(in oklab, var(--color-glow) 3%, transparent);
}

/* ---------- Controls ---------- */

.btn {
  --btn-color: var(--color-base-200);
  --btn-fg: var(--color-base-content);
  --btn-bg: var(--btn-color);
  --btn-border: color-mix(in oklab, var(--btn-color), #000 5%);
  --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-color) calc(var(--depth) * 30%), transparent),
    0 4px 3px -2px color-mix(in oklab, var(--btn-color) calc(var(--depth) * 30%), transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  /* The 44px touch-target floor, .btn-sm included. */
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: var(--border) solid var(--btn-border);
  border-radius: var(--radius-field);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 0.875rem/1 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), scale 0.1s var(--ease-out);
}

.btn:hover {
  background: color-mix(in oklab, var(--btn-color), #000 7%);
  color: var(--btn-fg);
}

.btn:active:not(:disabled) {
  scale: 0.97;
}

/* Primary, not the button's own colour: a plain .btn is base-200, which is
   nearly the colour of the page behind it, so its ring would vanish. */
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  --btn-color: var(--color-primary);
  --btn-fg: var(--color-primary-content);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-shadow: none;
  box-shadow: none;
}

.btn-ghost:hover {
  background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
}

.btn-sm {
  padding-inline: 0.75rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}

.badge {
  --badge-color: var(--color-base-100);
  --badge-fg: var(--color-base-content);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding-inline: 0.6875rem;
  border: var(--border) solid var(--badge-border, var(--border-strong));
  border-radius: var(--radius-selector);
  background: var(--badge-color);
  color: var(--badge-fg);
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-sm {
  height: 1.25rem;
  padding-inline: 0.4375rem;
  font-size: 0.75rem;
}

.badge-primary {
  --badge-color: var(--color-primary);
  --badge-fg: var(--color-primary-content);
  --badge-border: var(--color-primary);
}

.badge-warning {
  --badge-color: var(--color-warning);
  --badge-fg: var(--color-warning-content);
  --badge-border: var(--color-warning);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--primary-line);
  border-radius: 0.25rem;
  background: var(--primary-soft);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.checkbox {
  appearance: none;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: var(--border) solid var(--border-field);
  border-radius: var(--radius-selector);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox:checked::after {
  content: "";
  width: 0.375rem;
  height: 0.75rem;
  margin-top: -0.125rem;
  border: solid var(--color-primary-content);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.textarea {
  display: block;
  width: 100%;
  min-height: 8rem;
  padding: 0.5rem 0.75rem;
  border: var(--border) solid var(--border-field);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: 0.75rem/1.5 var(--font-mono);
  resize: vertical;
}

/* ---------- Navbar ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--color-base-100) 80%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Room for the theme toggle (two 44px options in a padded pill) before the
     script inserts it, so the bar does not grow and push the page down. */
  min-height: 4.75rem;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--color-base-content);
  font: 700 0.9375rem var(--font-mono);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-name {
  white-space: nowrap;
}

.brand:hover {
  color: var(--color-base-content);
}

.logo {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  transition: transform 0.15s;
}

.brand:hover .logo {
  transform: scale(1.1);
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  font-size: 0.875rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--color-base-content);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Inserted by script only when it runs, like the checklist's copy button, so
   it never sits on the page as a control that does nothing. */
.theme-toggle {
  display: inline-flex;
  padding: 0.1875rem;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: var(--surface-card);
}

.theme-toggle:empty {
  display: none;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.75rem 0 0.5rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.theme-option:hover {
  color: var(--color-base-content);
}

.theme-option[aria-pressed="true"] {
  background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  color: var(--color-base-content);
}

.swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
}

.swatch-dark {
  background: #f2703a;
  box-shadow: inset 0 0 0 2px #100d0c;
}

.swatch-light {
  background: #b4370a;
  box-shadow: inset 0 0 0 2px #faf8f5;
}

/* Below this there is not room for everything on one line; the section links
   are a convenience the page is still fine without. */
@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }
}

/* Tablet width: the name fits beside the full-size controls only a size
   smaller. */
@media (max-width: 767px) {
  .brand-name {
    font-size: 0.8125rem;
  }
}

/* At phone width the mark stands alone, but the name stays in the
   accessibility tree — it is the link's only accessible name. */
@media (max-width: 599px) {
  .brand {
    justify-content: center;
    min-width: 2.75rem;
  }
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* With the "Hire us" button in the bar as well, a phone has no room for the
   theme names: the swatches stand alone, and the names stay as the buttons'
   accessible names (font-size 0 hides text without removing it). */
@media (max-width: 599px) {
  .navbar-actions {
    gap: 0.5rem;
  }
  .theme-option {
    justify-content: center;
    gap: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    font-size: 0;
  }
}

/* The smallest phones: the bar's five 44px-or-wider targets only fit with
   tighter gutters and gaps. */
@media (max-width: 379px) {
  .navbar-inner {
    gap: 0.5rem;
    padding-inline: 1rem;
  }
  .theme-toggle {
    padding: 0.125rem;
  }
  .navbar-actions .btn {
    padding-inline: 0.625rem;
  }
}

/* ---------- Sections ---------- */

main,
footer {
  position: relative;
  z-index: 1;
}

.section {
  border-top: 1px solid var(--border-subtle);
}

.section-tint {
  background: var(--surface-tint);
}

.section-body {
  padding-block: clamp(4rem, 9vw, 6rem);
}

.section-header .eyebrow {
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-lede {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--text-muted);
  text-wrap: pretty;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 3rem;
  align-items: start;
}

.prose-note {
  margin-top: 2rem;
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

.closing-line {
  margin-top: 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 3.5rem;
  align-items: center;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero .eyebrow {
  margin-bottom: 1.25rem;
}

.hero-title {
  font: 800 clamp(2.25rem, 6vw, 3.75rem) / 1.05 var(--font-mono);
  letter-spacing: -0.04em;
}

.tagline {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--text-muted);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.status {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in oklab, var(--color-warning) 25%, transparent);
  border-radius: var(--radius-box);
  background: color-mix(in oklab, var(--color-warning) 8%, transparent);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-strong);
}

.status .badge {
  flex: none;
  margin-top: 1px;
}

.install {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: var(--color-base-200);
}

.install-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  /* No vertical padding: the copy button is a full 44px .btn-sm, and the bar
     is exactly its height. */
  padding: 0 0.25rem 0 1rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.install-head .btn {
  font-family: var(--font-mono);
}

.install pre {
  margin: 0;
  padding: 1.25rem;
  font: 0.875rem/1.9 var(--font-mono);
  /* The command is wider than a phone. Wrapping it keeps the whole thing on
     screen, and wrapping is only visual — a copy still yields the one line the
     shell expects, with no inserted newline. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The prompt is drawn by CSS, never written into the HTML: generated content
   is not a text node, so it is not selected, not copied, and not seen by
   scripts/check_site.py's install-command check. The second declaration gives
   it empty alt text so a screen reader does not read "dollar" before each
   command; browsers without that syntax keep the first one. */
.cmd::before {
  content: "$ ";
  content: "$ " / "";
  color: var(--text-muted);
  user-select: none;
}

/* ---------- What stalls a side project ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.surface-card {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  background: var(--surface-card);
  transition: border-color 0.15s var(--ease-in-out);
}

.surface-card.is-interactive:hover {
  border-color: var(--primary-line);
}

.card-index {
  font: 600 0.75rem var(--font-mono);
  color: var(--color-primary);
}

.surface-card h3 {
  margin: 0.75rem 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.surface-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- Stack ---------- */

.stack-list {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  background: var(--surface-card);
}

.stack-list > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.125rem 1.25rem;
}

.stack-list > div + div {
  border-top: 1px solid var(--border-subtle);
}

.stack-list dt {
  font: 600 0.8125rem/1.6 var(--font-mono);
  color: var(--color-primary);
}

.stack-list dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 479px) {
  .stack-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

.stack-list strong {
  color: var(--color-base-content);
}

/* ---------- Choices ---------- */

.choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  /* The 1px gap shows the background through as hairlines between cells. */
  gap: 1px;
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  background: var(--border-subtle);
}

.choice-list > div {
  padding: 1.5rem;
  background: var(--color-base-100);
}

.choice-list dt {
  font: 600 0.875rem var(--font-mono);
}

.choice-list dd {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- Quickstart ---------- */

@media (min-width: 52rem) {
  .quickstart .section-header {
    position: sticky;
    top: 7.5rem;
  }
}

.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.steps > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--primary-line);
  border-radius: 9999px;
  background: var(--primary-soft);
  color: var(--color-primary);
  font: 600 0.8125rem var(--font-mono);
}

.steps > li.is-done::before {
  content: "✓";
  border: 0;
  background: var(--color-glow);
  color: var(--color-base-100);
  font-weight: 700;
}

.steps > li > span {
  padding-top: 0.25rem;
}

.steps code {
  font-size: 0.8125rem;
  color: var(--color-primary);
}

.steps .cmd-block {
  display: block;
  margin-top: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-field);
  background: var(--color-base-200);
  color: var(--color-base-content);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.aside-note {
  margin-top: 2rem;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-box);
  background: var(--color-base-200);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Checklist ---------- */

.checklist-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.checklist-head .section-header {
  flex: 1 1 30rem;
}

/* Revealed by script: a counter that cannot count would only ever say 0. */
.progress-panel {
  flex: 0 1 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  background: var(--color-base-100);
}

.progress-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.progress-count strong {
  font: 700 1.75rem/1 var(--font-mono);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-base-content);
}

.progress-count .of {
  font-size: 1rem;
  color: var(--text-muted);
}

.progress {
  height: 0.375rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--color-base-300);
}

.progress-fill {
  width: 0;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--color-primary), color-mix(in oklab, var(--color-primary) 70%, transparent));
  transition: width 0.6s var(--ease-out);
}

.checklist-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.copy-status {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.phases {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.phase {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  background: var(--color-base-100);
}

.phase-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.phase h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.phase-count {
  font: 600 0.8125rem var(--font-mono);
  color: var(--text-muted);
}

.phase > p {
  margin: 0.5rem 0 1rem;
  max-width: 42rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.phase li {
  border-top: 1px solid var(--border-subtle);
}

.phase label {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  /* The tap target is the whole row, not the box, so this is comfortably
     tappable at phone width without the checkbox itself needing to be huge. */
  padding: 0.875rem 0.25rem;
  cursor: pointer;
}

.phase .checkbox {
  margin-top: 0.0625rem;
}

.check-text {
  /* A flex item will not shrink below its longest word unless told to, and
     these hold URLs and repo paths wider than a 320px phone. */
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  transition: color 0.15s;
}

.check-text strong,
.check-text code {
  color: var(--color-base-content);
}

.check-text code {
  font-size: 0.8125rem;
}

/* ---------- FAQ ---------- */

.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.faq-item {
  padding: 1.5rem;
  border: var(--border) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--surface-card);
}

.faq-q {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.faq-a {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

.faq-a code {
  font-size: 0.8125rem;
  color: var(--color-base-content);
}

.faq-support {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* ---------- Consulting (issue #38) ---------- */

.hero-hire {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Inline links, but still 44px-tall tap targets: the hero's, the
   engagements' closing call to action, the footer's two standalone ones, and
   every mailto fallback in #contact (beside the form, in the script's
   status message, and in the no-JS #contact-error message). */
.hero-hire a,
.closing-line a,
.contact-alt a,
.footer-inner > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Mid-sentence, where an inline-flex box would wrap as one piece and strand
   the full stop after it on a line of its own: padding grows the target
   instead. */
.contact-status a,
.contact-flash a {
  padding-block: 0.75rem;
}

.hero-hire a {
  font-weight: 600;
}

.engagement-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.engagement {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: var(--border) solid var(--border-subtle);
  border-radius: var(--radius-box);
  background: var(--color-base-100);
  transition: border-color 0.15s var(--ease-in-out);
}

.engagement:hover {
  border-color: var(--primary-line);
}

/* Unfilled: dashed, so nobody mistakes a placeholder for a real offer. */
.engagement[data-placeholder] {
  border-style: dashed;
  border-color: var(--border-field);
}

.engagement h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.engagement-scope {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.engagement-price {
  font: 700 1.25rem/1.3 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.engagement-cta {
  align-self: flex-start;
}

/* ---------- Contact (issue #38) ---------- */

.contact-alt {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--text-strong);
}

.contact-alt a {
  font-weight: 600;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  min-width: 0;
  border-radius: var(--radius-box);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* 1rem text, not smaller: iOS zooms the page into any field below 16px. */
.input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: var(--border) solid var(--border-field);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  color: var(--color-base-content);
  font: 1rem/1.5 var(--font-sans);
  transition: border-color 0.15s var(--ease-out);
}

.input:hover {
  border-color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
}

.input:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

.contact-message {
  min-height: 8rem;
  resize: vertical;
}

/* Visually and accessibly absent; only a bot filling every field finds it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.form-actions .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact-status {
  flex: 1 1 14rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.contact-status.is-ok,
.contact-flash.is-ok {
  color: var(--color-glow);
}

.contact-status.is-error,
.contact-flash.is-error {
  color: var(--color-base-content);
}

/* The outcome of a native (no-JS) submit. The server's 303 lands on
   #contact-sent or #contact-error, and :target is what shows the one it
   names — no script involved. Hidden otherwise. */
.contact-flash {
  display: none;
  padding: 0.75rem 1rem;
  border: var(--border) solid var(--border-strong);
  border-radius: var(--radius-field);
  background: var(--surface-card);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contact-flash:target {
  display: block;
}

@media (max-width: 479px) {
  .form-actions .btn {
    width: 100%;
  }
}

/* ---------- Pre-release ---------- */

.prerelease {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--primary-line);
  border-radius: 1rem;
  background: var(--primary-soft);
}

.prerelease h2 {
  font-weight: 500;
}

.prerelease p {
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-strong);
}

@media (max-width: 479px) {
  .prerelease {
    grid-template-columns: minmax(0, 1fr);
  }
  .prerelease h2 {
    justify-self: start;
  }
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--border-subtle);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.footer-inner a {
  font: 0.8125rem var(--font-mono);
}

/* The measurement disclosure: a full line of its own below the links. */
.footer-note {
  flex-basis: 100%;
  max-width: 46rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}