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

:root {
  --bg:      #141311;
  --surface: #1e1c19;
  --border:  #2c2925;
  --border2: #3a3631;
  --text:    #ededed;
  --dim:     #555555;
  --dim2:    #333333;
  --accent:  #8a6d3b;
  --sans:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', 'Fira Mono', monospace;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── SHELL ── */
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* one column that may shrink below its content's natural width; without
     this a long <select> option or a wide table widens the whole page on a
     phone instead of wrapping or scrolling inside its own box */
  grid-template-columns: minmax(0, 1fr);
}

/* ── HEADER ── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--text);
  text-decoration: none;
}

.login-link, .logout-link,
.login-link:visited, .logout-link:visited {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.15s;
}
.login-link:hover, .logout-link:hover { color: var(--text); }

/* ── FOOTER ── */
.site-footer {
  padding: 1rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--dim2);
  letter-spacing: 0.08em;
}

/* ══════════════════════════════
   LANDING — CAROUSEL
══════════════════════════════ */

.landing-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 2.5rem 0;
}

.landing-enter {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s;
}
.landing-enter:hover {
  color: var(--text);
}

/* the way through to the workshop (partials/header.html): a control, not a hint.
   The old rule was --dim on --bg (about 2.4:1), so the icon was there but
   effectively invisible; this gives it a surface, an edge and a 44px target. */
.landing-spanner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.landing-spanner:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #26231f;
}
.landing-spanner:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.landing-spanner svg { display: block; width: 22px; height: 22px; }

.wip-title {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text);
}

.landing-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0 3rem;
  gap: 0;
  overflow: hidden;
}

/* focused video */
.carousel-stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 2rem;
}

.carousel-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 1100px;
  transition: none;
}

.carousel-item {
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1),
              opacity 0.45s cubic-bezier(0.4,0,0.2,1),
              transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.carousel-item.active {
  width: 60%;
  opacity: 1;
}

.carousel-item.side {
  width: 12%;
  opacity: 0.85;
}

.carousel-item.side:hover {
  opacity: 1;
  transform: scale(1.02);
}

.carousel-item video,
.carousel-item .carousel-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  object-fit: cover;
  background: var(--surface);
  border-radius: 8px;
}

.carousel-item .carousel-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.carousel-item.side .carousel-still {
  opacity: 1;
}

.carousel-item.active .carousel-still {
  opacity: 0;
}

.carousel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.carousel-placeholder span {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--dim2);
  text-transform: uppercase;
}

/* ══════════════════════════════
   LOGIN
══════════════════════════════ */

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 200px;
}

.gate-form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.5rem 0;
  outline: none;
  letter-spacing: 0.05em;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  border-radius: 0;
}
.gate-form input:focus { border-bottom-color: var(--text); }
.gate-form input::placeholder { color: var(--dim2); }

.gate-form button {
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0.6rem 0 0;
  cursor: pointer;
  text-align: right;
  transition: color 0.15s;
}
.gate-form button:hover { color: var(--text); }

.gate-error {
  font-size: 0.62rem;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-align: right;
  padding-top: 0.25rem;
}

/* ══════════════════════════════
   HOME
══════════════════════════════ */

.home-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 1rem;
  min-height: calc(100vh - 120px);
}

.card-grid {
  display: flex;
  gap: 2px;
  width: 100%;
  max-width: 860px;
}

.access-card {
  flex: 1;
  padding: 2rem 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}

.access-card:last-child { border-right: none; }

.access-card:hover {
  background: var(--surface);
}

.access-card.locked {
  opacity: 0.2;
  pointer-events: none;
}

.card-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.card-title {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 1rem;
  color: var(--dim);
  line-height: 1.65;
  flex: 1;
}

.card-arrow {
  font-size: 1rem;
  color: var(--dim2);
  align-self: flex-end;
}

/* ══════════════════════════════
   DEVELOPER AREA
══════════════════════════════ */

.dev-main {
  padding: 2.5rem 2rem 4rem;
  /* full width up to the cap: centred with auto margins alone, it would
     size itself to its widest child and push past a phone's screen */
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.dev-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.4rem;
}

