/* electricianhelperpro.com — content pages (NEC by state, guides, NEC 2026 changes, FAQ, how it works), generated by
   Web/pages.py. Loaded after site.css on those pages only; uses its tokens and adds no colours of its own. */

.plate--page .plate__title--q { font-size: clamp(38px, 6.4vw, 80px); line-height: 0.92; max-width: 22ch; }
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 15px; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--amber-ink); }
.crumbs a { color: var(--amber-ink); text-decoration-color: rgba(58, 38, 4, 0.45); text-underline-offset: 0.2em; }
.crumbs [aria-current] { color: var(--ink-2); }

.doc__grid > * { min-width: 0; }
.prose--page, .prose--wide { max-width: 74ch; }
.prose--wide { max-width: 90ch; }
.prose section { scroll-margin-top: 16px; }
.prose .answer { background: var(--paper); border: 1px solid var(--rule); border-left: 6px solid var(--amber); border-radius: 14px;
  padding: clamp(18px, 3vw, 28px); margin: 0 0 8px; }
.prose .answer h2 { margin-top: 0; }
.prose .answer p:last-child { margin-bottom: 0; }
.caveat { font-size: 15.5px !important; color: var(--ink-2); }

.record { display: grid; gap: 0; margin: 4px 0 18px; border-top: 1px solid var(--rule); }
.record div { display: grid; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.record dt { font: 700 15px/1.2 var(--plate-face); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.record dd { margin: 0; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
@media (min-width: 640px) { .record div { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; } }

.table-scroll { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
.data { border-collapse: collapse; width: 100%; font-size: 15.5px; line-height: 1.4; }
.data caption { text-align: left; font-size: 14px; color: var(--ink-2); padding: 0 0 8px; }
.data th, .data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data thead th { font: 700 15px/1.1 var(--plate-face); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.data tbody th { font-weight: 600; }

.chips { list-style: none !important; padding: 0; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.chips li { padding: 0 !important; }
.chips li::before { display: none; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); text-decoration: none; font-size: 15.5px; }
.chips a:hover { border-color: var(--amber-deep); }

.steps { margin: 0 0 18px; padding-left: 1.4em; display: grid; gap: 10px; }
.steps li { font-size: 17.5px; line-height: 1.6; padding-left: 4px; }
.steps li::marker { font: 700 19px var(--plate-face); color: var(--amber-deep); }

.change { border-bottom: 1px solid var(--rule); padding: 4px 0 6px; }
.change h3 { font-size: 21px !important; line-height: 1.1 !important; margin: 18px 0 6px !important; text-transform: none !important; }
.more { margin-top: -8px !important; font-size: 15.5px !important; }

.get-app { margin: 48px 0 0; background: var(--obsidian); color: var(--slate-200); border-radius: 20px; padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--shadow-card); }
.get-app h2 { margin: 0 0 10px !important; color: var(--slate-50); }
.get-app p { color: var(--slate-200); }
.get-app a { color: var(--amber-hi); }
.get-app__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 18px 0 8px; }
.get-app .trial-line { color: var(--amber-hi); margin: 0; }
.get-app__more { margin: 10px 0 0 !important; font-size: 15.5px !important; }