/* PE Design System — shared .pe-* component library. v1.2 2026-06-15.
   Apply classes to WIDGETS (_css_classes) or in raw HTML. Container _css_classes do NOT render on this fork:
   for native containers use native bg/border/shadow controls. Mobile breakpoint on this fork = 730px. */
:root{
  --pe-ink:#222222; --pe-mut:#3a4a52; --pe-line:#e3ebef;
  --pe-band:#eef5f9; --pe-band2:#e3eff5;
  --pe-amber-bg:#fbf1da; --pe-amber-ink:#7a5408;
  --pe-pri:#0f7290; --pe-pri-d:#0b566e;
}
/* prose */
.pe-prose{color:var(--pe-ink);font-size:17px;line-height:1.7}
.pe-prose p{margin:0 0 .9em}
.pe-prose a{color:var(--pe-pri)}
.pe-lead{font-size:19px;line-height:1.6;color:var(--pe-ink)}
.pe-muted{color:var(--pe-mut)}
.pe-eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--pe-pri)}
/* headings — class on the heading WIDGET. The theme styles .elementor-heading-title at equal specificity and
   loads later, so it overrides plain tag rules; !important on these opt-in utilities guarantees the design weight. */
.pe-h1 .elementor-heading-title{font-size:clamp(28px,4.4vw,43px)!important;line-height:1.14!important;font-weight:700!important;color:var(--pe-ink)!important;margin:.1em 0 .3em!important}
.pe-h2 .elementor-heading-title{font-size:clamp(22px,3vw,31px)!important;line-height:1.2!important;font-weight:700!important;color:var(--pe-ink)!important;margin:0 0 .25em!important}
.pe-h3 .elementor-heading-title{font-size:19px!important;line-height:1.3!important;font-weight:600!important;color:var(--pe-ink)!important;margin:0 0 .15em!important}
/* card / band / wrap — real classes (widgets or raw HTML). For NATIVE containers use native bg/border/shadow controls. */
.pe-card{background:#fff;border:1px solid var(--pe-line);border-radius:14px;box-shadow:0 3px 16px rgba(16,45,70,.08);padding:20px 24px}
.pe-band{background:var(--pe-band)}
.pe-band2{background:var(--pe-band2)}
.pe-wrap{max-width:1060px;margin:0 auto;padding:0 20px}
/* callout */
.pe-callout{background:var(--pe-amber-bg);color:var(--pe-amber-ink);border-radius:12px;padding:14px 18px}
.pe-callout strong{color:var(--pe-amber-ink)}
.pe-callout h2,.pe-callout h3,.pe-callout h4{margin:0!important;color:var(--pe-amber-ink)!important;font-size:1.05em!important;line-height:1.35!important;font-weight:700!important}
/* pill / badge */
.pe-pill{display:inline-block;background:var(--pe-band2);color:var(--pe-pri-d);border-radius:999px;padding:.18em .72em;font-size:.85em;font-weight:600;line-height:1.7}
/* tick / con lists */
.pe-ticks,.pe-cons{list-style:none;margin:.5em 0 0;padding:0}
.pe-ticks li,.pe-cons li{position:relative;padding:0 0 .4em 1.6em}
.pe-ticks li:before{content:"✓";position:absolute;left:0;color:var(--pe-pri);font-weight:700}
.pe-cons li:before{content:"✕";position:absolute;left:0;color:#c0392b;font-weight:700}
/* button */
.pe-btn{display:inline-block;background:var(--pe-pri);color:#fff !important;border-radius:8px;padding:.62em 1.15em;font-weight:600;text-decoration:none;transition:background .15s}
.pe-btn:hover{background:var(--pe-pri-d)}
.pe-btn-alt{background:transparent;color:var(--pe-pri) !important;border:1px solid var(--pe-pri)}
.pe-btn-alt:hover{background:var(--pe-band)}
/* grid */
.pe-grid{display:grid;gap:20px}
.pe-g2{grid-template-columns:1fr 1fr}
.pe-g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:730px){.pe-g2,.pe-g3{grid-template-columns:1fr}}