.dev-heading {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

/* tabs */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--text); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* principle cards */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.principle-card {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.principle-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.principle-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.principle-body {
  font-size: 0.95rem;
  color: var(--dim);
  line-height: 1.75;
  flex: 1;
}

.principle-lineage {
  font-size: 0.82rem;
  color: var(--dim2);
  line-height: 1.6;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* protocols */
.protocols-intro {
  font-size: 0.72rem;
  color: var(--dim);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 2rem;
}

.proto-section { margin-bottom: 2rem; }

.proto-section-heading {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.proto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.proto-item {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.proto-item-name {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.proto-item-kind {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.35rem;
}

.proto-item-desc {
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.6;
}

.proto-item-caveat {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
}

.proto-item-link,
.proto-item-link:visited {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--dim2);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.15s;
}
.proto-item-link:hover { color: var(--text); }

/* repos */
.repo-grid { display: grid; gap: 0; border-top: 1px solid var(--border); }

.repo-card {
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.3rem 2rem;
  align-items: start;
  border-bottom: 1px solid var(--border);
}

.repo-card.primary .repo-name { color: var(--text); }

.repo-name {
  font-size: 0.9rem;
  color: var(--dim);
  letter-spacing: 0.06em;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 0.1rem;
}

.repo-implements {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--dim2);
  text-transform: uppercase;
  grid-column: 1;
  grid-row: 2;
}

.repo-desc {
  font-size: 0.95rem;
  color: var(--dim);
  line-height: 1.7;
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 560px;
}

.repo-desc code {
  font-family: var(--mono);
  background: var(--surface);
  color: var(--text);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  font-size: 0.85em;
  border: 1px solid var(--border2);
}

.repo-link,
.repo-link:visited {
  grid-column: 3;
  grid-row: 1;
  font-size: 0.72rem;
  color: var(--dim2);
  text-decoration: none;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color 0.15s;
  padding-top: 0.1rem;
}
.repo-link:hover { color: var(--text); }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .carousel-item.active { width: 80%; }
  .carousel-item.side { width: 8%; }
  .card-grid { flex-direction: column; gap: 0; }
  .access-card { border-right: none; border-bottom: 1px solid var(--border); }
  .repo-card { grid-template-columns: 1fr auto; }
  .repo-desc { grid-column: 1; grid-row: 3; }
  .repo-implements { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ══════════════════════════════
   APIS TAB
══════════════════════════════ */

/* intro line */
.apis-intro {
  font-size: 0.9rem;
  color: var(--dim);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* API service cards */
.api-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  margin-bottom: 3rem;
}

.api-card {
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 160px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.3rem 2rem;
  align-items: start;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.api-card:hover { background: var(--surface); }
.api-card.open  { background: var(--surface); }

.api-card-name {
  font-size: 0.9rem;
  color: var(--text);
  letter-spacing: 0.06em;
  grid-column: 1;
  grid-row: 1;
  padding-top: 0.1rem;
}

.api-card-kind {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--dim2);
  text-transform: uppercase;
  grid-column: 1;
  grid-row: 2;
}

.api-card-desc {
  font-size: 0.95rem;
  color: var(--dim);
  line-height: 1.7;
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 560px;
}

.api-card-toggle {
  grid-column: 3;
  grid-row: 1;
  font-size: 0.72rem;
  color: var(--dim2);
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding-top: 0.1rem;
  transition: color 0.15s;
  user-select: none;
}
.api-card:hover .api-card-toggle { color: var(--text); }

/* swagger drawer */
.swagger-drawer {
  display: none;
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 0.5rem;
  margin-top: 0.75rem;
}
.api-card.open .swagger-drawer { display: block; }

.swagger-heading {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 1rem;
}

.endpoint-list { display: flex; flex-direction: column; gap: 0.4rem; }

.endpoint {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0 1rem;
  align-items: start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.endpoint:hover { border-color: var(--border2); background: #1c1a17; }
.endpoint.ep-open { border-color: var(--border2); background: #1c1a17; }

.ep-method {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.05rem;
}
.ep-method.get    { color: #4a9eff; }
.ep-method.post   { color: #3dd68c; }
.ep-method.head   { color: #b88cff; }

.ep-path {
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.ep-path .ep-param { color: #4a9eff; }

.ep-summary {
  font-size: 0.78rem;
  color: var(--dim);
  text-align: right;
  padding-top: 0.05rem;
  white-space: nowrap;
}

/* expanded endpoint detail */
.ep-detail {
  display: none;
  grid-column: 1 / -1;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}
.endpoint.ep-open .ep-detail { display: block; }

.ep-desc {
  font-size: 0.88rem;
  color: var(--dim);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.ep-params-heading {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 0.5rem;
}

.ep-param-row {
  display: grid;
  grid-template-columns: 160px 80px 1fr;
  gap: 0 1rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}
.ep-param-name { color: var(--text); }
.ep-param-type { color: var(--dim2); font-size: 0.75rem; padding-top: 0.06rem; }
.ep-param-desc { color: var(--dim); }

.ep-response-heading {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.ep-response-block {
  background: #0c0b0a;
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  color: #3dd68c;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

/* repo card GitHub link + schema link */
.repo-schema-link,
.repo-schema-link:visited {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: var(--dim2);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.15s;
}
.repo-schema-link:hover { color: var(--text); }

/* expandable repo cards (code example drawer) */
.repo-expand-toggle {
  grid-column: 1;
  grid-row: 3;
  font-size: 0.72rem;
  color: var(--dim2);
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  padding-top: 0.5rem;
  transition: color 0.15s;
}
.repo-card--expandable:hover .repo-expand-toggle { color: var(--text); }

.repo-code-drawer { display: none; grid-column: 1 / -1; }
.repo-card--expandable.open .repo-code-drawer { display: block; }
.repo-card--expandable.open .repo-expand-toggle { color: var(--text); }

.repo-code {
  margin-top: 0.75rem;
  background: #0c0b0a;
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  color: #3dd68c;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  display: block;
}

@media (max-width: 700px) {
  .api-card { grid-template-columns: 1fr auto; }
  .api-card-desc { grid-column: 1; grid-row: 3; }
  .api-card-kind { grid-row: 2; }
  .endpoint { grid-template-columns: 54px 1fr; }
  .ep-summary { display: none; }
  .ep-param-row { grid-template-columns: 120px 1fr; }
  .ep-param-type { display: none; }
}

/* ══════════════════════════════
   HOME — VORTEX BAND
══════════════════════════════ */

.vortex-band {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--bg);
}
.vortex-band canvas#vortex {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════
   REPO ACTIONS + READABILITY
   (appended last so it wins on source order; grid-aware overrides
    of the base .repo-link / .repo-expand-toggle)
══════════════════════════════ */

/* Lift the text off the background — the base greys sit too close to --bg */
.repo-desc       { color: var(--body); }       /* was var(--dim)  #555 */
.repo-implements { color: var(--dim); }        /* was var(--dim2) #333 */

/* Primary CTA — the actual repo. Filled accent button, dark text. */
.repo-card > .repo-link,
.repo-card > .repo-link:visited {
  align-self: center;
  justify-self: end;
  display: inline-block;
  padding: 0.65rem 1.35rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.15s;
}
.repo-card > .repo-link:hover {
  color: var(--bg);
  filter: brightness(1.2);
  transform: translateY(-1px);
}

/* Secondary CTA — reveal the code. Outlined accent button. */
.repo-card--expandable > .repo-expand-toggle {
  justify-self: start;
  align-self: center;
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.65rem 1.35rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.repo-card--expandable:hover > .repo-expand-toggle,
.repo-card--expandable > .repo-expand-toggle:hover {
  color: var(--text);
  background: rgba(138, 109, 59, 0.16);
}

/* Coming-soon — same footprint as the GitLab button, but muted + outlined
   so it reads as the pending version of the pill, not a clickable one. */
.repo-card > .repo-status {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 0.65rem 1.35rem;
  white-space: nowrap;
  pointer-events: none;
}

/* keep the buttons placed sensibly on the 2-col mobile grid */
@media (max-width: 700px) {
  .repo-card > .repo-link,
  .repo-card > .repo-status { grid-column: 2; }
  .repo-card--expandable > .repo-expand-toggle { grid-column: 1; grid-row: 4; }
}

/* ══════════════════════════════
   SITE CONTRAST — lift text off the near-black background
   (appended last; the same lift applied to the repos tab, site-wide)
══════════════════════════════ */

:root {
  --body: #a29a8d;   /* readable body copy — the greys were sitting on --bg */
  --dim2: #6b665c;   /* quiet labels / idle links — was #333, near-invisible */
  --bad:  #c98a7e;   /* a refusal, a failure, an empty battery */
}

/* Body copy across every tab → the readable warm grey */
.principle-body,
.card-desc,
.proto-item-desc,
.api-card-desc,
.apis-intro,
.protocols-intro,
.ep-desc,
.ep-param-desc {
  color: var(--body);
}

/* ══════════════════════════════
   REPO PAPER / STANDARD LINK
   quiet secondary reference under the GitLab button (or Coming-soon chip)
══════════════════════════════ */
.repo-card > .repo-paper,
.repo-card > .repo-paper:visited {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--dim2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.repo-card > .repo-paper:hover { color: var(--text); }

@media (max-width: 700px) {
  .repo-card > .repo-paper { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* ══════════════════════════════
   SOLUTIONS
══════════════════════════════ */

/* three cards need more room than the original two */
.card-grid:has(> .access-card:nth-child(3)) { max-width: 900px; }

/* ── HERO: the loop, and four words ── */
.solutions-hero {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 3rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--border);
}

.solutions-hero-title {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 2.5rem;
}

.loop-figure {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 1rem;

  /* Loop-local tokens, mapped from the site palette. The reference used a
     blue accent; everything here derives from the gold and warm greys so the
     diagram sits inside the page rather than on top of it.

     The idle weights sit two steps above --border on purpose: the previous
     values (#2c2925 stroke on a #1e1c19 card) were the same colour to the
     eye, so the diagram read as a black box with a few gold dots. */
  --node-off:   var(--dim2);
  --node-on:    var(--accent);
  --node-glow:  rgba(138, 109, 59, 0.55);
  --edge-live:  rgba(138, 109, 59, 0.5);
  --edge-idle:  var(--border2);
  --box-stroke: var(--border2);
}

/* The SVG carries only a viewBox, so derive its height explicitly rather
   than relying on the browser inferring an intrinsic ratio from it. Without
   this the element can collapse to zero height and the figure renders as an
   empty dark panel. */
.loop-figure svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 360;
}

/* ── cluster boundaries ── */
.cluster-box {
  fill: rgba(255, 255, 255, 0.02);
  stroke: var(--box-stroke);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  rx: 8;
}

.cluster-label {
  fill: var(--body);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-anchor: middle;
}

/* ── edges inside a cluster: live ones flow, idle ones don't ── */
.network-edge {
  stroke: var(--edge-idle);
  stroke-width: 1;
}
.network-edge.active {
  stroke: var(--edge-live);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  animation: internalFlow 3s linear infinite;
}
@keyframes internalFlow { to { stroke-dashoffset: -16; } }

/* ── the loop between clusters ── */
.inter-cluster-edge {
  stroke: var(--border2);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  animation: flowDash 20s linear infinite;
}
@keyframes flowDash { to { stroke-dashoffset: -100; } }

/* ── nodes, on and off ── */
.sub-node {
  fill: var(--node-off);
  transition: fill 0.4s, filter 0.4s;
}
.sub-node.active {
  fill: var(--node-on);
  filter: drop-shadow(0 0 6px var(--node-glow));
}

.packet {
  fill: var(--text);
  filter: drop-shadow(0 0 8px var(--node-glow));
}

/* motion is decoration; drop it for readers who ask */
@media (prefers-reduced-motion: reduce) {
  .network-edge.active,
  .inter-cluster-edge { animation: none; }
  .packet { display: none; }
}

/* ── THE ARGUMENT, REVEALED ON SCROLL ── */
.solutions-intro {
  font-size: 0.95rem;
  color: var(--body);
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: 1.4rem;
}

.solutions-lead {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  max-width: 640px;
  margin: 2.5rem 0 1rem;
}

.levels {
  list-style: none;
  max-width: 640px;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.levels li {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  background: var(--bg);
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.lvl-n { color: var(--accent); }
.lvl-v { color: var(--text); }
.lvl-d { color: var(--body); font-size: 0.8rem; text-align: right; }

.solutions-claim {
  font-size: 1rem;
  color: var(--text);
  max-width: 640px;
  margin: 0 0 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ── TOOLING COMPARISON ── */
.solutions-table-wrap { overflow-x: auto; }

.solutions-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

.solutions-table th,
.solutions-table td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.solutions-table th {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  border-bottom: 1px solid var(--border2);
}

.solutions-table td { color: var(--body); }
.solutions-table td:first-child { color: var(--text); }
.solutions-table td:last-child { color: var(--dim); white-space: nowrap; }

.solutions-table .solutions-total td {
  color: var(--text);
  font-weight: 500;
  border-top: 1px solid var(--border2);
  border-bottom: none;
}

@media (max-width: 700px) {
  .solutions-hero { min-height: 56vh; }
  .levels li { grid-template-columns: 2.2rem 1fr; }
  .lvl-d { grid-column: 2; text-align: left; }
}

/* ══════════════════════════════
   SOLUTIONS — TRAINING PLANNER
══════════════════════════════ */

/* a card that leaves the page rather than opening a drawer */
.api-card--link { text-decoration: none; }

.planner-intro {
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.planner-step { margin-bottom: 2.5rem; }

.planner-step-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 1rem;
}

/* one hairline grid, same joinery as .levels and .principles-grid */
.planner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.planner-check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.15s;
}
.planner-check:hover { background: var(--surface); }

.planner-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0.3rem 0 0;
  border: 1px solid var(--border2);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}
.planner-check input:checked { border-color: var(--accent); }
.planner-check input:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
}
.planner-check input:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
}

.planner-check-text { display: flex; flex-direction: column; gap: 0.1rem; }
.planner-check-name { font-size: 0.85rem; color: var(--text); }
.planner-check-role { font-family: var(--mono); font-size: 0.72rem; color: var(--dim2); }

.planner-select {
  width: 100%;
  max-width: 640px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
}
.planner-select:focus { outline: none; border-color: var(--accent); }

.planner-note {
  font-size: 0.72rem;
  color: var(--dim2);
  line-height: 1.6;
  max-width: 640px;
  margin-top: 0.6rem;
}

@media (max-width: 700px) {
  .planner-grid { grid-template-columns: 1fr; }
}

/* ── SOLUTIONS LANDING: the statement, then two links ── */
.solutions-statement {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--text);
  max-width: 640px;
  margin-bottom: 1.4rem;
}

.solutions-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.solutions-links a,
.solutions-links a:visited {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 0.65rem 1.35rem;
  transition: border-color 0.15s, color 0.15s;
}
.solutions-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ══════════════════════════════
   SOLUTIONS — MATURITY REVEAL
   native <details>: no JS, keyboard-accessible for free
══════════════════════════════ */

.maturity {
  max-width: 640px;
  margin: 0 0 2.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
}

.maturity-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;                 /* kill the default disclosure triangle */
  transition: background 0.15s;
}
.maturity-summary::-webkit-details-marker { display: none; }
.maturity-summary:hover { background: var(--surface); }
.maturity-summary:focus-visible { outline: 1px solid var(--text); outline-offset: -1px; }

.maturity-title {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* the &rarr; doubles as the affordance: rotates to point down when open */
.maturity-caret {
  flex: none;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--dim2);
  transition: transform 0.2s, color 0.15s;
}
.maturity-summary:hover .maturity-caret { color: var(--text); }
.maturity[open] .maturity-caret { transform: rotate(90deg); color: var(--accent); }

/* the stage blurbs are full sentences, so they take the whole row instead of
   the nowrap right-hand column .levels uses for its short descriptors */
.maturity-levels {
  border: none;
  border-radius: 0;
  margin: 0;
  /* .levels draws its dividers as a 1px grid gap backed by --border, which
     sits on the same pixel as our li border-top and swallows it. Collapse the
     gap so the row borders are the only line at each seam. */
  gap: 0;
}
.maturity-levels li {
  grid-template-columns: 2.5rem 1fr;
  border-top: 1px solid var(--border);
  padding: 0.9rem 1rem;
}
/* the box already provides the top edge; a row border here would double it */
.maturity-levels li:first-child { border-top: none; }

/* larger stage names; the number tracks them so the row stays aligned */
.maturity-levels .lvl-n { font-size: 1.25rem; }
.maturity-levels .lvl-v { font-size: 1.25rem; }

/* condensed blurbs: tighter leading, slight negative tracking, pulled up
   under the name rather than floating in a narrow right-hand column */
.maturity-levels .lvl-d {
  grid-column: 2;
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  max-width: 58ch;
  margin-top: 0.25rem;
}

/* the seam between development-side stages (01–02) and production-side
   stages (03–05). Stays in the same neutral family as the other seams and
   steps up exactly one shade (--border → --border2): a gold/accent line here
   reads as a different kind of rule, not the same one emphasised. */
.maturity-levels li.maturity-split {
  border-top-color: var(--border2);
}

/* ══════════════════════════════
   SOLUTIONS — DEPLOYMENT — THE BOARD
   A worked example. It keeps the page's palette and type, and runs its
   own board surfaces so a reader can tell it apart from the site chrome
   and read it as a demonstration rather than a live screen.
══════════════════════════════ */

/* the opening statement, set as a quotation */
.deploy-quote {
  max-width: 640px;
  margin: 0 0 2.5rem;
  padding: 0.15rem 0 0.15rem 1.25rem;
  border-left: 2px solid var(--accent);
}
.deploy-quote p {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text);
}

/* two short explanations, side by side */
.deploy-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.deploy-split h2 {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.deploy-split p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--body);
}

/* the one-line result */
.deploy-callout {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 2rem 0 2.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--body);
}
.deploy-callout strong { font-weight: 400; color: var(--text); }

/* the four areas under watch */
.deploy-sites {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.deploy-site {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.deploy-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}
.deploy-bar h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
}
.deploy-bar button {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.deploy-bar button:hover { color: var(--text); }

/* ── the four columns ── */
.deploy-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 0.75rem;
  align-items: start;
}
.deploy-col {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-height: 210px;
}
.deploy-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.deploy-count {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--body);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 0.35rem;
}
.deploy-cards {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-height: 100px;
}
.deploy-cards.over {
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
}

/* ── a case ── */
.deploy-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  display: grid;
  gap: 0.4rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.deploy-card:hover { border-color: var(--border2); }
.deploy-card.dragging { opacity: 0.4; }

.deploy-card-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--dim);
}
.deploy-card-top b { font-weight: 400; color: var(--body); }

.deploy-card-title {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
}

.deploy-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--dim);
}

/* ── the card, opened ── */
.deploy-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 7, 6, 0.75);
}
.deploy-modal[hidden] { display: none; }

.deploy-modal-box {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}
.deploy-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  background: none;
  border: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.deploy-modal-close:hover { color: var(--text); }

.deploy-modal-head { display: grid; gap: 0.35rem; padding-right: 1.5rem; }
.deploy-modal-head h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}

/* the frame the case was seen in */
.deploy-frame {
  position: relative;
  height: 11rem;
  border: 1px solid var(--border2);
  border-radius: 5px;
  background: #0c0b0a;
  display: grid;
  place-items: center;
}
.deploy-frame-mark {
  display: grid;
  gap: 0.3rem;
  width: 46%;
  height: 58%;
  padding: 0.35rem;
  border: 1px dashed var(--accent);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--accent);
  align-content: space-between;
}
.deploy-frame-tag {
  position: absolute;
  bottom: 0.5rem;
  right: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--dim);
}

