/* Pro/con guide pages: bright and friendly look. Loaded after each guide's own styles, so these rules win. */
.title { padding-block: 18px 6px; gap: 14px; }
.crumb { font-size: 15px; font-weight: 800; }
.tags { gap: 8px; }
.tags .pill { background: var(--soft); color: var(--fg); padding: 5px 12px; }
.tags .pill.t-red { background: var(--red-soft); color: var(--con); }
.tags .pill.t-blue { background: var(--blue-soft); color: var(--pro); }
.tags .pill.t-yellow { background: var(--yellow-soft); color: var(--warn); }
.hero { background: #1a3fa8; color: #fff; border: 0; border-radius: 30px; overflow: hidden; padding: 0; gap: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.hero-t { padding: clamp(22px, 4vw, 48px); gap: 14px; }
.title h1 { color: #fff; font-weight: 700; font-size: clamp(34px, 4.8vw, 56px); letter-spacing: 0; max-width: none; line-height: 1.05; }
.dek { color: #ffffffe6; font-family: var(--font-ui); font-size: clamp(16px, 1.6vw, 19px); max-width: 44ch; }
.hero figure { display: flex; }
.hero img { width: 100%; height: 100%; min-height: 280px; aspect-ratio: auto; }
.hero figcaption { display: none; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero figure { order: -1; } .hero img { min-height: 0; aspect-ratio: 3 / 2; } }
.meta { font-size: 15px; background: var(--yellow-soft); border-radius: var(--r); padding: 14px 18px; gap: 6px 22px; }
.toc { gap: 8px; margin: 2px 0 0; }
.toc a { background: var(--soft); color: var(--fg); padding: 8px 15px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 800; }
.toc a:hover { background: var(--blue-soft); color: var(--pro); border: 0; }
section.s { border-top: 0; padding-block: 26px; }
section.s > h2, .side-head h2 { font-weight: 600; font-size: clamp(26px, 3vw, 34px); }
.prose { font-size: 17px; line-height: 1.65; }
.glance { border: 0; gap: 12px; overflow: visible; }
.glance .p, .glance .c { border: 0; border-radius: var(--r); }
.glance .p { background: var(--blue-soft); } .glance .c { background: var(--red-soft); }
.glance h3 { font-family: var(--font-head); font-size: 20px; letter-spacing: 0; text-transform: none; }
.arg { border-radius: var(--r); }
.arg h3, .arg summary { font-family: var(--font-head); font-weight: 600; }
.cases { border-top: 0; }
.case img { border-radius: var(--r-sm); }
.case .issue { border-left-color: var(--gold); }
.clash { border-top: 0; background: var(--soft); border-radius: var(--r); padding: 18px 20px; }
.world { border-radius: var(--r); }
.dq { border-top: 0; gap: 10px; }
.dq li { border-bottom: 0; background: var(--soft); border-radius: var(--r); padding: 14px 16px; font-size: 17px; }
.rel-flag { border: 0; background: var(--yellow-soft); border-radius: var(--r); padding: 12px 16px; font-family: var(--font-ui); }
.related a { border: 0; background: var(--soft); border-radius: var(--r); }
dl.defs div { border-radius: var(--r); }