@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;
}

/* WordPress may leave an empty auto-paragraph before a leading tool shortcode. */
.hp-electricity-price-page .entry-content > p:empty:first-child { display: none; }

.hp-electricity-price {
    --hp-navy: #1b1b42;
    --hp-blue: #192b80;
    --hp-teal: #147a62;
    --hp-teal-dark: #147a62;
    --hp-orange: #ff9f1c;
    --hp-heading: #1c2e2c;
    --hp-ink: #293a38;
    --hp-muted: #5c6078;
    --hp-line: #dfe2ea;
    --hp-surface: #f5f7fb;
    --hp-white: #fff;
    --hp-danger: #8f2424;
    --hp-radius: 12px;
    --hp-shadow: 0 16px 40px rgba(27, 27, 66, 0.1);
    --hp-1: .25rem;
    --hp-2: .5rem;
    --hp-3: .75rem;
    --hp-4: 1rem;
    --hp-5: 1.25rem;
    --hp-6: 1.5rem;
    --hp-8: 2rem;
    --hp-10: 2.5rem;
    box-sizing: border-box;
    color: var(--hp-ink);
    font-family: "HPBrandonGrotesque", "Source Sans Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    margin-inline: auto;
    max-width: 1200px;
    padding: var(--hp-4);
}

/* Round-two history and full-calculator tools reuse the live-page visual system. */
.hp-tool-hero { grid-template-columns: minmax(0, 1fr); }
.hp-card { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); margin-block: 1rem; padding: clamp(1rem, 3vw, 1.75rem); }
.hp-card-heading { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.hp-electricity-price .hp-view-switch button { background: var(--hp-teal); color: var(--hp-white); }
.hp-history-chart { border: 1px solid var(--hp-line); border-radius: 14px; margin-block: 1rem; max-width: 100%; min-width: 0; overflow: hidden; padding: 1rem; width: 100%; }
.hp-history-chart:focus-visible { box-shadow: 0 0 0 4px rgba(35, 76, 170, .2); outline: 3px solid var(--hp-blue); outline-offset: 2px; }
.hp-history-bars { align-items: end; display: grid; gap: .5rem; grid-auto-columns: minmax(3rem, 1fr); grid-auto-flow: column; max-width: 100%; min-height: 14rem; overflow-x: auto; padding: 1rem .25rem .25rem; width: 100%; }
.hp-history-bar { align-items: center; align-self: stretch; background: transparent; border: 0; color: var(--hp-ink); display: grid; grid-template-rows: 1fr auto auto; min-height: 44px; min-width: 3rem; padding: 0; }
.hp-history-bar span { align-self: end; background: repeating-linear-gradient(135deg, var(--hp-blue), var(--hp-blue) 5px, #fff 5px, #fff 8px); border: 2px solid var(--hp-blue); border-radius: 6px 6px 2px 2px; display: block; height: var(--hp-history-height); min-height: 12px; width: 100%; }
.hp-history-bar.is-negative span { background: repeating-linear-gradient(45deg, #6b2b75, #6b2b75 5px, #fff 5px, #fff 8px); border-color: #6b2b75; }
.hp-history-bar.is-selected span,
.hp-history-bar:focus-visible span { box-shadow: 0 0 0 4px rgba(35, 76, 170, .22); }
.hp-history-bar b { font-size: .75rem; overflow-wrap: anywhere; }
.hp-history-bar small { font-weight: 800; }
.hp-form-grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.hp-full-calculator-result { margin-block: 1rem; }
.hp-breakdown-table th { width: 65%; }
.hp-electricity-price .hp-cta a:not(.hp-button) { color: var(--hp-white); text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 420px) {
    .hp-card { border-radius: 12px; padding: .875rem; }
    .hp-history-bars { min-height: 11rem; }
    .hp-view-switch { width: 100%; }
    .hp-view-switch button { flex: 1 1 auto; min-height: 44px; }
}
.hp-electricity-price *, .hp-electricity-price *::before, .hp-electricity-price *::after { box-sizing: inherit; min-width: 0; }
.hp-electricity-price h2, .hp-electricity-price p { margin-top: 0; }
.hp-electricity-price h2 { color: var(--hp-heading); font-family: "HPNeueKabel", "Source Sans Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.hp-electricity-price .hp-utility-heading { font-size: clamp(2.25rem, 7vw, 4.25rem); margin-bottom: var(--hp-5); max-width: 12ch; }
.hp-electricity-price h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.hp-electricity-price a { color: var(--hp-blue); }
.entry-content .hp-electricity-price a { color: var(--hp-blue); }
.entry-content .hp-electricity-price .hp-day-links a { color: var(--hp-ink); }
.entry-content .hp-electricity-price-editorial > :not(.hp-electricity-price) a { color: #14745d; }
.entry-content .hp-electricity-history-editorial a,
.entry-content .hp-electricity-calculator-editorial a { color: #14745d; }
.entry-content .hp-electricity-price-editorial > :not(.hp-electricity-price) p a { text-decoration: underline; text-underline-offset: .15em; }
.hp-electricity-price a:focus-visible, .hp-electricity-price button:focus-visible, .hp-electricity-price input:focus-visible,
.hp-electricity-price summary:focus-visible, .hp-electricity-price [tabindex="0"]:focus-visible { box-shadow: 0 0 0 6px var(--hp-teal-dark); outline: 3px solid var(--hp-white); outline-offset: 2px; }

.hp-fixture-banner { background: var(--hp-navy); border-left: 6px solid var(--hp-orange); color: var(--hp-white); margin: calc(var(--hp-4) * -1) calc(var(--hp-4) * -1) var(--hp-8); padding: var(--hp-3) var(--hp-4); text-align: center; }
.hp-hero { display: grid; gap: var(--hp-8); margin-bottom: var(--hp-10); }
.hp-hero-copy { align-self: center; }
.hp-eyebrow { color: var(--hp-teal-dark); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; margin-bottom: var(--hp-2); text-transform: uppercase; }
.hp-lead { font-size: 1.125rem; max-width: 62ch; }
.hp-pulse { background: var(--hp-navy); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); color: var(--hp-white); overflow: hidden; padding: var(--hp-6); position: relative; }
.hp-pulse::after { background: linear-gradient(90deg, var(--hp-teal) 0 76%, var(--hp-orange) 76%); bottom: 0; content: ""; height: 6px; left: 0; position: absolute; right: 0; }
.hp-electricity-price .hp-pulse h2 { color: var(--hp-white) !important; font-size: 1rem; margin: var(--hp-5) 0 var(--hp-2); }
.hp-status { align-items: center; display: flex; font-size: .875rem; font-weight: 700; gap: var(--hp-2); }
.hp-status-icon { align-items: center; background: var(--hp-white); border-radius: 50%; color: var(--hp-navy); display: inline-flex; height: 1.75rem; justify-content: center; width: 1.75rem; }
.hp-status-stale .hp-status-icon, .hp-status-partial .hp-status-icon { background: var(--hp-orange); }
.hp-status-unavailable .hp-status-icon { background: #f4c7c7; color: #661b1b; }
.hp-current-price { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--hp-2); margin-bottom: 0; }
.hp-current-price strong { font-size: clamp(3.25rem, 13vw, 5rem); letter-spacing: -.055em; line-height: 1; }
.hp-current-price span { font-size: 1.125rem; font-weight: 700; }
.hp-current-unavailable { font-size: 3rem; font-weight: 700; margin-bottom: 0; }
.hp-current-unavailable span { font-size: 1rem; }
.hp-current-period, .hp-current-comparison, .hp-state-message { color: #e4e6f0; margin: var(--hp-2) 0 0; }
.hp-next-window { border-top: 1px solid #535373; display: grid; gap: var(--hp-1); margin-top: var(--hp-5); padding-top: var(--hp-4); }
.hp-next-window span { color: #d9dbea; font-size: .8125rem; font-weight: 700; text-transform: uppercase; }
.hp-next-window strong { color: var(--hp-white); font-size: 1.4rem; }
.hp-next-window small { color: #d9dbea; }

.hp-day-links { display: grid; gap: var(--hp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-bottom: var(--hp-8); }
.hp-day-links a { background: var(--hp-white); border: 2px solid var(--hp-line); border-radius: var(--hp-radius); color: var(--hp-ink); display: grid; min-height: 44px; padding: var(--hp-4); text-decoration: none; }
.hp-day-links a:hover, .hp-day-links a[aria-current="true"] { border-color: var(--hp-teal-dark); box-shadow: 0 6px 18px rgba(20, 122, 98, .12); }
.hp-electricity-price .hp-day-links a[aria-current="true"] { color: var(--hp-ink) !important; }
.hp-day-links strong { color: var(--hp-navy); font-size: 1.5rem; }
.hp-day-links small { color: var(--hp-muted); }
.hp-layout { display: grid; gap: var(--hp-8); }
.hp-primary-column, .hp-secondary-column { min-width: 0; }
.hp-day-panel, .hp-section, .hp-side-card, .hp-method { background: var(--hp-white); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); margin-bottom: var(--hp-8); padding: var(--hp-5); }
.hp-section-heading { align-items: flex-start; display: flex; flex-wrap: wrap; gap: var(--hp-4); justify-content: space-between; }
.hp-section-heading h2 { margin-bottom: var(--hp-3); }
.hp-view-controls { background: var(--hp-surface); border-radius: 999px; display: flex; padding: var(--hp-1); }
.hp-view-controls button { background: transparent; border: 0; border-radius: 999px; color: var(--hp-navy); cursor: pointer; font: inherit; font-weight: 700; min-height: 44px; padding: var(--hp-2) var(--hp-4); white-space: nowrap; }
.hp-view-controls button[aria-pressed="true"] { background: var(--hp-white); box-shadow: 0 2px 8px rgba(27, 27, 66, .12); }

.hp-chart { background: var(--hp-white); border: 1px solid #dbe5e1; border-radius: 16px; margin: var(--hp-4) 0 var(--hp-6); overflow: hidden; }
.hp-chart-header { align-items: center; display: flex; flex-wrap: wrap; gap: var(--hp-4); justify-content: space-between; margin: 0; padding: var(--hp-5) var(--hp-6); }
.hp-chart-header > div:first-child { display: grid; gap: 1px; }
.hp-chart-kicker { color: var(--hp-teal-dark); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hp-chart-header strong { color: var(--hp-heading); font-family: "HPNeueKabel", "Source Sans Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif; font-size: 1.5rem; line-height: 1.15; }
.hp-chart-header small { color: var(--hp-muted); font-size: .8125rem; }
.hp-chart-metrics { border-block: 1px solid #e2e8e6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.hp-chart-metrics > div { padding: var(--hp-4) var(--hp-5); }
.hp-chart-metrics > div:nth-child(odd) { border-right: 1px solid #e2e8e6; }
.hp-chart-metrics > div:nth-child(n + 3) { border-top: 1px solid #e2e8e6; }
.hp-chart-metrics dt { color: var(--hp-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hp-chart-metrics dd { margin: var(--hp-1) 0 0; }
.hp-chart-metrics strong { color: var(--hp-navy); display: block; font-size: clamp(.95rem, 2.5vw, 1.3rem); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.hp-chart-metrics small { color: var(--hp-muted); display: block; font-size: .75rem; margin-top: 2px; }
.hp-chart-plot { background: #f7faf9; display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); padding: var(--hp-5) var(--hp-5) var(--hp-2) var(--hp-3); }
.hp-chart-y-axis { color: var(--hp-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; height: 20rem; list-style: none; margin: 0; padding: 0 var(--hp-3) 0 0; position: relative; }
.hp-chart-y-axis li { position: absolute; right: var(--hp-3); transform: translateY(-50%); white-space: nowrap; }
.hp-chart-y-axis li:nth-child(1) { top: 4%; }
.hp-chart-y-axis li:nth-child(2) { top: 27%; }
.hp-chart-y-axis li:nth-child(3) { top: 50%; }
.hp-chart-y-axis li:nth-child(4) { top: 73%; }
.hp-chart-y-axis li:nth-child(5) { top: 96%; }
.hp-chart-viewport { background: linear-gradient(90deg, rgba(25, 43, 128, .025), transparent 35%, rgba(255, 159, 28, .025)); cursor: crosshair; height: 20rem; overflow: hidden; position: relative; touch-action: pan-y; }
.hp-chart-viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--hp-teal-dark); outline: none; }
.hp-chart svg { display: block; height: 100%; overflow: hidden; width: 100%; }
.hp-chart-grid line { stroke: #d9e3e0; stroke-dasharray: 2 3; stroke-width: 1; }
.hp-chart-zero-line { stroke: #536764; stroke-width: 1.35; }
.hp-chart-bar { shape-rendering: geometricPrecision; transition: fill 120ms ease, opacity 120ms ease; }
.hp-chart-bar.hp-bar-cheap { fill: #147a62; }
.hp-chart-bar.hp-bar-middle { fill: #6c817d; }
.hp-chart-bar.hp-bar-expensive { fill: #d87716; }
.hp-chart-bar.is-current, .hp-chart-bar.is-selected { fill: var(--hp-navy); }
.hp-chart-now { border-left: 1.5px solid var(--hp-navy); bottom: 0; left: var(--hp-marker-x); pointer-events: none; position: absolute; top: 0; z-index: 3; }
.hp-chart-now span { background: var(--hp-white); border: 1px solid #d7dbea; border-radius: 999px; box-shadow: 0 3px 12px rgba(27, 27, 66, .12); color: var(--hp-navy); font-size: .6875rem; font-weight: 700; left: 0; letter-spacing: .05em; padding: 3px 8px; position: absolute; text-transform: uppercase; top: var(--hp-2); transform: translateX(-50%); white-space: nowrap; }
.hp-chart-selection { border-left: 1px solid rgba(27, 27, 66, .55); bottom: 0; left: var(--hp-selection-x); pointer-events: none; position: absolute; top: 0; z-index: 2; }
.hp-chart-selection span { background: var(--hp-navy); border: 2px solid var(--hp-white); border-radius: 50%; box-shadow: 0 2px 8px rgba(27, 27, 66, .25); height: 10px; left: 0; position: absolute; top: var(--hp-selection-y); transform: translate(-50%, -50%); width: 10px; }
.hp-chart-tooltip { background: var(--hp-white); border: 1px solid #d7dbea; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 27, 66, .16); color: var(--hp-ink); display: grid; left: clamp(6rem, var(--hp-tooltip-x), calc(100% - 6rem)); line-height: 1.25; min-width: 10rem; padding: var(--hp-3) var(--hp-4); pointer-events: none; position: absolute; top: clamp(4.5rem, var(--hp-tooltip-y), calc(100% - 3.75rem)); transform: translate(-50%, -50%); z-index: 4; }
.hp-chart-tooltip strong { color: var(--hp-muted); font-size: .75rem; }
.hp-chart-tooltip span { color: var(--hp-navy); font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.hp-chart-tooltip small { color: var(--hp-muted); font-size: .75rem; margin-top: 2px; }
.hp-chart-tooltip[hidden], .hp-chart [hidden] { display: none; }
.hp-chart-time { color: var(--hp-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; height: 1.85rem; margin-left: calc(3.75rem + var(--hp-3)); margin-right: var(--hp-5); position: relative; }
.hp-chart-time span { display: grid; justify-items: center; left: var(--hp-time-x); line-height: 1; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.hp-chart-time span:first-child { justify-items: start; transform: none; }
.hp-chart-time span:last-child { justify-items: end; transform: translateX(-100%); }
.hp-chart-time b { font: inherit; }
.hp-chart-time small { font-size: .55rem; margin-top: 2px; white-space: nowrap; }
.hp-chart-meta { padding: var(--hp-2) var(--hp-6) var(--hp-4); }
.hp-chart-legend { align-items: center; color: var(--hp-muted); display: flex; flex-wrap: wrap; font-size: .75rem; gap: var(--hp-2) var(--hp-5); list-style: none; margin: 0; padding: 0; }
.hp-chart-legend li { align-items: center; display: inline-flex; gap: var(--hp-2); }
.hp-legend-swatch { border-radius: 2px; display: inline-block; height: .625rem; width: .625rem; }
.hp-legend-cheap { background: #147a62; }
.hp-legend-middle { background: #6c817d; }
.hp-legend-expensive { background: #d87716; }
.hp-chart-footer { background: #fbfcfc; border-top: 1px solid #e2e8e6; color: var(--hp-muted); display: flex; flex-wrap: wrap; font-size: .6875rem; gap: var(--hp-2) var(--hp-5); justify-content: space-between; padding: var(--hp-3) var(--hp-6); }
.hp-sr-only { border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; }
.hp-price-table-wrap summary { color: var(--hp-blue); cursor: pointer; font-weight: 700; min-height: 44px; padding: var(--hp-3) 0; }
.hp-price-table-wrap { display: block; max-width: 100%; min-width: 0; }
.hp-table-scroll { max-height: 30rem; max-width: 100%; overflow: auto; overscroll-behavior: contain; width: 100%; }
.hp-price-table { border-collapse: collapse; min-width: 32rem; width: 100%; }
.hp-price-table caption { color: var(--hp-muted); padding: var(--hp-3); text-align: left; }
.hp-price-table th, .hp-price-table td { border-bottom: 1px solid var(--hp-line); color: var(--hp-ink); padding: var(--hp-3); text-align: left; }
.hp-price-table thead th { background: var(--hp-navy); color: var(--hp-white); position: sticky; top: 0; z-index: 1; }
.hp-price-table tbody tr:nth-child(even) { background: var(--hp-surface); }
.hp-price-table .is-current { box-shadow: inset 5px 0 0 var(--hp-orange); }
.hp-price-table .is-current td:last-child { font-weight: 700; }
.hp-notice { border-left: 5px solid var(--hp-blue); display: grid; gap: var(--hp-1); padding: var(--hp-4); }
.hp-notice-warning { border-color: var(--hp-orange); } .hp-notice-neutral { background: var(--hp-surface); }

.hp-window-list { list-style: none; margin: 0; padding: 0; }
.hp-window-list li { border-top: 1px solid var(--hp-line); display: grid; gap: var(--hp-1); padding: var(--hp-4) 0; }
.hp-window-list span { color: var(--hp-teal-dark); font-size: .8125rem; font-weight: 700; text-transform: uppercase; }
.hp-window-list strong { color: var(--hp-navy); font-size: 1.25rem; }
.hp-window-list small, .hp-fine-print { color: var(--hp-muted); font-size: .875rem; }
.hp-source-card dl, .hp-source-card dd { margin: 0; }
.hp-source-card dl div { border-top: 1px solid var(--hp-line); display: grid; gap: var(--hp-2); grid-template-columns: minmax(5rem, .7fr) 1.3fr; padding: var(--hp-3) 0; }
.hp-source-card dt { color: var(--hp-muted); } .hp-source-card dd { overflow-wrap: anywhere; }
.hp-form-grid { display: grid; gap: var(--hp-5); margin: var(--hp-6) 0; }
.hp-field label { color: var(--hp-navy); display: block; font-weight: 700; margin-bottom: var(--hp-2); }
.hp-field input { appearance: none; background: var(--hp-white); border: 2px solid #747a91; border-radius: 8px; color: var(--hp-ink); font: inherit; min-height: 48px; padding: var(--hp-3); width: 100%; }
.hp-field small { color: var(--hp-muted); display: block; margin-top: var(--hp-2); }
.hp-form-error { color: var(--hp-danger); font-weight: 700; margin-top: var(--hp-4); }
.hp-calculator-result { background: var(--hp-surface); border-left: 5px solid var(--hp-teal-dark); display: grid; margin-top: var(--hp-6); padding: var(--hp-4); }
.hp-calculator-result span { color: var(--hp-muted); } .hp-calculator-result output { color: var(--hp-navy); font-size: 1.75rem; font-weight: 700; }
.hp-button { align-items: center; border: 2px solid transparent; border-radius: 8px; cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; justify-content: center; min-height: 48px; padding: var(--hp-3) var(--hp-5); text-decoration: none; transition: opacity 120ms ease, transform 120ms ease; }
.hp-button:hover { opacity: .9; transform: translateY(-1px); }
.hp-button-primary { background: var(--hp-teal-dark); color: var(--hp-white) !important; } .hp-button-secondary { background: var(--hp-blue); color: var(--hp-white); }
.hp-method { display: grid; gap: var(--hp-5); } .hp-method ul { margin: 0; padding-left: var(--hp-5); } .hp-method li + li { margin-top: var(--hp-2); }
.hp-cta { align-items: center; background: var(--hp-navy); border-radius: var(--hp-radius); color: var(--hp-white); display: grid; gap: var(--hp-6); padding: var(--hp-6); }
.hp-cta .hp-eyebrow { color: var(--hp-white); }
.hp-electricity-price .hp-cta h2 { color: var(--hp-white) !important; margin-bottom: var(--hp-3); } .hp-disclosure { color: #d9dbea; font-size: .875rem; margin-bottom: 0; max-width: 65ch; }
.hp-electricity-price[data-enhanced="true"] .hp-day-panel[hidden] { display: none; }
.hp-electricity-price-editorial, .hp-electricity-price { overflow-wrap: anywhere; }
.hp-electricity-price-editorial > :not(.hp-electricity-price) { margin-inline: auto; max-width: 75ch; }
.hp-electricity-price-editorial__table-wrap { max-width: 100%; overflow: auto; }
.hp-electricity-price-editorial__table-wrap th { color: #293a38; }
.hp-electricity-price-editorial__toc a,
.hp-electricity-price-editorial details > summary,
.hp-electricity-price-editorial__cta {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
  padding-block: 8px;
}
.hp-electricity-price-editorial details > summary { cursor: pointer; width: 100%; }

@media (min-width: 48rem) {
    .hp-electricity-price { padding: var(--hp-8); }
    .hp-fixture-banner { margin: calc(var(--hp-8) * -1) calc(var(--hp-8) * -1) var(--hp-10); }
    .hp-hero { grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr); }
    .hp-chart-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hp-chart-metrics > div:nth-child(n) { border-top: 0; }
    .hp-chart-metrics > div:not(:last-child) { border-right: 1px solid #e2e8e6; }
    .hp-form-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-method { grid-template-columns: minmax(14rem, .7fr) 1.3fr; }
    .hp-cta { grid-template-columns: 1fr auto; padding: var(--hp-8); }
}
@media (min-width: 64rem) {
    .hp-layout { grid-template-columns: minmax(0, 1fr); }
    .hp-secondary-column { display: grid; gap: var(--hp-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-secondary-column .hp-side-card { margin-bottom: 0; }
}
@media (max-width: 47.999rem) {
    .hp-chart-header { align-items: stretch; padding: var(--hp-4); }
    .hp-chart-header .hp-view-controls { align-self: flex-start; }
    .hp-chart-header .hp-view-controls button { flex: 1; padding-inline: var(--hp-3); }
    .hp-chart-metrics > div { padding: var(--hp-3); }
    .hp-chart-plot { grid-template-columns: 3.2rem minmax(0, 1fr); padding: var(--hp-4) var(--hp-3) var(--hp-2) var(--hp-2); }
    .hp-chart-y-axis, .hp-chart-viewport { height: 15.5rem; }
    .hp-chart-y-axis { font-size: .625rem; padding-right: var(--hp-2); }
    .hp-chart-y-axis li { right: var(--hp-2); }
    .hp-chart-time { margin-left: calc(3.2rem + var(--hp-2)); margin-right: var(--hp-3); }
    .hp-time-desktop { display: none !important; }
    .hp-chart-meta, .hp-chart-footer { padding-inline: var(--hp-4); }
    .hp-chart-tooltip { left: 50%; min-width: min(13rem, calc(100% - 1rem)); top: var(--hp-2); transform: translateX(-50%); }
}
@media (max-width: 23.4375rem) {
    .hp-electricity-price { padding-inline: var(--hp-3); }
    .hp-fixture-banner { margin-inline: calc(var(--hp-3) * -1); }
    .hp-pulse, .hp-day-panel, .hp-section, .hp-side-card, .hp-method { padding: var(--hp-4); }
    .hp-current-price strong { font-size: 3rem; }
    .hp-source-card dl div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-electricity-price *, .hp-electricity-price *::before, .hp-electricity-price *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
    .hp-pulse, .hp-fixture-banner, .hp-cta { border: 2px solid CanvasText; }
    .hp-chart-bar { fill: LinkText !important; }
    .hp-chart-bar.is-current, .hp-chart-bar.is-selected { fill: Highlight !important; }
    .hp-chart-zero-line, .hp-chart-now, .hp-chart-selection { border-color: CanvasText; stroke: CanvasText; }
    .hp-chart-tooltip { border: 1px solid CanvasText; }
    .hp-price-table .is-current { outline: 3px solid Highlight; outline-offset: -3px; }
    .hp-status-icon { border: 1px solid CanvasText; }
}

/* Claude Design port: live price page only. Values mirror the approved export. */
.hp-electricity-price.hp-price-design-v2 {
    --hp-navy: #1b1b42;
    --hp-blue: #192b80;
    --hp-teal: #147a62;
    --hp-orange: #ff9f1c;
    --hp-heading: #1c2e2c;
    --hp-ink: #293a38;
    --hp-copy: #414a5e;
    --hp-muted: #5c6078;
    --hp-subtle: #8a938f;
    --hp-line: #dfe2ea;
    background: #f5f7fb;
    box-shadow: 0 0 0 100vmax #f5f7fb;
    clip-path: inset(0 -100vmax);
    color: var(--hp-ink);
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 1180px;
    padding: clamp(1rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2.5rem) 4rem;
    width: 100%;
}
.hp-price-design-v2 *,
.hp-price-design-v2 *::before,
.hp-price-design-v2 *::after { box-sizing: border-box; }
.hp-price-design-v2 :where(h1, h2, h3, p, figure, dl, ol, ul) { margin-top: 0; }
.hp-price-design-v2 :where(button, input, summary) { font-family: inherit; }
.hp-price-design-v2 :where(a) { color: #192b80; }
.hp-price-design-v2 :where(a:hover) { color: #147a62; }
.hp-price-design-v2 :where(a, button, input, summary, [tabindex="0"]):focus-visible {
    box-shadow: 0 0 0 4px rgba(20, 122, 98, .25);
    outline: 2px solid #147a62;
    outline-offset: 2px;
}
.hp-price-design-v2 .hp-fixture-banner {
    background: #1b1b42;
    border: 0;
    border-left: 6px solid #ff9f1c;
    border-radius: 8px;
    color: #fff;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
}
.hp-price-design-v2 .hp-hero {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hp-price-design-v2 .hp-hero-copy { align-self: center; }
.hp-price-design-v2 .hp-eyebrow {
    color: #147a62;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin: 0 0 .6rem;
    text-transform: uppercase;
}
.hp-price-design-v2 .hp-utility-heading {
    color: #1c2e2c;
    font-family: "HPNeueKabel", sans-serif;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.03;
    margin: 0 0 1rem;
    max-width: 14ch;
}
.hp-price-design-v2 .hp-lead {
    color: #414a5e;
    font-size: 1.1rem;
    margin: 0 0 1.25rem;
    max-width: 52ch;
}
.hp-price-design-v2 .hp-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.hp-price-design-v2 .hp-button {
    align-items: center;
    border: 2px solid transparent;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.35rem;
    text-decoration: none;
}
.hp-price-design-v2 .hp-button-primary { background: #147a62; color: #fff !important; }
.hp-price-design-v2 .hp-button-outline { background: #fff; border-color: #dfe2ea; color: #192b80; }
.hp-price-design-v2 .hp-pulse {
    background: #1b1b42;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(27, 27, 66, .18);
    color: #fff;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    position: relative;
}
.hp-price-design-v2 .hp-pulse::after,
.hp-price-design-v2 .hp-calculator-result::after,
.hp-price-design-v2 .hp-cta::after {
    background: linear-gradient(90deg, #147a62 0 76%, #ff9f1c 76%);
    bottom: 0;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    right: 0;
}
.hp-price-design-v2 .hp-status { color: #bfeede; font-size: .85rem; gap: .5rem; }
.hp-price-design-v2 .hp-status-icon {
    animation: hpPulse 2s ease-in-out infinite;
    background: #5fd6ac;
    color: transparent;
    height: .7rem;
    width: .7rem;
}
.hp-price-design-v2 .hp-pulse h2 {
    color: #9fa2c4 !important;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 1rem 0 .35rem;
    text-transform: uppercase;
}
.hp-price-design-v2 .hp-current-price { display: block; margin: 0; }
.hp-price-design-v2 .hp-current-price strong {
    color: #fff;
    font-family: "HPNeueKabel", sans-serif;
    font-size: clamp(3rem, 9vw, 4.25rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: .95;
}
.hp-price-design-v2 .hp-current-price span { color: #c9cbe4; font-size: 1.1rem; font-weight: 400; margin-left: .5rem; }
.hp-price-design-v2 .hp-current-period { color: #d7d9ec; font-size: .95rem; margin: .6rem 0 0; }
.hp-price-design-v2 .hp-current-comparison { color: #ffcf8f; font-size: .9rem; font-weight: 600; margin: .35rem 0 0; }
.hp-price-design-v2 .hp-current-summary {
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
}
.hp-price-design-v2 .hp-current-summary > div { flex: 1; min-width: 8rem; }
.hp-price-design-v2 .hp-current-summary span {
    color: #9fa2c4;
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hp-price-design-v2 .hp-current-summary strong {
    color: #fff;
    display: block;
    font-family: "HPNeueKabel", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
}
.hp-price-design-v2 .hp-current-summary small { color: #c9cbe4; display: block; font-size: .82rem; }
.hp-price-design-v2 .hp-state-message { color: #9fa2c4; font-size: .78rem; margin: .75rem 0 0; }
.hp-price-design-v2 .hp-live-insights {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    margin-bottom: 1rem;
}
.hp-price-design-v2 .hp-live-insights article {
    background: #fff;
    border: 1px solid #dfe2ea;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(27, 27, 66, .06);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.25rem;
}
.hp-price-design-v2 .hp-live-insights article > span {
    color: #147a62;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.hp-price-design-v2 .hp-live-insights strong { color: #1c2e2c; font-family: "HPNeueKabel", sans-serif; font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.hp-price-design-v2 .hp-live-insights strong.is-low { color: #147a62; }
.hp-price-design-v2 .hp-live-insights strong.is-high { color: #a85508; }
.hp-price-design-v2 .hp-live-insights strong.is-neutral { color: #5c6078; }
.hp-price-design-v2 .hp-live-insights p { color: #5c6078; font-size: .88rem; margin: 0; }
.hp-price-design-v2 .hp-level-gauge { display: flex; gap: .25rem; margin: .15rem 0 .05rem; }
.hp-price-design-v2 .hp-level-gauge i { background: #e6ebe9; border-radius: 999px; flex: 1; height: 8px; }
.hp-price-design-v2 .hp-level-gauge i:nth-child(2) { background: #3f4a8c; }
.hp-price-design-v2 .hp-day-links {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    margin-bottom: 1rem;
}
.hp-price-design-v2 .hp-day-links a {
    background: #fff;
    border: 2px solid #dfe2ea;
    border-radius: 12px;
    color: #1c2e2c;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-height: 64px;
    padding: .7rem 1rem;
    text-align: left;
}
.hp-price-design-v2 .hp-day-links a[aria-current="true"] { background: #eef7f3; border-color: #147a62; box-shadow: none; }
.hp-price-design-v2 .hp-day-links span { color: #5c6078; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hp-price-design-v2 .hp-day-links a[aria-current="true"] span,
.hp-price-design-v2 .hp-day-links a[aria-current="true"] small { color: #147a62; }
.hp-price-design-v2 .hp-day-links strong { color: #1c2e2c; font-family: "HPNeueKabel", sans-serif; font-size: 1.3rem; font-weight: 600; }
.hp-price-design-v2 .hp-day-links small { color: #5c6078; font-size: .78rem; }
.hp-price-design-v2 .hp-layout { display: block; }
.hp-price-design-v2 .hp-day-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0 0 1rem;
    padding: 0;
}
.hp-price-design-v2 .hp-section-heading {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.hp-price-design-v2 .hp-chart {
    background: #fff;
    border: 1px solid #dfe2ea;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(27, 27, 66, .08);
    margin: 0 0 1rem;
    overflow: visible;
    padding: clamp(1rem, 3vw, 1.75rem);
}
.hp-price-design-v2 .hp-chart-header { align-items: flex-start; margin: 0 0 1.25rem; padding: 0; }
.hp-price-design-v2 .hp-chart-kicker { color: #147a62; }
.hp-price-design-v2 .hp-chart-header strong { color: #1c2e2c; font-size: clamp(1.35rem, 3vw, 1.7rem); }
.hp-price-design-v2 .hp-chart-header small { color: #5c6078; }
.hp-price-design-v2 .hp-view-controls { background: #eef0f6; border-radius: 999px; gap: .3rem; padding: .3rem; }
.hp-price-design-v2 .hp-view-controls button { color: #5c6078; min-height: 40px; padding: 0 1.1rem; }
.hp-price-design-v2 .hp-view-controls button[aria-pressed="true"] { background: #fff; color: #1b1b42; box-shadow: 0 1px 3px rgba(27, 27, 66, .18); }
.hp-price-design-v2 .hp-chart-metrics {
    border: 1px solid #e6ebe9;
    border-radius: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    margin: 0 0 1.25rem;
    overflow: hidden;
}
.hp-price-design-v2 .hp-chart-metrics > div { background: #fff; border-bottom: 1px solid #e6ebe9; border-right: 1px solid #e6ebe9; padding: .85rem 1rem; }
.hp-price-design-v2 .hp-chart-metrics > div:first-child { background: #f4f2ff; }
.hp-price-design-v2 .hp-chart-metrics > div:nth-child(3) { background: #eef7f3; }
.hp-price-design-v2 .hp-chart-metrics > div:nth-child(4) { background: #fef2e8; }
.hp-price-design-v2 .hp-chart-metrics dt { color: #5c6078; font-size: .7rem; }
.hp-price-design-v2 .hp-chart-metrics > div:first-child dt { color: #5b4fae; }
.hp-price-design-v2 .hp-chart-metrics > div:nth-child(3) dt { color: #147a62; }
.hp-price-design-v2 .hp-chart-metrics > div:nth-child(4) dt { color: #914b08; }
.hp-price-design-v2 .hp-chart-metrics strong { color: #1c2e2c; font-family: "HPNeueKabel", sans-serif; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
.hp-price-design-v2 .hp-chart-metrics small { color: #5c6078; }
.hp-price-design-v2 .hp-chart-plot { background: transparent; grid-template-columns: auto 1fr; gap: .5rem; padding: 0; }
.hp-price-design-v2 .hp-chart-y-axis { color: #5c6078; height: clamp(200px, 40vw, 300px); min-width: 2.6rem; padding-right: .5rem; }
.hp-price-design-v2 .hp-chart-viewport {
    background: linear-gradient(180deg, #fbfcfd, #f4f7f6);
    border-radius: 8px;
    height: clamp(200px, 40vw, 300px);
}
.hp-price-design-v2 .hp-chart-grid line { stroke: #e4e8eb; stroke-dasharray: 0; opacity: .55; }
.hp-price-design-v2 .hp-chart-zero-line { stroke: #8a938f; opacity: .6; }
.hp-price-design-v2 .hp-chart-time { color: #5c6078; margin-left: calc(2.6rem + .5rem); margin-right: 0; }
.hp-price-design-v2 .hp-chart-meta { padding: .75rem 0 0; }
.hp-price-design-v2 .hp-chart-legend { color: #414a5e; font-size: .82rem; gap: 1rem; }
.hp-price-design-v2 .hp-legend-swatch { border-radius: 3px; height: 14px; width: 14px; }
.hp-price-design-v2 .hp-chart-footer { background: transparent; border-top: 1px solid #eef0f2; color: #5c6078; justify-content: flex-start; margin-top: 1rem; padding: 1rem 0 0; }
.hp-price-design-v2 .hp-price-table-wrap {
    background: #fff;
    border: 1px solid #dfe2ea;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(27, 27, 66, .06);
    margin: 0 0 1.5rem;
    overflow: hidden;
}
.hp-price-design-v2 .hp-price-table-wrap summary {
    align-items: center;
    color: #1c2e2c;
    display: flex;
    font-family: "HPNeueKabel", sans-serif;
    font-weight: 600;
    justify-content: space-between;
    list-style: none;
    min-height: 56px;
    padding: 1.1rem 1.5rem;
}
.hp-price-design-v2 .hp-price-table-wrap summary span { color: #5c6078; font-family: "HPBrandonGrotesque", sans-serif; font-size: .8rem; }
.hp-price-design-v2 .hp-table-scroll { border-top: 1px solid #eef0f2; max-height: 24rem; }
.hp-price-design-v2 .hp-price-table { font-size: .9rem; }
.hp-price-design-v2 .hp-price-table caption { color: #5c6078; font-size: .82rem; padding: .75rem 1.5rem; }
.hp-price-design-v2 .hp-price-table th,
.hp-price-design-v2 .hp-price-table td { border-bottom: 1px solid #f0f2f4; padding: .5rem 1.5rem; }
.hp-price-design-v2 .hp-price-table thead th { background: #f5f7fb; color: #5c6078; padding-block: .6rem; }
.hp-price-design-v2 .hp-price-table tbody tr:nth-child(even) { background: #fff; }
.hp-price-design-v2 .hp-price-table tbody .is-current { background: #f4f2ff; box-shadow: none; }
.hp-price-design-v2 .hp-secondary-column {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    margin-bottom: 1rem;
}
.hp-price-design-v2 .hp-side-card {
    background: #fff;
    border: 1px solid #dfe2ea;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(27, 27, 66, .06);
    margin: 0;
    padding: clamp(1rem, 3vw, 1.6rem);
}
.hp-price-design-v2 .hp-side-card h2 { color: #1c2e2c; font-size: 1.35rem; margin: 0 0 1rem; }
.hp-price-design-v2 .hp-side-card h3 { color: #5c6078; font-size: .8rem; margin: 0 0 .5rem; text-transform: uppercase; }
.hp-price-design-v2 .hp-window-list { display: grid; gap: .5rem; }
.hp-price-design-v2 .hp-window-list li { align-items: center; background: #f5f7fb; border: 0; border-radius: 10px; display: grid; gap: .35rem 1rem; grid-template-columns: 4.5rem 1fr auto; padding: .75rem .9rem; }
.hp-price-design-v2 .hp-window-list span { color: #192b80; font-size: .9rem; text-transform: none; }
.hp-price-design-v2 .hp-window-list strong { color: #1c2e2c; font-family: "HPNeueKabel", sans-serif; font-size: 1rem; }
.hp-price-design-v2 .hp-window-list small { color: #147a62; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.hp-price-design-v2 .hp-source-card dl { display: grid; gap: .6rem; }
.hp-price-design-v2 .hp-source-card dl div { border-bottom: 1px solid #f0f2f4; border-top: 0; gap: 1rem; grid-template-columns: 1fr 1.4fr; padding: 0 0 .6rem; }
.hp-price-design-v2 .hp-source-card dt { color: #5c6078; font-size: .85rem; }
.hp-price-design-v2 .hp-source-card dd { color: #1c2e2c; font-size: .9rem; font-weight: 600; }
.hp-price-design-v2 .hp-calculator {
    background: #fff;
    border: 1px solid #dfe2ea;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(27, 27, 66, .08);
    margin: 0 0 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.hp-price-design-v2 .hp-calculator-heading { align-items: flex-end; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: 1.5rem; }
.hp-price-design-v2 .hp-calculator-heading h2 { color: #1c2e2c; font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0; }
.hp-price-design-v2 .hp-calculator-heading > p { color: #5c6078; font-size: .9rem; margin: 0; max-width: 40ch; }
.hp-price-design-v2 .hp-calculator-grid { align-items: stretch; display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.hp-price-design-v2 .hp-calculator-fields { display: flex; flex-direction: column; gap: 1.25rem; }
.hp-price-design-v2 .hp-field label { color: #1c2e2c; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.hp-price-design-v2 .hp-input-unit { position: relative; }
.hp-price-design-v2 .hp-input-unit input { background: #f7f9fa; border: 1px solid #cfd6dd; border-radius: 10px; color: #1c2e2c; font-size: 1.05rem; min-height: 52px; padding: 0 4.75rem 0 .9rem; }
.hp-price-design-v2 .hp-input-unit span { color: #5c6078; font-size: .85rem; font-weight: 600; pointer-events: none; position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); }
.hp-price-design-v2 .hp-consumption-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.hp-price-design-v2 .hp-consumption-presets button { background: #fff; border: 1px solid #dfe2ea; border-radius: 999px; color: #414a5e; cursor: pointer; font-size: .8rem; font-weight: 600; min-height: 36px; padding: 0 .8rem; }
.hp-price-design-v2 .hp-calculator-bases { border: 0; margin: 0; min-width: 0; padding: 0; }
.hp-price-design-v2 .hp-calculator-bases legend { color: #1c2e2c; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; padding: 0; }
.hp-price-design-v2 .hp-calculator-bases > div { background: #eef0f6; border-radius: 12px; display: grid; gap: .35rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 116px), 1fr)); padding: .35rem; }
.hp-price-design-v2 .hp-calculator-bases button { background: transparent; border: 0; border-radius: 9px; color: #5c6078; cursor: pointer; display: flex; flex-direction: column; font-size: .82rem; font-weight: 700; gap: .1rem; justify-content: center; min-height: 52px; padding: .2rem; }
.hp-price-design-v2 .hp-calculator-bases button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(27, 27, 66, .18); color: #1b1b42; }
.hp-price-design-v2 .hp-calculator-bases small { color: #5c6078; font-size: .72rem; font-weight: 400; }
.hp-price-design-v2 .hp-calculator-bases button[aria-pressed="true"] small { color: #147a62; }
.hp-price-design-v2[data-enhanced="true"] [data-hp-calculator-submit] {
    display: none;
}
.hp-price-design-v2 .hp-calculator-result {
    background: #1b1b42;
    border: 0;
    border-radius: 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-height: 15rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    position: relative;
}
.hp-price-design-v2 .hp-calculator-result > span { color: #9fa2c4; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hp-price-design-v2 .hp-calculator-result output { color: #fff; font-family: "HPNeueKabel", sans-serif; font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; line-height: .95; margin-top: .3rem; }
.hp-price-design-v2 .hp-calculator-result p { color: #c9cbe4; font-size: .95rem; margin: .5rem 0 0; }
.hp-price-design-v2 .hp-cost-bar { background: rgba(255, 255, 255, .12); border-radius: 999px; display: flex; height: 14px; margin: 1.4rem 0 1rem; overflow: hidden; }
.hp-price-design-v2 .hp-cost-bar i:first-child { background: #147a62; width: 100%; }
.hp-price-design-v2 .hp-cost-bar i:last-child { background: #6c817d; width: 0; }
.hp-price-design-v2 .hp-cost-breakdown { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.hp-price-design-v2 .hp-cost-breakdown li { align-items: center; display: flex; font-size: .9rem; gap: .6rem; }
.hp-price-design-v2 .hp-cost-breakdown li > i { border-radius: 3px; flex: 0 0 auto; height: 12px; width: 12px; }
.hp-price-design-v2 .hp-cost-breakdown .is-spot { background: #147a62; }
.hp-price-design-v2 .hp-cost-breakdown .is-margin { background: #6c817d; }
.hp-price-design-v2 .hp-cost-breakdown span { color: #d7d9ec; flex: 1; }
.hp-price-design-v2 .hp-cost-breakdown strong { color: #fff; }
.hp-price-design-v2 .hp-method {
    background: #fff;
    border: 1px solid #dfe2ea;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(27, 27, 66, .06);
    display: block;
    margin: 0 0 1rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}
.hp-price-design-v2 .hp-method h2 { color: #1c2e2c; font-size: 1.35rem; margin: 0 0 .75rem; }
.hp-price-design-v2 .hp-method ul { color: #414a5e; display: grid; gap: .4rem; margin: 0; padding-left: 1.2rem; }
.hp-price-design-v2 .hp-cta {
    background: #1b1b42;
    border-radius: 16px;
    color: #fff;
    display: grid;
    gap: 1rem;
    margin: 0 0 2.5rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    position: relative;
}
.hp-price-design-v2 .hp-cta .hp-eyebrow { color: #bfeede; }
.hp-price-design-v2 .hp-cta h2 { color: #fff !important; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .6rem; }
.hp-price-design-v2 .hp-cta p { color: #d7d9ec; margin: 0 0 .4rem; max-width: 60ch; }
.hp-price-design-v2 .hp-cta .hp-disclosure { color: #9fa2c4; font-size: .82rem; }
.hp-price-design-v2 .hp-cta .hp-button { justify-self: start; min-height: 52px; padding-inline: 1.6rem; }

/* Editorial follows the same Claude Design canvas without duplicating it in the shortcode. */
.hp-electricity-price-editorial {
    background: #f5f7fb;
    box-shadow: 0 0 0 100vmax #f5f7fb;
    clip-path: inset(0 -100vmax);
}
.hp-electricity-price-editorial > :not(.hp-electricity-price) { color: #293a38; margin-inline: auto; max-width: 1100px; }
.hp-electricity-price-editorial > :not(.hp-electricity-price) h2,
.hp-electricity-price-editorial > :not(.hp-electricity-price) h3 { color: #1c2e2c; font-family: "HPNeueKabel", sans-serif; font-weight: 600; }
.hp-electricity-price-editorial__header > p:first-child { color: #147a62; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hp-electricity-price-editorial__header h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.hp-electricity-price-editorial__lead { color: #414a5e; font-size: 1.1rem; }
.hp-electricity-price-editorial details { background: #fff; border: 1px solid #e6ebe9; border-radius: 10px; margin-bottom: .5rem; overflow: hidden; }
.hp-electricity-price-editorial details > summary { color: #1c2e2c; font-family: "HPNeueKabel", sans-serif; font-weight: 600; min-height: 56px; padding: 1rem 1.1rem; }
.hp-electricity-price-editorial details > p { color: #414a5e; padding: 0 1.1rem 1.1rem; }

@media (max-width: 47.999rem) {
    .hp-electricity-price.hp-price-design-v2 { padding-inline: 1rem; }
    .hp-price-design-v2 .hp-hero { grid-template-columns: 1fr; }
    .hp-price-design-v2 .hp-hero-actions { flex-wrap: nowrap; }
    .hp-price-design-v2 .hp-hero-actions .hp-button { flex: 1 1 0; font-size: .875rem; padding-inline: .5rem; white-space: nowrap; }
    .hp-price-design-v2 .hp-current-price strong { font-size: clamp(3rem, 16vw, 4.25rem); }
    .hp-price-design-v2 .hp-chart { padding: 1rem; }
    .hp-price-design-v2 .hp-chart-header { align-items: stretch; }
    .hp-price-design-v2 .hp-view-controls { width: 100%; }
    .hp-price-design-v2 .hp-view-controls button { flex: 1; }
    .hp-price-design-v2 .hp-chart-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-price-design-v2 .hp-chart-y-axis,
    .hp-price-design-v2 .hp-chart-viewport { height: min(250px, 62vw); }
    .hp-price-design-v2 .hp-chart-time { margin-left: 3.1rem; }
    .hp-price-design-v2 .hp-window-list li { align-items: start; grid-template-columns: 1fr auto; }
    .hp-price-design-v2 .hp-window-list li span { grid-column: 1 / -1; }
    .hp-price-design-v2 .hp-price-table-wrap summary { padding-inline: 1rem; }
    .hp-price-design-v2 .hp-calculator-grid { grid-template-columns: 1fr; }
}
@media (max-width: 22.999rem) {
    .hp-price-design-v2 .hp-hero-actions { flex-direction: column; }
    .hp-price-design-v2 .hp-hero-actions .hp-button { width: 100%; }
}
@media (max-width: 25rem) {
    .hp-price-design-v2 .hp-chart-metrics { grid-template-columns: 1fr; }
    .hp-price-design-v2 .hp-chart-metrics strong { white-space: normal; }
    .hp-price-design-v2 .hp-current-summary { display: grid; }
    .hp-price-design-v2 .hp-source-card dl div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-price-design-v2 .hp-status-icon { animation: none; }
    .hp-price-design-v2 .hp-chart-bar { transition: none; }
}
@media (forced-colors: active) {
    .hp-price-design-v2 .hp-pulse,
    .hp-price-design-v2 .hp-chart,
    .hp-price-design-v2 .hp-side-card,
    .hp-price-design-v2 .hp-calculator,
    .hp-price-design-v2 .hp-calculator-result,
    .hp-price-design-v2 .hp-method,
    .hp-price-design-v2 .hp-cta { border: 2px solid CanvasText; }
}

/* History hub and year views: a calm, data-first extension of the Helppohinta brand. */
.hp-history-tool {
    --hp-history-soft-teal: #e8f3ef;
    --hp-history-soft-navy: #f1f3f9;
    --hp-history-warm: #fff4e5;
    --hp-history-rule: #d7e2de;
    width: 100%;
}
.hp-history-tool h1,
.hp-history-tool h2,
.hp-history-tool h3,
.hp-history-tool strong { text-wrap: balance; }
.hp-history-hero {
    align-items: stretch;
    display: grid;
    gap: clamp(1rem, 3vw, 2.25rem);
    margin-bottom: clamp(2rem, 5vw, 4rem);
}
.hp-history-hero__copy {
    align-content: center;
    display: grid;
    min-height: clamp(18rem, 36vw, 24rem);
    padding-block: clamp(1rem, 3vw, 2.5rem);
}
.hp-history-hero__copy .hp-lead { color: #3f514e; font-size: clamp(1.125rem, 2vw, 1.35rem); line-height: 1.55; }
.hp-history-hero__copy .hp-utility-heading { font-size: clamp(2.65rem, 7vw, 5.25rem); margin-bottom: var(--hp-6); max-width: 11ch; }
.hp-history-trust {
    border-top: 1px solid var(--hp-history-rule);
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(1.25rem, 4vw, 2.5rem);
    padding-top: 1.15rem;
}
.hp-history-trust span { color: var(--hp-muted); display: grid; font-size: .8125rem; line-height: 1.3; }
.hp-history-trust strong { color: var(--hp-teal-dark); font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hp-history-answer {
    align-content: center;
    background: var(--hp-navy);
    border-radius: clamp(1rem, 2vw, 1.5rem);
    box-shadow: 0 24px 60px rgba(27, 27, 66, .17);
    color: var(--hp-white);
    display: grid;
    min-height: 20rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
}
.hp-history-answer::before {
    background: linear-gradient(90deg, var(--hp-teal) 0 72%, var(--hp-orange) 72%);
    content: "";
    height: 6px;
    inset: 0 0 auto;
    position: absolute;
}
.hp-history-answer .hp-eyebrow { color: #b9e5d9; }
.hp-electricity-price .hp-history-answer h2 { color: var(--hp-white) !important; font-size: clamp(1.65rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.hp-history-answer p:not(.hp-eyebrow) { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; }
.hp-history-answer small { color: #d9dbea; line-height: 1.45; }

.hp-history-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.hp-history-metrics article {
    background: var(--hp-white);
    border: 1px solid var(--hp-history-rule);
    border-radius: 14px;
    display: grid;
    min-height: 9.75rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    position: relative;
}
.hp-history-metrics article::before {
    background: var(--hp-teal);
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 1.5rem;
    position: absolute;
    top: 0;
    width: 2rem;
}
.hp-history-metrics span { color: var(--hp-muted); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hp-history-metrics strong { align-self: center; color: var(--hp-navy); font-size: clamp(1.55rem, 3vw, 2.1rem); font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.hp-history-metrics small { align-self: end; color: var(--hp-muted); font-size: .8125rem; line-height: 1.35; }

.hp-history-tool .hp-card {
    border-color: var(--hp-history-rule);
    border-radius: clamp(.875rem, 2vw, 1.25rem);
    box-shadow: 0 12px 34px rgba(27, 27, 66, .055);
    margin-block: clamp(1.25rem, 3vw, 2.25rem);
    padding: clamp(1rem, 3vw, 2rem);
}
.hp-history-heading { align-items: center; }
.hp-history-heading h2 { margin-bottom: 0; }
.hp-button-ghost {
    background: var(--hp-white);
    border-color: var(--hp-history-rule);
    color: var(--hp-blue) !important;
}
.hp-button-ghost:hover { border-color: var(--hp-blue); opacity: 1; }
.hp-history-explorer {
    background: linear-gradient(180deg, #fff 0, #fff 58%, #fbfcfc 100%);
    overflow: hidden;
}
.hp-history-presets,
.hp-history-views {
    display: flex;
    gap: .5rem;
    max-width: 100%;
    overflow-x: auto;
    padding: .25rem;
    scrollbar-width: thin;
}
.hp-history-presets { border-bottom: 1px solid var(--hp-history-rule); margin-top: 1.5rem; padding-bottom: 1rem; }
.hp-history-presets button,
.hp-history-views button {
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    min-height: 44px;
    padding: .625rem 1rem;
    white-space: nowrap;
}
.hp-history-presets button {
    background: var(--hp-history-soft-navy);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--hp-navy);
}
.hp-history-presets button:hover { border-color: #aeb8d2; }
.hp-history-presets button.is-active,
.hp-history-presets button[aria-pressed="true"] { background: var(--hp-navy); color: var(--hp-white); }
.hp-history-views {
    background: var(--hp-navy);
    border-radius: 12px;
    margin-top: 1rem;
    padding: .35rem;
}
.hp-history-views button { background: transparent; border-radius: 8px; color: #e6e7ef; }
.hp-history-views button:hover { background: rgba(255, 255, 255, .09); }
.hp-history-views button.is-active,
.hp-history-views button[aria-pressed="true"] { background: var(--hp-white); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); color: var(--hp-navy); }
.hp-history-controls {
    align-items: end;
    background: var(--hp-history-soft-navy);
    border: 1px solid #e3e6ef;
    border-radius: 12px;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding: 1rem;
}
.hp-history-controls label { color: var(--hp-navy); display: grid; font-size: .75rem; font-weight: 700; gap: .3rem; letter-spacing: .025em; }
.hp-history-controls input,
.hp-history-controls select {
    appearance: none;
    background-color: var(--hp-white);
    border: 1px solid #adb5ca;
    border-radius: 8px;
    color: var(--hp-ink);
    font: inherit;
    font-size: 1rem;
    min-height: 48px;
    padding: .65rem .75rem;
    width: 100%;
}
.hp-history-controls select {
    background-image: linear-gradient(45deg, transparent 50%, var(--hp-navy) 50%), linear-gradient(135deg, var(--hp-navy) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 2.25rem;
}
.hp-history-controls .hp-button { width: 100%; }
.hp-history-status {
    align-items: center;
    color: var(--hp-muted);
    display: flex;
    font-size: .8125rem;
    gap: .55rem;
    margin: 1rem 0 .25rem;
}
.hp-history-status::before { background: var(--hp-teal); border-radius: 50%; content: ""; flex: 0 0 auto; height: .5rem; width: .5rem; }
.hp-echart {
    background: #fbfcfc;
    border: 1px solid var(--hp-history-rule);
    border-radius: 14px;
    height: clamp(22rem, 45vw, 34rem);
    margin-top: .75rem;
    overflow: hidden;
    width: 100%;
}
.hp-echart:focus-visible { box-shadow: 0 0 0 5px rgba(20, 122, 98, .2); outline: 3px solid var(--hp-teal-dark); outline-offset: 2px; }

.hp-history-extremes {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin-top: 1.25rem;
}
.hp-history-extremes article {
    background: var(--hp-history-soft-teal);
    border-left: 4px solid var(--hp-teal);
    border-radius: 8px;
    display: grid;
    gap: .3rem;
    min-height: 8.5rem;
    padding: 1rem;
}
.hp-history-extremes article:nth-child(even) { background: var(--hp-history-warm); border-left-color: var(--hp-orange); }
.hp-history-extremes span { color: var(--hp-muted); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.hp-history-extremes strong { align-self: end; color: var(--hp-heading); font-size: 1.35rem; }
.hp-history-extremes small { color: var(--hp-muted); font-size: .9rem; }
.hp-data-badge {
    background: var(--hp-history-soft-teal);
    border: 1px solid #c4ddd5;
    border-radius: 999px;
    color: var(--hp-teal-dark);
    font-size: .75rem;
    font-weight: 700;
    padding: .45rem .75rem;
    white-space: nowrap;
}
.hp-history-data-table { font-variant-numeric: tabular-nums; }
.hp-history-data-table caption { background: #fbfcfc; border-bottom: 1px solid var(--hp-line); font-size: .8125rem; line-height: 1.45; }
.hp-history-data-table th,
.hp-history-data-table td { padding: .8rem .9rem; white-space: nowrap; }
.hp-history-data-table tbody th { color: var(--hp-navy); font-weight: 700; }
.hp-history-data-table tbody tr { transition: background-color 120ms ease; }
.hp-history-data-table tbody tr:hover { background: var(--hp-history-soft-teal); }
.hp-history-month-details > summary {
    align-items: center;
    color: var(--hp-blue);
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 0;
}
.hp-history-month-details > summary::marker { color: var(--hp-teal); }
.hp-history-years h2 { margin-bottom: 1rem; }
.hp-history-years > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.hp-history-years a,
.hp-history-adjacent a {
    align-items: center;
    background: var(--hp-history-soft-navy);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--hp-blue);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    min-width: 4rem;
    padding: .55rem .8rem;
    text-decoration: none;
}
.hp-history-years a:hover,
.hp-history-adjacent a:hover { background: var(--hp-white); border-color: var(--hp-blue); }
.hp-history-adjacent { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0 2.5rem; }
.hp-history-adjacent a:first-child { justify-self: start; }
.hp-history-adjacent a:last-child { justify-self: end; }
.hp-history-adjacent a[href$="/porssisahkon-keskihinta/"] { grid-column: 2; justify-self: center; }
.hp-history-method { border-top: 4px solid var(--hp-teal); }
.hp-history-method > div p:last-child { color: var(--hp-muted); font-size: .875rem; }
.hp-history-method ul { color: #42534f; }
.hp-history-method a { font-weight: 700; }

@media (min-width: 48rem) {
    .hp-history-hero { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr); }
    .hp-history-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(9rem, .9fr) minmax(10rem, 1fr); }
    .hp-history-controls .hp-button { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
    .hp-history-controls { grid-template-columns: 1fr 1fr .9fr 1.05fr auto; }
    .hp-history-controls .hp-button { grid-column: auto; min-width: 7.5rem; }
    .hp-history-tool .hp-table-scroll { border: 1px solid var(--hp-history-rule); border-radius: 10px; margin-top: 1.25rem; }
}
@media (max-width: 47.999rem) {
    .hp-history-hero__copy { min-height: 0; padding-top: .5rem; }
    .hp-history-answer { min-height: 16rem; }
    .hp-history-heading { align-items: stretch; }
    .hp-history-heading .hp-button { width: 100%; }
    .hp-history-presets,
    .hp-history-views { margin-inline: -1rem; padding-inline: 1rem; }
    .hp-history-views { border-radius: 0; }
    .hp-echart { border-radius: 10px; height: 25rem; }
    .hp-history-adjacent { grid-template-columns: 1fr 1fr; }
    .hp-history-adjacent a { width: 100%; }
    .hp-history-adjacent a:first-child,
    .hp-history-adjacent a:last-child { justify-self: stretch; }
    .hp-history-adjacent a[href$="/porssisahkon-keskihinta/"] { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
}
@media (max-width: 28rem) {
    .hp-history-trust { grid-template-columns: 1fr; }
    .hp-history-trust span { grid-template-columns: 5rem 1fr; }
    .hp-history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-history-metrics article { min-height: 8.5rem; padding: .9rem; }
    .hp-history-metrics article::before { left: .9rem; }
    .hp-history-metrics strong { font-size: 1.25rem; }
    .hp-history-controls { grid-template-columns: 1fr; }
    .hp-history-controls .hp-button { grid-column: auto; }
    .hp-echart { height: 22rem; margin-inline: -.25rem; width: calc(100% + .5rem); }
    .hp-history-adjacent { grid-template-columns: 1fr; }
    .hp-history-adjacent a:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-history-tool .hp-history-data-table tbody tr,
    .hp-history-tool .hp-button { transition: none; }
}
@media (forced-colors: active) {
    .hp-history-answer,
    .hp-history-metrics article,
    .hp-history-explorer,
    .hp-history-extremes article,
    .hp-history-controls,
    .hp-echart { border: 2px solid CanvasText; }
    .hp-history-answer::before,
    .hp-history-metrics article::before,
    .hp-history-status::before { background: CanvasText; }
    .hp-history-presets button,
    .hp-history-views button,
    .hp-history-years a,
    .hp-history-adjacent a { border: 1px solid ButtonText; }
    .hp-history-presets button[aria-pressed="true"],
    .hp-history-views button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* Claude Design ports: full calculator and history views. Keep every rule scoped. */
.hp-electricity-price.hp-calculator-design-v2,
.hp-electricity-price.hp-history-design {
    --hp-port-canvas: #f4f6fa;
    --hp-port-paper: #fff;
    --hp-port-ink: #263a37;
    --hp-port-copy: #53615f;
    --hp-port-navy: #1b1b42;
    --hp-port-teal: #148268;
    --hp-port-teal-soft: #edf7f3;
    --hp-port-violet: #f1effb;
    --hp-port-orange: #de7a0b;
    --hp-port-orange-soft: #fff3e5;
    --hp-port-line: #dce3e8;
    --hp-port-field: #f7f9fb;
    --hp-port-shadow: 0 10px 28px rgba(27, 27, 66, .075);
    color: var(--hp-port-ink);
    font-family: "HPBrandonGrotesque", "Source Sans Pro", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
    line-height: 1.55;
    max-width: 1120px;
    padding: clamp(1rem, 3vw, 2rem);
    width: 100%;
}
.hp-calculator-design-v2 *,
.hp-calculator-design-v2 *::before,
.hp-calculator-design-v2 *::after,
.hp-history-design *,
.hp-history-design *::before,
.hp-history-design *::after { box-sizing: border-box; }
.hp-calculator-design-v2 :where(h1, h2, h3, p, ul, ol, figure, fieldset),
.hp-history-design :where(h1, h2, h3, p, ul, ol, figure) { margin-top: 0; }
.hp-calculator-design-v2 :where(button, input, select, summary),
.hp-history-design :where(button, input, select, summary) { font-family: inherit; }
.hp-calculator-design-v2 :where(input, select, button),
.hp-history-design :where(input, select, button) { font-size: 1rem; }
.hp-calculator-design-v2 :where(a, button, input, select, summary):focus-visible,
.hp-history-design :where(a, button, input, select, summary, [tabindex="0"]):focus-visible {
    box-shadow: 0 0 0 4px rgba(20, 130, 104, .24);
    outline: 3px solid var(--hp-port-teal);
    outline-offset: 2px;
}
.hp-calculator-design-v2 .hp-eyebrow,
.hp-history-design .hp-eyebrow {
    color: var(--hp-port-teal);
    font-family: "HPBrandonGrotesque", sans-serif;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    margin-bottom: .4rem;
    text-transform: uppercase;
}
.hp-calculator-design-v2 .hp-utility-heading,
.hp-history-design .hp-utility-heading {
    color: var(--hp-port-ink);
    font-family: "HPNeueKabel", sans-serif;
    font-size: clamp(2.7rem, 5.5vw, 4.7rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
    margin-bottom: 1.15rem;
    max-width: 14ch;
}
.hp-calculator-design-v2 .hp-lead,
.hp-history-design .hp-lead { color: var(--hp-port-copy); font-size: 1.08rem; line-height: 1.55; }
.hp-calculator-design-v2 .hp-button,
.hp-history-design .hp-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: .65rem 1.15rem;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.hp-calculator-design-v2 .hp-button:hover,
.hp-history-design .hp-button:hover { opacity: 1; transform: translateY(-1px); }
.hp-calculator-design-v2 .hp-button-primary,
.hp-history-design .hp-button-primary { background: var(--hp-port-teal); color: #fff !important; }
.hp-calculator-design-v2 .hp-button-outline,
.hp-calculator-design-v2 .hp-button-ghost,
.hp-history-design .hp-button-ghost { background: transparent; border-color: #bbc4d4; color: var(--hp-port-navy) !important; }

/* Calculator */
.hp-calculator-design-v2 .hp-calculator-hero { margin: 0 0 clamp(1.5rem, 3vw, 2.4rem); max-width: 70ch; }
.hp-calculator-design-v2 .hp-breadcrumbs {
    align-items: center;
    color: #5f6878;
    display: flex;
    font-size: .82rem;
    gap: .35rem;
    margin-bottom: 1.4rem;
}
.hp-calculator-design-v2 .hp-breadcrumbs a { color: var(--hp-blue); text-underline-offset: .15em; }
.hp-calculator-design-v2 .hp-calculator-workspace {
    align-items: start;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .98fr);
    margin-bottom: 1.4rem;
}
.hp-calculator-design-v2 .hp-calculator-inputs,
.hp-calculator-design-v2 .hp-total-card,
.hp-calculator-design-v2 .hp-comparison-card,
.hp-calculator-design-v2 .hp-calculator-method {
    background: var(--hp-port-paper);
    border: 1px solid var(--hp-port-line);
    border-radius: 14px;
    box-shadow: var(--hp-port-shadow);
}
.hp-calculator-design-v2 .hp-calculator-inputs { padding: clamp(1rem, 2.5vw, 1.6rem); }
.hp-calculator-design-v2 .hp-control-section {
    border: 0;
    border-bottom: 1px solid #e8ecef;
    margin: 0;
    min-inline-size: 0;
    padding: 0 0 1.4rem;
}
.hp-calculator-design-v2 .hp-control-section + .hp-control-section { padding-top: 1.35rem; }
.hp-calculator-design-v2 .hp-control-section:last-of-type { border-bottom: 0; }
.hp-calculator-design-v2 .hp-control-section > legend,
.hp-calculator-design-v2 .hp-consumption-section > label {
    color: var(--hp-port-ink);
    float: none;
    font-family: "HPNeueKabel", sans-serif;
    font-size: .98rem;
    font-weight: 600;
    margin: 0 0 .65rem;
    padding: 0;
    width: 100%;
}
.hp-calculator-design-v2 .hp-segmented-control {
    background: #f0f2f7;
    border-radius: 10px;
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: .25rem;
}
.hp-calculator-design-v2 .hp-segmented-control button {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #5d657a;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
    min-height: 46px;
    padding: .4rem;
}
.hp-calculator-design-v2 .hp-segmented-control button[aria-pressed="true"] {
    background: #fff;
    box-shadow: 0 2px 8px rgba(27, 27, 66, .12);
    color: var(--hp-port-navy);
}
.hp-calculator-design-v2 .hp-input-with-unit { position: relative; }
.hp-calculator-design-v2 .hp-input-with-unit span {
    color: #626d6b;
    font-size: .86rem;
    pointer-events: none;
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
}
.hp-calculator-design-v2 .hp-input-with-unit input { padding-right: 4rem; }
.hp-calculator-design-v2 :where(input[type="text"], select) {
    appearance: none;
    background: var(--hp-port-field);
    border: 1px solid #cbd4dc;
    border-radius: 8px;
    color: var(--hp-port-ink);
    min-height: 48px;
    padding: .65rem .8rem;
    width: 100%;
}
.hp-calculator-design-v2 select {
    background-image: linear-gradient(45deg, transparent 50%, #68727d 50%), linear-gradient(135deg, #68727d 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px;
    padding-right: 2.3rem;
}
.hp-calculator-design-v2 .hp-preset-list,
.hp-calculator-design-v2 .hp-inline-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .6rem;
}
.hp-calculator-design-v2 .hp-preset-list button,
.hp-calculator-design-v2 .hp-inline-presets button {
    background: #fff;
    border: 1px solid #d3d9df;
    border-radius: 999px;
    color: #4d5b58;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 700;
    min-height: 38px;
    padding: .45rem .78rem;
}
.hp-calculator-design-v2 .hp-preset-list button[aria-pressed="true"],
.hp-calculator-design-v2 .hp-inline-presets button[aria-pressed="true"],
.hp-calculator-design-v2 .hp-preset-list button:hover,
.hp-calculator-design-v2 .hp-inline-presets button:hover { background: var(--hp-port-teal-soft); border-color: var(--hp-port-teal); color: var(--hp-port-teal); }
.hp-calculator-design-v2 .hp-field-hint,
.hp-calculator-design-v2 .hp-section-intro,
.hp-calculator-design-v2 .hp-data-notice {
    color: #646e6c;
    font-size: .78rem;
    line-height: 1.45;
    margin: .55rem 0 0;
}
.hp-calculator-design-v2 .hp-section-intro { margin: -.3rem 0 .7rem; }
.hp-calculator-design-v2 .hp-data-notice { background: #fff7e9; border-left: 3px solid var(--hp-port-orange); padding: .55rem .7rem; }
.hp-calculator-design-v2 .hp-source-buttons {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: .9rem;
}
.hp-calculator-design-v2 .hp-source-buttons button {
    background: #fff;
    border: 1px solid #d5dce2;
    border-radius: 8px;
    color: var(--hp-port-copy);
    cursor: pointer;
    display: grid;
    min-height: 60px;
    padding: .55rem .6rem;
    text-align: left;
}
.hp-calculator-design-v2 .hp-source-buttons button[aria-pressed="true"] { background: var(--hp-port-teal-soft); border-color: var(--hp-port-teal); box-shadow: inset 0 0 0 1px var(--hp-port-teal); }
.hp-calculator-design-v2 .hp-source-buttons strong { color: var(--hp-port-ink); font-size: .76rem; font-weight: 700; line-height: 1.2; }
.hp-calculator-design-v2 .hp-source-buttons small { color: #616c69; font-size: .69rem; }
.hp-calculator-design-v2 .hp-field-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hp-calculator-design-v2 .hp-field-grid > label,
.hp-calculator-design-v2 .hp-toggle-content > label {
    color: var(--hp-port-ink);
    display: block;
    font-size: .8rem;
    font-weight: 700;
}
.hp-calculator-design-v2 .hp-field-grid input,
.hp-calculator-design-v2 .hp-toggle-content select { margin-top: .35rem; }
.hp-calculator-design-v2 .hp-field-wide { grid-column: 1 / -1; }
.hp-calculator-design-v2 .hp-toggle-heading { margin-bottom: 0 !important; }
.hp-calculator-design-v2 .hp-toggle-heading label { align-items: center; cursor: pointer; display: flex; gap: .65rem; }
.hp-calculator-design-v2 input[type="checkbox"] {
    accent-color: var(--hp-port-teal);
    block-size: 1.15rem;
    flex: 0 0 auto;
    inline-size: 1.15rem;
    margin: 0;
}
.hp-calculator-design-v2 .hp-toggle-content { margin-top: 1rem; }
.hp-calculator-design-v2 [hidden] { display: none !important; }
.hp-calculator-design-v2[data-enhanced="true"] .hp-calculator-submit { display: none; }
.hp-calculator-design-v2 .hp-calculator-submit { margin-top: 1rem; width: 100%; }
.hp-calculator-design-v2 .hp-form-error { color: #922b2b; font-weight: 700; margin: .75rem 0 0; }
.hp-calculator-design-v2 .hp-calculator-results { display: grid; gap: 1rem; position: sticky; top: 1.5rem; }
.hp-calculator-design-v2 .hp-total-card {
    background: var(--hp-port-navy);
    border-color: var(--hp-port-navy);
    color: #fff;
    overflow: hidden;
    padding: clamp(1.2rem, 3vw, 1.75rem);
    position: relative;
}
.hp-calculator-design-v2 .hp-result-label { color: #aeb2ca; font-size: .74rem; font-weight: 700; letter-spacing: .07em; margin: 0; text-transform: uppercase; }
.hp-calculator-design-v2 .hp-total-card output {
    color: #fff;
    display: block;
    font-family: "HPNeueKabel", sans-serif;
    font-size: clamp(3.1rem, 7vw, 4.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1;
    margin: .25rem 0 .55rem;
}
.hp-calculator-design-v2 .hp-effective-price { color: #c8cada; font-size: .86rem; margin-bottom: .35rem; }
.hp-calculator-design-v2 .hp-effective-price strong { color: #fff; }
.hp-calculator-design-v2 .hp-annual-estimate { color: #6dd8b9; font-size: .9rem; margin-bottom: 1rem; }
.hp-calculator-design-v2 .hp-cost-bar {
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    display: flex;
    height: 13px;
    margin: 1rem 0 1.1rem;
    overflow: hidden;
}
.hp-calculator-design-v2 .hp-cost-bar > * { height: 100%; }
.hp-calculator-design-v2 .hp-cost-breakdown { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.hp-calculator-design-v2 .hp-cost-breakdown li { align-items: center; display: flex; gap: .55rem; }
.hp-calculator-design-v2 .hp-cost-breakdown li > i { background: var(--hp-segment-color); border-radius: 2px; flex: 0 0 auto; height: 11px; width: 11px; }
.hp-calculator-design-v2 .hp-cost-breakdown span { color: #d3d5e2; flex: 1; font-size: .86rem; }
.hp-calculator-design-v2 .hp-cost-breakdown strong { color: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; }
.hp-calculator-design-v2 .hp-accent-line,
.hp-calculator-design-v2 .hp-calculator-cta::after,
.hp-history-design .hp-history-answer__accent,
.hp-history-design .hp-history-cta__accent {
    background: linear-gradient(90deg, var(--hp-port-teal) 0 76%, var(--hp-orange) 76%);
    bottom: 0;
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
}
.hp-calculator-design-v2 .hp-comparison-card { padding: clamp(1rem, 2.5vw, 1.4rem); }
.hp-calculator-design-v2 .hp-scenario-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-calculator-design-v2 .hp-scenario-grid article { border: 1px solid #d8dee5; border-radius: 9px; display: grid; gap: .2rem; padding: .9rem; }
.hp-calculator-design-v2 .hp-scenario-grid article:first-child { background: var(--hp-port-teal-soft); border-color: var(--hp-port-teal); }
.hp-calculator-design-v2 .hp-scenario-grid span { color: #64706d; font-size: .76rem; }
.hp-calculator-design-v2 .hp-scenario-grid strong { color: var(--hp-port-ink); font-family: "HPNeueKabel", sans-serif; font-size: 1.65rem; font-weight: 600; }
.hp-calculator-design-v2 .hp-scenario-grid small { color: #626c69; font-size: .76rem; }
.hp-calculator-design-v2 .hp-comparison-verdict { background: #f4f6f9; border-radius: 8px; color: var(--hp-port-ink); display: flex; gap: .5rem; margin: .7rem 0; padding: .75rem; }
.hp-calculator-design-v2 .hp-comparison-verdict > span { color: var(--hp-port-teal); }
.hp-calculator-design-v2 .hp-calculator-disclaimer { color: #646d6b; font-size: .76rem; margin: 0; padding: .15rem .35rem; }
.hp-calculator-design-v2 .hp-calculator-method { display: block; margin: 0 0 1rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.hp-calculator-design-v2 .hp-calculator-method h2 { color: var(--hp-port-ink); font-size: 1.45rem; margin: 0 0 .75rem; }
.hp-calculator-design-v2 .hp-calculator-method ul { color: var(--hp-port-copy); display: grid; gap: .4rem; margin: 0; padding-left: 1.15rem; }
.hp-calculator-design-v2 .hp-calculator-cta,
.hp-history-design .hp-history-cta {
    background: var(--hp-port-navy);
    border-radius: 14px;
    color: #fff;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 0 2.2rem;
    overflow: hidden;
    padding: clamp(1.3rem, 3vw, 2rem);
    position: relative;
}
.hp-calculator-design-v2 .hp-calculator-cta .hp-eyebrow,
.hp-history-design .hp-history-cta .hp-eyebrow { color: #a9ddce; }
.hp-calculator-design-v2 .hp-calculator-cta h2,
.hp-history-design .hp-history-cta h2 { color: #fff !important; font-size: clamp(1.55rem, 3vw, 2.1rem); margin: 0 0 .55rem; }
.hp-calculator-design-v2 .hp-calculator-cta p,
.hp-history-design .hp-history-cta p { color: #cfd1df; margin: 0; max-width: 60ch; }
.hp-calculator-design-v2 .hp-cta-actions,
.hp-history-design .hp-history-cta__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; }
.hp-calculator-design-v2 .hp-calculator-cta .hp-button-outline,
.hp-history-design .hp-history-cta .hp-button-ghost { border-color: #787b9c; color: #fff !important; }
.hp-calculator-design-v2 .hp-calculator-editorial,
.hp-history-design .hp-history-editorial { color: var(--hp-port-copy); margin: 0 auto; max-width: 88ch; padding: 0 0 1rem; }
.hp-calculator-design-v2 .hp-calculator-editorial h2,
.hp-history-design .hp-history-editorial h2 { color: var(--hp-port-ink); font-size: clamp(1.55rem, 3vw, 2rem); margin: 1.8rem 0 .75rem; }
.hp-calculator-design-v2 .hp-calculator-editorial h3 { color: var(--hp-port-ink); font-size: 1.4rem; margin: 1.6rem 0 .65rem; }
.hp-calculator-design-v2 .hp-calculator-editorial a,
.hp-history-design .hp-history-editorial a { color: var(--hp-blue); font-weight: 700; text-underline-offset: .16em; }
.hp-calculator-design-v2 .hp-faq-list details,
.hp-history-design .hp-history-faq details { background: #fff; border: 1px solid #e0e5ea; border-radius: 8px; margin-bottom: .55rem; overflow: hidden; }
.hp-calculator-design-v2 .hp-faq-list summary,
.hp-history-design .hp-history-faq summary { color: var(--hp-port-ink); cursor: pointer; font-weight: 600; list-style: none; min-height: 52px; padding: .9rem 2.8rem .9rem 1rem; position: relative; }
.hp-calculator-design-v2 .hp-faq-list summary::after,
.hp-history-design .hp-history-faq summary::after { color: var(--hp-port-teal); content: "+"; font-size: 1.2rem; position: absolute; right: 1rem; top: .72rem; }
.hp-calculator-design-v2 .hp-faq-list details[open] summary::after,
.hp-history-design .hp-history-faq details[open] summary::after { content: "–"; }
.hp-calculator-design-v2 .hp-faq-list summary::-webkit-details-marker,
.hp-history-design .hp-history-faq summary::-webkit-details-marker { display: none; }
.hp-calculator-design-v2 .hp-faq-list details p,
.hp-history-design .hp-history-faq details p { color: var(--hp-port-copy); margin: 0; padding: 0 1rem 1rem; }

/* History hub and annual pages */
.hp-electricity-price.hp-history-design { max-width: 1140px; }
.hp-history-design .hp-history-shell { width: 100%; }
.hp-history-design .hp-history-hero {
    align-items: stretch;
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    margin: 0 0 clamp(1.4rem, 3vw, 2rem);
}
.hp-history-design .hp-history-hero__copy { align-content: center; display: grid; min-height: 0; padding: clamp(.5rem, 2vw, 1.4rem) 0; }
.hp-history-design .hp-history-breadcrumb { align-items: center; color: #5f6878; display: flex; font-size: .82rem; gap: .35rem; margin-bottom: 1.2rem; }
.hp-history-design .hp-history-breadcrumb a { color: var(--hp-blue); }
.hp-history-design .hp-history-hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .45rem; }
.hp-history-design .hp-history-answer {
    align-content: start;
    background: var(--hp-port-navy);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(27, 27, 66, .16);
    color: #fff;
    display: grid;
    min-height: 19rem;
    overflow: hidden;
    padding: clamp(1.35rem, 3vw, 2rem);
    position: relative;
}
.hp-history-design .hp-history-answer h2 { color: #dfe1ec !important; font-family: "HPBrandonGrotesque", sans-serif; font-size: .86rem; font-weight: 400; letter-spacing: 0; margin: 0 0 .15rem; }
.hp-history-design .hp-history-answer__price {
    color: #fff;
    font-family: "HPNeueKabel", sans-serif;
    font-size: clamp(3.3rem, 7vw, 4.8rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.045em;
    line-height: 1;
    margin: 0 0 .55rem;
}
.hp-history-design .hp-history-answer__context { color: #bec1d4; font-size: .82rem; margin: 0; }
.hp-history-design .hp-history-answer__statement { color: #d8dae5; font-size: .84rem !important; margin: .55rem 0 0; }
.hp-history-design .hp-history-answer__facts {
    border-top: 1px solid #48486d;
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
    padding-top: 1rem;
}
.hp-history-design .hp-history-answer__facts div { display: grid; }
.hp-history-design .hp-history-answer__facts span { color: #aeb2c9; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.hp-history-design .hp-history-answer__facts strong { color: #fff; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hp-history-design .hp-history-answer__facts small { color: #bfc2d3; font-size: .72rem; }
.hp-history-design .hp-history-insights {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}
.hp-history-design .hp-history-insight {
    background: #fff;
    border: 1px solid var(--hp-port-line);
    border-radius: 12px;
    box-shadow: var(--hp-port-shadow);
    display: grid;
    min-height: 9rem;
    padding: 1rem;
}
.hp-history-design .hp-history-insight > span { color: var(--hp-port-teal); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hp-history-design .hp-history-insight > strong { align-self: center; color: var(--hp-port-ink); font-family: "HPNeueKabel", sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 1.05; }
.hp-history-design .hp-history-insight > small { align-self: end; color: #626d6a; font-size: .78rem; line-height: 1.35; }
.hp-history-design .hp-history-level-gauge { display: flex; gap: .2rem; margin: .45rem 0 .2rem; }
.hp-history-design .hp-history-level-gauge i { background: #dfe5e3; border-radius: 999px; flex: 1; height: 7px; }
.hp-history-design .hp-history-insight--low .hp-history-level-gauge i:first-child,
.hp-history-design .hp-history-insight--normal .hp-history-level-gauge i:nth-child(-n+2),
.hp-history-design .hp-history-insight--high .hp-history-level-gauge i { background: var(--hp-port-teal); }
.hp-history-design .hp-history-level-labels { color: #626d6a; display: flex; font-size: .64rem; justify-content: space-between; }
.hp-history-design .hp-card {
    background: #fff;
    border: 1px solid var(--hp-port-line);
    border-radius: 13px;
    box-shadow: var(--hp-port-shadow);
    margin: 0 0 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}
.hp-history-design .hp-history-explorer { overflow: hidden; }
.hp-history-design .hp-history-chart-heading,
.hp-history-design .hp-history-table-card__heading {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}
.hp-history-design .hp-history-chart-heading h2,
.hp-history-design .hp-history-table-card__heading h2 { color: var(--hp-port-ink); font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 0; }
.hp-history-design .hp-history-chart-heading small,
.hp-history-design .hp-history-table-card__heading > span { color: #626d6a; font-size: .78rem; }
.hp-history-design .hp-history-segmented {
    background: #f0f2f7;
    border-radius: 999px;
    display: flex;
    flex: 0 0 auto;
    gap: .2rem;
    padding: .25rem;
}
.hp-history-design .hp-history-segmented button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #5f677b;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    min-height: 40px;
    padding: .45rem 1rem;
}
.hp-history-design .hp-history-segmented button.is-active,
.hp-history-design .hp-history-segmented button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 7px rgba(27, 27, 66, .12); color: var(--hp-port-navy); }
.hp-history-design .hp-history-metrics {
    border: 1px solid #e1e5ea;
    border-radius: 9px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1rem 0;
    overflow: hidden;
}
.hp-history-design .hp-history-metric {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    min-height: 6.3rem;
    padding: .8rem 1rem;
}
.hp-history-design .hp-history-metric + .hp-history-metric { border-left: 1px solid #e1e5ea; }
.hp-history-design .hp-history-metric--violet { background: var(--hp-port-violet); }
.hp-history-design .hp-history-metric--orange { background: var(--hp-port-orange-soft); }
.hp-history-design .hp-history-metric--green { background: var(--hp-port-teal-soft); }
.hp-history-design .hp-history-metric span { color: #596460; font-size: .68rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.hp-history-design .hp-history-metric strong { align-self: center; color: var(--hp-port-ink); font-family: "HPNeueKabel", sans-serif; font-size: 1.45rem; font-weight: 600; line-height: 1.05; }
.hp-history-design .hp-history-metric small { align-self: end; color: #5f6966; font-size: .7rem; }
.hp-history-design .hp-history-presets {
    border: 0;
    display: flex;
    gap: .45rem;
    margin: 0 0 .65rem;
    overflow-x: auto;
    padding: 0;
}
.hp-history-design .hp-history-presets button {
    background: #fff;
    border: 1px solid #d4dbe1;
    border-radius: 999px;
    color: #5e6966;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 700;
    min-height: 36px;
    padding: .35rem .75rem;
}
.hp-history-design .hp-history-presets button.is-active,
.hp-history-design .hp-history-presets button[aria-pressed="true"] { background: var(--hp-port-teal-soft); border-color: var(--hp-port-teal); color: #0d6b55; }
.hp-history-design .hp-history-chart-stage { position: relative; }
.hp-history-design .hp-echart {
    background: #fbfcfc;
    border: 0;
    border-radius: 0;
    height: clamp(23rem, 43vw, 31rem);
    margin: 0;
    overflow: hidden;
    width: 100%;
}
.hp-history-design .hp-history-legend { align-items: center; display: flex; flex-wrap: wrap; gap: .9rem; list-style: none; margin: .65rem 0 .35rem; padding: 0; }
.hp-history-design .hp-history-legend li { align-items: center; color: #687270; display: flex; font-size: .74rem; gap: .4rem; }
.hp-history-design .hp-history-legend__line { background: var(--hp-port-teal); height: 2px; width: 18px; }
.hp-history-design .hp-history-legend__average { border-top: 2px dashed var(--hp-port-orange); height: 0; width: 18px; }
.hp-history-design .hp-history-status { color: #626d6a; display: block; font-size: .72rem; margin: .3rem 0 .55rem; }
.hp-history-design .hp-history-status::before { display: none; }
.hp-history-design .hp-history-views {
    background: #f2f4f7;
    border: 0;
    border-radius: 8px;
    display: flex;
    gap: .2rem;
    margin: .6rem 0;
    max-width: 100%;
    overflow-x: auto;
    padding: .25rem;
}
.hp-history-design .hp-history-views button {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #626c69;
    cursor: pointer;
    flex: 1 0 auto;
    font-size: .75rem;
    font-weight: 700;
    min-height: 38px;
    padding: .4rem .65rem;
}
.hp-history-design .hp-history-views button.is-active,
.hp-history-design .hp-history-views button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 5px rgba(27, 27, 66, .1); color: var(--hp-port-navy); }
.hp-history-design .hp-history-advanced { border-top: 1px solid #e4e8eb; margin-top: .65rem; }
.hp-history-design .hp-history-advanced > summary { color: var(--hp-blue); cursor: pointer; font-size: .78rem; font-weight: 700; min-height: 44px; padding: .75rem 0; }
.hp-history-design .hp-history-controls {
    align-items: end;
    background: #f5f7fa;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 .75rem;
    padding: .8rem;
}
.hp-history-design .hp-history-controls label { color: #596460; display: grid; font-size: .72rem; font-weight: 700; gap: .25rem; }
.hp-history-design .hp-history-controls input,
.hp-history-design .hp-history-controls select { appearance: none; background: #fff; border: 1px solid #cbd3da; border-radius: 7px; color: var(--hp-port-ink); min-height: 44px; padding: .55rem .65rem; width: 100%; }
.hp-history-design .hp-history-controls .hp-button { width: 100%; }
.hp-history-design .hp-history-chart-meta {
    border-top: 1px solid #e6e9ec;
    color: #626d6a;
    display: flex;
    flex-wrap: wrap;
    font-size: .7rem;
    gap: .35rem 1.2rem;
    margin-top: .65rem;
    padding-top: .75rem;
}
.hp-history-design .hp-history-chart-meta a { color: var(--hp-blue); margin-left: auto; }
.hp-history-design .hp-history-extremes {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 1rem;
}
.hp-history-design .hp-history-extreme {
    background: #fff;
    border: 1px solid var(--hp-port-line);
    border-left: 1px solid var(--hp-port-line);
    border-radius: 11px;
    box-shadow: var(--hp-port-shadow);
    display: grid;
    gap: .25rem;
    min-height: 7.5rem;
    padding: 1rem;
    position: relative;
}
.hp-history-design .hp-history-extreme::before { background: var(--hp-port-teal); border-radius: 999px; content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; }
.hp-history-design .hp-history-extreme--orange::before { background: var(--hp-port-orange); }
.hp-history-design .hp-history-extreme span { color: #68726f; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hp-history-design .hp-history-extreme strong { align-self: center; color: var(--hp-port-ink); font-family: "HPNeueKabel", sans-serif; font-size: 1.45rem; font-weight: 500; }
.hp-history-design .hp-history-extreme small { color: var(--hp-port-teal); font-size: .78rem; font-weight: 700; }
.hp-history-design .hp-history-extreme--orange small { color: #a34f00; }
.hp-history-design .hp-history-table-card { padding: 0; overflow: hidden; }
.hp-history-design .hp-history-table-card__heading { padding: 1rem 1.2rem; }
.hp-history-design .hp-table-scroll { border: 0; border-radius: 0; margin: 0; max-width: 100%; overflow: auto; }
.hp-history-design .hp-history-data-table { border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; margin: 0; min-width: 42rem; width: 100%; }
.hp-history-design .hp-history-data-table caption { background: #fff; border-bottom: 1px solid #e3e7ea; color: #626d6a; font-size: .7rem; padding: .65rem 1.2rem; text-align: left; }
.hp-history-design .hp-history-data-table th,
.hp-history-design .hp-history-data-table td { border: 0; border-bottom: 1px solid #e8ebee; padding: .65rem 1rem; text-align: left; white-space: nowrap; }
.hp-history-design .hp-history-data-table thead th { background: #f2f4f8; color: #586271; font-size: .68rem; letter-spacing: .025em; }
.hp-history-design .hp-history-data-table tbody th { color: var(--hp-port-ink); font-weight: 700; }
.hp-history-design .hp-history-data-table tbody tr:hover { background: #f6faf8; }
.hp-history-design .hp-history-data-table td strong { color: var(--hp-port-ink); }
.hp-history-design .hp-history-row--orange { background: var(--hp-port-orange-soft); }
.hp-history-design .hp-history-row--green { background: var(--hp-port-teal-soft); }
.hp-history-design .hp-history-comparison { align-items: center; display: flex; gap: .5rem; min-width: 11rem; }
.hp-history-design .hp-history-comparison i { background: #758b84; border-radius: 999px; display: block; height: 6px; max-width: 8rem; width: var(--hp-history-bar); }
.hp-history-design .hp-history-row--orange .hp-history-comparison i { background: var(--hp-port-orange); }
.hp-history-design .hp-history-row--green .hp-history-comparison i { background: var(--hp-port-teal); }
.hp-history-design .hp-history-comparison small { color: #5f6966; font-size: .66rem; }
.hp-history-design .hp-history-month-archive details { margin: 0; }
.hp-history-design .hp-history-month-archive summary {
    align-items: center;
    color: var(--hp-port-ink);
    cursor: pointer;
    display: flex;
    font-weight: 700;
    justify-content: space-between;
    list-style: none;
    min-height: 58px;
    padding: .8rem 1.2rem;
}
.hp-history-design .hp-history-month-archive summary small { color: #626d6a; font-weight: 400; }
.hp-history-design .hp-history-month-archive summary::-webkit-details-marker { display: none; }
.hp-history-design .hp-history-years h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.hp-history-design .hp-history-years > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.hp-history-design .hp-history-years a,
.hp-history-design .hp-history-adjacent a { background: #f1f3f8; border: 1px solid transparent; border-radius: 7px; color: var(--hp-blue); min-height: 42px; padding: .45rem .75rem; }
.hp-history-design .hp-history-method {
    background: #fff;
    border: 1px solid var(--hp-port-line);
    border-top: 1px solid var(--hp-port-line);
    border-radius: 12px;
    box-shadow: var(--hp-port-shadow);
    display: block;
    margin: 0 0 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}
.hp-history-design .hp-history-method h2 { color: var(--hp-port-ink); font-size: 1.45rem; margin: 0 0 .6rem; }
.hp-history-design .hp-history-method__status { color: #626d6a; font-size: .75rem; margin: 0 0 .5rem; }
.hp-history-design .hp-history-method ul { color: var(--hp-port-copy); display: grid; gap: .35rem; margin: 0; padding-left: 1.15rem; }
.hp-history-design .hp-history-adjacent { margin: .3rem 0 1rem; }
.hp-history-design .hp-history-analysis,
.hp-history-design .hp-history-context { margin: 0 0 1rem; }
.hp-history-design .hp-history-analysis__heading,
.hp-history-design .hp-history-context__heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.hp-history-design .hp-history-analysis__heading h2,
.hp-history-design .hp-history-context__heading h2 { margin-bottom: .65rem; }
.hp-history-design .hp-history-analysis__lead,
.hp-history-design .hp-history-context__summary { color: var(--hp-port-copy); font-size: 1.08rem; line-height: 1.65; max-width: 75ch; }
.hp-history-design .hp-history-badge { background: var(--hp-port-orange-soft); border: 1px solid #edc38e; border-radius: 999px; color: #874500; flex: 0 0 auto; font-size: .72rem; font-weight: 700; padding: .35rem .7rem; }
.hp-history-design .hp-history-stat-grid { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0 1.35rem; }
.hp-history-design .hp-history-stat-grid--hub { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hp-history-design .hp-history-stat-grid div { background: #f5f7f7; border: 1px solid #e0e6e4; border-radius: 9px; display: grid; gap: .25rem; min-height: 5.5rem; padding: .75rem; }
.hp-history-design .hp-history-stat-grid dt { color: #66716e; font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.hp-history-design .hp-history-stat-grid dd { color: var(--hp-port-ink); font-family: "HPNeueKabel", sans-serif; font-size: 1.2rem; font-weight: 600; margin: 0; }
.hp-history-design .hp-history-analysis__split,
.hp-history-design .hp-history-day-lists { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.hp-history-design .hp-history-analysis h3,
.hp-history-design .hp-history-context h3 { color: var(--hp-port-ink); font-family: "HPNeueKabel", sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0 0 .55rem; }
.hp-history-design .hp-history-compact-table { border-collapse: collapse; font-size: .8rem; width: 100%; }
.hp-history-design .hp-history-compact-table th,
.hp-history-design .hp-history-compact-table td { border-bottom: 1px solid #e2e7e5; padding: .55rem .65rem; text-align: left; }
.hp-history-design .hp-history-compact-table thead th { background: #f2f4f6; color: #5e6966; font-size: .67rem; letter-spacing: .035em; text-transform: uppercase; }
.hp-history-design .hp-history-compact-table tbody th { color: #44504d; font-weight: 600; }
.hp-history-design .hp-history-comparison-list { display: grid; gap: .4rem; margin: 0; }
.hp-history-design .hp-history-comparison-list div { align-items: baseline; border-bottom: 1px solid #e4e8e7; display: flex; gap: 1rem; justify-content: space-between; padding: .45rem 0; }
.hp-history-design .hp-history-comparison-list dd { color: var(--hp-port-ink); font-weight: 700; margin: 0; }
.hp-history-design .hp-history-day-lists section { background: #fafbfb; border: 1px solid #e1e6e4; border-radius: 9px; padding: .85rem; }
.hp-history-design .hp-history-day-lists ol { list-style-position: inside; margin: 0; padding: 0; }
.hp-history-design .hp-history-day-lists li { align-items: baseline; border-top: 1px solid #e5e9e7; display: flex; gap: 1rem; justify-content: space-between; padding: .4rem 0; }
.hp-history-design .hp-history-day-lists li:first-child { border-top: 0; }
.hp-history-design .hp-history-observations { display: grid; gap: .55rem; margin: 1rem 0; padding-left: 1.2rem; }
.hp-history-design .hp-history-season-list { display: grid; gap: .3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-history-design .hp-history-season-list span { align-items: baseline; border-bottom: 1px solid #e4e8e7; display: flex; font-size: .78rem; justify-content: space-between; padding: .3rem 0; }
.hp-history-design .hp-history-context__note { background: #f3f6f5; border-left: 3px solid var(--hp-port-teal); color: #596562; font-size: .82rem; padding: .65rem .8rem; }
.hp-history-design .hp-history-event-list { display: grid; gap: .8rem; margin-top: 1rem; }
.hp-history-design .hp-history-event { border: 1px solid #dde4e1; border-radius: 10px; display: grid; grid-template-columns: 9rem minmax(0, 1fr); overflow: hidden; }
.hp-history-design .hp-history-event__date { background: var(--hp-port-navy); color: #fff; font-size: .75rem; font-weight: 700; padding: 1rem; }
.hp-history-design .hp-history-event__body { padding: 1rem; }
.hp-history-design .hp-history-event__label { color: var(--hp-port-teal); font-size: .68rem; font-weight: 700; letter-spacing: .045em; margin-bottom: .35rem; text-transform: uppercase; }
.hp-history-design .hp-history-event__observation { background: var(--hp-port-teal-soft); border-radius: 8px; margin: .8rem 0; padding: .7rem .8rem; }
.hp-history-design .hp-history-event__observation p,
.hp-history-design .hp-history-event__consumer,
.hp-history-design .hp-history-event__sources { font-size: .82rem; margin-bottom: .55rem; }
.hp-history-design .hp-history-event__sources { color: #5f6966; }
.hp-history-design .hp-history-publication-meta { background: #f5f7f7; border: 1px solid #dfe5e3; border-radius: 10px; display: grid; gap: .5rem 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 1rem; padding: .8rem 1rem; }
.hp-history-design .hp-history-publication-meta div { display: grid; gap: .1rem; }
.hp-history-design .hp-history-publication-meta dt { color: #66716e; font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hp-history-design .hp-history-publication-meta dd { color: var(--hp-port-ink); font-size: .8rem; margin: 0; }

@media (min-width: 64rem) {
    .hp-history-design .hp-history-controls { grid-template-columns: 1fr 1fr .9fr 1fr auto; }
    .hp-history-design .hp-history-controls .hp-button { min-width: 6.5rem; }
}
@media (max-width: 63.999rem) {
    .hp-calculator-design-v2 .hp-calculator-workspace { grid-template-columns: 1fr; }
    .hp-calculator-design-v2 .hp-calculator-results { position: static; }
    .hp-history-design .hp-history-hero { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-answer { min-height: 17rem; }
}
@media (max-width: 47.999rem) {
    .hp-electricity-price.hp-calculator-design-v2,
    .hp-electricity-price.hp-history-design { padding-inline: 1rem; }
    .hp-calculator-design-v2 .hp-source-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-calculator-design-v2 .hp-calculator-cta,
    .hp-history-design .hp-history-cta { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-insights { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-insight { min-height: 7.5rem; }
    .hp-history-design .hp-history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-history-design .hp-history-metric + .hp-history-metric { border-left: 0; }
    .hp-history-design .hp-history-metric:nth-child(even) { border-left: 1px solid #e1e5ea; }
    .hp-history-design .hp-history-metric:nth-child(n+3) { border-top: 1px solid #e1e5ea; }
    .hp-history-design .hp-history-extremes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-history-design .hp-history-chart-heading { align-items: stretch; flex-direction: column; }
    .hp-history-design .hp-history-segmented { align-self: flex-start; }
    .hp-history-design .hp-echart { height: 23rem; }
    .hp-history-design .hp-history-chart-meta a { margin-left: 0; }
    .hp-history-design .hp-history-stat-grid,
    .hp-history-design .hp-history-stat-grid--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 24.375rem) {
    .hp-electricity-price.hp-calculator-design-v2,
    .hp-electricity-price.hp-history-design { padding-inline: .75rem; }
    .hp-calculator-design-v2 .hp-utility-heading,
    .hp-history-design .hp-utility-heading { font-size: clamp(2.45rem, 12vw, 3.25rem); }
    .hp-calculator-design-v2 .hp-source-buttons,
    .hp-calculator-design-v2 .hp-field-grid,
    .hp-calculator-design-v2 .hp-scenario-grid { grid-template-columns: 1fr; }
    .hp-calculator-design-v2 .hp-field-wide { grid-column: auto; }
    .hp-calculator-design-v2 .hp-cta-actions,
    .hp-history-design .hp-history-hero__actions,
    .hp-history-design .hp-history-cta__actions { align-items: stretch; flex-direction: column; }
    .hp-calculator-design-v2 .hp-cta-actions .hp-button,
    .hp-history-design .hp-history-hero__actions .hp-button,
    .hp-history-design .hp-history-cta__actions .hp-button { width: 100%; }
    .hp-history-design .hp-history-answer__facts,
    .hp-history-design .hp-history-insights,
    .hp-history-design .hp-history-metrics,
    .hp-history-design .hp-history-extremes,
    .hp-history-design .hp-history-stat-grid,
    .hp-history-design .hp-history-stat-grid--hub,
    .hp-history-design .hp-history-controls { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-metric:nth-child(n) { border-left: 0; border-top: 1px solid #e1e5ea; }
    .hp-history-design .hp-history-metric:first-child { border-top: 0; }
    .hp-history-design .hp-history-extreme { min-height: 6.5rem; }
    .hp-history-design .hp-echart { height: 20rem; }
    .hp-history-design .hp-history-analysis__split,
    .hp-history-design .hp-history-day-lists,
    .hp-history-design .hp-history-publication-meta { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-event { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-event__date { padding: .65rem .8rem; }
    .hp-history-design .hp-history-season-list { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-adjacent { grid-template-columns: 1fr; }
    .hp-history-design .hp-history-adjacent a:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-calculator-design-v2 *,
    .hp-calculator-design-v2 *::before,
    .hp-calculator-design-v2 *::after,
    .hp-history-design *,
    .hp-history-design *::before,
    .hp-history-design *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
    .hp-calculator-design-v2 .hp-calculator-inputs,
    .hp-calculator-design-v2 .hp-total-card,
    .hp-calculator-design-v2 .hp-comparison-card,
    .hp-calculator-design-v2 .hp-calculator-method,
    .hp-calculator-design-v2 .hp-calculator-cta,
    .hp-history-design .hp-history-answer,
    .hp-history-design .hp-history-insight,
    .hp-history-design .hp-history-explorer,
    .hp-history-design .hp-history-extreme,
    .hp-history-design .hp-history-analysis,
    .hp-history-design .hp-history-context,
    .hp-history-design .hp-history-table-card,
    .hp-history-design .hp-history-method,
    .hp-history-design .hp-history-cta { border: 2px solid CanvasText; }
    .hp-calculator-design-v2 .hp-accent-line,
    .hp-calculator-design-v2 .hp-calculator-cta::after,
    .hp-history-design .hp-history-answer__accent,
    .hp-history-design .hp-history-cta__accent,
    .hp-history-design .hp-history-extreme::before { background: CanvasText; }
    .hp-calculator-design-v2 .hp-source-buttons button[aria-pressed="true"],
    .hp-calculator-design-v2 .hp-segmented-control button[aria-pressed="true"],
    .hp-history-design button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/*
 * Claude Design typography fidelity.
 * GeneratePress declares body and heading typography with !important, so the
 * approved tool designs must explicitly own typography inside their roots.
 */
.hp-electricity-price.hp-price-design-v2,
.hp-electricity-price.hp-calculator-design-v2,
.hp-electricity-price.hp-history-design,
.hp-electricity-price-editorial {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
    text-transform: none;
}

.hp-price-design-v2 :where(button, input, select, textarea, option, summary, table, th, td),
.hp-calculator-design-v2 :where(button, input, select, textarea, option, summary, table, th, td),
.hp-history-design :where(button, input, select, textarea, option, summary, table, th, td) {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: normal;
}

.hp-price-design-v2 :where(h1, h2, h3),
.hp-calculator-design-v2 :where(h1, h2, h3),
.hp-history-design :where(h1, h2, h3),
.hp-electricity-price-editorial :where(h2, h3) {
    font-family: "HPNeueKabel", sans-serif !important;
    font-style: normal;
    font-weight: 600 !important;
    letter-spacing: normal;
    line-height: 1.55;
}

.hp-price-design-v2 .hp-utility-heading {
    font-size: clamp(2.1rem, 5.5vw, 3.4rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    line-height: 1.03 !important;
}

.hp-calculator-design-v2 .hp-utility-heading,
.hp-history-design .hp-utility-heading {
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    line-height: 1.04 !important;
}

.hp-price-design-v2 .hp-lead,
.hp-calculator-design-v2 .hp-lead,
.hp-history-design .hp-lead {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
}

.hp-price-design-v2 .hp-hero .hp-eyebrow,
.hp-calculator-design-v2 .hp-calculator-hero > .hp-eyebrow,
.hp-history-design .hp-history-hero__copy > .hp-eyebrow {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.55;
    text-transform: uppercase;
}

.hp-calculator-design-v2 .hp-breadcrumbs,
.hp-history-design .hp-history-breadcrumb {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.55;
}

.hp-price-design-v2 .hp-button,
.hp-calculator-design-v2 .hp-button,
.hp-history-design .hp-button {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.55;
}

.hp-calculator-design-v2 :where(p, li) > a:not(.hp-button),
.hp-history-design :where(p, li) > a:not(.hp-button),
.hp-electricity-price-editorial :where(p, li) > a:not(.hp-button) {
    font-weight: 400 !important;
}

.hp-price-design-v2 .hp-eyebrow,
.hp-calculator-design-v2 .hp-eyebrow,
.hp-history-design .hp-eyebrow {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.55;
    text-transform: uppercase;
}

/* Live price: hero and current-price card. */
.hp-price-design-v2 .hp-status {
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.55;
}
.hp-price-design-v2 .hp-pulse h2 {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.55 !important;
    text-transform: uppercase;
}
.hp-price-design-v2 .hp-current-price strong {
    font-size: clamp(3rem, 9vw, 4.25rem);
    font-weight: 600;
    letter-spacing: normal;
    line-height: .95;
}
.hp-price-design-v2 .hp-current-price span { font-size: 1.1rem; font-weight: 400; line-height: .95; }
.hp-price-design-v2 .hp-current-period { font-size: .95rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-current-comparison { font-size: .9rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-current-summary span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.55; }
.hp-price-design-v2 .hp-current-summary strong { font-size: 1.35rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-current-summary small { font-size: .82rem; font-weight: 400; line-height: 1.55; }

/* Live price: insights, day navigation and chart. */
.hp-price-design-v2 .hp-live-insights article > span { font-size: .72rem; font-weight: 700; letter-spacing: .07em; line-height: 1.55; }
.hp-price-design-v2 .hp-live-insights strong { font-size: 1.35rem; font-weight: 600; letter-spacing: normal; line-height: 1.15; }
.hp-price-design-v2 .hp-live-insights p { font-size: .88rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-day-links span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: normal; }
.hp-price-design-v2 .hp-day-links strong { font-size: 1.3rem; font-weight: 600; letter-spacing: normal; line-height: normal; }
.hp-price-design-v2 .hp-day-links small { font-size: .78rem; font-weight: 400; letter-spacing: normal; line-height: normal; }
.hp-price-design-v2 .hp-chart-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; line-height: 1.55; text-transform: uppercase; }
.hp-price-design-v2 .hp-chart-header strong {
    font-family: "HPNeueKabel", sans-serif !important;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.1;
}
.hp-price-design-v2 .hp-chart-header small { font-size: .833333rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-view-controls button { font-size: .9rem; font-weight: 700; line-height: normal; }
.hp-price-design-v2 .hp-chart-metrics dt { font-size: .7rem; font-weight: 700; letter-spacing: .05em; line-height: 1.55; text-transform: uppercase; }
.hp-price-design-v2 .hp-chart-metrics strong { font-size: clamp(1.15rem, 2.5vw, 1.45rem); font-weight: 600; letter-spacing: normal; line-height: 1.55; }
.hp-price-design-v2 .hp-chart-metrics small { font-size: .75rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-chart-y-axis,
.hp-price-design-v2 .hp-chart-time { font-size: .72rem; font-weight: 400; letter-spacing: normal; line-height: 1.55; }
.hp-price-design-v2 .hp-chart-legend { font-size: .82rem; font-weight: 400; line-height: 1.55; }

/* Live price: tables, supporting cards and calculator. */
.hp-price-design-v2 .hp-price-table-wrap summary { font-family: "HPNeueKabel", sans-serif !important; font-size: 1rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-price-table-wrap summary span { font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important; font-size: .8rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-price-table caption { font-size: .82rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-price-table th { font-size: .9rem; font-weight: 700; line-height: 1.55; }
.hp-price-design-v2 .hp-price-table td { font-size: .9rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-price-table tbody th { font-size: .9rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-chart-time b { font-size: .7rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-side-card h2,
.hp-price-design-v2 .hp-method h2 { font-size: 1.35rem !important; font-weight: 600 !important; letter-spacing: normal; line-height: 1.55 !important; }
.hp-price-design-v2 .hp-side-card h3 { font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .08em; line-height: 1.55 !important; }
.hp-price-design-v2 .hp-fine-print { font-size: .78rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-window-list strong { font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: 1.55; }
.hp-price-design-v2 .hp-window-list small { font-size: 1rem; font-weight: 700; letter-spacing: normal; line-height: 1.55; }
.hp-price-design-v2 .hp-source-card dt { font-size: .85rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-source-card dd { font-size: .9rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-calculator-heading h2 { font-size: clamp(1.4rem, 3vw, 1.8rem) !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: 1.55 !important; }
.hp-price-design-v2 .hp-calculator-heading > p { font-size: .9rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-field label,
.hp-price-design-v2 .hp-calculator-bases legend { font-size: .85rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-input-unit span { font-size: .9rem; font-weight: 600; line-height: 1.55; }
.hp-price-design-v2 .hp-consumption-presets button { font-size: .8rem; font-weight: 600; line-height: normal; }
.hp-price-design-v2 .hp-calculator-bases button { font-size: .82rem; font-weight: 700; line-height: normal; }
.hp-price-design-v2 .hp-calculator-bases small { font-size: .72rem; font-weight: 400; line-height: normal; }
.hp-price-design-v2 .hp-calculator-result > span { font-size: .75rem; font-weight: 700; letter-spacing: .07em; line-height: 1.55; }
.hp-price-design-v2 .hp-calculator-result output { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; letter-spacing: normal; line-height: .95; }
.hp-price-design-v2 .hp-cost-breakdown li { font-size: .9rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-method li { font-size: 1rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 600 !important; letter-spacing: normal; line-height: 1.55 !important; }
.hp-price-design-v2 .hp-cta p { font-size: 1rem; font-weight: 400; line-height: 1.55; }
.hp-price-design-v2 .hp-cta .hp-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.55;
    text-transform: uppercase;
}

/* Full calculator: form and result workspace. */
.hp-calculator-design-v2 .hp-period-section > legend,
.hp-calculator-design-v2 .hp-consumption-section > label {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.55;
}
.hp-calculator-design-v2 .hp-spot-section > legend,
.hp-calculator-design-v2 .hp-extras-section > legend,
.hp-calculator-design-v2 .hp-comparison-fields > legend {
    font-family: "HPNeueKabel", sans-serif !important;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.55;
}
.hp-calculator-design-v2 .hp-segmented-control button { font-size: .85rem; font-weight: 700; line-height: normal; }
.hp-calculator-design-v2 .hp-input-with-unit span { font-size: .9rem; font-weight: 600; line-height: 1.55; }
.hp-calculator-design-v2 .hp-preset-list button { font-size: .78rem; font-weight: 600; line-height: normal; }
.hp-calculator-design-v2 .hp-inline-presets button { font-size: .75rem; font-weight: 600; line-height: normal; }
.hp-calculator-design-v2 .hp-field-hint,
.hp-calculator-design-v2 .hp-data-notice { font-size: .75rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-section-intro { font-size: .8rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-source-buttons button { font-size: .833333rem; font-weight: 400; line-height: normal; }
.hp-calculator-design-v2 .hp-source-buttons strong { font-size: .8rem; font-weight: 700; line-height: normal; }
.hp-calculator-design-v2 .hp-source-buttons small { font-size: .72rem; font-weight: 400; line-height: normal; }
.hp-calculator-design-v2 .hp-field-grid > label,
.hp-calculator-design-v2 .hp-toggle-content > label { font-size: .8rem; font-weight: 600; line-height: 1.55; }
.hp-calculator-design-v2 .hp-result-label { font-size: .75rem; font-weight: 700; letter-spacing: .07em; line-height: 1.55; }
.hp-calculator-design-v2 .hp-total-card output { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; letter-spacing: normal; line-height: .95; }
.hp-calculator-design-v2 .hp-effective-price { font-size: .95rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-annual-estimate { font-size: .9rem; font-weight: 600; line-height: 1.55; }
.hp-calculator-design-v2 .hp-cost-breakdown span,
.hp-calculator-design-v2 .hp-cost-breakdown strong { font-size: .9rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-cost-breakdown strong { font-weight: 600; }
.hp-calculator-design-v2 .hp-comparison-card > .hp-eyebrow { font-size: .72rem; letter-spacing: .07em; }
.hp-calculator-design-v2 .hp-scenario-grid span { font-size: .75rem; font-weight: 700; line-height: 1.55; }
.hp-calculator-design-v2 .hp-scenario-grid strong { font-size: 1.5rem; font-weight: 600; line-height: 1.55; }
.hp-calculator-design-v2 .hp-scenario-grid small { font-size: .75rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-comparison-verdict { font-size: .92rem; font-weight: 600; line-height: 1.55; }
.hp-calculator-design-v2 .hp-calculator-disclaimer { font-size: .78rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-calculator-method h2,
.hp-history-design .hp-history-method h2 { font-size: 1.35rem !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: 1.55 !important; }
.hp-calculator-design-v2 .hp-calculator-method li,
.hp-history-design .hp-history-method li { font-size: 1rem; font-weight: 400; line-height: 1.55; }

/* History hub and year pages: hero, cards and explorer. */
.hp-history-design .hp-history-answer h2 {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
}
.hp-history-design .hp-history-answer__price { font-size: clamp(3rem, 9vw, 4.25rem) !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: .95 !important; }
.hp-history-design .hp-history-answer__context { font-size: .95rem !important; font-weight: 400; line-height: 1.55 !important; }
.hp-history-design .hp-history-answer__statement { font-size: .95rem !important; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-answer__facts span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.55; }
.hp-history-design .hp-history-answer__facts strong { font-family: "HPNeueKabel", sans-serif !important; font-size: 1.35rem; font-weight: 600; line-height: 1.55; }
.hp-history-design .hp-history-answer__facts small { font-size: .8rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-insight > span { font-size: .72rem; font-weight: 700; letter-spacing: .07em; line-height: 1.55; }
.hp-history-design .hp-history-insight > strong { font-size: 1.35rem; font-weight: 600; letter-spacing: normal; line-height: 1.15; }
.hp-history-design .hp-history-insight > small { font-size: .88rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-chart-heading h2 { font-size: clamp(1.35rem, 3vw, 1.7rem) !important; font-weight: 600 !important; letter-spacing: normal; line-height: 1.1 !important; }
.hp-history-design .hp-history-table-card__heading h2 { font-size: 1.35rem !important; font-weight: 600 !important; letter-spacing: normal; line-height: 1.55 !important; }
.hp-history-design .hp-history-chart-heading small { font-size: .833333rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-segmented button { font-size: .9rem; font-weight: 700; line-height: normal; }
.hp-history-design .hp-history-metric span { font-size: .7rem; font-weight: 700; letter-spacing: .05em; line-height: 1.55; }
.hp-history-design .hp-history-metric strong { font-size: clamp(1.15rem, 2.5vw, 1.45rem); font-weight: 600; letter-spacing: normal; line-height: 1.55; }
.hp-history-design .hp-history-metric small { font-size: .75rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-presets button { font-size: .82rem; font-weight: 700; line-height: normal; }
.hp-history-design .hp-history-legend li { font-size: .82rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-status { font-size: .75rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-level-labels { font-size: .68rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-chart-meta { font-size: .75rem; font-weight: 400; line-height: 1.55; }

/* History tables and extreme cards. */
.hp-history-design .hp-history-extreme span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1.55; }
.hp-history-design .hp-history-extreme strong { font-size: 1.6rem; font-weight: 600; letter-spacing: normal; line-height: 1.55; }
.hp-history-design--hub .hp-history-extreme strong { font-size: 1.9rem; }
.hp-history-design .hp-history-extreme small { font-size: 1rem; font-weight: 700; line-height: 1.55; }
.hp-history-design .hp-history-table-card__heading > span,
.hp-history-design .hp-history-data-table caption { font-size: .8rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-data-table th { font-size: .9rem; font-weight: 700; letter-spacing: normal; line-height: 1.55; }
.hp-history-design .hp-history-data-table td { font-size: .9rem; font-weight: 400; letter-spacing: normal; line-height: 1.55; }
.hp-history-design .hp-history-data-table thead th,
.hp-history-design .hp-history-data-table tbody th { font-size: .9rem; font-weight: 700; letter-spacing: normal; line-height: 1.55; }
.hp-history-design--hub .hp-history-month-archive .hp-history-data-table :where(th, td) { font-size: .88rem; line-height: 1.55; }
.hp-history-design--hub .hp-history-month-archive .hp-history-data-table tbody th { font-weight: 400; }
.hp-history-design .hp-history-comparison small { font-size: .75rem; font-weight: 400; line-height: 1.55; }
.hp-history-design .hp-history-month-archive summary { font-family: "HPNeueKabel", sans-serif !important; font-size: 1rem; font-weight: 600; line-height: 1.55; }
.hp-history-design .hp-history-month-archive summary small { font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important; font-size: .8rem; font-weight: 600; line-height: 1.55; }
.hp-history-design .hp-history-table-card__heading .hp-eyebrow { font-size: .72rem; letter-spacing: .08em; line-height: 1.55; }

/* CTA and editorial typography shared by calculator and history views. */
.hp-calculator-design-v2 .hp-calculator-cta h2,
.hp-history-design .hp-history-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 600 !important; letter-spacing: normal; line-height: 1.55 !important; }
.hp-calculator-design-v2 .hp-calculator-cta p,
.hp-history-design .hp-history-cta p { font-size: 1rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-calculator-cta .hp-eyebrow,
.hp-history-design .hp-history-cta .hp-eyebrow {
    font-family: "HPBrandonGrotesque", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.55;
    text-transform: uppercase;
}
.hp-calculator-design-v2 .hp-calculator-cta .hp-button,
.hp-history-design .hp-history-cta .hp-button { font-weight: 700 !important; }
.hp-calculator-design-v2 .hp-calculator-editorial > .hp-eyebrow,
.hp-history-design .hp-history-editorial > .hp-eyebrow,
.hp-electricity-price-editorial__header > p:first-child { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; line-height: 1.55; text-transform: uppercase; }
.hp-calculator-design-v2 .hp-calculator-editorial > h2:first-of-type,
.hp-history-design .hp-history-editorial > h2:first-of-type,
.hp-electricity-price-editorial__header h2 { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 600 !important; line-height: 1.55 !important; }
.hp-calculator-design-v2 .hp-calculator-editorial h2:not(:first-of-type),
.hp-history-design .hp-history-editorial h2:not(:first-of-type),
.hp-electricity-price-editorial > :not(.hp-electricity-price) h2 { font-size: clamp(1.4rem, 3vw, 1.8rem) !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: 1.55 !important; }
.hp-calculator-design-v2 .hp-calculator-editorial h2,
.hp-history-design .hp-history-editorial h2,
.hp-electricity-price-editorial > :not(.hp-electricity-price) h2 { letter-spacing: normal !important; }
.hp-calculator-design-v2 .hp-calculator-editorial :where(p, li),
.hp-history-design .hp-history-editorial :where(p, li),
.hp-electricity-price-editorial > :not(.hp-electricity-price) :where(p, li) { font-size: 1rem; font-weight: 400; line-height: 1.55; }
.hp-calculator-design-v2 .hp-calculator-editorial a,
.hp-history-design .hp-history-editorial a,
.hp-electricity-price-editorial > :not(.hp-electricity-price) a { font-weight: 400; }
.hp-electricity-price-editorial .hp-electricity-price-editorial__header h2 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
}
.hp-electricity-price-editorial .hp-electricity-price-editorial__footer h2,
.hp-electricity-price-editorial .hp-electricity-price-editorial__disclosure h2 {
    font-size: 1.3rem !important;
    letter-spacing: normal !important;
    line-height: 1.55 !important;
}
.hp-electricity-price-editorial #historiavertailu { font-size: .95rem; line-height: 1.55; }
.hp-electricity-price-editorial #historiavertailu :where(p, a, strong) { font-size: inherit; line-height: inherit; }
.hp-electricity-price-editorial__table-wrap table { font-size: .88rem; line-height: 1.55; }
.hp-electricity-price-editorial__table-wrap :where(th, td) { font-size: .88rem; letter-spacing: normal; line-height: 1.55; }
.hp-electricity-price-editorial__table-wrap thead th { font-weight: 700; }
.hp-electricity-price-editorial__table-wrap tbody th { font-weight: 600; }
.hp-electricity-price-editorial__table-wrap tbody td { font-weight: 400; }
.hp-calculator-design-v2 .hp-faq-list summary,
.hp-history-design .hp-history-faq summary,
.hp-electricity-price-editorial details > summary { font-family: "HPNeueKabel", sans-serif !important; font-size: 1rem; font-weight: 600; letter-spacing: normal; line-height: normal; }

@media (max-width: 47.999rem) {
    .hp-price-design-v2 .hp-hero-actions .hp-button { font-size: 1rem; }
}