.tech-article {
  --article-width: 1320px;
  --article-body-width: 1240px;
  --article-bg: #F7F8F5;
  --article-paper: #FBFBF8;
  --article-ink: #111411;
  --article-heading: #0B0E0C;
  --article-secondary: #555C57;
  --article-muted: #747B76;
  --article-rule: rgba(17, 20, 17, 0.12);
  --article-accent: #1F7A43;
  background: var(--article-bg);
  color: var(--article-ink);
}
.article-shell { width: min(var(--article-width),calc(100% - var(--gutter) - var(--gutter))); margin-inline: auto; }
.article-hero { position: relative; isolation: isolate; overflow: hidden; padding: 22px 0 0; border-bottom: 1px solid var(--article-rule); background: var(--article-bg); }
.article-hero::before,.article-hero::after { position: absolute; z-index: -1; pointer-events: none; content: ""; }
.article-hero::before {
  inset: 0 0 0 auto;
  width: min(78%,1000px);
  opacity: .72;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600' fill='none'%3E%3Cg stroke='%23111411' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M-90 150C35 25 153 18 248 94s190 94 292 14 216-93 353-33'/%3E%3Cpath d='M-82 173C42 48 160 41 255 117s190 94 292 14 216-93 353-33'/%3E%3Cpath d='M-74 196C50 71 168 64 263 140s190 94 292 14 216-93 353-33'/%3E%3Cpath d='M-66 219C58 94 176 87 271 163s190 94 292 14 216-93 353-33'/%3E%3Cpath d='M-58 242C66 117 184 110 279 186s190 94 292 14 216-93 353-33'/%3E%3Cpath d='M-110 505c108-92 211-96 301-29s185 86 285 15 191-80 403-1'/%3E%3Cpath d='M-101 526c108-92 211-96 301-29s185 86 285 15 191-80 403-1'/%3E%3Cpath d='M-92 547c108-92 211-96 301-29s185 86 285 15 191-80 403-1'/%3E%3Cpath d='M-83 568c108-92 211-96 301-29s185 86 285 15 191-80 403-1'/%3E%3C/g%3E%3C/svg%3E") right center / min(90vw,900px) auto no-repeat;
}
.article-hero::after {
  right: -152px;
  bottom: -185px;
  width: clamp(380px,42vw,600px);
  aspect-ratio: 1;
  opacity: .035;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' fill='none' stroke='%23111411' stroke-width='2'%3E%3Cpath d='M210 210 106 106m104 104 104-104M210 210 106 314m104-104 104 104'/%3E%3Ccircle cx='92' cy='92' r='38'/%3E%3Ccircle cx='328' cy='92' r='38'/%3E%3Ccircle cx='92' cy='328' r='38'/%3E%3Ccircle cx='328' cy='328' r='38'/%3E%3Cpath d='m185 185 25-19 25 19 19 25-19 25-25 19-25-19-19-25 19-25Z'/%3E%3Cpath d='M200 201h20v18h-20zM191 210h38'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.43fr) minmax(300px,1fr); align-items: center; gap: 0 clamp(38px,5vw,72px); }
.article-hero .breadcrumbs { display: flex; grid-column: 1 / -1; color: var(--article-muted); }
.tech-article .breadcrumbs a { color: var(--article-secondary); }
.tech-article .breadcrumbs a:hover { color: var(--article-accent); }
.tech-article .breadcrumbs [aria-current="page"] { color: #343B36; }
.tech-article .eyebrow { color: var(--article-accent); }
.tech-article .signal-dot { background: var(--article-accent); }
.article-hero-copy { max-width: 730px; padding: clamp(38px,4.5vw,62px) 0 46px; }
.article-hero-copy h1 { max-width: 17ch; margin: 17px 0 18px; color: var(--article-heading); font: 700 clamp(42px,4.2vw,62px)/1.02 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.article-lead { max-width: 59ch; margin: 0; color: #333A35; font-size: clamp(16px,1.45vw,19px); line-height: 1.6; }
.article-byline { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 22px; color: var(--article-secondary); font: 400 10px/1.5 var(--font-body); letter-spacing: .035em; }
.article-byline span + span::before { content: "/"; padding-right: 18px; color: #9AA09A; }
.article-hero-image-slot { position: relative; z-index: 1; min-width: 0; margin: 24px 0 40px; overflow: hidden; border: 1px solid var(--article-rule); line-height: 0; }
.article-hero-image-slot img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.article-layout.article-shell { width: min(var(--article-body-width),calc(100% - 80px)); padding: clamp(44px,5vw,68px) 0 clamp(64px,7vw,90px); }
.article-prose { display: block; width: 100%; min-width: 0; color: #303732; font-size: 17px; line-height: 1.7; }
.article-prose > * + * { margin-top: clamp(34px,4vw,54px); }
.article-prose p { width: 100%; max-width: none; margin-bottom: 0; }
.article-prose h2,.article-prose h3 { width: 100%; max-width: none; }
.article-prose h2 { margin: 0 0 16px; color: var(--article-heading); font: 600 clamp(29px,2.8vw,37px)/1.12 var(--font-display); letter-spacing: -.025em; }
.article-prose h3 { margin: 28px 0 12px; color: #202722; font: 600 clamp(21px,2vw,26px)/1.2 var(--font-display); letter-spacing: -.015em; }
.article-prose strong { color: #151A16; font-weight: 600; }
.article-prose a { color: var(--article-accent); text-underline-offset: 3px; }
.article-prose a:hover { color: #176B38; text-decoration: underline; }
.editorial-spread { display: contents; }
.quick-answer { margin: 0; padding: clamp(25px,2.8vw,34px); border-left: 2px solid var(--green); border-radius: 2px; background: #111411; color: #F4F5F1; }
.quick-answer .eyebrow { margin: 0 0 11px; color: var(--green); }
.quick-answer > p:last-child { color: #F0F2ED; font-size: 17px; line-height: 1.65; }
.article-section { display: block; width: 100%; min-width: 0; scroll-margin-top: 108px; }
.article-section > p + p { margin-top: 16px; }
.editorial-list { display: block; width: 100%; margin: 18px 0 0; padding-left: 22px; }
.editorial-list li { width: 100%; margin-top: 8px; }
.editorial-list li::marker { color: var(--article-accent); font-size: .8em; }
.article-section--tvl { display: block; width: 100%; }
.editorial-topic,.editorial-topic--secondary { display: block; width: 100%; max-width: none; }
.editorial-topic--secondary { margin-top: 32px; padding: 0; }
.editorial-topic--secondary h3 { margin-top: 0; font-size: clamp(22px,2vw,27px); }
.technical-note { width: 100%; max-width: none; margin: 20px 0 0; padding: 12px 0 12px 17px; border: 0; border-left: 1px solid rgba(17,20,17,.3); background: transparent; }
.note-label { display: block; margin-bottom: 5px; color: var(--article-accent); font: 500 9px/1.4 var(--font-body); letter-spacing: .12em; }
.technical-note p { width: 100%; max-width: none; color: #343B36; font-size: 15px; line-height: 1.65; }
.editorial-spread--conditions { display: contents; }
.article-section--pal { display: block; }
.article-section--pal h2 { max-width: none; font-size: clamp(29px,2.8vw,37px); }
.article-section-copy { display: block; width: 100%; }
.article-section-copy > p + p { margin-top: 16px; }
.comparison-steps { display: block; width: 100%; margin: 20px 0 0; padding: 0 0 0 28px; list-style-position: outside; }
.comparison-steps li { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--article-rule); }
.comparison-steps li:first-child { border-top: 1px solid var(--article-rule); }
.comparison-steps li::marker { color: var(--article-accent); font: 500 .82em/1 var(--font-body); }
.mistake-list { display: block; width: 100%; margin: 18px 0 0; border-top: 1px solid var(--article-rule); }
.mistake-list > div { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--article-rule); }
.mistake-list dt { color: #202722; font: 600 15px/1.5 var(--font-body); }
.mistake-list dd { width: 100%; margin: 5px 0 0; color: #454D47; }
.checklist-section { display: block; width: 100%; padding: clamp(24px,2.8vw,34px); border: 1px solid #262D28; border-radius: 2px; background: #111411; color: #F4F5F1; }
.checklist-intro { display: block; }
.checklist-intro .eyebrow { margin: 0 0 8px; color: var(--green); }
.checklist-section h2 { color: #F4F5F1; }
.checklist-section .checklist li > strong,
.checklist-section .checklist-content > strong { color: #F0F2ED; }
.checklist-section .checklist-content > span { color: rgba(240, 242, 237, .78); }
.checklist { display: block; width: 100%; margin: 16px 0 0; padding: 0; list-style: none; }
.checklist li { position: relative; width: 100%; margin-top: 10px; padding-left: 23px; color: #ECEFE9; }
.checklist li::before { position: absolute; top: .55em; left: 0; width: 9px; height: 9px; border: 1px solid var(--green); content: ""; }
.checklist-note { width: 100%; max-width: none; margin: 14px 0 0 !important; color: #B7BDB7; font-size: 13px; }

/* The two later diagnostic/info blocks use an explicit vertical text stack. */
.checklist-section--stacked .checklist {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}
.checklist-section--stacked .checklist li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.checklist-section--stacked .checklist li::before { content: none; }
.checklist-section--stacked .checklist-mark {
  width: 9px;
  height: 9px;
  margin-top: .62em;
  border: 1px solid var(--green);
}
.checklist-section--stacked .checklist-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
.checklist-section--stacked .checklist-content > strong,
.checklist-section--stacked .checklist-content > span {
  display: block;
  width: 100%;
  text-align: left;
}
.checklist-section--stacked .checklist-content > strong {
  margin: 0 0 5px;
  color: #F0F2ED;
  font-weight: 600;
}
.checklist-section--stacked .checklist-content > span {
  color: rgba(240, 242, 237, .78);
  font-weight: 400;
  line-height: 1.55;
}
.product-reference { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
.product-reference-copy { width: 100%; max-width: none; }
.product-reference .eyebrow { margin: 0 0 8px; }
.product-reference h2 { margin-bottom: 10px; }
.product-reference-copy > p:not(.eyebrow) { width: 100%; max-width: none; color: #454D47; font-size: 15px; }
.product-reference-list { display: block; width: 100%; margin: 18px 0 0; padding: 0; list-style: none; }
.product-reference-list li { width: 100%; }
.product-reference-list a { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 0; border-top: 1px solid var(--article-rule); color: #242B26; font-size: 15px; line-height: 1.45; text-decoration: none; transition: color .18s ease; }
.product-reference-list li:last-child a { border-bottom: 1px solid var(--article-rule); }
.product-reference-list a span { color: var(--article-accent); font-size: 15px; }
.product-reference-list a:hover { color: var(--article-accent); }
.article-faq { display: block; width: 100%; }
.article-faq > h2 { position: static; }
.article-faq-list { display: block; width: 100%; }
.article-faq-list details { width: 100%; border-top: 1px solid var(--article-rule); }
.article-faq-list details:last-child { border-bottom: 1px solid var(--article-rule); }
.article-faq-list summary { position: relative; padding: 16px 35px 16px 0; color: #18201A; font-weight: 600; cursor: pointer; list-style: none; }
.article-faq-list summary::-webkit-details-marker { display: none; }
.article-faq-list summary::after { position: absolute; top: 16px; right: 3px; color: var(--article-accent); content: "+"; font: 400 18px/1 var(--font-body); }
.article-faq-list details[open] summary::after { content: "−"; }
.article-faq-list details p { width: 100%; max-width: none; padding: 0 30px 17px 0; color: #454D47; font-size: 15px; }
.article-sources { display: block; width: 100%; margin: 0; padding-top: 24px; border-top: 1px solid var(--article-rule); }
.article-sources-copy { width: 100%; max-width: none; }
.article-sources-copy h2 { margin-bottom: 11px; color: #343B36; font-size: 24px; }
.article-sources-copy p { width: 100%; max-width: none; color: #5F6761; font-size: 13px; }
.article-sources ol { display: block; width: 100%; margin: 18px 0 0; padding-left: 22px; color: #5F6761; font-size: 13px; line-height: 1.6; }
.article-sources li { width: 100%; margin-top: 9px; }
.article-sources li::marker { color: #7A827B; font-family: var(--font-body); }
.article-sources a { color: #39443D; overflow-wrap: anywhere; }
.article-cta { display: block; width: 100%; margin: 0; padding: clamp(26px,3.2vw,38px); border: 1px solid #262D28; border-radius: 2px; background: #111411; color: #F4F5F1; }
.article-cta-copy,.article-cta-action { display: block; width: 100%; max-width: none; }
.article-cta-copy .eyebrow { margin: 0 0 9px; color: var(--green); }
.article-cta h2 { margin: 0 0 10px; color: #F4F5F1; }
.article-cta-action > p { width: 100%; max-width: none; margin: 0; color: #D0D5D0; font-size: 15px; }
.article-cta-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 19px; padding: 12px 15px; border: 1px solid var(--green); color: var(--green) !important; font: 500 9px/1.2 var(--font-body); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background .2s ease,color .2s ease; }
.article-cta-link:hover { background: var(--green); color: #101110 !important; }
.article-cta-link span { font-size: 14px; }
@media (max-width: 900px) {
  .article-hero-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .article-hero .breadcrumbs { grid-column: 1; }
  .article-hero-copy { max-width: 760px; padding: 34px 0 20px; }
  .article-hero-image-slot { width: 100%; margin: 0 0 32px; }
  .article-layout.article-shell { width: calc(100% - var(--gutter) - var(--gutter)); padding-top: 42px; }
  .article-prose > * + * { margin-top: 40px; }
}
@media (max-width: 600px) {
  .article-shell { width: calc(100% - 40px); }
  .article-hero { padding-top: 18px; }
  .article-hero::before { width: 100%; opacity: .36; background-position: 58% center; background-size: 760px auto; }
  .article-hero::after { display: none; }
  .article-hero-copy { padding: 30px 0 18px; }
  .article-hero-copy h1 { max-width: 15ch; margin-top: 14px; font-size: clamp(38px,10.7vw,48px); }
  .article-lead { font-size: 16px; }
  .article-byline { gap: 7px 11px; margin-top: 18px; font-size: 9px; }
  .article-byline span + span::before { padding-right: 11px; }
  .article-hero-image-slot { margin-bottom: 27px; }
  .article-layout.article-shell { width: calc(100% - 40px); padding-top: 34px; padding-bottom: 56px; }
  .article-prose { font-size: 16px; line-height: 1.68; }
  .article-prose > * + * { margin-top: 34px; }
  .article-prose h2 { font-size: 29px; }
  .article-prose h3 { margin-top: 23px; font-size: 22px; }
  .quick-answer { padding: 22px; }
  .quick-answer > p:last-child { font-size: 16px; }
  .checklist-section { padding: 22px; }
  .article-cta { padding: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .article-cta-link,.product-reference-list a { transition: none; }
}

/* Article spacing pass: keep the approved wide, single-column layout intact. */
.article-prose h2 { margin-bottom: 23px; }
.article-prose h3 { margin: 40px 0 16px; }
.article-section > p + p,
.article-section-copy > p + p,
.editorial-topic > p + p { margin-top: 18px; }
.editorial-topic--secondary { margin-top: 40px; }
.article-prose .editorial-topic--secondary h3 { margin: 40px 0 16px; }

.article-prose #tvl,
.article-prose #lux,
.article-prose #wdr,
.article-prose #pal-ntsc,
.article-prose #compare,
.article-prose #mistakes {
  margin-top: 36px;
  padding-top: 27px;
  border-top: 1px solid rgba(17, 20, 17, 0.10);
}
.article-prose #selection { margin-top: 48px; margin-bottom: 64px; }
.article-prose #tvl,
.article-prose #lux,
.article-prose #wdr,
.article-prose #pal-ntsc,
.article-prose #compare { margin-bottom: 64px; }
.comparison-steps li { padding-block: 20px; }
.mistake-list > div { padding-block: 18px; }
.checklist-section { margin-block: 64px !important; padding: 32px; }
.checklist li { margin-top: 16px; }
.article-prose > .product-reference,
.article-prose > .article-faq,
.article-prose > .article-sources,
.article-prose > .article-cta {
  margin-top: 36px;
  padding-top: 27px;
  border-top: 1px solid rgba(17, 20, 17, 0.10);
}
.article-prose > .product-reference,
.article-prose > .article-faq,
.article-prose > .article-sources { margin-bottom: 64px; }
.product-reference .eyebrow { margin-bottom: 10px; }
.product-reference h2 { margin-bottom: 20px; }
.product-reference-copy > p:not(.eyebrow) { margin: 0; }
.product-reference-list { margin-top: 27px; }
.product-reference-list a { padding-block: 17px; }
.article-faq > h2 { margin-bottom: 25px; }
.article-faq-list summary { padding-block: 24px; }
.article-faq-list summary::after { top: 25px; }
.article-sources { padding-top: 27px; }
.article-sources-copy h2 { margin-bottom: 18px; }
.article-sources ol { margin-top: 22px; }
.article-cta { padding-top: clamp(30px,3.2vw,38px); }

@media (max-width: 600px) {
  .article-prose h2 { margin-bottom: 18px; }
  .article-prose h3 { margin: 32px 0 14px; }
  .article-section > p + p,
  .article-section-copy > p + p,
  .editorial-topic > p + p { margin-top: 16px; }
  .article-prose #tvl,
  .article-prose #lux,
  .article-prose #wdr,
  .article-prose #pal-ntsc,
  .article-prose #compare,
  .article-prose #mistakes,
  .article-prose > .product-reference,
  .article-prose > .article-faq,
  .article-prose > .article-sources,
  .article-prose > .article-cta {
    margin-top: 24px;
    padding-top: 23px;
  }
  .article-prose #selection { margin-top: 42px; margin-bottom: 48px; }
  .article-prose #tvl,
  .article-prose #lux,
  .article-prose #wdr,
  .article-prose #pal-ntsc,
  .article-prose #compare { margin-bottom: 48px; }
  .editorial-topic--secondary { margin-top: 32px; }
  .article-prose .editorial-topic--secondary h3 { margin: 32px 0 14px; }
  .comparison-steps li { padding-block: 16px; }
  .mistake-list > div { padding-block: 15px; }
  .checklist-section { margin-block: 48px !important; padding: 24px; }
  .checklist li { margin-top: 14px; }
  .product-reference .eyebrow { margin-bottom: 9px; }
  .product-reference h2 { margin-bottom: 16px; }
  .product-reference-list { margin-top: 22px; }
  .product-reference-list a { padding-block: 15px; }
  .article-faq > h2 { margin-bottom: 20px; }
  .article-faq-list summary { padding-block: 19px; }
  .article-faq-list summary::after { top: 20px; }
  .article-sources { padding-top: 23px; }
  .article-sources-copy h2 { margin-bottom: 15px; }
  .article-sources ol { margin-top: 18px; }
  .article-prose > .product-reference,
  .article-prose > .article-faq,
  .article-prose > .article-sources { margin-bottom: 48px; }
}