/* Shared deep product pages */
.breadcrumb {
  padding-top: 34px;
  font-size: 12px;
  color: #647367;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.breadcrumb + .page-head {
  padding-top: 32px;
}
.detail-actions {
  padding-bottom: 10px;
}
.detail-background {
  background: #edf2e8;
  border-top: 1px solid #d9e2d1;
  border-bottom: 1px solid #d9e2d1;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px 44px;
}
.detail-card .mono {
  color: #71816b;
  font-size: 12px;
}
.detail-card h3 {
  font-size: 24px;
  line-height: 1.25;
  margin: 22px 0 14px;
  letter-spacing: -0.7px;
}
.detail-card p {
  font-size: 14px;
  line-height: 1.85;
  color: #57664f;
  margin: 0;
}
.journey {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
}
.journey li {
  border-top: 2px solid #779369;
  padding-top: 25px;
}
.journey h3 {
  font-size: 24px;
  margin: 22px 0 12px;
}
.journey p {
  font-size: 14px;
  line-height: 1.8;
  color: #5d6c53;
}
.outcome-summary {
  margin-top: 48px;
  padding: 35px;
  background: #e9efdf;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  border-radius: 10px;
}
.outcome-summary h3 {
  font-size: 25px;
  line-height: 1.45;
  letter-spacing: -0.6px;
  margin: 12px 0 0;
}
.outcome-summary p {
  font-size: 14px;
  line-height: 1.8;
}
.outcome-summary .small-copy {
  font-size: 12px;
  color: #607252;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.related-grid a {
  border-top: 1px solid #b9c9aa;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 18px;
}
.related-grid a > span:first-child {
  font-size: 12px;
  color: #657b56;
}
.related-grid h3 {
  font-size: 23px;
  line-height: 1.35;
  margin: 0;
}
.cap-panels .text-link {
  margin-top: 25px;
  display: inline-flex;
}
.experience-band {
  background: #e8eddf;
}
.experience-links {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
}
.experience-feature {
  background: #143c36;
  color: #f2f8ed;
  padding: 40px;
  border-radius: 12px;
  display: block;
  position: relative;
  overflow: hidden;
}
.experience-feature > .mono {
  color: #bcd6ae;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.experience-feature h3 {
  font-size: 38px;
  letter-spacing: -1.5px;
  line-height: 1.2;
  margin: 32px 0 17px;
}
.experience-feature p {
  max-width: 390px;
  color: #c2d4c8;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 26px;
}
.mini-path {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 42px 0 15px;
  font-size: 10px;
  color: #c2f6ae;
}
.mini-path span {
  border: 1px solid #4b7461;
  border-radius: 5px;
  padding: 11px 10px;
  background: #21493d;
}
.mini-path i {
  font-style: normal;
}
.experience-side {
  display: grid;
  gap: 24px;
}
.experience-side > a {
  background: #f8fbf3;
  border: 1px solid #d0dcc3;
  border-radius: 12px;
  padding: 30px;
  display: block;
}
.experience-side .mono {
  font-size: 9px;
  letter-spacing: 1px;
  color: #6e805f;
}
.experience-side h3 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.8px;
  margin: 18px 0 13px;
}
.experience-side p {
  font-size: 13px;
  line-height: 1.8;
  color: #617055;
  margin-bottom: 20px;
}
.experience-feature,
.experience-side > a,
.resource-tools > a,
.guide-grid > a {
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.experience-feature:hover,
.experience-side > a:hover,
.resource-tools > a:hover,
.guide-grid > a:hover {
  transform: translateY(-3px);
  border-color: #6d8d5b;
}
.header nav {
  gap: 22px;
}

/* Guided demonstration */
.demo-section {
  padding-bottom: 35px;
}
.demo-disclosure {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #65725e;
  margin-bottom: 18px;
}
.demo-disclosure strong {
  color: #354f39;
}
.demo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #557344;
}
#guided-demo {
  border: 1px solid #b9c9aa;
  border-radius: 12px;
  overflow: hidden;
  background: #fffef9;
  box-shadow: 0 18px 50px #243c2610;
}
.demo-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  padding: 24px 30px;
  border-bottom: 1px solid #d6dfcd;
  background: #f0f4e9;
}
.demo-toolbar label {
  font-size: 11px;
  font-weight: 700;
  display: grid;
  gap: 8px;
  min-width: 300px;
}
.demo-toolbar select {
  background: #fffef9;
  border: 1px solid #b8c8aa;
  border-radius: 5px;
  padding: 11px 35px 11px 12px;
  color: #213e2c;
  font: inherit;
  font-size: 13px;
  max-width: 100%;
}
.demo-toolbar .button {
  font-size: 11px;
  min-height: 42px;
}
.button.outline {
  background: transparent;
  border: 1px solid #a1b38f;
  color: #244c36;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.demo-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}
.demo-sidebar {
  background: #f6f8f0;
  border-right: 1px solid #d6dfcd;
  padding: 30px 22px;
}
.demo-sidebar > .mono {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #7c8c6e;
  margin-bottom: 24px;
}
.demo-sidebar ol {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  margin: 0;
}
.demo-sidebar button {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #596d4c;
  font: inherit;
  font-size: 12px;
  text-align: left;
  background: transparent;
}
.demo-sidebar button[aria-current="step"] {
  background: #214b3b;
  color: #f3faee;
  border-color: #214b3b;
  opacity: 1;
}
.demo-sidebar button.completed {
  color: #284b35;
}
.demo-step-number {
  font-size: 10px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.demo-sidebar > .small-copy {
  font-size: 10px;
  line-height: 1.8;
  color: #7c886e;
  margin-top: 26px;
}
.demo-stage {
  padding: 34px 38px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
}
.demo-stage-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.demo-stage-head .eyebrow {
  margin: 0;
  font-size: 10px;
}
.state-pill {
  padding: 7px 10px;
  border-radius: 99px;
  font-size: 9px;
  background: #eaf1df;
  color: #526a3d;
  border: 1px solid #d3dfc4;
}
.demo-stage h2 {
  font-size: 32px;
  letter-spacing: -1px;
  line-height: 1.2;
  max-width: 600px;
  margin: 0 0 16px;
}
.demo-stage > p {
  font-size: 14px;
  line-height: 1.85;
  color: #59694e;
  margin: 0 0 24px;
}
.demo-evidence {
  margin: 0 0 22px;
  border-top: 1px solid #dde4d4;
}
.demo-evidence > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  border-bottom: 1px solid #dde4d4;
  padding: 16px 0;
}
.demo-evidence dt {
  font-size: 11px;
  font-weight: 700;
  color: #61764f;
}
.demo-evidence dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #344d39;
}
.demo-bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-top: 28px;
}
.demo-bottom > p {
  font-size: 10px;
  color: #6d7e60;
  max-width: 170px;
}
.demo-bottom .button {
  font-size: 11px;
  padding: 12px 17px;
}
.demo-decision {
  padding: 18px;
  background: #fff2db;
  border: 1px solid #e3cea7;
  border-radius: 6px;
}
.demo-decision p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 13px;
  color: #765a29;
}
.demo-decision .button {
  font-size: 11px;
  padding: 10px 15px;
}
.demo-approval {
  display: flex;
  align-items: start;
  gap: 12px;
  background: #e9f1df;
  padding: 20px;
  border: 1px solid #c8d7b8;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.demo-approval input {
  width: 18px;
  height: 18px;
  accent-color: #214b3b;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Workflow library */
.library-note {
  font-size: 13px;
  line-height: 1.8;
  color: #6a795b;
  max-width: 780px;
  margin: 0 0 28px;
}
.library-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 25px;
  background: #ecf1e3;
  border: 1px solid #d5dfc8;
  border-radius: 9px;
}
.library-filters label {
  display: grid;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 0;
}
.library-filters input,
.library-filters select {
  width: 100%;
  min-width: 0;
  border: 1px solid #b9caaa;
  border-radius: 5px;
  background: #fcfef8;
  padding: 12px;
  font: inherit;
  font-size: 12px;
  color: #28462e;
  min-height: 43px;
}
.library-filters .button {
  font-size: 11px;
  padding: 12px 15px;
  min-height: 43px;
}
.library-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 22px 0;
  font-size: 11px;
  color: #5b704f;
}
.workflow-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 23px;
  align-items: start;
}
.workflow-card {
  border: 1px solid #cddbc0;
  border-radius: 9px;
  background: #fcfdf7;
  padding: 26px;
}
.workflow-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  color: #6a7d59;
}
.workflow-card-top .mono {
  font-size: 9px;
  letter-spacing: 1px;
}
.trigger-tag {
  background: #eaf0e1;
  padding: 5px 8px;
  border-radius: 4px;
}
.workflow-card h2 {
  font-size: 25px;
  letter-spacing: -0.8px;
  line-height: 1.25;
  margin: 22px 0 14px;
}
.workflow-card > p {
  font-size: 13px;
  line-height: 1.8;
  color: #617454;
  min-height: 70px;
}
.system-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0;
}
.system-tags span {
  font-size: 9px;
  border: 1px solid #d2dfc4;
  border-radius: 4px;
  padding: 5px 8px;
  color: #728261;
}
.workflow-card summary {
  font-size: 12px;
  padding: 15px 0 0;
  border-top: 1px solid #d3dfc5;
}
.workflow-detail {
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: #566e49;
}
.workflow-detail h3 {
  font-size: 13px;
  color: #29482f;
  margin: 20px 0 9px;
  letter-spacing: 0;
}
.workflow-detail ul,
.workflow-detail ol {
  padding-left: 18px;
  margin: 0;
}
.workflow-detail li {
  padding-left: 3px;
  margin-bottom: 7px;
}
.workflow-detail .button {
  font-size: 10px;
  padding: 11px 13px;
  margin-top: 13px;
}
.empty-state {
  padding: 50px;
  background: #edf2e5;
  text-align: center;
  border-radius: 10px;
}
.empty-state h2 {
  font-size: 28px;
}
.empty-state p {
  font-size: 14px;
}

