/* Reusable technical article: question → category → options → comparison → verification. */
.article-page { background: var(--color-paper); color: var(--color-ink); }
.article-hero { position: relative; min-height: 620px; overflow: hidden; color: var(--color-ivory); }
.article-hero-media,.article-hero-shade { position: absolute; inset: 0; }
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.article-hero-shade { background: linear-gradient(90deg,rgba(4,16,13,.98) 0%,rgba(4,16,13,.84) 57%,rgba(4,16,13,.18) 100%); }
.article-hero-inner { position: relative; display: flex; min-height: 620px; align-items: center; padding-block: 85px; }
.breadcrumbs { position: absolute; top: 24px; left: 0; display: flex; gap: 9px; color: rgba(242,239,230,.64); font-size: 11px; }
.article-hero-copy { max-width: 890px; }
.article-hero h1 { margin: 0; font-size: clamp(43px,5.4vw,74px); font-weight: 620; line-height: 1.03; letter-spacing: -.055em; }
.article-hero h1 span { color: var(--color-champagne); }
.article-hero-copy > p:not(.kicker) { max-width: 680px; margin: 22px 0; color: rgba(242,239,230,.79); font-size: 16px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: rgba(242,239,230,.56); font-size: 10px; }
.article-decision-strip { background: #10251e; color: var(--color-ivory); }
.article-decision-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.article-decision-grid > div { padding: 24px 27px; border-left: 1px solid rgba(242,239,230,.13); }
.article-decision-grid > div:last-child { border-right: 1px solid rgba(242,239,230,.13); }
.article-decision-grid strong { display: block; color: var(--color-champagne); font-size: 13px; }
.article-decision-grid span { color: rgba(242,239,230,.58); font-size: 10px; }
.article-toc { position: sticky; z-index: 5; top: var(--header-height,76px); border-bottom: 1px solid #d8d6cd; background: rgba(247,246,241,.94); backdrop-filter: blur(12px); }
.article-toc .container { display: flex; min-height: 54px; align-items: center; gap: 27px; overflow-x: auto; white-space: nowrap; }
.article-toc strong { color: var(--color-green); font-size: 10px; }
.article-toc a { font-size: 11px; font-weight: 650; }
.article-section { padding: 100px 0; }
.article-split,.article-sources-grid { display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(55px,8vw,128px); }
.article-split h2,.article-heading h2,.article-test h2,.article-sources h2,.article-faq h2 { margin: 0; font-size: clamp(34px,4vw,56px); font-weight: 620; line-height: 1.07; letter-spacing: -.05em; }
.question-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #d5d3c9; }
.question-list li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid #d5d3c9; }
.question-list li > span { color: var(--color-green); font-size: 10px; font-weight: 800; }
.question-list h3 { margin: 0 0 5px; font-size: 16px; }
.question-list p { margin: 0; color: var(--color-muted); font-size: 13px; }
.article-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.article-heading > p { max-width: 430px; margin: 0; color: var(--color-muted); font-size: 14px; }
.article-heading-light > p { color: rgba(242,239,230,.62); }
.article-contrast { padding: 100px 0; background: #0b1814; color: var(--color-ivory); }
.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 45px; background: rgba(242,239,230,.2); }
.contrast-grid article { padding: 34px; background: #10251e; }
.contrast-grid article > span { color: var(--color-champagne); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.contrast-grid h3 { margin: 35px 0 18px; font-size: 27px; }
.contrast-grid ul { margin: 0 0 28px; padding-left: 19px; color: rgba(242,239,230,.65); font-size: 13px; }
.contrast-grid a { color: var(--color-champagne); font-size: 11px; font-weight: 750; }
.model-section { background: #ecebe5; }
.model-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 45px; }
.model-card { background: #fff; }
.model-media { aspect-ratio: 4 / 3; overflow: hidden; }
.model-media img { width: 100%; height: 100%; object-fit: cover; }
.model-body { padding: 26px; }
.model-body > p { margin: 0 0 5px; color: var(--color-green); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.model-body h3 { margin: 0 0 14px; font-size: 27px; }
.model-body > strong { display: block; min-height: 45px; font-size: 13px; }
.model-body ul { margin: 20px 0 25px; padding: 0; list-style: none; border-top: 1px solid #d8d6cd; }
.model-body li { padding: 9px 0; border-bottom: 1px solid #d8d6cd; color: var(--color-muted); font-size: 11px; }
.model-body a { font-size: 11px; font-weight: 750; }
.article-comparison { padding: 100px 0; background: #10251e; color: var(--color-ivory); }
.comparison-scroll { margin-top: 45px; overflow-x: auto; }
.comparison-scroll table { width: 100%; min-width: 820px; border-collapse: collapse; }
.comparison-scroll th,.comparison-scroll td { padding: 15px 17px; border: 1px solid rgba(242,239,230,.17); text-align: left; font-size: 12px; }
.comparison-scroll thead th { color: var(--color-champagne); font-size: 11px; }
.comparison-scroll tbody th { width: 130px; color: rgba(242,239,230,.7); }
.comparison-scroll td { color: rgba(242,239,230,.68); }
.comparison-note { margin: 16px 0 0; color: rgba(242,239,230,.5); font-size: 10px; }
.myths-section { background: #fff; }
.myth-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; margin-top: 44px; background: #d5d3ca; }
.myth-grid article { min-height: 235px; padding: 25px; background: #f7f6f1; }
.myth-grid strong { font-size: 14px; }
.myth-grid p { margin: 55px 0 0; color: var(--color-muted); font-size: 12px; }
.article-test { padding: 100px 0; background: #e8e5db; }
.article-test-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 60px; align-items: center; }
.article-test-media { position: relative; }
.article-test-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-test-media > span { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 9px 12px; background: rgba(7,22,18,.86); color: var(--color-champagne); font-size: 10px; }
.article-test ol { margin: 24px 0 28px; padding: 0; list-style: none; border-top: 1px solid #c9c6bb; }
.article-test li { display: grid; grid-template-columns: 35px 1fr; gap: 13px; padding: 12px 0; border-bottom: 1px solid #c9c6bb; }
.article-test li span { color: var(--color-green); font-size: 9px; font-weight: 800; }
.article-test li p { margin: 0; color: var(--color-muted); font-size: 12px; }
.article-test li strong { color: var(--color-ink); }
.article-sources { padding: 86px 0; background: #f7f6f1; }
.article-sources-grid > div > p { margin-top: 0; color: var(--color-muted); font-size: 14px; }
.article-sources ul { margin: 24px 0; padding: 0; list-style: none; border-top: 1px solid #d2d0c6; }
.article-sources li { padding: 11px 0; border-bottom: 1px solid #d2d0c6; font-size: 11px; font-weight: 700; }
.article-sources dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.article-sources dt { color: var(--color-muted); font-size: 9px; }
.article-sources dd { margin: 4px 0 0; font-size: 11px; font-weight: 700; }
.article-faq { padding: 95px 0; background: #ecebe5; }
.article-faq .faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(55px,8vw,125px); }
.article-faq .faq-list details { border-top: 1px solid #cbc9bf; }
.article-faq .faq-list details:last-child { border-bottom: 1px solid #cbc9bf; }
.article-faq .faq-list summary { padding: 16px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
.article-faq .faq-list p { margin: 0 0 17px; color: var(--color-muted); font-size: 13px; }
.article-final-cta { padding: 88px 0 104px; background: #0b1814; color: var(--color-ivory); }
.article-final-inner { display: flex; align-items: end; justify-content: space-between; gap: 55px; }
.article-final-inner h2 { margin: 0; font-size: clamp(34px,4vw,55px); line-height: 1.07; letter-spacing: -.05em; }
.article-final-inner p:not(.kicker) { max-width: 650px; margin: 18px 0 0; color: rgba(242,239,230,.65); }
.article-final-inner > div:last-child { display: flex; flex: 0 0 auto; gap: 10px; }
@media (max-width: 980px) {
  .article-split,.article-sources-grid,.article-test-grid,.article-faq .faq-layout { grid-template-columns: 1fr; gap: 38px; }
  .model-grid { grid-template-columns: 1fr; }
  .model-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .myth-grid { grid-template-columns: repeat(2,1fr); }
  .article-heading,.article-final-inner { align-items: start; flex-direction: column; }
}
@media (max-width: 620px) {
  .article-hero,.article-hero-inner { min-height: 570px; }
  .article-hero-shade { background: linear-gradient(180deg,rgba(4,16,13,.67),rgba(4,16,13,.96)); }
  .article-hero-inner { align-items: end; padding-block: 86px 68px; }
  .breadcrumbs { left: 18px; }
  .article-decision-grid,.contrast-grid,.myth-grid { grid-template-columns: 1fr; }
  .article-decision-grid > div { border-top: 1px solid rgba(242,239,230,.13); }
  .article-section,.article-contrast,.article-comparison,.article-test,.article-faq { padding: 68px 0; }
  .article-heading { display: block; }
  .article-heading > p { margin-top: 17px; }
  .model-card { display: block; }
  .myth-grid article { min-height: 185px; }
  .article-sources dl { grid-template-columns: 1fr; }
  .article-final-inner > div:last-child { width: 100%; flex-direction: column; }
}