*, *::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;
  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);
}

.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 */
}

/* 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; }