:root {
  --ink: #171513;
  --ink-soft: #514b46;
  --paper: #fbfaf8;
  --paper-warm: #f1eee9;
  --panel: #ffffff;
  --orange: #d95521;
  --orange-dark: #9e3512;
  --orange-soft: #f5dfd4;
  --red: #b52d22;
  --red-soft: #f8e4e1;
  --green: #27654f;
  --green-soft: #deece6;
  --line: #d8d1ca;
  --dark: #1c1a18;
  --header-height: 72px;
  --content: 1180px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  padding: 0 max(24px, calc((100vw - var(--content)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
  background: var(--dark);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  white-space: nowrap;
}

.brand-drink,
.brand-x {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -1.4px;
}

.brand-x {
  color: #f4773d;
}

.brand-product {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #c9c2bb;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a,
.print-button {
  border: 0;
  padding: 10px 0;
  color: #e9e5e0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.print-button:hover,
.print-button:focus-visible {
  color: #ff8a52;
}

.nav-menu {
  position: relative;
  display: none;
}

.nav-menu summary {
  padding: 10px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(260px, calc(100vw - 32px));
  padding: 10px;
  display: grid;
  background: var(--dark);
  border: 1px solid #3c3732;
}

.nav-panel a {
  padding: 13px 14px;
  color: #e9e5e0;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}

.nav-panel a:hover,
.nav-panel a:focus-visible,
.nav-panel a[aria-current="page"] {
  color: #ff8a52;
  background: #28241f;
}

#solutions,
#schedule,
#documents {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

:focus-visible {
  outline: 3px solid #f4773d;
  outline-offset: 4px;
}

.support-hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #211d19;
}

.support-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.support-hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 17, 14, .98) 0%, rgba(20, 17, 14, .9) 43%, rgba(20, 17, 14, .34) 100%),
    linear-gradient(0deg, rgba(20, 17, 14, .42), transparent 55%);
}

.support-hero-content {
  position: relative;
  z-index: 2;
  width: min(690px, calc(100% - 48px));
  margin-left: max(24px, calc((100vw - var(--content)) / 2));
  padding: 64px 0;
  color: #fff;
}

.context-line {
  margin: 0 0 22px;
  color: #f2b18e;
  font-size: 16px;
  font-weight: 650;
}

.support-hero h1 {
  max-width: 650px;
  margin: 0 0 40px;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -3.2px;
}

.search-form label {
  display: block;
  margin-bottom: 10px;
  color: #e6dfd9;
  font-size: 15px;
}

.search-control {
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 68px;
  background: #fff;
}

.search-control input {
  min-width: 0;
  border: 0;
  padding: 0 22px;
  color: var(--ink);
  background: #fff;
  font-size: 18px;
}

.search-control input::placeholder {
  color: #7a726b;
}

.search-control input:focus {
  outline: none;
}

.search-control button {
  border: 0;
  padding: 0 28px;
  color: #fff;
  background: var(--orange);
  font-weight: 750;
  cursor: pointer;
}

.search-control button:hover,
.search-control button:focus-visible {
  background: var(--orange-dark);
}

.quick-queries {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  color: #d7d0ca;
  font-size: 14px;
}

.quick-queries button {
  border: 0;
  padding: 3px 0;
  color: #fff;
  background: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.quick-queries button:hover,
.quick-queries button:focus-visible {
  color: #f2b18e;
}

.hero-brand {
  position: absolute;
  z-index: 1;
  right: max(24px, calc((100vw - var(--content)) / 2));
  top: 50%;
  display: flex;
  align-items: baseline;
  color: rgba(255, 255, 255, .18);
  font-size: clamp(132px, 17vw, 292px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -14px;
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-brand-x {
  color: rgba(244, 119, 61, .62);
}

.workspace,
.schedule-section,
.documents-section {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
}

.workspace {
  padding: 92px 0 104px;
}

.workspace-heading,
.documents-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 38px;
}

.workspace-heading h2,
.schedule-intro h2,
.documents-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.workspace-heading p,
.schedule-intro p,
.documents-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
}

.workspace-heading .result-count {
  flex: 0 0 auto;
  color: var(--ink);
  font-weight: 700;
}

.category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.category-button {
  border: 0;
  border-radius: 0;
  padding: 10px 14px;
  color: var(--ink-soft);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.category-button:hover,
.category-button:focus-visible {
  color: var(--orange-dark);
  background: var(--orange-soft);
}

.category-button.is-active {
  color: #fff;
  background: var(--ink);
}

.solution-list {
  border-top: 2px solid var(--ink);
}

.solution-item {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.solution-item[hidden] {
  display: none;
}

.solution-link {
  min-height: 138px;
  padding: 26px 10px;
  display: grid;
  grid-template-columns: 64px minmax(280px, 1fr) 210px 170px;
  align-items: center;
  gap: 24px;
  text-decoration: none;
}

.solution-item:hover,
.solution-item:focus-within {
  background: #fff;
}

.solution-primary {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}

.solution-primary:hover,
.solution-primary:focus-within {
  background: var(--orange-dark);
}

.solution-number {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.solution-copy {
  display: grid;
  gap: 7px;
}

.solution-copy strong {
  font-size: 24px;
  line-height: 1.15;
}

.solution-copy span {
  max-width: 630px;
  color: var(--ink-soft);
  font-size: 16px;
}

.solution-primary .solution-copy span {
  color: #ffece3;
}

.solution-meta {
  color: var(--ink-soft);
  font-size: 14px;
}

.solution-primary .solution-meta {
  color: #ffece3;
}

.solution-action {
  justify-self: end;
  font-size: 14px;
  font-weight: 750;
}

.solution-action::after {
  content: " ↗";
}

.empty-state {
  padding: 72px 24px;
  text-align: center;
  background: var(--paper-warm);
}

.empty-state strong {
  font-size: 26px;
}

.empty-state p {
  max-width: 540px;
  margin: 12px auto 24px;
  color: var(--ink-soft);
}

.empty-state button {
  border: 0;
  padding: 13px 18px;
  color: #fff;
  background: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.schedule-section {
  padding: 86px 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 72px;
  position: relative;
  color: var(--ink);
}

.schedule-table-wrap {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}

.schedule-table th,
.schedule-table td {
  padding: 20px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.schedule-table thead th {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
}

.schedule-table tbody th {
  width: 31%;
  color: var(--ink);
}

.schedule-table a {
  color: var(--ink);
}

.schedule-table td {
  color: var(--ink-soft);
}

.schedule-mark {
  color: var(--orange-dark);
  font-weight: 750;
}

.schedule-intro p {
  color: var(--ink-soft);
}

.documents-section {
  padding: 104px 0;
}

.document-list {
  border-top: 2px solid var(--ink);
}

.document-row {
  padding: 20px 8px;
  display: grid;
  grid-template-columns: 86px 1fr 130px;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.document-row:hover,
.document-row:focus-visible {
  background: var(--paper-warm);
}

.document-type {
  color: var(--orange-dark);
  font-size: 13px;
  font-weight: 800;
}

.document-row > span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.document-row strong {
  font-size: 18px;
}

.document-row small {
  color: var(--ink-soft);
  font-size: 14px;
}

.document-open {
  justify-self: end;
  font-size: 14px;
  font-weight: 750;
}

.document-open::after {
  content: " ↗";
}

.site-footer {
  padding: 48px max(24px, calc((100vw - var(--content)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
  background: #0f0e0d;
}

.site-footer strong {
  font-size: 22px;
}

.site-footer p {
  margin: 6px 0 0;
  color: #bdb5ae;
}

.site-footer a {
  color: #ff9b68;
  font-size: 20px;
  font-weight: 750;
}

/* Procedure */

.procedure-page {
  background: #f7f5f1;
}

.procedure-header {
  position: sticky;
  top: 0;
}

.procedure-title,
.safety-notice,
.preparation,
.progress-strip,
.procedure-steps,
.completion-panel,
.source-note {
  width: min(1080px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.procedure-title {
  padding: 54px 0 42px;
}

.back-link {
  display: inline-block;
  margin-bottom: 44px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--orange-dark);
}

.procedure-title-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: end;
  gap: 70px;
}

.procedure-kind {
  margin: 0 0 16px;
  color: var(--orange-dark);
  font-weight: 750;
}

.procedure-title h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(46px, 7vw, 84px);
  line-height: .96;
  letter-spacing: -4px;
}

.procedure-lead {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 20px;
}

.procedure-facts {
  margin: 0;
}

.procedure-facts div {
  padding: 13px 0;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.procedure-facts dt {
  color: var(--ink-soft);
  font-size: 13px;
}

.procedure-facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
}

.safety-notice {
  margin-top: 24px;
  margin-bottom: 72px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  color: #501711;
  background: var(--red-soft);
  border-left: 8px solid var(--red);
}

.safety-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 850;
}

.safety-notice h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.safety-notice p {
  max-width: 840px;
  margin: 0;
  font-size: 16px;
}

.preparation {
  padding: 0 0 64px;
  display: grid;
  grid-template-columns: 70px 280px 1fr;
  gap: 28px;
}

.section-number {
  color: var(--orange);
  font-size: 20px;
  font-weight: 850;
}

.preparation h2 {
  margin: 0 0 10px;
  font-size: 34px;
}

.preparation p {
  margin: 0;
  color: var(--ink-soft);
}

.checklist {
  display: grid;
  gap: 10px;
}

.checklist label,
.step-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.checklist label {
  min-height: 48px;
  padding: 12px 14px;
  background: #fff;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--green);
  flex: 0 0 auto;
}

.progress-strip {
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  min-height: 52px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: #fff;
  background: var(--dark);
  font-size: 13px;
}

.progress-track {
  height: 5px;
  overflow: hidden;
  background: #514b46;
}

.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: #f4773d;
  transition: width .25s ease;
}

.progress-strip strong {
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.procedure-steps {
  padding: 56px 0 32px;
}

.procedure-step {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  background: #fff;
  border-bottom: 14px solid #f7f5f1;
}

.step-visual {
  min-height: 430px;
  background: #25211e;
  overflow: hidden;
}

.step-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-visual-contain {
  padding: 34px;
  background: #ede8e2;
}

.step-visual-contain img {
  object-fit: contain;
}

.step-copy {
  padding: 46px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step-index {
  margin-bottom: 36px;
  color: var(--orange);
  font-size: 18px;
  font-weight: 850;
}

.step-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(29px, 3.2vw, 42px);
  line-height: 1.04;
  letter-spacing: -1.6px;
}

.step-command {
  margin: 0;
  font-size: 18px;
}

.step-result {
  margin: 20px 0 0;
  padding-top: 18px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.step-check {
  margin-top: auto;
  padding-top: 30px;
  color: var(--green);
  font-weight: 750;
}

.procedure-step-text {
  color: #fff;
  background: var(--dark);
}

.cycle-display {
  min-height: 430px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(213, 85, 33, .72), rgba(78, 28, 12, .16)),
    #2a201a;
}

.cycle-display span {
  color: #ffd0b8;
  font-size: 16px;
  font-weight: 800;
}

.cycle-display strong {
  margin: 14px 0;
  font-size: clamp(70px, 9vw, 124px);
  line-height: 1;
  letter-spacing: -6px;
  font-variant-numeric: tabular-nums;
}

.cycle-display small {
  color: #ead8ce;
  font-size: 16px;
}

.procedure-step-text .step-result,
.procedure-step-text details {
  color: #ded5cf;
  border-color: #5e5852;
}

.procedure-step-text .step-check {
  color: #8ed0b3;
}

details {
  width: 100%;
  margin-top: 22px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

summary {
  font-weight: 750;
  cursor: pointer;
}

details p {
  margin: 12px 0 0;
}

.procedure-step-final {
  color: #fff;
  background: #153f31;
}

.final-state {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #27654f;
}

.final-state span {
  font-size: 120px;
  line-height: 1;
}

.final-state strong {
  margin-top: 18px;
  font-size: 24px;
}

.procedure-step-final .step-result {
  color: #d7eee4;
  border-color: #4c735f;
}

.procedure-step-final .step-check {
  color: #b8ead3;
}

.completion-panel {
  margin-top: 38px;
  margin-bottom: 34px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: var(--green-soft);
}

.completion-panel h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.completion-panel p {
  margin: 0;
  color: #365a4c;
}

.completion-panel button {
  flex: 0 0 auto;
  border: 0;
  padding: 12px 16px;
  color: #fff;
  background: var(--green);
  font-weight: 750;
  cursor: pointer;
}

.completion-panel button:hover,
.completion-panel button:focus-visible {
  background: #194a39;
}

.source-note {
  margin-top: 0;
  margin-bottom: 80px;
  color: var(--ink-soft);
  font-size: 13px;
}

/* Diagnostic route */

.decision-gate,
.data-branch,
.milk-route,
.diagnostic-checks,
.diagnostic-summary,
.escalation-list {
  width: min(1080px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

#data-branch,
#physical-route {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.decision-gate {
  margin-top: 24px;
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  color: #fff;
  background: var(--dark);
}

.decision-question {
  padding: 34px 36px;
  align-self: center;
}

.decision-question > span,
.route-code {
  color: #db8a61;
  font-size: 13px;
  font-weight: 800;
}

.decision-question h2 {
  margin: 12px 0 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -1px;
}

.decision-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #2b2825;
}

.decision-option {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: #f2eeea;
  text-decoration: none;
}

.decision-option + .decision-option {
  border-left: 1px solid #56504b;
}

.decision-option strong {
  font-size: 19px;
}

.decision-option span {
  color: #cfc7c0;
  font-size: 14px;
}

.decision-option:hover,
.decision-option:focus-visible {
  color: #fff;
  background: #3b3530;
}

.decision-option-primary {
  background: #66301e;
}

.decision-option-primary:hover,
.decision-option-primary:focus-visible {
  background: #7d3922;
}

.data-branch {
  margin-bottom: 78px;
  padding: 38px 40px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px 54px;
  background: #fff;
}

.data-branch h2,
.route-heading h2,
.diagnostic-summary h2,
.escalation-list h2 {
  margin: 8px 0 10px;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.data-branch p {
  margin: 0;
  color: var(--ink-soft);
}

.data-branch ol {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 12px;
}

.data-branch .branch-exit,
.data-branch .text-action {
  grid-column: 2;
}

.data-branch .branch-exit {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.text-action {
  width: fit-content;
  color: var(--orange-dark);
  font-weight: 800;
}

.milk-route {
  margin-bottom: 56px;
}

.route-heading {
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: end;
  gap: 52px;
}

.route-heading p {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 16px;
}

.route-board {
  margin: 0;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  color: #fff;
  background: var(--dark);
}

.route-photo {
  min-height: 430px;
  overflow: hidden;
  background: #302b27;
}

.route-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.route-board figcaption {
  padding: 42px 44px;
}

.route-board figcaption > strong {
  display: block;
  margin-bottom: 26px;
  color: #d7cfc8;
  font-size: 15px;
}

.route-board ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.route-board li {
  min-height: 68px;
  padding: 17px 10px 15px 0;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #504a45;
  font-weight: 700;
}

.route-board li:nth-child(odd) {
  margin-right: 24px;
}

.route-board li span {
  color: #e59469;
  font-variant-numeric: tabular-nums;
}

.diagnostic-progress-strip {
  width: min(1080px, calc(100% - 48px));
}

.diagnostic-checks {
  padding: 50px 0 32px;
}

.diagnostic-checkpoint {
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(300px, 380px) 92px minmax(0, 1fr);
  background: #fff;
  border-bottom: 12px solid #f7f5f1;
}

.checkpoint-media,
.checkpoint-schematic {
  min-height: 470px;
  overflow: hidden;
  background: #26221f;
}

.checkpoint-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkpoint-media-contain {
  padding: 28px;
  background: #eae5df;
}

.checkpoint-media-contain img {
  object-fit: contain;
}

.checkpoint-index {
  padding: 42px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--orange-dark);
  background: #f0ece6;
}

.checkpoint-index span {
  font-size: 22px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.checkpoint-index small {
  color: var(--ink-soft);
  font-size: 12px;
}

.diagnostic-checkpoint.is-pass .checkpoint-index {
  color: #fff;
  background: var(--green);
}

.diagnostic-checkpoint.is-pass .checkpoint-index small,
.diagnostic-checkpoint.is-fail .checkpoint-index small {
  color: inherit;
}

.diagnostic-checkpoint.is-fail .checkpoint-index {
  color: #fff;
  background: var(--red);
}

.checkpoint-body {
  padding: 40px 44px;
}

.checkpoint-body h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -1.4px;
}

.checkpoint-body > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.checkpoint-body ul {
  margin: 22px 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.checkpoint-failure {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px !important;
}

.checkpoint-result {
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
}

.checkpoint-result legend {
  width: 100%;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
}

.checkpoint-result label {
  min-height: 44px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  background: #eee9e3;
  cursor: pointer;
}

.checkpoint-result label:has(input:checked) {
  color: #fff;
  background: var(--green);
}

.checkpoint-result label:has(input[value="fail"]:checked) {
  background: var(--red);
}

.checkpoint-result input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: currentColor;
}

.checkpoint-schematic {
  padding: 42px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #2b2622;
}

.checkpoint-schematic span {
  color: #df966f;
  font-size: 14px;
  font-weight: 800;
}

.checkpoint-schematic strong {
  max-width: 260px;
  margin: 16px 0;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: .98;
  letter-spacing: -2px;
}

.checkpoint-schematic small {
  max-width: 240px;
  color: #cfc5bd;
  font-size: 15px;
}

.checkpoint-dark {
  color: #fff;
  background: #211e1b;
}

.checkpoint-dark .checkpoint-index {
  background: #3d3732;
}

.checkpoint-dark .checkpoint-body > p,
.checkpoint-dark .checkpoint-failure,
.checkpoint-dark .checkpoint-result legend {
  color: #cec5be;
}

.checkpoint-dark .checkpoint-body ul {
  color: #eee8e3;
}

.checkpoint-dark .checkpoint-failure {
  border-color: #59514b;
}

.checkpoint-dark .checkpoint-result label {
  color: #fff;
  background: #49413b;
}

.checkpoint-final {
  background: #e2eee8;
}

.checkpoint-final .checkpoint-index {
  background: #c7ddd3;
}

.diagnostic-summary {
  margin-top: 34px;
  margin-bottom: 36px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  color: #fff;
  background: var(--dark);
}

.diagnostic-summary .route-code {
  color: #e59469;
}

.diagnostic-summary h2 {
  color: #fff;
}

.diagnostic-summary p {
  max-width: 700px;
  margin: 0;
  color: #cec5be;
}

.diagnostic-summary button {
  flex: 0 0 auto;
  border: 0;
  padding: 13px 16px;
  color: var(--ink);
  background: #f0eae4;
  font-weight: 800;
  cursor: pointer;
}

.diagnostic-summary button:hover,
.diagnostic-summary button:focus-visible {
  background: #fff;
}

.escalation-list {
  margin-bottom: 38px;
  padding: 34px 40px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  background: #fff;
}

.escalation-list ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  .support-hero-shade {
    background: linear-gradient(90deg, rgba(20, 17, 14, .96), rgba(20, 17, 14, .64));
  }

  .solution-link {
    grid-template-columns: 48px 1fr auto;
  }

  .solution-meta {
    grid-column: 2;
  }

  .solution-action {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .schedule-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .procedure-title-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .procedure-facts {
    max-width: 560px;
  }

  .preparation {
    grid-template-columns: 50px 1fr;
  }

  .checklist {
    grid-column: 2;
  }

  .procedure-step {
    grid-template-columns: 1fr;
  }

  .step-visual,
  .cycle-display,
  .final-state {
    min-height: 390px;
  }

  .decision-gate,
  .route-heading,
  .data-branch,
  .route-board,
  .diagnostic-checkpoint,
  .escalation-list {
    grid-template-columns: 1fr;
  }

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

  .data-branch .branch-exit,
  .data-branch .text-action {
    grid-column: 1;
  }

  .route-photo {
    min-height: 360px;
  }

  .diagnostic-checkpoint {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .checkpoint-media,
  .checkpoint-schematic {
    grid-column: 1 / -1;
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 62px;
  }

  .site-header {
    padding: 0 16px;
  }

  .brand-product {
    display: none;
  }

  .site-nav {
    gap: 12px;
  }

  .site-nav a,
  .print-button {
    font-size: 13px;
  }

  .support-hero {
    min-height: calc(100svh - var(--header-height));
    align-items: end;
  }

  .support-hero-shade {
    background:
      linear-gradient(0deg, rgba(20, 17, 14, .98) 0%, rgba(20, 17, 14, .88) 48%, rgba(20, 17, 14, .2) 100%);
  }

  .hero-brand {
    top: 12%;
    right: 16px;
    font-size: 24vw;
    letter-spacing: -7px;
    transform: none;
  }

  .support-hero-content {
    width: calc(100% - 32px);
    margin-left: 16px;
    padding: 42px 0 34px;
  }

  .context-line {
    margin-bottom: 14px;
    font-size: 14px;
  }

  .support-hero h1 {
    margin-bottom: 28px;
    font-size: 44px;
    letter-spacing: -2px;
  }

  .search-control {
    min-height: 58px;
  }

  .search-control input {
    padding: 0 14px;
    font-size: 16px;
  }

  .search-control button {
    padding: 0 17px;
  }

  .quick-queries {
    gap: 7px 14px;
  }

  .workspace,
  .schedule-section,
  .documents-section,
  .procedure-title,
  .safety-notice,
  .preparation,
  .progress-strip,
  .procedure-steps,
  .completion-panel,
  .source-note {
    width: calc(100% - 32px);
  }

  .workspace {
    padding: 62px 0 72px;
  }

  .workspace-heading,
  .documents-heading {
    display: block;
  }

  .workspace-heading h2,
  .schedule-intro h2,
  .documents-heading h2 {
    font-size: 36px;
    letter-spacing: -1.4px;
  }

  .workspace-heading .result-count {
    margin-top: 16px;
  }

  .category-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 8px;
  }

  .category-button {
    flex: 0 0 auto;
  }

  .solution-link {
    min-height: 0;
    padding: 22px 6px;
    grid-template-columns: 38px 1fr;
    gap: 10px 12px;
  }

  .solution-copy strong {
    font-size: 21px;
  }

  .solution-copy span {
    font-size: 15px;
  }

  .solution-meta,
  .solution-action {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }

  .solution-action {
    margin-top: 4px;
  }

  .schedule-section {
    padding: 64px 0;
  }

  .documents-section {
    padding: 72px 0;
  }

  .document-row {
    grid-template-columns: 60px 1fr;
    gap: 14px;
  }

  .document-open {
    grid-column: 2;
    justify-self: start;
  }

  .site-footer {
    padding: 38px 16px;
    display: block;
  }

  .site-footer a {
    display: inline-block;
    margin-top: 24px;
    font-size: 18px;
  }

  .procedure-title {
    padding: 34px 0 28px;
  }

  .back-link {
    margin-bottom: 32px;
  }

  .procedure-title h1 {
    font-size: 48px;
    letter-spacing: -2.5px;
  }

  .procedure-lead {
    font-size: 18px;
  }

  .safety-notice {
    margin-top: 18px;
    margin-bottom: 52px;
    padding: 22px 20px;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    border-left-width: 6px;
  }

  .safety-symbol {
    width: 34px;
    height: 34px;
    border-width: 2px;
    font-size: 20px;
  }

  .preparation {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 48px;
  }

  .section-number,
  .checklist {
    grid-column: 1;
  }

  .progress-strip {
    width: 100%;
    padding: 0 16px;
  }

  .procedure-steps {
    width: 100%;
    padding-top: 0;
  }

  .procedure-step {
    border-bottom-width: 10px;
  }

  .step-visual,
  .cycle-display,
  .final-state {
    min-height: 300px;
  }

  .step-visual-contain {
    padding: 22px;
  }

  .step-copy {
    padding: 32px 22px 34px;
  }

  .step-index {
    margin-bottom: 24px;
  }

  .step-copy h2 {
    font-size: 34px;
  }

  .step-command {
    font-size: 17px;
  }

  .cycle-display {
    padding: 34px 24px;
  }

  .cycle-display strong {
    font-size: 68px;
    letter-spacing: -4px;
  }

  .completion-panel {
    margin-top: 28px;
    padding: 24px;
    display: block;
  }

  .completion-panel button {
    margin-top: 22px;
  }

  .decision-gate,
  .data-branch,
  .milk-route,
  .diagnostic-checks,
  .diagnostic-summary,
  .escalation-list,
  .diagnostic-progress-strip {
    width: calc(100% - 32px);
  }

  .diagnostic-title h1 {
    font-size: 44px;
  }

  .decision-gate {
    margin-bottom: 48px;
  }

  .decision-question {
    padding: 28px 24px;
  }

  .decision-options {
    grid-template-columns: 1fr;
  }

  .decision-option {
    padding: 24px;
  }

  .decision-option + .decision-option {
    border-top: 1px solid #56504b;
    border-left: 0;
  }

  .data-branch {
    margin-bottom: 56px;
    padding: 28px 24px;
    gap: 22px;
  }

  .route-heading {
    gap: 14px;
  }

  .route-board {
    min-height: 0;
  }

  .route-photo {
    min-height: 280px;
  }

  .route-board figcaption {
    padding: 30px 24px;
  }

  .route-board ol {
    grid-template-columns: 1fr;
  }

  .route-board li:nth-child(odd) {
    margin-right: 0;
  }

  .diagnostic-progress-strip {
    width: 100%;
  }

  .diagnostic-checks {
    width: 100%;
    padding-top: 0;
  }

  .diagnostic-checkpoint {
    min-height: 0;
    grid-template-columns: 1fr;
    border-bottom-width: 10px;
  }

  .checkpoint-media,
  .checkpoint-schematic {
    grid-column: 1;
    min-height: 300px;
  }

  .checkpoint-index {
    padding: 14px 20px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .checkpoint-body {
    padding: 28px 20px 32px;
  }

  .checkpoint-body h2 {
    font-size: 31px;
  }

  .checkpoint-result {
    display: grid;
    grid-template-columns: 1fr;
  }

  .diagnostic-summary {
    margin-top: 26px;
    padding: 28px 24px;
    display: block;
  }

  .diagnostic-summary button {
    margin-top: 24px;
  }

  .escalation-list {
    padding: 28px 24px;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .progress-track i {
    transition: none;
  }
}

@media print {
  .site-header,
  .back-link,
  .progress-strip,
  .step-check,
  .completion-panel button {
    display: none !important;
  }

  body,
  .procedure-page {
    background: #fff;
  }

  .procedure-title,
  .safety-notice,
  .preparation,
  .procedure-steps,
  .completion-panel,
  .source-note,
  .decision-gate,
  .data-branch,
  .milk-route,
  .diagnostic-checks,
  .diagnostic-summary,
  .escalation-list {
    width: 100%;
  }

  .procedure-step {
    min-height: 0;
    break-inside: avoid;
    border: 1px solid #bbb;
    margin-bottom: 12px;
  }

  .step-visual,
  .cycle-display,
  .final-state {
    min-height: 280px;
  }

  .procedure-title {
    padding-top: 0;
  }

  .decision-gate,
  .data-branch,
  .diagnostic-summary,
  .escalation-list {
    break-inside: avoid;
  }

  .diagnostic-checkpoint {
    min-height: 0;
    break-inside: avoid;
    border: 1px solid #bbb;
    margin-bottom: 12px;
  }
}