/* ══════════════════════════════════════════════════════════════
   Energy Sentry — shared content-page design system
   Used by every article, guide, tech tip, and hub page.
   Brand: Archivo · blue #1557B0 · red #D0342C · ink #2A2A2A
   ══════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────── */
.doc-hero{
  padding:clamp(124px,15vh,158px) 5% clamp(34px,4.5vh,46px);
  background:linear-gradient(180deg,#F6F7F9 0%,#FFFFFF 100%);
  border-bottom:1px solid #EFF1F4;
}
.doc-hero-inner{max-width:1180px;margin:0 auto}
.doc-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:#8A8F98;margin-bottom:18px;
}
.doc-crumb a{color:#8A8F98;text-decoration:none}
.doc-crumb a:hover{color:#1557B0}
.doc-crumb span{color:#C8CCD2}
.doc-eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:#1557B0;margin-bottom:14px;
}
.doc-title{
  margin:0;font-weight:900;font-style:italic;letter-spacing:-0.03em;
  font-size:clamp(32px,4.6vw,52px);line-height:1.04;color:#2A2A2A;
  max-width:20ch;
}
.doc-title-wide{max-width:32ch}
.doc-dek{
  font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:#55595F;
  margin:18px 0 0;max-width:62ch;
}
.doc-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:24px;font-size:12.5px;color:#8A8F98;
}
.doc-meta-dot{width:3px;height:3px;border-radius:50%;background:#C8CCD2}
.doc-tag{
  display:inline-flex;align-items:center;
  background:#EDF3FB;border:1px solid #D9E6F6;color:#1557B0;
  font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}

/* ── Body layout: prose + sticky rail ───────────────────────── */
.doc-body{padding:clamp(40px,5.5vh,60px) 5% clamp(56px,7vh,76px);background:#FFFFFF}
.doc-layout{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:64px;align-items:start;
}
/* Solo pages keep the hero's 1180 container so left edges line up; the prose
   column inside still caps at a readable measure. */
.doc-layout-solo{max-width:1180px;margin:0 auto;display:block}
.doc-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:22px}
.doc-toc-label{
  font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:#8A8F98;margin-bottom:12px;
}
.doc-toc{border-left:2px solid #E8EAED;display:flex;flex-direction:column}
.doc-toc a{
  font-size:13.5px;line-height:1.45;color:#55595F;text-decoration:none;
  padding:8px 0 8px 16px;margin-left:-2px;border-left:2px solid transparent;
}
.doc-toc a:hover{color:#1557B0;border-left-color:#1557B0}

/* ── Prose typography ───────────────────────────────────────── */
.prose{max-width:74ch;color:#2A2A2A}
.prose>*:first-child{margin-top:0}
.prose p{font-size:17px;line-height:1.75;color:#3C4046;margin:0 0 20px}
.prose p.lead{font-size:19px;line-height:1.65;color:#55595F}
.prose h2{
  font-size:clamp(24px,2.5vw,30px);font-weight:900;font-style:italic;
  letter-spacing:-0.02em;line-height:1.15;color:#2A2A2A;
  margin:52px 0 16px;scroll-margin-top:104px;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:19px;font-weight:800;line-height:1.3;color:#2A2A2A;
  margin:34px 0 10px;scroll-margin-top:104px;
}
.prose h4{
  font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#8A8F98;margin:30px 0 10px;
}
.prose strong{font-weight:700;color:#2A2A2A}
.prose a{color:#1557B0;text-decoration:none;border-bottom:1px solid #C3D8F0}
.prose a:hover{color:#0F4491;border-bottom-color:#1557B0}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{font-size:17px;line-height:1.7;color:#3C4046;margin-bottom:10px}
.prose li::marker{color:#8A8F98}
.prose ul.tight li,.prose ol.tight li{margin-bottom:5px}
.prose hr{border:none;border-top:1px solid #E8EAED;margin:44px 0}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.9em;
  background:#F2F4F7;border:1px solid #E8EAED;border-radius:6px;padding:1.5px 6px;color:#2A2A2A;
}

/* ── Numbered step list ─────────────────────────────────────── */
.steps{list-style:none;margin:0 0 24px;padding:0;counter-reset:step}
.steps li{
  counter-increment:step;position:relative;padding-left:44px;margin-bottom:16px;
  font-size:17px;line-height:1.7;color:#3C4046;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:28px;height:28px;border-radius:50%;background:#1557B0;color:#FFFFFF;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* ── Callouts ───────────────────────────────────────────────── */
.callout{
  border-radius:18px;padding:22px 26px;margin:30px 0;
  background:#F6F7F9;border:1px solid #E8EAED;
}
.callout-title{
  font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:9px;color:#55595F;
}
.callout p{font-size:15.5px;line-height:1.65;color:#3C4046;margin:0 0 12px}
.callout p:last-child{margin-bottom:0}
.callout ul{margin:0;padding-left:20px}
.callout li{font-size:15.5px;line-height:1.6}
.callout-info{background:#EDF3FB;border-color:#D9E6F6}
.callout-info .callout-title{color:#1557B0}
.callout-warn{background:#FDF1F0;border-color:#F6D9D6}
.callout-warn .callout-title{color:#D0342C}
.callout-dark{background:#2A2A2A;border-color:#2A2A2A}
.callout-dark .callout-title{color:#8A8F98}
.callout-dark p{color:rgba(255,255,255,0.82)}
.callout-dark strong{color:#FFFFFF}

/* ── Key-number strip ───────────────────────────────────────── */
.keynums{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:#E8EAED;border:1px solid #E8EAED;border-radius:18px;overflow:hidden;
  margin:32px 0;
}
.keynum{background:#FFFFFF;padding:22px 24px}
.keynum-val{
  font-size:30px;font-weight:900;font-style:italic;letter-spacing:-0.02em;
  color:#1557B0;line-height:1;margin-bottom:7px;
}
.keynum-val.ink{color:#2A2A2A}
.keynum-val.red{color:#D0342C}
.keynum-label{font-size:12px;line-height:1.45;color:#8A8F98}

/* ── Pull quote ─────────────────────────────────────────────── */
.pullquote{
  margin:36px 0;padding:0 0 0 26px;border-left:3px solid #1557B0;
}
.pullquote p{
  font-size:21px;line-height:1.5;font-weight:600;font-style:italic;
  color:#2A2A2A;margin:0 0 10px;
}
.pullquote cite{font-size:13px;font-style:normal;color:#8A8F98}

/* ── Tables ─────────────────────────────────────────────────── */
.doc-table-wrap{
  margin:30px 0;border:1px solid #E8EAED;border-radius:18px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.doc-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.doc-table th{
  text-align:left;background:#F6F7F9;border-bottom:1px solid #E8EAED;
  font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:#55595F;padding:14px 18px;white-space:nowrap;
}
.doc-table td{
  padding:15px 18px;border-bottom:1px solid #F0F1F4;
  color:#3C4046;line-height:1.55;vertical-align:top;
}
.doc-table tr:last-child td{border-bottom:none}
.doc-table td strong{color:#2A2A2A;font-weight:700}

/* ── Glossary / definition rows ─────────────────────────────── */
.termlist{display:flex;flex-direction:column;gap:1px;background:#E8EAED;
  border:1px solid #E8EAED;border-radius:20px;overflow:hidden;margin:30px 0}
.term{background:#FFFFFF;padding:26px 28px;scroll-margin-top:104px}
.term-name{font-size:20px;font-weight:800;color:#2A2A2A;margin-bottom:4px}
.term-alt{font-size:12px;font-weight:600;letter-spacing:0.4px;color:#8A8F98;margin-bottom:12px}
.term p{font-size:15.5px;line-height:1.7;color:#3C4046;margin:0 0 12px}
.term p:last-child{margin-bottom:0}
.term-why{
  background:#EDF3FB;border-radius:12px;padding:14px 18px;margin-top:14px;
}
.term-why-label{
  font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#1557B0;margin-bottom:6px;
}
.term-why p{font-size:14.5px;line-height:1.6;color:#3C4046;margin:0}

/* ── A–Z jump bar ───────────────────────────────────────────── */
.azbar{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 30px}
.azbar a{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  border:1px solid #E8EAED;border-radius:10px;background:#FFFFFF;
  font-size:13px;font-weight:700;color:#55595F;text-decoration:none;padding:0 9px;
}
.azbar a:hover{border-color:#1557B0;color:#1557B0;background:#EDF3FB}

/* ── Hub card grids ─────────────────────────────────────────── */
.hub-grid{display:grid;gap:18px;margin:0}
.hub-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-card{
  display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E8EAED;
  border-radius:22px;padding:28px 30px;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.hub-card:hover{
  transform:translateY(-5px);box-shadow:0 20px 46px rgba(42,42,42,0.10);
  border-color:#D9E6F6;
}
.hub-card-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#1557B0;margin-bottom:10px;
}
.hub-card-title{
  font-size:20px;font-weight:800;color:#2A2A2A;line-height:1.25;margin-bottom:8px;
}
.hub-card-desc{font-size:14px;line-height:1.6;color:#55595F;margin-bottom:16px;flex:1}
.hub-card-cta{font-size:12.5px;font-weight:700;color:#1557B0}
.hub-card-feature{background:#EDF3FB;border-color:#D9E6F6}
.hub-card-dark{background:#2A2A2A;border-color:#2A2A2A}
.hub-card-dark .hub-card-title{color:#FFFFFF}
.hub-card-dark .hub-card-desc{color:rgba(255,255,255,0.7)}
.hub-card-dark .hub-card-eyebrow,.hub-card-dark .hub-card-cta{color:#7FB0F0}

/* ── Section wrapper for hub pages ──────────────────────────── */
.doc-section{padding:clamp(46px,6vh,64px) 5%;background:#FFFFFF}
.doc-section-alt{background:#F6F7F9}
.doc-section-inner{max-width:1180px;margin:0 auto}
.doc-section-eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  color:#1557B0;margin-bottom:12px;
}
.doc-section-title{
  font-size:clamp(26px,3vw,38px);font-weight:900;font-style:italic;
  letter-spacing:-0.02em;color:#2A2A2A;margin:0 0 14px;line-height:1.1;
}
.doc-section-dek{
  font-size:16.5px;line-height:1.65;color:#55595F;margin:0 0 30px;max-width:66ch;
}

/* ── Closing CTA band ───────────────────────────────────────── */
.doc-cta{background:#2A2A2A;padding:clamp(52px,7vh,72px) 5%}
.doc-cta-inner{max-width:820px;margin:0 auto;text-align:center}
.doc-cta-title{
  font-size:clamp(26px,3.2vw,38px);font-weight:900;font-style:italic;
  letter-spacing:-0.02em;color:#FFFFFF;margin:0 0 14px;line-height:1.12;
}
.doc-cta-text{
  font-size:16.5px;line-height:1.65;color:rgba(255,255,255,0.72);
  margin:0 auto 28px;max-width:56ch;
}
.doc-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-red{
  display:inline-flex;align-items:center;justify-content:center;
  background:#D0342C;color:#FFFFFF;border:none;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;
  padding:16px 34px;border-radius:999px;text-decoration:none;
  transition:background .2s ease;
}
.btn-red:hover{background:#B02A23;color:#FFFFFF}
.btn-blue{
  display:inline-flex;align-items:center;justify-content:center;
  background:#1557B0;color:#FFFFFF;border:none;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;
  padding:16px 34px;border-radius:999px;text-decoration:none;
  transition:background .2s ease;
}
.btn-blue:hover{background:#0F4491;color:#FFFFFF}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,0.32);
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;
  padding:16px 32px;border-radius:999px;text-decoration:none;
  transition:border-color .2s ease;
}
.btn-ghost:hover{border-color:#FFFFFF;color:#FFFFFF}
.doc-cta-fine{font-size:12.5px;color:#8A8F98;margin:20px 0 0}
.doc-cta-fine a{color:#B8C4D4;border-bottom:1px solid rgba(184,196,212,0.4)}
.doc-cta-fine a:hover{color:#FFFFFF}

/* ── Related links ──────────────────────────────────────────── */
.doc-related{padding:clamp(44px,6vh,60px) 5%;background:#F6F7F9;border-top:1px solid #EFF1F4}
.doc-related-inner{max-width:1180px;margin:0 auto}
.doc-related-label{
  font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;
  color:#8A8F98;margin-bottom:20px;
}

/* ── Inline contact line ────────────────────────────────────── */
.contact-line{font-size:15.5px;line-height:1.75;color:#55595F;margin:0}
.contact-line strong{color:#2A2A2A;font-weight:700}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width:1080px){
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .doc-rail{display:none}
}
@media (max-width:960px){
  .hub-grid-2,.hub-grid-3{grid-template-columns:minmax(0,1fr)}
  .doc-hero{padding-top:108px}
  .doc-title{max-width:none;font-size:clamp(28px,7.5vw,36px)}
  .doc-title-wide{max-width:none}
  .doc-dek{font-size:16px}
  .prose{max-width:none}
  .prose p,.prose li,.steps li{font-size:16.5px}
  .prose h2{font-size:24px;margin-top:42px}
  .keynums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc-cta-row{flex-direction:column}
  .doc-cta-row .btn-red,.doc-cta-row .btn-blue,.doc-cta-row .btn-ghost{width:100%}
}
@media (max-width:480px){
  .keynums{grid-template-columns:minmax(0,1fr)}
  .term,.callout{padding:20px 20px}
  .hub-card{padding:24px 22px}
}