/* keystrawai · canonical site styles
   Source of truth: /DESIGN.md
   Palette: Midnight Charcoal / Warm Sand / Slate / Mauve / Rose / Ivory */

/* ───── Tokens ───── */
:root {
  /* Surfaces */
  --bg:              oklch(22% 0.020 280);  /* page surface (reference plane) */
  --bg-2:            oklch(26% 0.020 280);  /* raised chrome (cmd nav, marketing footer) */
  --bg-3:            oklch(30% 0.020 280);  /* highest elevation (modal / popover) */
  --bg-sunken:       oklch(16% 0.018 280);  /* recessed pane bodies */
  --bg-pane-chrome:  oklch(24% 0.018 280);  /* pane head + status — raised lips inside a pane */
  --bg-pane-gutter:  oklch(18% 0.018 280);  /* line-number gutter inside a code pane */

  /* Lines & bezels */
  --line:        oklch(34% 0.018 280);
  --bezel-top:   oklch(38% 0.020 75);   /* warm 1px highlight (top edge of raised surfaces) */
  --bezel-bot:   oklch(13% 0.018 280);  /* dark 1px line (bottom edge of raised surfaces) */
  --bezel-pane:  oklch(36% 0.018 280);  /* pane's inner 1px bezel */

  /* Shadows — structural, never atmospheric */
  --shadow-1:           0 1px 0 rgba(0, 0, 0, 0.45);                                  /* generic 1px contact */
  --shadow-recess:      inset 0 1px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--bezel-pane);
  --shadow-hood:        inset 0 6px 8px -5px rgba(0, 0, 0, 0.65),                     /* head presses down + */
                        inset 0 -6px 8px -5px rgba(0, 0, 0, 0.65);                    /* status presses up */
  --shadow-page-down:   0 1px 0 rgba(0, 0, 0, 0.55), 0 3px 5px -1px rgba(0, 0, 0, 0.40); /* tabbar drops into cmd */
  --shadow-page-up:     0 -1px 0 rgba(0, 0, 0, 0.55), 0 -3px 5px -1px rgba(0, 0, 0, 0.40); /* statusbar rises into footer */

  /* Type */
  --type:        oklch(93% 0.008 75);
  --type-2:      oklch(78% 0.010 75);
  --type-3:      oklch(60% 0.012 75);

  /* Brand action / accent */
  --prompt:        oklch(78% 0.080 65);   /* Warm Sand. Primary CTAs, prompts, cursor. */
  --prompt-quiet:  oklch(70% 0.070 65);   /* Hover state for warm-sand actions. */
  --accent:      oklch(78% 0.080 65);   /* alias for --prompt; warm-sand emphasis on type */

  /* Syntax-role accents */
  --keyword:     oklch(63% 0.038 245);  /* Slate Blue */
  --string:      oklch(67% 0.060 30);   /* Dusty Rose */
  --num:         oklch(64% 0.055 0);    /* Muted Mauve, lifted for AA */
  --comment:     oklch(54% 0.020 245);  /* Desaturated slate */
  --alarm:       oklch(63% 0.130 30);   /* Validation errors, destructive confirms. Use rarely. */

  /* Type stack */
  --mono:        "JetBrains Mono", ui-monospace, "Menlo", monospace;
  --sans:        "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Easing */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ───── Reset + base ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.62;
  color: var(--type);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 3px solid var(--prompt); outline-offset: 2px; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--prompt);
  color: var(--bg);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  transition: top 150ms var(--ease);
}
.skip-link:focus { top: 12px; }

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

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

/* ───── Material: film-grain overlay ───── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' stitchTiles='stitch' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ───── Global typographic primitives ───── */
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.label--block { display: block; margin-bottom: 16px; }
.accent { color: var(--prompt); }

/* ───── Page chrome ───── */