.deploy-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.8rem 0.9rem;
}
.deploy-kv dt {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.2rem;
}
.deploy-kv dd { margin: 0; font-size: 0.85rem; color: var(--text); }

.deploy-field { display: grid; gap: 0.35rem; }
.deploy-field label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.deploy-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.55rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
}
.deploy-field textarea:focus { outline: none; border-color: var(--accent); }
.deploy-brief {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--body);
}

.deploy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.deploy-actions button {
  font-family: var(--mono);
  font-size: 0.72rem;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  transition: filter 0.15s;
}
.deploy-actions button:hover { filter: brightness(1.15); }
.deploy-actions span {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
  align-self: center;
}

.deploy-strip {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim2);
}

@media (max-width: 700px) {
  .deploy-board { grid-template-columns: minmax(0, 1fr); }
  .deploy-col { min-height: 0; }
}

/* ══════════════════════════════
   SOLUTIONS — DEPLOYMENT — THE EXHIBIT
   Everything above is the site. The board is a different product, so it
   sits in a frame and runs its own tokens: cooler greys and a blue accent,
   taken from that product rather than from this page. The .deploy-* rules
   above read --bg, --surface, --border, --text and --accent, so inside
   .deploy-app they all repaint from this block and from nowhere else.
══════════════════════════════ */

.deploy-example {
  margin: 2.5rem 0 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.deploy-example-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.deploy-example-tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0.1rem 0.45rem;
}

.deploy-example-title {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--text);
}

.deploy-example-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--dim2);
}

.deploy-example-foot {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--dim2);
}

.deploy-example-foot a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--border2); }
.deploy-example-foot a:hover { color: var(--text); }

/* ── the exhibited product's own palette ── */
.deploy-app {
  --bg:      #0b1116;
  --surface: #141c24;
  --border:  #24313d;
  --border2: #34465a;
  --text:    #dfe7ee;
  --body:    #8fa1b2;
  --dim:     #5f7183;
  --dim2:    #44566a;
  --accent:  #5c9fd6;

  /* used by the backbone exhibit only */
  --well:    #070d16;
  --term:    #050a12;
  --ok:      #3f8f66;
  --warn:    #7d6bb0;
  --bad:     #a8544c;

  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  padding: 0.9rem 1.1rem 1rem;
}

/* cards lift off the panel rather than sinking into it */
.deploy-app .deploy-card { background: var(--surface); }
.deploy-app .deploy-frame { background: #060a0e; }
.deploy-app .deploy-modal-box { background: var(--surface); }

/* the product's own chrome, above the board */
.deploy-appbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.deploy-appbar-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4c9a6d;
}

.deploy-appbar-name {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

.deploy-appbar-sep { color: var(--border2); }
.deploy-appbar-sub { color: var(--dim); }

.deploy-appbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.deploy-appbar-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  color: var(--body);
}

.deploy-appbar-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s;
}
.deploy-appbar-btn:hover { color: var(--text); }

@media (max-width: 700px) {
  .deploy-example-meta { margin-left: 0; }
}

/* ══════════════════════════════
   SOLUTIONS — DEPLOYMENT — THE BACKBONE
   The second exhibit: the rollout that puts a model on the device. Same
   frame and same product palette as the board above, with its own parts.
   Everything here reads the tokens set by .deploy-app.
══════════════════════════════ */

.bb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bb-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  transition: filter 0.15s, border-color 0.15s, color 0.15s;
}
.bb-btn:hover { filter: brightness(1.15); }
.bb-btn[disabled] { opacity: 0.45; cursor: default; filter: none; }

.bb-btn.is-ghost {
  background: transparent;
  color: var(--body);
  border-color: var(--border2);
}
.bb-btn.is-ghost:hover { color: var(--text); border-color: var(--accent); filter: none; }

.bb-btn.is-danger {
  background: transparent;
  color: #d9736a;
  border-color: var(--bad);
}
.bb-btn.is-danger:hover { background: rgba(168, 84, 76, 0.14); filter: none; }

.bb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  gap: 0.75rem;
  align-items: start;
}
@media (max-width: 820px) { .bb-grid { grid-template-columns: minmax(0, 1fr); } }

.bb-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem;
  min-width: 0;
}

.bb-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.6rem;
}

/* ── the network, drawn rather than mapped ── */
.bb-map {
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.4rem;
  margin-bottom: 0.6rem;
}
.bb-map svg { display: block; width: 100%; height: auto; }

.bb-ring {
  fill: rgba(92, 159, 214, 0.07);
  stroke: var(--accent);
  stroke-opacity: 0.35;
  stroke-dasharray: 3 3;
}
.bb-line { stroke: var(--border2); stroke-width: 2; stroke-dasharray: 4 4; }
.bb-line.on { stroke: var(--accent); animation: bbDash 1s linear infinite; }
@keyframes bbDash { to { stroke-dashoffset: -16; } }

.bb-hq   { fill: var(--accent); }
.bb-unit { fill: var(--dim); stroke: var(--surface); stroke-width: 2; transition: fill 0.35s; }
.bb-unit.shadow { fill: var(--warn); }
.bb-unit.ok     { fill: var(--ok); }
.bb-unit.bad    { fill: var(--bad); }

.bb-map-label { fill: var(--text); font-family: var(--sans); font-size: 12px; font-weight: 600; text-anchor: middle; }
.bb-map-sub   { fill: var(--dim2); font-family: var(--mono); font-size: 10px; text-anchor: middle; }

.bb-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--dim);
}

.bb-term {
  background: var(--term);
  border-radius: 5px;
  padding: 0.7rem 0.8rem;
  height: 150px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: #6cc79a;
  white-space: pre-wrap;
}
.bb-term .bad { color: #e08a80; }

/* ── the gates ── */
.bb-gates { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 3px; }
.bb-gates li {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--dim);
  transition: border-color 0.15s, color 0.15s;
}
.bb-gates li.now  { border-color: var(--accent); color: var(--text); }
.bb-gates li.pass { border-color: var(--ok);  color: #6cc79a; }
.bb-gates li.fail { border-color: var(--bad); color: #e08a80; }

/* ── the fleet ── */
.bb-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  color: var(--body);
}
.bb-gen {
  font-family: var(--mono);
  font-size: 0.62rem;
  border-radius: 3px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  white-space: nowrap;
}
.bb-gen.is-new    { background: rgba(63, 143, 102, 0.22);  color: #6cc79a; }
.bb-gen.is-shadow { background: rgba(125, 107, 176, 0.22); color: #a793d8; }
.bb-gen.is-bad    { background: rgba(168, 84, 76, 0.22);   color: #e08a80; }

/* ── the field-trial cards, in page scope ── */
.bb-link,
.bb-link:visited {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.bb-link:hover { border-bottom-color: var(--accent); }

/* the field-trial photo. It sits on a card in the page's own scope, not
   inside the exhibit, so it takes a plain name and the site's border. */
.thumb {
  display: block;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border2);
  border-radius: 4px;
  margin: 0 0 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
  .bb-line.on { animation: none; }
}

/* ══════════════════════════════
   SOLUTIONS — COST MODEL
   The Training planner's controls, plus a plain-SVG chart drawn by
   js/cost_model.js. Series colours are set here, not in the script.
══════════════════════════════ */

.cm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem 1.25rem;
  max-width: 640px;
  margin-top: 1rem;
}
.planner-step > .cm-fields:first-of-type { margin-top: 0; }

.cm-field { display: grid; gap: 0.4rem; }

.cm-field-label,
.cm-subhead {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim2);
}
.cm-subhead { margin: 1.4rem 0 0.6rem; }

/* the planner grid sized to however many choices there are: columns that
   would sit empty collapse, so no row ends in a blank cell */
.cm-choices { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* radio buttons reuse the planner checkbox, drawn round */
.planner-check input[type="radio"] { border-radius: 50%; }
.planner-check input[type="radio"]:checked::after { border-radius: 50%; }

.cm-range {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 640px;
  margin-top: 1rem;
}
.cm-range[hidden] { display: none; }
.cm-range input { flex: 1; accent-color: var(--accent); }
.cm-range output { font-family: var(--mono); font-size: 0.85rem; color: var(--text); min-width: 2.5rem; text-align: right; }

.cm-summary {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--body);
  margin-bottom: 0.75rem;
}

.cm-chart {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 0.5rem 0.25rem 0.25rem;
  margin-bottom: 1.25rem;
}
.cm-chart svg { display: block; width: 100%; height: auto; }

.cm-phase       { fill: var(--surface); }
.cm-phase-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--dim2); }
.cm-grid        { stroke: var(--border); stroke-width: 1; }
.cm-tick        { font-family: var(--mono); font-size: 10px; fill: var(--dim2); }

