/* reviews.html: safety gear buyer's guide. Calm, white, big type; blue-green accent, red only for banned or deadly. */
:root{ --accent:#237468; --accent-ink:#145853; --warn:#b42318; --warn-wash:#fef3f2; --warn-line:#fecdca; }
body{ background:var(--white); }
.rv-hero{ padding:clamp(48px,9vw,104px) 0 clamp(28px,4vw,44px); }
.rv-hero h1{ margin:16px 0 18px; max-width:15ch; }
.rv-hero .lede{ font-size:clamp(1.12rem,2.2vw,1.32rem); line-height:1.6; color:var(--gray-600); max-width:640px; }
.rv-promise{ margin-top:28px; max-width:720px; border:1px solid var(--accent-line); background:var(--accent-wash);
  border-radius:var(--radius-lg); padding:20px 22px; display:flex; gap:16px; align-items:flex-start; }
.rv-promise svg{ flex:none; color:var(--accent-ink); margin-top:2px; }
.rv-promise p{ color:var(--gray-700); font-size:1.02rem; line-height:1.55; }
.rv-promise strong{ color:var(--ink); display:block; font-size:1.12rem; margin-bottom:4px; }
.rv-checked{ margin-top:14px; font-size:.86rem; color:var(--gray-500); }

/* jump pills */
.rv-jump{ position:sticky; top:64px; z-index:150; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--gray-150); border-bottom:1px solid var(--gray-150); }
.rv-jump .container{ display:flex; gap:8px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:none; }
.rv-jump .container::-webkit-scrollbar{ display:none; }
.rv-jump a{ flex:none; min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:100px;
  border:1px solid var(--gray-200); background:var(--white); color:var(--gray-700); font-size:.92rem; font-weight:600;
  text-decoration:none; white-space:nowrap; }
.rv-jump a:hover, .rv-jump a:focus-visible{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }

/* top boxes */
.rv-intro{ display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:clamp(32px,5vw,56px) 0 8px; }
@media (max-width:820px){ .rv-intro{ grid-template-columns:1fr; } }
.rv-panel{ border:1px solid var(--gray-150); border-radius:var(--radius-lg); padding:24px; background:var(--white); box-shadow:var(--shadow-xs); }
.rv-panel h2{ font-size:1.3rem; margin-bottom:12px; }
.rv-panel.soft{ background:var(--bg-soft); border-color:transparent; }

/* lists */
.rv-list{ list-style:none; display:grid; gap:10px; }
.rv-list li{ position:relative; padding-left:26px; color:var(--gray-700); font-size:1rem; line-height:1.55; }
.rv-list li::before{ content:''; position:absolute; left:2px; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.rv-box.avoid .rv-list li::before{ background:var(--gray-400); border-radius:2px; }
a.src{ font-size:.82rem; font-weight:600; color:var(--accent-ink); white-space:nowrap; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--accent-line); }
a.src::before{ content:'('; } a.src::after{ content:')'; }

/* category sections */
.rv-cat{ padding:clamp(40px,6vw,72px) 0; border-top:1px solid var(--gray-150); scroll-margin-top:140px; }
.rv-cat:nth-of-type(even){ background:var(--ivory); }
.rv-head{ display:flex; gap:18px; align-items:flex-start; margin-bottom:24px; max-width:780px; }
.rv-icon{ flex:none; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent-ink); }
.rv-head h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); }
.rv-head p{ margin-top:8px; font-size:1.08rem; line-height:1.55; color:var(--gray-600); }
.rv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:980px){ .rv-grid{ grid-template-columns:1fr; } }
.rv-box{ background:var(--white); border:1px solid var(--gray-150); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-xs); }
.rv-box h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink); margin-bottom:14px; }
.rv-box.avoid h3{ color:var(--gray-600); }
.rv-box p{ font-size:1rem; line-height:1.55; color:var(--gray-700); }
.rv-box p + p, .rv-box p + .rv-list, .rv-list + p{ margin-top:10px; }

/* red, sparingly: banned, deadly or recalled */
.rv-warn{ margin-top:16px; border:1px solid var(--warn-line); background:var(--warn-wash); border-radius:var(--radius); padding:14px 16px;
  color:#7a271a; font-size:.98rem; line-height:1.5; display:flex; gap:12px; }
.rv-warn svg{ flex:none; color:var(--warn); margin-top:2px; }
.rv-warn strong{ color:var(--warn); }

.rv-foot{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.rv-recall{ min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 16px; border-radius:100px;
  border:1px solid var(--accent-line); color:var(--accent-ink); font-weight:600; font-size:.92rem; text-decoration:none; background:var(--white); }
.rv-recall:hover{ background:var(--accent-wash); }
.rv-none{ font-size:.92rem; color:var(--gray-500); }

/* CREP table */
.rv-table{ margin-top:22px; }
.rv-table h3{ font-size:1.15rem; margin-bottom:6px; }
.rv-table > p{ font-size:.95rem; color:var(--gray-600); margin-bottom:14px; max-width:780px; }
.rv-table table.data td{ padding:12px 16px; border-bottom:1px solid var(--gray-150); vertical-align:top; }
.rv-table table.data th{ padding:12px 16px; }
.rv-table td.num{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap; }
.rv-table tr.grp td{ background:var(--accent-wash); color:var(--accent-ink); font-weight:700; font-size:.86rem; }
@media (max-width:640px){
  .rv-table table.data thead{ display:none; }
  .rv-table table.data tr{ display:grid; grid-template-columns:1fr auto auto; gap:2px 14px; padding:12px 14px; border-bottom:1px solid var(--gray-150); }
  .rv-table table.data td{ padding:0; border:0; }
  .rv-table table.data td:first-child{ grid-column:1 / -1; font-weight:600; color:var(--gray-800); }
  .rv-table table.data td[data-l]::before{ content:attr(data-l) ' '; font-weight:500; color:var(--gray-500); font-size:.8rem; }
  .rv-table tr.grp{ display:block; background:var(--accent-wash); }
}
.rv-sources{ padding:clamp(40px,6vw,72px) 0; border-top:1px solid var(--gray-150); }
.rv-sources ol{ display:grid; gap:8px; padding-left:20px; font-size:.9rem; color:var(--gray-600); max-width:900px; }
.rv-sources a{ color:var(--accent-ink); word-break:break-word; }