:root {
  color-scheme: light;
  --bg: #f7f8f5;
  --bg-soft: #eef2ed;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-soft: rgba(15, 23, 42, 0.035);
  --line: rgba(31, 41, 55, 0.13);
  --line-soft: rgba(31, 41, 55, 0.09);
  --text: #17201b;
  --muted: #5d6b62;
  --brand: #16785d;
  --brand-deep: #0f624c;
  --accent: #9a6a13;
  --accent-soft: rgba(154, 106, 19, 0.11);
  --success-bg: rgba(22, 120, 93, 0.12);
  --success-text: #0b5a43;
  --success-border: rgba(22, 120, 93, 0.22);
  --danger: #9f1d2d;
  --danger-bg: rgba(159, 29, 45, 0.1);
  --danger-text: #8a1726;
  --danger-border: rgba(159, 29, 45, 0.22);
  --shadow: 0 18px 40px rgba(30, 41, 59, 0.08);
  --body-bg: linear-gradient(180deg, #fbfcf8 0%, #f5f8f4 46%, #eef3ee 100%);
  --header-bg: rgba(250, 252, 248, 0.86);
  --panel-fill: rgba(255, 255, 255, 0.86);
  --panel-fill-soft: rgba(21, 32, 26, 0.045);
  --window-bg: rgba(255, 255, 255, 0.94);
  --video-bg: #f4f7f3;
  --secondary-button-bg: rgba(255, 255, 255, 0.48);
  --secondary-button-hover: rgba(15, 23, 42, 0.06);
  --control-bg: rgba(255, 255, 255, 0.72);
  --window-dot: rgba(23, 32, 27, 0.24);
  --tag-bg: rgba(22, 120, 93, 0.1);
  --tag-text: #0f624c;
  --badge-bg: rgba(22, 120, 93, 0.12);
  --badge-text: #0d5f49;
  --highlight-bg: linear-gradient(180deg, rgba(22, 120, 93, 0.08), rgba(255, 255, 255, 0.9));
  --highlight-border: rgba(22, 120, 93, 0.22);
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
}

.forge-hero {
  align-items: center;
}

.version-chip,
.status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
}