/* Top window chrome — traffic-light dots, file, path */
.tabbar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: var(--bg-2);
  gap: 16px;
  font-size: 12px;
  color: var(--type-3);
  border-top: 1px solid var(--bezel-top);
  border-bottom: 1px solid var(--bezel-bot);
  /* z-index 3 above .cmd's z-index 2 so the drop shadow paints over the cmd bar */
  box-shadow: var(--shadow-page-down);
  position: relative;
  z-index: 3;
}
.tabbar__dots { display: flex; gap: 6px; }
.tabbar__dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: oklch(34% 0.025 40);
}
.tabbar__file {
  color: var(--type-2);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tabbar__file::before { content: "● "; color: var(--accent); }
.tabbar__path {
  margin-left: auto;
  color: var(--type-3);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Command bar nav */
.cmd {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 32px;
  background: var(--bg-2);
  border-top: 1px solid var(--bezel-top);
  border-bottom: 1px solid var(--bezel-bot);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.cmd__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--type);
}
.cmd__mark .at { color: var(--prompt); }
.cmd__links { display: flex; gap: 22px; font-size: 13px; }
.cmd__links a { text-decoration: none; color: var(--type-2); }
.cmd__links a:hover { color: var(--type); }
.cmd__links a::before { content: "/"; color: var(--type-3); margin-right: 2px; }
.cmd__links a[aria-current="page"] { color: var(--prompt); }
.cmd__links a[aria-current="page"]::before { color: var(--prompt); }
.cmd__cta {
  margin-left: auto;
  font-size: 13px;
  color: var(--bg);
  background: var(--prompt);
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 2px;
}
.cmd__cta:hover { background: var(--prompt-quiet); }

/* Page-level status bar — pinned at the bottom of the page, mirror of the tabbar.
   Warm rim on top + bottom outer edges. z-index 3 above .foot's z-index 2 so the upward shadow renders. */
.statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 28px;
  padding: 0 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--bezel-top);
  border-bottom: 1px solid var(--bezel-top);
  box-shadow: var(--shadow-page-up);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--type-3);
  position: relative;
  z-index: 3;
  flex-wrap: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.statusbar .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.statusbar .glyph {
  font-size: 13px;
  color: var(--keyword);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}
.statusbar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--prompt);
  display: inline-block;
}
.statusbar .right {
  margin-left: auto;
  color: var(--type-2);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Marketing footer — raised chrome between the intake section and the statusbar */
.foot {
  background: var(--bg-2);
  margin-top: 16px;
  border-top: 1px solid var(--bezel-top);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
}
.foot__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}
.foot h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--type-3);
  margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 4px 0; }
.foot a {
  font-size: 13px;
  color: var(--type-2);
  text-decoration: none;
  font-family: var(--mono);
}
.foot a::before { content: "/"; color: var(--type-3); margin-right: 2px; }
.foot a:hover { color: var(--prompt); }
.foot__brand p {
  font-family: var(--sans);
  font-size: 13px;
  max-width: 30ch;
  line-height: 1.55;
  color: var(--type-2);
  margin-top: 14px;
}

/* ───── Layout shell ───── */
.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ───── Buttons & inline links ───── */
.btn-prompt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--prompt);
  color: var(--bg);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 14px;
  text-decoration: none;
  border-radius: 2px;
  letter-spacing: 0.01em;
}
.btn-prompt::before { content: "$ "; color: var(--bg); opacity: 0.6; }
.btn-prompt:hover { background: var(--prompt-quiet); }
.btn-prompt .arrow { transition: transform 150ms var(--ease); }
.btn-prompt:hover .arrow { transform: translateX(2px); }

.btn-link {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--type);
  text-decoration: none;
  border-bottom: 1px dashed var(--type-3);
  padding-bottom: 2px;
}
.btn-link:hover { border-color: var(--prompt); color: var(--prompt); }
.btn-link .arrow {
  display: inline-block;
  transition: transform 150ms var(--ease);
}
.btn-link:hover .arrow { transform: translateX(2px); }
.btn-link:hover .arrow--down { transform: translateY(2px); }
.btn-link--jump { margin-left: 8px; border-bottom-color: var(--type-3); }

