.qt-blog-hero {
  padding: clamp(3.2rem, 7vw, 5.6rem) 0 3rem;
  border-bottom: 1px solid var(--qt-line);
  background: linear-gradient(180deg, #fff 0%, #f7f8ff 100%);
}

.qt-blog-hero h1,
.qt-article-header h1 {
  max-width: 900px;
  margin: 0;
  color: #111827;
  font-size: clamp(2.25rem, 5.5vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.qt-blog-hero .qt-lead { max-width: 760px; }

.qt-cluster-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.qt-cluster-list span {
  display: inline-flex;
  padding: .48rem .75rem;
  border: 1px solid var(--qt-line);
  border-radius: 999px;
  background: white;
  color: #475569;
  font-size: .82rem;
  font-weight: 700;
}

.qt-cluster-list .is-published {
  border-color: #c7d2fe;
  background: var(--qt-blue-soft);
  color: var(--qt-indigo-dark);
}

.qt-guide-card { position: relative; overflow: hidden; }
.qt-guide-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--qt-indigo);
}
.qt-guide-card .qt-guide-meta { margin-top: .8rem; color: #64748b; font-size: .82rem; }

.qt-article-header {
  padding: 2.2rem 0 2.6rem;
  border-bottom: 1px solid var(--qt-line);
  background: white;
}

.qt-article-header h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.qt-article-header .qt-lead { max-width: 790px; }

.qt-blog-cluster + .qt-blog-cluster { border-top: 1px solid var(--qt-line); }
.qt-cluster-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.qt-cluster-heading h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.qt-cluster-heading p { max-width: 620px; margin: 0; color: var(--qt-muted); }

.qt-article-shell {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(220px, 300px);
  align-items: start;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 4.5rem);
  padding: clamp(2.4rem, 5vw, 4rem) 0;
}

.qt-article { min-width: 0; }
.qt-article > section { margin-top: 3rem; scroll-margin-top: 88px; }
.qt-article > section:first-child { margin-top: 0; }
.qt-article h2 {
  margin: 0 0 .85rem;
  color: #111827;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.qt-article h3 { margin: 1.5rem 0 .45rem; color: #172033; font-size: 1.13rem; }
.qt-article p, .qt-article li { color: #4b5563; }
.qt-article a:not(.qt-button) { color: var(--qt-indigo-dark); font-weight: 700; }
.qt-article ol, .qt-article ul { padding-left: 1.35rem; }
.qt-article li + li { margin-top: .45rem; }

.qt-workflow-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qt-workflow-strip li {
  position: relative;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .85rem .75rem;
  border: 1px solid #dbe2f0;
  border-radius: 12px;
  background: #fff;
  color: #263248;
  font-size: .83rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.qt-workflow-strip li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -.48rem;
  z-index: 2;
  width: 1rem;
  transform: translateY(-50%);
  color: var(--qt-indigo);
  background: var(--qt-soft);
  font-size: 1rem;
}

.qt-outcome-box,
.qt-example-box,
.qt-check-box,
.qt-note-box,
.qt-tool-step,
.qt-continue-box {
  padding: 1.25rem;
  border: 1px solid var(--qt-line);
  border-radius: var(--qt-radius);
  background: white;
}

.qt-outcome-box { border-left: 4px solid var(--qt-green); }
.qt-example-box { background: #f8fafc; }
.qt-note-box { border-color: #f5d88a; background: var(--qt-amber-soft); }
.qt-check-box { border-color: #a7f3d0; background: var(--qt-green-soft); }
.qt-tool-step { border-color: #c7d2fe; background: #f7f7ff; }
.qt-continue-box { border-color: #c7d2fe; background: var(--qt-blue-soft); }

.qt-outcome-box > :first-child,
.qt-example-box > :first-child,
.qt-check-box > :first-child,
.qt-note-box > :first-child,
.qt-tool-step > :first-child,
.qt-continue-box > :first-child { margin-top: 0; }
.qt-outcome-box > :last-child,
.qt-example-box > :last-child,
.qt-check-box > :last-child,
.qt-note-box > :last-child,
.qt-tool-step > :last-child,
.qt-continue-box > :last-child { margin-bottom: 0; }

.qt-field-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: white;
  font-size: .92rem;
}
.qt-table-wrap { max-width: 100%; overflow-x: auto; }
.qt-field-table th, .qt-field-table td {
  padding: .72rem .8rem;
  border: 1px solid var(--qt-line);
  vertical-align: top;
  text-align: left;
}
.qt-field-table th { background: #f1f5f9; color: #334155; }
.qt-field-table code { overflow-wrap: anywhere; }

.qt-url-result {
  display: block;
  margin-top: .8rem;
  padding: 1rem;
  border: 1px solid #dbe2f0;
  border-radius: 10px;
  background: #172033;
  color: #e2e8f0;
  font-size: .87rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: normal;
}

.qt-before-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: .8rem;
  margin: 1.2rem 0;
}
.qt-before-after > div:not(.qt-flow-arrow) {
  padding: 1rem;
  border: 1px solid var(--qt-line);
  border-radius: 12px;
  background: white;
}
.qt-before-after strong { display: block; margin-bottom: .4rem; color: #172033; }
.qt-before-after p { margin: 0; font-size: .9rem; }
.qt-flow-arrow { display: grid; place-items: center; color: var(--qt-indigo); font-size: 1.35rem; font-weight: 900; }

.qt-commercial-step {
  border-color: #c7d2fe;
  background: #f4f5ff;
}
.qt-commercial-step .qt-related-label { margin-bottom: .35rem; }

.qt-output-example {
  margin: 1.4rem 0;
  padding: 1.25rem;
  border: 1px solid var(--qt-line);
  border-radius: 14px;
  background: #f8fafc;
}
.qt-output-source,
.qt-output-document {
  width: min(100%, 680px);
  margin-inline: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--qt-line);
  border-radius: 12px;
  background: white;
}
.qt-output-source dl { display: grid; gap: .45rem; margin: .8rem 0 0; }
.qt-output-source dl > div { display: grid; grid-template-columns: minmax(7rem, .45fr) minmax(0, 1fr); gap: .75rem; }
.qt-output-source dt { color: var(--qt-muted); font-size: .86rem; font-weight: 700; }
.qt-output-source dd { margin: 0; color: #172033; font-weight: 650; overflow-wrap: anywhere; }
.qt-output-label {
  display: inline-block;
  color: var(--qt-indigo-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qt-output-arrow { padding: .55rem 0; color: var(--qt-indigo); font-size: 1.55rem; font-weight: 900; text-align: center; }
.qt-output-document { text-align: center; }
.qt-output-document h3 { margin: .45rem 0 .9rem; }
.qt-output-document p { margin: .35rem 0; }
.qt-output-kicker { color: var(--qt-indigo-dark); font-size: 1.05rem; font-weight: 800; }
.qt-output-example figcaption { margin-top: .9rem; color: var(--qt-muted); font-size: .8rem; line-height: 1.5; text-align: center; }

.qt-step-list { margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: guide-step; }
.qt-step-list > li {
  position: relative;
  padding: 0 0 2.2rem 3.4rem;
  counter-increment: guide-step;
}
.qt-step-list > li::before {
  content: counter(guide-step);
  position: absolute;
  top: -.1rem;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--qt-indigo);
  color: white;
  font-weight: 850;
}
.qt-step-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.3rem;
  bottom: .25rem;
  left: 1.08rem;
  width: 2px;
  background: #dbe2f0;
}
.qt-step-list h3 { margin-top: 0; }

.qt-article-aside {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 1rem;
}
.qt-aside-card {
  padding: 1.15rem;
  border: 1px solid var(--qt-line);
  border-radius: 14px;
  background: white;
}
.qt-aside-card h2 { margin: 0 0 .65rem; font-size: 1rem; }
.qt-aside-card ul { margin: 0; padding-left: 1.1rem; }
.qt-aside-card li { color: #5f6b7a; font-size: .86rem; }
.qt-aside-card li + li { margin-top: .35rem; }
.qt-aside-card .qt-button { width: 100%; margin-top: .85rem; }

.qt-screenshot-note {
  padding: .8rem 1rem;
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
  color: #64748b;
  font-size: .82rem;
}

.dark .qt-blog-hero,
.dark .qt-article-header { border-color: #334155; background: #111827; }
.dark .qt-blog-hero h1,
.dark .qt-article-header h1,
.dark .qt-article h2,
.dark .qt-article h3,
.dark .qt-cluster-heading h2 { color: #f8fafc; }
.dark .qt-cluster-list span,
.dark .qt-workflow-strip li,
.dark .qt-outcome-box,
.dark .qt-example-box,
.dark .qt-check-box,
.dark .qt-note-box,
.dark .qt-tool-step,
.dark .qt-continue-box,
.dark .qt-aside-card,
.dark .qt-before-after > div:not(.qt-flow-arrow) { border-color: #374151; background: #1f2937; }
.dark .qt-article p,
.dark .qt-article li,
.dark .qt-aside-card li,
.dark .qt-cluster-heading p { color: #cbd5e1; }
.dark .qt-before-after strong { color: #f8fafc; }
.dark .qt-output-example { border-color: #374151; background: #111827; }
.dark .qt-output-source,
.dark .qt-output-document { border-color: #374151; background: #1f2937; }
.dark .qt-output-source dd { color: #f8fafc; }

@media (max-width: 900px) {
  .qt-article-shell { grid-template-columns: 1fr; }
  .qt-article-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qt-cluster-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 620px) {
  .qt-workflow-strip { grid-template-columns: 1fr 1fr; }
  .qt-workflow-strip li:not(:last-child)::after { display: none; }
  .qt-article-aside { grid-template-columns: 1fr; }
  .qt-step-list > li { padding-left: 3rem; }
  .qt-before-after { grid-template-columns: 1fr; }
  .qt-flow-arrow { transform: rotate(90deg); }
  .qt-output-source dl > div { grid-template-columns: 1fr; gap: .1rem; }
  .qt-field-table { font-size: .82rem; }
  .qt-field-table th, .qt-field-table td { padding: .58rem; }
}