/* ZMT SOP Experience Upgrade: loaded after the legacy SOP stylesheet. */
:root {
  --zmt-sop-primary: #d32f2f;
  --zmt-sop-primary-hover: #c62828;
  --zmt-sop-ink: #171717;
  --zmt-sop-muted: #625a55;
  --zmt-sop-focus-light: #8a3f00;
  --zmt-sop-focus-dark: #ffd51b;
  --zmt-sop-header-height: 68px;
}

/* A real first-focus target: move past the persistent site header to the SOP. */
.zmt-sop-skip-link {
  position: fixed;
  z-index: 100000;
  top: 10px;
  left: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: #171717;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms ease-out;
}

.zmt-sop-skip-link:focus-visible {
  outline: 3px solid var(--zmt-sop-focus-dark) !important;
  outline-offset: 3px;
  transform: translateY(0);
}

/* The theme clips the tall sticky navigation before it can stick. */
body:has(.qykc-self-media-sop) .page-article {
  overflow: visible !important;
}

/* Keep the stage map reachable on a 720px desktop viewport. */
.qykc-self-media-sop .qykc-sop-stage-nav {
  top: calc(var(--zmt-sop-header-height) + 16px);
  max-height: calc(100vh - var(--zmt-sop-header-height) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.qykc-self-media-sop .qykc-sop-stage-nav-head {
  padding: 16px 18px 12px;
}

.qykc-self-media-sop .qykc-sop-stage-nav ol {
  padding: 10px;
}

.qykc-self-media-sop .qykc-sop-stage-nav button {
  min-height: 62px;
  padding: 8px 10px 8px 3px;
}

/* The yellow 01–04 badges are the only sequence indicators needed. */
.qykc-self-media-sop ol.qykc-sop-overview-path {
  padding-inline-start: 0 !important;
  list-style: none !important;
}

.qykc-self-media-sop .qykc-sop-overview-path > li::marker {
  content: "";
}

/* Restore a visible focus ring despite the theme's global outline reset. */
.qykc-self-media-sop :where(button, a, input, summary):focus-visible {
  outline: 3px solid var(--zmt-sop-focus-light) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--zmt-sop-focus-light) !important;
}

.qykc-self-media-sop :is(.qykc-sop-overview-note, .qykc-sop-stage-answer, .qykc-sop-quick-recommendation) :focus-visible {
  outline-color: var(--zmt-sop-focus-dark) !important;
  box-shadow: 0 0 0 2px #1c1c1c, 0 0 0 5px var(--zmt-sop-focus-dark) !important;
}

/* Stronger contrast for controls and small descriptive text. */
.qykc-self-media-sop {
  --qykc-sop-accent: var(--zmt-sop-primary);
  --qykc-sop-muted: var(--zmt-sop-muted);
}

.qykc-self-media-sop .qykc-sop-question-list button.is-active,
.qykc-self-media-sop .qykc-sop-platform-list button.is-active,
.qykc-self-media-sop .qykc-sop-quick-platform .qykc-sop-platform-list button.is-active,
.qykc-self-media-sop .qykc-sop-type-filter button.is-active,
.qykc-self-media-sop .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a,
.qykc-self-media-sop .qykc-sop-stage-footer button:last-child {
  border-color: var(--zmt-sop-primary);
  background: var(--zmt-sop-primary);
}

.qykc-self-media-sop .qykc-sop-question-list button.is-active:hover,
.qykc-self-media-sop .qykc-sop-platform-list button.is-active:hover,
.qykc-self-media-sop .qykc-sop-quick-platform .qykc-sop-platform-list button.is-active:hover,
.qykc-self-media-sop .qykc-sop-type-filter button.is-active:hover,
.qykc-self-media-sop .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a:hover,
.qykc-self-media-sop .qykc-sop-stage-footer button:last-child:hover {
  background: var(--zmt-sop-primary-hover);
}

.qykc-self-media-sop .qykc-sop-search-label input::placeholder,
.qykc-self-media-sop .qykc-sop-stage-nav small,
.qykc-self-media-sop .qykc-sop-stage-nav button.is-current small,
.qykc-self-media-sop .qykc-sop-tool-row small,
.qykc-self-media-sop .qykc-sop-tool-row dt,
.qykc-self-media-sop .qykc-sop-tool-row dd {
  color: var(--zmt-sop-muted);
}

/* Category controls show availability before users enter an empty state. */
.qykc-self-media-sop .qykc-sop-type-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
}