.cm-line        { stroke-width: 1.5; fill: none; opacity: 0.55; stroke-linecap: round; }
.cm-line.is-selected { stroke-width: 2.5; opacity: 1; }
.cm-labelling   { stroke: var(--accent); stroke-width: 2.5; opacity: 1; }
.cm-rig         { stroke-dasharray: 5 4; }

.cm-deploy       { stroke: var(--dim2); stroke-width: 1; stroke-dasharray: 2 3; }
.cm-marker       { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.cm-marker-label { font-family: var(--mono); font-size: 10px; fill: var(--body); }

/* series: the rig first, then each chosen cloud in order */
.cm-series-0 { stroke: #d8d2c6; background: #d8d2c6; }
.cm-series-1 { stroke: #6f9fb8; background: #6f9fb8; }
.cm-series-2 { stroke: #7fae8c; background: #7fae8c; }
.cm-series-3 { stroke: #b07c9e; background: #b07c9e; }
.cm-series-4 { stroke: #c9a35a; background: #c9a35a; }
.cm-series-5 { stroke: #8c8cc4; background: #8c8cc4; }

.cm-swatch {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin: 0 0.6rem 0.2rem 0;
  vertical-align: middle;
}

.cm-table .cm-row { cursor: pointer; }
.cm-table .cm-row:hover td { background: var(--surface); }
.cm-table .cm-row.is-selected td { color: var(--text); }
.cm-table .cm-row:focus-visible { outline: 1px solid var(--text); outline-offset: -1px; }

.cm-messages { list-style: none; margin-top: 0.6rem; max-width: 640px; }
.cm-messages li {
  font-size: 0.75rem;
  color: var(--body);
  line-height: 1.6;
  padding-left: 1rem;
  position: relative;
}
.cm-messages li::before { content: "–"; position: absolute; left: 0; color: var(--dim2); }
.cm-messages li.is-error { color: #c98a7e; }

/* the explanation: a button until asked, then a short list */
.cm-explain { margin-top: 1.75rem; max-width: 640px; }
.cm-explain-btn {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cm-explain-btn:hover { color: var(--accent); border-color: var(--accent); }
.cm-explain-btn:disabled { opacity: 0.5; cursor: default; }
.cm-explain-btn[hidden] { display: none; }
.cm-explain-body .cm-subhead { margin-top: 0; }
.cm-explain-list { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 0.4rem; }
.cm-explain-list li {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--body);
  padding-left: 1rem;
  border-left: 1px solid var(--accent);
}
.cm-explain-list li.is-error { color: #c98a7e; border-left-color: #c98a7e; }

/* on a phone the five-column table has to fit, so it tightens and its
   headings wrap rather than pushing the page sideways */
@media (max-width: 700px) {
  .cm-table { font-size: 0.78rem; }
  .cm-table th, .cm-table td { padding: 0.5rem 0.35rem; }
  .cm-table th { white-space: normal; letter-spacing: 0.08em; }
  .cm-swatch { display: none; }
  .cm-choices { grid-template-columns: 1fr; }
}

/* ══════════════════════════════
   LARGER TYPE — .page-large
   The rest of the site sits at 9–13px. Pages marked .page-large read at
   15–19px with body copy in Inter and mono kept for labels, names and
   numbers. Written as one block so it can later move to the whole site.
══════════════════════════════ */

.page-large { max-width: 1080px; }
.page-large .dev-eyebrow { font-size: 0.75rem; letter-spacing: 0.16em; margin-bottom: 0.6rem; }
.page-large .dev-eyebrow a { color: var(--dim2); text-decoration: none; border-bottom: 1px solid var(--border2); }
.page-large .dev-eyebrow a:hover { color: var(--text); }
.page-large .dev-heading { font-size: 2.4rem; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 1.25rem; }

.page-large .lead {
  font-family: var(--sans);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 44rem;
  margin-bottom: 3rem;
}

.page-large .mono { font-family: var(--mono); }

/* ── HOSTING ── */
.hosting-step { margin-bottom: 3.5rem; }

.hosting-step-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 1.25rem;
}

.hosting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.9rem;
}

.hosting-choice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hosting-choice:hover { border-color: var(--border2); }
.hosting-choice:has(input:checked) { border-color: var(--accent); }

.hosting-choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  border: 1px solid var(--border2);
  border-radius: 4px;
  cursor: pointer;
}
.hosting-choice input:checked { border-color: var(--accent); background: var(--accent); }
.hosting-choice input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hosting-choice input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.hosting-choice-text { display: grid; gap: 0.35rem; }
.hosting-choice-name { font-family: var(--sans); font-size: 1.1rem; font-weight: 500; color: var(--text); }
.hosting-choice-summary { font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; color: var(--body); }
.hosting-choice-tool { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); margin-top: 0.15rem; }

.hosting-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 1rem;
}
.hosting-table th,
.hosting-table td {
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.hosting-table th {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim2);
  white-space: nowrap;
  border-bottom-color: var(--border2);
}
.hosting-table td { color: var(--body); }
.hosting-table td:first-child { color: var(--text); }
.hosting-table td.mono { font-size: 0.9rem; }
.hosting-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hosting-table a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border2); }
.hosting-table a:hover { border-bottom-color: var(--accent); }
.hosting-total td {
  color: var(--text);
  font-weight: 600;
  border-top: 1px solid var(--border2);
  border-bottom: none;
}

.hosting-note {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dim2);
  max-width: 44rem;
  margin-top: 1rem;
}

.hosting-admin { margin-top: 1rem; }
.hosting-admin a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 0.75rem 1.2rem;
  transition: border-color 0.15s, color 0.15s;
}
.hosting-admin a:hover { color: var(--accent); border-color: var(--accent); }