/* Deployment and resource center */
.deployment-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 23px;
  flex-wrap: wrap;
}
.deployment-tabs button {
  padding: 13px 20px;
  border: 1px solid #bacbac;
  border-radius: 5px;
  background: transparent;
  color: #45623b;
  font: inherit;
  font-size: 12px;
}
.deployment-tabs button[aria-selected="true"] {
  background: #244b39;
  border-color: #244b39;
  color: #f2f9eb;
}
.deployment-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  background: #eaf0df;
  padding: 40px;
  border-radius: 10px;
}
.deployment-panel h2 {
  font-size: 34px;
  line-height: 1.25;
}
.deployment-panel p {
  font-size: 14px;
  line-height: 1.8;
  color: #586e49;
}
.deployment-panel ol {
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #425c37;
}
.deployment-panel li {
  margin-bottom: 20px;
  padding-left: 8px;
}
.architecture-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.architecture-flow article {
  padding: 28px;
  background: #fcfdf8;
  border: 1px solid #c7d7b8;
  border-radius: 8px;
  min-height: 230px;
}
.architecture-flow .mono {
  font-size: 10px;
  color: #6e845b;
}
.architecture-flow h3 {
  font-size: 25px;
  line-height: 1.25;
  margin: 23px 0 15px;
}
.architecture-flow p {
  font-size: 13px;
  line-height: 1.9;
  color: #617353;
}
.flow-arrow {
  font-size: 24px;
  color: #789663;
}
.responsibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
}
.responsibility-grid article {
  padding: 35px;
  border: 1px solid #c7d7b8;
  border-radius: 8px;
}
.responsibility-grid h3 {
  font-size: 25px;
  margin: 0 0 23px;
}
.responsibility-grid ul {
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: #5d714f;
}
.responsibility-grid li {
  margin-bottom: 14px;
  padding-left: 7px;
}
.resource-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 23px;
}
.resource-tools > a {
  padding: 30px;
  border: 1px solid #c8d7b9;
  border-radius: 9px;
  display: block;
  background: #fcfdf6;
}
.resource-tools .mono {
  font-size: 10px;
  color: #7b8f69;
}
.resource-tools h2 {
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -1px;
  margin: 30px 0 17px;
}
.resource-tools p {
  font-size: 14px;
  line-height: 1.8;
  color: #61764f;
  margin-bottom: 25px;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.guide-grid > a {
  padding: 28px 0;
  border-top: 1px solid #bacdac;
}
.guide-grid .mono {
  font-size: 9px;
  color: #708761;
}
.guide-grid h3 {
  font-size: 27px;
  line-height: 1.3;
  margin: 22px 0 18px;
  letter-spacing: -0.9px;
}
.guide-grid p {
  font-size: 14px;
  line-height: 1.8;
  color: #5d714e;
  margin-bottom: 24px;
}
.article-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  gap: 85px;
  padding-bottom: 90px;
}
.article-nav {
  position: sticky;
  top: 115px;
  align-self: start;
  display: grid;
  gap: 15px;
  border-top: 1px solid #bcccab;
  padding-top: 24px;
}
.article-nav .mono {
  font-size: 10px;
  color: #708a5d;
}
.article-nav a {
  font-size: 12px;
  line-height: 1.7;
  color: #5d7550;
}
.article-nav a:hover {
  text-decoration: underline;
}
.guide-prose > section {
  margin-bottom: 48px;
  scroll-margin-top: 125px;
}
.guide-prose .mono {
  font-size: 11px;
  color: #789264;
}
.guide-prose h2 {
  font-size: 30px;
  line-height: 1.25;
  margin: 17px 0 20px;
  letter-spacing: -0.9px;
}
.guide-prose p {
  font-size: 16px;
  line-height: 1.95;
  color: #526749;
}
.guide-checklist {
  padding: 28px;
  background: #e9f0de;
  border-radius: 8px;
  margin-bottom: 32px;
}
.guide-checklist ul {
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #425e36;
}
.guide-checklist li {
  margin-bottom: 8px;
  padding-left: 5px;
}

