:root {
  --ink: #16221f;
  --muted: #56635f;
  --paper: #ffffff;
  --soft: #f2f6f4;
  --teal: #006b61;
  --teal-dark: #064f49;
  --coral: #d85e4f;
  --gold: #e7b94e;
  --line: #cfd9d5;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.58; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--coral); }
a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 20; padding: 9px 12px; background: var(--ink); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding: 9px max(20px, calc((100vw - var(--max)) / 2)); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.brand { color: var(--ink); font-weight: 850; font-size: 1.05rem; text-decoration: none; }
.site-header nav { display: flex; gap: 8px 18px; }
.site-header nav a { font-size: .88rem; font-weight: 700; text-decoration: none; }
main, article, section { min-width: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: 24px 40px; width: min(var(--max), calc(100% - 40px)); margin: 24px auto 48px; align-items: start; }
.hero-copy { padding-top: 4px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: .82rem; }
.eyebrow, .section-kicker { margin: 16px 0 7px; color: var(--teal-dark); font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
h1, h2, h3 { margin-top: 0; line-height: 1.13; letter-spacing: 0; }
h1 { max-width: 18ch; margin-bottom: 15px; font-size: clamp(2rem, 4.3vw, 4.15rem); }
h2 { margin-bottom: 13px; font-size: clamp(1.7rem, 2.6vw, 2.65rem); }
h3 { font-size: 1.18rem; }
.lede { max-width: 65ch; margin: 0 0 14px; font-size: 1.1rem; }
.evidence { margin: 0; padding-left: 14px; border-left: 4px solid var(--coral); color: #37433f; font-size: .94rem; }
figure { margin: 0; }
.hero figure { overflow: hidden; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; }
.hero img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: 48% 34%; }
figcaption { padding: 8px 12px; color: var(--muted); font-size: .77rem; }
.bottom-line { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; padding: 22px; color: #fff; background: var(--ink); border-left: 7px solid var(--gold); border-radius: 6px; }
.bottom-line h2 { grid-column: 1 / -1; margin: 0; font-size: 1.35rem; }
.bottom-line p { margin: 0; font-size: .9rem; }
.bottom-line .primary-link { grid-column: 1 / -1; justify-self: start; color: #fff; font-weight: 800; }
.section { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 58px 0; scroll-margin-top: 72px; }
.soft { width: 100%; padding-inline: max(20px, calc((100% - var(--max)) / 2)); background: var(--soft); border-block: 1px solid #e0e8e4; }
.section > p:not(.section-kicker) { max-width: 78ch; }
.route-grid, .definition-grid, .passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.route-grid article { position: relative; padding: 22px 22px 20px 64px; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; }
.route-grid article h3, .route-grid article p { margin-bottom: 7px; }
.route-number { position: absolute; top: 21px; left: 20px; display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--teal); border-radius: 50%; font-weight: 850; }
.static-note { padding: 15px 18px; background: #fff8e7; border-left: 4px solid var(--gold); }
.definition-grid details { background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.definition-grid summary { padding: 15px 17px; cursor: pointer; font-weight: 800; }
.definition-grid details p { margin: 0; padding: 0 17px 10px; font-size: .9rem; }
.definition-grid details p:last-child { padding-bottom: 16px; color: var(--muted); }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; min-width: 830px; border-collapse: collapse; background: #fff; font-size: .88rem; }
caption { padding: 13px 15px; color: var(--muted); text-align: left; font-weight: 700; }
th, td { padding: 12px 13px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { color: #fff; background: var(--teal-dark); border-top: 0; }
tbody th { color: var(--teal-dark); }
.recommendations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pick { padding: 24px; border: 1px solid var(--line); border-top: 5px solid var(--teal); border-radius: 6px; background: #fff; }
.pick:nth-child(2), .pick:nth-child(4) { border-top-color: var(--coral); }
.pick p { margin: 0 0 11px; }
.no-js-note { padding: 10px 12px; color: var(--ink); background: #fff8e7; border-left: 4px solid var(--gold); font-size: .84rem; }
.lane { color: var(--teal-dark); font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.confidence { color: var(--muted); font-size: .85rem; }
.product-link { display: inline-block; margin-top: 3px; font-weight: 800; }
.details-wrap table { min-width: 1120px; }
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 36px; }
.split aside { align-self: start; padding: 22px; background: #fff8e7; border: 1px solid #e8d59c; border-radius: 6px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; counter-reset: fitstep; list-style: none; }
.steps li { counter-increment: fitstep; position: relative; min-height: 120px; padding: 20px 20px 20px 62px; border: 1px solid var(--line); border-radius: 6px; }
.steps li::before { content: counter(fitstep); position: absolute; top: 20px; left: 18px; display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--coral); border-radius: 50%; font-weight: 850; }
.passport-grid > div { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.passport-grid span { display: block; color: var(--coral); font-size: .74rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.passport-grid strong { display: block; margin: 4px 0 6px; font-size: 1.02rem; }
.passport-grid p { margin: 0; color: var(--muted); font-size: .88rem; }
.source-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.source-columns > div { padding: 18px; background: var(--soft); border-radius: 6px; }
.source-columns ul { margin: 0; padding-left: 20px; }
.source-columns li { margin-bottom: 7px; }
.correction { margin-top: 24px; padding: 14px 17px; border: 1px solid var(--line); }
footer { padding: 26px 20px; color: #dce6e2; background: var(--ink); text-align: center; font-size: .84rem; }

@media (max-width: 820px) {
  .site-header { position: static; display: block; padding: 10px 16px; }
  .site-header nav { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .site-header nav a { padding: 6px 2px; text-align: center; font-size: .76rem; }
  .hero { grid-template-columns: minmax(0, 1fr); width: min(100% - 28px, var(--max)); margin-top: 14px; gap: 14px; }
  .hero-copy { display: contents; }
  .breadcrumb { order: 1; }
  .eyebrow { order: 2; margin: 0; }
  h1 { order: 3; max-width: none; margin: 0; font-size: 2.1rem; }
  .lede { order: 4; margin: 0; font-size: 1rem; }
  .hero figure { order: 5; }
  .hero img { height: 200px; object-position: 48% 29%; }
  .evidence { order: 6; }
  .bottom-line { order: 7; grid-column: auto; grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .bottom-line h2, .bottom-line .primary-link { grid-column: auto; }
  .section { width: min(100% - 28px, var(--max)); padding: 42px 0; scroll-margin-top: 12px; }
  .soft { width: 100%; padding-inline: 14px; }
  .route-grid, .definition-grid, .recommendations, .passport-grid, .source-columns, .steps, .split { grid-template-columns: minmax(0, 1fr); }
  .pick { padding: 19px; }
  table { min-width: 760px; }
  .details-wrap table { min-width: 0; }
  .details-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .details-wrap table, .details-wrap tbody, .details-wrap tr, .details-wrap th, .details-wrap td { display: block; width: 100%; }
  .details-wrap caption { display: block; width: 100%; }
  .details-wrap tr { padding: 10px 14px 15px; border-top: 1px solid var(--line); }
  .details-wrap tr:first-child { border-top: 0; }
  .details-wrap th, .details-wrap td { display: grid; grid-template-columns: minmax(112px, .42fr) minmax(0, 1fr); gap: 10px; padding: 9px 0; border: 0; overflow-wrap: anywhere; }
  .details-wrap th::before, .details-wrap td::before { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
  .details-wrap [data-product-detail="product"]::before { content: "Product"; }
  .details-wrap [data-product-detail="size-weight"]::before { content: "Size and weight"; }
  .details-wrap [data-product-detail="materials"]::before { content: "Materials"; }
  .details-wrap [data-product-detail="manufacturing-origin"]::before { content: "Manufacturing origin"; }
  .details-wrap [data-product-detail="brand"]::before { content: "Brand"; }
  .details-wrap [data-product-detail="warranty"]::before { content: "Warranty / support"; }
}

@media (max-width: 430px) {
  .hero img { height: 170px; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.58rem; }
  .details-wrap th, .details-wrap td { grid-template-columns: minmax(104px, .4fr) minmax(0, 1fr); gap: 8px; font-size: .82rem; }
}

@media print {
  .site-header, .skip-link { display: none; }
  .hero, .section { width: 100%; }
  .soft { padding-inline: 0; background: #fff; }
  a { color: #000; }
}