/* ── HOSTING REPORT ── */
.report-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.report-tile {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.report-tile.is-accent { border-color: var(--accent); }
.report-tile-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim2); }
.report-tile-value { font-family: var(--sans); font-size: 2rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.report-tile-note { font-family: var(--sans); font-size: 0.85rem; color: var(--body); }

.report-h2 {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  margin: 3rem 0 0.5rem;
}
.report-table { font-size: 0.95rem; }
.report-sub { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--accent); margin-top: 0.2rem; }
.report-table .is-negative { color: #c98a7e; }
.report-list { list-style: none; display: grid; gap: 0.6rem; max-width: 44rem; }
.report-list li { font-family: var(--sans); font-size: 0.95rem; line-height: 1.6; color: var(--body); padding-left: 1rem; border-left: 1px solid var(--border2); }
.report-list code { font-family: var(--mono); font-size: 0.85rem; color: var(--text); }

@media (max-width: 700px) {
  .page-large .dev-heading { font-size: 1.9rem; }
  .page-large .lead { font-size: 1.05rem; }
}

/* ── WORK-IN-PROGRESS BANNER ── reusable on any page */
.wip-banner {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: rgba(201, 163, 90, 0.10);
  border: 1px solid rgba(201, 163, 90, 0.55);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 0.9rem 1.15rem;
  margin: 0 0 2.25rem;
  max-width: 48rem;
}
.wip-banner strong { color: #e3c27f; font-weight: 600; }

/* ── HOSTING PROFILES ── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1rem;
}
.profile-card {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.4rem 1.4rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s;
}
.profile-card:hover { border-color: var(--border2); }
.profile-card.is-chosen { border-color: var(--accent); }
.profile-card.is-covered { opacity: 0.75; }

.profile-head { display: flex; align-items: center; gap: 0.85rem; cursor: pointer; }
.profile-head input,
.profile-option input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  cursor: pointer;
}
.profile-option input { width: 16px; height: 16px; border-radius: 4px; }
.profile-option input[type="radio"] { border-radius: 50%; }
.profile-head input:checked,
.profile-option input:checked { border-color: var(--accent); background: var(--accent); }
.profile-head input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 11px;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.profile-option input:checked::after {
  content: ""; position: absolute; inset: 4px; background: var(--bg); border-radius: inherit;
}
.profile-head input:disabled { cursor: default; opacity: 0.6; }
.profile-head input:focus-visible,
.profile-option input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.profile-number { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); }
.profile-name { font-family: var(--sans); font-size: 1.3rem; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }
.profile-access { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim2); border: 1px solid var(--dim2); border-radius: 3px; padding: 0.15rem 0.45rem; white-space: nowrap; }
.hosting-table tr.is-uncompared td { color: var(--dim2); }
.profile-summary { font-family: var(--sans); font-size: 1rem; line-height: 1.55; color: var(--body); }
.profile-input { font-family: var(--sans); font-size: 0.9rem; color: var(--dim2); }
.profile-included { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--accent); }

.profile-options {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.profile-options[hidden] { display: none; }
.profile-option { display: flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.95rem; color: var(--text); cursor: pointer; }
.profile-option em { font-style: normal; color: var(--dim2); }
.profile-option-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim2); margin-top: 0.3rem; }

.hosting-hint {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  max-width: 48rem;
}
.hosting-hint[hidden] { display: none; }
.hosting-hint a { color: var(--text); border-bottom: 1px solid var(--accent); text-decoration: none; }

#hosting-result[hidden] { display: none; }

.hosting-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem 2.5rem;
  margin: 2rem 0 0.5rem;
}
.hosting-subhead { font-family: var(--sans); font-size: 1.1rem; font-weight: 500; color: var(--text); margin: 2rem 0 0.75rem; }
.hosting-columns .hosting-subhead { margin-top: 0; }
.hosting-outputs { list-style: none; display: grid; gap: 0.5rem; }
.hosting-outputs li { font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--body); padding-left: 1rem; border-left: 2px solid var(--accent); }
.hosting-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tool-chip { font-family: var(--mono); font-size: 0.85rem; color: var(--text); background: var(--surface); border: 1px solid var(--border2); border-radius: 999px; padding: 0.25rem 0.7rem; }

/* ── ANDROID ── */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1rem; }
.app-card { display: grid; align-content: start; gap: 0.8rem; padding: 1.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.app-role { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.app-name { font-family: var(--sans); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.app-body { font-family: var(--sans); font-size: 1.02rem; line-height: 1.6; color: var(--body); }

/* ── BYOC ── */
.byoc-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.byoc-point { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.byoc-point-title { font-family: var(--sans); font-size: 1.25rem; font-weight: 500; color: var(--text); margin-bottom: 0.85rem; }
.byoc-point .report-list strong { color: var(--text); font-weight: 500; }
.byoc-point a, .byoc-text a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); }
.byoc-text { font-family: var(--sans); font-size: 1.02rem; line-height: 1.65; color: var(--body); max-width: 44rem; }
.byoc-table td.is-ours { color: var(--text); }
.byoc-table th:last-child { color: var(--accent); }

.byoc-contact { margin-top: 1rem; }
.byoc-form { display: grid; gap: 1.1rem; max-width: 36rem; margin-top: 1.25rem; }
.byoc-field { display: grid; gap: 0.4rem; }
.byoc-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim2); }
.byoc-field input, .byoc-field select, .byoc-field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  padding: 0.75rem 0.9rem; width: 100%;
}
.byoc-field input:focus, .byoc-field select:focus, .byoc-field textarea:focus { outline: none; border-color: var(--accent); }
.byoc-field.has-error input, .byoc-field.has-error select, .byoc-field.has-error textarea { border-color: #c98a7e; }
.byoc-error { font-family: var(--sans); font-size: 0.9rem; color: #c98a7e; }
.byoc-submit {
  justify-self: start; font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.04em;
  color: var(--bg); background: var(--accent); border: none; border-radius: 8px;
  padding: 0.85rem 1.4rem; cursor: pointer;
}
.byoc-submit:hover { filter: brightness(1.12); }
.byoc-sent { font-family: var(--sans); font-size: 1.1rem; color: var(--text); padding: 1rem 1.2rem; border: 1px solid var(--accent); border-radius: 8px; max-width: 36rem; }
.byoc-lines { list-style: none; display: grid; gap: 0.9rem; max-width: 44rem; margin-bottom: 1rem; }
.byoc-lines li { font-family: var(--sans); font-size: 1.1rem; line-height: 1.55; color: var(--body); padding-left: 1.1rem; border-left: 2px solid var(--accent); }
.byoc-lines strong { color: var(--text); font-weight: 500; }

.report-tile[hidden], #hosting-compare[hidden] { display: none; }
.report-tiles:has(.report-tile[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
.hosting-compute { max-width: 46rem; margin: 0 0 2.5rem; padding-left: 1rem; border-left: 2px solid var(--accent, #c9a24a); color: var(--text); font-size: 1.1rem; line-height: 1.6; }
.hosting-compute a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.report-tile-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hosting-compute { font-family: var(--sans); }

/* ══════════════════════════════
   LARGER TYPE, CONTINUED — the Cost Model and Field Trials pages
   share Hosting's scale: mono labels at 0.75–0.8rem, Inter body at
   1–1.2rem, notes at 0.9rem.
══════════════════════════════ */
.page-large .planner-step { margin-bottom: 3.5rem; }
.page-large .planner-step-title { font-size: 0.8rem; letter-spacing: 0.16em; margin-bottom: 1.25rem; }
.page-large .cm-field-label,
.page-large .cm-subhead { font-size: 0.75rem; letter-spacing: 0.12em; }
.page-large .cm-fields { max-width: 44rem; gap: 1rem 1.5rem; }
.page-large .planner-select { font-family: var(--sans); font-size: 1rem; padding: 0.75rem 1rem; max-width: none; }
.page-large .planner-grid { border-radius: 10px; }
.page-large .planner-check { padding: 1rem 1.25rem; align-items: center; }
.page-large .planner-check input { width: 18px; height: 18px; margin: 0; }
.page-large .planner-check-name { font-family: var(--sans); font-size: 1.05rem; }
.page-large .cm-range output { font-size: 1rem; }
.page-large .cm-summary { font-family: var(--sans); font-size: 1.1rem; color: var(--text); margin-bottom: 1rem; }
.page-large .cm-chart { border-radius: 10px; }
.page-large .solutions-table { font-family: var(--sans); font-size: 1rem; }
.page-large .solutions-table th,
.page-large .solutions-table td { padding: 0.85rem 0.9rem; }
.page-large .solutions-table th { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--dim2); }
.page-large .solutions-table td:last-child { color: var(--body); }
.page-large .planner-note,
.page-large .cm-messages li { font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; max-width: 44rem; }
.page-large .planner-note { margin-top: 1rem; }
.page-large .planner-note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-large .cm-explain { max-width: 44rem; }
.page-large .cm-explain-btn { font-size: 0.85rem; padding: 0.75rem 1.2rem; border-radius: 6px; }
.page-large .cm-explain-list li { font-family: var(--sans); font-size: 1rem; }

/* Field Trials */
.page-large .solutions-statement { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; max-width: 44rem; margin-bottom: 1.5rem; }
.page-large .solutions-intro { font-family: var(--sans); font-size: 1.1rem; line-height: 1.7; max-width: 44rem; }
.page-large .solutions-lead { font-size: 0.8rem; letter-spacing: 0.16em; margin-top: 0; }
.page-large .principles-grid { margin-top: 2.5rem; }
.page-large .principle-label { font-family: var(--mono); font-size: 0.8rem; }
.page-large .principle-title { font-size: 1.3rem; font-weight: 500; }
.page-large .principle-body { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--body); }
.page-large .bb-link { font-size: 0.85rem; }
.page-large .deploy-quote { max-width: 44rem; }
.page-large .deploy-quote p { font-size: 1.25rem; line-height: 1.6; }
.page-large .deploy-example-foot { font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; }
.page-large .bb-btn { font-size: 0.85rem; }
.page-large .bb-gates li { font-size: 0.85rem; }
.page-large .bb-node-x,
.page-large .bb-node { font-size: 0.95rem; }

.coming-soon {
  max-width: 44rem;
  padding: 1.5rem 1.75rem;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--text);
}
.coming-soon span { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--body); }

/* the developer tabs scroll sideways on a phone instead of widening the page */
.tab-bar { overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn { flex: none; white-space: nowrap; }
/* scrolling clips anything outside the bar, so the rule is drawn inside it */
.tab-bar { border-bottom: none; box-shadow: inset 0 -1px 0 var(--border); }
.tab-bar .tab-btn { margin-bottom: 0; }
.page-large .principles-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.page-large .cm-tick, .page-large .cm-phase-label, .page-large .cm-marker-label { font-size: 12px; }

/* Edge Spine: the headquarters label sits beside its node, clear of both links,
   and a node receiving an update is ringed in the accent until it confirms */
.bb-map-label.is-side, .bb-map-sub.is-side { text-anchor: start; }
.bb-unit.incoming { fill: var(--accent); stroke: var(--accent); stroke-opacity: 0.35; stroke-width: 8; }

/* ══════════════════════════════
   THE WIP PAGE — CAPITAL LOOP
   A budget spent on one pass through a pipeline, against the same budget
   spent on a pass that leaves enough to run again. Built from the site's
   own parts: hairlines, the gold accent, mono labels. The mode switch
   repaints the panel through two local tokens; nothing here leaves the page.
══════════════════════════════ */

.wip-main {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
}
.wip-head { margin-bottom: 1.75rem; }

.cap {
  /* open-loop is the default: grey links, a refused edge, a rose glow */
  --cap-link: var(--border2);
  --cap-hot: var(--bad);
  --cap-glow: rgba(201, 138, 126, 0.30);

  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.cap[data-mode="closed-loop"] {
  --cap-link: var(--accent);
  --cap-hot: var(--accent);
  --cap-glow: rgba(138, 109, 59, 0.40);
}

/* ── controls ── */
.cap-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.cap-mode {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg);
}

.cap-mode-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.cap-mode-btn:hover { color: var(--text); }
.cap-mode-btn.is-active { color: var(--text); background: var(--surface); }
.cap[data-mode="open-loop"] .cap-mode-btn.is-active { color: var(--bad); }
.cap[data-mode="closed-loop"] .cap-mode-btn.is-active { color: var(--accent); }
.cap-mode-btn:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

/* the way past the animation: skip means skip, so it sits at the panel's
   top right, opposite the mode switch rather than under the diagram */
.cap-skip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.15s;
}
.cap-skip:hover { color: var(--text); }
.cap-skip:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }

/* ── the two panels ── */
.cap-stage {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

/* ── the budget: a level indicator ──
   One thin track and the figure above it. The level is --cap-level, set by
   capital-loop.js: upright beside the line, flat above it on narrow screens. */
.cap-gauge-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.cap-gauge-title {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.cap-gauge-value {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cap-gauge {
  --cap-level: 100%;
  position: relative;
  flex: 1;
  width: 6px;
  min-height: 12rem;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.cap-gauge-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--cap-level);
  background: var(--accent);
  transition: height 0.25s linear, width 0.25s linear, background 0.3s;
}
.cap-gauge.is-warn .cap-gauge-fill { background: #c9a35a; }
.cap-gauge.is-bad .cap-gauge-fill { background: var(--bad); }
.cap-gauge-panel:has(.cap-gauge.is-bad) .cap-gauge-value { color: var(--bad); }

/* ── the line ── */
.cap-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

/* Two layouts for the same three stages. Open-loop is the pipeline as it
   was: a row, left to right, 620 x 240. Closed-loop closes that row into an
   equilateral triangle, base at the top, 620 x 440. Either way the node
   percentages and the edge coordinates in the matching SVG are read against
   the same box, so the drawing and the cards cannot drift apart. */
.cap-flow {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 620 / 240;
}
.cap[data-mode="closed-loop"] .cap-flow { aspect-ratio: 620 / 440; }

.cap-node {
  position: absolute;
  width: 26%;                 /* 161 of the 620 the edges are drawn in */
  transform: translate(-50%, -50%);
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem 1rem;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cap-node.is-active {
  border-color: var(--cap-hot);
  box-shadow: 0 0 25px var(--cap-glow);
}

/* open-loop: one stage after another, along the middle line */
.cap-node--ingest   { left: 16.5%; top: 50%; }
.cap-node--training { left: 50%;   top: 50%; }
.cap-node--deploy   { left: 83.5%; top: 50%; }

/* closed-loop: the base at the top, the apex below and between */
.cap[data-mode="closed-loop"] .cap-node { width: 29%; }
.cap[data-mode="closed-loop"] .cap-node--ingest   { left: 22.6%; top: 15.9%; }
.cap[data-mode="closed-loop"] .cap-node--training { left: 77.4%; top: 15.9%; }
.cap[data-mode="closed-loop"] .cap-node--deploy   { left: 50%;   top: 82.7%; }

.cap-node-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
}

.cap-node-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.cap-node-bar {
  width: 0;
  height: 100%;
  background: var(--cap-hot);
  transition: width 0.1s linear;
}

/* the edges: one per side of the triangle, drawn in the box the cards sit in */
.cap-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cap-edge {
  stroke: var(--cap-link);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 0.3s, opacity 0.35s, stroke-width 0.18s;
}

/* the link the run is crossing goes bold for a beat, then settles back */
.cap-edge.is-linking { stroke-width: 3; }

/* one drawing per layout; the mode decides which is on the page */
.cap-edges--triangle { display: none; }
.cap[data-mode="closed-loop"] .cap-edges--linear   { display: none; }
.cap[data-mode="closed-loop"] .cap-edges--triangle { display: block; }

.cap-head-fill { fill: var(--cap-link); transition: fill 0.3s; }

/* the triangle needs about 620px to keep its proportions; below that the
   three stages stack and the drawn edges go */
@media (max-width: 980px) {
  .cap-stage { grid-template-columns: minmax(0, 1fr); }
  .cap-gauge-panel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
  .cap-gauge { flex: 1 1 100%; width: auto; height: 6px; min-height: 0; order: 3; }
  .cap-gauge-fill { top: 0; right: auto; height: auto; width: var(--cap-level); }
  .cap-flow,
  .cap[data-mode="closed-loop"] .cap-flow { aspect-ratio: auto; }
  .cap-edges,
  .cap[data-mode="closed-loop"] .cap-edges--triangle { display: none; }
  .cap-node,
  .cap[data-mode="closed-loop"] .cap-node { position: static; width: auto; transform: none; }
  .cap-flow > .cap-node + .cap-node { margin-top: 0.6rem; }
}

@media (max-width: 760px) {
  .wip-main { padding: 1.5rem 1.25rem 3rem; }
}

/* ══════════════════════════════
   THE WIZARD — one stage at a time
   Three cards under the loop: meet a stage, choose how to fill it, move on.
   One card is in the page at a time; the others stay in the DOM, empty, so
   steps two and three can be written without disturbing the walk.
══════════════════════════════ */

.wiz {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

/* on its own page the wizard is the page, so it does not sit under anything */
.wizard-main .wiz { margin-top: 0; }

.wiz-steps {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  padding: 0 0 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.wiz-dot {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  border: 1px solid var(--border2);
  border-radius: 50%;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.wiz-dot.is-done { color: var(--body); background: var(--bg); }
.wiz-dot.is-current { color: var(--accent); border-color: var(--accent); }

.wiz-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-height: 12rem;
}
.wiz-card[hidden] { display: none; }

/* steps two and three have no copy yet: the empty card says so by being empty */
.wiz-card:empty {
  border: 1px dashed var(--border2);
  border-radius: 8px;
}

.wiz-role {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.wiz-name {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.wiz-body {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 46rem;
}

.wiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-self: end;
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.wiz-btn {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, filter 0.15s;
}
.wiz-btn:hover { color: var(--text); background: rgba(138, 109, 59, 0.16); }
.wiz-btn:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.wiz-btn.is-primary {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.wiz-btn.is-primary:hover { color: var(--bg); filter: brightness(1.15); }

/* ══════════════════════════════
   STACK — the four -AS products (partials/stack*.html)
   Brought over from the landing-stack branch; used by the wizard's step 2.
══════════════════════════════ */

/* DIN for the A and S of Affaible Systems and for the product names.
   Barlow, from Google Fonts, stands in for D-DIN (Datto, SIL OFL).
   To switch: put D-DIN-Bold.woff2 in static/fonts/, then add an @font-face
   here for family 'D-DIN', weight 700, whose src points at
   ../fonts/D-DIN-Bold.woff2. Add it only once the file exists: collectstatic
   rewrites every url() in this file, even inside comments, and fails on a
   missing one. */
:root { --din: 'D-DIN', 'Barlow', var(--sans); }

.stack { margin: 1.5rem 0 5rem; }

.stack-title {
  font-family: var(--sans);
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.stack-title .din,
.stack-as {
  font-family: var(--din);
  font-weight: 700;
  color: var(--accent-hi, #c9a15d);
  letter-spacing: 0.01em;
}
.stack-sub {
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--body);
  margin-top: 0.35rem;
}
.stack-deal {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin: 1.4rem 0 2.75rem;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stack-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.1rem 1.1rem;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.stack-card:last-child { border-right: none; }

.stack-screen {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0f0e0c;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.6rem;
  outline: none;
}
.stack-screen:focus-visible { border-color: var(--accent); }
.stack-screen.is-empty {
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.stack-dots { display: block; width: 100%; flex: 1 1 auto; min-height: 0; }
.stack-term {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--body);
  padding: 0.45rem 0.6rem 0.55rem;
  border-top: 1px solid var(--border);
  white-space: pre;
  overflow: hidden;
  min-height: 7.2em;
}
.stack-term .t-cmd  { color: var(--text); }
.stack-term .t-done { color: var(--dim); }
.stack-term .t-ok   { color: #c9a15d; }
.stack-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e3c27f;
  background: rgba(20, 19, 17, 0.8);
  padding: 0.1rem 0.35rem;
  border: 1px solid #5a4a2c;
  border-radius: 3px;
}

.stack-name {
  font-family: var(--din);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--text);
}
.stack-line {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--body);
  flex: 1;
}
.stack-actions {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-top: 0.4rem;
}
.stack-actions a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
}
.stack-actions a:hover { border-bottom-color: var(--accent); }

.stack-tagline {
  font-family: var(--sans);
  font-size: 1.15rem;
  color: var(--text);
  margin-top: 2rem;
}

/* dots: drawn by static/js/stack.js */
.stack-dots circle { transition: fill 0.35s, stroke 0.35s, opacity 0.35s, r 0.35s; }
.stack-dots circle.is-pulse { animation: stack-pulse 1.1s ease-in-out infinite; }
@keyframes stack-pulse { 50% { opacity: 0.25; } }

@media (max-width: 900px) {
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-card:nth-child(2n) { border-right: none; }
  .stack-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .stack-title { font-size: 2.3rem; }
  .stack-sub { font-size: 1.25rem; }
  .stack-grid { grid-template-columns: minmax(0, 1fr); }
  .stack-card { border-right: none; border-bottom: 1px solid var(--border); }
  .stack-card:last-child { border-bottom: none; }
  /* one column: the dots keep their own shape and the terminal its full
     height, rather than both squeezed into a fixed box */
  .stack-screen { aspect-ratio: auto; }
  .stack-screen.is-empty { aspect-ratio: 100 / 62; }
  .stack-dots { flex: none; aspect-ratio: 100 / 62; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-dots circle { transition: none; }
  .stack-dots circle.is-pulse { animation: none; }
}

/* Landing: the stack hero */
.landing-stack { padding-top: 0; align-items: stretch; }
.landing-stack .dev-main { padding-top: 0.5rem; }
.landing-stack .stack { margin-top: 0; }
.landing-workshop { display: inline-flex; line-height: 0; padding: 0.25rem; }
.landing-workshop:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Access (Request early access / Talk to us) */
.access-main { max-width: 760px; }
.access-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.stack-actions a { white-space: nowrap; }

/* ── Stack cards: text only. "See the run / view / tournament" opens the
   product's demo in the right-hand panel (.stack-sheet, below). ── */
.stack-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-top: 0.2rem;
  text-align: left;
  line-height: 1.6;
  display: block;
}
button.stack-hint {
  background: none;
  border: none;
  padding: 0;
  color: var(--body);
  cursor: pointer;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
}
button.stack-hint:hover { color: #c9a15d; border-bottom-color: var(--accent); }
button.stack-hint:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* the demos, inside the panel */
.stack-sheet.stack-sheet-wide { width: min(860px, 100vw); }
/* the provenance panel slides out further: the record wants the room */
.stack-sheet.stack-sheet-proof { width: min(1040px, 100vw); }
.stack-sheet-nav { display: flex; gap: 0.5rem; margin: 0 6rem 1.25rem 0; min-height: 1.6rem; }
.stack-sheet-step {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--body);
  background: transparent; border: 1px solid var(--border2); border-radius: 4px; padding: 0.2rem 0.65rem; cursor: pointer;
}
.stack-sheet-step:hover { color: var(--text); border-color: var(--accent); }
.stack-sheet-step[hidden] { display: none; }
.stack-sheet-title.stack-sheet-title { font-family: var(--din); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.01em; }
.stack-sheet-actions { margin-top: 1.5rem; }
.stack-demo { margin-top: 0.5rem; }
.stack-demo-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #9cc59a;
  margin-bottom: 0.8rem;
}
.stack-demo-tag b { font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; }
.stack-demo-term {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--body);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  background: #0f0e0c;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.9rem 1rem;
}
.stack-demo-term .t-cmd  { color: var(--text); }
.stack-demo-term .t-ok   { color: #c9a15d; }
.stack-demo-term .t-done { color: var(--dim); }
.stack-demo-note {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--body);
  margin-top: 0.8rem;
}
.stack-demo-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.stack-demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* the tagline: bigger, with the second half carrying the weight */
.stack-tagline {
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--body);
  margin-top: 2.5rem;
}
.stack-tagline strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .stack-tagline { font-size: 1.45rem; } }
.dev-provenance { margin: -0.5rem 0 1.75rem; }

/* Under the tagline: the run's numbers, and "See the working", which slides
   out one item's chain of custody from the right (full screen on phones). */
.stack-proof-line { font-family: var(--sans); font-size: 0.95rem; color: var(--body); margin-top: 1rem; max-width: 46rem; }
.stack-proof-line b { color: var(--text); font-weight: 500; }
.stack-proof-open {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  padding: 0 0 1px;
  cursor: pointer;
  white-space: nowrap;
}
.stack-proof-open:hover { color: #c9a15d; }
.stack-proof-open:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.stack-sheet {
  margin: 0 0 0 auto;
  height: 100vh;
  max-height: 100vh;
  width: min(560px, 100vw);
  max-width: 100vw;
  padding: 0;
  border: none;
  border-left: 1px solid var(--accent);
  background: var(--bg);
  color: var(--text);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
}
.stack-sheet[open] { animation: stack-sheet-in 0.22s ease-out; }
.stack-sheet::backdrop { background: rgba(5, 5, 4, 0.55); }
@keyframes stack-sheet-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.stack-sheet-body { padding: 1.5rem 1.5rem 2rem; position: relative; }
.stack-sheet-title { font-family: var(--sans); font-size: 1.4rem; font-weight: 600; margin: 0 5rem 0.5rem 0; }
.stack-sheet-lead { font-family: var(--sans); font-size: 0.9rem; color: var(--body); margin-bottom: 1.1rem; }
.stack-sheet-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: var(--sans); font-size: 0.8rem; color: var(--text);
  background: transparent; border: 1px solid var(--border2); border-radius: 4px; padding: 0.25rem 0.75rem; cursor: pointer;
}
.stack-sheet-close:hover { border-color: var(--dim); }
.stack-sheet.pp .pp-card { max-width: none; }   /* beats polyphon's .pp .pp-card cap */
.stack-sheet-proof.pp .pp-chaincard-head { grid-template-columns: 160px minmax(0, 1fr); }
.stack-sheet-proof.pp .pp-chaincard-head img { width: 160px; height: 160px; }
@media (max-width: 560px) {
  .stack-sheet-proof.pp .pp-chaincard-head { grid-template-columns: 88px minmax(0, 1fr); }
  .stack-sheet-proof.pp .pp-chaincard-head img { width: 88px; height: 88px; }
}
.stack-proof-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.stack-sheet .stack-proof-next {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.stack-sheet .stack-proof-next:hover { border-color: var(--accent); }
.stack-sheet .stack-proof-next:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .stack-sheet[open] { animation: none; } }

/* a demo told as a sequence: several terminal blocks shown as one terminal */
.stack-demo-seq {
  background: #0f0e0c;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
}
.stack-demo-seq .stack-demo-term {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* one Early access / Talk to us for all four products */
.stack-cta { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.25rem; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; }
.stack-cta a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border2); }
.stack-cta a:hover { border-bottom-color: var(--accent); }
.stack-cta a:first-child { color: #c9a15d; border-bottom-color: var(--accent); }
.stack-demo-seq .stack-demo-term + .stack-demo-term { margin-top: 1.45em; }

/* crude-AS panel: the pitch above the run, the market line below it */
.stack-demo-pitch { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--body); margin: 0 0 1.1rem; }
.stack-demo-pitch b { color: var(--text); font-weight: 600; }
.stack-demo-market {
  font-family: var(--sans); font-size: 0.95rem; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: 0.9rem; margin-top: 1.25rem;
}

/* Hosting: plain cost tables */
.hosting-table tfoot td { border-top: 1px solid var(--border2); color: var(--text); }
.hosting-muted { color: var(--body); font-size: 0.78rem; }
.hosting-table small a { color: var(--body); }

/* ══════════════════════════════
   THE WIZARD, STEPS 2 AND 3 — the -AS stack, then Zerdira
   Step 2 carries the stack's cards (and, by level, its demo panel and
   "Show your working"); the rules here fit them inside a wizard card.
══════════════════════════════ */
.wiz-card-stack .stack-wiz-name { font-family: var(--sans); }
.wiz-card-stack .stack-wiz-name .stack-as { font-size: 1.05em; }
.wiz-card-stack .stack-grid { margin-top: 0.5rem; }
.wiz-card-stack .stack-card { padding: 1rem 0.9rem 0.9rem; }
.wiz-card-stack .stack-name { font-size: 1.35rem; }
.wiz-card-stack .stack-tagline { font-size: 1.35rem; margin-top: 1.25rem; }
.wiz-card-stack .stack-proof-line { margin-top: 0.4rem; }

.wiz-behind {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 0.4rem;
}
.wiz-behind a { color: var(--body); text-decoration: none; border-bottom: 1px solid var(--border2); }
.wiz-behind a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* after the last step: what was chosen, step by step */
.wiz-done {
  display: grid;
  gap: 0.6rem;
  outline: none;
}
.wiz-done[hidden] { display: none; }
.wiz-done-list { list-style: none; border-top: 1px solid var(--border); }
.wiz-done-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  color: var(--text);
}
.wiz-done-list li span + span { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); }

/* ── SUBTITLES (static/js/subtitles.js) ──
   While a line plays: words to come are dim, words said are bright, and the
   word being said sits on a gold block, as captions do on social video. */
.sub-w {
  border-radius: 3px;
  padding: 0 0.08em;
  margin: 0 -0.08em;
  transition: color 0.12s, background-color 0.12s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-subtitle].is-playing .sub-w { color: var(--dim); }
[data-subtitle].is-playing .sub-w.is-said { color: var(--text); }
[data-subtitle].is-playing .sub-w.is-now { color: var(--bg); background-color: #c9a15d; }
@media (prefers-reduced-motion: reduce) { .sub-w { transition: none; } }

/* ══════════════════════════════
   THE SHOPFRONT — Affaible Stacks, the loop, "Show your working"
══════════════════════════════ */
.stack-head { margin-bottom: 2rem; }
.stack-head .stack-title { font-size: 2.6rem; }
.stack-head .stack-sub { font-size: 1.3rem; }
.stack-head .stack-deal { margin-top: 0.6rem; }
@media (max-width: 560px) {
  .stack-head .stack-title { font-size: 2rem; }
  .stack-head .stack-sub { font-size: 1.1rem; }
}

.stack-proof { margin-top: 2.5rem; }
.stack-proof .stack-tagline { margin-top: 0; }

/* header: the spanner sits by Logout, for those who may use it */
.site-header-tools { display: flex; align-items: center; gap: 1.1rem; }

/* ══════════════════════════════
   THE SHOP — choosing stacks, and the basket
══════════════════════════════ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* a fieldset that lays out like the stack grid */
fieldset.stack-pick-grid { min-width: 0; margin: 0.5rem 0 0; padding: 0; border-left: 0; border-right: 0; }

.wiz-hint { display: block; margin-top: 0.5rem; color: var(--text); font-weight: 500; }

/* each card is a checkbox: the whole of name and line is the target */
.stack-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  cursor: pointer;
}
.stack-pick-box {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.stack-pick-mark {
  position: absolute;
  top: 0.15rem;
  right: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--border2);
  border-radius: 50%;
  transition: background 0.15s, border-color 0.15s;
}
.stack-pick-mark::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.16rem;
  width: 0.3rem;
  height: 0.58rem;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.stack-pick .stack-name { padding-right: 1.6rem; }
.stack-pick-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.stack-pick-state {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 1em;
}

.stack-card { transition: background 0.15s, box-shadow 0.15s; }
.stack-pick-grid .stack-card:hover { background: rgba(138, 109, 59, 0.06); }
.stack-card:has(.stack-pick-box:focus-visible) { box-shadow: inset 0 0 0 1px var(--text); }
.stack-card.is-picked { background: rgba(138, 109, 59, 0.12); box-shadow: inset 0 0 0 1px var(--accent); }
.stack-card.is-picked .stack-pick-mark { background: var(--accent); border-color: var(--accent); }
.stack-card.is-picked .stack-pick-mark::after { opacity: 1; }
.stack-card.is-included { background: rgba(138, 109, 59, 0.05); }
.stack-card.is-included .stack-pick { cursor: default; }
.stack-card.is-included .stack-pick-mark { border-color: var(--accent); background: transparent; }
.stack-card.is-included .stack-pick-mark::after { opacity: 1; border-color: var(--accent); }
.stack-card.is-included .stack-pick-state { color: var(--body); }

.stack-pick-tip {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--body);
  border-left: 2px solid var(--accent);
  padding-left: 0.8rem;
}
.stack-pick-tip[hidden] { display: none; }