.qykc-self-media-sop .qykc-sop-type-filter button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.qykc-self-media-sop .zmt-sop-filter-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  color: inherit;
  background: rgba(23, 23, 23, 0.08);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.qykc-self-media-sop .qykc-sop-type-filter button.is-active .zmt-sop-filter-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Explainable search results: no silent stage jumping. */
.qykc-self-media-sop .qykc-sop-search-label {
  position: relative;
}

.qykc-self-media-sop .qykc-sop-search-label input {
  min-height: 44px;
  padding-right: 42px;
}

.qykc-self-media-sop .zmt-sop-search-ui {
  position: relative;
}

.qykc-self-media-sop .zmt-sop-search-clear {
  position: absolute;
  top: -39px;
  right: 7px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #625a55;
  background: transparent;
  font-size: 22px;
  line-height: 1;
}

.qykc-self-media-sop .zmt-sop-search-clear:hover {
  color: #171717;
  background: #f5eeea;
}

.qykc-self-media-sop .zmt-sop-search-status {
  margin: 8px 0 0;
  color: var(--zmt-sop-muted);
  font-size: 13px;
  line-height: 1.5;
}

.qykc-self-media-sop .zmt-sop-search-results {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.qykc-self-media-sop .zmt-sop-search-result,
.qykc-self-media-sop .zmt-sop-search-empty {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e3d9d4;
  border-radius: 8px;
  color: var(--zmt-sop-ink);
  background: #fff;
  text-align: left;
}

.qykc-self-media-sop .zmt-sop-search-result {
  cursor: pointer;
  transition-property: border-color, background-color, box-shadow, transform;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.qykc-self-media-sop .zmt-sop-search-result:hover {
  border-color: #d9a69f;
  background: #fff7f4;
  box-shadow: 0 6px 14px rgba(75, 47, 37, 0.08);
  transform: translateY(-1px);
}

.qykc-self-media-sop .zmt-sop-search-result:active {
  scale: 0.96;
}

.qykc-self-media-sop .zmt-sop-search-result strong,
.qykc-self-media-sop .zmt-sop-search-result span {
  display: block;
}

.qykc-self-media-sop .zmt-sop-search-result strong {
  font-size: 14px;
  line-height: 1.4;
}

.qykc-self-media-sop .zmt-sop-search-result span,
.qykc-self-media-sop .zmt-sop-search-empty {
  margin-top: 3px;
  color: var(--zmt-sop-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Reduce the visual noise of the decorative hero marker without changing the warm editorial character. */
.qykc-self-media-sop .qykc-sop-overview-path::before,
.qykc-self-media-sop .qykc-sop-overview-path::after {
  opacity: 0.58;
}

@media (max-height: 820px) and (min-width: 981px) {
  .qykc-self-media-sop .qykc-sop-stage-nav-head p {
    display: none;
  }

  .qykc-self-media-sop .qykc-sop-stage-nav button {
    min-height: 56px;
  }
}

/* -------------------------------------------------------------------------
   Desktop visual system · Warm editorial desk / practical workbench
   This layer deliberately changes presentation only; the SOP data and all
   routes continue to be rendered by QY Knowledge Components.
   ------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .qykc-self-media-sop.zmt-sop-experience-enhanced {
    --zmt-sop-paper: #fffdfb;
    --zmt-sop-paper-warm: #faf6f2;
    --zmt-sop-line-soft: rgba(91, 63, 49, 0.12);
    --zmt-sop-shadow: 0 1px 2px rgba(55, 34, 24, 0.04), 0 14px 30px rgba(55, 34, 24, 0.07);
    color: var(--zmt-sop-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(h1, h2, h3, h4) {
    text-wrap: balance;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(p, small, li) {
    text-wrap: pretty;
  }

  /* One page surface and one elevation language replace the document-like grid. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced {
    background-color: #f7f3ef;
    background-image: linear-gradient(rgba(110, 77, 58, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 77, 58, 0.026) 1px, transparent 1px);
    background-size: 46px 46px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-overview, .qykc-sop-quick, .qykc-sop-stage, .qykc-sop-footer-nav, .qykc-sop-faq) {
    border-color: var(--zmt-sop-line-soft);
    box-shadow: var(--zmt-sop-shadow);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview {
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 253, 251, 0.96);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-main {
    padding: 42px 46px 38px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-main::after {
    right: 6%;
    bottom: -118px;
    width: 260px;
    height: 260px;
    opacity: 0.52;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-kicker {
    color: #9b401f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview h1 {
    color: #241d1a;
    font-size: clamp(38px, 3vw, 46px);
    letter-spacing: -0.035em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-lead {
    max-width: 680px;
    color: #625750;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-path li {
    min-height: 96px;
    padding: 17px 14px 14px 58px;
    border-color: rgba(91, 63, 49, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-path li:not(:last-child)::after {
    right: -18px;
    width: 24px;
    height: 24px;
    border: 0;
    color: #a65535;
    background: #f6e9df;
    font-size: 14px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-path span {
    top: 17px;
    left: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    color: #974225;
    background: #fae5d8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-note {
    border-left-color: var(--zmt-sop-line-soft);
    background: linear-gradient(145deg, #f7eee8, #fffaf6 68%);
    color: #493d37;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-note-grid span {
    border-color: #eadbd2;
    background: rgba(255, 255, 255, 0.64);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-note-grid b {
    color: #302722;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-note-grid small {
    color: #75655c;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-overview-note p {
    border-top-color: #e7d8cf;
    color: #6e5d54;
  }

  /* Quick positioning is a compact workbar rather than three unrelated blocks. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick {
    overflow: hidden;
    margin-top: 18px;
    border-radius: 16px;
    background: rgba(255, 253, 251, 0.88);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-cell {
    padding: 24px 26px;
    border-color: var(--zmt-sop-line-soft);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-cell h2 {
    color: #302723;
    font-size: 17px;
    letter-spacing: -0.01em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-question-list button, .qykc-sop-platform-list button, .qykc-sop-type-filter button) {
    border: 1px solid rgba(91, 63, 49, 0.14);
    border-radius: 999px;
    color: #685952;
    background: #fffdfb;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-question-list button, .qykc-sop-platform-list button, .qykc-sop-type-filter button):hover:not(:disabled) {
    border-color: rgba(176, 76, 40, 0.38);
    color: #943d22;
    background: #fff5ef;
    transform: translateY(-1px);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-question-list button, .qykc-sop-platform-list button, .qykc-sop-type-filter button):active:not(:disabled) {
    scale: 0.96;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-question-list button, .qykc-sop-platform-list button, .qykc-sop-type-filter button).is-active {
    border-color: #c4472b;
    color: #fff;
    background: #c4472b;
    box-shadow: 0 8px 16px rgba(174, 59, 29, 0.18);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation {
    color: #493a31;
    background: linear-gradient(140deg, #fff4dd, #fffaf1 76%);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation > span {
    color: #9d6714;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation strong {
    color: #30251f;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation p {
    color: #746257;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation button {
    min-height: 40px;
    border-radius: 10px;
    color: #fff;
    background: var(--zmt-sop-primary);
    box-shadow: 0 8px 16px rgba(186, 49, 41, 0.18);
    transition-property: background-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation button:hover {
    background: var(--zmt-sop-primary-hover);
    box-shadow: 0 10px 22px rgba(186, 49, 41, 0.25);
    transform: translateY(-1px);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-quick-recommendation button:active {
    scale: 0.96;
  }

  /* The path is present, not a misleading completion tracker. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav {
    overflow: hidden auto;
    border: 1px solid var(--zmt-sop-line-soft);
    border-radius: 16px;
    background: rgba(255, 253, 251, 0.9);
    box-shadow: var(--zmt-sop-shadow);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav-head {
    padding: 20px 20px 13px;
    border-bottom: 1px solid var(--zmt-sop-line-soft);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav-head h2 {
    color: #332823;
    font-size: 16px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav ol {
    padding: 9px 10px 12px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button {
    min-height: 60px;
    padding: 8px 10px 8px 0;
    border-radius: 11px;
    transition-property: background-color, box-shadow, color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button:hover {
    background: #fff5ed;
    transform: translateX(2px);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button.is-current {
    color: #332823;
    background: #fff1c8;
    box-shadow: 0 7px 14px rgba(106, 73, 32, 0.1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button.is-current::before {
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #e6a600;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button.is-current::after {
    display: none;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-number {
    border-color: #e7ddd5;
    color: #76665d;
    background: #fffdfb;
    font-variant-numeric: tabular-nums;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button.is-current .qykc-sop-stage-number {
    border-color: #e2ab00;
    color: #4c3700;
    background: #ffd629;
    box-shadow: 0 0 0 4px rgba(255, 214, 41, 0.22);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav button.zmt-sop-stage-past .qykc-sop-stage-number {
    border-color: #cce3d9;
    color: #31725f;
    background: #f0faf6;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav strong {
    color: #382d28;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav small {
    color: #806f66;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-nav em {
    color: #9a7b1f;
  }

  /* Current stage: clear hierarchy, proportional progress, and quieter surfaces. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage {
    overflow: hidden;
    border-radius: 20px;
    background: var(--zmt-sop-paper);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(238px, 0.42fr);
    gap: 20px 34px;
    padding: 31px 36px 27px;
    border-bottom-color: var(--zmt-sop-line-soft);
    background: linear-gradient(105deg, #fffdfb, #fff7ef);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .zmt-sop-stage-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: 10px;
    align-items: center;
    color: #876f62;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .zmt-sop-stage-progress b {
    color: #a44225;
    font-variant-numeric: tabular-nums;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .zmt-sop-stage-progress i {
    color: #9e8d83;
    font-style: normal;
    font-weight: 600;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .zmt-sop-stage-progress small {
    padding: 3px 7px;
    border-radius: 999px;
    color: #8d5610;
    background: #fff0ca;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .zmt-sop-stage-progress > div {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1e4da;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .zmt-sop-stage-progress > div > span {
    display: block;
    width: var(--zmt-sop-stage-progress, 10%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d8472d, #ef8b45);
    transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-header > div:first-child > span {
    color: #a24b2b;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-header h2 {
    color: #28201d;
    font-size: clamp(29px, 2.2vw, 36px);
    letter-spacing: -0.035em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-header p {
    color: #685b54;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-answer {
    align-self: end;
    padding: 15px 17px;
    border: 1px solid #f0d8bc;
    border-radius: 14px;
    background: #fff9f2;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-answer > span {
    color: #9b572c;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-answer strong {
    color: #30251f;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-answer small,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-current-platform {
    border-color: #ead7c8;
    color: #725a4b;
    background: #fffdfb;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-answer::after {
    display: none;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-method, .qykc-sop-output, .qykc-sop-tools) {
    padding: 28px 36px;
    border-color: var(--zmt-sop-line-soft);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-method {
    background: #fffdfb;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-section-heading > span,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-output span,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tools-heading span {
    color: #a24b2b;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-actions {
    gap: 8px;
    margin-top: 16px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-actions li {
    min-height: 46px;
    padding: 12px 15px 11px 53px;
    border-left-color: #d76a42;
    border-radius: 0 10px 10px 0;
    color: #4b3d36;
    background: #fff7f1;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-actions li::before {
    color: #b34b2b;
    font-variant-numeric: tabular-nums;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-output {
    gap: 30px;
    background: #faf8f5;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-output li {
    border-color: #eadbd0;
    border-radius: 999px;
    color: #82533d;
    background: #fffaf6;
  }

  /* Tool groups remain recognizable without turning every action into a CTA. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-groups {
    gap: 14px;
    margin-top: 18px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-group {
    padding: 17px 18px 8px;
    border: 1px solid var(--zmt-sop-line-soft);
    border-radius: 15px;
    background: #fffdfb;
    box-shadow: 0 2px 7px rgba(58, 39, 29, 0.025);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-group[data-qykc-sop-tool-group="agent"] {
    border-color: #cfe5dc;
    background: linear-gradient(115deg, #f3fbf7, #fffdfb 38%);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-group[data-qykc-sop-tool-group="template"] {
    border-color: #f0d4ca;
    background: linear-gradient(115deg, #fff7f4, #fffdfb 38%);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-group[data-qykc-sop-tool-group="resource"] {
    border-color: #efdfbd;
    background: linear-gradient(115deg, #fffbf2, #fffdfb 38%);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-group h3 {
    margin-bottom: 8px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-tool-list, .qykc-sop-resource-list) {
    border-top-color: rgba(91, 63, 49, 0.1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row {
    gap: 20px;
    padding: 15px 4px;
    border-bottom-color: rgba(91, 63, 49, 0.1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-code {
    min-width: 56px;
    min-height: 28px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row h4 {
    color: #302723;
    font-size: 16px;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row :is(p, small) {
    color: #786a62;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row small {
    color: #5f786f;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-show-more {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #2e8873;
    border-radius: 10px;
    color: #23725f;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset;
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  /*
   * The legacy SOP stylesheet forces tool links and their inner spans to
   * white with !important. These desktop actions use quiet light surfaces,
   * so explicitly restore readable normal and visited-state foregrounds.
   */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a:visited,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a > span,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a:visited > span {
    color: #23725f !important;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a > span:not(.qykc-sop-action-icon) {
    background: transparent !important;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a {
    border-color: #d36a50;
    color: #b34b33 !important;
    background: #fffaf8;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a:visited,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a > span,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a:visited > span {
    color: #b34b33 !important;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a:hover,
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-show-more:hover {
    color: #fff !important;
    border-color: #267763;
    background: #267763;
    box-shadow: 0 8px 16px rgba(33, 105, 85, 0.16);
    transform: translateY(-1px);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row > a:hover > span {
    color: #fff !important;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-tool-row[data-qykc-sop-tool="template"] > a:hover {
    border-color: #bc4e34;
    background: #bc4e34;
    box-shadow: 0 8px 16px rgba(176, 61, 38, 0.16);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-tool-row > a, .qykc-sop-show-more):active {
    scale: 0.96;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-resource-list a {
    min-height: 52px;
    padding: 13px 7px;
    border-bottom-color: rgba(91, 63, 49, 0.1);
    border-radius: 9px;
    transition-property: color, background-color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-resource-list a:hover {
    color: #8c5b13;
    background: #fff7df;
    transform: translateX(2px);
  }

  /* Footer has a single visual owner: the next stage. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-footer {
    min-height: 82px;
    padding: 20px 36px;
    border-top-color: var(--zmt-sop-line-soft);
    background: #faf7f4;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-footer button {
    min-height: 40px;
    border-radius: 10px;
    color: #6d5d55;
    transition-property: color, background-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-footer button:first-child:hover {
    color: #493b35;
    background: #f0e9e4;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-footer button:last-child {
    padding: 9px 15px;
    border: 1px solid var(--zmt-sop-primary);
    color: #fff;
    background: var(--zmt-sop-primary);
    box-shadow: 0 8px 17px rgba(186, 49, 41, 0.18);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-footer button:last-child:hover {
    background: var(--zmt-sop-primary-hover);
    box-shadow: 0 10px 22px rgba(186, 49, 41, 0.25);
    transform: translateY(-1px);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage-footer button:active {
    scale: 0.96;
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced :is(.qykc-sop-footer-nav, .qykc-sop-faq) {
    border-radius: 16px;
    background: rgba(255, 253, 251, 0.92);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-footer-links a {
    min-height: 40px;
    border-color: rgba(91, 63, 49, 0.14);
    border-radius: 10px;
    color: #685952;
    background: #fffdfb;
    transition-property: color, background-color, border-color, transform;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-footer-links a:hover {
    border-color: #d36a50;
    color: #a44225;
    background: #fff4ef;
    transform: translateY(-1px);
  }

  /* Do not animate initial page load; the state class is only present after JS is ready. */
  .qykc-self-media-sop.zmt-sop-experience-enhanced .qykc-sop-stage:not([hidden]) :is(.qykc-sop-stage-header, .qykc-sop-method, .qykc-sop-output, .qykc-sop-tools) {
    animation: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .qykc-self-media-sop.zmt-sop-experience-enhanced[data-zmt-sop-stage-change="true"] .qykc-sop-stage:not([hidden]) {
      animation: zmt-sop-stage-reveal 200ms cubic-bezier(0.2, 0, 0, 1);
    }
  }

  @keyframes zmt-sop-stage-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .qykc-self-media-sop.zmt-sop-experience-enhanced *,
  .qykc-self-media-sop.zmt-sop-experience-enhanced *::before,
  .qykc-self-media-sop.zmt-sop-experience-enhanced *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}