/* ───── Cursor (terminal blink) ───── */
.cursor {
  display: inline-block;
  width: 10px;
  height: 1em;
  background: var(--prompt);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1.05s steps(2, end) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; opacity: 1; } }

/* ───── Hero section ───── */
.hero { padding: 64px 0 56px; }
.hero__pre {
  font-family: var(--mono);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.75;
  margin: 0;
  white-space: pre-wrap;
  color: var(--type-2);
}
.hero__line { display: block; }
.hero .prompt    { color: var(--prompt); }
.hero .cmd-typed { color: var(--type); }
.hero .cmd-arg   { color: var(--string); }
.hero .flag      { color: var(--keyword); }
.hero .out       { color: var(--type-2); }
.hero .json      { color: var(--type-2); }
.hero .json .k   { color: var(--num); }
.hero .json .s   { color: var(--string); }
.hero .json .n   { color: var(--accent); }

/* Generic terminal-pane content colors (also used outside .hero) */
.pane--term .prompt    { color: var(--prompt); }
.pane--term .cmd-typed { color: var(--type); }
.pane--term .cmd-arg   { color: var(--string); }
.pane--term .flag      { color: var(--keyword); }
.pane--term .out       { color: var(--type-2); }
.pane--term .comment   { color: var(--comment); }
.pane--term .num       { color: var(--num); }
.hero .comment   { color: var(--comment); }

.hero__title {
  font-family: var(--sans);
  font-weight: 460;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--type);
  margin: 36px 0 24px;
  max-width: 22ch;
}
.hero__sub {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--type-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 32px;
}
.hero__cta-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.hero__cta-row--tight { margin-top: 8px; }
.hero__cta-row--loose { margin-top: 28px; }

/* ───── Services as flag list ───── */
.flags {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.flags__head {
  display: flex;
  gap: 32px;
  align-items: baseline;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.flags__head h2 {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--type);
  margin: 0;
  max-width: 28ch;
}
.flag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.flag-row {
  display: grid;
  grid-template-columns: 220px 1fr 100px;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.flag-row__name {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--keyword);
  letter-spacing: 0.01em;
}
.flag-row__name::before { content: "--"; color: var(--type-3); }
.flag-row__link {
  color: inherit;
  text-decoration: none;
}
.flag-row__link:hover { color: var(--prompt); }
.flag-row__desc {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--type);
  line-height: 1.55;
  max-width: 60ch;
}
.flag-row__desc .sub {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--type-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.flag-row__type {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--num);
  letter-spacing: 0.04em;
  text-align: right;
}

/* ───── Who we serve (vertical chip row) ───── */
.who {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.who__head {
  display: flex;
  gap: 32px;
  align-items: baseline;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.who__lede {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--type);
  margin: 0;
  max-width: 32ch;
}
.tag-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--type-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 10px;
}
.who__foot {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--type-2);
  line-height: 1.55;
  max-width: 60ch;
  margin: 20px 0 0;
}

/* ───── Inline editorial note (mono, muted, no chrome) ───── */
.note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--type-3);
  letter-spacing: 0.02em;
  margin-top: 24px;
}
.note::before { content: "// "; color: var(--comment); }

/* ───── Approach (code-pane docstring) ───── */
.docs {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.docs__lede {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 32px;
  max-width: 22ch;
}
.docstring {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--type-2);
  white-space: pre-wrap;
  margin: 0;
}
.docstring .quote { color: var(--string); }
.docstring .arg   { color: var(--num); }
.docstring .key   { color: var(--keyword); }
.docstring .ret   { color: var(--accent); }
.sect-foot { margin-top: 32px; }

/* ───── Ethos slab (home rhythm break, no pane chrome) ───── */
.ethos {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
.ethos__line {
  font-family: var(--sans);
  font-weight: 460;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--type);
  margin: 16px 0 0;
  max-width: 28ch;
}
.ethos__attr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--type-3);
  margin: 20px 0 0;
}