.status-valid { color: #19714b; background: #e9f7f0; }
.status-development { color: #72520d; background: #fff5d8; }
.status-expired,
.status-invalid { color: #9a382c; background: #fff0ed; }
.status-missing { color: var(--muted); background: var(--surface-soft); }

.notice-panel {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid #e2772d;
  border-radius: 0 12px 12px 0;
  background: var(--surface-soft);
}

.notice-panel p {
  margin-bottom: 0;
}

.phase-card {
  min-height: 185px;
}

/* Distribution portal layout is intentionally isolated from the lab hero and
   dashboard primitives. Direct hero children must never become implicit grid
   cells, and account metrics share one column system. */
.distribution-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(290px, 0.96fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.25rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) 0 clamp(2rem, 4vw, 3.25rem);
}

.distribution-home-copy {
  max-width: 880px;
}

.distribution-home-copy .eyebrow {
  margin-bottom: 0.9rem;
}

.distribution-home-copy h1 {
  max-width: 17ch;
  margin: 0 0 1rem;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.distribution-home-copy .lede {
  max-width: 64ch;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
}

.distribution-home-copy .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-bullet-list {
  display: grid;
  gap: 0.55rem;
  max-width: 60ch;
  margin: 0 0 1.45rem;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.hero-bullet-list li {
  position: relative;
  padding-left: 1.45rem;
}

.hero-bullet-list li::before {
  content: "";
  position: absolute;
  top: 0.48rem;
  left: 0.1rem;
  width: 0.42rem;
  height: 0.22rem;
  border-bottom: 2px solid var(--brand);
  border-left: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.distribution-video-preview {
  min-width: 0;
  margin: 0;
}

.video-preview-window {
  position: relative;
  display: grid;
  min-height: clamp(245px, 28vw, 360px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 68% 24%, rgba(22, 120, 93, 0.2), transparent 30%),
    linear-gradient(145deg, #153d32, #10261f 58%, #0c1a16);
  box-shadow: var(--shadow);
}

.video-preview-window::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -48%;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid rgba(194, 250, 223, 0.22);
  border-radius: 50%;
}

.video-preview-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.45rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid rgba(233, 255, 243, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.video-preview-chrome span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(235, 255, 244, 0.45);
}

.video-preview-content {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 30rem;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  color: #effaf3;
}

.video-preview-content .small-label {
  color: #a7e1c4;
}

.video-preview-content strong {
  display: block;
  margin: 0.65rem 0;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.08;
}

.video-preview-content p:last-child {
  max-width: 37ch;
  margin: 0;
  color: rgba(239, 250, 243, 0.78);
}

.video-preview-play {
  display: inline-grid;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 1.35rem;
  padding-left: 0.16rem;
  place-items: center;
  border: 1px solid rgba(236, 255, 245, 0.45);
  border-radius: 50%;
  color: #f5fff9;
  font-size: 0.85rem;
}

.distribution-video-preview figcaption {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.distribution-journey {
  border-top: 1px solid var(--line);
}

.distribution-journey-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.distribution-journey-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 2px solid var(--line);
}

.distribution-journey-list span {
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.distribution-journey-list h3,
.distribution-editorial-columns h2,
.distribution-next-steps h2 {
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
  line-height: 1.25;
}

.distribution-journey-list p,
.distribution-editorial-columns p:last-child,
.distribution-next-steps p {
  margin: 0;
  color: var(--muted);
}

.distribution-editorial-section {
  margin: clamp(2.75rem, 5vw, 5rem) 0;
}

.distribution-editorial-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.4rem);
}

.distribution-editorial-columns article {
  min-width: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.distribution-editorial-columns .small-label {
  margin-bottom: 0.5rem;
}

.distribution-editorial-columns article:hover {
  border-left-color: var(--brand);
}

.distribution-editorial-columns.incident-editorial,
.distribution-editorial-columns.lab-editorial {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.distribution-next-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 5rem);
  margin: 0 0 1.75rem;
  padding: 1.45rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.distribution-next-steps .text-link {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 1rem;
}

.product-hero-action {
  align-self: center;
  max-width: 24rem;
  justify-self: end;
  padding-left: 1.25rem;
  border-left: 2px solid var(--brand);
}

.product-hero-action strong {
  display: block;
  margin: 0.7rem 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.product-hero-action p {
  color: var(--muted);
}

.product-editorial {
  margin-bottom: 2rem;
}

.distribution-included {
  margin: 0 0 2.8rem;
  padding: 1.25rem 0 1.35rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.distribution-included .eyebrow {
  margin-bottom: 0.85rem;
}

.distribution-included ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.distribution-included li {
  position: relative;
  min-width: 0;
  padding-left: 1rem;
  color: var(--muted);
}

.distribution-included li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
}

.distribution-dashboard main.page > section + section {
  margin-top: 1rem;
}

.distribution-dashboard .page-hero.compact {
  align-items: center;
  padding-bottom: 1.25rem;
}

.distribution-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.distribution-dashboard .stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  min-height: 158px;
}

.distribution-dashboard .stat-card strong {
  overflow-wrap: anywhere;
}

.distribution-dashboard .stat-card p {
  margin: auto 0 0;
}

.distribution-dashboard .metric-identifier {
  font-size: 0.98rem;
  line-height: 1.35;
}

.distribution-dashboard .notice-panel {
  margin: 1rem 0 0;
}

.distribution-dashboard .phase-card {
  display: flex;
  flex-direction: column;
  min-height: 175px;
}

.distribution-dashboard .phase-card h2 {
  margin-top: 0.7rem;
}

.distribution-dashboard .phase-card > a {
  margin-top: auto;
}

@media (max-width: 960px) {
  .distribution-home-hero,
  .distribution-journey-list,
  .distribution-editorial-columns,
  .distribution-editorial-columns.incident-editorial,
  .distribution-editorial-columns.lab-editorial,
  .distribution-next-steps,
  .distribution-included ul,
  .distribution-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .distribution-home-hero {
    align-items: start;
  }
}

@media (max-width: 640px) {
  .distribution-home-hero {
    padding: 2rem 0 1.75rem;
  }

  .distribution-home-hero,
  .distribution-journey-list,
  .distribution-editorial-columns,
  .distribution-editorial-columns.incident-editorial,
  .distribution-editorial-columns.lab-editorial,
  .distribution-next-steps,
  .distribution-included ul,
  .distribution-metric-grid {
    grid-template-columns: 1fr;
  }

  .product-hero-action {
    max-width: none;
    justify-self: stretch;
  }
}

.empty-state {
  max-width: 760px;
  margin: 4rem auto;
  padding: 3rem;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111413;
    --bg-soft: #171b19;
    --surface: rgba(25, 29, 27, 0.94);
    --surface-strong: #202724;
    --surface-soft: rgba(255, 255, 255, 0.03);
    --line: rgba(177, 188, 180, 0.18);
    --line-soft: rgba(177, 188, 180, 0.12);
    --text: #f1f4ef;
    --muted: #a8b4ac;
    --brand: #64cda3;
    --brand-deep: #44ae83;
    --accent: #e5b75a;
    --accent-soft: rgba(229, 183, 90, 0.12);
    --success-bg: rgba(57, 217, 138, 0.12);
    --success-text: #9ee9c6;
    --success-border: rgba(57, 217, 138, 0.24);
    --danger: #ff7a7a;
    --danger-bg: rgba(255, 122, 122, 0.12);
    --danger-text: #ffd2d2;
    --danger-border: rgba(255, 122, 122, 0.24);
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    --body-bg: linear-gradient(180deg, #131715 0%, #101312 42%, #0e1110 100%);
    --header-bg: rgba(8, 13, 22, 0.84);
    --panel-fill: rgba(255, 255, 255, 0.055);
    --panel-fill-soft: rgba(255, 255, 255, 0.035);
    --window-bg: rgba(16, 19, 18, 0.96);
    --video-bg: #080d0c;
    --secondary-button-bg: rgba(255, 255, 255, 0.025);
    --secondary-button-hover: rgba(255, 255, 255, 0.05);
    --control-bg: rgba(255, 255, 255, 0.04);
    --window-dot: rgba(255, 255, 255, 0.22);
    --tag-bg: rgba(100, 205, 163, 0.1);
    --tag-text: #c9f7e1;
    --badge-bg: rgba(100, 205, 163, 0.12);
    --badge-text: #9ee9c6;
    --highlight-bg: linear-gradient(180deg, rgba(100, 205, 163, 0.1), rgba(25, 29, 27, 0.96));
    --highlight-border: rgba(100, 205, 163, 0.24);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111413;
  --bg-soft: #171b19;
  --surface: rgba(25, 29, 27, 0.94);
  --surface-strong: #202724;
  --surface-soft: rgba(255, 255, 255, 0.03);
  --line: rgba(177, 188, 180, 0.18);
  --line-soft: rgba(177, 188, 180, 0.12);
  --text: #f1f4ef;
  --muted: #a8b4ac;
  --brand: #64cda3;
  --brand-deep: #44ae83;
  --accent: #e5b75a;
  --accent-soft: rgba(229, 183, 90, 0.12);
  --success-bg: rgba(57, 217, 138, 0.12);
  --success-text: #9ee9c6;
  --success-border: rgba(57, 217, 138, 0.24);
  --danger: #ff7a7a;
  --danger-bg: rgba(255, 122, 122, 0.12);
  --danger-text: #ffd2d2;
  --danger-border: rgba(255, 122, 122, 0.24);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  --body-bg: linear-gradient(180deg, #131715 0%, #101312 42%, #0e1110 100%);
  --header-bg: rgba(8, 13, 22, 0.84);
  --panel-fill: rgba(255, 255, 255, 0.055);
  --panel-fill-soft: rgba(255, 255, 255, 0.035);
  --window-bg: rgba(16, 19, 18, 0.96);
  --video-bg: #080d0c;
  --secondary-button-bg: rgba(255, 255, 255, 0.025);
  --secondary-button-hover: rgba(255, 255, 255, 0.05);
  --control-bg: rgba(255, 255, 255, 0.04);
  --window-dot: rgba(255, 255, 255, 0.22);
  --tag-bg: rgba(100, 205, 163, 0.1);
  --tag-text: #c9f7e1;
  --badge-bg: rgba(100, 205, 163, 0.12);
  --badge-text: #9ee9c6;
  --highlight-bg: linear-gradient(180deg, rgba(100, 205, 163, 0.1), rgba(25, 29, 27, 0.96));
  --highlight-border: rgba(100, 205, 163, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--body-bg);
  color: var(--text);
  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
  line-height: 1.62;
}

.lab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); }
.lab-nav { display: flex; gap: .45rem; flex-wrap: wrap; }
.lab-nav a { padding: .5rem .8rem; border-radius: 6px; font-size: .9rem; }
.lab-nav a:hover { background: var(--surface-strong); }
.compact-hero { display: flex; align-items: center; justify-content: space-between; }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: .18rem .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status-healthy, .status-up { color: var(--success-text); background: var(--success-bg); border-color: var(--success-border); }
.status-degraded, .status-down, .status-unhealthy { color: var(--danger-text); background: var(--danger-bg); border-color: var(--danger-border); }
.status-unknown { color: var(--muted); background: var(--surface-soft); }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; margin: 1rem 0; }
.metric-grid article { display: flex; flex-direction: column; gap: .4rem; }
.metric-grid strong { font-size: 1.35rem; }
.metric-time { font-size: .8rem !important; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
.panel, .page-hero, .section-heading, .health-list > div, .fact-list dd { min-width: 0; }
.panel p, .panel li, .panel dd, .section-heading span { overflow-wrap: break-word; }
.topology-panel { margin: 1rem 0; overflow: hidden; }
.topology { position: relative; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; padding: 2rem .5rem 8rem; }
.topology > i { height: 2px; background: var(--line); }
.topology .link-healthy { background: var(--brand); }
.topology .link-administratively-disabled { height: 3px; background: repeating-linear-gradient(90deg, var(--danger) 0 8px, transparent 8px 14px); }
.topology .link-protocol-down { height: 3px; background: var(--danger); opacity: .6; }
.topology .link-metric-changed { height: 4px; background: var(--accent); }
.router-node { min-width: 92px; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-strong); text-align: center; font-weight: 750; box-shadow: var(--shadow); }
.router-node small { display: block; margin-top: .2rem; color: var(--muted); font-size: .68rem; font-weight: 500; }
.router-node.provider { border-color: var(--success-border); }
.router-node.core { color: var(--surface-strong); background: var(--brand-deep); }
.router-node.node-degraded { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.rr-drop { position: absolute; left: 50%; top: 5.8rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.rr-drop > i { width: 2px; height: 2.2rem; background: var(--line); }
.health-list > div { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.health-list small { grid-column: 1 / -1; color: var(--muted); }
.fact-list { display: grid; grid-template-columns: 1fr 1.5fr; gap: .6rem 1rem; }
.fact-list dt { color: var(--muted); }.fact-list dd { margin: 0; font-weight: 600; }
.table-wrap { overflow-x: auto; } .table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.table-wrap th, .table-wrap td { padding: .7rem .65rem; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: .86rem; }
.table-wrap th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.empty-state { color: var(--muted); text-align: center !important; padding: 2rem !important; }
.event-payload { overflow: auto; max-height: 65vh; padding: 1rem; border-radius: 6px; background: var(--bg-soft); font-size: .78rem; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.scenario-card { display: flex; flex-direction: column; align-items: flex-start; }
.scenario-card form { margin-top: auto; padding-top: 1rem; }
.active-scenario { margin-bottom: 1rem; border-color: var(--accent); }
.source-badge { display: inline-flex; padding: .12rem .45rem; border-radius: 999px; background: var(--surface-soft); font-size: .72rem; font-weight: 700; }
.source-bgpls { color: var(--brand-deep); background: var(--success-bg); }
.source-bmp { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .topology { overflow-x: auto; min-width: 760px; } }
@media (max-width: 700px) { .scenario-grid { grid-template-columns: 1fr; } }

.incident-progress { border-color: var(--accent); }
.incident-recovery-bar { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto; align-items: center; gap: .8rem; margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.incident-recovery-bar div { display: grid; gap: .2rem; }.incident-recovery-bar span { color: var(--muted); font-size: .82rem; }.incident-recovery-bar .confirmation { margin: 0; }
.incident-stage-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin: 1rem 0; }
.incident-stage-track span { padding: .45rem .25rem; border-bottom: 3px solid var(--line); color: var(--muted); font-size: .72rem; text-align: center; text-transform: uppercase; }
.incident-stage-track span.current { border-color: var(--accent); color: var(--text); font-weight: 800; }
.incident-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.console-command { display: grid; gap: .35rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-soft); text-align: left; cursor: pointer; }
.console-command:hover, .console-command:focus-visible { border-color: var(--brand); background: var(--success-bg); }
.console-command code { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.check-list { padding-left: 0; list-style: none; }.check-list li { padding: .35rem 0; }.check-list .pass { color: var(--success-text); }.check-list .fail { color: var(--danger-text); }.check-list .wait { color: var(--muted); }
.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.evidence-card { display: flex; flex-direction: column; gap: .55rem; padding: .85rem; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--surface-soft); }
.evidence-card p { margin: 0; }.evidence-card label { font-size: .78rem; }.evidence-card input { width: 100%; }.evidence-card button { margin-top: auto; }
.incident-evidence-list { display: grid; gap: .45rem; margin-top: 1rem; }.evidence-record { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .65rem; border-left: 3px solid var(--brand); background: var(--surface-soft); }.evidence-record span { grid-column: 1 / -1; }.evidence-record small { color: var(--muted); }
[data-incident-answers] { display: grid; gap: .75rem; } [data-incident-answers] label { display: grid; gap: .25rem; }
.root-cause-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }.root-cause-form label { display: grid; gap: .25rem; }.root-cause-form fieldset { display: flex; flex-wrap: wrap; gap: .6rem; }.root-cause-form .wide, .root-cause-form output { grid-column: 1 / -1; }.root-cause-form output { font-weight: 650; }
.confirmation { display: block; margin: 1rem 0; }.incident-timeline { display: grid; gap: .55rem; padding-left: 1.2rem; }.incident-timeline li { display: grid; grid-template-columns: 13rem 1fr; gap: 0 1rem; }.incident-timeline span { grid-column: 2; color: var(--muted); }.incident-debrief { white-space: pre-wrap; font-family: inherit; }
.incident-error { border-color: var(--danger-border); color: var(--danger-text); }
@media (max-width: 800px) { .incident-stage-track { grid-template-columns: repeat(2, 1fr); }.incident-recovery-bar { grid-template-columns: 1fr; }.incident-command-grid, .evidence-grid, .root-cause-form { grid-template-columns: 1fr; }.root-cause-form .wide { grid-column: 1; }.incident-timeline li { grid-template-columns: 1fr; }.incident-timeline span { grid-column: 1; } }

/* Fixed React/SVG lab topology. State changes use class transitions only; there is no render loop. */
.topology-livebar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .85rem; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-soft); font-size: .82rem; }
.scenario-live strong { color: var(--accent); }
.transport-live, .transport-polling, .transport-connecting { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.transport-live::before, .transport-polling::before, .transport-connecting::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: var(--brand); }
.transport-polling::before { background: var(--accent); }.transport-connecting::before { background: var(--muted); }
.react-topology-scroll { overflow-x: auto; padding: .75rem 0 .25rem; }
.react-topology { position: relative; min-width: 920px; margin: 0 auto; }
.react-topology > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.topology-edge line { stroke: var(--line); stroke-width: 3; transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease; }
.topology-edge.edge-healthy line { stroke: var(--brand); }
.topology-edge.edge-metric-changed line { stroke: var(--accent); stroke-width: 6; }
.topology-edge.edge-protocol-down line, .topology-edge.edge-adjacency-down line, .topology-edge.edge-down line { stroke: var(--danger); stroke-width: 5; opacity: .65; }
.topology-edge.edge-administratively-disabled line { stroke: var(--danger); stroke-width: 5; stroke-dasharray: 10 7; }
.topology-edge.edge-flapping line { stroke: var(--danger); stroke-width: 5; stroke-dasharray: 3 6; }
.topology-edge.edge-unknown line { stroke: var(--muted); stroke-dasharray: 4 7; opacity: .6; }
.edge-hitbox { overflow: visible; }
.edge-hitbox button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: transparent; background: transparent; cursor: help; }
.edge-hitbox button:focus-visible { color: var(--text); background: var(--surface-strong); outline: 2px solid var(--brand); }
.edge-tooltip-object { overflow: visible; }
.react-router-wrap { position: absolute; z-index: 3; width: 130px; }
.react-router-node { display: flex; width: 130px; min-height: 120px; padding: .7rem .6rem; flex-direction: column; align-items: flex-start; gap: .08rem; border: 2px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface-strong); box-shadow: var(--shadow); text-align: left; cursor: pointer; transition: border-color .25s ease, transform .18s ease, box-shadow .25s ease; }
.react-router-node:hover, .react-router-node:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 16px 34px rgba(15, 98, 76, .16); }
.react-router-node strong { font-size: 1.04rem; letter-spacing: .02em; }
.react-router-node > span { color: var(--muted); font-size: .7rem; }
.react-router-node small { color: var(--muted); font-size: .63rem; line-height: 1.35; }
.react-router-node .node-health { margin: .24rem 0 .1rem; color: var(--success-text); font-size: .66rem; font-weight: 750; text-transform: uppercase; }
.react-router-node em { display: block; max-width: 100%; margin-top: .25rem; overflow: hidden; color: var(--accent); font-size: .62rem; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.react-router-node.node-healthy { border-color: var(--success-border); }
.react-router-node.node-degraded, .react-router-node.node-down { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.react-router-node.node-degraded .node-health, .react-router-node.node-down .node-health, .react-router-node.node-protocol-flapping .node-health { color: var(--danger-text); }
.react-router-node.node-scenario-affected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.react-router-node.node-scenario-affected .node-health { color: var(--accent); }
.react-router-node.node-protocol-flapping { border-color: var(--danger); border-style: dashed; }
.react-router-node.node-unknown { border-style: dashed; opacity: .82; }
.topology-tooltip { position: relative; z-index: 20; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface-strong); box-shadow: 0 20px 50px rgba(15, 23, 42, .22); font-size: .74rem; }
.prefix-tooltip { position: absolute; top: calc(100% + .5rem); left: 0; width: 330px; max-height: 390px; overflow-y: auto; }
.react-router-wrap:nth-of-type(n+5) .prefix-tooltip { right: 0; left: auto; }
.tooltip-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tooltip-heading button { border: 0; color: var(--muted); background: transparent; font-size: 1.2rem; cursor: pointer; }
.prefix-tooltip section { padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.prefix-row { display: flex; flex-direction: column; gap: .08rem; padding: .32rem 0; }
.prefix-row code { font-size: .72rem; overflow-wrap: anywhere; }.prefix-row small, .prefix-row time { color: var(--muted); font-size: .62rem; }
.route-active { color: var(--success-text); }.route-withdrawn { color: var(--danger-text); }.route-stale { color: var(--accent); }
.text-button { margin-top: .55rem; padding: .35rem 0; border: 0; color: var(--brand-deep); background: transparent; font-weight: 750; cursor: pointer; }
.link-tooltip { width: 300px; }
.link-tooltip dl { display: grid; grid-template-columns: 1fr 1.6fr; gap: .28rem .6rem; margin: .55rem 0 0; }
.link-tooltip dt { color: var(--muted); }.link-tooltip dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.topology-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; padding-top: .65rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .68rem; text-transform: capitalize; }
.topology-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-node { width: .7rem; height: .7rem; border: 2px solid var(--line); border-radius: 3px; background: var(--surface-strong); }
.legend-node.node-healthy { border-color: var(--brand); }.legend-node.node-degraded, .legend-node.node-down, .legend-node.node-protocol-flapping { border-color: var(--danger); }.legend-node.node-scenario-affected { border-color: var(--accent); }.legend-node.node-unknown { border-style: dashed; }
.legend-link { width: 1.3rem; height: 3px; background: var(--brand); }.legend-link.edge-metric-changed { background: var(--accent); height: 5px; }.legend-link.edge-adjacency-down { background: var(--danger); }.legend-link.edge-administratively-disabled, .legend-link.edge-flapping { background: repeating-linear-gradient(90deg, var(--danger) 0 5px, transparent 5px 8px); }
.terminal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(3, 10, 9, .72); }
.terminal-modal { width: min(1040px, 96vw); overflow: hidden; border: 1px solid rgba(100, 205, 163, .28); border-radius: 10px; background: #0a1110; box-shadow: 0 28px 90px rgba(0, 0, 0, .5); }
.terminal-modal > header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; color: #eaf8f1; background: #111d1a; }
.terminal-modal > header > div { display: flex; align-items: center; gap: .75rem; }.terminal-modal > header button { border: 0; color: #a8b4ac; background: transparent; font-size: 1.5rem; cursor: pointer; }
.terminal-connection { padding: .16rem .45rem; border-radius: 999px; color: #a8b4ac; background: rgba(255,255,255,.08); font-size: .66rem; text-transform: uppercase; }.terminal-connected { color: #9ee9c6; }.terminal-disconnected { color: #ffd2d2; }
.terminal-credentials { display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding: .65rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); color: #d5efe4; font-size: .76rem; }.terminal-credentials small { width: 100%; color: #a8b4ac; }
.xterm-host { height: 430px; padding: .75rem; background: #0a1110; }.xterm-host .xterm { height: 100%; }
.terminal-modal > footer { padding: .55rem 1rem; color: #8fa49b; background: #111d1a; font-size: .68rem; }
.terminal-error { color: var(--danger-text); }
@media (max-width: 700px) { .topology-livebar { align-items: flex-start; flex-direction: column; }.terminal-credentials { flex-direction: column; }.xterm-host { height: 360px; } }

/* Topology v2: pure SVG graph plus one HTML popover; no foreignObject layout. */
.react-topology-scroll-v2 { width: 100%; padding: .65rem 0 0; }
.topology-stage-v3 { display: grid; grid-template-columns: minmax(620px, 1fr) 310px; gap: 1rem; align-items: stretch; }
.react-topology-v2 { position: relative; width: 100%; min-width: 620px; max-width: 860px; margin: 0 auto; border-radius: 10px; background: radial-gradient(circle at 50% 36%, rgba(22, 120, 93, .055), transparent 42%); }
.react-topology-v2 > svg { display: block; width: 100%; height: auto; min-height: 330px; overflow: visible; }
.svg-link { outline: none; cursor: help; }
.svg-link .link-visible { stroke: var(--brand); stroke-width: 4; stroke-linecap: round; transition: stroke .2s ease, stroke-width .2s ease, opacity .2s ease; }
.svg-link .link-hit-area { stroke: transparent; stroke-width: 28; }
.svg-link:hover .link-visible, .svg-link:focus .link-visible { stroke-width: 7; }
.svg-link.edge-metric-changed .link-visible { stroke: var(--accent); stroke-width: 7; }
.svg-link.edge-protocol-down .link-visible, .svg-link.edge-adjacency-down .link-visible, .svg-link.edge-down .link-visible { stroke: var(--danger); stroke-width: 6; opacity: .72; }
.svg-link.edge-administratively-disabled .link-visible { stroke: var(--danger); stroke-width: 6; stroke-dasharray: 11 9; }
.svg-link.edge-flapping .link-visible { stroke: var(--danger); stroke-width: 6; stroke-dasharray: 3 8; }
.svg-link.edge-unknown .link-visible { stroke: var(--muted); stroke-dasharray: 5 8; opacity: .55; }
.link-metric { pointer-events: none; }
.link-metric rect { fill: var(--surface-strong); stroke: var(--line); stroke-width: 1.5; }
.link-metric text { fill: var(--muted); font: 700 11px "IBM Plex Sans", "Segoe UI", sans-serif; }
.svg-router { outline: none; cursor: pointer; }
.svg-router .router-halo { fill: var(--surface-strong); stroke: var(--brand); stroke-width: 3; filter: url(#node-shadow); transition: stroke .18s ease, stroke-width .18s ease; }
.svg-router:hover .router-halo, .svg-router:focus .router-halo { stroke-width: 5; }
.router-glyph { pointer-events: none; }
.router-glyph rect, .router-glyph circle { fill: rgba(22, 120, 93, .1); stroke: var(--brand-deep); stroke-width: 2.5; }
.router-glyph path { fill: none; stroke: var(--brand-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.router-state-dot { fill: var(--brand); stroke: var(--surface-strong); stroke-width: 3; }
.router-name { fill: var(--text); font: 800 14px "IBM Plex Sans", "Segoe UI", sans-serif; letter-spacing: .02em; }
.router-role { fill: var(--muted); font: 600 9.5px "IBM Plex Sans", "Segoe UI", sans-serif; }
.router-prefix-count { fill: var(--muted); font: 500 9px "IBM Plex Sans", "Segoe UI", sans-serif; }
.svg-router.node-degraded .router-halo, .svg-router.node-down .router-halo, .svg-router.node-protocol-flapping .router-halo { stroke: var(--danger); }
.svg-router.node-degraded .router-state-dot, .svg-router.node-down .router-state-dot, .svg-router.node-protocol-flapping .router-state-dot { fill: var(--danger); }
.svg-router.node-scenario-affected .router-halo { stroke: var(--accent); stroke-width: 6; }
.svg-router.node-scenario-affected .router-state-dot { fill: var(--accent); }
.svg-router.node-protocol-flapping .router-halo, .svg-router.node-unknown .router-halo { stroke-dasharray: 6 6; }
.svg-router.node-unknown .router-halo { stroke: var(--muted); opacity: .7; }
.svg-router.node-unknown .router-state-dot { fill: var(--muted); }
.topology-inspector-v3 { min-width: 0; padding: .8rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-soft); }
.topology-inspector-v3 .topology-tooltip { position: static; width: 100%; max-height: 390px; overflow: auto; box-shadow: none; }
.topology-inspector-empty { display: grid; place-content: center; min-height: 100%; gap: .35rem; color: var(--muted); text-align: center; }
.topology-inspector-empty strong { color: var(--text); }.topology-inspector-empty small { margin-top: .25rem; }
.prefix-tooltip-v2 section { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.topology-console-button { width: 100%; margin-top: .7rem; }
.learning-path { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 2rem; }
.learning-path span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .82rem; }
.learning-path span:not(:last-child)::after { content: "→"; color: var(--muted); margin-left: .35rem; }
.learning-chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.learning-card { display: flex; flex-direction: column; min-width: 0; }
.learning-card h2, .learning-card p { overflow-wrap: anywhere; }
.learning-card .button-row { margin-top: auto; }
.learning-card-meta, .learning-context-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; }
.learning-context-bar { margin-bottom: 1rem; color: var(--muted); }
.chapter-layout { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.chapter-objectives { position: sticky; top: 1rem; display: grid; gap: .7rem; }
.chapter-sections { display: grid; gap: .8rem; }
.chapter-section p:last-child { font-size: 1.04rem; line-height: 1.7; }
.chapter-completion { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.exercise-workspace { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.exercise-instructions { position: sticky; top: 1rem; }
.guided-action-list { display: grid; gap: .6rem; margin: 1rem 0; }
.guided-action-list .console-command { width: 100%; text-align: left; }
.topology-preview-layer { position: fixed; z-index: 40; max-width: 18rem; }
.topology-preview { display: grid; gap: .3rem; pointer-events: auto; box-shadow: 0 12px 36px rgb(0 0 0 / .16); }
.topology-preview code { overflow-wrap: anywhere; }
.topology-stage-v3 { position: relative; }
.svg-router.node-selected .router-halo { stroke-width: 4px; stroke: var(--accent); filter: url(#node-shadow); }
.svg-router.node-highlighted .router-halo { stroke-dasharray: 5 4; }
.router-detail-panel { display: grid; gap: .65rem; min-width: 0; }
.router-detail-panel details { border-top: 1px solid var(--border); padding-top: .55rem; }
.router-detail-panel summary, .incident-drawer summary { cursor: pointer; font-weight: 700; }
.detail-row { display: grid; gap: .18rem; padding: .4rem 0; min-width: 0; }
.detail-row code, .detail-row span, .detail-row time { overflow-wrap: anywhere; }
.command-line { display: block; margin: .3rem 0; white-space: normal; overflow-wrap: anywhere; }
.notice-inline, .guided-command-banner { padding: .65rem .8rem; border-radius: .6rem; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.guided-command-banner { display: flex; justify-content: space-between; gap: 1rem; margin: .7rem 1rem 0; }
.incident-focus-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: 1rem; align-items: start; }
.incident-primary-column, .incident-secondary-column, .incident-drawers { display: grid; gap: 1rem; min-width: 0; }
.incident-secondary-column { position: sticky; top: 1rem; }
.incident-current-task h2 { max-width: 34ch; }
.incident-book-reference { display: flex; gap: .65rem; align-items: center; margin-top: 1rem; }
.incident-drawer > div { padding-top: 1rem; }
.book-reference-dialog { width: min(42rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); color: var(--text); }
.book-reference-dialog::backdrop { background: rgb(0 0 0 / .45); }
.book-reference-dialog header { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 900px) {
  .chapter-layout, .exercise-workspace, .incident-focus-layout { grid-template-columns: 1fr; }
  .chapter-objectives, .exercise-instructions, .incident-secondary-column { position: static; }
  .chapter-completion { align-items: flex-start; flex-direction: column; }
}
.link-tooltip-v2 dl { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(130px, 1.55fr); gap: .36rem .7rem; margin: .7rem 0 0; }
.link-tooltip-v2 dt { color: var(--muted); }.link-tooltip-v2 dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.topology-state-chip { display: inline-flex; margin-top: .45rem; padding: .14rem .45rem; border-radius: 999px; color: var(--success-text); background: var(--success-bg); font-size: .64rem; font-weight: 750; text-transform: uppercase; }
.topology-state-chip.state-protocol-down, .topology-state-chip.state-adjacency-down, .topology-state-chip.state-administratively-disabled { color: var(--danger-text); background: var(--danger-bg); }
@media (max-width: 1050px) { .topology-stage-v3 { grid-template-columns: 1fr; }.topology-inspector-v3 { min-height: 110px; }.topology-inspector-empty { min-height: 80px; } }
@media (max-width: 720px) { .react-topology-scroll-v2 { overflow-x: auto; }.topology-stage-v3 { min-width: 620px; }.react-topology-v2 { min-width: 620px; } }

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--brand-deep);
}

.shell {
  width: min(1240px, calc(100vw - 3rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-icon {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
}

.brand-text {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
}

.brand-mark {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-sub {
  color: var(--muted);
  font-size: 0.8rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lab-primary-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lab-nav-group {
  position: relative;
}

.lab-nav-parent-row {
  display: flex;
  align-items: center;
  border-radius: 0.55rem;
}

.lab-nav-parent-link,
.lab-nav-direct-link {
  padding: 0.5rem 0.62rem;
  border-radius: 0.55rem;
  white-space: nowrap;
}

.lab-nav-parent-link.is-active,
.lab-nav-direct-link.is-active,
.lab-nav-group.is-active .lab-nav-parent-row {
  color: var(--brand-deep);
  background: var(--tag-bg);
}

.lab-nav-submenu-toggle,
.portal-nav-parent-button,
.lab-nav-mobile-trigger {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.lab-nav-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 2rem;
  margin-left: -0.4rem;
  border-radius: 0.45rem;
}

.lab-nav-submenu-toggle:hover,
.lab-nav-submenu-toggle:focus-visible,
.portal-nav-parent-button:hover,
.portal-nav-parent-button:focus-visible,
.lab-nav-mobile-trigger:hover,
.lab-nav-mobile-trigger:focus-visible {
  color: var(--text);
  background: var(--secondary-button-hover);
}

.lab-nav-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.lab-nav-submenu-toggle[aria-expanded="true"] .lab-nav-chevron,
.portal-nav-parent-button[aria-expanded="true"] .lab-nav-chevron,
.lab-nav-mobile-trigger[aria-expanded="true"] .lab-nav-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.portal-nav-parent-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.62rem;
  border-radius: 0.55rem;
  font: inherit;
  white-space: nowrap;
}

.lab-nav-submenu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 11.5rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.42rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.lab-nav-submenu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 0.55rem;
}

.lab-nav-submenu[hidden] {
  display: none;
}

.lab-nav-submenu a {
  padding: 0.52rem 0.62rem;
  border-radius: 0.45rem;
  white-space: nowrap;
}

.lab-nav-submenu a:hover,
.lab-nav-submenu a:focus-visible,
.lab-nav-submenu a.is-active {
  color: var(--brand-deep);
  background: var(--tag-bg);
}

.lab-nav-mobile-trigger {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  font: inherit;
  font-weight: 650;
}

.nav-cta {
  border: 1px solid rgba(30, 132, 99, 0.3);
  border-radius: 999px;
  padding: 0.48rem 0.82rem;
  background: var(--secondary-button-bg);
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "▾";
  display: inline-block;
  margin-left: 0.35rem;
  color: var(--muted);
  font-size: 0.72em;
  transition: transform 140ms ease;
}

.nav-menu[open] summary::after {
  transform: rotate(180deg);
}

.nav-menu-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.7rem);
  right: 0;
  min-width: 13rem;
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.nav-menu-panel a {
  padding: 0.58rem 0.68rem;
  border-radius: 0.55rem;
  white-space: nowrap;
}

.nav-menu-panel a:hover,
.nav-menu-panel a:focus-visible {
  background: var(--secondary-button-bg);
}

.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--secondary-button-bg);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: rgba(100, 205, 163, 0.36);
  background: var(--secondary-button-hover);
  transform: translateY(-1px);
}

.theme-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.nav-subtle {
  color: var(--muted);
}

.page {
  padding: 1.7rem 0 4.8rem;
}

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 1.65rem 0 2.4rem;
}

.footer-row,
.footer-links,
.hero-actions,
.hero-metrics,
.panel-heading,
.pricing-grid,
.grid,
.tag-list,
.flash-stack,
.stack,
.license-summary {
  display: flex;
  gap: 1rem;
}

.footer-row,
.panel-heading {
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  align-items: center;
  flex-wrap: wrap;
}

.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(400px, 0.92fr);
  gap: 2.8rem;
  align-items: start;
  padding: 2.4rem 0 3.2rem;
}

.hero-product h1,
.page-hero h1,
.auth-copy h1,
.simple-shell h1,
.panel h1,
.panel h2,
.panel h3,
.feature-card h3,
.pricing-card h3,
.release-card h2 {
  margin: 0;
  line-height: 1.14;
}

.hero-product h1 {
  font-size: clamp(2.35rem, 4vw, 3.85rem);
  font-weight: 720;
  max-width: 16ch;
  margin-bottom: 0.9rem;
}

.hero-copy {
  max-width: 39rem;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  gap: 2.3rem;
  align-items: end;
  padding: 3rem 0 1.25rem;
}

.home-hero-copy {
  max-width: 720px;
}

.home-hero h1 {
  margin: 0 0 0.85rem;
  max-width: 15ch;
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 760;
}

.home-hero .lead {
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.6vw, 1.14rem);
}

.home-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.summary-topline {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--line);
}

.summary-topline span,
.summary-grid span,
.release-facts span {
  color: var(--muted);
  font-size: 0.8rem;
}

.summary-topline strong {
  font-size: 1.15rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  padding-top: 0.85rem;
}

.summary-grid div,
.release-facts div {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
}

.summary-grid strong,
.release-facts strong {
  display: block;
  margin-top: 0.18rem;
  line-height: 1.25;
}

.signal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0 0 2.1rem;
}

.signal-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-fill-soft);
  color: var(--muted);
  font-size: 0.86rem;
}

.page-hero.compact {
  padding: 0.6rem 0 1.6rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
}

.page-hero h1,
.auth-copy h1,
.simple-shell h1,
.panel h1 {
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
}

.panel h2,
.release-card h2,
.pricing-card h3,
.feature-card h3 {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 22ch;
}

.lead {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
  max-width: 58ch;
  margin: 0;
}

.eyebrow,
.small-label,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: 0.71rem;
  font-weight: 700;
}

.eyebrow {
  color: var(--brand);
  margin: 0 0 0.75rem;
}

.small-label {
  color: var(--muted);
}

.badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid var(--highlight-border);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
}

.panel,
.feature-card,
.pricing-card,
.release-card,
.stat-card,
.hero-card,
.auth-promo,
.plan-summary-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel,
.feature-card,
.pricing-card,
.release-card,
.stat-card,
.auth-promo,
.plan-summary-card {
  padding: 1.15rem;
}

.panel-soft {
  background: var(--panel-fill-soft);
}

.panel-highlight,
.pricing-card-highlight {
  background: var(--highlight-bg);
  border-color: var(--highlight-border);
}

.hero-card {
  padding: 0.85rem;
  background: var(--panel-fill-soft);
}

.product-window {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--window-bg);
  border: 1px solid var(--line-soft);
  min-height: 100%;
}

.window-top {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.window-top span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--window-dot);
}

