/* === QDJ Design System Layer (2026-06-12) === */\n/* tokens: accent #DC143C | contrast #171717 #2b2b2b #616161 | base #d1d1d1 #fff */\n\n/* — lead paragraph — */\n.entry-content .qdj-lead {\n  font-size: 19px; line-height: 1.7; color: var(--contrast-2, #2b2b2b);\n  max-width: 72ch; margin-bottom: 1.6em;\n}\n\n/* — TL;DR callout — */\n.entry-content .qdj-tldr {\n  background: #fafafa; border-left: 4px solid var(--accent, #DC143C);\n  padding: 18px 24px; border-radius: 0 8px 8px 0;\n  font-size: 17px; line-height: 1.7; color: var(--contrast-2, #2b2b2b);\n  margin: 0 0 2em;\n}\n.entry-content .qdj-tldr strong {\n  display: inline-block; color: var(--accent, #DC143C);\n  text-transform: uppercase; font-size: 13px; letter-spacing: .06em; margin-right: 6px;\n}\n\n/* — article typography rhythm (posts + article-like pages) — */\nbody.single-post .entry-content h2,\nbody.page-id-19634 .entry-content h2,\nbody.page-id-14432 .entry-content h2,\nbody.page-id-19469 .entry-content h2,\nbody.page-id-19470 .entry-content h2,\nbody.page-id-19471 .entry-content h2,\nbody.page-id-19472 .entry-content h2,\nbody.page-id-19473 .entry-content h2 {\n  font-size: 30px; line-height: 1.35; margin: 1.8em 0 .7em;\n  padding-bottom: .35em; border-bottom: 2px solid #efefef;\n}\nbody.single-post .entry-content h3,\nbody.page-id-19634 .entry-content h3,\nbody.page-id-14432 .entry-content h3 {\n  font-size: 23px; margin: 1.5em 0 .6em;\n}\nbody.single-post .entry-content p,\nbody.single-post .entry-content li {\n  line-height: 1.75;\n}\n\n/* — blockquote (testimonials, case studies, articles) — */\n.entry-content blockquote {\n  border-left: 4px solid var(--accent, #DC143C); background: #fafafa;\n  margin: 1.6em 0; padding: 20px 26px; border-radius: 0 8px 8px 0;\n  font-style: normal; color: var(--contrast-2, #2b2b2b);\n}\n.entry-content blockquote p { margin-bottom: 0; line-height: 1.75; }\n\n/* — tables (case studies, comparisons) — */\n.entry-content table {\n  width: 100%; border-collapse: collapse; margin: 1.6em 0;\n  font-size: 15px; display: table;\n}\n.entry-content table th {\n  background: var(--contrast, #171717); color: #fff;\n  padding: 12px 16px; text-align: left; font-weight: 600; border: 1px solid #171717;\n}\n.entry-content table td { padding: 11px 16px; border: 1px solid #e8e8e8; }\n.entry-content table tr:nth-child(even) td { background: #fafafa; }\n@media (max-width: 768px) {\n  .entry-content table { display: block; overflow-x: auto; white-space: nowrap; }\n}\n\n/* — related resources card — */\n.entry-content .qdj-related {\n  background: #fff; border: 1px solid #e8e8e8; border-top: 4px solid var(--accent, #DC143C);\n  border-radius: 8px; padding: 28px 32px; margin: 56px 0 24px;\n  box-shadow: 0 2px 12px rgba(23, 23, 23, .05);\n}\n.entry-content .qdj-related > h2,\nbody.single-post .entry-content .qdj-related > h2 {\n  font-size: 21px; font-weight: 600; color: var(--contrast, #171717);\n  margin: 0 0 10px; padding: 0; border-bottom: 0;\n}\n.entry-content .qdj-related > p { color: var(--contrast-3, #616161); font-size: 15px; margin: 0 0 12px; }\n.entry-content .qdj-related ul { list-style: none; margin: 0; padding: 0; }\n.entry-content .qdj-related li {\n  margin: 0; padding: 11px 0 11px 26px; position: relative;\n  border-bottom: 1px solid #f1f1f1; line-height: 1.6;\n}\n.entry-content .qdj-related li:last-child { border-bottom: 0; }\n.entry-content .qdj-related li::before {\n  content: \2192; position: absolute; left: 0; top: 11px;\n  color: var(--accent, #DC143C); font-weight: 600;\n}\n.entry-content .qdj-related a {\n  color: var(--contrast, #171717); text-decoration: none;\n  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;\n}\n.entry-content .qdj-related a:hover { color: var(--accent, #DC143C); border-bottom-color: var(--accent, #DC143C); }\n\n/* — zh/de homepage sections — */\n.qdj-home-extra { max-width: 1100px; margin: 0 auto; padding: 56px 20px 8px; }\n.qdj-home-extra h2 {\n  font-size: 32px; text-align: center; margin: 0 0 18px;\n  position: relative; padding-bottom: 18px; border-bottom: 0;\n}\n.qdj-home-extra h2::after {\n  content: ; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;\n  width: 56px; height: 4px; background: var(--accent, #DC143C); border-radius: 2px;\n}\n.qdj-home-extra > p {\n  max-width: 76ch; margin: 0 auto 16px; text-align: center;\n  color: var(--contrast-2, #2b2b2b); line-height: 1.75;\n}\n.qdj-home-extra ul {\n  list-style: none; margin: 28px 0 0; padding: 0;\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px;\n}\n.qdj-home-extra li {\n  background: #fff; border: 1px solid #ebebeb; border-radius: 8px;\n  padding: 18px 20px; line-height: 1.65;\n  box-shadow: 0 2px 10px rgba(23, 23, 23, .04);\n}\n.qdj-home-extra a { color: var(--contrast, #171717); font-weight: 600; text-decoration: none; }\n.qdj-home-extra a:hover { color: var(--accent, #DC143C); }\n\n@media (max-width: 768px) {\n  .entry-content .qdj-related { padding: 20px; margin-top: 40px; }\n  .qdj-home-extra { padding: 40px 16px 4px; }\n  .qdj-home-extra h2 { font-size: 25px; }\n  body.single-post .entry-content h2 { font-size: 25px; }\n  .entry-content .qdj-lead { font-size: 18px; }\n}\n\n/* === QDJ UI System v2 (2026-06-12) === */\n/* base: one typeface, readable body color */\nbody {\n  font-family: Inter, Open Sans, system-ui, -apple-system, sans-serif;\n  color: var(--contrast-2, #2b2b2b);\n}\n.entry-meta, .posted-on, .byline, .cat-links { color: var(--contrast-3, #616161); }\n\n/* a11y: selection, focus ring, anchor offset, reduced motion */\n::selection { background: var(--accent, #DC143C); color: #fff; }\n:focus-visible { outline: 3px solid rgba(220, 20, 60, .45); outline-offset: 2px; }\nh1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 96px; }\nhtml { scroll-behavior: smooth; }\n@media (prefers-reduced-motion: reduce) {\n  html { scroll-behavior: auto; }\n  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }\n}\n\n/* content links: visible affordance */\n.entry-content p a:not(.gb-button):not(.qdj-cta-btn) {\n  text-decoration: underline; text-underline-offset: 3px;\n  text-decoration-thickness: 1px; text-decoration-color: rgba(220, 20, 60, .4);\n}\n.entry-content p a:not(.gb-button):hover { text-decoration-color: var(--accent, #DC143C); }\n\n/* buttons: unified behavior, individual colors kept */\n.gb-button, .wp-block-button__link {\n  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;\n}\n.gb-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(23, 23, 23, .14); }\n.gb-button:active, .wp-block-button__link:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(23, 23, 23, .12); }\n\n/* CF7: the last mile of trust */\n.wpcf7 label { font-weight: 600; font-size: 14px; color: var(--contrast, #171717); display: block; margin-bottom: 6px; }\n.wpcf7-form-control-wrap input:not([type=checkbox]):not([type=radio]):not([type=file]) {\n  height: 46px !important; padding: 10px 14px; border: 1px solid #d7d7d7; border-radius: 6px;\n  background: #fff; font-size: 16px; transition: border-color .15s, box-shadow .15s;\n}\n.wpcf7-form-control-wrap textarea {\n  height: 130px !important; padding: 12px 14px; border: 1px solid #d7d7d7; border-radius: 6px;\n  font-size: 16px; transition: border-color .15s, box-shadow .15s;\n}\n.wpcf7-form-control-wrap input:focus, .wpcf7-form-control-wrap textarea:focus {\n  border-color: var(--accent, #DC143C); box-shadow: 0 0 0 3px rgba(220, 20, 60, .12); outline: none;\n}\n.wpcf7-form-control-wrap ::placeholder { color: #939393; }\n.wpcf7-not-valid { border-color: #DC143C !important; }\n.wpcf7-not-valid-tip { font-size: 13px; color: #b91034; margin-top: 4px; }\n.form-container { gap: 14px !important; }\n.wpcf7-file { font-size: 14px; padding: 10px; border: 1px dashed #c9c9c9; border-radius: 6px; background: #fafafa; }\ninput[type=checkbox], input[type=radio] { transform: scale(1); width: 17px; height: 17px; accent-color: var(--accent, #DC143C); margin-right: 8px; }\n.wpcf7-submit {\n  background: var(--accent, #DC143C); color: #fff; border: 0; border-radius: 6px;\n  padding: 14px 32px; font-size: 16px; font-weight: 600; cursor: pointer;\n  transition: background-color .15s, transform .15s, box-shadow .15s;\n}\n.wpcf7-submit:hover { background: #b91034; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220, 20, 60, .3); }\n.wpcf7 form .wpcf7-response-output { border-radius: 8px; padding: 14px 18px; margin: 18px 0 0; }\n.wpcf7 form.sent .wpcf7-response-output { border-color: #228B22; background: #f2faf2; color: #1b6b1b; }\n.wpcf7 form.invalid .wpcf7-response-output,\n.wpcf7 form.failed .wpcf7-response-output { border-color: #DC143C; background: #fff6f7; color: #b91034; }\n\n/* article table of contents */\n.qdj-toc { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 6px 20px; margin: 0 0 28px; }\n.qdj-toc summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--contrast, #171717); list-style: none; position: relative; }\n.qdj-toc summary::-webkit-details-marker { display: none; }\n.qdj-toc summary::after { content: \25BE; position: absolute; right: 2px; color: var(--accent, #DC143C); transition: transform .15s; }\n.qdj-toc[open] summary::after { transform: rotate(180deg); }\n.qdj-toc ol { margin: 0 0 14px 18px; padding: 0; }\n.qdj-toc li { margin: 7px 0; line-height: 1.5; font-size: 15px; }\n.qdj-toc a { color: var(--contrast-2, #2b2b2b); text-decoration: none; }\n.qdj-toc a:hover { color: var(--accent, #DC143C); }\n\n/* end-of-article conversion band */\n.qdj-cta-band {\n  background: var(--contrast, #171717); color: #fff; border-radius: 10px;\n  padding: 36px 40px; margin: 48px auto 8px; max-width: 1100px;\n  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;\n}\n.qdj-cta-kicker { color: #ff5c73; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; font-weight: 600; margin: 0 0 4px; }\n.qdj-cta-title { font-size: 26px; font-weight: 600; margin: 0 0 8px; color: #fff; line-height: 1.3; }\n.qdj-cta-copy > p:last-child { color: #d1d1d1; margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.6; }\n.qdj-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }\n.qdj-cta-btn {\n  background: var(--accent, #DC143C); color: #fff !important; padding: 14px 30px; border-radius: 6px;\n  font-weight: 600; text-decoration: none; white-space: nowrap;\n  transition: background-color .15s, transform .15s, box-shadow .15s;\n}\n.qdj-cta-btn:hover { background: #b91034; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(220, 20, 60, .35); }\n.qdj-cta-link { color: #d1d1d1 !important; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }\n.qdj-cta-link:hover { color: #fff !important; }\n@media (max-width: 768px) {\n  .qdj-cta-band { padding: 26px 22px; }\n  .qdj-cta-title { font-size: 22px; }\n  .wpcf7-submit { width: 100%; }\n}\n\n/* === QDJ UI System v3 (homepage facelift, 2026-06-12) === */\n/* hero eyebrow -> brand kicker */\n.gb-headline-1e75eccf {\n  text-transform: uppercase; font-size: 14px !important; letter-spacing: .14em;\n  font-weight: 600; display: inline-flex; align-items: center; gap: 10px;\n  color: #ffb3be !important;\n}\n.gb-headline-1e75eccf::before {\n  content: ; width: 34px; height: 3px; flex: none;\n  background: var(--accent, #DC143C); border-radius: 2px;\n}\n/* hero h1: natural casing, brighter mark on dark photo */\n.gb-headline-ebad4560 { text-transform: none !important; letter-spacing: -.5px; }\n.gb-headline-ebad4560 mark { color: #ff5c73 !important; }\n\n/* hero trust chips */\n.qdj-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 24px; padding: 0; }\n.qdj-hero-chips li {\n  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08);\n  color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .02em;\n  padding: 7px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;\n}\n.qdj-hero-chips li::before {\n  content: ; width: 6px; height: 6px; border-radius: 50%; flex: none;\n  background: var(--accent, #DC143C);\n}\n@media (max-width: 768px) {\n  .qdj-hero-chips { gap: 7px; margin-bottom: 18px; }\n  .qdj-hero-chips li { font-size: 12px; padding: 5px 11px; }\n}\n\n/* primary nav hover affordance */\na.mega-menu-link { transition: color .15s ease; }\nli.mega-menu-item > a.mega-menu-link:hover,\nli.mega-menu-item.mega-current-menu-item > a.mega-menu-link { color: var(--accent, #DC143C) !important; }\n\n/* client logo wall: quiet until engaged */\nbody.home img[src*=/uploads/2024/12/] {\n  filter: grayscale(1) opacity(.62); transition: filter .25s ease;\n}\nbody.home img[src*=/uploads/2024/12/]:hover { filter: grayscale(0) opacity(1); }\n\n/* footer link state */\n.gb-container-0fbfcf4e a { transition: color .15s ease; }\n.gb-container-0fbfcf4e a:hover { color: #ff5c73 !important; }\n/* v5: original color pairing restored (v4 reverted) 2026-06-13 */\n\n\n/* === QDJ Module System v6 (2026-06-13) === */\n.qdj-section { padding: 72px 20px; }\n.qdj-section--tight { padding: 48px 20px; }\n.qdj-section--dark { background: var(--contrast, #171717); color: #fff; }\n.qdj-wrap { max-width: 1100px; margin: 0 auto; }\n\n.qdj-kicker { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 13px; letter-spacing: .12em; font-weight: 600; color: var(--accent, #DC143C); margin: 0 0 10px; }\n.qdj-kicker::before { content: ; width: 30px; height: 3px; flex: none; background: var(--accent, #DC143C); border-radius: 2px; }\n.qdj-h2 { font-size: 34px; line-height: 1.25; margin: 0 0 12px; font-weight: 600; }\n.qdj-lede { font-size: 17px; color: var(--contrast-3, #616161); max-width: 70ch; margin: 0 0 36px; line-height: 1.7; }\n.qdj-section--dark .qdj-h2 { color: #fff; }\n.qdj-section--dark .qdj-lede { color: #d1d1d1; }\n\n.qdj-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; }\n.qdj-chips li { border: 1px solid #e0e0e0; background: #fff; color: var(--contrast-2, #2b2b2b); font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }\n.qdj-chips li::before { content: ; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent, #DC143C); }\n\n.qdj-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0; padding: 0; list-style: none; }\n.qdj-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 26px 28px; transition: box-shadow .15s ease, transform .15s ease; }\n.qdj-card:hover { box-shadow: 0 8px 24px rgba(23, 23, 23, .08); transform: translateY(-2px); }\n.qdj-card h3 { font-size: 19px; margin: 0 0 8px; line-height: 1.35; }\n.qdj-card > p { font-size: 15px; color: var(--contrast-3, #616161); margin: 0; line-height: 1.65; }\n.qdj-card a { color: var(--accent, #DC143C); font-weight: 600; font-size: 14px; text-decoration: none; }\n.qdj-card a:hover { text-decoration: underline; text-underline-offset: 3px; }\n\n.qdj-steps { counter-reset: qdjstep; }\n.qdj-steps .qdj-card::before { counter-increment: qdjstep; content: counter(qdjstep, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--accent, #DC143C); margin-bottom: 10px; }\n\n.qdj-quote-card { background: #fff; border: 1px solid #e8e8e8; border-left: 4px solid var(--accent, #DC143C); border-radius: 0 8px 8px 0; padding: 24px 28px; }\n.qdj-quote-card .q { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--contrast-2, #2b2b2b); font-style: normal; }\n.qdj-quote-card cite { display: block; font-style: normal; font-size: 13.5px; color: var(--contrast-3, #616161); }\n.qdj-quote-card cite strong { color: var(--contrast, #171717); }\n\n.qdj-faq details { border-bottom: 1px solid #e8e8e8; padding: 4px 0; }\n.qdj-faq summary { font-weight: 600; font-size: 17px; cursor: pointer; padding: 14px 28px 14px 0; list-style: none; position: relative; color: var(--contrast, #171717); }\n.qdj-faq summary::-webkit-details-marker { display: none; }\n.qdj-faq summary::after { content: +; position: absolute; right: 4px; top: 12px; font-size: 20px; color: var(--accent, #DC143C); transition: transform .15s; }\n.qdj-faq details[open] summary::after { transform: rotate(45deg); }\n.qdj-faq details > p { color: var(--contrast-3, #616161); font-size: 15.5px; line-height: 1.7; margin: 0 0 16px; max-width: 75ch; }\n\n@media (max-width: 768px) {\n  .qdj-section { padding: 48px 16px; }\n  .qdj-h2 { font-size: 26px; }\n  .qdj-lede { font-size: 16px; margin-bottom: 28px; }\n}