.wiz-btn:disabled,
.wiz-btn:disabled:hover { opacity: 0.45; cursor: not-allowed; filter: none; }
a.wiz-btn { text-decoration: none; display: inline-flex; align-items: center; }

.wiz-error { font-family: var(--sans); color: var(--bad); margin-bottom: 1rem; }

/* the basket */
.wiz-done-list li span:first-child small {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.15rem;
}
.wiz-done-list li { align-items: center; }
.wiz-done-list li span + span { text-align: right; }
.wiz-comment { margin-top: 0.4rem; max-width: 46rem; }
.wiz-comment textarea { width: 100%; }
.wiz-sent { display: grid; gap: 0.6rem; }

/* ══════════════════════════════
   FRONT — the shopfront and the shop (body.front): "Backroom"
   The workshop keeps the sombre house style; the front room gets light.
     gold    the brand: the A and S, the word Stacks
     teal    the instrument light: anything you can act on
     hazard  look here now: Skip once lit, a nudge, capital running out
   and one colour per stack (--stack), so "includes" can be read at a glance:
     crude hazard orange · cool teal · classy violet · solid gold
   Stamped labels and dashed edges are the texture; everything else is the
   same hairlines, mono and spacing as the rest of the site.
══════════════════════════════ */
:root {
  --gold:       #d4a24c;
  --teal:       #2ec4b6;
  --teal-ink:   #062b27;
  --hazard:     #ff6b35;
  --hazard-ink: #2b0f04;
  --violet:     #a78bfa;
}
.front [data-stack="crude"]  { --stack: var(--hazard); }
.front [data-stack="cool"]   { --stack: var(--teal); }
.front [data-stack="classy"] { --stack: var(--violet); }
.front [data-stack="solid"]  { --stack: var(--gold); }

