/* ===========================================================
   Pigment Safety (Fugitive & Toxic) — editable article in the
   site design language. Neutral surfaces only; semantic accents
   (amber = fades, red = toxic, plum = both). Loaded on the
   "Pigment Safety" template.
   =========================================================== */

:root{ --hero-bg:#FAFAFA; --accent:#E30022; --line:#e4e6e9;
  --ps-caution:#b9852b; --ps-warn:#c0392b; --ps-both:#7a3b52; }

.psafe{background:#fff}
.psafe .wrap{max-width:860px;margin:0 auto;padding:0 40px}
@media(max-width:680px){.psafe .wrap{padding:0 22px}}

/* hero */
.psafe-hero{background:var(--hero-bg);border-bottom:1px solid var(--line);padding:60px 0 46px}
.psafe-hero__eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);padding-bottom:8px;border-bottom:2px solid var(--accent);margin:0 0 22px}
.psafe-hero__h1{font-weight:800;font-size:clamp(32px,5vw,46px);line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.psafe-hero__sub{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:0}

/* body */
.psafe-body{padding:30px 0 8px}
.psafe-lead{font-size:19px;line-height:1.65;color:#2c2a25;margin:0 0 1.6rem}
.psafe-lead p{margin:0 0 1rem}

/* table of contents pills */
.psafe-toc{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 2.4rem;padding:18px 0 0;border-top:1px solid var(--line)}
.psafe-toc a{font-size:13.5px;font-weight:600;color:var(--blue);border:1px solid var(--blue);background:#fff;border-radius:999px;padding:7px 15px;text-decoration:none}
.psafe-toc a:hover{background:rgba(48,68,82,.07)}

/* section */
.psafe-sec{margin:2.8rem 0 0;scroll-margin-top:70px}
.psafe-sec__h{display:flex;align-items:center;gap:12px;font-weight:800;font-size:27px;line-height:1.15;color:var(--ink);margin:0 0 .4rem}
.psafe-sec__ic{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex:none}
.psafe-sec__intro{font-size:16px;color:var(--ink-2);line-height:1.65;margin:.2rem 0 1.4rem}

/* pigment row card */
.psrow{display:flex;gap:16px;background:#f4f3f1;border:1px solid var(--line);border-left-width:5px;border-radius:12px;padding:15px 18px;margin:0 0 12px;align-items:flex-start;box-shadow:0 12px 30px -14px rgba(40,40,40,.2),0 2px 6px rgba(40,40,40,.06)}
.psrow--caution{border-left-color:var(--ps-caution)}
.psrow--warn{border-left-color:var(--ps-warn)}
.psrow--both{border-left-color:var(--ps-both)}
.psrow__sw{width:56px;height:56px;border-radius:7px;flex:none;border:1px solid rgba(0,0,0,.12)}
.psrow__body{flex:1;min-width:0}
.psrow__nm{font-size:16.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.psrow__nm a{color:inherit;text-decoration:none;border-bottom:1px solid #d4d7db}
.psrow__nm a:hover{color:var(--accent);border-color:var(--accent)}
.psrow__ci{font-size:11.5px;color:var(--accent);font-weight:700;letter-spacing:.03em;margin-top:2px}
.psrow__why{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:.4rem 0 0}
.psrow__fix{font-size:14px;color:var(--ink);line-height:1.6;margin:.5rem 0 0}
.psrow__fix b{color:var(--slate)}
.psrow__fix a{color:var(--accent);font-weight:600;text-decoration:none}
.psrow__fix a:hover{text-decoration:underline}

/* status badge */
.pstag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle;background:#fff}
.pstag--f{border:1px solid #c79a3a;color:#8a6517}
.pstag--t{border:1px solid #cf8a83;color:#a32d2d}

/* key + note */
.psafe-key{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--ink-2);margin:0 0 1.2rem}
.psafe-key span{display:inline-flex;align-items:center;gap:7px}
.psafe-key i{width:14px;height:14px;border-radius:4px;display:inline-block}
.psafe-note{background:#FAFAFA;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 18px;font-size:15px;color:var(--ink-2);line-height:1.65;margin:1.5rem 0}
.psafe-note b{color:var(--ink)}
.psafe-note a{color:var(--accent);font-weight:600;text-decoration:none}
.psafe-note a:hover{text-decoration:underline}
.psafe-sec p{font-size:16px;line-height:1.75;color:#34322c}

/* CTA (slate, site standard) */
.psafe-cta{background:var(--slate);color:#fff;text-align:center;padding:60px 0;margin-top:56px}
.psafe-cta__in{max-width:560px;margin:0 auto;padding:0 22px}
.psafe-cta__eyebrow{font-weight:800;font-size:23px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.psafe-cta__body{font-size:17px;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 26px}
.psafe-cta__btn{display:inline-block;background:var(--rust);color:#fff;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:15px 32px;border-radius:8px}
.psafe-cta__btn:hover{background:#8f461f;text-decoration:none}