.window-body {
  padding: 1rem;
}

.product-card {
  padding: 0.9rem;
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
  margin-bottom: 0.8rem;
}

.price-line {
  display: flex;
  align-items: end;
  gap: 0.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0.15rem 0 0.3rem;
}

.price-line span {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-list-row,
.list-row,
.release-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.product-list-row {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
  color: var(--muted);
}

.product-list-row strong,
.release-main > div:first-child,
.release-card h2,
.list-row > div {
  min-width: 0;
}

.product-list-row span {
  justify-self: end;
  text-align: right;
}

.compact-list {
  margin: 1rem 0 0;
  padding-left: 1.05rem;
  color: var(--muted);
}

.compact-list li {
  margin-bottom: 0.45rem;
}

.demo-section {
  padding-top: 0;
}

.demo-heading h2 {
  max-width: 30ch;
}

.demo-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(420px, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}

.demo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-fill);
}

.demo-copy strong {
  font-size: 1.16rem;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

.demo-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.demo-video-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--video-bg);
  box-shadow: var(--shadow);
}

.demo-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--video-bg);
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.workflow-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.workflow-row h2,
.release-copy h2,
.final-cta h2 {
  margin: 0;
  line-height: 1.16;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.workflow-steps article {
  min-width: 0;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
}

.workflow-steps span {
  display: inline-flex;
  margin-bottom: 0.5rem;
  color: var(--brand);
  font-weight: 800;
  font-size: 0.78rem;
}

.workflow-steps strong {
  display: block;
  margin-bottom: 0.2rem;
}

.workflow-steps p {
  margin: 0;
  color: var(--muted);
}

.release-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1fr);
  gap: 1.3rem;
  align-items: start;
}