/* ───── Free-intake panel ───── */
.intake {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.intake__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.intake h2 {
  font-family: var(--sans);
  font-weight: 460;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  max-width: 18ch;
}
.intake p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--type-2);
  max-width: 50ch;
}
.intake__cta { margin-top: 28px; }
.intake__schema {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--type-2);
  white-space: pre;
  margin: 0;
  overflow-x: auto;
}
.intake__schema .k { color: var(--num); }
.intake__schema .s { color: var(--string); }
.intake__schema .n { color: var(--accent); }
.intake__schema .b { color: var(--keyword); }
.intake__schema .c { color: var(--comment); }

/* ───── IDE pane primitive ───── */

/* Container — recessed well with a 6px rounded clip mask + inner 1px bezel */
.pane {
  background: var(--bg-sunken);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--bezel-pane);
  overflow: hidden;
  position: relative;
  margin: 0 0 8px;
}

/* Pane head — raised lip at the top. Carries the pane's identity (filename or shell). */
.pane__head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-pane-chrome);
  border-top: 1px solid var(--bezel-top);
  border-bottom: 1px solid var(--bezel-bot);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.50);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--type-3);
  letter-spacing: 0.02em;
  flex-wrap: nowrap;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.pane__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--type);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pane__title .modified {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prompt);
  flex-shrink: 0;
  /* Ring darker than the head bg seats the dot into the chrome */
  box-shadow: 0 0 0 2px oklch(20% 0.018 280);
}
.pane__lang {
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--keyword);
  border: 1px solid var(--line);
  border-radius: 2px;
  flex-shrink: 0;
}
.pane__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: var(--type-3);
  font-size: 9px;
  flex-shrink: 0;
}
.pane__meta {
  margin-left: auto;
  color: var(--type-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Pane body — recessed well between head and status. Double-hood inset shadow:
   head presses down + status presses up, so the body reads as fully clamped. */
.pane--term .pane__body {
  padding: 18px 22px 22px;
  margin: 0;
  background: var(--bg-sunken);
  font-family: var(--mono);
  box-shadow: var(--shadow-hood);
}
.pane--code .pane__body {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0;
  background: var(--bg-sunken);
  box-shadow: var(--shadow-hood);
}
.pane__gutter {
  padding: 18px 10px 22px 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--type-3);
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--line);
  white-space: pre;
  background: var(--bg-pane-gutter);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.pane__code {
  padding: 18px 18px 22px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--type-2);
  white-space: pre;
  margin: 0;
  overflow-x: auto;
  min-width: 0;
}
/* Strip pre-existing styles when a content block (.docstring, .intake__schema)
   lives inside a code pane — the pane handles bg/border/padding. */
.pane--code .pane__code,
.pane--code .docstring,
.pane--code .intake__schema {
  padding: 18px 18px 22px 18px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

/* Pane status row — raised lip at the bottom. Symmetric warm rim (top + bottom)
   so the pane's bottom outer edge pops just like the top. */
.pane__status {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 24px;
  padding: 0 14px;
  background: var(--bg-pane-chrome);
  border-top: 1px solid var(--bezel-top);
  border-bottom: 1px solid var(--bezel-top);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--type-3);
  flex-wrap: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.pane__status .seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pane__status .glyph {
  color: var(--keyword);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  line-height: 1;
}
.pane__status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--prompt);
  display: inline-block;
}
.pane__status .right { margin-left: auto; color: var(--type-2); }

