:root { --primary:#2c5f6e; --accent:#c9a87c; --dark:#1a1a2e; --paper:#fff; --text:#333; --muted:#595959; --line:#d4dddf; --wash:#f3f6f6; }
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; color:var(--text); background:var(--paper); font:17px/1.75 Georgia,'Times New Roman',serif; -webkit-font-smoothing:antialiased; }
::selection { color:#fff; background:var(--primary); }
a { color:var(--primary); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:3px solid #976c2e; outline-offset:4px; }
button:focus-visible { outline:3px solid #976c2e; outline-offset:4px; }
input { accent-color:var(--primary); }
[hidden] { display:none !important; }
.skip-link { position:absolute; left:-9999px; top:8px; padding:8px 12px; background:white; z-index:5; }
.skip-link:focus { left:8px; }
.site-header { padding:26px 20px 22px; color:#fff; background:var(--dark); text-align:center; }
.brand { color:#fff; font-size:1.8rem; line-height:1.2; text-decoration:none; }
.brand span { color:var(--accent); }
.site-header p { margin:5px 0 0; color:#d1d1df; font:12px/1.5 Arial,sans-serif; }
.site-nav { display:flex; justify-content:center; flex-wrap:wrap; background:var(--primary); }
.site-nav a { padding:12px 16px; color:#fff; font:13px/1.5 Arial,sans-serif; text-decoration:none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background:#204b58; }
.container { width:min(1180px,calc(100% - 48px)); margin:auto; }
main { padding:20px 0 62px; }
.breadcrumb { margin-bottom:27px; color:var(--muted); font:13px/1.6 Arial,sans-serif; }
.intro { max-width:72ch; }
h1 { margin:0 0 12px; color:var(--primary); font-size:2.2rem; line-height:1.22; font-weight:400; overflow-wrap:break-word; }
h2 { margin:38px 0 12px; color:var(--dark); font-size:1.4rem; line-height:1.3; font-weight:400; }
h3 { margin:28px 0 9px; color:var(--dark); font-size:1.12rem; line-height:1.4; }
p { margin:0 0 16px; }
.subheading { margin-bottom:8px; font-size:1.15rem; }
.source-date { color:var(--muted); font:13px/1.6 Arial,sans-serif; }
.comparison-controls { margin:22px 0 16px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:14px/1.5 Arial,sans-serif; }
.comparison-controls fieldset { margin:0; padding:0; border:0; }
.comparison-controls legend { margin-bottom:10px; font-weight:600; }
.product-options { display:flex; flex-wrap:wrap; gap:10px 22px; }
.product-options label, .difference-option { display:flex; align-items:center; gap:8px; min-height:34px; cursor:pointer; }
.product-options input, .difference-option input { flex:none; width:18px; height:18px; margin:0; }
.difference-option { margin-top:8px; color:var(--muted); }
.comparison-toolbar { display:flex; justify-content:flex-end; gap:8px; margin:0 0 10px; }
.comparison-toolbar button { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #668c96; border-radius:4px; color:var(--primary); background:#fff; cursor:pointer; }
.comparison-toolbar button:hover { background:#eef3f3; }
.comparison-toolbar button:disabled { opacity:.4; cursor:default; }
.comparison-toolbar button[data-scroll="left"] svg { transform:rotate(180deg); }
.table-scroll { width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:#668c96 #e7eded; }
.comparison { width:100%; min-width:1050px; table-layout:fixed; border-collapse:collapse; font:14px/1.6 Arial,sans-serif; }
.comparison caption { text-align:left; padding:0 0 12px; color:var(--dark); font-weight:600; font-size:16px; }
.comparison th, .comparison td { padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; overflow-wrap:break-word; }
.comparison th:first-child { width:150px; }
.comparison tbody th { color:#29444b; background:#eef3f3; font-weight:600; }
.comparison th:first-child { position:sticky; left:0; z-index:1; }
.comparison thead th { padding-top:6px; background:#fff; }
.comparison thead th:first-child { vertical-align:bottom; }
.product-image { width:100%; aspect-ratio:1/1; height:auto; object-fit:contain; display:block; margin:0 auto 14px; background:#fff; }
.product-name { display:block; color:var(--dark); font-size:16px; line-height:1.4; min-height:68px; font-weight:600; }
.product-variant { display:block; margin:7px 0; color:var(--muted); font-size:12px; font-weight:400; min-height:36px; }
.product-source { display:inline-block; font-size:13px; font-weight:400; }
.price { font-weight:600; font-variant-numeric:tabular-nums; color:var(--dark); }
.new-note { display:inline-block; margin-top:6px; color:#386444; font-size:12px; font-weight:400; }
.table-note { margin:16px 0 0; max-width:90ch; color:var(--muted); font:13px/1.7 Arial,sans-serif; }
.image-attribution { margin:0 0 16px; }
.reading { max-width:74ch; }
.decision-list { margin:0; padding-left:24px; }
.decision-list li { padding-left:3px; margin-bottom:13px; }
.notice { padding:19px 0; margin:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.notice p:last-child { margin:0; }
.sources { padding-left:22px; margin:0 0 18px; }
.sources li { margin-bottom:8px; }
.related-links { display:flex; flex-wrap:wrap; gap:10px 22px; }
.site-footer { background:var(--dark); color:#d1d1df; padding:30px 20px; text-align:center; font:13px/1.7 Arial,sans-serif; }
.site-footer p { margin:0 0 8px; }
.site-footer a { color:#e3c59c; }
.empty-state { min-height:230px; padding:50px 20px; color:var(--muted); background:var(--wash); text-align:center; }
.directory { max-width:960px; }
.directory .brand-list { column-count:3; column-gap:28px; margin:14px 0 28px; }
.directory .brand-list p { margin:0 0 7px; break-inside:avoid; }
.directory .brand-list a { text-decoration:underline; }
.comparison-index { list-style:none; margin:0; padding:0; }
.comparison-index li { padding:18px 0; border-bottom:1px solid var(--line); }
.comparison-index a { font-size:1.2rem; }
.comparison-index p { margin:5px 0 0; }
@media(max-width:640px) {
  .container { width:calc(100% - 32px); }
  .site-header { padding:23px 16px 19px; }
  .site-nav { padding:0 12px; }
  .site-nav a { padding:10px 12px; font-size:12px; }
  h1 { font-size:1.8rem; }
  h2 { font-size:1.25rem; }
  .product-options { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
  .comparison { min-width:870px; }
  .comparison th:first-child { width:126px; }
  .comparison th, .comparison td { padding:13px 15px; }
  .directory .brand-list { column-count:2; }
}
@media(max-width:380px) { .directory .brand-list { column-count:1; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }