/* ============================================================
   CTAI — How I test (/how-i-test-ai-tools/)
   Page-specific blocks only, from ctai_how_i_test/index.html,
   mapped onto repo tokens (design-system.css). Header, hero,
   section heads, principles, FAQ, "Where to next" and footer come
   from the shared shell (shell.css); worked examples are the real
   verdict card (report.css).
   ============================================================ */

.hm-page { color: var(--ctai-white); font-family: var(--font-body); line-height: 1.55; }
.hm-page *, .hm-page *::before, .hm-page *::after { box-sizing: border-box; }
:where(.hm-page) :where(h3,h4,p,ul,ol,li) { margin: 0; padding: 0; } /* zero specificity: never beats shared components */

/* 02 · the process — four phases, then the verdict */
.hm-phases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--ctai-hairline); border-left: 1px solid var(--ctai-hairline); }
.hm-phase { padding: 30px var(--sh-pad-x) 34px; border-right: 1px solid var(--ctai-hairline); border-bottom: 1px solid var(--ctai-hairline); background: var(--ctai-panel-1); transition: background .18s; }
.hm-phase:hover { background: var(--ctai-lift); }
.hm-phase .pnum { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--ctai-white); } /* only section numbers are yellow */
.hm-phase h3 { font-weight: 700; font-size: clamp(20px,2vw,24px); letter-spacing: -.02em; margin-top: 10px; }
.hm-phase .win { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ctai-yellow); margin-top: 8px; }
.hm-phase p { color: var(--ctai-ink-64); margin-top: 14px; font-size: 14.5px; line-height: 1.55; max-width: 42ch; }
.hm-verdict-row { grid-column: 1 / -1; border-right: 1px solid var(--ctai-hairline); border-bottom: 1px solid var(--ctai-hairline); padding: 24px var(--sh-pad-x); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; background: var(--ctai-panel-deep); }
.hm-verdict-row .arrow { color: var(--ctai-yellow); font-size: 20px; }
.hm-verdict-row b { font-weight: 700; font-size: clamp(19px,2vw,22px); letter-spacing: -.02em; }
.hm-verdict-row span:last-child { color: var(--ctai-ink-64); font-size: 14.5px; }
@media (max-width: 720px) { .hm-phases { grid-template-columns: 1fr; } }

/* 03 · the score — the 8 weighted metrics (bar length = weight; heaviest in yellow) */
.hm-metrics { border: 1px solid var(--ctai-hairline); background: var(--ctai-panel-1); padding: 6px var(--sh-pad-x); }
.hm-metric { display: grid; grid-template-columns: 210px minmax(0,1fr) 56px; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--ctai-hairline-soft); }
.hm-metric:last-child { border-bottom: 0; }
.hm-metric .mname { font-weight: 600; font-size: 15px; }
.hm-metric .mtrack { position: relative; height: 8px; background: var(--ctai-panel-deep); overflow: hidden; }
.hm-metric .mfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ctai-white); }
.hm-metric.heavy .mfill { background: var(--ctai-yellow); }
.hm-metric .mwt { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--ctai-ink-64); }
.hm-metric.heavy .mwt { color: var(--ctai-white); }
.hm-score-note { margin-top: 26px; font-size: 15.5px; color: var(--ctai-ink-64); max-width: 62ch; line-height: 1.55; }
.hm-score-note b { color: var(--ctai-yellow); font-weight: 600; }
@media (max-width: 600px) { .hm-metric { grid-template-columns: 130px minmax(0,1fr) 48px; gap: 12px; } .hm-metric .mname { font-size: 14px; } }

/* 04 · the verdict — colour + symbol + word, verdict tokens only */
.hm-vbands { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--ctai-hairline); }
.hm-vband { padding: 28px 26px; border-left: 1px solid var(--ctai-hairline); background: var(--ctai-panel-1); }
.hm-vband:first-child { border-left: 0; }
.hm-vband .sym { font-size: 19px; font-weight: 700; }
.hm-vband .rng { font-family: var(--font-stencil); font-size: 34px; line-height: 1; margin-top: 10px; }
.hm-vband p { color: var(--ctai-ink-64); font-size: 14.5px; margin-top: 12px; line-height: 1.45; }
.hm-vband.pass .sym, .hm-vband.pass .rng { color: var(--ctai-green); }
.hm-vband.mixed .sym, .hm-vband.mixed .rng { color: var(--ctai-orange); }
.hm-vband.fail .sym, .hm-vband.fail .rng { color: var(--ctai-red); }
@media (max-width: 720px) { .hm-vbands { grid-template-columns: 1fr; } .hm-vband { border-left: 0; border-top: 1px solid var(--ctai-hairline); } .hm-vband:first-child { border-top: 0; } }

/* 05 · claim → test → evidence → analysis → verdict (Messaging v1.1 §8) */
.hm-spine { list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid var(--ctai-hairline); margin: 0 0 26px; counter-reset: spine; }
.hm-spine li { counter-increment: spine; padding: 20px 18px 22px; border-left: 1px solid var(--ctai-hairline); background: var(--ctai-panel-1); display: flex; flex-direction: column; gap: 10px; }
.hm-spine li:first-child { border-left: 0; }
.hm-spine li::before { content: counter(spine, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ctai-ink-40); }
.hm-spine b { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ctai-yellow); }
.hm-spine span { font-size: 13.5px; line-height: 1.5; color: var(--ctai-ink-64); }
@media (max-width: 920px) { .hm-spine { grid-template-columns: 1fr; } .hm-spine li { border-left: 0; border-top: 1px solid var(--ctai-hairline); } .hm-spine li:first-child { border-top: 0; } }

/* 06 · in practice — the real verdict card, two up */
.hm-page .vc-grid.vc-2up { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 920px) { .hm-page .vc-grid.vc-2up { grid-template-columns: 1fr; } }

/* CTA band — the homepage's .lv2-cta-band, placed like any other block */
.hm-cta { padding-top: var(--sh-band-top); }
.hm-cta .lv2-cta-band { margin-top: 0; }
.hm-cta .lv2-cta-band h2 { font-family: var(--font-display); color: var(--ctai-white); margin: 0; letter-spacing: -.02em; }
.hm-cta .lv2-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hm-cta a.lv2-btn-yellow { color: var(--ctai-black); text-decoration: none; }
.hm-cta a.lv2-btn-yellow:hover { background: var(--ctai-white); color: var(--ctai-black); }