.release-copy {
  min-width: 0;
}

.release-copy .hero-actions,
.home-hero-copy .hero-actions {
  margin-top: 1.2rem;
}

.release-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 0.4rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.final-cta p {
  max-width: 58ch;
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.release-main {
  align-items: start;
}

.metric {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border-left: 2px solid rgba(100, 205, 163, 0.26);
  background: var(--panel-fill-soft);
  border-radius: var(--radius-md);
}

.metric strong,
.stat-card strong,
.license-summary strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.section {
  padding: 0.9rem 0 2.1rem;
}

.section-contrast {
  padding-top: 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.feature-card {
  background: var(--panel-fill);
}

.step-chip {
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.free-launch-grid {
  grid-template-columns: minmax(0, 420px);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.pricing-top {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pricing-price strong {
  font-size: 2.35rem;
  line-height: 1;
}

.pricing-price span,
.release-meta span,
.stat-card p,
.metric span,
.muted {
  color: var(--muted);
}

.subtle-note {
  margin: -0.25rem 0 0.15rem;
  font-size: 0.9rem;
}

.check-list,
ul.feature-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.check-list li,
ul.feature-list li {
  margin-bottom: 0.65rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  padding: 0.8rem 1.05rem;
  font-size: 0.95rem;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: #70d6a8;
  color: #07130d;
}

.button-secondary {
  border-color: rgba(148, 163, 184, 0.22);
  background: var(--secondary-button-bg);
  color: var(--text);
}

.button-secondary:hover {
  background: var(--secondary-button-hover);
}

.button-small {
  padding: 0.62rem 0.9rem;
  font-size: 0.88rem;
}

.button-full {
  width: 100%;
}

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 2rem;
  align-items: start;
  padding: 1.2rem 0 2.6rem;
}

.auth-copy,
.auth-panel {
  min-width: 0;
}

.auth-promo,
.plan-summary-card {
  margin-top: 1.1rem;
  background: var(--panel-fill-soft);
}

.simple-shell {
  max-width: 600px;
  margin: 0 auto;
  padding: 1.2rem 0 2.6rem;
}

.narrow {
  max-width: 640px;
  margin: 0 auto;
}

.narrow.wide {
  max-width: 900px;
}

.page-header {
  margin-bottom: 1.2rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.form label,
.checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.checkbox {
  flex-direction: row;
  align-items: start;
}

.input,
.textarea,
select {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
}

.textarea {
  min-height: 150px;
  resize: vertical;
}

.textarea.tall {
  min-height: 220px;
}

.flash-stack,
.stack {
  flex-direction: column;
}

.flash {
  padding: 0.9rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(30, 41, 59, 0.08);
}

.flash-success {
  background: #0f624c;
  border-color: #0b4d3b;
  color: #ffffff;
}

.flash-error {
  background: #fff0f2;
  border-color: rgba(159, 29, 45, 0.34);
  color: #7f1422;
}

.flash-warning {
  background: #fff7df;
  border-color: rgba(154, 106, 19, 0.34);
  color: #664300;
}

.flash-info,
.flash-message {
  background: #edf4ff;
  border-color: rgba(38, 84, 128, 0.28);
  color: #1f3f66;
}

:root[data-theme="dark"] .flash {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .flash-success {
  background: #0f624c;
  border-color: #2f9c78;
  color: #ffffff;
}

:root[data-theme="dark"] .flash-error {
  background: rgba(159, 29, 45, 0.22);
  border-color: rgba(255, 122, 122, 0.34);
  color: #ffd9de;
}

:root[data-theme="dark"] .flash-warning {
  background: rgba(154, 106, 19, 0.22);
  border-color: rgba(229, 183, 90, 0.34);
  color: #ffe6a8;
}

:root[data-theme="dark"] .flash-info,
:root[data-theme="dark"] .flash-message {
  background: rgba(64, 102, 150, 0.22);
  border-color: rgba(126, 170, 224, 0.28);
  color: #d9e8ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flash {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  }

  :root:not([data-theme="light"]) .flash-success {
    background: #0f624c;
    border-color: #2f9c78;
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .flash-error {
    background: rgba(159, 29, 45, 0.22);
    border-color: rgba(255, 122, 122, 0.34);
    color: #ffd9de;
  }

  :root:not([data-theme="light"]) .flash-warning {
    background: rgba(154, 106, 19, 0.22);
    border-color: rgba(229, 183, 90, 0.34);
    color: #ffe6a8;
  }

  :root:not([data-theme="light"]) .flash-info,
  :root:not([data-theme="light"]) .flash-message {
    background: rgba(64, 102, 150, 0.22);
    border-color: rgba(126, 170, 224, 0.28);
    color: #d9e8ff;
  }
}

.stat-card {
  background: var(--panel-fill-soft);
}

.release-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.release-artifact-list {
  display: grid;
  gap: 0.55rem;
}

.release-artifact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line-soft);
}

.release-artifact-row > div {
  min-width: 0;
}

.release-artifact-row strong,
.release-artifact-row span {
  display: block;
}

.release-artifact-row span:not(.badge) {
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.9rem;
}

.release-artifact-download {
  border-top: 1px solid var(--line-soft);
}

.release-artifact-download .release-artifact-row {
  border-top: 0;
}

.artifact-install-details {
  padding: 0 0 0.8rem;
}

.artifact-install-details summary {
  width: fit-content;
  color: var(--brand);
  cursor: pointer;
  font-weight: 700;
}

.artifact-install-details .copy-block {
  margin-top: 0.65rem;
}

.action-card {
  display: block;
  color: inherit;
}

.release-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.list-row {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
  align-items: start;
}

.copy-block {
  margin: 1rem 0 0;
  padding: 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(7, 14, 24, 0.72);
  color: #dce8f8;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.83rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre-wrap;
}

.copy-block-wrap {
  position: relative;
}

.copy-block-wrap .copy-block {
  padding-right: 3.7rem;
}

.copy-button {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(12, 23, 39, 0.88);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.copy-button:hover {
  color: var(--text);
  border-color: rgba(100, 205, 163, 0.32);
  transform: translateY(-1px);
}

.copy-button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.copy-button.copied {
  color: var(--brand);
  border-color: rgba(100, 205, 163, 0.36);
}

.copy-button.copy-failed {
  color: var(--danger);
}

.command-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.command-toggle-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.command-toggle-head .muted {
  margin: 0;
}

.command-toggle-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--control-bg);
  flex: 0 0 auto;
}

.command-toggle-option {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  transition: background 140ms ease, color 140ms ease;
}

.command-toggle-option.is-active {
  background: rgba(100, 205, 163, 0.14);
  color: var(--text);
}

.command-toggle .copy-block {
  margin: 0;
}

.tag-list {
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  padding: 0.4rem 0.68rem;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 0.8rem;
}

.tag-github {
  background: var(--control-bg);
  color: var(--text);
}

.license-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.install-hero-panel {
  margin-bottom: 1.5rem;
}

.install-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.install-quick-card {
  padding: 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  background: var(--panel-fill-soft);
}

.install-quick-card strong {
  display: block;
  font-size: 1.05rem;
  margin: 0.2rem 0 0.35rem;
}

.install-guide-grid {
  margin-bottom: 1.4rem;
}

.install-step {
  height: 100%;
}

.install-inline-actions {
  margin-top: 0.25rem;
}

.install-step-head {
  display: flex;
  align-items: start;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 1.15rem;
}

.contact-panel,
.contact-form-panel {
  min-width: 0;
}

.textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.text-link {
  color: var(--brand);
  font-weight: 700;
}

.text-link:hover {
  color: var(--brand-deep);
}

.section-band,
.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-fill-soft);
  margin: 0.8rem calc(50% - 50vw) 2.1rem;
  padding: 2rem calc(50vw - 50%);
}

.split-section,
.marketing-hero,
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 1.4rem;
  align-items: start;
}

.marketing-hero {
  padding: 1.6rem 0 2.6rem;
}

.marketing-hero h1 {
  max-width: 18ch;
}

.offer-card,
.start-card {
  max-width: 430px;
  justify-self: end;
}

.offer-card {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.offer-card strong {
  display: block;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0.8rem 0 0.35rem;
}

.flow-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.flow-node {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
  color: var(--muted);
  font-weight: 700;
}

.flow-node-strong {
  color: var(--text);
  border-color: rgba(100, 205, 163, 0.28);
  background: rgba(100, 205, 163, 0.08);
}

.flow-line {
  width: 1px;
  height: 1rem;
  background: var(--line);
  margin-left: 1.3rem;
}

.flow-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.flow-split .flow-node {
  align-items: flex-start;
  min-height: 4.5rem;
  font-size: 0.86rem;
}

.mini-panel,
.provider-item,
.doc-info-card,
.doc-preview-card {
  padding: 0.95rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--panel-fill);
}

.mini-panel strong,
.provider-item strong,
.doc-info-card strong,
.doc-preview-card strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.mini-panel span,
.provider-item span,
.doc-info-card span,
.doc-preview-card span {
  display: block;
  color: var(--muted);
}

.provider-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.doc-preview-grid,
.doc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.doc-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-preview-card {
  display: block;
  min-height: 8rem;
  color: inherit;
}

.docs-hero {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.seo-landing-hero h1 {
  max-width: 17ch;
}

.seo-summary-panel {
  justify-self: end;
  width: min(100%, 390px);
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.seo-point-list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.seo-point-list li {
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--panel-fill-soft);
  color: var(--text);
  font-weight: 700;
}

.seo-intro {
  max-width: 840px;
  padding-top: 0;
}

.seo-intro p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.seo-section-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.seo-detail-section {
  min-width: 0;
}

.seo-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.docs-toc,
.docs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.docs-toc {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-fill-soft);
}

.docs-toc a,
.docs-sidebar a {
  padding: 0.52rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.docs-toc a:hover,
.docs-sidebar a:hover {
  background: var(--control-bg);
  color: var(--text);
}

.docs-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: 92px;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-fill-soft);
}