/* Pilot planner */
.planner-section {
  max-width: 1000px;
  padding-bottom: 90px;
}
.planner-notice {
  background: #eef3e6;
  border: 1px solid #d0ddc2;
  border-radius: 7px;
  padding: 19px 24px;
  font-size: 12px;
  margin-bottom: 23px;
  color: #4d6640;
}
.planner-notice p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
}
.planner-shell {
  border: 1px solid #bccfaf;
  border-radius: 10px;
  background: #fffef9;
  overflow: hidden;
}
.planner-progress {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  background: #edf2e5;
  border-bottom: 1px solid #ccdcc0;
}
.planner-progress li {
  padding: 23px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #819371;
}
.planner-progress li[aria-current="step"] {
  background: #234b39;
  color: #f2f8ec;
}
.planner-progress li.complete {
  color: #2d5639;
}
.planner-progress span {
  font-size: 10px;
  opacity: 0.7;
}
#pilot-planner {
  padding: 38px 44px;
}
#pilot-planner fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
#pilot-planner legend {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.8px;
  font-weight: 600;
  margin-bottom: 28px;
  padding: 0;
}
#pilot-planner label {
  display: grid;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 22px;
}
#pilot-planner input,
#pilot-planner select,
#pilot-planner textarea {
  border: 1px solid #b8cda8;
  background: #fcfdf8;
  border-radius: 5px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 13px;
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  color: #244a32;
  font-weight: 400;
}
#pilot-planner textarea {
  resize: vertical;
}
.field-help {
  font-size: 11px;
  color: #7a8c68;
  margin-top: -12px;
}
.planner-suggestion {
  padding: 20px;
  background: #ecf2e2;
  border: 1px solid #cddabf;
  border-radius: 7px;
  margin-bottom: 25px;
  font-size: 12px;
  line-height: 1.8;
  color: #5c7849;
}
.planner-suggestion p {
  margin: 10px 0 0;
}
.planner-buttons {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
}
.planner-buttons .button:only-child {
  margin-left: auto;
}
.planner-baseline {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
  align-items: start;
  background: #eef3e6;
  padding: 22px;
  border-radius: 6px;
  margin-top: 26px;
}
.planner-baseline h3 {
  font-size: 16px;
  margin: 0 0 10px;
  line-height: 1.4;
}
.planner-baseline p {
  font-size: 11px;
  line-height: 1.7;
  color: #6a8059;
  margin: 0;
}
#pilot-planner .planner-baseline label {
  font-size: 10px;
  margin: 0;
}
.brief-review {
  margin: 0;
}
.brief-review > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  padding: 19px 0;
  border-bottom: 1px solid #d5e0c9;
}
.brief-review dt {
  font-size: 12px;
  font-weight: 700;
  color: #60794e;
}
.brief-review dd {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.planner-commercial {
  font-size: 12px;
  color: #708663;
  line-height: 1.8;
  background: #eef3e8;
  padding: 18px;
  margin: 28px 0;
}
.planner-export {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.planner-export .button {
  font-size: 12px;
}
#planner-status {
  font-size: 12px;
  line-height: 1.7;
  color: #4c703d;
  min-height: 22px;
}
.planner-footer {
  padding: 22px 44px;
  border-top: 1px solid #d5e0c9;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  background: #f7f9f1;
}
.planner-footer button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  padding: 0;
}
.brief-transferred {
  padding: 18px;
  background: #eaf2dd;
  border: 1px solid #bfd4ac;
  border-radius: 6px;
  margin-bottom: 22px;
  font-size: 12px;
  line-height: 1.8;
}
.brief-transferred p {
  margin: 8px 0 0;
}
[hidden] {
  display: none !important;
}
:is(.library-filters, .demo-toolbar, #pilot-planner)
  :is(input, select, textarea):focus-visible {
  outline: 2px solid #578546;
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .header nav {
    gap: 14px;
  }
  .detail-grid,
  .workflow-library,
  .resource-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .demo-workspace {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .demo-stage {
    padding: 28px;
    min-height: 660px;
  }
  .demo-evidence > div {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .library-filters {
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
  }
  .library-filters .button {
    justify-self: start;
  }
  .architecture-flow {
    gap: 10px;
  }
  .architecture-flow article {
    padding: 22px;
    min-height: 255px;
  }
  .article-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 45px;
  }
}
@media (max-width: 760px) {
  .experience-links {
    grid-template-columns: 1fr;
  }
  .experience-side {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .experience-side > a {
    padding: 24px;
  }
  .journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .outcome-summary {
    gap: 28px;
    padding: 28px;
  }
  .demo-workspace {
    grid-template-columns: 1fr;
  }
  .demo-sidebar {
    border-right: 0;
    border-bottom: 1px solid #d6dfcd;
    padding: 18px;
  }
  .demo-sidebar > .mono,
  .demo-sidebar > .small-copy {
    display: none;
  }
  .demo-sidebar ol {
    display: flex;
    overflow: auto;
    gap: 5px;
    padding-bottom: 4px;
  }
  .demo-sidebar button {
    white-space: nowrap;
    padding: 10px;
    font-size: 11px;
    gap: 7px;
  }
  .demo-toolbar {
    padding: 20px;
    flex-wrap: wrap;
    align-items: center;
  }
  .demo-toolbar label {
    min-width: 0;
    width: 100%;
  }
  .demo-toolbar .button {
    padding: 9px 12px;
    min-height: 36px;
  }
  .demo-stage {
    min-height: 0;
    padding: 28px;
  }
  .demo-stage h2 {
    font-size: 30px;
  }
  .demo-bottom {
    margin-top: 25px;
  }
  .deployment-panel {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 30px;
  }
  .architecture-flow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .architecture-flow article {
    min-height: 0;
  }
  .flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
  .responsibility-grid {
    gap: 20px;
  }
  .responsibility-grid article {
    padding: 25px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .article-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .article-nav {
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: 13px 25px;
  }
  .article-nav .mono {
    grid-column: 1/-1;
    margin-bottom: 0;
  }
  .related-grid {
    gap: 20px;
  }
  .related-grid h3 {
    font-size: 20px;
  }
  .planner-progress li {
    padding: 18px;
    font-size: 10px;
    gap: 8px;
  }
  #pilot-planner {
    padding: 30px;
  }
  .planner-baseline {
    grid-template-columns: 1fr 1fr;
  }
  .planner-baseline > div {
    grid-column: 1/-1;
  }
  .brief-review > div {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 20px;
  }
  .planner-footer {
    padding: 22px 30px;
  }
}
@media (max-width: 480px) {
  .detail-grid,
  .workflow-library,
  .resource-tools,
  .responsibility-grid {
    grid-template-columns: 1fr;
  }
  .detail-grid {
    gap: 30px;
  }
  .detail-card h3 {
    font-size: 24px;
    margin-top: 15px;
  }
  .experience-feature {
    padding: 28px;
  }
  .experience-feature h3 {
    font-size: 33px;
  }
  .experience-side {
    grid-template-columns: 1fr;
  }
  .mini-path {
    gap: 6px;
    font-size: 8px;
    margin-top: 30px;
  }
  .mini-path span {
    padding: 8px;
  }
  .journey {
    gap: 25px 20px;
  }
  .journey h3 {
    font-size: 22px;
  }
  .journey p {
    font-size: 12px;
  }
  .outcome-summary {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
  }
  .outcome-summary h3 {
    font-size: 24px;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .related-grid a {
    gap: 12px;
  }
  .related-grid h3 {
    font-size: 23px;
  }
  .demo-disclosure {
    font-size: 10px;
    line-height: 1.7;
  }
  .demo-stage {
    padding: 22px;
  }
  .demo-stage h2 {
    font-size: 28px;
  }
  .demo-stage > p {
    font-size: 13px;
  }
  .demo-stage-head .eyebrow {
    font-size: 8px;
  }
  .state-pill {
    font-size: 8px;
  }
  .demo-evidence > div {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 14px 0;
  }
  .demo-evidence dd {
    font-size: 12px;
  }
  .demo-bottom {
    display: block;
    margin-top: 10px;
  }
  .demo-bottom > p {
    max-width: none;
    margin-bottom: 18px;
  }
  .demo-bottom .button-row {
    justify-content: space-between;
    gap: 10px;
  }
  .demo-approval {
    padding: 15px;
    font-size: 12px;
  }
  .library-filters {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .library-meta {
    display: block;
    line-height: 1.8;
  }
  .library-meta a {
    display: block;
    margin-top: 13px;
  }
  .workflow-card > p {
    min-height: 0;
  }
  .deployment-tabs button {
    padding: 10px 12px;
    font-size: 11px;
  }
  .deployment-panel {
    padding: 24px;
  }
  .deployment-panel h2 {
    font-size: 30px;
  }
  .article-nav {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .guide-prose h2 {
    font-size: 28px;
  }
  .guide-prose p {
    font-size: 15px;
  }
  .planner-progress li {
    padding: 17px 10px;
    display: block;
    font-size: 9px;
    line-height: 1.6;
  }
  .planner-progress span {
    display: block;
    font-size: 9px;
    margin-bottom: 5px;
  }
  #pilot-planner {
    padding: 25px 20px;
  }
  #pilot-planner legend {
    font-size: 25px;
  }
  #pilot-planner input,
  #pilot-planner select,
  #pilot-planner textarea {
    font-size: 16px;
    padding: 11px;
  }
  .planner-buttons .button {
    padding: 12px;
    font-size: 11px;
    gap: 8px;
  }
  .planner-buttons {
    gap: 10px;
  }
  .brief-review > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .brief-review dd {
    font-size: 13px;
  }
  .planner-footer {
    padding: 20px;
    gap: 15px;
    font-size: 10px;
  }
  .planner-export .button {
    font-size: 11px;
    padding: 12px;
  }
  .planner-baseline {
    padding: 18px;
    gap: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .experience-feature,
  .experience-side > a,
  .resource-tools > a,
  .guide-grid > a {
    transition: none;
  }
}

.hero-position {
  font-size: 20px;
  line-height: 1.5;
  color: #c2f6ae;
  margin: 25px 0 0;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.hero-position + .hero-lede {
  margin-top: 15px;
}
@media (max-width: 640px) {
  .hero-position {
    font-size: 18px;
    margin-top: 23px;
  }
}