/* Examples family: shared page-specific styles extracted from approved staging prototypes. */
/* Reuses the existing home-hub-media card slot. Dedicated light/dark assets avoid theme mismatch. */
.examples-hub-page .examples-card-visual{background-position:center;background-repeat:no-repeat;background-size:cover}
.examples-hub-page .examples-card-visual--prompts{background-image:image-set(url("/assets/examples/prompt-examples-light-480w.webp") 1x,url("/assets/examples/prompt-examples-light.webp") 2x)}
.examples-hub-page .examples-card-visual--tests{background-image:image-set(url("/assets/examples/response-quality-tests-light-480w.webp") 1x,url("/assets/examples/response-quality-tests-light.webp") 2x)}
.examples-hub-page .examples-card-visual--clear{background-image:image-set(url("/assets/examples/how-we-test-clear-light-480w.webp") 1x,url("/assets/examples/how-we-test-clear-light.webp") 2x)}
[data-theme="dark"] .examples-hub-page .examples-card-visual--prompts{background-image:image-set(url("/assets/examples/prompt-examples-dark-480w.webp") 1x,url("/assets/examples/prompt-examples-dark.webp") 2x)}
[data-theme="dark"] .examples-hub-page .examples-card-visual--tests{background-image:image-set(url("/assets/examples/response-quality-tests-dark-480w.webp") 1x,url("/assets/examples/response-quality-tests-dark.webp") 2x)}
[data-theme="dark"] .examples-hub-page .examples-card-visual--clear{background-image:image-set(url("/assets/examples/how-we-test-clear-dark-480w.webp") 1x,url("/assets/examples/how-we-test-clear-dark.webp") 2x)}

/* Reuse the established CLEAR palette from the Response Quality Tests; layout remains content.css. */
.clear-method-page{--clear-c:#4f6fe8;--clear-c-soft:#eef3ff;--clear-l:#2f9662;--clear-l-soft:#edf8f2;--clear-ear:#7650c8;--clear-ear-soft:#f3effc}
.clear-method-page .clear-row--c{background:linear-gradient(135deg,var(--clear-c-soft),var(--surface))}
.clear-method-page .clear-row--l{background:linear-gradient(135deg,var(--clear-l-soft),var(--surface))}
.clear-method-page .clear-row--ear{background:linear-gradient(135deg,var(--clear-ear-soft),var(--surface))}
.clear-method-page .clear-row--c .doc-flow-step,.clear-method-page .clear-topic--c>h2{color:var(--clear-c)}
.clear-method-page .clear-row--l .doc-flow-step,.clear-method-page .clear-topic--l>h2{color:var(--clear-l)}
.clear-method-page .clear-row--ear .doc-flow-step,.clear-method-page .clear-topic--ear>h2{color:var(--clear-ear)}
.clear-method-page .clear-topic--c{background:linear-gradient(180deg,#f7f9ff 0%, #eef3ff 58%, #e6edff 100%)}
.clear-method-page .clear-topic--l{background:linear-gradient(180deg,#f7fbf8 0%, #edf8f2 58%, #e1f1e8 100%)}
.clear-method-page .clear-topic--ear{background:linear-gradient(180deg,#faf8ff 0%, #f3effc 58%, #ece4fb 100%)}
/* CLEAR-page-only refinements: preserve production components, reduce excess card spacing. */
.clear-method-page>.doc-topic>h2{margin-top:0}
/* Neutralize content.css mobile padding on the comparison wrapper so nested cards align with adjacent content. */
.clear-method-page .comparison{padding:0}
.clear-method-page .clear-scale .doc-flow-row{grid-template-columns:88px minmax(0,1fr);gap:8px}
@media(min-width:720px){
  .clear-method-page .clear-score-steps{grid-template-rows:repeat(3,auto)}
  .clear-method-page .clear-score-steps .tl-step:nth-child(3)::before,
  .clear-method-page .clear-score-steps .tl-step:nth-child(5)::before{display:none}
  .clear-method-page .clear-score-steps .tl-step:nth-child(4)::before{display:block}
}
@media(max-width:700px){
  .clear-method-page .clear-scale .doc-flow-row{grid-template-columns:64px minmax(0,1fr);gap:7px}
}
@media(max-width:640px){
  .clear-method-page>.doc-topic{padding:18px 12px}
  .clear-method-page .comparison{gap:10px;margin:14px 0}
  .clear-method-page .comparison div{padding:14px}
}
[data-theme="dark"] .clear-method-page .clear-row--c{background:linear-gradient(135deg,#15213d,var(--surface-2))}
[data-theme="dark"] .clear-method-page .clear-row--l{background:linear-gradient(135deg,#132b21,var(--surface-2))}
[data-theme="dark"] .clear-method-page .clear-row--ear{background:linear-gradient(135deg,#261c3d,var(--surface-2))}
[data-theme="dark"] .clear-method-page .clear-row--c .doc-flow-step,[data-theme="dark"] .clear-method-page .clear-topic--c>h2{color:#b9c8ff}
[data-theme="dark"] .clear-method-page .clear-row--l .doc-flow-step,[data-theme="dark"] .clear-method-page .clear-topic--l>h2{color:#aee2c6}
[data-theme="dark"] .clear-method-page .clear-row--ear .doc-flow-step,[data-theme="dark"] .clear-method-page .clear-topic--ear>h2{color:#d7c4ff}
[data-theme="dark"] .clear-method-page .clear-topic--c{background:linear-gradient(180deg,#101827 0%, #15213d 58%, #1b294b 100%)}
[data-theme="dark"] .clear-method-page .clear-topic--l{background:linear-gradient(180deg,#0f1814 0%, #132b21 58%, #173528 100%)}
[data-theme="dark"] .clear-method-page .clear-topic--ear{background:linear-gradient(180deg,#171322 0%, #261c3d 58%, #2f2350 100%)}

/* Examples hub: keep a calmer visual handoff from hero trust pills to the exploration heading. */
.examples-hub-page .home-hub-wrap{padding-top:36px}