/* brand */
.front .stack-title .din,
.front .stack-as { color: var(--gold); }
.front .stack-card .stack-name .stack-as { color: var(--stack, var(--gold)); }

/* stamped labels: Collect / Train / Deploy, Your basket, Capital */
.front .wiz-role {
  display: inline-block;
  justify-self: start;
  color: var(--hazard);
  border: 1px solid var(--hazard);
  border-radius: 3px;
  padding: 0.12rem 0.5rem;
  transform: rotate(-1.5deg);
}
.front .cap-gauge-title { color: var(--body); }

/* actions: teal */
.front .wiz-btn { color: var(--teal); border-color: var(--teal); }
.front .wiz-btn:hover { color: var(--text); background: rgba(46, 196, 182, 0.14); }
.front .wiz-btn.is-primary { color: var(--teal-ink); background: var(--teal); border-color: var(--teal); }
.front .wiz-btn.is-primary:hover { color: var(--teal-ink); filter: brightness(1.1); }
.front .wiz-dot.is-current { color: var(--teal); border-color: var(--teal); }
.front .wiz-dot.is-done { color: var(--teal); border-color: rgba(46, 196, 182, 0.4); }
.front .wiz-done-list li span + span { color: var(--teal); }
.front .byoc-field textarea:focus { border-color: var(--teal); }
.front .wiz-hint { color: var(--teal); }

