/* ─────────────────────────────────────────────────────────────
   GitTrove landing — self-contained design system
   Spacing scale: 4 8 12 16 24 32 48 64 96
   Grays are tinted toward the primary (185°); no pure gray, no pure black.
   ───────────────────────────────────────────────────────────── */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --bg:        #FBFCFD;
  --surface:   #FFFFFF;
  --sunken:    #F4F7F9;
  --line:      #E3EAEF;
  --line-soft: #EDF2F5;

  --ink:       #0F1D28;
  --ink-2:     #3D4F5C;
  --ink-3:     #64798A;
  --ink-4:     #8C9EAC;

  --primary:      #0B7B6B;
  --primary-dark: #075C50;
  --primary-tint: #E6F4F1;
  --primary-line: #B6DFD7;

  --amber:      #B45309;
  --amber-tint: #FEF6EC;
  --amber-line: #F2D9B8;

  --ok:      #147A4B;
  --ok-tint: #E7F5EE;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

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

  /* Two shadows, not one: tight for definition, wide and soft for depth. */
  --shadow-sm: 0 1px 2px rgba(15, 29, 40, .06), 0 1px 1px rgba(15, 29, 40, .04);
  --shadow:    0 2px 4px rgba(15, 29, 40, .05), 0 8px 20px -6px rgba(15, 29, 40, .10);
  --shadow-lg: 0 4px 8px rgba(15, 29, 40, .05), 0 24px 48px -16px rgba(15, 29, 40, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s6); }

a { color: inherit; }

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

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 640; letter-spacing: -.02em;
  text-decoration: none;
}
.brand svg { display: block; }
.nav-right { display: flex; align-items: center; gap: var(--s5); }
.nav-right a {
  font-size: 14px; font-weight: 500; color: var(--ink-3);
  text-decoration: none; transition: color .15s ease;
}
.nav-right a:hover { color: var(--ink); }
.nav-cta {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink) !important;
  transition: border-color .15s ease, transform .12s ease;
}
.nav-cta:hover { border-color: var(--ink-4); transform: translateY(-1px); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { padding: var(--s8) 0 var(--s9); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: var(--s8);
  /* Centred rather than top-aligned: the signup card is much taller than the
     panel stack, and starting both at the top dumped all the leftover height
     into one hole under the panels. Splitting it looks deliberate. */
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--amber-line);
  background: var(--amber-tint);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 560; letter-spacing: -.005em;
  color: var(--amber);
  margin-bottom: var(--s5);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: none;
  box-shadow: 0 0 0 3px rgba(180, 83, 9, .14);
}

h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.032em;
  margin-bottom: var(--s4);
}
h1 em { font-style: normal; color: var(--primary); }

.lede {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 33em;
  margin-bottom: var(--s6);
}
.lede b { font-weight: 600; color: var(--ink); }

/* ── The signup form ───────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow);
  max-width: 470px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-card:focus-within {
  border-color: var(--primary-line);
  box-shadow: var(--shadow), 0 0 0 4px rgba(11, 123, 107, .10);
}

.signup-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.signup-head h2 { font-size: 16.5px; font-weight: 620; letter-spacing: -.018em; }
.signup-head .price-tag {
  font-size: 13.5px; font-weight: 560; color: var(--ink-2); white-space: nowrap;
}
.signup-head .price-tag b { font-weight: 680; color: var(--ink); }

.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-size: 13px; font-weight: 560; letter-spacing: -.005em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 11px 12px;
  font: inherit; font-size: 15px;
  color: var(--ink);
  /* Declared explicitly: an input inside the dark final panel otherwise renders
     as a dark box, because form controls do not inherit those colours. */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 123, 107, .14);
}
.field input[aria-invalid="true"] {
  border-color: #E0A9A3;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .10);
}

/* Suggestion chip sits inline with the label so accepting it is one click and
   visible right where the user is already looking. */