/* ───── Sub-page header (Approach / Services / About / Insights / Book) ───── */
.page-head {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-head__crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--type-3);
  margin-bottom: 28px;
}
.page-head__crumb .sep { color: var(--line); }
.page-head__crumb a {
  color: var(--type-2);
  text-decoration: none;
}
.page-head__crumb a:hover { color: var(--prompt); }
.page-head__crumb .here { color: var(--type); }
.page-head h1 {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--type);
  margin: 0 0 24px;
  max-width: 22ch;
}
.page-head__lede {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--type-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.page-head__lede + .page-head__lede { margin-top: 12px; }

/* ───── Section break (used inside sub-pages) ───── */
.sect {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.sect:first-of-type { border-top: 0; }
.sect__head {
  display: flex;
  gap: 32px;
  align-items: baseline;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.sect__head h2 {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--type);
  margin: 0;
  max-width: 30ch;
}
.sect p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--type-2);
  max-width: 64ch;
  margin: 0 0 16px;
}
.sect p .accent { color: var(--prompt); }

/* Two-column layout used by Approach + Services details */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.split--narrow { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--wide   { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

/* ───── Service detail (Services page) ───── */
.svc {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.svc__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.svc__name {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--keyword);
}
.svc__name::before { content: "--"; color: var(--type-3); margin-right: 2px; }
.svc__meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--num);
}
.svc h2 {
  flex: 1 1 100%;
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--type);
  margin: 12px 0 0;
  max-width: 28ch;
}
.svc__lede {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--type-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 24px;
}
.svc__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  color: var(--type-2);
}
.svc__bullets li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  padding: 4px 0;
}
.svc__bullets li::before {
  content: "›";
  color: var(--prompt);
  font-family: var(--mono);
}

/* ───── Forms (Book a call) ───── */
.form-stack {
  display: grid;
  gap: 56px;
}
.form-section {
  display: grid;
  gap: 24px;
}
.form-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.form-section__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--type-3);
}
.form-section__name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prompt);
}
.form-section__title {
  flex: 1 1 100%;
  font-family: var(--sans);
  font-weight: 480;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--type);
  margin: 8px 0 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--type-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.field__label .req {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--num);
}
.field__label .opt {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--type-3);
}
.field__input,
.field__textarea,
.field__select {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--type);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 14px;
  height: 48px;
  width: 100%;
  transition: border-color 150ms var(--ease);
  appearance: none;
}
.field__textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
}
.field__select {
  background-image: linear-gradient(45deg, transparent 50%, var(--type-3) 50%),
                    linear-gradient(135deg, var(--type-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--type-3); }
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--prompt);
  box-shadow: 0 0 0 2px var(--prompt);
}
.field__hint {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--type-3);
  letter-spacing: 0.02em;
}
.field__hint::before { content: "// "; color: var(--comment); }

/* Error states */
.field--error .field__input,
.field--error .field__textarea,
.field--error .field__select {
  border-color: var(--alarm);
}
.field__error {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--alarm);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.field__error:empty { display: none; }

/* Network/server error region */
.form-net-error {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--alarm);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--alarm);
  background: transparent;
}
.form-net-error[hidden] { display: none; }

/* Multi-select chips */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--type);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-align: left;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
  cursor: pointer;
  width: 100%;
}
.chip__mark {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  position: relative;
}
.chip:hover { border-color: var(--prompt); }
.chip[aria-pressed="true"] {
  background: var(--bg-3);
  border-color: var(--prompt);
  color: var(--type);
}
.chip[aria-pressed="true"] .chip__mark {
  background: var(--prompt);
  border-color: var(--prompt);
}
.chip[aria-pressed="true"] .chip__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 38%, var(--bg) 38%, var(--bg) 50%, transparent 50%),
                    linear-gradient(-45deg, transparent 50%, var(--bg) 50%, var(--bg) 62%, transparent 62%);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: 3px 3px, 3px 3px;
}

/* Radio cards (urgency, AI familiarity) */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.radio-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 16px 14px;
  font-family: var(--mono);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__title {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--type);
  letter-spacing: 0.02em;
}
.radio-card__title::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  vertical-align: 1px;
  margin-right: 8px;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.radio-card__sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--type-3);
  margin-left: 19px;
}
.radio-card:hover { border-color: var(--prompt); }
.radio-card:has(input:checked) {
  border-color: var(--prompt);
  background: var(--bg-3);
}
.radio-card:has(input:checked) .radio-card__title::before {
  background: var(--prompt);
  border-color: var(--prompt);
  box-shadow: inset 0 0 0 2px var(--bg);
}