.docs-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.doc-section {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.doc-section h2 {
  margin: 0 0 0.65rem;
  line-height: 1.2;
}

.doc-section p {
  color: var(--muted);
}

.doc-section p:last-child {
  margin-bottom: 0;
}

.number-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.number-list li {
  margin-bottom: 0.65rem;
}

.doc-cta {
  background: linear-gradient(180deg, rgba(100, 205, 163, 0.08), rgba(25, 29, 27, 0.94));
}

@media (min-width: 1180px) {
  .page {
    padding-top: 2rem;
  }

  .hero-card {
    padding: 1rem;
  }

  .window-body {
    padding: 1.15rem;
  }

  .product-list-row {
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  }

  .release-card,
  .panel,
  .feature-card,
  .pricing-card,
  .stat-card {
    padding: 1.25rem;
  }
}

@media (max-width: 960px) {
  .home-hero,
  .hero,
  .auth-shell,
  .split-section,
  .marketing-hero,
  .cta-band,
  .release-section,
  .workflow-row,
  .docs-layout,
  .grid-2,
  .grid-3,
  .grid-4,
  .capability-grid,
  .workflow-steps,
  .pricing-grid,
  .contact-grid,
  .install-quick-grid,
  .license-summary,
  .doc-preview-grid,
  .doc-card-grid,
  .seo-section-stack,
  .seo-related-grid,
  .demo-showcase {
    grid-template-columns: 1fr;
  }

  .nav,
  .page-hero.compact,
  .footer-row,
  .panel-heading,
  .release-main,
  .release-artifact-row,
  .command-toggle-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links,
  .hero-actions,
  .hero-metrics {
    flex-wrap: wrap;
  }

  .nav-links {
    width: 100%;
    gap: 0.65rem;
    padding-bottom: 0.75rem;
  }

  .nav-menu-panel {
    position: static;
    margin-top: 0.5rem;
    min-width: min(16rem, 85vw);
  }

  .lab-header-nav {
    min-height: 68px;
    flex-direction: row;
    align-items: center;
  }

  .lab-primary-navigation {
    position: relative;
    width: auto;
    margin-left: auto;
    padding-bottom: 0;
  }

  .lab-nav-mobile-trigger {
    display: inline-flex;
  }

  .lab-primary-menu {
    position: absolute;
    z-index: 70;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: min(20rem, calc(100vw - 2rem));
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--surface-strong);
    box-shadow: var(--shadow);
  }

  .lab-primary-menu.is-open {
    display: flex;
  }

  .lab-nav-parent-row {
    justify-content: space-between;
  }

  .lab-nav-parent-link,
  .portal-nav-parent-button,
  .lab-nav-direct-link {
    flex: 1;
  }

  .portal-nav-parent-button {
    justify-content: space-between;
    width: 100%;
  }

  .lab-nav-submenu {
    position: static;
    min-width: 0;
    margin: 0.15rem 0 0.25rem 0.65rem;
    padding: 0.15rem 0 0.15rem 0.55rem;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .lab-nav-submenu::before {
    display: none;
  }

  .lab-primary-menu .theme-toggle {
    margin: 0.25rem 0 0 0.55rem;
  }

  .release-meta {
    margin-left: 0;
    justify-content: flex-start;
  }

  .page {
    padding-top: 1.2rem;
  }

  .home-hero {
    align-items: start;
    padding-top: 1.25rem;
  }

  .home-hero h1 {
    max-width: 14ch;
  }

  .hero {
    padding-top: 0.8rem;
  }

  .hero-copy,
  .home-hero-copy,
  .section-heading h2 {
    max-width: none;
  }

  .offer-card,
  .start-card,
  .seo-summary-panel {
    max-width: none;
    justify-self: stretch;
  }

  .docs-sidebar {
    display: none;
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(100vw - 1.25rem, 100%);
  }

  .nav {
    min-height: 68px;
  }

  .page {
    padding: 1rem 0 3.2rem;
  }

  .brand-sub {
    display: none;
  }

  .home-hero,
  .hero,
  .auth-shell,
  .simple-shell {
    padding-top: 0.5rem;
  }

  .home-hero {
    gap: 1.1rem;
    padding-bottom: 0.85rem;
  }

  .home-hero h1 {
    font-size: clamp(2.15rem, 12vw, 3rem);
  }

  .summary-grid,
  .release-facts {
    grid-template-columns: 1fr;
  }

  .signal-strip {
    padding-bottom: 1.4rem;
  }

  .panel,
  .feature-card,
  .pricing-card,
  .release-card,
  .stat-card,
  .auth-promo,
  .plan-summary-card,
  .hero-card {
    padding: 1rem;
  }

  .page-hero.compact {
    padding-bottom: 1.2rem;
  }

  .section-heading,
  .hero-actions,
  .final-cta {
    align-items: stretch;
  }

  .section-heading,
  .hero-actions,
  .cta-band,
  .final-cta {
    flex-direction: column;
  }

  .product-window,
  .hero-card,
  .demo-video-card,
  .offer-card,
  .start-card {
    width: 100%;
    max-width: 100%;
  }

  .demo-copy {
    padding: 1rem;
  }

  .workflow-row,
  .release-section,
  .final-cta {
    gap: 1rem;
  }

  .window-body {
    padding: 0.85rem;
  }

  .flow-node,
  .flow-split .flow-node {
    min-height: 0;
  }

  .product-list-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .product-list-row span {
    justify-self: start;
    text-align: left;
  }

  .list-row,
  .release-meta {
    width: 100%;
  }

  .hero-actions .button,
  .section-heading .button,
  .cta-band .button,
  .final-cta .button {
    width: 100%;
  }

  .flow-split {
    grid-template-columns: 1fr;
  }
}
.lab-selector { display: inline-grid; grid-template-columns: auto minmax(10rem, 13rem); align-items: center; column-gap: .45rem; margin-left: auto; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface); }
.lab-selector > span { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lab-selector select { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; }
.lab-selector small { color: var(--muted); font-size: .65rem; }
.lab-selector small { grid-column: 2; }

@media (max-width: 720px) {
  .lab-selector { width: 100%; margin-left: 0; grid-template-columns: auto minmax(0, 1fr); }
}