.suggest {
  display: none;
  align-items: center; gap: 6px;
  margin-left: var(--s2);
  padding: 2px 8px;
  font: inherit; font-size: 12px; font-weight: 560;
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--primary-line);
  border-radius: 100px;
  cursor: pointer;
}
.suggest.on { display: inline-flex; }
.suggest:hover { background: #D8EEE9; }

.field-hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-4); margin-top: 6px; }
.field-hint.is-bad { color: #B42318; }
.field-hint.is-good { color: var(--ok); }

/* Strength meter: three segments, filled by length band. */
.meter { display: flex; gap: 4px; margin-top: 7px; }
.meter span {
  height: 3px; flex: 1; border-radius: 2px;
  background: var(--line);
  transition: background .18s ease;
}
.meter.s1 span:nth-child(1) { background: #D97706; }
.meter.s2 span:nth-child(-n+2) { background: #0B7B6B; }
.meter.s3 span { background: var(--ok); }

.err { display: none; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 13px; font-weight: 500; color: #B42318; }
.err.on { display: flex; }
.err svg { flex: none; margin-top: 2px; }

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%;
  margin-top: var(--s4);
  padding: 13px 20px;
  font: inherit; font-size: 15px; font-weight: 570; letter-spacing: -.01em;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* Inset highlight makes a flat button read as a physical, pressable thing. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(7, 92, 80, .30);
  transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .kbd-inline { opacity: .75; }
.btn-primary[disabled] { opacity: .6; cursor: progress; }

.form-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--line-soft);
  margin-top: var(--s5);
  font-size: 13px;
  color: var(--ink-3);
}
.trust-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; }
.trust-list li { display: inline-flex; align-items: center; gap: 6px; }
.tick { color: var(--ok); flex: none; }

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 11px; line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
}

.hint-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  font-size: 13px; color: var(--ink-4);
}
.hint-row .sep { color: var(--line); }

/* Rejection feedback: the whole card shakes once, so the error registers even
   if the message is below the fold on a small screen. */