/* the stack cards: each in its own colour */
.front .stack-card { box-shadow: inset 3px 0 0 var(--stack, var(--border2)); }
.front .stack-pick-grid .stack-card:hover { background: color-mix(in srgb, var(--stack) 7%, transparent); }
.front .stack-card.is-picked {
  background: color-mix(in srgb, var(--stack) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--stack), inset 0 0 0 1px var(--stack);
}
.front .stack-card.is-picked .stack-pick-mark { background: var(--stack); border-color: var(--stack); }
.front .stack-card.is-picked .stack-pick-state { color: var(--stack); }
.front .stack-card.is-included {
  background: color-mix(in srgb, var(--stack) 6%, transparent);
  box-shadow: inset 3px 0 0 var(--stack);
  outline: 1px dashed color-mix(in srgb, var(--stack) 60%, transparent);
  outline-offset: -1px;
}
.front .stack-card.is-included .stack-pick-mark { border-color: var(--stack); border-style: dashed; }
.front .stack-card.is-included .stack-pick-mark::after { border-color: var(--stack); }
.front [data-subtitle].is-playing .sub-w.is-now { color: var(--bg); background-color: var(--stack, var(--gold)); }
.front .stack-pick-tip { border-left-color: var(--gold); }

/* "See the run / view / tournament": a teal link, and a nudge when read */
.front button.stack-hint {
  color: var(--teal);
  border-bottom: 1px dashed var(--teal);
  padding: 0.15rem 0;
}
.front button.stack-hint:hover { color: var(--text); border-bottom-style: solid; }
.front button.stack-hint.is-nudge { animation: front-nudge 0.75s ease-in-out 3; }
@keyframes front-nudge {
  50% { color: var(--hazard); border-bottom-color: var(--hazard); transform: translateX(3px); text-shadow: 0 0 10px rgba(255, 107, 53, 0.55); }
}

/* the loop: open-loop burns hazard, closed-loop runs teal */
.front .cap { --cap-hot: var(--hazard); --cap-glow: rgba(255, 107, 53, 0.30); }
.front .cap[data-mode="closed-loop"] {
  --cap-link: var(--teal);
  --cap-hot: var(--teal);
  --cap-glow: rgba(46, 196, 182, 0.35);
}
.front .cap[data-mode="open-loop"] .cap-mode-btn.is-active { color: var(--hazard); }
.front .cap[data-mode="closed-loop"] .cap-mode-btn.is-active { color: var(--teal); }
.front .cap-gauge-fill { background: var(--teal); }
.front .cap-gauge.is-warn .cap-gauge-fill { background: var(--hazard); }

/* Skip: quiet dark text while the loop makes its point, then lit up once
   both runs have been seen (.is-lit, from capital-loop.js) */
.front .cap-skip {
  color: var(--body);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 0.5rem 0.95rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.front .cap-skip:hover { color: var(--teal); border-color: var(--teal); }
.front .cap-skip.is-lit:hover { color: var(--hazard-ink); filter: brightness(1.1); }
.front .cap-skip.is-lit {
  color: var(--hazard-ink);
  background: var(--hazard);
  border-color: var(--hazard);
  transform: rotate(-2deg);
  animation: front-lit 1.6s ease-in-out infinite;
}
@keyframes front-lit {
  50% { box-shadow: 0 0 0 6px rgba(255, 107, 53, 0.18), 0 0 22px rgba(255, 107, 53, 0.45); }
}

/* "Show your working": the claim is the button. Quiet until the loop has
   made its point, then it lights up with Skip. */
.stack-tagline-open {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.stack-tagline-open:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
.stack-tagline-open strong { transition: box-shadow 0.4s, color 0.4s, text-shadow 0.4s; }
.front .stack-tagline-open:hover strong { color: var(--teal); }
.front .stack-proof.is-lit .stack-tagline-open strong {
  color: var(--text);
  box-shadow: inset 0 -0.18em 0 rgba(46, 196, 182, 0.75);
  animation: front-proof-lit 1.6s ease-in-out 4;
}
@keyframes front-proof-lit {
  50% { color: var(--teal); text-shadow: 0 0 18px rgba(46, 196, 182, 0.55); }
}

/* the spanner: teal on hover, like every other control here */
.front .landing-spanner:hover { color: var(--teal); border-color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .front .cap-skip.is-lit,
  .front button.stack-hint.is-nudge,
  .front .stack-proof.is-lit .stack-tagline-open strong { animation: none; }
}

/* ── the loop's verdict: one line under the diagram, set by the mode ──
   Open-loop is the thing to avoid (hazard, struck through by its tag);
   closed-loop is the thing to build (teal). Same rhythm, so the two read
   as one argument as the loop switches. */
.cap-verdict {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  min-height: 1.6em;
}
.cap-verdict > span { display: none; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.cap[data-mode="open-loop"]   .cap-verdict-open   { display: flex; }
.cap[data-mode="closed-loop"] .cap-verdict-closed { display: flex; }
.cap-verdict-tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  transform: rotate(-2deg);
}
.cap-verdict-open { color: var(--bad); }
.cap-verdict-closed { color: var(--accent); }
.front .cap-verdict-open { color: var(--hazard); }
.front .cap-verdict-closed { color: var(--teal); }
.cap-verdict > span { animation: cap-verdict-in 0.45s ease-out; }
@keyframes cap-verdict-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cap-verdict > span { animation: none; } }
@media (max-width: 560px) { .cap-verdict { font-size: 0.8rem; letter-spacing: 0.08em; } }

/* ══════════════════════════════
   MY ACCOUNT — the customer's basket: code, apps, stacks
══════════════════════════════ */
.acct-section { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.acct-flash {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--teal, var(--accent));
  border-left: 2px solid var(--teal, var(--accent));
  padding-left: 0.8rem;
  margin-bottom: 1.25rem;
}
.acct-code code {
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: var(--text);
  background: var(--bg);
  border: 1px dashed var(--teal, var(--border2));
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  display: inline-block;
  user-select: all;
}
.acct-list { list-style: none; border-top: 1px solid var(--border); }
.acct-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.acct-list li > div { display: grid; gap: 0.2rem; min-width: 0; }
.acct-name { font-family: var(--sans); font-size: 1.05rem; color: var(--text); }
.acct-list .stack-name { font-family: var(--din); font-size: 1.25rem; font-weight: 700; }
.front .acct-list [data-stack] .stack-as { color: var(--stack, var(--gold)); }
.acct-meta { font-family: var(--sans); font-size: 0.85rem; color: var(--body); }
.acct-soon {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px dashed var(--border2);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
.acct-list a.wiz-btn { white-space: nowrap; }
.acct-help { font-family: var(--sans); font-size: 0.88rem; color: var(--body); max-width: 46rem; }
.acct-history { list-style: none; display: grid; gap: 0.4rem; }
.acct-history li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; font-family: var(--mono); font-size: 0.78rem; color: var(--body); }
.acct-note { font-family: var(--sans); font-size: 0.8rem; color: var(--dim); max-width: 46rem; margin-top: 0.5rem; }
@media (max-width: 560px) {
  .acct-list li { flex-direction: column; align-items: flex-start; }
  .acct-history li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .acct-code code { font-size: 1.15rem; }
}
.front .header-account:hover { color: var(--teal); border-color: var(--teal); }

/* ══════════════════════════════
   THE SHOP, ON ONE PAGE — Collect, Train, Deploy, and the basket
   Three numbered sections and a basket beside them (below, on a phone).
   Tidyflow is always in; its mode follows the Trug choice through
   form[data-trug] (static/js/shop.js keeps that in step).
══════════════════════════════ */
.shop { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.25rem; align-items: start; }
.shop-steps { display: grid; gap: 1.25rem; min-width: 0; }
.shop-step { position: relative; display: grid; gap: 0.6rem; margin: 0; }
.shop-n {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  font-family: var(--din);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--border2);
}
.front .shop-n { color: color-mix(in srgb, var(--teal) 35%, transparent); }

.shop-more summary {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
  cursor: pointer;
  width: max-content;
}
.shop-more[open] summary { margin-bottom: 0.4rem; }
.shop-more .wiz-body + .wiz-body { margin-top: 0.4rem; }

.shop-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.4rem; }
.shop-option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.shop-option input { margin-top: 0.25rem; accent-color: var(--teal, var(--accent)); }
.shop-option b { display: block; font-family: var(--sans); font-weight: 500; color: var(--text); }
.shop-option small { display: block; font-family: var(--sans); font-size: 0.8rem; color: var(--body); margin-top: 0.1rem; }
.shop-option:hover { border-color: var(--body); }
.shop-option:has(input:checked) {
  border-color: var(--teal, var(--accent));
  background: color-mix(in srgb, var(--teal, var(--accent)) 10%, transparent);
}
.shop-option:has(input:focus-visible) { outline: 1px solid var(--text); outline-offset: 2px; }

.shop-included {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal, var(--accent));
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.12rem 0.45rem;
}
.shop-soon { color: var(--gold, #d4a24c); }
/* developers only: from Tidyflow down to the stacks it is built from */
.shop-dev {
  justify-self: start;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--teal, var(--accent));
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.shop-dev:hover { color: var(--text); }

.shop-mode {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--body);
  border-left: 2px solid var(--teal, var(--accent));
  padding: 0.3rem 0 0.3rem 0.8rem;
}
.shop-mode b { color: var(--text); font-weight: 500; }
.shop-mode-own { display: none; }
.shop[data-trug="own"] .shop-mode-trug { display: none; }
.shop[data-trug="own"] .shop-mode-own { display: inline; }

.shop-basket { position: sticky; top: 1rem; display: grid; gap: 0.75rem; margin: 0; }
.shop-send { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .shop { grid-template-columns: minmax(0, 1fr); }
  .shop-basket { position: static; }
}
@media (max-width: 560px) {
  .shop-choice { grid-template-columns: minmax(0, 1fr); }
  .shop-n { font-size: 1.7rem; }
}