.form-foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.form-foot__note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--type-3);
  letter-spacing: 0.02em;
  max-width: 48ch;
}
.form-foot__note::before { content: "// "; color: var(--comment); }

/* Submission acknowledgement (hidden until form submits) */
.thanks {
  display: none;
  padding: 40px 0 80px;
  border-top: 1px solid var(--line);
}
.thanks.is-visible { display: block; }
.thanks h3 {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.thanks p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--type-2);
  max-width: 56ch;
  margin: 0 0 12px;
}

/* ───── Empty state (Insights, etc.) ───── */
.empty {
  padding: 72px 0 96px;
  border-top: 1px solid var(--line);
}
.empty__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.empty__copy h2 {
  font-family: var(--sans);
  font-weight: 480;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 22ch;
}
.empty__copy p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--type-2);
  max-width: 52ch;
  margin: 0 0 16px;
}
.empty__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.empty__list li {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--type-2);
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 14ch 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.empty__list .when {
  color: var(--type-3);
  letter-spacing: 0.04em;
  font-size: 11.5px;
}
.empty__list .what { color: var(--type); }
.empty__list .tag {
  font-size: 10.5px;
  color: var(--keyword);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ───── Practice listing (About) ───── */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 32px;
}
.principle__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--type-3);
}
.principle h3 {
  font-family: var(--sans);
  font-weight: 480;
  font-size: 18px;
  line-height: 1.25;
  margin: 8px 0 8px;
  color: var(--type);
}
.principle p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--type-2);
  margin: 0;
  max-width: 44ch;
}

/* Pull-quote (About) */
.pull {
  font-family: var(--sans);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--type);
  border-left: 2px solid var(--prompt);
  padding-left: 20px;
  margin: 40px 0;
  max-width: 38ch;
}
.pull__attr {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--type-3);
  margin-top: 14px;
  letter-spacing: 0.04em;
}
.pull__attr::before { content: "— "; }

/* ───── Responsive ───── */
@media (max-width: 800px) {
  .flag-row { grid-template-columns: 1fr; gap: 8px; }
  .flag-row__type { text-align: left; }
  .intake__row { grid-template-columns: 1fr; gap: 32px; }
  .foot__inner { grid-template-columns: 1fr 1fr; padding: 40px 16px 24px; }
  .foot__brand { grid-column: 1 / -1; }
  .split, .split--narrow, .split--wide { grid-template-columns: 1fr; gap: 32px; }
  .form-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .empty__inner { grid-template-columns: 1fr; gap: 32px; }
  .empty__list li { grid-template-columns: 11ch 1fr; }
  .empty__list .tag { grid-column: 2; }
  .svc__head { gap: 8px; }
  .svc__meta { margin-left: 0; }
}

@media (max-width: 700px) {
  .shell { padding: 0 16px; }
  .cmd { padding: 16px 16px; gap: 14px; }
  .cmd__cta { order: 1; }
  .cmd__links {
    order: 2;
    flex-basis: 100%;
    gap: 14px;
    font-size: 12px;
    padding-top: 4px;
  }
  .statusbar {
    gap: 10px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 0.05em;
    height: 26px;
  }
  .statusbar .seg.optional { display: none; }
  .statusbar .right { font-size: 9.5px; }
}

@media (max-width: 600px) {
  .pane__lang { display: none; }
  .pane__meta { font-size: 10px; }
  .pane--code .pane__body { grid-template-columns: 40px 1fr; }
  .pane__gutter { padding: 18px 6px 22px 8px; font-size: 11px; }
  .pane__status {
    gap: 10px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .pane__status .seg.optional { display: none; }
}