.form-card.has-error { animation: shake .3s ease; border-color: #F3C0BB; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Two distinct names on purpose: `.done` is the success block, `.is-done` is
   the card's state. Reusing one class for both let the collapse rule apply to
   the card itself. Specificity is matched (0,3,0 vs 0,3,0) and `.form-card.is-done`
   comes later, so the reveal wins without !important. */
.done { display: none; padding: 0; }
.form-card.is-done {
  display: block;
  padding: 0;
}
.form-card.is-done > *:not(.done) { display: none; }
.form-card.is-done .done {
  display: block;
  padding: var(--s5) var(--s5) var(--s4);
}
.done-head { display: flex; align-items: flex-start; gap: var(--s3); }
.done-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok-tint); color: var(--ok);
}
.done h2 { font-size: 17px; font-weight: 620; letter-spacing: -.015em; margin-bottom: var(--s1); }
.done p { font-size: 14.5px; color: var(--ink-2); }
.done p + p { margin-top: var(--s2); }
.done-foot {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  font-size: 13px; color: var(--ink-3);
}
.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; font-weight: 550; color: var(--primary);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* ── Hero right: the product, actually shown ───────────────── */
.stack { position: relative; min-width: 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.panel + .panel { margin-top: var(--s4); }

.panel-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--sunken);
  font-size: 12.5px; color: var(--ink-3);
}
.panel-head .repo { font-weight: 560; color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.panel-head .spacer { flex: 1; }
.sha { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.head-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 560; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 100px;
}

.checks { list-style: none; padding: var(--s2) 0; }
.checks li {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4);
  font-size: 14px;
}
.checks li + li { border-top: 1px solid var(--line-soft); }
.check-icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
.check-name { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-state { font-size: 12.5px; font-weight: 560; color: var(--ok); flex: none; }
.badge-ctx {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
  flex: none;
}

.preview-panel .panel-head { background: var(--surface); border-bottom-color: var(--line); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(20, 122, 75, .16); flex: none;
}
.url {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4);
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
.url .scheme { color: var(--ink-4); }
.url .port { color: var(--primary); font-weight: 600; }
.url .spacer { flex: 1; }

.term {
  border-top: 1px solid var(--line-soft);
  background: #0E1A22;
  padding: var(--s4);
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.85;
  color: #C3D2DC;
  overflow-x: auto;
}
.term .p { color: #6FBFAD; }
.term .ok { color: #7BD8A8; }
.term .dim { color: #7A8C99; }
.term .warn { color: #E5B77A; }

/* ── Sections ──────────────────────────────────────────────── */
section { padding: var(--s9) 0; }
.sec-head { max-width: 40rem; margin-bottom: var(--s7); }
.sec-kicker {
  font-size: 12.5px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: var(--s3);
}
h2 {
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 680; line-height: 1.16; letter-spacing: -.026em;
  margin-bottom: var(--s3);
}
.sec-sub { font-size: 16.5px; color: var(--ink-2); max-width: 34em; }

.rule { height: 1px; background: var(--line); border: 0; }

/* Problem / before-after */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.ba-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  background: var(--surface);
}
.ba-card.is-before { background: var(--sunken); border-style: dashed; }
.ba-label {
  display: inline-block;
  font-size: 11.5px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: var(--s4);
}
.is-before .ba-label { color: var(--ink-4); }
.is-after .ba-label { color: var(--primary); }
.ba-card h3 { font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; margin-bottom: var(--s2); }
.ba-card p { font-size: 14.5px; color: var(--ink-2); }
.ba-card ul { list-style: none; margin-top: var(--s4); display: grid; gap: var(--s2); }
.ba-card li { display: flex; gap: var(--s2); font-size: 14.5px; color: var(--ink-2); }
.ba-card .mark { flex: none; }

/* A shared inline code chip, so bare values like deployment_scope=none read as
   identifier text everywhere instead of being re-styled at each use site. */
code {
  font-family: var(--mono); font-size: .88em;
  background: var(--sunken);
  border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 5px;
  white-space: nowrap;
  color: var(--ink-2);
}

/* Pricing — one plan, with the awkward truths given equal visual weight.
   The aside is deliberately not a muted footnote: caveats that look like fine
   print read as if they are hiding something. */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.plan-main { padding: var(--s6); }
.plan-aside {
  padding: var(--s6);
  background: var(--sunken);
  border-left: 1px solid var(--line);
}
.plan-price { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.plan-amount { font-size: 42px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.plan-cadence { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.plan-note { font-size: 14px; color: var(--ink-3); margin-bottom: var(--s5); }
.plan-list { list-style: none; display: grid; gap: var(--s3); }
.plan-list li { display: flex; gap: var(--s3); font-size: 14.5px; color: var(--ink-2); }
.plan-list .tick { margin-top: 3px; }

.plan-aside h3 {
  font-size: 12.5px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--s4);
}
.plan-caveats { list-style: none; display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.plan-caveats li {
  position: relative;
  padding-left: var(--s4);
  font-size: 14px; color: var(--ink-2);
}
.plan-caveats li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4);
}
.plan-caveats b { font-weight: 620; color: var(--ink); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: stretch; }
.step { position: relative; padding-top: var(--s5); border-top: 2px solid var(--ink); }
.step-n {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--primary); margin-bottom: var(--s3);
}
.step h3 { font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; margin-bottom: var(--s2); }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* Boundaries — honest scope, framed as engineering, not apology */
.bounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.bound {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bound h3 { font-size: 15px; font-weight: 620; letter-spacing: -.012em; margin-bottom: var(--s2); }
.bound p { font-size: 14px; color: var(--ink-2); }

/* What sells — three product shapes sharing one entitlement model. Cards, not
   a numbered sequence: these are alternatives, and numbering them would imply
   an order the reader is meant to follow. The proof line is pinned to the
   bottom of each card so the three claims sit on one line across the row. */
.sells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.sell {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.sell h3 { font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; }
.sell p { font-size: 14.5px; color: var(--ink-2); }
.sell-proof {
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-3);
}
.sell-proof b { font-weight: 620; color: var(--ink); }

/* FAQ */
.faq { max-width: 46rem; }
details {
  border-bottom: 1px solid var(--line);
}
summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0;
  font-size: 15.5px; font-weight: 560; letter-spacing: -.012em;
  cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary .chev { flex: none; color: var(--ink-4); transition: transform .2s ease; }
details[open] summary .chev { transform: rotate(180deg); }
details p { padding: 0 0 var(--s5); font-size: 14.5px; color: var(--ink-2); max-width: 42rem; }
details p + p { padding-top: 0; }

/* Final CTA */
.final {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--s9) var(--s8);
  text-align: center;
  color: #fff;
}
/* Direct children only. As plain descendant rules these also reached the
   signup card's own heading and field hints: "Create your account" rendered
   white on the card's white surface, so the closing form had no visible title
   at all despite carrying one in the markup. */
.final > h2 { color: #fff; max-width: 22em; margin: 0 auto var(--s4); }
.final > p { color: #A9BCC8; font-size: 16px; max-width: 32em; margin: 0 auto var(--s6); }
/* The card keeps its own light surface here, and its own ink. Inheriting the
   dark panel's background left the inputs reading dark-on-dark with a muddy
   placeholder; inheriting its colour was worse, because the card's own heading
   depends on the inherited value and rendered white on white. Resetting both
   properties fixes the whole class of leak rather than the one symptom. */
.final .form-card {
  margin: var(--s5) auto 0;
  text-align: left;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
.final .form-card:focus-within { box-shadow: var(--shadow-lg), 0 0 0 4px rgba(11, 123, 107, .35); }
.final .form-meta { border-top-color: var(--line-soft); }
.final .hint-row { justify-content: center; color: var(--ink-3); }
.final .hint-row .sep { color: var(--line); }
.final .linkish { color: var(--primary); }

/* Footer */
footer {
  padding: var(--s7) 0 var(--s8);
  font-size: 13.5px; color: var(--ink-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
}
footer .foot-links { display: flex; flex-wrap: wrap; gap: var(--s5); }
footer a { color: var(--ink-3); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.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;
}

/* ── Responsive: design for the small screen, don't just squeeze ── */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero { padding: var(--s7) 0 var(--s8); }
  .steps, .bounds, .sells { grid-template-columns: 1fr; gap: var(--s4); }
  .ba { grid-template-columns: 1fr; }
  .final { padding: var(--s8) var(--s5); }
  /* Stack the plan before the caveats read like an afterthought column. */
  .plan { grid-template-columns: 1fr; }
  .plan-aside { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .wrap { padding: 0 var(--s5); }
  section { padding: var(--s8) 0; }
  .btn-primary { padding: 14px 20px; }
  .form-meta { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .nav-right a:not(.nav-cta) { display: none; }
  /* The nowrap check name sets an intrinsic floor wider than the viewport and
     drags the whole hero grid with it. Let it wrap, and drop the redundant
     context chip — every row is "Local CI" anyway. */
  .check-name { white-space: normal; }
  .badge-ctx { display: none; }
  .step code { white-space: normal; }
  /* The card surface is nearly the same value as the page here, so an inset
     card reads as a misalignment rather than as a container. Go edge to edge
     and let every field line up with the rest of the text on the page. */
  .form-card { margin-left: 0; margin-right: 0; max-width: none; padding: var(--s5); }
  .plan-main, .plan-aside { padding: var(--s5); }

  /* Once these rows wrap, the interpunct separators are stranded next to a
     line break. Drop them and let the natural gaps do the separating. */
  .hint-row { gap: var(--s2) var(--s4); }
  .hint-row .sep { display: none; }
  .trust-list { flex-direction: column; gap: var(--s2); }
  .form-meta { justify-content: flex-start; }
  .final .hint-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   How it works — components for the pipeline explainer.
   Scoped under .howto so nothing here can reach the landing page,
   and built only from the tokens above: same spacing scale, same
   tinted grays, same two-shadow rule. No new palette.
   ───────────────────────────────────────────────────────────── */
.howto { --warn: #B45309; }
.howto .hero { padding: var(--s8) 0 var(--s7); }

/* The four stages, side by side, with the connector between them made
   explicit: a chevron in the gap. Without it the four read as a list
   rather than as a sequence that forks at the end. */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.stage {
  position: relative;
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
}
.stage-n {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--primary); margin-bottom: var(--s3);
}
.stage h3 { font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; margin-bottom: var(--s2); }
.stage p { font-size: 14.5px; color: var(--ink-2); }
.stage-cmd { margin-top: var(--s3); }
.stage-cmd code { font-size: 12px; }
/* No separator glyph in the gaps. The numbers already read as a sequence at
   12px, and a larger chevron sitting on the number's line read as a prefix on
   the following card rather than as a separator between two. Grid order and
   the 2px rules carry the sequence without it. */

/* The fork: one build, two destinations. */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s7); }
.lane {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.lane.is-prod { border-left: 3px solid var(--primary); }
.lane.is-stage { border-left: 3px solid var(--amber); }
.lane-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s3);
}
.lane-tag { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.lane-arrow { color: var(--ink-4); }
.lane-dest {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--ink); margin-left: auto;
}
.lane p { font-size: 14.5px; color: var(--ink-2); }
.lane p em { font-style: normal; font-weight: 620; color: var(--ink); }

/* The staging rule, with the reason it exists given equal weight to the
   rule itself. The aside is not fine print, so it is not styled as such. */
.rule-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.rule-card-main { padding: var(--s6); }
.rule-card-main h3 { font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; margin-bottom: var(--s5); }
.rule-card-aside {
  padding: var(--s6);
  background: var(--sunken);
  border-left: 1px solid var(--line);
  /* The panel is as tall as the four-item list beside it. Left to flow from
     the top, two short items left 42% of the tinted surface empty under the
     text, which read as a half-finished column rather than as a short one. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
}
.rule-card-aside h3 {
  font-size: 12.5px; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--s4);
}
.rule-card-aside .plan-caveats { margin-bottom: 0; }
.aside-foot {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.aside-foot code { font-size: 12px; }

.rule-states { list-style: none; display: grid; gap: var(--s4); }
.rule-states li { display: flex; gap: var(--s3); font-size: 14.5px; color: var(--ink-2); }
.rule-states b { font-weight: 620; color: var(--ink); }
.state-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 7px;
}
.state-dot.ok   { background: var(--ok);      box-shadow: 0 0 0 3px rgba(20, 122, 75, .14); }
.state-dot.skip { background: var(--ink-4);   box-shadow: 0 0 0 3px rgba(140, 158, 172, .18); }
.state-dot.bad  { background: #B42318;        box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); }

/* Reference table. Numbers and identifiers line up because they are
   tabular figures in the mono face, not because of a magic width. */
.table-scroll { overflow-x: auto; }
.ref {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-size: 14.5px;
}
.ref th, .ref td {
  text-align: left;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.ref thead th {
  font-size: 12.5px; font-weight: 620; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
}
.ref tbody th { font-weight: 560; color: var(--ink-3); white-space: nowrap; }
.ref td { color: var(--ink-2); }
.ref tbody tr:last-child th, .ref tbody tr:last-child td { border-bottom: 0; }
.ref code { white-space: nowrap; }

@media (max-width: 940px) {
  .stages { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5); }
  .lanes { grid-template-columns: 1fr; }
  .rule-card { grid-template-columns: 1fr; }
  .rule-card-aside { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .stages { grid-template-columns: 1fr; }
  .rule-card-main, .rule-card-aside { padding: var(--s5); }
  .ref th, .ref td { padding: var(--s3) var(--s4); }
  .ref tbody th { white-space: normal; }
}