@font-face {
    font-family: "HPNeueKabel";
    src: url("/wp-content/themes/generatepress_child/Fonts/NeueKabel.otf") format("opentype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "HPBrandonGrotesque";
    src: url("/wp-content/themes/generatepress_child/Fonts/Brandon_reg.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.hp-ev-page {
    --hp-ev-navy: #1b1b42;
    --hp-ev-blue: #192b80;
    --hp-ev-teal: #147a62;
    --hp-ev-teal-dark: #0f654f;
    --hp-ev-teal-bright: #26a686;
    --hp-ev-orange: #ff9f1c;
    --hp-ev-heading: #1c2e2c;
    --hp-ev-ink: #293a38;
    --hp-ev-muted: #5c6078;
    --hp-ev-line: #dfe4e9;
    --hp-ev-surface: #f5f7fb;
    --hp-ev-soft-green: #daf7ec;
    --hp-ev-white: #fff;
    --hp-ev-danger: #8f2424;
    box-sizing: border-box;
    color: var(--hp-ev-ink);
    font-family: "HPBrandonGrotesque", "Source Sans Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.58;
    margin: 0 auto;
    max-width: 1200px;
    overflow: clip;
    padding: clamp(1rem, 2.5vw, 2rem);
    width: 100%;
}

.hp-ev-page *,
.hp-ev-page *::before,
.hp-ev-page *::after { box-sizing: inherit; min-width: 0; }
.hp-ev-page [hidden] { display: none !important; }
.hp-ev-page :where(h1, h2, h3, p, ul, dl) { margin-top: 0; }
.hp-ev-page :where(h1, h2, h3) {
    color: var(--hp-ev-heading) !important;
    font-family: "HPNeueKabel", "Source Sans Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
    line-height: 1.08 !important;
    text-transform: none !important;
}
.hp-ev-page h1 { font-size: clamp(2.1rem, 4vw, 3.35rem) !important; margin: 0 0 1.15rem !important; max-width: 18ch; }
.hp-ev-page h2 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; margin-bottom: .8rem !important; }
.hp-ev-page h3 { font-size: clamp(1.18rem, 2vw, 1.45rem) !important; margin-bottom: .6rem !important; }
.hp-ev-page :where(p, li, label, input, select, button, summary, th, td, dt, dd, a, code) { font-family: inherit !important; }
.hp-ev-page a { color: var(--hp-ev-blue) !important; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.hp-ev-page a:hover { color: var(--hp-ev-teal) !important; text-decoration-thickness: .12em; }
.hp-ev-page :where(a, button, input, select, summary):focus-visible {
    box-shadow: 0 0 0 5px rgba(20, 122, 98, .28) !important;
    outline: 3px solid var(--hp-ev-teal) !important;
    outline-offset: 2px !important;
}

.hp-ev-shell { display: grid; gap: clamp(1.75rem, 3.2vw, 3rem); }
.hp-ev-hero { align-items: stretch; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); padding-block: clamp(.5rem, 2vw, 1.5rem); }
.hp-ev-hero__copy { align-self: center; }
.hp-ev-breadcrumbs { align-items: center; color: var(--hp-ev-muted); display: flex; flex-wrap: wrap; font-size: .9rem; gap: .45rem; margin-bottom: 1.5rem; }
.hp-ev-breadcrumbs a { color: var(--hp-ev-teal) !important; }
.hp-ev-eyebrow { color: var(--hp-ev-teal) !important; font-size: .78rem; font-weight: 700; letter-spacing: .11em; margin-bottom: .65rem; text-transform: uppercase; }
.hp-ev-lead { font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 50ch; }
.hp-ev-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hp-ev-button { align-items: center; border: 2px solid transparent; border-radius: 10px; cursor: pointer; display: inline-flex; font-size: 1rem; font-weight: 700; justify-content: center; line-height: 1.2; min-height: 48px; padding: .8rem 1.2rem; text-align: center; text-decoration: none !important; transition: box-shadow 140ms ease, transform 140ms ease; }
.hp-ev-page .hp-ev-button:hover { box-shadow: 0 8px 22px rgba(27, 27, 66, .16); transform: translateY(-1px); }
.hp-ev-page .hp-ev-button--primary { background: var(--hp-ev-teal); color: var(--hp-ev-white) !important; }
.hp-ev-page .hp-ev-button--primary:hover,
.hp-ev-page .hp-ev-button--primary:focus-visible { background: var(--hp-ev-teal-dark); color: var(--hp-ev-white) !important; }
.hp-ev-page .hp-ev-button--ghost { background: var(--hp-ev-white); border-color: #bfc9c6; color: var(--hp-ev-heading) !important; }
.hp-ev-freshness { color: var(--hp-ev-muted); font-size: .9rem; margin: 1.25rem 0 0; }
.hp-ev-freshness span { color: var(--hp-ev-teal); }

.hp-ev-answer { background: var(--hp-ev-navy); border-radius: 16px; box-shadow: 0 18px 48px rgba(27, 27, 66, .1); color: #ececf5; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(1.25rem, 2.6vw, 1.85rem); position: relative; }
.hp-ev-answer :where(h2, h3) { color: var(--hp-ev-white) !important; }
.hp-ev-answer .hp-ev-eyebrow { color: #4fd1ad !important; }
.hp-ev-answer h2 { font-size: clamp(1.3rem, 2vw, 1.7rem) !important; }
.hp-ev-answer__copy { margin-bottom: .85rem; }
.hp-ev-answer__price { align-items: baseline; color: var(--hp-ev-white); display: flex; flex-wrap: wrap; gap: .45rem; margin: .25rem 0 1rem; }
.hp-ev-answer__price strong { font-size: clamp(2.35rem, 5vw, 3.3rem); letter-spacing: -.04em; line-height: 1; }
.hp-ev-answer__price span { color: #d8d9e7; }
.hp-ev-answer dl { border-top: 1px solid rgba(255, 255, 255, .18); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .4rem 0 0; padding-top: .9rem; }
.hp-ev-answer dl > div { display: grid; gap: .15rem; }
.hp-ev-answer dt { color: #c9cadb; font-size: .78rem; }
.hp-ev-answer dd { color: var(--hp-ev-white); font-size: 1.35rem; font-weight: 700; margin: 0; }
.hp-ev-answer__accent { background: linear-gradient(90deg, var(--hp-ev-teal-bright) 0 72%, var(--hp-ev-orange) 72%); height: 7px; inset: 0 0 auto; position: absolute; }

.hp-ev-workbench,
.hp-ev-schedule,
.hp-ev-content-card,
.hp-ev-faq,
.hp-ev-sources { background: var(--hp-ev-white); border: 1px solid var(--hp-ev-line); border-radius: 16px; box-shadow: 0 6px 20px rgba(27, 27, 66, .07); padding: clamp(1rem, 2.4vw, 1.85rem); }
.hp-ev-workbench { background: linear-gradient(145deg, #fff 0 63%, #f7faf9 100%); }
.hp-ev-section-heading { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; }
.hp-ev-section-heading > div { max-width: 42rem; }
.hp-ev-section-heading > p { color: var(--hp-ev-muted); max-width: 36rem; }

.hp-ev-tabs { background: #e9eeed; border-radius: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0; padding: 4px; }
.hp-ev-tabs button { background: transparent; border: 0; border-radius: 9px; color: var(--hp-ev-heading); cursor: pointer; font-size: 1rem; font-weight: 700; min-height: 48px; padding: .65rem 1rem; }
.hp-ev-tabs button[aria-selected="true"] { background: var(--hp-ev-white); box-shadow: 0 3px 12px rgba(27, 27, 66, .12); color: var(--hp-ev-teal-dark); }
.hp-ev-page[data-enhanced="false"] .hp-ev-tab-panel + .hp-ev-tab-panel { border-top: 1px solid var(--hp-ev-line); margin-top: 2rem; padding-top: 2rem; }
.hp-ev-calculator-grid { align-items: start; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr); }
.hp-ev-form { display: grid; gap: 1.25rem; }
.hp-ev-input-column { display: grid; gap: 1.25rem; }
.hp-ev-fields { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-ev-form label { color: var(--hp-ev-heading); display: grid; font-weight: 700; gap: .4rem; }
.hp-ev-pricing-fields { background: var(--hp-ev-surface); border: 1px solid var(--hp-ev-line); border-radius: 12px; margin-bottom: 1.5rem; padding: 1rem; }
.hp-ev-common-fields { border: 0; margin: 0; padding: 0; }
.hp-ev-common-fields legend { color: var(--hp-ev-heading); font-family: "HPNeueKabel", sans-serif; font-size: 1.25rem; font-weight: 600; margin-bottom: .85rem; }
.hp-ev-input { align-items: stretch; display: flex; }
.hp-ev-input input { appearance: textfield; background: var(--hp-ev-white); border: 1px solid #aebbb8; border-radius: 10px 0 0 10px; color: var(--hp-ev-heading); font-size: 1rem; min-height: 48px; padding: .7rem .8rem; width: 100%; }
.hp-ev-page input[type="number"]::-webkit-inner-spin-button,
.hp-ev-page input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.hp-ev-form select,
.hp-ev-form input[type="datetime-local"] { background: var(--hp-ev-white); border: 1px solid #aebbb8; border-radius: 10px; color: var(--hp-ev-heading); font-size: 1rem; min-height: 48px; padding: .7rem .8rem; width: 100%; }
.hp-ev-input > span { align-items: center; background: #edf2f1; border: 1px solid #aebbb8; border-left: 0; border-radius: 0 10px 10px 0; color: #435653; display: flex; font-size: .85rem; font-weight: 600; padding: .55rem .7rem; white-space: nowrap; }
.hp-ev-field-help { color: var(--hp-ev-muted); font-size: .84rem; font-weight: 400; line-height: 1.45; }
.hp-ev-form__error { background: #fff0f0; border-left: 4px solid var(--hp-ev-danger); color: var(--hp-ev-danger); margin: 0; padding: .8rem; }
.hp-ev-result { background: var(--hp-ev-navy); border-radius: 14px; color: #ececf5; padding: clamp(1rem, 2.5vw, 1.6rem); position: sticky; top: 1rem; }
.hp-ev-result :where(h2, h3) { color: var(--hp-ev-white) !important; }
.hp-ev-result .hp-ev-eyebrow { color: #4fd1ad !important; }
.hp-ev-result h3 { font-size: clamp(2rem, 4vw, 2.8rem) !important; }
.hp-ev-result__energy-detail { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.hp-ev-result__energy-detail span { color: #d8d9e7; }
.hp-ev-result__energy-detail strong { color: var(--hp-ev-white); }
.hp-ev-table-wrap { max-width: 100%; overflow-x: auto; }
.hp-ev-cost-table,
.hp-ev-operator-table,
.hp-ev-price-table { border-collapse: collapse; font-size: .94rem; width: 100%; }
.hp-ev-cost-table { color: var(--hp-ev-white); margin-top: 1rem; }
.hp-ev-page :where(.hp-ev-cost-table, .hp-ev-operator-table, .hp-ev-price-table) caption { font-size: .01px; height: 1px; overflow: hidden; position: absolute; width: 1px; }
.hp-ev-page :where(.hp-ev-cost-table, .hp-ev-operator-table, .hp-ev-price-table) th,
.hp-ev-page :where(.hp-ev-cost-table, .hp-ev-operator-table, .hp-ev-price-table) td { border-bottom: 1px solid rgba(255, 255, 255, .16); padding: .65rem .45rem; text-align: left; vertical-align: top; }
.hp-ev-page .hp-ev-cost-table th,
.hp-ev-page :where(.hp-ev-operator-table, .hp-ev-price-table) thead th { color: var(--hp-ev-white) !important; }
.hp-ev-page :where(.hp-ev-operator-table, .hp-ev-price-table) tbody th { color: var(--hp-ev-heading) !important; }
.hp-ev-cost-table td { font-weight: 700; text-align: right; }
.hp-ev-formula { border-top: 1px solid rgba(255, 255, 255, .18); display: grid; gap: .3rem; margin: .9rem 0 0; padding-top: .9rem; }
.hp-ev-formula span { color: #c9cadb; font-size: .78rem; text-transform: uppercase; }
.hp-ev-formula code { color: var(--hp-ev-white); overflow-wrap: anywhere; white-space: normal; }
.hp-ev-result__notice { background: rgba(255, 159, 28, .14); border-left: 4px solid var(--hp-ev-orange); color: var(--hp-ev-white); padding: .7rem .8rem; }
.hp-ev-result__next { margin: 1rem 0 0; }
.hp-ev-result__next .hp-ev-button { width: 100%; }

.hp-ev-public-intro { max-width: 65ch; }
.hp-ev-operator-table,
.hp-ev-price-table { margin-top: 1rem; min-width: 38rem; }
.hp-ev-page :where(.hp-ev-operator-table, .hp-ev-price-table) thead { background: var(--hp-ev-navy); color: var(--hp-ev-white); }
.hp-ev-page :where(.hp-ev-operator-table, .hp-ev-price-table) tbody th,
.hp-ev-page :where(.hp-ev-operator-table, .hp-ev-price-table) tbody td { border-bottom-color: var(--hp-ev-line); }
.hp-ev-page :where(.hp-ev-operator-table, .hp-ev-price-table) tbody tr:nth-child(even) { background: var(--hp-ev-surface); }
.hp-ev-notice { background: #fff9ed; border-left: 5px solid var(--hp-ev-orange); border-radius: 10px; padding: 1rem; }
.hp-ev-operator-freshness { color: var(--hp-ev-muted); margin-bottom: .65rem; }
.hp-ev-schedule[data-hp-ev-schedule-status="partial_window"] [data-hp-ev-window-summary],
.hp-ev-schedule[data-hp-ev-schedule-status="insufficient_window"] [data-hp-ev-window-summary] { background: #fff9ed; border-left: 5px solid var(--hp-ev-orange); border-radius: 8px; color: var(--hp-ev-heading); padding: .75rem .85rem; }

.hp-ev-chart { background: var(--hp-ev-surface); border-radius: 14px; margin-top: 1.5rem; padding: clamp(.75rem, 2vw, 1.25rem); }
.hp-ev-chart__canvas { display: grid; gap: .65rem; grid-template-columns: 3.5rem minmax(0, 1fr); }
.hp-ev-chart__scale { color: var(--hp-ev-muted); font-size: .72rem; font-variant-numeric: tabular-nums; height: 16rem; line-height: 1; position: relative; }
.hp-ev-chart__scale span { position: absolute; right: 0; transform: translateY(-50%); }
.hp-ev-chart__scale span:first-child { top: 2.3rem; }
.hp-ev-chart__scale span:nth-child(2) { top: calc(50% + .975rem); }
.hp-ev-chart__scale span:nth-child(3) { bottom: .35rem; transform: translateY(50%); }
.hp-ev-chart__scale small { bottom: -1.1rem; font-size: .64rem; font-weight: 700; position: absolute; right: 0; white-space: nowrap; }
.hp-ev-chart__scroll { min-width: 0; overflow-x: auto; overflow-y: visible; scrollbar-color: #b5c2c0 transparent; scrollbar-width: thin; }
.hp-ev-chart__track { min-width: 100%; width: max-content; }
.hp-ev-chart__plot { align-items: end; border-bottom: 2px solid #9eadaa; display: flex; gap: 3px; height: 16rem; overflow: visible; padding: 2.3rem 0 .35rem; position: relative; width: 100%; }
.hp-ev-chart__plot::before { border-top: 1px solid rgba(76, 86, 111, .16); content: ""; left: 0; pointer-events: none; position: absolute; right: 0; top: calc(50% + .975rem); }
.hp-ev-chart__bar { align-items: end; align-self: stretch; background: transparent; border: 0; cursor: pointer; display: flex; flex: 1 0 12px; min-height: 44px; min-width: 12px; overflow: visible; padding: 0; position: relative; }
.hp-ev-chart__fill { background: var(--hp-ev-teal); border-radius: 4px 4px 1px 1px; display: block; height: var(--hp-ev-bar); min-height: 3px; opacity: .84; transition: opacity 140ms ease; width: 100%; z-index: 1; }
.hp-ev-chart__bar.tier-cheap .hp-ev-chart__fill { background: #16816d; }
.hp-ev-chart__bar.tier-mid .hp-ev-chart__fill { background: #5e9f8d; }
.hp-ev-chart__bar.tier-pricey .hp-ev-chart__fill { background: var(--hp-ev-orange); }
.hp-ev-chart__bar.tier-na .hp-ev-chart__fill { background: #b8c2c0; }
.hp-ev-chart__bar:hover .hp-ev-chart__fill,
.hp-ev-chart__bar:focus-visible .hp-ev-chart__fill { opacity: 1; }
.hp-ev-chart__bar:focus-visible { outline: 3px solid var(--hp-ev-navy); outline-offset: 2px; z-index: 5; }
.hp-ev-chart__bar.is-selected { background-color: rgba(30, 30, 76, .08); box-shadow: inset 0 3px 0 var(--hp-ev-navy); }
.hp-ev-chart__bar.is-selected-start { border-radius: 7px 0 0 0; box-shadow: inset 3px 0 0 var(--hp-ev-navy), inset 0 3px 0 var(--hp-ev-navy); }
.hp-ev-chart__bar.is-selected-end { border-radius: 0 7px 0 0; box-shadow: inset -3px 0 0 var(--hp-ev-navy), inset 0 3px 0 var(--hp-ev-navy); }
.hp-ev-chart__bar.is-selected-start.is-selected-end { border-radius: 7px 7px 0 0; box-shadow: inset 3px 0 0 var(--hp-ev-navy), inset -3px 0 0 var(--hp-ev-navy), inset 0 3px 0 var(--hp-ev-navy); }
.hp-ev-chart__bar.is-earliest { background-image: repeating-linear-gradient(90deg, var(--hp-ev-navy) 0 5px, transparent 5px 8px); background-position: bottom; background-repeat: no-repeat; background-size: 100% 2px; }
.hp-ev-chart__bar.is-earliest-start { border-left: 2px dashed var(--hp-ev-navy); }
.hp-ev-chart__bar.is-earliest-end { border-right: 2px dashed var(--hp-ev-navy); }
.hp-ev-chart__value { background: var(--hp-ev-navy); border-radius: 6px; bottom: min(calc(var(--hp-ev-bar) + .45rem), calc(100% - 1.75rem)); color: var(--hp-ev-white); font-size: .7rem; font-variant-numeric: tabular-nums; font-weight: 700; left: 50%; line-height: 1; opacity: 0; padding: .38rem .45rem; pointer-events: none; position: absolute; transform: translateX(-50%); transition: opacity 120ms ease; white-space: nowrap; z-index: 7; }
.hp-ev-chart__value::after { border: 4px solid transparent; border-top-color: var(--hp-ev-navy); content: ""; left: 50%; position: absolute; top: 100%; transform: translateX(-50%); }
.hp-ev-chart__bar:hover .hp-ev-chart__value,
.hp-ev-chart__bar:focus-visible .hp-ev-chart__value { opacity: 1; }
.hp-ev-chart__axis { color: var(--hp-ev-muted); display: flex; font-size: .72rem; font-variant-numeric: tabular-nums; justify-content: space-between; padding-top: .35rem; }
.hp-ev-chart__tooltip { background: var(--hp-ev-white); border: 1px solid var(--hp-ev-line); border-radius: 9px; color: var(--hp-ev-heading); font-weight: 700; margin: .8rem 0; min-height: 44px; padding: .65rem .8rem; }
.hp-ev-chart__legend { display: flex; flex-wrap: wrap; font-size: .86rem; gap: .8rem 1.2rem; }
.hp-ev-chart__legend span { align-items: center; display: inline-flex; gap: .4rem; }
.hp-ev-chart__legend i { border-radius: 3px; display: inline-block; height: .8rem; width: 1.5rem; }
.hp-ev-chart__legend i.is-price-scale { background: linear-gradient(90deg, #16816d 0 35%, #5e9f8d 35% 67%, var(--hp-ev-orange) 67% 100%); width: 3rem; }
.hp-ev-chart__legend i.is-selected { background: rgba(30, 30, 76, .08); border: 2px solid var(--hp-ev-navy); }
.hp-ev-chart__legend i.is-earliest { border-bottom: 2px dashed var(--hp-ev-navy); }
.hp-ev-data-details { margin-top: 1rem; }
.hp-ev-data-details summary { align-items: center; cursor: pointer; display: flex; font-weight: 700; min-height: 44px; }

.hp-ev-content { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-ev-content-card ul { padding-left: 1.25rem; }
.hp-ev-content-links { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.hp-ev-faq details { border-top: 1px solid var(--hp-ev-line); }
.hp-ev-faq summary { cursor: pointer; font-weight: 700; min-height: 52px; padding: .8rem 2rem .8rem 0; }
.hp-ev-faq details p { max-width: 70ch; padding-right: 1rem; }
.hp-ev-sources li + li { margin-top: .45rem; }

@media (max-width: 800px) {
    .hp-ev-hero,
    .hp-ev-calculator-grid { grid-template-columns: 1fr; }
    .hp-ev-section-heading { align-items: start; flex-direction: column; gap: .2rem; }
    .hp-ev-result { position: static; }
    .hp-ev-content { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .hp-ev-page { padding-inline: max(.75rem, env(safe-area-inset-left)) max(.75rem, env(safe-area-inset-right)); }
    .hp-ev-page h1 { font-size: clamp(1.85rem, 10vw, 2.35rem) !important; }
    .hp-ev-actions,
    .hp-ev-actions .hp-ev-button { width: 100%; }
    .hp-ev-answer dl,
    .hp-ev-fields { grid-template-columns: 1fr; }
    .hp-ev-answer dl { gap: .75rem; }
    .hp-ev-tabs button { padding-inline: .45rem; }
    .hp-ev-tabs { grid-template-columns: 1fr; }
    .hp-ev-chart__canvas { gap: .45rem; grid-template-columns: 2.8rem minmax(0, 1fr); }
    .hp-ev-chart__plot,
    .hp-ev-chart__scale { height: 12rem; }
    .hp-ev-chart__scroll { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%); overscroll-behavior-inline: contain; }
    .hp-ev-chart__bar { flex-basis: 11px; min-width: 11px; }
    .hp-ev-operator-table,
    .hp-ev-price-table { min-width: 32rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-ev-page *,
    .hp-ev-page *::before,
    .hp-ev-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
