/*
Theme Name: Save On Energy Bills
Theme URI: https://saveonenergybills.co.uk
Author: Save On Energy Bills
Author URI: https://saveonenergybills.co.uk
Description: A clean, professional WordPress theme for energy bill education. Left-aligned editorial layout, Poppins typography, responsive tables.
Version: 3.29.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soeb
Tags: education, energy, blog, custom-menu, featured-images, translation-ready
*/

/* ── Variables ──────────────────────────────── */
:root{
  --c-navy:#1d2b3e;--c-navy-light:#2c3e55;--c-heading:#1a1a2e;--c-text:#3a3a4a;
  --c-text-light:#5c5c6e;--c-accent:#e63946;--c-accent-hover:#c5303c;
  --c-link:#1F2937;--c-link-hover:#0F1620;--c-white:#fff;--c-off-white:#f7f7f8;
  --c-light-grey:#eaeaec;--c-mid-grey:#b0b0b8;--c-border:#dcdce0;
  --c-footer-bg:#DFE6EE;--c-footer-bar:#D2DCE6;--c-tag-bg:#f0f0f3;
  /* Sunlight palette — used on blog post hero & TOC */
  --c-sun:#F5A524;--c-sun-deep:#B45309;--c-sun-text:#3d2700;
  --c-sun-soft:#FEF3C7;--c-charcoal:#1F2937;
  /* Pale Sand — used on topic hub hero (calm sibling to Sunlight) */
  --c-sand:#FAF6EC;--c-slate:#4B5563;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --s-xs:.25rem;--s-sm:.5rem;--s-md:1rem;--s-lg:1.5rem;--s-xl:2rem;
  --s-2xl:3rem;--s-3xl:4rem;--s-4xl:5.5rem;
  --w-site:1320px;--w-content:820px;--w-wide:960px;
  --radius:6px;--radius-lg:10px;--ease:200ms ease;
}

/* ── Reset ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.8;color:var(--c-text);background:var(--c-white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--ease)}
a:hover{color:var(--c-link-hover)}
ul,ol{list-style:none;padding:0;margin:0}
nav ul,nav ol,.main-nav,.main-nav ul,.main-nav li,.footer-col ul,.footer-col li,.footer-bar__links,.footer-bar__links li{list-style:none!important;padding:0;margin:0}
button{font-family:var(--font);cursor:pointer}

/* ── Typography ─────────────────────────────── */
h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--c-heading);line-height:1.3;font-weight:600}
h1{font-size:clamp(1.75rem,3.5vw,2.4rem);margin-bottom:var(--s-lg)}
h2{font-size:clamp(1.35rem,2.5vw,1.65rem);margin-bottom:var(--s-md)}
h3{font-size:clamp(1.1rem,2vw,1.3rem);margin-bottom:var(--s-md)}
h4{font-size:1.05rem;margin-bottom:var(--s-sm)}
p{margin-bottom:var(--s-lg)}

.tag{font-size:.78rem;font-weight:500;letter-spacing:.02em}
.tag-box{display:inline-block;font-size:.72rem;font-weight:500;padding:3px 12px;background:var(--c-tag-bg);border-radius:3px;color:var(--c-text);text-decoration:none;transition:background var(--ease)}
.tag-box:hover{background:var(--c-light-grey);color:var(--c-heading)}

/* ── Layout ─────────────────────────────────── */
.site-container{width:100%;max-width:var(--w-site);margin:0 auto;padding:0 var(--s-xl)}
.constrained{max-width:var(--w-content)}

/* ── Header ─────────────────────────────────── */
/* ── Floating rounded header (v3.18.0) ─────────────────────────── */
.site-header{position:sticky;top:0;z-index:1000;background:transparent;border:0;padding:28px 32px 0;transition:padding var(--ease)}
.site-header__inner{max-width:var(--w-site);margin:0 auto;width:100%}
.header-shell{display:flex;align-items:center;justify-content:space-between;gap:var(--s-xl);padding:18px 28px;border-radius:24px;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.10),transparent 38%),linear-gradient(135deg,#071426 0%,#10213a 55%,#071426 100%);box-shadow:0 18px 45px rgba(7,20,38,.28),0 2px 6px rgba(7,20,38,.18);border:1px solid rgba(255,255,255,.08);transition:box-shadow var(--ease),transform var(--ease)}
.site-header.scrolled{padding-top:12px}
.site-header.scrolled .header-shell{box-shadow:0 22px 55px rgba(7,20,38,.34),0 2px 8px rgba(7,20,38,.22)}
.site-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;line-height:0}
.site-logo__img{height:42px;width:auto;display:block;filter:brightness(0) invert(1)}
.site-logo__icon{width:38px;height:38px;background:var(--c-navy);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem}
.site-logo__text{font-size:1rem;font-weight:600;color:#fff;line-height:1.2}
.site-logo__text span{color:var(--c-accent)}
.header-right{display:flex;align-items:center;gap:var(--s-md);flex:0 0 auto}
.main-nav{display:flex;align-items:center;flex:1 1 auto;justify-content:center}
.main-nav__list{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;list-style:none!important;margin:0!important;padding:0!important}
.main-nav__list li{list-style:none!important;list-style-type:none!important;margin:0;padding:0;position:relative}
.main-nav__list li::before,.main-nav__list li::marker{display:none!important;content:none!important}
.main-nav a,.main-nav__list a{display:block;padding:8px 14px;color:rgba(255,255,255,.92);font-weight:500;font-size:.95rem;text-decoration:none;border-radius:6px;transition:color var(--ease),background var(--ease);white-space:nowrap}
.main-nav a:hover,.main-nav__list .current-menu-item>a,.main-nav__list .current_page_item>a,.main-nav__list .current-menu-ancestor>a{color:#fff;background:rgba(255,255,255,.06)}
.main-nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.main-nav__list .sub-menu{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:#0b1b31;border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:0 14px 32px rgba(7,20,38,.35);min-width:220px;padding:8px;z-index:100;list-style:none!important;align-items:stretch!important}
.main-nav__list li:hover>.sub-menu,.main-nav__list li:focus-within>.sub-menu{display:block}
.main-nav__list .sub-menu li{list-style:none!important}
.main-nav__list .sub-menu a{padding:8px 12px;font-size:.88rem;text-indent:0;margin-left:0;color:rgba(255,255,255,.9);border-radius:8px}
.main-nav__list .sub-menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.header-subscribe-button{display:inline-flex;align-items:center;gap:8px;background:var(--c-sun);color:var(--c-charcoal);padding:11px 18px;border-radius:14px;font-weight:600;font-size:.88rem;text-decoration:none;transition:background var(--ease),transform var(--ease);white-space:nowrap;line-height:1}
.header-subscribe-button:hover,.header-subscribe-button:focus{background:#FFB434;color:var(--c-charcoal);transform:translateY(-1px);text-decoration:none}
.header-subscribe-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.header-subscribe-button__icon{flex-shrink:0}
.menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px;color:#fff;cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center}
.menu-toggle svg{width:24px;height:24px}
.menu-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.header-search-btn{background:none;border:none;padding:8px;color:var(--c-text-light);display:flex;align-items:center;transition:color var(--ease)}
.header-search-btn:hover{color:var(--c-heading)}
.header-search-btn svg{width:20px;height:20px}

/* ── Breadcrumbs ────────────────────────────── */
.breadcrumbs{padding:var(--s-md) 0;font-size:.8rem;color:var(--c-mid-grey)}
.breadcrumbs a{color:var(--c-text-light);text-decoration:none}
.breadcrumbs a:hover{color:var(--c-link)}
.breadcrumbs .sep{margin:0 6px;opacity:.5}

/* ── Buttons ────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;font-family:var(--font);font-size:.9rem;font-weight:500;border:none;border-radius:4px;cursor:pointer;text-decoration:none;transition:all var(--ease)}
.btn--primary{background:var(--c-charcoal);color:#fff}
.btn--primary:hover{background:#0F1620;color:#fff}
.btn--outline{background:transparent;color:var(--c-heading);border:2px solid var(--c-heading)}
.btn--outline:hover{background:var(--c-heading);color:#fff}
.btn--small{padding:8px 18px;font-size:.82rem}
.btn--white{background:#fff;color:var(--c-heading)}
.btn--white:hover{background:var(--c-off-white);color:var(--c-heading)}
.text-link{font-size:.88rem;font-weight:500;color:var(--c-heading);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap var(--ease)}
.text-link:hover{gap:10px;color:var(--c-heading)}
.text-link::after{content:'›';font-size:1.1em}

/* ── Blog Single — Post Hero (Sunlight palette, full-bleed image right) ── */
.post-hero{background:var(--c-sun);color:var(--c-charcoal);position:relative;overflow:hidden}
.post-hero__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:420px}
.post-hero__left{
    display:flex;flex-direction:column;justify-content:center;
    padding:var(--s-2xl) var(--s-3xl) var(--s-lg) max(var(--s-xl), calc((100vw - var(--w-site)) / 2 + var(--s-xl)));
    gap:var(--s-xl);
}
.post-hero__content{display:flex;flex-direction:column}
.post-hero h1{color:var(--c-charcoal);margin-bottom:0}
.post-hero__subtitle{color:var(--c-sun-text);font-size:1.05rem;line-height:1.5;margin:var(--s-md) 0 0;max-width:32em}
.post-hero__meta{display:flex;align-items:center;gap:var(--s-md);margin-bottom:var(--s-lg);flex-wrap:wrap}
.post-hero__meta .tag,
.post-hero__date{color:var(--c-sun-text)}
.post-hero .tag-box{
    background:var(--c-charcoal);
    color:#fff;
    border:none;
    padding:4px 10px;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:3px;
}
.post-hero .tag-box:hover{background:var(--c-charcoal);color:#fff}
.post-hero__image{position:relative;width:100%;height:100%;min-height:420px;overflow:hidden}
.post-hero__image img{width:100%;height:100%;object-fit:cover;display:block}
.post-hero__breadcrumbs{font-size:.8rem;color:var(--c-sun-text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.post-hero__breadcrumbs a{color:var(--c-charcoal);text-decoration:none;font-weight:500}
.post-hero__breadcrumbs a:hover{text-decoration:underline}
.post-hero__breadcrumbs .sep{color:var(--c-sun-text)}
.post-hero__breadcrumbs-current{color:var(--c-sun-text)}

/* Author strip */
.post-contributors{padding:var(--s-lg) 0;border-top:1px solid var(--c-light-grey);border-bottom:1px solid var(--c-light-grey)}
.post-contributors__inner{display:flex;gap:var(--s-xl);flex-wrap:wrap}
.post-contributor{display:flex;align-items:center;gap:10px;text-decoration:none}
.post-contributor__thumb{width:44px;height:44px;border-radius:50%;object-fit:cover}
.post-contributor__role{font-size:.72rem;color:var(--c-text-light);font-weight:400}
.post-contributor__name{font-size:.85rem;font-weight:500;color:var(--c-heading)}

/* Progress bar */
.progress-bar{position:sticky;top:0;z-index:999;height:3px;background:transparent}
.progress-bar progress{display:block;width:100%;height:3px;border:none;appearance:none;-webkit-appearance:none;background:transparent}
.progress-bar progress::-webkit-progress-bar{background:transparent}
.progress-bar progress::-webkit-progress-value{background:var(--c-accent);transition:width 100ms linear}
.progress-bar progress::-moz-progress-bar{background:var(--c-accent)}

/* At a glance card */
.at-a-glance{max-width:var(--w-content);margin:var(--s-2xl) 0;padding:var(--s-xl) var(--s-2xl);background:var(--c-off-white);border-radius:var(--radius-lg);border:1px solid var(--c-light-grey)}
.at-a-glance h2{font-size:1.15rem;margin-bottom:var(--s-md)}
.at-a-glance ul{list-style:none;padding:0}
.at-a-glance li{position:relative;padding:8px 0 8px 28px;font-size:.92rem;border-bottom:1px solid var(--c-light-grey)}
.at-a-glance li:last-child{border-bottom:none}
.at-a-glance li::before{content:'✓';position:absolute;left:0;top:8px;color:var(--c-accent);font-weight:600}

/* TOC sidebar (legacy — removed, now uses .post-layout__sidebar) */

/* Post content — left-aligned within site container */
.post-content{margin:0;padding:var(--s-md) 0 var(--s-3xl)}
.post-content h2{margin-top:var(--s-3xl);padding-bottom:0;padding-left:var(--s-sm);scroll-margin-top:90px;font-weight:700;letter-spacing:-.01em;color:var(--c-charcoal);border-left:6px solid var(--c-sun);line-height:1.2}
.post-content h3{margin-top:var(--s-2xl);scroll-margin-top:90px}
.post-content p{font-size:1rem;line-height:1.8}
.post-content p a,.post-content li a,.post-content blockquote a{color:var(--c-charcoal);text-decoration:underline;text-decoration-color:var(--c-sun);text-decoration-thickness:3px;text-underline-offset:3px;font-weight:500;transition:text-decoration-thickness var(--ease)}
.post-content p a:hover,.post-content li a:hover,.post-content blockquote a:hover{color:var(--c-charcoal);text-decoration-thickness:4px}
.post-content ul,.post-content ol{margin:var(--s-sm) 0 var(--s-lg) var(--s-xl)}
.post-content ul{list-style:none;padding-left:0}
.post-content ul > li{position:relative;padding-left:22px}
.post-content ul > li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;background:#2E6B7F}
.post-content ul ul > li::before{background:var(--c-charcoal)}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:8px;font-size:.95rem;line-height:1.75}
.post-content blockquote{border-left:3px solid var(--c-charcoal);padding:var(--s-md) var(--s-xl);background:var(--c-sun-soft);margin:var(--s-xl) 0;color:var(--c-charcoal);border-radius:0}
.post-content img{border-radius:var(--radius);margin:var(--s-xl) 0}
/* Tables — harmonised editorial look (v3.28.2).
   The same dark-navy-header card chrome used on .soeb-article__body
   tables (see the detailed block lower in this file). Kept here so
   `.post-content`-scoped templates (tips, glossary, tools, hub, about)
   get the identical look. See the soeb-article__body block (~line 4100)
   for the canonical rules and inline comments — these mirror them.

   v3.28.2: header background uses the .octo-card--dark gradient
   (radial teal glow over a navy linear gradient) so tables match the
   leading dark cards used elsewhere on the site. The earlier
   `tr:first-child` background rule has been removed because it
   incorrectly tinted the first <tbody> row when a <thead> was present,
   breaking the zebra-stripe rhythm. */
.post-content table{width:100%;border-collapse:separate;border-spacing:0;margin:var(--s-xl) 0;font-size:.92rem;border:none;font-family:var(--font);background:#fff}
.post-content table th,.post-content table td{padding:16px 18px;border:none;text-align:left;vertical-align:top;line-height:1.55}
/* Header row — light editorial style for data-column headers. The
 * first column gets the dark navy treatment via the spine rules below
 * so the table reads as a row-labelled matrix. */
.post-content table thead th,
.post-content table thead td{
    color:#111827;
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:#F8FAFC;
    border-bottom:1px solid #E2E8F0;
}
/* No-thead fallback. */
.post-content table > tr:first-child > th,
.post-content table > tbody > tr:first-child > th{
    color:#111827;
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:#F8FAFC;
    border-bottom:1px solid #E2E8F0;
}
.post-content table tbody th{
    color:#111827;
    background:transparent;
    font-weight:600;
    text-align:left;
}
.post-content table tbody tr:nth-child(even) td:not(:first-child){background:#fbfcfe}
.post-content table tbody tr:hover td:not(:first-child){background:#f4f8fb}
.post-content table tbody td{color:#374151;border-bottom:1px solid #DCE7EF}
.post-content table tbody tr:last-child td{border-bottom:none}
.post-content table strong,.post-content table b{color:#111827}

/* First-column spine — flat navy on all spine cells; the top-left
 * cell alone carries the radial teal glow as the single anchor. */
.post-content table thead tr > th:first-child,
.post-content table thead tr > td:first-child,
.post-content table > tr:first-child > th:first-child,
.post-content table > tbody > tr:first-child > th:first-child,
.post-content table tbody tr td:first-child,
.post-content table tbody tr th:first-child{
    background:linear-gradient(140deg, #0c1a2b 0%, #15273d 50%, #0c1a2b 100%) !important;
    color:#fff !important;
    font-weight:600;
    border-bottom-color:rgba(255,255,255,.08);
}
.post-content table thead tr:first-child > th:first-child,
.post-content table thead tr:first-child > td:first-child,
.post-content table > tr:first-child > th:first-child,
.post-content table > tbody > tr:first-child > th:first-child{
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(55,125,148,.45) 0%, rgba(55,125,148,0) 55%),
        linear-gradient(140deg, #0c1a2b 0%, #15273d 50%, #0c1a2b 100%) !important;
}
.post-content table thead tr > th:first-child,
.post-content table thead tr > td:first-child,
.post-content table > tr:first-child > th:first-child,
.post-content table > tbody > tr:first-child > th:first-child{
    font-weight:700;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.post-content table td:first-child strong,
.post-content table td:first-child b,
.post-content table th:first-child strong,
.post-content table th:first-child b{color:#fff}

/* Responsive tables — scrollable wrapper.
   IMPORTANT: .post-content sits inside a CSS grid (.post-layout). Grid/flex
   items default to min-width:auto, which makes them refuse to shrink below
   their content's intrinsic width. Without min-width:0 on the ancestors,
   any oversized table would push the whole page wider than the viewport
   and overflow:auto on .table-wrap would never engage. */
.post-layout,
.post-layout > *,
.post-content{min-width:0}
.post-content .table-wrap,
.post-content figure.wp-block-table{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:var(--s-xl) 0;position:relative;max-width:100%;background:#fff;border:1px solid #E2E8F0;border-radius:18px;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.post-content .table-wrap table,
.post-content figure.wp-block-table table{margin:0;width:100%;min-width:100%}
/* Neutralise WP core defaults on the figure so our break-out rules apply cleanly. */
.post-content figure.wp-block-table{padding:0}
/* When a figure already provides the card chrome, the inner .table-wrap
   (added by the PHP filter) should be transparent so we don't double-border. */
.post-content figure.wp-block-table > .table-wrap{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;overflow:visible}

/* Scroll hint — gradient fade on the right edge.
   Shown permanently on mobile (see mobile rule below) so users can tell
   at a glance that the table is horizontally scrollable. On desktop, only
   shown when JS detects actual overflow (.is-scrollable class). */
.post-content .table-wrap::after,
.post-content figure.wp-block-table::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,rgba(255,255,255,.95));pointer-events:none;opacity:0;transition:opacity var(--ease)}
.post-content .table-wrap.is-scrollable::after,
.post-content figure.wp-block-table.is-scrollable::after{opacity:1}
.post-content .table-wrap.scrolled-end::after,
.post-content figure.wp-block-table.scrolled-end::after{opacity:0}

/* Desktop wide-table break-out (v3.28.5).
   Default behaviour changed: tables now stay within the content column
   width unless explicitly marked as wide. Simple 2–3 column tables read
   better at the article width; only data-heavy 4+ column tables
   genuinely need more room.

   A table opts in to break-out by carrying `.is-wide-table` (or the
   alias `.wide-table`) on either the <table> itself or its wrapper
   (.table-wrap / figure.wp-block-table). The class is added manually
   in the editor, or automatically by main.js when a table has 4+
   columns.

   Break-out uses a sensible centred max-width (min(1100px, 92vw))
   anchored to the viewport, not to the post-layout grid. This avoids
   ever overflowing the page on narrower screens or 13" laptops.

   We apply break-out to both .table-wrap (bare tables wrapped by the
   PHP filter) and figure.wp-block-table (block-editor tables wrapped
   in a figure). If a table has both (figure containing .table-wrap),
   the figure is the outer element and drives the break-out; the inner
   .table-wrap collapses to width:100% naturally. */
@media(min-width:1025px){
    .post-content .table-wrap.is-wide-table,
    .post-content .table-wrap.wide-table,
    .post-content figure.wp-block-table.is-wide-table,
    .post-content figure.wp-block-table.wide-table,
    .post-content .table-wrap:has(> table.is-wide-table),
    .post-content .table-wrap:has(> table.wide-table),
    .post-content figure.wp-block-table:has(> table.is-wide-table),
    .post-content figure.wp-block-table:has(> table.wide-table),
    .post-content figure.wp-block-table:has(> .table-wrap > table.is-wide-table),
    .post-content figure.wp-block-table:has(> .table-wrap > table.wide-table){
        /* Left-aligned with the article text; extends rightward into
         * the sidebar's empty space. JS clamps via --soeb-wt-maxw so
         * the table never extends past the viewport's right edge on
         * narrow desktops. */
        width:var(--soeb-wt-maxw, min(1100px, 92vw));
        max-width:var(--soeb-wt-maxw, 92vw);
        margin-left:0;
    }
    /* When both exist (figure > table-wrap), the inner wrapper just fills its parent */
    .post-content figure.wp-block-table.is-wide-table .table-wrap,
    .post-content figure.wp-block-table.wide-table .table-wrap,
    .post-content figure.wp-block-table:has(> .table-wrap > table.is-wide-table) .table-wrap,
    .post-content figure.wp-block-table:has(> .table-wrap > table.wide-table) .table-wrap{
        width:100%;
        max-width:100%;
        margin-left:0;
    }
    .post-content .table-wrap table,
    .post-content figure.wp-block-table table{width:100%;min-width:100%;max-width:100%}
}

/* Mobile: stacked row-card layout (v3.28.5).
   Replaces the previous "force min-width:640px + horizontal scroll"
   pattern. On narrow screens, side-scrolling tables are painful and
   easy to miss content in. Instead, each <tbody> row becomes its own
   card and each <td> becomes a label/value pair using the column
   header text as the label. Labels are injected into a `data-label`
   attribute by main.js (see the table-stacking block there).

   The desktop card chrome (rounded border, shadow) is dropped on the
   wrapper because each row now carries its own card chrome — keeping
   both would look heavy. The scroll-fade ::after is also disabled
   because there's no scrolling. */
@media(max-width:768px){
    /* Wrapper: strip the outer card chrome — the row cards carry it now. */
    .post-content .table-wrap,
    .post-content figure.wp-block-table{
        overflow:visible;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:0;
        margin:var(--s-xl) 0;
    }
    .post-content .table-wrap::after,
    .post-content figure.wp-block-table::after,
    .post-content .table-wrap::before,
    .post-content figure.wp-block-table::before{content:none}

    /* Table: drop table semantics so children can stack as block elements.
       The table itself loses its background; each row card paints its own. */
    .post-content .table-wrap table,
    .post-content figure.wp-block-table table,
    .post-content > table{
        display:block;
        width:100%;
        min-width:0;
        background:transparent;
        font-size:.92rem;
    }
    /* Hide the original <thead> — its labels are now repeated on every cell
       via data-label, so the row of column headings is redundant and would
       just stack as a tall card of its own. */
    .post-content .table-wrap table thead,
    .post-content figure.wp-block-table table thead,
    .post-content > table thead{
        display:none;
    }
    /* tbody and tfoot become plain containers. */
    .post-content .table-wrap table tbody,
    .post-content .table-wrap table tfoot,
    .post-content figure.wp-block-table table tbody,
    .post-content figure.wp-block-table table tfoot,
    .post-content > table tbody,
    .post-content > table tfoot{
        display:block;
    }
    /* Each row → card. */
    .post-content .table-wrap table tbody tr,
    .post-content .table-wrap table tfoot tr,
    .post-content figure.wp-block-table table tbody tr,
    .post-content figure.wp-block-table table tfoot tr,
    .post-content > table tbody tr,
    .post-content > table tfoot tr{
        display:block;
        background:#fff;
        border:1px solid #E2E8F0;
        border-radius:14px;
        box-shadow:0 4px 12px rgba(15,23,42,.04);
        padding:6px 0;
        margin:0 0 14px;
        overflow:hidden; /* clips the first-cell navy bar to the card radius */
    }
    .post-content .table-wrap table tbody tr:last-child,
    .post-content figure.wp-block-table table tbody tr:last-child,
    .post-content > table tbody tr:last-child{margin-bottom:0}
    /* Each cell → label/value pair stacked vertically. */
    .post-content .table-wrap table tbody td,
    .post-content .table-wrap table tbody th,
    .post-content .table-wrap table tfoot td,
    .post-content figure.wp-block-table table tbody td,
    .post-content figure.wp-block-table table tbody th,
    .post-content figure.wp-block-table table tfoot td,
    .post-content > table tbody td,
    .post-content > table tbody th,
    .post-content > table tfoot td{
        display:block;
        width:100%;
        padding:10px 16px;
        border:0;
        border-bottom:1px solid #EEF2F7;
        background:transparent !important; /* override zebra/hover/spine */
        color:var(--c-charcoal, #1f2937) !important;
        text-align:left;
        font-weight:400;
        text-transform:none;
        letter-spacing:normal;
        font-size:.95rem;
    }
    .post-content .table-wrap table tbody tr > *:last-child,
    .post-content figure.wp-block-table table tbody tr > *:last-child,
    .post-content > table tbody tr > *:last-child{border-bottom:0}
    /* Strip the dark navy spine on mobile — the first cell becomes a
       readable plain cell like any other so the card reads top-to-bottom. */
    .post-content .table-wrap table tbody tr td:first-child,
    .post-content .table-wrap table tbody tr th:first-child,
    .post-content figure.wp-block-table table tbody tr td:first-child,
    .post-content figure.wp-block-table table tbody tr th:first-child,
    .post-content > table tbody tr td:first-child,
    .post-content > table tbody tr th:first-child{
        background:#F8FAFC !important;
        color:#0c1a2b !important;
        font-weight:600;
    }
    .post-content .table-wrap table tbody td:first-child strong,
    .post-content .table-wrap table tbody td:first-child b,
    .post-content figure.wp-block-table table tbody td:first-child strong,
    .post-content figure.wp-block-table table tbody td:first-child b,
    .post-content > table tbody td:first-child strong,
    .post-content > table tbody td:first-child b{color:#0c1a2b !important}
    /* The label: rendered from data-label via ::before. */
    .post-content .table-wrap table tbody td[data-label]::before,
    .post-content .table-wrap table tfoot td[data-label]::before,
    .post-content figure.wp-block-table table tbody td[data-label]::before,
    .post-content figure.wp-block-table table tfoot td[data-label]::before,
    .post-content > table tbody td[data-label]::before,
    .post-content > table tfoot td[data-label]::before{
        content:attr(data-label);
        display:block;
        font-size:.66rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
        color:#64748B;
        margin-bottom:4px;
    }
    /* First cell of each row often acts as a row label; if it doesn't
       have a data-label (which is normal — the first column heading is
       usually the "what" axis), don't reserve space for an empty label. */
    .post-content .table-wrap table tbody td:first-child:not([data-label])::before,
    .post-content figure.wp-block-table table tbody td:first-child:not([data-label])::before,
    .post-content > table tbody td:first-child:not([data-label])::before{content:none}
}

/* Card-style stacking rule removed.
   It required every <td> to carry a data-label="..." attribute (used by
   td::before { content: attr(data-label) }). WordPress block-editor tables
   don't produce those attributes, so the rule was reserving 42% of each
   cell for an empty pseudo-element, causing the actual cell text to overlap
   with itself on mobile. Horizontal scroll via .table-wrap handles wide
   tables now, making this rule redundant. */

.post-content .wide-image{max-width:var(--w-wide);margin-left:50%;transform:translateX(-50%)}
@media(max-width:1024px){
    .post-content .wide-image{max-width:100%;margin-left:0;transform:none}
}
/* Prevent horizontal page scroll — use both hidden (fallback) and clip (modern, more reliable on iOS) */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow-x:clip){
    html,body{overflow-x:clip}
}
body{position:relative}
/* Comment form fields must not exceed their container (WP defaults to cols=45) */
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea{max-width:100%;box-sizing:border-box}

/* Callout boxes */
.callout{border-radius:var(--radius);padding:var(--s-lg) var(--s-xl);margin:var(--s-xl) 0;display:flex;gap:var(--s-md)}
.callout--tip{background:#eef8f0;border-left:3px solid #27ae60}
.callout--info{background:#edf4fb;border-left:3px solid #2563a0}
.callout--warning{background:#fef9ea;border-left:3px solid #f0ad4e}

/* Post tags */
.post-tags{max-width:var(--w-content);margin:0;padding:var(--s-xl) 0 var(--s-2xl);border-top:1px solid var(--c-light-grey)}
.post-tags__title{font-size:.82rem;font-weight:500;color:var(--c-text-light);margin-bottom:var(--s-sm)}

/* Post nav */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl);max-width:var(--w-content);margin:0 0 var(--s-3xl);padding:0}
.post-nav__item{padding:var(--s-lg);background:var(--c-off-white);border-radius:var(--radius);text-decoration:none;transition:background var(--ease)}
.post-nav__item:hover{background:var(--c-light-grey)}
.post-nav__label{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-light);margin-bottom:4px}
.post-nav__title{font-size:.9rem;font-weight:500;color:var(--c-heading)}
.post-nav__item--next{text-align:right}

.last-updated{text-align:left;font-size:.78rem;color:var(--c-mid-grey);padding:var(--s-md) 0 var(--s-2xl);max-width:var(--w-content)}

/* ── Blog Listing / Cards ───────────────────── */
.blog-section{padding:var(--s-3xl) 0}
.blog-section--alt{background:var(--c-off-white)}
.blog-section__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-xl)}
.blog-section__header h2{font-size:1.1rem;font-weight:600;margin-bottom:0}

.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}

.blog-card{display:flex;flex-direction:column}
.blog-card__image{
    position:relative;
    aspect-ratio:16/10;
    margin-bottom:var(--s-md);
    display:block;
    overflow:hidden;
    border-radius:4px;
}
.blog-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 300ms ease;
    display:block;
}
.blog-card:hover .blog-card__image img{transform:scale(1.02)}
.blog-card__categories{display:flex;gap:6px;margin-bottom:var(--s-sm);flex-wrap:wrap}
.blog-card__title{font-size:1.05rem;font-weight:600;line-height:1.35;margin-bottom:var(--s-sm);margin-top:var(--s-sm)}
.blog-card__title a{color:var(--c-heading);text-decoration:none}
.blog-card__title a:hover{text-decoration:underline}
.blog-card__meta{font-size:.78rem;color:var(--c-text-light);margin-bottom:var(--s-sm)}
.blog-card__excerpt{font-size:.88rem;color:var(--c-text-light);line-height:1.6;margin-bottom:var(--s-md)}

/* Card-context category badge — sharp charcoal pill matching the .page-hero__kicker
   and .post-hero .tag-box, so every charcoal eyebrow on the site looks identical.
   Scoped to cards only so footer/inline category lists keep their soft grey style. */
.blog-card .tag-box,
.hub-featured__body .tag-box{
    background:var(--c-charcoal);
    color:#fff;
    border-radius:3px;
    padding:4px 10px;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.blog-card .tag-box:hover,
.hub-featured__body .tag-box:hover{
    background:var(--c-charcoal);
    color:#fff;
}
/* "Read more →" text link inside grid cards — replaces the old hidden version with an
   editorial-style underline link in body charcoal. The whole card is already a link;
   this is just the explicit affordance. */
.blog-card .text-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.85rem;
    font-weight:500;
    color:var(--c-charcoal);
    text-decoration:none;
    margin-top:auto;
}
.blog-card .text-link::after{content:"→";font-size:1rem;line-height:1;}
.blog-card .text-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Featured card CTA — replace the .btn--primary styling with a plain text link
   that matches the .blog-card .text-link style. */
.hub-featured__card .btn--primary{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:transparent;
    color:var(--c-charcoal);
    padding:0;
    margin-top:var(--s-md);
    font-size:.95rem;
    font-weight:500;
    text-decoration:none;
    align-self:flex-start;
}
.hub-featured__card .btn--primary:hover{
    background:transparent;
    color:var(--c-charcoal);
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ── Archive / Search Header ────────────────── */
.archive-header{padding:var(--s-3xl) 0 var(--s-xl);border-bottom:1px solid var(--c-light-grey);margin-bottom:var(--s-2xl)}
.archive-header h1{margin-bottom:var(--s-sm)}
.archive-header p{color:var(--c-text-light);max-width:560px}

/* ── Homepage ───────────────────────────────── */
/* ── Homepage Hero (editorial) ──────────────── */
.home-hero{background:#fff;padding:var(--s-4xl) 0 var(--s-3xl)}
.home-hero h1{color:var(--c-charcoal);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:700;line-height:1.1;letter-spacing:-.025em;margin-bottom:var(--s-md);max-width:78%}
.home-hero__mark{background:linear-gradient(180deg,transparent 15%,var(--c-sun) 15%);padding:0 .15em;line-height:1.05;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.home-hero__copy p{font-size:1.15rem;color:var(--c-slate);line-height:1.6;max-width:60%;margin-bottom:var(--s-2xl)}
.home-hero__cta{display:flex;gap:var(--s-md);flex-wrap:wrap}

/* ── Homepage Pillars (umbrella structure) ─── */
.home-pillars-intro{background:var(--c-off-white);padding:var(--s-3xl) 0 var(--s-xl)}
.home-pillars-section{padding:var(--s-2xl) 0}
.home-pillars-section--grey{background:var(--c-off-white)}
.home-pillars-section--white{background:#fff}
.home-pillars-section:last-of-type{padding-bottom:var(--s-4xl)}

.home-pillars__header{text-align:center;padding:0 var(--s-md)}
.home-pillars__header h2{display:inline-block;color:var(--c-charcoal);font-size:clamp(1.75rem,3vw,2.2rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;margin:0 0 var(--s-md);padding-bottom:var(--s-md);position:relative}
.home-pillars__header h2::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:4px;background:var(--c-sun);border-radius:2px}
.home-pillars__header p{color:var(--c-slate);font-size:1.05rem;margin:0;max-width:760px;margin-left:auto;margin-right:auto;line-height:1.55}

/* Sub-section heading row: H3+sub on left, rule, see-all on right */
.home-pillars__subhead{display:flex;align-items:flex-end;gap:var(--s-md);margin-bottom:var(--s-xl)}
.home-pillars__subhead-text{flex-shrink:0;max-width:60%}
.home-pillars__subhead h3{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:700;color:var(--c-charcoal);margin:0;letter-spacing:-.02em;padding-left:var(--s-sm);border-left:5px solid var(--c-sun);line-height:1.2}
.home-pillars__subhead-text p{font-size:1rem;color:var(--c-slate);margin:8px 0 0;padding-left:calc(var(--s-sm) + 5px);line-height:1.55;max-width:520px}
.home-pillars__rule{flex:1;height:1px;background:rgba(31,41,55,.12);align-self:flex-end;margin-bottom:10px}
/* See-all link in section subheads — plain charcoal text link, no underline
 * by default, charcoal underline on hover. Same treatment used for the
 * "View all tools" link to keep both visually consistent. */
.home-pillars-section a.home-pillars__see-all,
.home-tools a.home-pillars__see-all{font-size:.95rem;color:var(--c-charcoal);font-weight:500;text-decoration:none;white-space:nowrap;align-self:flex-end;margin-bottom:8px}
.home-pillars-section a.home-pillars__see-all:hover,
.home-tools a.home-pillars__see-all:hover{color:var(--c-charcoal);text-decoration:underline;text-decoration-color:var(--c-charcoal);text-decoration-thickness:1.5px;text-underline-offset:3px}
/* The --plain modifier is now a no-op since the base style already has no
 * default underline, but the class is kept on the bills section markup. */
.home-pillars-section a.home-pillars__see-all--plain{}

.home-pillars__grid{display:grid;gap:var(--s-lg)}
.home-pillars__grid--bills{grid-template-columns:1.4fr 1fr 1fr 1fr}
.home-pillars__grid--green{grid-template-columns:repeat(3,1fr)}
.home-pillars__grid--switch-extra{grid-template-columns:repeat(2,1fr);margin-top:var(--s-lg)}

/* Bills section: reuses the .posts-grid + card-article template part so
 * styling is identical to the "More guides" section on category hub pages.
 * Only override here is the top margin to space the grid below the section
 * subhead, since the homepage doesn't have the .hub-articles__header above
 * it that provides that spacing on category pages. */
.home-bills-grid{margin-top:var(--s-lg)}

/* Stacked feature cards under the switching banner — uses hub-featured__card
 * styling (image left, copy right) but stacked vertically, one above the
 * other, to match the editorial aesthetic of the category hub pages. */
.home-switch-features{display:flex;flex-direction:column;gap:var(--s-2xl);margin-top:var(--s-2xl)}
.home-switch-features .hub-featured__card{padding:0}

/* Pillar card — editorial style (no chrome, image-led, matches hub-featured__card) */
.pillar-card{background:transparent;border:none;border-radius:0;overflow:visible;text-decoration:none;display:flex;flex-direction:column;transition:none}
.pillar-card:hover{transform:none;box-shadow:none}
.pillar-card__img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--c-light-grey);border-radius:4px;overflow:hidden;transition:transform 300ms ease}
.pillar-card:hover .pillar-card__img{transform:scale(1.02)}
.pillar-card__img--placeholder{background:linear-gradient(135deg,var(--c-sun) 0%,var(--c-sun-soft) 100%)}
.pillar-card--hub .pillar-card__img{aspect-ratio:16/11}
.pillar-card__body{padding:var(--s-md) 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
.pillar-card__kicker{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--c-sun-deep);text-transform:uppercase;display:inline-block;margin-bottom:2px}
.pillar-card__title{font-size:1rem;font-weight:700;color:var(--c-charcoal);letter-spacing:-.005em;line-height:1.3;transition:color var(--ease)}
.pillar-card:hover .pillar-card__title{color:#0F1620}
.pillar-card__desc{font-size:.85rem;color:var(--c-slate);line-height:1.55;margin:0;flex:1}

/* Featured pillar cards (hub + green tech) match category hub-featured cards */
.pillar-card--hub .pillar-card__title,
.home-pillars__grid--green .pillar-card__title{font-size:1.3rem;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.pillar-card--hub .pillar-card__desc,
.home-pillars__grid--green .pillar-card__desc{font-size:.92rem;line-height:1.7;color:var(--c-text-light)}
.pillar-card:hover .pillar-card__title{text-decoration:underline;text-underline-offset:3px}

/* CTA on featured cards: simple charcoal text-link with arrow (matches hub-featured__card .btn--primary) */
.pillar-card__cta{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--c-charcoal);padding:0;margin-top:var(--s-md);font-size:.95rem;font-weight:500;text-decoration:none;align-self:flex-start;border:none}
.pillar-card:hover .pillar-card__cta{text-decoration:underline;text-underline-offset:3px}

/* Hub card "Read more" rendered as a solid charcoal button (matches the
 * newsletter Subscribe button used elsewhere on the homepage). */
.pillar-card--hub .pillar-card__cta{background:var(--c-charcoal);color:#fff;padding:11px 22px;border-radius:4px;font-size:.95rem;font-weight:500;transition:background var(--ease)}
.pillar-card--hub:hover .pillar-card__cta{background:#0F1620;color:#fff;text-decoration:none}

/* Switching banner — keep its panel chrome (it's the call-to-action, intentionally distinct) */
.switch-banner{display:grid;grid-template-columns:1.3fr 1fr;background:var(--c-sun);border-radius:4px;overflow:hidden;text-decoration:none;transition:transform var(--ease),box-shadow var(--ease)}
.switch-banner:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(245,165,36,.35)}
.switch-banner__text{padding:var(--s-2xl) var(--s-2xl) var(--s-xl);color:var(--c-charcoal)}
.switch-banner__kicker{display:inline-block;background:var(--c-charcoal);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:var(--s-sm)}
.switch-banner h4{font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:700;color:var(--c-charcoal);line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--s-xs)}
.switch-banner p{font-size:.95rem;color:var(--c-charcoal);opacity:.85;line-height:1.6;margin:0 0 var(--s-lg);max-width:440px}
.switch-banner__btn{display:inline-block;background:var(--c-charcoal);color:#fff;padding:11px 22px;border-radius:5px;font-size:.9rem;font-weight:500;transition:background var(--ease)}
.switch-banner:hover .switch-banner__btn{background:#0F1620}
.switch-banner__illus{background:linear-gradient(135deg,#FFB838 0%,var(--c-sun-soft) 100%);position:relative;display:flex;align-items:center;justify-content:center;color:rgba(31,41,55,.4);min-height:200px}
.switch-banner__illus svg{width:80px;height:80px}

.section{padding:var(--s-4xl) 0}
.section--alt{background:var(--c-off-white)}
.section__header{text-align:center;max-width:580px;margin:0 auto var(--s-3xl)}
.section__label{display:inline-block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--c-accent);margin-bottom:var(--s-sm)}
.section__header p{color:var(--c-text-light)}

.topics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-lg)}
.topic-card{background:var(--c-white);border:1px solid var(--c-light-grey);border-radius:var(--radius-lg);padding:var(--s-2xl) var(--s-xl);text-decoration:none;transition:all var(--ease);display:block}
.topic-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.07);border-color:var(--c-border)}
.topic-card__icon{font-size:1.6rem;margin-bottom:var(--s-md)}
.topic-card h3{font-size:1.05rem;margin-bottom:var(--s-sm)}
.topic-card p{font-size:.88rem;color:var(--c-text-light);margin-bottom:var(--s-md)}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-xl);text-align:center;padding:var(--s-3xl) 0}
.stat__number{font-size:2.2rem;font-weight:600;color:var(--c-navy);line-height:1;margin-bottom:6px}
.stat__label{font-size:.85rem;color:var(--c-text-light)}

/* ── Homepage newsletter (sun-yellow centred panel) ─── */
.home-newsletter{background:#fff;padding:0 0 var(--s-4xl)}
.home-newsletter__panel{background:var(--c-sun);border-radius:4px;padding:var(--s-3xl) var(--s-2xl);text-align:center;color:var(--c-charcoal)}
.home-newsletter__kicker{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:var(--s-md);background:var(--c-charcoal);color:#fff}
.home-newsletter h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--s-sm);color:var(--c-charcoal)}
/* White marker line behind "energy bills" — mirrors the amber hero mark but
 * uses white so it reads against the sun-yellow newsletter panel. */
.home-newsletter__mark{background:linear-gradient(180deg,transparent 15%,#fff 15%);padding:0 .15em;line-height:1.05;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Widen the lead paragraph so the text fills more of the panel width and the
 * gap between text and the panel edge feels balanced (was max-width:600px). */
.home-newsletter__lead{font-size:1.05rem;line-height:1.6;margin:0 auto var(--s-lg);color:var(--c-charcoal);opacity:.85;max-width:880px}
.home-newsletter__cta{display:inline-block;background:var(--c-charcoal);color:#fff;font-size:1rem;font-weight:500;padding:13px 26px;border-radius:4px;text-decoration:none;transition:background var(--ease)}
.home-newsletter__cta:hover{background:#0F1620;color:#fff}
.home-newsletter__meta{font-size:.8rem;opacity:.6;margin:var(--s-md) 0 0;color:var(--c-charcoal)}

/* ── Footer ─────────────────────────────────── */
.site-footer{background:var(--c-footer-bg);color:var(--c-slate);font-size:1rem}
.site-footer a{color:var(--c-slate);text-decoration:none;transition:color var(--ease)}
.site-footer a:hover{color:var(--c-charcoal)}
.footer-main{padding:var(--s-4xl) 0 var(--s-2xl);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-3xl)}
.footer-brand p{margin-top:var(--s-md);font-size:1rem;line-height:1.7;max-width:320px}
.footer-col__title{font-size:1.15rem;font-weight:700;color:var(--c-charcoal);margin-bottom:var(--s-lg);letter-spacing:-.005em}
.footer-col ul li{margin-bottom:12px}
.footer-col ul li a{font-size:1rem}
.footer-newsletter p{font-size:1rem!important;line-height:1.7;margin-bottom:var(--s-lg)!important}
.footer-newsletter .btn{margin-top:var(--s-sm)!important;white-space:nowrap!important;width:auto!important;max-width:none!important;min-width:0!important;display:inline-flex!important;flex-wrap:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;font-size:.95rem!important;padding:14px 26px!important;line-height:1!important;height:auto!important;background:var(--c-charcoal)!important;border-radius:6px!important;font-weight:500!important}
.footer-newsletter .btn:hover{background:#0F1620!important}
.site-footer .footer-newsletter a.btn--primary,
.site-footer .footer-newsletter a.btn--primary:hover,
.site-footer .footer-newsletter a.btn--primary:focus{color:#fff}
.footer-bar{background:#fff;padding:var(--s-lg) 0;border-top:1px solid #D2DCE6}
.footer-bar .site-container{display:flex;justify-content:space-between;align-items:center}
.footer-bar__name{font-size:.9rem;color:var(--c-text-light)}
.footer-bar__links{display:flex;gap:var(--s-lg)}
.footer-bar__links a{font-size:.88rem;color:var(--c-text-light);text-decoration:none}
.footer-bar__links a:hover{color:var(--c-heading)}

/* ── Glossary ───────────────────────────────── */
.glossary-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:var(--s-2xl);padding:var(--s-md);background:var(--c-off-white);border-radius:var(--radius)}
.glossary-nav a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;font-weight:500;font-size:.85rem;color:var(--c-navy);text-decoration:none;transition:all var(--ease)}
.glossary-nav a:hover,.glossary-nav a.active{background:var(--c-navy);color:#fff}
.glossary-letter{margin-bottom:var(--s-2xl)}
.glossary-letter__heading{font-size:1.5rem;color:var(--c-navy);padding-bottom:var(--s-sm);border-bottom:2px solid var(--c-light-grey);margin-bottom:var(--s-lg)}
.glossary-term{margin-bottom:var(--s-md);padding:var(--s-lg);background:var(--c-white);border:1px solid var(--c-light-grey);border-radius:var(--radius)}
.glossary-term dt{font-weight:600;font-size:1rem;color:var(--c-heading);margin-bottom:4px}
.glossary-term dd{color:var(--c-text-light);font-size:.92rem;line-height:1.7}

/* ── About ──────────────────────────────────── */
.about-mission{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3xl);align-items:center}
.about-mission__image{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--c-off-white)}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}
.value-card{text-align:center;padding:var(--s-xl)}
.value-card__icon{width:56px;height:56px;border-radius:50%;background:var(--c-off-white);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-md);font-size:1.4rem}

/* ── Tips Hub ───────────────────────────────── */
.tips-hero{background:var(--c-off-white);padding:var(--s-3xl) 0;text-align:center}
.tips-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:var(--s-xl)}
.tips-filters a{padding:8px 20px;background:var(--c-white);border:1px solid var(--c-border);border-radius:50px;font-size:.84rem;font-weight:500;color:var(--c-text);text-decoration:none;transition:all var(--ease)}
.tips-filters a:hover,.tips-filters a.active{background:var(--c-navy);color:#fff;border-color:var(--c-navy)}

/* ── Search Form ────────────────────────────── */
.search-form{display:flex;gap:var(--s-sm)}
.search-form__input{flex:1;padding:10px 16px;border:2px solid var(--c-light-grey);border-radius:4px;font-family:var(--font);font-size:.9rem;outline:none;transition:border-color var(--ease)}
.search-form__input:focus{border-color:var(--c-navy)}

/* ── 404 ────────────────────────────────────── */
.error-404{text-align:center;padding:var(--s-4xl) 0}
.error-404__number{font-size:clamp(5rem,12vw,10rem);font-weight:600;color:var(--c-light-grey);line-height:1}

/* ── Pagination ─────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:6px;padding:var(--s-3xl) 0}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--s-md);border:1px solid var(--c-light-grey);border-radius:4px;font-weight:500;font-size:.88rem;text-decoration:none;transition:all var(--ease)}
.pagination a:hover{border-color:var(--c-navy);color:var(--c-navy)}
.pagination .current{background:var(--c-navy);color:#fff;border-color:var(--c-navy)}

/* ── Scroll Top ─────────────────────────────── */
.scroll-top{position:fixed;bottom:24px;right:24px;width:42px;height:42px;border-radius:50%;background:var(--c-navy);color:#fff;border:none;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:all var(--ease);box-shadow:0 2px 10px rgba(0,0,0,.15);z-index:999}
.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:var(--c-navy-light);transform:translateY(-2px)}

/* ── Responsive ─────────────────────────────── */
@media(max-width:1024px){
  .post-hero__grid{grid-template-columns:1fr;min-height:0}
  .post-hero__left{padding:var(--s-2xl) var(--s-xl) var(--s-lg);gap:var(--s-lg)}
  .post-hero__image{min-height:280px;max-height:360px}
  .home-hero h1{max-width:90%}
  .home-hero__copy p{max-width:80%}
  .home-pillars__subhead-text{max-width:75%}
  .home-pillars__grid--bills{grid-template-columns:repeat(2,1fr)}
  .home-bills-clusters{grid-template-columns:repeat(2,1fr)}
  .home-bills-features{grid-template-columns:repeat(2,1fr)}
  .home-pillars__grid--green{grid-template-columns:repeat(2,1fr)}
  .home-pillars__grid--green .pillar-card:nth-child(3){grid-column:1 / -1}
  .home-pillars__grid--green .pillar-card:nth-child(3) .pillar-card__img{aspect-ratio:21/9}
  .switch-banner{grid-template-columns:1fr}
  .switch-banner__illus{min-height:140px;order:2}
  .posts-grid{grid-template-columns:1fr 1fr}
  .footer-main{grid-template-columns:1fr 1fr}
  .about-mission{grid-template-columns:1fr}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--s-3xl:2.5rem;--s-4xl:3.5rem}
  .site-header{padding:16px 16px 0}
  .header-shell{padding:12px 16px;border-radius:18px;gap:12px}
  .site-logo__img{height:34px;max-width:170px}
  .menu-toggle{display:inline-flex}
  .header-subscribe-button{padding:10px 12px}
  .header-subscribe-button__label{display:none}
  .main-nav{display:none;position:absolute;top:calc(100% + 8px);left:16px;right:16px;background:linear-gradient(135deg,#071426 0%,#10213a 55%,#071426 100%);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 14px 32px rgba(7,20,38,.35);padding:12px;z-index:100}
  .main-nav.open{display:block}
  .main-nav__list{flex-direction:column!important;align-items:stretch!important;gap:2px!important;width:100%}
  .main-nav__list>li{width:100%}
  .main-nav__list>li>a{padding:12px 14px;font-size:1rem;border-radius:10px}
  .main-nav__list .sub-menu{position:static;transform:none;box-shadow:none;border:none;background:transparent;padding:4px 0 4px 14px;min-width:0}
  .posts-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:var(--s-xl)}
  .footer-bar .site-container{flex-direction:column;gap:var(--s-sm);text-align:center}
  .footer-bar__links{flex-wrap:wrap;justify-content:center}
  .about-values{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .stats-bar{grid-template-columns:1fr}
  .post-contributors__inner{flex-direction:column;gap:var(--s-md)}
  .at-a-glance{padding:var(--s-lg)}
  .home-hero h1{font-size:1.85rem;max-width:100%}
  .home-hero__copy p{max-width:100%;font-size:1rem}
  .home-pillars__grid--bills,
  .home-pillars__grid--green,
  .home-pillars__grid--switch-extra,
  .home-bills-clusters{grid-template-columns:1fr}
  .home-bills-features{grid-template-columns:1fr}
  .home-pillars__grid--green .pillar-card:nth-child(3){grid-column:auto}
  .home-pillars__grid--green .pillar-card:nth-child(3) .pillar-card__img{aspect-ratio:16/9}
  .home-pillars__see-all{display:none}
  .home-pillars__rule{display:none}
  .home-pillars__subhead-text{max-width:100%}
  .switch-banner__text{padding:var(--s-xl) var(--s-lg) var(--s-lg)}
  .site-container{padding:0 var(--s-md)}
  .blog-section__header{flex-direction:column;align-items:flex-start;gap:var(--s-sm)}
}

/* ── Accessibility ──────────────────────────── */
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--c-white);border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:var(--c-heading);display:block;font-size:.9rem;font-weight:600;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
:focus-visible{outline:2px solid var(--c-link);outline-offset:2px}

/* WP defaults */
.wp-block-image{margin:var(--s-xl) 0}
.aligncenter{text-align:center}
.alignleft{float:left;margin-right:var(--s-lg)}
.alignright{float:right;margin-left:var(--s-lg)}

/* ── Topic Hub Pages ────────────────────────── */

/* Hub hero — flat amber by default, photo background with charcoal overlay when a featured
   image is set. An amber square mark sits at the bottom-centre on both variants, carrying
   the brand thread. The 6px charcoal strip is rendered via border-bottom so it works
   identically on both variants without needing extra elements. */
.hub-hero{
    padding:var(--s-4xl) 0 calc(var(--s-3xl) + var(--s-xl));
    background:var(--c-sun);
    border-bottom:6px solid var(--c-charcoal);
    color:var(--c-charcoal);
    position:relative;
    overflow:hidden;
}
.hub-hero .site-container{position:relative;z-index:2}
.hub-hero__content{max-width:720px}

/* Text colours — flat-amber default */
.hub-hero__content h1{color:var(--c-charcoal);margin-bottom:var(--s-md);font-size:clamp(2rem,4.5vw,3rem);line-height:1.1}
.hub-hero__content .section__label{color:var(--c-sun-text)}
.hub-hero__intro{font-size:1.1rem;color:var(--c-sun-text);line-height:1.7}
.hub-hero__intro p{margin-bottom:0;color:var(--c-sun-text)}

/* Photo background — re-enabled for hubs with a featured image.
   The photo sits as an absolute layer inside the hero (above background, below content). */
.hub-hero--has-image{background:var(--c-charcoal);color:#fff}
.hub-hero--has-image .hub-hero__bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    z-index:0;
}
/* Charcoal overlay sits above the photo, below the content */
.hub-hero--has-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(31,41,55,0.62);
    z-index:1;
    pointer-events:none;
}
/* Text colours — photo variant (override the fallback) */
.hub-hero--has-image .hub-hero__content h1{color:#fff}
.hub-hero--has-image .hub-hero__content .section__label{color:var(--c-sun)}
.hub-hero--has-image .hub-hero__intro,
.hub-hero--has-image .hub-hero__intro p{color:rgba(255,255,255,0.85)}

/* ── Page hero ─────────────────────────────────────────────────
 * Default hero for standalone pages (page.php) and the Tools hub.
 * Clean white background, charcoal pill kicker, large headline, muted
 * subhead, optional meta line. Pillar/topic-hub pages still use
 * .hub-hero / .hub-hero--data — this is for everything else.
 *
 * Kicker matches .hub-hero-data__kicker (suppliers-and-tariffs hub) so
 * the brand thread is consistent across page heroes.
 */
.page-hero{
    background:#fff;
    padding:var(--s-3xl) 0;
    color:var(--c-charcoal);
}
.page-hero__content{max-width:760px}
.page-hero__kicker{
    display:inline-block;
    background:var(--c-charcoal);
    color:#fff;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:3px;
    margin-bottom:var(--s-md);
}
.page-hero__title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    line-height:1.18;
    letter-spacing:-.025em;
    color:var(--c-charcoal);
    margin:0 0 var(--s-md);
}
.page-hero__subtitle{
    font-size:1.05rem;
    line-height:1.6;
    color:var(--c-text-light);
    margin:0 0 var(--s-lg);
    max-width:600px;
}
.page-hero__meta{
    display:flex;
    align-items:center;
    gap:var(--s-sm);
    font-size:.85rem;
    color:var(--c-text-light);
}
.page-hero__meta-sep{color:var(--c-light-grey)}

/* Breadcrumb trail inside the page hero — mirrors the structure and
 * size of .post-hero__breadcrumbs (used on blog post heroes), but with
 * colours adapted for the white page-hero background.
 */
.page-hero__breadcrumbs{
    font-size:.8rem;
    color:var(--c-text-light);
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:var(--s-lg);
}
.page-hero__breadcrumbs a{color:var(--c-charcoal);text-decoration:none;font-weight:500}
.page-hero__breadcrumbs a:hover{text-decoration:underline}
.page-hero__breadcrumbs .sep{color:var(--c-mid-grey)}
.page-hero__breadcrumbs-current{color:var(--c-text-light)}

/* Featured image alongside the hero content. Active only when the
 * .page-hero--has-image modifier is present on the section (added by
 * page.php when has_post_thumbnail() is true). Without a featured
 * image the layout collapses to single column — pages on the default
 * template that don't set a featured image render exactly as before.
 *
 * Mirrors the blog post hero pattern (.post-hero__grid + .post-hero__image)
 * but adapted for the white .page-hero: no bleed to the page edge,
 * content stays inside .site-container, image rounded to match the
 * editorial style.
 */
.page-hero--has-image .page-hero__layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--s-3xl);
    align-items:center;
}
.page-hero--has-image .page-hero__content{
    /* Content column drops the 760px clamp so it can size to its grid
     * cell instead — keeps the image and text balanced side by side. */
    max-width:none;
}
.page-hero__image{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    aspect-ratio:4 / 3;
}
.page-hero__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
@media(max-width:900px){
    .page-hero--has-image .page-hero__layout{
        grid-template-columns:1fr;
        gap:var(--s-xl);
    }
    .page-hero__image{
        aspect-ratio:16 / 9;
        max-height:360px;
    }
}

@media(max-width:600px){
    .page-hero{padding:var(--s-2xl) 0}
}

/* Category archives, the Tools Hub, topic hubs, and the blog index —
 * soft background below the hero. Applied via:
 *   - `category-archive` body class (see soeb_category_archive_body_class)
 *     on /category/{slug}/ pages.
 *   - `page-template-template-tools` — added automatically by WordPress to
 *     the Tools Hub page itself (/tools/), so the hub uses the soft
 *     background for its long-card list.
 *   - `page-template-template-hub` — pillar / topic-hub pages.
 *   - `blog` — the posts-page index.
 *
 * v3.17.6: `body.tool-page` was removed from this list. Individual tool
 * pages (children of the Tools Hub) now render through the unified
 * .soeb-article hero in page.php — same as every other default page —
 * which expects a white body underneath. The `.tool-page` body class is
 * still added in functions.php and remains available for future
 * tool-specific overrides if needed.
 */
/* v3.19.3 — Topic-hub pages (template-hub.php) and category archives
   previously sat on a soft #f7f7f8 surface. That caused a visible grey
   band hugging the white .hub-hero / .page-hero block (most obvious on
   /suppliers-and-tariffs/, /heat-pumps/ etc), so those two were dropped
   from this rule. The Tools hub and blog index still use the soft
   surface because their card grids are designed against it. */
body.page-template-template-tools,
body.blog{background:#f7f7f8}

/* Featured "Start here" card */
.hub-featured{
    padding:var(--s-3xl) 0;
    border-bottom:1px solid var(--c-light-grey);
}
.hub-featured__label{margin-bottom:var(--s-lg)}
.hub-featured__card{
    display:grid;
    grid-template-columns:45% 1fr;
    gap:var(--s-2xl);
    align-items:center;
    background:transparent;
    border-radius:0;
    overflow:visible;
    border:none;
}
.hub-featured__card > *{
    min-width:0;
}
.hub-featured__image{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:4px;
}
.hub-featured__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 300ms ease;
    display:block;
}
.hub-featured__card:hover .hub-featured__image img{
    transform:scale(1.02);
}
.hub-featured__body{
    padding:0;
}
.hub-featured__title{
    font-size:1.3rem;
    line-height:1.35;
    margin-bottom:var(--s-sm);
}
.hub-featured__title a{
    color:var(--c-heading);
    text-decoration:none;
}
.hub-featured__title a:hover{text-decoration:underline}
.hub-featured__excerpt{
    font-size:.92rem;
    color:var(--c-text-light);
    line-height:1.7;
    margin-bottom:var(--s-sm);
}
.hub-featured__meta{
    display:flex;
    gap:var(--s-md);
    font-size:.78rem;
    color:var(--c-mid-grey);
}

/* Articles grid section */
.hub-articles{
    padding:var(--s-3xl) 0;
}
.hub-articles__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:var(--s-xl);
}
.hub-articles__header h2{
    font-size:1.15rem;
    margin-bottom:0;
}

/* Responsive */
@media(max-width:768px){
    .hub-featured__card{
        grid-template-columns:1fr;
        gap:var(--s-md);
    }
    .hub-featured__body{
        padding:0;
    }
}

/* ── Category Hub additions ─────────────────── */

/* Hero meta row (post count + last updated) */
.hub-hero__meta{
    display:flex;
    align-items:center;
    gap:var(--s-sm);
    margin-top:var(--s-lg);
    font-size:.85rem;
    color:var(--c-sun-text);
    letter-spacing:.02em;
}
.hub-hero__meta-sep{color:var(--c-sun-text)}
/* Photo variant — light text on overlay */
.hub-hero--has-image .hub-hero__meta,
.hub-hero--has-image .hub-hero__meta-sep{color:rgba(255,255,255,0.75)}

/* Single-pillar card — styled to match the wide 3rd card on the
   renewable-energy hub. Image goes flush to the edges of the card,
   body has its own padding, hover lifts + shadow. */
a.hub-featured__card{
    text-decoration:none;
    color:inherit;
    padding:0;
    gap:var(--s-2xl);
}
a.hub-featured__card:hover .hub-featured__title{
    text-decoration:underline;
    text-underline-offset:3px;
}
a.hub-featured__card,
a.hub-featured__card *{
    text-decoration:none;
}
a.hub-featured__card .hub-featured__image{
    border-radius:4px;
}
a.hub-featured__card .hub-featured__body{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
a.hub-featured__card .hub-featured__title{
    color:var(--c-heading);
}
a.hub-featured__card .hub-featured__excerpt{
    display:block;
}
a.hub-featured__card .hub-featured__meta{
    display:flex;
    gap:var(--s-md);
    margin-bottom:var(--s-md);
}
a.hub-featured__card .hub-featured__meta .tag{
    display:inline-block;
}
a.hub-featured__card .btn{
    display:inline-flex;
    align-self:flex-start;
}
a.hub-featured__card .hub-featured__body > .tag-box,
.hub-featured__body > .tag-box{
    display:inline-block;
    align-self:flex-start;
    margin-bottom:var(--s-sm);
}

/* Multi-pillar grid — for categories with several sub-topics */
.hub-pillars{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:var(--s-xl);
}
.hub-pillar-card{
    display:flex;
    flex-direction:column;
    background:transparent;
    border:none;
    border-radius:0;
    overflow:visible;
    text-decoration:none;
    color:inherit;
}
.hub-pillar-card:hover .hub-pillar-card__title{
    text-decoration:underline;
    text-underline-offset:3px;
}
.hub-pillar-card__image{
    position:relative;
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:4px;
    margin-bottom:var(--s-md);
}
.hub-pillar-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 300ms ease;
    display:block;
}
.hub-pillar-card:hover .hub-pillar-card__image img{
    transform:scale(1.02);
}
.hub-pillar-card__body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:0;
}
.hub-pillar-card__label{
    color:var(--c-accent);
    margin-bottom:var(--s-sm);
}
.hub-pillar-card__title{
    font-size:1.2rem;
    line-height:1.35;
    margin-bottom:var(--s-sm);
    color:var(--c-heading);
}
.hub-pillar-card__excerpt{
    display:block;
    font-size:.9rem;
    color:var(--c-text-light);
    line-height:1.65;
    margin-bottom:var(--s-md);
    flex:1;
}
.hub-pillar-card__meta{
    display:flex;
    gap:var(--s-md);
    font-size:.78rem;
    color:var(--c-mid-grey);
    margin-bottom:var(--s-md);
}
.hub-pillar-card__meta .tag{
    display:inline-block;
}
.hub-pillar-card__cta{
    display:inline-block;
    align-self:flex-start;
    margin-top:auto;
    padding:0;
    background:transparent;
    color:var(--c-charcoal);
    font-size:.85rem;
    font-weight:500;
    border-radius:0;
}
.hub-pillar-card:hover .hub-pillar-card__cta{
    background:transparent;
    text-decoration:underline;
    text-underline-offset:3px;
}

/* Renewable energy layout: 2 cards on top row, 3rd card spans full width below.
   Uses an explicit 2-column grid so the :nth-child(3) can span both columns. */
.category-renewable-energy .hub-pillars{
    grid-template-columns:repeat(2, 1fr);
}
.category-renewable-energy .hub-pillars > .hub-pillar-card:nth-child(3){
    grid-column:1 / -1;
    flex-direction:row;
}
.category-renewable-energy .hub-pillars > .hub-pillar-card:nth-child(3) .hub-pillar-card__image{
    flex:0 0 45%;
    aspect-ratio:16/10;
}
.category-renewable-energy .hub-pillars > .hub-pillar-card:nth-child(3) .hub-pillar-card__body{
    flex:1;
    justify-content:center;
}

@media(max-width:768px){
    .category-renewable-energy .hub-pillars{
        grid-template-columns:1fr;
    }
    .category-renewable-energy .hub-pillars > .hub-pillar-card:nth-child(3){
        flex-direction:column;
    }
    .category-renewable-energy .hub-pillars > .hub-pillar-card:nth-child(3) .hub-pillar-card__image{
        flex:none;
    }
}

/* Related topics strip */
.hub-related{
    padding:var(--s-2xl) 0 var(--s-3xl);
    border-top:1px solid var(--c-light-grey);
}
.hub-related__title{
    font-size:1.15rem;
    margin-bottom:var(--s-lg);
}
.hub-related__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--s-md);
}
.hub-related__card{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:var(--s-md) var(--s-lg);
    background:var(--c-off-white);
    border:1px solid var(--c-light-grey);
    border-radius:var(--radius-md, 8px);
    text-decoration:none;
    transition:border-color 200ms ease, transform 200ms ease;
}
.hub-related__card:hover{
    border-color:var(--c-accent);
    transform:translateY(-2px);
}
.hub-related__name{
    font-weight:600;
    color:var(--c-heading);
}
.hub-related__count{
    font-size:.78rem;
    color:var(--c-text-light);
}

@media(max-width:768px){
    .hub-pillars{
        grid-template-columns:1fr;
    }
    .hub-hero__meta{
        flex-wrap:wrap;
    }
}

/* ── Nuclear nav fix — overrides all WP menu markup ── */
#menu-main-menu,
.site-header ul,
.main-header ul,
#primary-nav ul,
#primary-nav > ul,
.main-nav > ul,
.main-nav__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#menu-main-menu li,
.site-header li,
.main-header li,
#primary-nav li,
.main-nav li,
.main-nav__list li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}
#menu-main-menu li::before,
#menu-main-menu li::marker,
.site-header li::before,
.site-header li::marker,
#primary-nav li::before,
#primary-nav li::marker {
    display: none !important;
    content: none !important;
}
/* Sub-menus should still be vertical */
.main-nav__list>li.menu-item-has-children::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px;background:transparent}
.main-nav .sub-menu,
.main-nav__list .sub-menu,
#primary-nav .sub-menu {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    background: #0b1b31 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 32px rgba(7,20,38,.35) !important;
    min-width: 220px;
    padding: 8px !important;
    z-index: 100;
}
.main-nav .sub-menu li,
.main-nav__list .sub-menu li,
#primary-nav .sub-menu li {
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
}
.main-nav .sub-menu a,
.main-nav__list .sub-menu a,
#primary-nav .sub-menu a {
    padding: 8px 12px !important;
    margin: 0 !important;
    text-indent: 0 !important;
    font-size: .88rem;
    color: rgba(255,255,255,.92) !important;
    background: transparent !important;
    border-radius: 8px !important;
    display: block !important;
}
.main-nav .sub-menu a:hover,
.main-nav__list .sub-menu a:hover,
#primary-nav .sub-menu a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}
.main-nav li:hover > .sub-menu,
.main-nav__list li:hover > .sub-menu,
#primary-nav li:hover > .sub-menu {
    display: flex !important;
}
/* Footer lists — also no bullets */
.site-footer ul,
.site-footer li,
.footer-col ul,
.footer-col li,
.footer-bar__links li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-bar__links li::before,
.footer-bar__links li::marker,
.footer-col li::before,
.footer-col li::marker {
    display: none !important;
    content: none !important;
}
/* v3.19.3 — Removed a stale @media(max-width:768px) .main-nav override
   that set background:var(--c-white) and beat the proper navy-gradient
   rule earlier in this file (line ~652). With white-on-white link text
   the open mobile drawer rendered completely blank. The earlier rule
   (navy gradient + white text) is the source of truth and now wins. */
@media(max-width:768px){
    .main-nav.open ul,
    .main-nav.open .main-nav__list,
    #primary-nav.open ul {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ── Logo images ───────────────────────────── */
.site-logo__img{height:48px;width:auto;display:block}
.site-logo--footer .site-logo__img{height:44px}

/* ── Footer widget titles ──────────────────── */
.site-footer .widget-title,
.site-footer .widget h2,
.site-footer .widget h3,
.site-footer .widget h4,
.site-footer h2.widget-title,
.site-footer h3.widget-title,
.site-footer h4.widget-title{
    color:var(--c-charcoal)!important;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:var(--s-lg);
}

/* ── Two-column post layout (content + TOC sidebar) ── */
.post-layout{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:var(--s-3xl);
    align-items:start;
    padding-top:var(--s-2xl);
}
.post-layout__sidebar{
    position:static;
    padding-top:var(--s-md);
}
@media(max-width:1024px){
    .post-layout{
        grid-template-columns:1fr;
        gap:0;
        padding-top:var(--s-xl);
    }
    .post-layout__sidebar{
        position:static;
        order:-1;
        margin-bottom:var(--s-xl);
    }
}

/* ── Table of Contents (article sidebar — soft white card) ───────────────────
 * Editorial-feeling card that anchors the sticky sidebar. White background,
 * 1px border, rounded corners and a very subtle drop shadow. Numbered list
 * with subtle dividers between items. Sticks to viewport on desktop; layout
 * media query below 1080px restacks it above the body content. */
.soeb-toc{
    background:#ffffff;
    border:1px solid #E2E8F0;
    border-radius:22px;
    padding:22px 22px 8px;
    box-shadow:0 18px 45px rgba(15,23,42,.06);
    position:static; /* sticky behaviour is owned by .soeb-article__sidebar */
}
.soeb-toc__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:4px;
    border-bottom:1px solid #DCE7EF;
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
}
.soeb-toc__title{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:.944rem; /* ~17px */
    font-weight:700;
    color:#111827;
    letter-spacing:-.005em;
    margin:0;
}
.soeb-toc__title svg{
    flex-shrink:0;
    color:#94a3b3;
}
.soeb-toc__toggle{
    background:none;
    border:none;
    padding:4px;
    color:#94a3b3;
    transition:transform var(--ease), color var(--ease);
    display:flex;
    align-items:center;
}
.soeb-toc__toggle:hover{color:#475569}
.soeb-toc__toggle.collapsed{
    transform:rotate(-180deg);
}
.soeb-toc__list{
    list-style:none!important;
    padding:0!important;
    margin:0!important;
}
.soeb-toc__list li{
    list-style:none!important;
    margin:0!important;
    padding:0!important;
    border-bottom:1px solid #DCE7EF;
}
.soeb-toc__list li:last-child{border-bottom:0}
.soeb-toc__list li::before,
.soeb-toc__list li::marker{
    display:none!important;
    content:none!important;
}
.soeb-toc__list a{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:12px;
    align-items:baseline;
    padding:11px 0;
    font-size:.833rem; /* ~15px */
    line-height:1.45;
    font-weight:500;
    color:#475569;
    text-decoration:none;
    border-radius:0;
    transition:color .15s ease;
}
.soeb-toc__list a:focus-visible{
    outline:2px solid var(--sa-blue,#377D94);
    outline-offset:3px;
    border-radius:6px;
}
.soeb-toc__list a:hover{color:#111827}
.soeb-toc__list a.active{
    color:#111827;
    font-weight:600;
}
.soeb-toc__list a .soeb-toc__num{
    font-size:.72rem; /* ~13px */
    font-weight:700;
    color:#94a3b3;
    width:22px;height:22px;
    border:1px solid #E2E8F0;
    border-radius:7px;
    display:inline-grid;
    place-items:center;
    background:#fff;
    flex-shrink:0;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.soeb-toc__list a:hover .soeb-toc__num{
    color:#475569;
    border-color:#cfd8e3;
}
.soeb-toc__list a.active .soeb-toc__num{
    background:#fff8eb;
    color:#7c5500;
    border-color:#f7d99b;
}
.soeb-toc__list--h3 a{
    padding-left:26px;
    font-size:.78rem;
}
@media(max-width:1080px){
    .soeb-toc{
        padding:20px 20px 6px;
    }
}

/* ── Homepage: per-category sections (2 stacked cards + 1 wide card) ── */
.home-cat__header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-lg);margin-bottom:var(--s-xl);flex-wrap:wrap}
.home-cat__title{margin:0;font-size:1.75rem}
.home-cat__view-all{font-weight:600;color:var(--c-accent,#e13a3a);text-decoration:none;white-space:nowrap}
.home-cat__view-all:hover{text-decoration:underline}

.home-cat__top{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-xl);margin-bottom:var(--s-xl)}
.home-cat__bottom{display:block}

@media (max-width:720px){
    .home-cat__top{grid-template-columns:1fr}
}

/* Stacked variant: image on top, body below (used on top-row cards) */
.hub-featured__card--stacked{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
}
.hub-featured__card--stacked .hub-featured__image{
    width:100%;
    aspect-ratio:16/10;
    height:auto;
}
.hub-featured__card--stacked .hub-featured__body{
    display:flex;
    flex-direction:column;
}

/* Wide variant: default two-column layout is already correct — this just scopes the
   title sizing so the bottom card reads as the prominent "main" card of the section */
.hub-featured__card--wide .hub-featured__title{font-size:1.5rem}

@media(max-width:768px){
    .hub-featured__card--wide{display:flex;flex-direction:column}
    .hub-featured__card--wide .hub-featured__image{aspect-ratio:16/10;height:auto;width:100%}
}

/* ── Direct Debit Calculator page layout ── */
.ddc-intro{margin:0 0 var(--s-2xl);text-align:left}
.ddc-intro p{font-size:1.05rem;color:var(--c-text-light);margin-bottom:var(--s-md)}
.ddc-needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-sm) var(--s-lg);list-style:none;padding:var(--s-md) var(--s-lg);margin:0;background:var(--c-off-white);border:1px solid var(--c-light-grey);border-radius:var(--radius-md);text-align:left}
.ddc-needs li{font-size:.92rem;color:var(--c-text);padding-left:1.4em;position:relative}
.ddc-needs li::before{content:"✓";position:absolute;left:0;color:var(--c-accent);font-weight:700}

.ddc-card{background:var(--c-off-white);border:1px solid var(--c-light-grey);border-radius:var(--radius-lg);padding:var(--s-2xl);margin-bottom:var(--s-2xl)}
.ddc-card__title{margin:0 0 var(--s-lg);font-size:1.2rem}
.ddc-fieldset{border:none;padding:0;margin:0 0 var(--s-xl)}
.ddc-fieldset:last-child{margin-bottom:0}
.ddc-fieldset legend{font-weight:700;font-size:1.05rem;margin-bottom:var(--s-md);padding:0;color:var(--c-heading)}
.ddc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-md) var(--s-lg)}
.ddc-two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xl);margin-bottom:var(--s-xl)}
@media(max-width:720px){.ddc-two-col{grid-template-columns:1fr}}

.ddc-submit{display:flex;justify-content:flex-start;margin-top:var(--s-lg)}

.ddc-results{background:#fff;border:2px solid var(--c-accent);border-radius:var(--radius-lg);padding:var(--s-2xl);margin:var(--s-2xl) 0}
.ddc-results__label{display:inline-block;background:var(--c-accent);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25em .7em;border-radius:4px;margin-bottom:var(--s-md)}
.ddc-results__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-xl)}
.ddc-results h3{font-size:1.05rem;margin:0 0 var(--s-sm)}
.ddc-results__value{font-size:1.6rem;font-weight:700;color:var(--c-heading);margin:0}
.ddc-results__sub{font-size:.85rem;color:var(--c-text-light);margin-top:.25em}

.ddc-divider{border:none;border-top:1px solid var(--c-light-grey);margin:var(--s-3xl) 0;max-width:160px}
.ddc-explainer-intro{text-align:left;color:var(--c-text-light);margin-bottom:var(--s-2xl);font-style:italic}

/* ── Tools hub: one "long" card per row ── */
.tools-hub__list{display:flex;flex-direction:column;gap:var(--s-xl);max-width:960px;margin:0}
.tools-hub__list .hub-featured__card--wide{width:100%}

/* ── Newsletter landing page ── */

/* Hero (white background, matches the homepage hero treatment) */
.newsletter-lp__hero-section{background:#fff;padding:var(--s-3xl) 0 var(--s-3xl)}
.newsletter-lp__hero{text-align:center;max-width:780px;margin:0 auto}
.newsletter-lp__kicker{display:inline-block;background:var(--c-charcoal);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:var(--s-md)}
.newsletter-lp__title{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--s-md);color:var(--c-charcoal)}
.newsletter-lp__mark{background:linear-gradient(180deg,transparent 60%,var(--c-sun) 60%);padding:0 .15em}
.newsletter-lp__lead{font-size:1.1rem;line-height:1.6;color:var(--c-text-light);max-width:640px;margin:0 auto var(--s-2xl)}

.newsletter-lp__form{max-width:520px;margin:0 auto}
.newsletter-lp__embed{margin:0 auto}
.newsletter-lp__embed iframe{max-width:100%;width:100%!important;border:0;display:block;margin:0 auto}
.newsletter-lp__form-meta{font-size:.85rem;color:var(--c-text-light);margin:var(--s-md) 0 0;text-align:center}

/* "What you'll get every Sunday" middle section — uses the homepage's
 * standard home-pillars-section + home-pillars__subhead pattern, with a
 * grid of compact content cards underneath. Matches the visual rhythm of
 * the rest of the site exactly. */
.newsletter-lp__inside-section{padding:var(--s-3xl) 0 var(--s-4xl)}

/* Add breathing room between the centred section header and the list. */
.newsletter-lp__inside-header{margin-bottom:var(--s-2xl)}

/* "What you'll get every Sunday" — vertical numbered list of recurring
 * sections. Charcoal numbered circles, divider lines between items, no
 * card chrome around each item — sits cleanly on the off-white section
 * background. */
.newsletter-cats{
    list-style:none;
    padding:0;
    margin:0 auto;
    max-width:780px;
}
.newsletter-cat{
    display:flex;
    gap:var(--s-lg);
    padding:var(--s-lg) 0;
    border-top:1px solid var(--c-light-grey);
}
.newsletter-cat:last-child{border-bottom:1px solid var(--c-light-grey)}
.newsletter-cat__num{
    flex-shrink:0;
    width:38px;
    height:38px;
    background:var(--c-charcoal);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.95rem;
    margin-top:2px;
}
.newsletter-cat__body-wrap{flex:1;min-width:0}
.newsletter-cat__tag{
    display:block;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    color:#B47815;
    text-transform:uppercase;
    margin-bottom:6px;
}
.newsletter-cat__title{
    font-size:1.1rem;
    font-weight:700;
    line-height:1.35;
    color:var(--c-charcoal);
    margin:0 0 var(--s-xs);
}
.newsletter-cat__body{
    font-size:.95rem;
    line-height:1.65;
    color:var(--c-text-light);
    margin:0;
}

@media(max-width:600px){
    .newsletter-cat{gap:var(--s-md)}
    .newsletter-cat__num{width:32px;height:32px;font-size:.85rem}
    .newsletter-cat__title{font-size:1rem}
}

/* ── Homepage tools carousel (filled charcoal cards) ─────────── */
.home-tools{position:relative;background:#fff;padding:var(--s-3xl) 0 var(--s-4xl)}
.home-tools .home-pillars__subhead{margin-bottom:var(--s-xl)}
/* See-all styling for the tools section is unified with the pillars sections
 * earlier in the stylesheet; no separate rule needed here. */
.tools-carousel{position:relative}
.tools-carousel__track{
    display:flex;
    gap:var(--s-md);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:var(--s-sm) var(--s-xs) var(--s-md);
    margin:0 calc(-1 * var(--s-xs));
    scrollbar-width:none;
}
.tools-carousel__track::-webkit-scrollbar{display:none}

/* Tool card — filled charcoal with sun-yellow accents */
.tool-card{
    flex:0 0 calc((100% - 2 * var(--s-md)) / 3);
    max-width:calc((100% - 2 * var(--s-md)) / 3);
    scroll-snap-align:start;
    background:var(--c-charcoal);
    border-radius:4px;
    padding:var(--s-xl) var(--s-xl) var(--s-lg);
    text-decoration:none;
    color:#fff;
    display:flex;
    flex-direction:column;
    transition:background var(--ease),transform var(--ease),box-shadow var(--ease);
}
.tool-card:hover{
    background:#0F1620;
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(31,41,55,.25);
}
.tool-card__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;height:48px;
    background:rgba(245,165,36,.18);
    border-radius:4px;
    color:var(--c-sun);
    margin-bottom:var(--s-md);
}
.tool-card__icon svg{width:24px;height:24px}
.tool-card__kicker{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--c-sun);
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:var(--s-xs);
}
.tool-card__title{
    font-size:1.1rem;
    font-weight:700;
    color:#fff;
    line-height:1.3;
    letter-spacing:-.01em;
    margin-bottom:var(--s-sm);
}
.tool-card__desc{
    font-size:.9rem;
    color:rgba(255,255,255,.7);
    line-height:1.6;
    margin-bottom:var(--s-lg);
    flex:1;
}
.tool-card__cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.95rem;
    font-weight:500;
    color:#fff;
    text-decoration:none;
    align-self:flex-start;
    margin-top:auto;
}
.tool-card:hover .tool-card__cta{text-decoration:underline;text-underline-offset:3px}

/* Nav arrows */
.tools-carousel__nav{
    position:absolute;
    top:calc(50% - var(--s-sm));
    transform:translateY(-50%);
    z-index:5;
    width:44px;height:44px;
    border-radius:50%;
    background:var(--c-charcoal);
    color:#fff;
    border:none;
    box-shadow:0 4px 14px rgba(31,41,55,.18);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background var(--ease),transform var(--ease),opacity var(--ease);
}
.tools-carousel__nav:hover:not(:disabled){background:#0F1620}
.tools-carousel__nav:disabled{opacity:0;pointer-events:none}
.tools-carousel__nav--prev{left:calc(-1 * var(--s-xl))}
.tools-carousel__nav--next{right:calc(-1 * var(--s-xl))}

.tools-carousel--no-scroll .tools-carousel__nav{display:none}

@media(max-width:1024px){
    .tool-card{
        flex-basis:calc((100% - var(--s-md)) / 2);
        max-width:calc((100% - var(--s-md)) / 2);
    }
}
@media(max-width:768px){
    .tools-carousel__nav{display:none}
    .tool-card{flex-basis:78%;max-width:78%}
}

/* ─────────────────────────────────────────────────────────────
   Mobile hamburger toggle — defensive visibility fix
   Forces the menu-toggle visible under 768px with high specificity
   so nothing from a plugin, the Customizer, or a cached stylesheet
   can override it. Updated for the floating header (v3.18.0).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-header .header-shell .menu-toggle,
    #site-header #menu-toggle,
    button.menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        padding: 8px !important;
        color: #fff !important;
        z-index: 1001;
        flex: 0 0 auto;
    }
    .site-header .header-shell .menu-toggle svg,
    #menu-toggle svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
    }
    /* Make sure the header-right is allowed to shrink to fit */
    .header-shell .header-right {
        flex: 0 0 auto;
    }
    /* Prevent the logo from hogging all horizontal space */
    .header-shell .site-logo {
        flex: 0 1 auto;
        min-width: 0;
    }
    .header-shell .site-logo__img {
        max-width: 170px !important;
    }
}

/* ── Category hub data hero ──────────────────────────────────── */
/* Used on hubs where soeb_hub_data_config returns a config (currently
 * Suppliers & Tariffs). Two-column layout: editorial copy on the left
 * and a price-cap stat panel on the right, plus a stats strip below.
 * Followed by a 6px charcoal divider that matches the standard hub
 * hero pattern, then the tariff comparison section. Categories without
 * a config fall back to the standard text-only hero. */
.hub-hero--data{
    background:#fff;
    padding:var(--s-3xl) 0;
    border-bottom:none;
    color:var(--c-charcoal);
}
.hub-hero-data__grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:var(--s-3xl);
    align-items:center;
}

/* Charcoal pill kicker — replaces the red .section__label treatment.
 * Same charcoal-on-white look used on the homepage and newsletter. */
.hub-hero-data__kicker{
    display:inline-block;
    background:var(--c-charcoal);
    color:#fff;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:3px;
    margin-bottom:var(--s-md);
}

.hub-hero-data__title{
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    line-height:1.18;
    letter-spacing:-.025em;
    color:var(--c-charcoal);
    margin:0 0 var(--s-md);
}
.hub-hero-data__mark{
    /* Gradient instead of solid: top 15% transparent so the highlight
     * doesn't bleed into the line above when text wraps. The band still
     * fully covers the visual letterforms because letters sit at roughly
     * 20-80% of the line-box, well within the 15-100% amber zone. */
    background:linear-gradient(180deg,transparent 15%,var(--c-sun) 15%);
    padding:0 .15em;
    line-height:1.05;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
}
.hub-hero-data__subtitle{
    font-size:1.05rem;
    line-height:1.6;
    color:var(--c-text-light);
    margin:0 0 var(--s-lg);
    max-width:520px;
}
.hub-hero-data__meta{
    display:flex;
    align-items:center;
    gap:var(--s-sm);
    font-size:.85rem;
    color:var(--c-text-light);
}
.hub-hero-data__meta-sep{color:var(--c-light-grey)}

/* Price cap stat panel — sits to the right of the copy on desktop.
 * Redesigned to lead with the annual figure: navy header bar with amber
 * accent dot, large £/year headline with a green delta pill, two rate
 * cells in a grid below, and a soft footer note in pale grey. */
.hub-hero-data__panel{
    background:#fff;
    border:1px solid var(--c-light-grey);
    border-radius:6px;
    overflow:hidden;
}
/* Top bar — charcoal background, amber dot, kicker on left, period on right. */
.hub-hero-data__panel-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-md);
    padding:10px 14px;
    background:var(--c-charcoal);
    color:#fff;
}
.hub-hero-data__panel-bar-kicker{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.hub-hero-data__panel-bar-period{
    font-size:.7rem;
    color:var(--c-sun);
    letter-spacing:.02em;
}
/* Headline row — large annual figure with green/red delta pill aligned right. */
.hub-hero-data__panel-headline{
    padding:14px 18px 12px;
    border-bottom:1px solid var(--c-light-grey);
}
.hub-hero-data__panel-headline-label{
    display:block;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--c-text-light);
    margin-bottom:4px;
}
.hub-hero-data__panel-headline-row{
    display:flex;
    align-items:baseline;
    gap:8px;
}
.hub-hero-data__panel-headline-value{
    font-size:1.85rem;
    font-weight:700;
    color:var(--c-charcoal);
    letter-spacing:-.025em;
    line-height:1;
}
.hub-hero-data__panel-headline-unit{
    font-size:.85rem;
    color:var(--c-text-light);
}
.hub-hero-data__panel-headline-delta{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:.78rem;
    font-weight:700;
    padding:3px 8px;
    border-radius:3px;
}
.hub-hero-data__panel-headline-delta--down{
    color:#1A5A3A;
    background:#E8F5EE;
}
.hub-hero-data__panel-headline-delta--up{
    color:#7A2929;
    background:#FBEAEA;
}
/* Two rate cells side by side, with a vertical hairline between them. */
.hub-hero-data__panel-rates-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}
.hub-hero-data__panel-rate{
    padding:12px 18px;
}
.hub-hero-data__panel-rate + .hub-hero-data__panel-rate{
    border-left:1px solid var(--c-light-grey);
}
.hub-hero-data__panel-rate-label{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--c-text-light);
    margin-bottom:4px;
}
.hub-hero-data__panel-rate-value{
    font-size:1.15rem;
    font-weight:700;
    color:var(--c-charcoal);
    letter-spacing:-.01em;
}
.hub-hero-data__panel-rate-unit{
    font-weight:400;
    color:var(--c-text-light);
    font-size:.72rem;
}
.hub-hero-data__panel-rate-delta{
    font-size:.72rem;
    font-weight:600;
    margin-top:3px;
}
.hub-hero-data__panel-rate-delta--down{color:#1A5A3A}
.hub-hero-data__panel-rate-delta--up{color:#7A2929}

/* Soft pale-grey footer note — quarterly context (e.g. "Cap fell 6.6%..."). */
.hub-hero-data__panel-context{
    margin:0;
    padding:9px 14px;
    background:var(--c-off-white);
    font-size:.72rem;
    line-height:1.5;
    color:var(--c-text-light);
}

/* Stats strip below the grid — three equal columns separated by hairlines. */
.hub-hero-data__stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin-top:var(--s-2xl);
    padding-top:var(--s-xl);
    border-top:1px solid var(--c-light-grey);
}
.hub-hero-data__stat{
    padding:0 var(--s-lg);
    border-right:1px solid var(--c-light-grey);
}
.hub-hero-data__stat:first-child{padding-left:0}
.hub-hero-data__stat:last-child{
    border-right:none;
    padding-right:0;
}
.hub-hero-data__stat-label{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--c-text-light);
    margin-bottom:6px;
}
.hub-hero-data__stat-value{
    font-size:1.15rem;
    font-weight:700;
    color:var(--c-charcoal);
    line-height:1.2;
    margin-bottom:4px;
    letter-spacing:-.01em;
}
.hub-hero-data__stat-meta{
    font-size:.8rem;
    color:var(--c-text-light);
}

/* ── Tariff comparison section ──────────────────────────────── */
/* The "No EV..." sub-block now lives INSIDE .hub-by-setup, so the cards
 * inherit the section's white background. The .hub-tariff-compare__*
 * classes here are kept for the cards/grid only — there's no longer a
 * standalone .hub-tariff-compare section element. */
.hub-tariff-compare__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--s-lg);
    align-items:stretch;
}
.hub-tariff-compare__card{
    background:#fff;
    border:1px solid var(--c-light-grey);
    border-radius:4px;
    padding:var(--s-xl);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}
/* Top accent strip — amber for fixed, teal for variable. Reuses the sun
 * token for fixed; the variable colour is local since we don't have a
 * teal token in the palette. */
.hub-tariff-compare__card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
}
.hub-tariff-compare__card--fixed::before{background:var(--c-sun)}
.hub-tariff-compare__card--variable::before{background:#1D9E75}

.hub-tariff-compare__head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:var(--s-md);
}
.hub-tariff-compare__icon{
    width:32px;
    height:32px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.hub-tariff-compare__icon--fixed{
    background:var(--c-sun-soft);
    color:var(--c-sun-deep);
}
.hub-tariff-compare__icon--variable{
    background:#E1F5EE;
    color:#0F6E56;
}
.hub-tariff-compare__option{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--c-sun-deep);
    text-transform:uppercase;
}
.hub-tariff-compare__option--variable{color:#0F6E56}

/* Card title is now an h4 (since the parent sub-block is led by an h3),
 * but visual size unchanged. */
.hub-tariff-compare__heading{
    font-size:1.4rem;
    font-weight:700;
    color:var(--c-charcoal);
    line-height:1.25;
    margin:0 0 4px;
}
.hub-tariff-compare__sub{
    font-size:.88rem;
    color:var(--c-text-light);
    margin:0 0 var(--s-md);
}
.hub-tariff-compare__points{
    padding-top:var(--s-md);
    border-top:1px solid var(--c-light-grey);
    flex:1;
}
.hub-tariff-compare__point{
    font-size:.9rem;
    line-height:1.6;
    color:var(--c-text-light);
    margin:0 0 var(--s-sm);
}
.hub-tariff-compare__point:last-child{margin-bottom:0}
.hub-tariff-compare__point strong{color:var(--c-charcoal);font-weight:600}

/* ── Nested "should you switch right now?" sub-section ───── */
/* Lives inside .hub-howswitch (off-white parent). Uses the same
 * .hub-by-setup__subhead pattern (amber-left-border H3) as the
 * "No EV..." sub-block above for consistency. */
.hub-switch-now-nested{
    margin-top:var(--s-2xl);
    padding-top:var(--s-xl);
    border-top:1px solid var(--c-light-grey);
}
.hub-switch-now-nested__subhead{
    margin-bottom:var(--s-md);
}
.hub-switch-now-nested__date{
    display:inline-block;
    font-size:.78rem;
    font-weight:400;
    color:var(--c-text-light);
    letter-spacing:0;
    text-transform:none;
    font-style:italic;
    margin-left:8px;
    vertical-align:middle;
}
.hub-switch-now-nested__stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--s-sm);
    margin-bottom:var(--s-lg);
}
.hub-switch-now-nested__stat{
    background:#fff;
    border:1px solid var(--c-light-grey);
    border-radius:4px;
    padding:10px 14px;
}
.hub-switch-now-nested__stat-label{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--c-text-light);
    margin-bottom:4px;
}
.hub-switch-now-nested__stat-value{
    font-size:1rem;
    font-weight:700;
    color:var(--c-charcoal);
    line-height:1.2;
}
.hub-switch-now-nested__stat-value--alert{color:var(--c-sun-deep)}
/* Left-aligned CTA row — primary charcoal button. */
.hub-switch-now-nested__cta-row{
    text-align:left;
}

/* ── Find-your-tariff-by-setup section ─────────────────────── */
/* White section. 2x2 grid of household-type cards. Each card has a
 * coloured icon tile, a title (the household statement), a sub-line
 * (the destination page name), an arrow, and a one-line description
 * underneath. The cards are anchor tags so the whole tile is clickable. */
.hub-by-setup{
    background:var(--c-off-white);
    padding:var(--s-3xl) 0;
}
.hub-by-setup__header{
    margin-bottom:var(--s-2xl);
}
.hub-by-setup__grid{
    display:grid;
    gap:var(--s-md);
    grid-template-columns:repeat(3,1fr);
}
.hub-by-setup__card{
    display:block;
    background:#fff;
    border:1px solid var(--c-light-grey);
    border-radius:4px;
    padding:var(--s-lg);
    text-decoration:none;
    color:inherit;
    transition:border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
.hub-by-setup__card:hover{
    border-color:var(--c-charcoal);
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    text-decoration:none;
    color:inherit;
}
.hub-by-setup__card-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:var(--s-sm);
}
.hub-by-setup__titles{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    flex:1;
}
.hub-by-setup__title{
    font-size:1rem;
    font-weight:700;
    color:var(--c-charcoal);
    letter-spacing:-.005em;
    line-height:1.25;
}
.hub-by-setup__sub{
    font-size:.78rem;
    color:var(--c-text-light);
}
.hub-by-setup__arrow{
    margin-left:auto;
    color:var(--c-text-light);
    font-size:1.1rem;
    flex-shrink:0;
    transition:transform var(--ease);
}
.hub-by-setup__card:hover .hub-by-setup__arrow{transform:translateX(3px);color:var(--c-charcoal)}
.hub-by-setup__desc{
    font-size:.88rem;
    line-height:1.6;
    color:var(--c-text-light);
    margin:0;
}

/* The "No EV..." sub-block sits beneath the setup grid. Adds vertical
 * separation from the cards above without forcing a new section. */
.hub-by-setup__sub-block{
    margin-top:var(--s-3xl);
    padding-top:var(--s-2xl);
    border-top:1px solid var(--c-light-grey);
}

/* H3 sub-heading pattern — mirrors .home-pillars__subhead from the
 * homepage so internal sub-headings on this hub page match the styling
 * the user already sees on the homepage (amber 5px left border, slight
 * left padding, paragraph aligned to the same indent). */
.hub-by-setup__subhead{
    margin-bottom:var(--s-xl);
}
.hub-by-setup__subhead h3{
    font-size:clamp(1.5rem,2.4vw,1.9rem);
    font-weight:700;
    color:var(--c-charcoal);
    margin:0;
    letter-spacing:-.02em;
    padding-left:var(--s-sm);
    border-left:5px solid var(--c-sun);
    line-height:1.2;
}
.hub-by-setup__subhead p{
    font-size:1rem;
    color:var(--c-slate, var(--c-text-light));
    margin:8px 0 0;
    padding-left:calc(var(--s-sm) + 5px);
    line-height:1.55;
    max-width:760px;
}

/* CTA row beneath the fixed/variable cards in the sub-block —
 * left-aligned to match the "Should I switch right now?" CTA below.
 * Matches the parent paragraph's left-indent so it visually aligns
 * with the H3 it answers. */
.hub-by-setup__sub-cta-row{
    margin-top:var(--s-xl);
    text-align:left;
}

/* ── How switching works section ───────────────────────────── */
/* Off-white section. Four small step cards in a row, plus a single
 * primary CTA below linking to the full how-to-switch guide. */
.hub-howswitch{
    background:#fff;
    padding:var(--s-3xl) 0;
}
.hub-howswitch__header{
    margin-bottom:var(--s-2xl);
}
.hub-howswitch__steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--s-md);
    margin-bottom:var(--s-lg);
}
.hub-howswitch__step{
    background:#fff;
    border:1px solid var(--c-light-grey);
    border-radius:4px;
    padding:var(--s-lg);
}
.hub-howswitch__step-num{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--c-sun-deep);
    margin-bottom:6px;
}
.hub-howswitch__step-title{
    font-size:.98rem;
    font-weight:700;
    color:var(--c-charcoal);
    line-height:1.3;
    margin-bottom:6px;
}
.hub-howswitch__step-body{
    font-size:.85rem;
    line-height:1.6;
    color:var(--c-text-light);
    margin:0;
}

/* CTA row beneath the four steps — left-aligned charcoal button. */
.hub-howswitch__cta-row{
    text-align:left;
    margin-top:var(--s-lg);
}

/* ── Section breakpoints ───────────────────────────────────── */
@media(max-width:880px){
    .hub-hero-data__grid{
        grid-template-columns:1fr;
        gap:var(--s-2xl);
    }
    .hub-hero-data__subtitle{max-width:none}
    .hub-tariff-compare__grid{
        grid-template-columns:1fr;
        gap:var(--s-md);
    }
    .hub-by-setup__grid{
        grid-template-columns:1fr;
    }
    .hub-howswitch__steps{
        grid-template-columns:1fr 1fr;
    }
    .hub-switch-now-nested__stats{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:600px){
    .hub-hero-data__stats{
        grid-template-columns:1fr;
        gap:var(--s-md);
    }
    .hub-hero-data__stat{
        padding:0 0 var(--s-md);
        border-right:none;
        border-bottom:1px solid var(--c-light-grey);
    }
    .hub-hero-data__stat:last-child{
        padding-bottom:0;
        border-bottom:none;
    }
    .hub-howswitch__steps{grid-template-columns:1fr}
    .hub-switch-now-nested__stats{grid-template-columns:1fr}
    .hub-hero-data__panel-headline-value{font-size:1.6rem}
}

/* ── v3.8.0 Standard page layout (default page template) ──────────────────────
 * Scoped strictly to body.page-template-default so this affects:
 *   - New pages with default settings (page.php)
 *   - Existing pages on the default template — privacy policy, individual
 *     tool pages (Direct Debit Calculator, Octopus Tracker Prices, etc.),
 *     and any other page that hasn't been switched to a custom template.
 *
 * Does NOT affect:
 *   - Blog posts (single.php — body has .single-post, not .page-template-default).
 *   - Category hubs (template-hub.php — body has .page-template-template-hub).
 *   - About Us, Tools hub, Glossary, Tips, Newsletter (all custom templates,
 *     each with its own page-template-* body class).
 *   - The page hero block (.page-hero) — kept exactly as it was.
 *
 * Two changes (v3.8.1 reverted the layout centring — content sits in the
 * 2-column grid as before, leaving heading restyles only):
 *   1. H2 → match the homepage section H2 style, but WITHOUT the underline
 *      bar (the homepage adds one via ::after; we deliberately don't here).
 *      Also strips the legacy 6px amber border-left used on blog post H2s.
 *   2. H3 → match the homepage subhead H3 style, including the 5px amber
 *      border-left (the "amber border on left" effect from the homepage).
 */

/* H2 — homepage section style, no underline, no amber border */
.page-template-default .post-content h2{
    display:block;
    color:var(--c-charcoal);
    font-size:clamp(1.75rem,3vw,2.2rem);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.025em;
    margin-top:var(--s-3xl);
    margin-bottom:var(--s-md);
    padding-left:0;
    padding-bottom:0;
    border-left:0;
    scroll-margin-top:90px;
}

/* H3 — homepage subhead style with amber left border */
.page-template-default .post-content h3{
    color:var(--c-charcoal);
    font-size:clamp(1.5rem,2.4vw,1.9rem);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
    margin-top:var(--s-2xl);
    margin-bottom:var(--s-md);
    padding-left:var(--s-sm);
    border-left:5px solid var(--c-sun);
    scroll-margin-top:90px;
}

/* ── v3.8.1 Blog post H2 sizing ─────────────────────────────────────────────
 * Bring blog post H2s up to the same scale as the default-page H3 above
 * (clamp 1.5–1.9rem). Scoped to .single-post so default-template pages
 * keep their own larger homepage-style H2 (set above), and category hubs /
 * other custom templates keep their existing global h2 sizing untouched.
 * The other styling on .post-content h2 (charcoal, weight 700, 6px amber
 * border-left, padding/margins, scroll-margin) is inherited from line 162.
 */
.single-post .post-content h2{
    font-size:clamp(1.5rem,2.4vw,1.9rem);
}

/* ── v3.8.1 Privacy policy / legal page background ──────────────────────────
 * Mirrors the .category-archive / Tools Hub treatment: soft #f7f7f8 below
 * the hero, hero itself stays white (its own background:#fff in .page-hero).
 * Body class added by soeb_legal_page_body_class() in functions.php — keyed
 * off WordPress's built-in privacy-policy page setting (Settings → Privacy)
 * so it doesn't depend on slug.
 */
body.legal-page{background:#f7f7f8}

/* ── v3.12.2 Octopus Energy supplier landing — new design system ───────────
 * Bespoke visual landing template at /suppliers-and-tariffs/octopus-energy/.
 * Rebuilt against the new SOEB rounded-card / soft-shadow / cyan-accent
 * landing-page system. All component classes are prefixed .octo- and live
 * inside the .octo-page wrapper, so they don't leak into the rest of the
 * theme and the rest of the theme doesn't leak into them. The legacy
 * .octopus-landing__ rules from v3.11.0 have been removed.
 *
 * Page flow (see template-octopus-energy.php):
 *   1. Hero (two-column: copy + glance side card) + breadcrumbs
 *   2. Setup chooser strip — 4 quick-jump cards by household type
 *   3. Why Octopus / route — soft section with decision card
 *   4. Tariff groups — EV, Solar/battery, Heat pump, Standard
 *   5. Live tools — 3 tool cards (main one dark)
 *   6. Switching process — 4 numbered step cards
 *   7. Rewards and extras — Octoplus, Saving Sessions, Free Electricity
 *   8. Switch CTA — dark gradient panel
 *   9. Related guides — 4 cross-cluster cards
 */

/* Local design tokens, scoped to the landing-page wrappers only.
 * They shadow the site-wide tokens for these templates without polluting :root.
 * v3.13.0 — added .sat-page (Suppliers & Tariffs hub) as a parallel wrapper
 * so the suppliers-and-tariffs hub can reuse the same design system as
 * /suppliers-and-tariffs/octopus-energy/ without any CSS duplication. */
.octo-page,
.sat-page{
    /* v3.19.5 — sitewide blue refinement. Octopus brand turquoise
     * #0097b2 was reading too "template" across the Octopus landing
     * and the Suppliers & Tariffs data hub. Same muted accent scale
     * adopted as .soeb-article: #377D94 lead, #2E6B7F hover, #EAF6F8
     * soft tint, #CFE6EC accent border. Neutral surface tokens snapped
     * to the slate-200 family. Yellow/green untouched. */
    --octo-ink:#172033;
    --octo-text:#3f4b5f;
    --octo-muted:#6b7280;
    --octo-line:#E2E8F0;
    --octo-soft:#F6F8FA;
    --octo-blue:#377D94;
    --octo-blue-dark:#2E6B7F;
    --octo-blue-tint:#EAF6F8;
    --octo-blue-line:#CFE6EC;
    --octo-yellow:#f7c948;
    --octo-yellow-soft:#fff7d6;
    --octo-yellow-line:#ffe797;
    --octo-yellow-text:#614700;
    --octo-green:#006e5d;
    --octo-green-soft:#ebf8f3;
    --octo-pink-soft:#fff0f8;
    --octo-shadow:0 18px 45px rgba(23,32,51,.08);
    --octo-shadow-soft:0 10px 28px rgba(23,32,51,.06);

    background:#fff;
    color:var(--octo-ink);
    line-height:1.65;
    overflow:hidden; /* contain shadows so they don't trigger horizontal scroll */
}

/* Reset default site typography rules inside these landing templates so
 * the design-system numbers (margins, weights, colours) win. */
.octo-page :where(h1,h2,h3,h4),
.sat-page :where(h1,h2,h3,h4){
    color:var(--octo-ink);
    letter-spacing:-.04em;
    line-height:1.15;
    margin:0;
    font-weight:800;
}
.octo-page :where(p),
.sat-page :where(p){margin:0;color:var(--octo-text)}
.octo-page :where(a),
.sat-page :where(a){text-decoration:none;color:inherit}

/* Use the site-wide container width so the landing page lines up flush
 * with the main header. Wraps the existing .site-container utility rather
 * than re-declaring it, so we keep one source of truth for the gutter. */
.octo-page .site-container,
.sat-page .site-container{max-width:var(--w-site)}

/* ── Eyebrow chip (cyan pill) ───────────────────────────────── */
.octo-page .octo-eyebrow,
.sat-page .octo-eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    border:1px solid rgba(55,125,148,.18);
    background:var(--octo-blue-tint);
    color:var(--octo-blue-dark);
    border-radius:999px;
    padding:8px 12px;
    font-size:.72rem;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;
    width:fit-content;
}
.octo-page .octo-eyebrow::before,
.sat-page .octo-eyebrow::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--octo-blue);
}
.octo-page .octo-eyebrow--dark,
.sat-page .octo-eyebrow--dark{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.18);
    color:#fff;
}
.octo-page .octo-eyebrow--dark::before,
.sat-page .octo-eyebrow--dark::before{background:var(--octo-yellow)}

/* Yellow text highlight (sits behind a portion of the H1) */
.octo-highlight{
    background:linear-gradient(180deg,transparent 58%,var(--octo-yellow) 58%);
    padding-inline:4px;margin-inline:-4px;
}

/* v3.17.8: brand-blue inline accent for two words in the H1
 * ("Octopus Energy"). Uses a deep cyan close to --octo-blue-dark
 * (#007f96) per design spec — sits comfortably alongside the yellow
 * highlight used elsewhere on the page without competing for
 * attention. No background — just a coloured word. */
.octo-brand-blue{color:#027f97}

/* ── Buttons (scoped) ───────────────────────────────────────── */
.octo-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border-radius:999px;padding:14px 22px;
    font-weight:800;font-size:.88rem;
    transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
    border:1px solid transparent;cursor:pointer;
    font-family:inherit;
    text-decoration:none;
}
.octo-btn:hover{text-decoration:none}
.octo-btn--primary{
    background:var(--octo-blue);color:#fff;
    box-shadow:0 12px 28px rgba(55,125,148,.22);
}
.octo-btn--primary:hover{background:var(--octo-blue-dark);color:#fff;transform:translateY(-2px)}
.octo-btn--secondary{background:#fff;color:var(--octo-ink);border-color:var(--octo-line)}
.octo-btn--secondary:hover{transform:translateY(-2px);border-color:var(--octo-blue)}
.octo-btn--cta{background:var(--octo-yellow);color:#1f2937;font-weight:850}
.octo-btn--cta:hover{background:#ffd66a;color:#1f2937;transform:translateY(-2px)}

/* ── Hero ────────────────────────────────────────────────────── */
.octo-hero{padding:54px 0 28px;background:#fff;position:relative}
.octo-hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;
    height:1px;background:var(--octo-line);
}
.octo-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
    gap:34px;align-items:center;
}
.octo-hero__copy h1.octo-hero__title{
    font-size:clamp(2.4rem,5.5vw,3.6rem);
    letter-spacing:-.06em;line-height:1;
    margin:18px 0;max-width:720px;
}
.octo-hero__lead{
    font-size:1.05rem;color:var(--octo-text);
    max-width:640px;line-height:1.75;
}
.octo-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.octo-hero__trust{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;
    color:var(--octo-muted);font-size:.8rem;font-weight:700;
}
.octo-trust-pill{
    display:inline-flex;align-items:center;gap:8px;background:#fff;
    border:1px solid var(--octo-line);border-radius:999px;padding:8px 12px;
}
.octo-trust-pill b{color:var(--octo-blue-dark);font-weight:800}

/* Glance side card — heavier shadow + nested 1px inset border to make it
 * read as a premium "key takeaways" panel. */
.octo-glance{
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
    border:1px solid var(--octo-line);
    border-radius:32px;
    box-shadow:var(--octo-shadow);
    padding:22px;
    position:relative;
}
.octo-glance::before{
    content:"";position:absolute;inset:16px;
    border-radius:24px;
    border:1px solid rgba(55,125,148,.08);
    pointer-events:none;
}
.octo-glance__top{
    display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
    padding:8px 8px 18px;position:relative;z-index:1;
}
.octo-glance__top small{
    display:block;color:var(--octo-muted);font-weight:800;
    text-transform:uppercase;letter-spacing:.06em;font-size:.65rem;margin-bottom:4px;
}
.octo-glance__top strong{
    font-size:1.35rem;letter-spacing:-.04em;line-height:1.15;
    display:block;color:var(--octo-ink);font-weight:800;
}
.octo-glance__score{
    background:var(--octo-blue-tint);
    border:1px solid var(--octo-blue-line);
    border-radius:20px;
    padding:12px 13px;min-width:92px;text-align:center;
}
.octo-glance__score b{
    font-size:1.55rem;line-height:1;display:block;
    color:var(--octo-blue-dark);font-weight:800;
}
.octo-glance__score span{
    font-size:.65rem;font-weight:900;color:var(--octo-blue-dark);
    text-transform:uppercase;letter-spacing:.05em;
}

.octo-glance__list{display:grid;gap:10px;position:relative;z-index:1}
.octo-glance__row{
    display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;
    background:#fff;border:1px solid var(--octo-line);border-radius:20px;padding:13px;
    box-shadow:0 6px 16px rgba(23,32,51,.04);
}
.octo-glance__icon{
    width:42px;height:42px;border-radius:16px;
    background:var(--octo-blue-tint);color:var(--octo-blue-dark);
    display:grid;place-items:center;font-weight:900;font-size:.85rem;
}
.octo-glance__row:nth-child(2) .octo-glance__icon{background:var(--octo-yellow-soft);color:#8a5a00}
.octo-glance__row:nth-child(3) .octo-glance__icon{background:var(--octo-green-soft);color:var(--octo-green)}
.octo-glance__row small{
    display:block;color:var(--octo-muted);font-weight:700;font-size:.75rem;
}
.octo-glance__row strong{
    display:block;font-size:.95rem;letter-spacing:-.02em;color:var(--octo-ink);
}
.octo-glance__tag{
    background:var(--octo-soft);color:var(--octo-text);
    border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:800;white-space:nowrap;
}
.octo-glance__note{
    margin-top:14px;
    background:var(--octo-blue-tint);
    border:1px solid var(--octo-blue-line);
    border-radius:20px;
    padding:14px 16px;color:var(--octo-blue-dark);
    font-size:.82rem;line-height:1.55;
    position:relative;z-index:1;
}
.octo-glance__note strong{color:var(--octo-blue-dark)}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.octo-breadcrumbs{
    margin-top:28px;font-size:.78rem;color:var(--octo-muted);
}
.octo-breadcrumbs a{color:var(--octo-muted)}
.octo-breadcrumbs a:hover{color:var(--octo-blue-dark);text-decoration:underline}
.octo-breadcrumbs .sep{margin:0 6px;opacity:.6}
.octo-breadcrumbs__current{color:var(--octo-ink);font-weight:600}

/* ── Setup chooser strip ─────────────────────────────────────── */
/* v3.17.9: top padding raised 22 → 72px so the four tariff cards
 * sit clearly below the hero with breathing space, rather than
 * butting up against the breadcrumbs row. */
.octo-setup{padding:72px 0 6px;background:#fff}
.octo-setup__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* v3.24.7 — 3-column variant used on /energy-bills/ where the strip
 * shows three "I want to…" intent cards instead of the four-setup
 * variant on /suppliers-and-tariffs/. Same card visuals (white card +
 * corner blob), just a wider individual card. */
.octo-setup__grid--three{grid-template-columns:repeat(3,1fr)}
.octo-setup__card{
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:22px;
    padding:18px;
    box-shadow:var(--octo-shadow-soft);
    min-height:140px;
    transition:transform .18s ease,border-color .18s ease;
    position:relative;overflow:hidden;
    display:block;
}
.octo-setup__card:hover{
    transform:translateY(-3px);
    border-color:rgba(55,125,148,.35);
    text-decoration:none;color:inherit;
}
/* Decorative blob — different colour per card for visual variety */
.octo-setup__card::after{
    content:"";position:absolute;right:-28px;top:-28px;
    width:82px;height:82px;border-radius:999px;
    background:var(--octo-blue-tint);
}
.octo-setup__card:nth-child(2)::after{background:var(--octo-yellow-soft)}
.octo-setup__card:nth-child(3)::after{background:var(--octo-green-soft)}
.octo-setup__card:nth-child(4)::after{background:var(--octo-pink-soft)}
.octo-setup__card small{
    display:block;color:var(--octo-blue-dark);
    font-weight:900;text-transform:uppercase;
    font-size:.68rem;letter-spacing:.06em;margin-bottom:8px;position:relative;
}
.octo-setup__card strong{
    display:block;font-size:1.05rem;letter-spacing:-.03em;
    margin-bottom:8px;color:var(--octo-ink);position:relative;
}
.octo-setup__card span{
    font-size:.82rem;color:var(--octo-muted);line-height:1.55;
    display:block;position:relative;
}

/* ── Section base ─────────────────────────────────────────────── */
.octo-section{padding:74px 0}
.octo-section--soft{background:linear-gradient(180deg,#fff 0%,var(--octo-soft) 100%)}
.octo-section--grey{background:var(--octo-soft)}

.octo-section-head{
    max-width:760px;text-align:center;
    margin:0 auto 36px;
    display:flex;flex-direction:column;align-items:center;gap:14px;
}
.octo-section-head h2{
    font-size:clamp(1.85rem,3.6vw,2.6rem);
    letter-spacing:-.055em;line-height:1.06;
}
.octo-section-head p{
    color:var(--octo-text);font-size:1rem;line-height:1.75;
}

/* ── Decision / route card (intro) ───────────────────────────── */
.octo-decision{
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:30px;
    box-shadow:var(--octo-shadow);
    padding:28px;
    display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;
}
.octo-decision__text h3{font-size:1.55rem;margin-bottom:10px;letter-spacing:-.045em}
.octo-route{display:grid;gap:12px}
.octo-route__item{
    display:grid;grid-template-columns:auto 1fr;gap:14px;
    background:var(--octo-soft);border:1px solid var(--octo-line);
    border-radius:20px;padding:15px;
}
.octo-route__num{
    width:32px;height:32px;border-radius:12px;
    background:var(--octo-blue);color:#fff;
    display:grid;place-items:center;font-weight:900;font-size:.95rem;
}
.octo-route__item strong{display:block;margin-bottom:3px;color:var(--octo-ink);font-size:.95rem;font-weight:700}
.octo-route__item span{font-size:.8rem;color:var(--octo-muted);line-height:1.5;display:block}

/* ── Tariff groups ───────────────────────────────────────────── */
.octo-group{margin-top:72px}
.octo-group:first-child{margin-top:0}

/* v3.17.7: head is now stacked (eyebrow + h3 + p), no longer a 2-col
 * flex with the description on the right. The description sits
 * directly under the H3, left-aligned, and constrained to ~50% of
 * the container so it doesn't run the full width. */
.octo-group__head{
    margin-bottom:20px;
}
.octo-group__head h3{
    font-size:1.5rem;letter-spacing:-.045em;margin-top:8px;font-weight:800;
}
.octo-group__head p{
    color:var(--octo-muted);
    font-size:.9rem;
    margin-top:10px;
    line-height:1.55;
    max-width:50%;
}

.octo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.octo-cards--two{grid-template-columns:repeat(2,1fr)}

.octo-card{
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:26px;
    padding:22px;
    box-shadow:0 8px 22px rgba(23,32,51,.045);
    min-height:230px;
    display:flex;flex-direction:column;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.octo-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--octo-shadow-soft);
    border-color:rgba(55,125,148,.32);
    text-decoration:none;color:inherit;
}
.octo-card--featured{
    background:linear-gradient(180deg,var(--octo-blue-tint) 0%,#fff 68%);
    border-color:rgba(55,125,148,.25);
}
.octo-card__label{
    display:inline-flex;align-self:flex-start;
    background:#fff;border:1px solid var(--octo-line);
    border-radius:999px;padding:6px 10px;
    color:var(--octo-blue-dark);font-size:.65rem;font-weight:900;
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;
}
.octo-card h4{
    font-size:1.3rem;letter-spacing:-.045em;line-height:1.15;margin-bottom:9px;font-weight:800;
}
.octo-card p{font-size:.85rem;color:var(--octo-text);line-height:1.65;margin-bottom:18px}
.octo-card__foot{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:auto;gap:12px;padding-top:14px;
    border-top:1px solid var(--octo-line);
    font-size:.78rem;font-weight:900;
}
.octo-card__foot span:first-child{color:var(--octo-muted)}
.octo-card__foot span:last-child{color:var(--octo-blue-dark)}

/* Homepage route chooser — keep the intent cards calm and scannable. */
.octo-route-cards .octo-card{
    min-height:0;
}
.octo-route-card{
    padding:26px;
}
.octo-route-card h4{
    font-size:1.35rem;
    margin-bottom:12px;
}
.octo-route-card p{
    margin-bottom:22px;
}
.octo-route-card .octo-card__foot{
    border-top:0;
    padding-top:0;
}
.octo-route-card .octo-card__foot span:last-child{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--octo-line);
    border-radius:999px;
    padding:9px 13px;
    background:#fff;
}
.octo-route-card:hover .octo-card__foot span:last-child{
    border-color:rgba(55,125,148,.35);
}

/* ── Live tools ──────────────────────────────────────────────── */
.octo-tools{display:grid;grid-template-columns:1.1fr .95fr .95fr;gap:16px}
.octo-tool{
    border-radius:28px;border:1px solid var(--octo-line);
    padding:24px;background:#fff;box-shadow:var(--octo-shadow-soft);
    min-height:240px;display:flex;flex-direction:column;
    transition:transform .18s ease,border-color .18s ease;
}
.octo-tool:hover{transform:translateY(-3px);text-decoration:none;color:inherit}
.octo-tool--main{background:var(--octo-ink);color:#fff;border-color:var(--octo-ink)}
.octo-tool--main:hover{border-color:var(--octo-blue);color:#fff}
.octo-tool h3{font-size:1.35rem;letter-spacing:-.045em;margin-bottom:10px;font-weight:800}
.octo-tool--main h3{color:#fff}
.octo-tool p{color:var(--octo-text);font-size:.85rem}
.octo-tool--main p{color:rgba(255,255,255,.78)}
.octo-tool__meter{margin-top:auto;padding-top:24px}
.octo-tool__meter-bar{
    height:10px;background:var(--octo-soft);border-radius:999px;overflow:hidden;
}
.octo-tool--main .octo-tool__meter-bar{background:rgba(255,255,255,.16)}
.octo-tool__meter-bar span{
    display:block;height:100%;width:72%;
    background:var(--octo-yellow);border-radius:999px;
}
.octo-tool:nth-child(2) .octo-tool__meter-bar span{width:58%;background:var(--octo-blue)}
.octo-tool:nth-child(3) .octo-tool__meter-bar span{width:66%;background:var(--octo-green)}
.octo-tool__meter small{
    display:flex;justify-content:space-between;margin-top:10px;
    font-size:.72rem;font-weight:800;color:var(--octo-muted);
}
.octo-tool--main .octo-tool__meter small{color:rgba(255,255,255,.72)}

/* ── Switching process steps ─────────────────────────────────── */
.octo-process{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:octo-step}
.octo-step{
    background:#fff;border:1px solid var(--octo-line);
    border-radius:26px;padding:22px;box-shadow:var(--octo-shadow-soft);
    min-height:190px;
}
.octo-step::before{
    counter-increment:octo-step;content:counter(octo-step);
    width:36px;height:36px;border-radius:14px;
    background:var(--octo-yellow);display:grid;place-items:center;
    font-weight:900;margin-bottom:18px;color:#1f2937;
}
.octo-step h3{font-size:1.1rem;letter-spacing:-.035em;margin-bottom:8px;font-weight:800}
.octo-step p{font-size:.82rem;color:var(--octo-text);line-height:1.6}

/* ── Rewards grid ────────────────────────────────────────────── */
.octo-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.octo-reward{
    background:#fff;border:1px solid var(--octo-line);
    border-radius:28px;padding:24px;
    box-shadow:var(--octo-shadow-soft);
    display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
    transition:transform .18s ease,border-color .18s ease;
}
.octo-reward:hover{
    transform:translateY(-3px);border-color:rgba(55,125,148,.32);
    text-decoration:none;color:inherit;
}
.octo-reward__icon{
    width:52px;height:52px;border-radius:18px;
    background:var(--octo-blue-tint);
    display:grid;place-items:center;
    font-weight:900;color:var(--octo-blue-dark);font-size:1.4rem;
    line-height:1;
}
.octo-reward:nth-child(2) .octo-reward__icon{background:var(--octo-yellow-soft);color:#8a5a00}
.octo-reward:nth-child(3) .octo-reward__icon{background:var(--octo-green-soft);color:var(--octo-green)}
.octo-reward h3{font-size:1.2rem;letter-spacing:-.04em;margin-bottom:7px;font-weight:800}
.octo-reward p{font-size:.85rem;color:var(--octo-text);line-height:1.6}

/* ── Switch CTA panel ────────────────────────────────────────── */
.octo-cta{
    background:linear-gradient(135deg,var(--octo-ink),#24314a);
    border-radius:34px;padding:36px;
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px;
    color:#fff;
    box-shadow:0 22px 50px rgba(23,32,51,.18);
    position:relative;overflow:hidden;
}
.octo-cta::before{
    content:"";position:absolute;right:-80px;top:-110px;
    width:260px;height:260px;border-radius:999px;
    background:rgba(247,201,72,.16);
}
.octo-cta>div{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.octo-cta h2{
    font-size:clamp(1.6rem,2.6vw,2.05rem);letter-spacing:-.05em;color:#fff;
}
.octo-cta p{color:rgba(255,255,255,.78);max-width:650px}
.octo-cta .octo-btn{position:relative;z-index:1}

/* ── Related guides grid ─────────────────────────────────────── */
.octo-related{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.octo-related__card{
    background:#fff;border:1px solid var(--octo-line);
    border-radius:24px;padding:20px;
    box-shadow:0 8px 20px rgba(23,32,51,.04);
    display:block;
    transition:transform .18s ease,border-color .18s ease;
}
.octo-related__card:hover{
    transform:translateY(-3px);border-color:rgba(55,125,148,.32);
    text-decoration:none;color:inherit;
}
.octo-related__card small{
    display:block;color:var(--octo-muted);font-size:.65rem;
    text-transform:uppercase;letter-spacing:.06em;
    font-weight:900;margin-bottom:10px;
}
.octo-related__card strong{
    display:block;font-size:1rem;letter-spacing:-.035em;line-height:1.25;
    margin-bottom:12px;color:var(--octo-ink);font-weight:700;
}
.octo-related__card span{color:var(--octo-blue-dark);font-weight:900;font-size:.78rem}

/* ── News-card / market update (used on Suppliers & Tariffs hub) ─
 * A two-column editorial block: short copy on the left, 2x2 stat grid on
 * the right. Mirrors the .octo-decision footprint but swaps the route
 * list for a stats panel so it reads as a "live" market snapshot rather
 * than a process card. */
.octo-news{
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:32px;
    box-shadow:var(--octo-shadow);
    padding:30px;
    display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center;
}
.octo-news__copy{display:flex;flex-direction:column;gap:12px}
.octo-news__copy h3{
    font-size:clamp(1.6rem,2.4vw,1.95rem);
    letter-spacing:-.05em;line-height:1.12;
}
.octo-news__copy p{color:var(--octo-text)}
.octo-news__stats{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.octo-news__stat{
    background:var(--octo-soft);
    border:1px solid var(--octo-line);
    border-radius:20px;
    padding:16px 18px;
}
.octo-news__stat-label{
    display:block;color:var(--octo-muted);
    font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;
    font-weight:900;margin-bottom:6px;
}
.octo-news__stat-value{
    display:block;font-size:1.45rem;letter-spacing:-.045em;
    color:var(--octo-ink);font-weight:800;line-height:1.1;
}
.octo-news__stat-meta{
    display:block;color:var(--octo-blue-dark);
    font-size:.72rem;font-weight:800;margin-top:4px;
}
.octo-news__stat--alert .octo-news__stat-value{color:#b45309}

/* ── Section CTA row (centred button under a section) ──────────── */
.octo-section-cta{display:flex;justify-content:center;margin-top:28px}

/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width:960px){
    .octo-hero__grid,
    .octo-decision,
    .octo-news,
    .octo-cta{grid-template-columns:1fr}
    .octo-setup__grid,
    .octo-process,
    .octo-related{grid-template-columns:repeat(2,1fr)}
    .octo-cards,
    .octo-cards--two,
    .octo-tools,
    .octo-rewards{grid-template-columns:1fr}
    .octo-hero{padding-top:36px}
    /* v3.17.9: scale back the desktop 72px hero→setup gap on tablet
     * and below so the spacing reads proportionally on narrow viewports. */
    .octo-setup{padding-top:44px}
    .octo-cta{padding:28px}
    .octo-news{padding:24px}
    /* v3.17.7: on mobile the description expands to full width so the
     * copy reads comfortably on narrow viewports. */
    .octo-group__head p{max-width:none}
}
@media (max-width:620px){
    .octo-section{padding:52px 0}
    .octo-hero__copy h1.octo-hero__title{font-size:2.2rem}
    .octo-hero__lead{font-size:.95rem}
    .octo-setup__grid,
    .octo-process,
    .octo-related{grid-template-columns:1fr}
    .octo-glance__row{grid-template-columns:38px 1fr}
    .octo-glance__row .octo-glance__tag{grid-column:2;justify-self:start}
    .octo-glance{border-radius:26px;padding:16px}
    .octo-glance__top{display:block}
    .octo-glance__score{margin-top:14px;display:inline-block}
    .octo-reward{grid-template-columns:1fr}
    .octo-news__stats{grid-template-columns:1fr}
    .octo-news{border-radius:26px}
    .octo-btn{width:100%}
    .octo-cta .octo-btn{width:auto}
    .octo-section-head{text-align:left;align-items:flex-start}
    .octo-section-head h2{font-size:1.75rem}
    .octo-cta h2{font-size:1.6rem}
    .octo-hero__actions{display:grid}
}

/* ─────────────────────────────────────────────────────────────
 * v3.24.4 — Energy Bills editorial hub extensions.
 *
 * Two small additions to the .octo-* design system used by the
 * /energy-bills/ editorial hub (template-parts/hub-editorial-bills.php).
 * Everything stays scoped under .sat-page so it can't leak into the rest
 * of the site, and the additions piggyback on existing tokens — no new
 * colours, no new shadows.
 *
 *   1. .octo-cards--four — 4-column card grid for the "Know what you
 *      are paying for" section. Mirrors .octo-cards / .octo-cards--two.
 *   2. .octo-tools--single — single full-width tool card for the Direct
 *      Debit calculator callout under the cost-saving section.
 *   3. .octo-article-cards — image-on-top article cards visually
 *      identical to .soeb-article__related-card (used in the "More
 *      guides" section of single posts). Re-implemented inside .sat-page
 *      against the existing --octo-* tokens because the --sa-* tokens
 *      those cards rely on are only available inside the .soeb-article
 *      wrapper, which we deliberately don't bring into this template.
 */

/* 1. Four-column card grid */
.sat-page .octo-cards--four{grid-template-columns:repeat(4,1fr)}

/* 2. Single full-width tool callout (calculator card) */
.sat-page .octo-tools--single{grid-template-columns:1fr;margin-top:28px}
.sat-page .octo-tools--single .octo-tool{padding:36px 38px}
.sat-page .octo-tools--single .octo-tool h3{font-size:1.55rem;margin-top:10px}
.sat-page .octo-tools--single .octo-tool p{max-width:640px;font-size:.95rem;margin-top:8px}

/* 3. Article-card grid (image-on-top guide cards) — matches the
 * .soeb-article__related-card look used in the "More guides" section
 * of every blog post, so the "All energy bill guides" footer reads
 * identically to those cards. */
.sat-page .octo-article-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.sat-page .octo-article-card{
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:20px;
    padding:0;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease;
}
.sat-page .octo-article-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--octo-shadow);
    color:inherit;
}
.sat-page .octo-article-card__img{
    aspect-ratio:16/9;
    background:var(--octo-soft);
    overflow:hidden;
}
.sat-page .octo-article-card__img img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
}
.sat-page .octo-article-card__body{
    padding:16px 18px 18px;
    display:flex;flex-direction:column;gap:8px;
    flex:1;
}
.sat-page .octo-article-card__body small{
    display:block;
    color:var(--octo-muted);
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:900;
}
.sat-page .octo-article-card__body strong{
    display:block;
    font-size:.96rem;
    letter-spacing:-.02em;
    line-height:1.3;
    color:var(--octo-ink);
    font-weight:700;
    margin-bottom:auto;
}
.sat-page .octo-article-card__link{
    color:var(--octo-blue-dark);
    font-weight:900;
    font-size:.78rem;
    margin-top:6px;
}

@media (max-width:1080px){
    .sat-page .octo-cards--four{grid-template-columns:repeat(2,1fr)}
    .sat-page .octo-article-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
    .sat-page .octo-cards--four{grid-template-columns:1fr}
    .sat-page .octo-article-cards{grid-template-columns:1fr}
    .sat-page .octo-tools--single .octo-tool{padding:24px}
    .sat-page .octo-tools--single .octo-tool h3{font-size:1.3rem}
}

/* ─────────────────────────────────────────────────────────────
 * v3.24.5 — Energy Bills editorial hub, centred hero variant.
 *
 * Applied via the .octo-hero--centred modifier on the Energy Bills hub
 * hero only. Everything is scoped under .sat-page .octo-hero--centred
 * so the standard two-column .octo-hero used by Suppliers & Tariffs
 * (and any future hubs) is untouched.
 *
 * Design intent: calmer, single-column, premium editorial hero. Dark
 * navy H1 with a single brand-blue accent phrase, rounded buttons
 * centred underneath, quiet inline icon meta row separated by hairline
 * dividers.
 *
 * Also adds .octo-section-head--left — a left-aligned variant of
 * .octo-section-head used by the "Choose the right route" section
 * directly below the hero, so the page rhythm is: centred hero →
 * left-aligned section. The default centred .octo-section-head
 * behaviour for every other section on this page (and every other
 * .sat-page) is untouched.
 *
 * v3.24.7 — hero background switched from pale grey to white so the
 * Energy Bills hero matches the /suppliers-and-tariffs/ hero exactly
 * (same surface, same 1px bottom divider). The previous body-level
 * grey override and the section-soft flattening rule for #start-here
 * are no longer needed — the hub now inherits the shared .octo-hero
 * white background, and the section directly below the hero is the
 * white .octo-setup strip (not .octo-section--soft), so there is no
 * seam to flatten. Both overrides have been removed.
 */

/* Inner centred wrapper — wider so the H1 has horizontal room to sit
 * on two lines instead of being forced into three. */
.sat-page .octo-hero--centred .octo-hero__centred{
    max-width:1080px;
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
}

/* Eyebrow sits at the top, centred by the flex parent */
.sat-page .octo-hero--centred .octo-eyebrow{
    margin-bottom:26px;
}

/* H1 — single dark-navy heading with one brand-blue accent phrase.
 * Matches the .octo-brand-blue treatment used on /suppliers-and-tariffs/
 * so both hero H1s share the same colour language. Wider max-width and
 * a slightly larger upper bound on the clamp so the line breaks land
 * on two lines, not three, at typical desktop widths. */
.sat-page .octo-hero--centred .octo-hero__title{
    font-size:clamp(2.2rem,4.4vw,3.4rem);
    letter-spacing:-.045em;
    line-height:1.1;
    max-width:1040px;
    margin:0 auto 22px;
    text-wrap:balance;
}

/* Lede — narrower than the H1 so it reads as a tighter editorial block */
.sat-page .octo-hero--centred .octo-hero__lead{
    font-size:1.05rem;
    line-height:1.7;
    max-width:680px;
    margin:0 auto 30px;
    color:var(--octo-text);
}

/* CTAs — centred under the paragraph */
.sat-page .octo-hero--centred .octo-hero__actions{
    justify-content:center;
    margin:0 0 30px;
    gap:14px;
}

/* Inline meta row — small icons + text, hairline dividers, no pills */
.sat-page .octo-hero--centred .octo-hero__meta{
    list-style:none;
    margin:0;
    padding:0;
    display:inline-flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
}
.sat-page .octo-hero--centred .octo-hero__meta-item{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:0 22px;
    font-size:.85rem;
    font-weight:600;
    color:var(--octo-muted);
    border-right:1px solid rgba(55,125,148,.18);
    line-height:1.2;
}
.sat-page .octo-hero--centred .octo-hero__meta-item:last-child{
    border-right:0;
}
.sat-page .octo-hero--centred .octo-hero__meta-icon{
    color:var(--octo-blue);
    flex-shrink:0;
}

/* Breadcrumbs sit centred under everything else, with a little air */
.sat-page .octo-hero--centred .octo-breadcrumbs{
    justify-content:center;
    margin-top:36px;
    text-align:center;
}

/* Left-aligned section head — used by the "Choose the right route"
 * block directly under the hero. Overrides the default centred
 * .octo-section-head spec without affecting any other section. */
.sat-page .octo-section-head--left{
    text-align:left;
    align-items:flex-start;
    margin-left:0;
    margin-right:auto;
}

/* Mobile — tighten padding, drop break, stack buttons full-width,
 * wrap meta items into a centred column with dividers removed. */
@media (max-width:720px){
    .sat-page .octo-hero--centred{
        padding:56px 0 48px;
    }
    .sat-page .octo-hero--centred .octo-hero__title{
        font-size:1.95rem;
        letter-spacing:-.035em;
    }
    .sat-page .octo-hero--centred .octo-hero__lead{
        font-size:.98rem;
    }
    .sat-page .octo-hero--centred .octo-hero__actions{
        display:grid;
        width:100%;
        gap:10px;
    }
    .sat-page .octo-hero--centred .octo-hero__actions .octo-btn{
        width:100%;
    }
    .sat-page .octo-hero--centred .octo-hero__meta{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }
    .sat-page .octo-hero--centred .octo-hero__meta-item{
        border-right:0;
        padding:0;
    }
}

/* ─────────────────────────────────────────────────────────────
 * v3.28.8 — Solar hub hero: full-bleed image background + dark navy
 * overlay. SCOPED to .sat-page--solar / .solar-hero-shell so it ONLY
 * affects /solar/.
 *
 * IMPORTANT: the centred hero (.octo-hero--centred) is a SHARED component
 * used by the Energy Bills, Heat Pumps, Electric Vehicles and Newsletter
 * hubs as well as Solar. Everything in this block is therefore namespaced
 * under .sat-page--solar / .solar-hero-shell so the layout, typography,
 * spacing, buttons, meta row and breadcrumb structure stay byte-for-byte
 * identical on every other hub — only the Solar hero gains the image + dark
 * treatment and the matching light-on-dark text colours.
 *
 * v3.28.10 — the hero image now extends UP behind the floating site header
 * so the dark rounded nav sits ON the image and the top of the page reads
 * as one continuous hero (Ohme-style), with no white band behind the nav.
 *
 * HOW IT WORKS — and why the nav is NOT physically moved into the shell:
 *   • The site header (.site-header) is a TOP-LEVEL position:sticky element,
 *     so it stays pinned while you scroll the WHOLE page. Nesting it inside
 *     a hero wrapper would confine its sticky containing block to the hero,
 *     so it would scroll away after the hero — a regression. We therefore
 *     keep the nav exactly where/what it is (same markup, rounded pill,
 *     shadow, z-index:1000) and instead extend the image UP behind it.
 *   • The hero is wrapped in <section class="solar-hero-shell"> which owns
 *     the background via an absolutely-positioned media layer
 *     (.solar-hero-shell__media). That layer is pulled up (top:-120px) so it
 *     fills the ~108px strip behind + around the nav. Being absolute it adds
 *     NO layout shift — nothing else on the page moves.
 *   • Layering is pure z-index in the root stacking context:
 *         media (z-index:0)  <  hero content (z-index:1)  <  nav (z-index:1000)
 *     so the nav floats above the image and the hero text sits above it too.
 *   • .sat-page sets overflow:hidden (to contain card shadows horizontally);
 *     that would clip the media layer's upward bleed, so for Solar only we
 *     switch to overflow-x:clip / overflow-y:visible — still contains the
 *     horizontal shadow overflow, but lets the media extend up behind the nav.
 * ───────────────────────────────────────────────────────────── */

/* Solar only: let the hero media layer extend up behind the nav while still
 * containing horizontal shadow overflow (the reason .sat-page uses
 * overflow:hidden). overflow-x:clip keeps overflow-y:visible (clip does not
 * coerce the other axis to auto), so vertical bleed is allowed and no scroll
 * container is created. */
.sat-page--solar{
    overflow-x:clip;
    overflow-y:visible;
}

/* Positioning context for the image layer. No z-index here, so it does NOT
 * create a stacking context — the nav's z-index:1000 keeps winning globally. */
.solar-hero-shell{
    position:relative;
}

/* Full-bleed image + layered dark-navy overlay, pulled UP behind the floating
 * nav (top:-120px ≈ the ~108px sticky header + buffer) and down to the bottom
 * of the hero. Absolute, so it introduces no layout shift.
 *   Layer 1 (top):  subtle vertical vignette — darkens the very top (behind
 *                   the nav) and bottom edges so text never sits on bright sky.
 *   Layer 2:        the horizontal navy gradient (Ohme-style) — darkest left.
 *   Layer 3:        the photo itself (assets/images/solar-hero-bg.jpg,
 *                   referenced relative to style.css at the theme root). */
.solar-hero-shell__media{
    position:absolute;
    left:0;
    right:0;
    top:-120px;            /* extend up behind the floating nav */
    bottom:0;
    z-index:0;
    pointer-events:none;
    background-color:#07172a;          /* fallback while the image loads */
    background-image:
        linear-gradient(180deg, rgba(7,23,42,.30) 0%, rgba(7,23,42,0) 38%, rgba(7,23,42,0) 64%, rgba(7,23,42,.55) 100%),
        linear-gradient(90deg, rgba(7,23,42,.90) 0%, rgba(7,23,42,.78) 42%, rgba(7,23,42,.62) 100%),
        url('assets/images/solar-hero-bg.jpg');
    background-size:cover, cover, cover;
    background-position:center, center, center 58%;
    background-repeat:no-repeat;
}

/* Hero content sits ABOVE the image layer. The top padding is the gap between
 * the floating nav (~108px, in normal flow above the hero) and the heading —
 * generous so the layout stays spacious and premium, without pushing the H1
 * too high. */
.sat-page--solar .octo-hero--centred{
    position:relative;
    z-index:1;
    background:transparent;
    padding:64px 0 64px;
}

/* The white hero draws a 1px hairline divider along its bottom edge; on the
 * dark image that reads as a seam, so hide it for Solar only. */
.sat-page--solar .octo-hero--centred::after{display:none}

/* Category label — strip the cyan pill entirely and show plain, small,
 * uppercase, letter-spaced text in light teal. SCOPED to the hero so the
 * .octo-eyebrow pills used by the section heads further down the Solar page
 * (Choose your next step, Keep exploring) are left exactly as they were. */
.sat-page--solar .octo-hero--centred .octo-eyebrow{
    background:none;
    border:0;
    border-radius:0;
    padding:0;
    color:#7fe0ef;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.sat-page--solar .octo-hero--centred .octo-eyebrow::before{display:none}

/* H1 — white on the dark image. */
.sat-page--solar .octo-hero--centred .octo-hero__title{color:#fff}

/* Highlighted phrase ("going solar in the UK.") — lift the brand teal to a
 * lighter cyan so it keeps the brand colour language but has strong
 * contrast against the navy overlay. */
.sat-page--solar .octo-hero--centred .octo-hero__title .octo-brand-blue{color:#5fcbe0}

/* Intro paragraph — soft off-white rather than the dark editorial grey. */
.sat-page--solar .octo-hero--centred .octo-hero__lead{color:rgba(255,255,255,.86)}

/* Meta row — light text, light-teal icons, translucent white dividers. */
.sat-page--solar .octo-hero--centred .octo-hero__meta-item{
    color:rgba(255,255,255,.82);
    border-right-color:rgba(255,255,255,.24);
}
.sat-page--solar .octo-hero--centred .octo-hero__meta-icon{color:#7fe0ef}

/* Breadcrumbs — light and readable on the dark image. */
.sat-page--solar .octo-hero--centred .octo-breadcrumbs,
.sat-page--solar .octo-hero--centred .octo-breadcrumbs a{color:rgba(255,255,255,.72)}
.sat-page--solar .octo-hero--centred .octo-breadcrumbs a:hover{color:#fff;text-decoration:underline}
.sat-page--solar .octo-hero--centred .octo-breadcrumbs__current{color:#fff;font-weight:600}

/* Secondary CTA — outlined / transparent so it reads on the dark panel
 * instead of the solid white pill used on the light hubs. The primary teal
 * button already has ample contrast, so it is deliberately left untouched. */
.sat-page--solar .octo-hero--centred .octo-btn--secondary{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.55);
}
.sat-page--solar .octo-hero--centred .octo-btn--secondary:hover{
    background:rgba(255,255,255,.08);
    border-color:#fff;
}

/* Mobile — the horizontal gradient does little on a narrow screen, so swap
 * to a stronger, more even darkening so the white H1, off-white lede and
 * light meta stay readable over the busier cropped image. (Font sizes and
 * full-width button stacking are already handled by the shared
 * .octo-hero--centred mobile rules above.) */
@media (max-width:720px){
    /* Mobile header is shorter (≈76px), so the media needs less upward pull.
     * Use a stronger, more even darkening so the white H1, off-white lede and
     * light meta stay readable over the busier cropped image. Font sizes and
     * full-width button stacking are already handled by the shared
     * .octo-hero--centred mobile rules above. */
    .solar-hero-shell__media{
        top:-92px;
        background-image:
            linear-gradient(180deg, rgba(7,23,42,.82) 0%, rgba(7,23,42,.72) 52%, rgba(7,23,42,.86) 100%),
            url('assets/images/solar-hero-bg.jpg');
        background-size:cover, cover;
        background-position:center, center 56%;
    }
    .sat-page--solar .octo-hero--centred{
        padding:44px 0 48px;
    }
}

/* ─────────────────────────────────────────────────────────────
 * v3.24.8 — Suppliers & Tariffs hub, horizontal Ofgem price-cap strip.
 *
 * Sits directly below the centred .octo-hero--centred hero (and its
 * breadcrumbs) on /suppliers-and-tariffs/. Surfaces the latest Ofgem
 * default-tariff data — typical annual bill, electricity + gas unit
 * rates, quarter-on-quarter delta and the contextual note — that
 * previously lived inside the right-hand .octo-glance side card.
 *
 * The strip is a single horizontal row at desktop: a left-hand label
 * block ("Latest Ofgem price cap" + period) followed by a flex group
 * of 3 numeric stats and one wider context-note cell. It collapses to
 * a 2-column grid on tablet and a single column on mobile so the
 * numbers always sit comfortably without crowding.
 *
 * Scoped under .sat-page so the rules can't leak into other templates.
 * Uses the same .octo-blue-tint / .octo-line / .octo-blue-dark tokens
 * as the rest of the .sat-page design system so the strip reads as
 * part of the same visual language.
 */
.sat-page .sat-ofgem-strip{
    background:linear-gradient(180deg,#fff 0%,var(--octo-soft) 100%);
    border-top:1px solid var(--octo-line);
    border-bottom:1px solid var(--octo-line);
    padding:22px 0;
}
.sat-page .sat-ofgem-strip__inner{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
}
.sat-page .sat-ofgem-strip__heading{
    flex:0 0 auto;
    min-width:200px;
    padding-right:24px;
    border-right:1px solid var(--octo-line);
}
.sat-page .sat-ofgem-strip__eyebrow{
    display:block;
    color:var(--octo-blue-dark);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.68rem;
    margin-bottom:4px;
}
.sat-page .sat-ofgem-strip__period{
    display:block;
    font-size:1.05rem;
    letter-spacing:-.02em;
    color:var(--octo-ink);
    font-weight:800;
    line-height:1.25;
}
.sat-page .sat-ofgem-strip__stats{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);
    gap:22px;
    align-items:center;
}
.sat-page .sat-ofgem-strip__stat{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.sat-page .sat-ofgem-strip__stat small{
    color:var(--octo-muted);
    font-weight:700;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.sat-page .sat-ofgem-strip__stat strong{
    font-size:1.45rem;
    line-height:1.15;
    color:var(--octo-blue-dark);
    font-weight:800;
    letter-spacing:-.025em;
}
.sat-page .sat-ofgem-strip__unit{
    font-size:.85rem;
    color:var(--octo-muted);
    font-weight:700;
    letter-spacing:0;
}
.sat-page .sat-ofgem-strip__delta{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:4px;
    font-size:.72rem;
    font-weight:800;
    padding:3px 8px;
    border-radius:999px;
    width:fit-content;
}
.sat-page .sat-ofgem-strip__delta--down{
    background:var(--octo-green-soft);
    color:var(--octo-green);
}
.sat-page .sat-ofgem-strip__delta--up{
    background:#fde8ea;
    color:#a4232f;
}
.sat-page .sat-ofgem-strip__note{
    background:var(--octo-blue-tint);
    border:1px solid var(--octo-blue-line);
    border-radius:14px;
    padding:10px 14px;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.sat-page .sat-ofgem-strip__note small{
    color:var(--octo-blue-dark);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:.65rem;
}
.sat-page .sat-ofgem-strip__note span{
    color:var(--octo-blue-dark);
    font-size:.82rem;
    line-height:1.45;
    font-weight:600;
}

/* Tablet — heading drops its divider and sits above the stats; stats
 * collapse to a 2-column grid with the note spanning the full row. */
@media (max-width:960px){
    .sat-page .sat-ofgem-strip__inner{
        gap:18px;
    }
    .sat-page .sat-ofgem-strip__heading{
        flex:1 0 100%;
        min-width:0;
        padding-right:0;
        border-right:0;
        border-bottom:1px solid var(--octo-line);
        padding-bottom:14px;
    }
    .sat-page .sat-ofgem-strip__stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px 22px;
        width:100%;
    }
    .sat-page .sat-ofgem-strip__note{
        grid-column:1 / -1;
    }
}

/* Mobile — single column, tighter numerals. */
@media (max-width:560px){
    .sat-page .sat-ofgem-strip{padding:18px 0}
    .sat-page .sat-ofgem-strip__stats{
        grid-template-columns:1fr;
        gap:14px;
    }
    .sat-page .sat-ofgem-strip__stat strong{font-size:1.3rem}
}

/* ─────────────────────────────────────────────────────────────
 * SOEB Article — site-wide default for single posts and standard pages
 * v3.14.0
 *
 * Scoped under .soeb-article so it can't leak into the landing-page
 * templates (.octo-page / .sat-page) or any of the bespoke page
 * templates (Hub, Tools, Newsletter, About, Octopus Energy). Every
 * regular blog post (single.php) and every standard page (page.php,
 * non-tool branch) wraps its content in .soeb-article and inherits
 * this design system automatically — no per-post editor changes
 * required for existing content.
 *
 * Architecture mirrors the .octo-page / .sat-page approach: design
 * tokens defined on the wrapper, all component classes prefixed with
 * .soeb-article and most NOT scoped to the wrapper so they can be
 * combined freely. Helper components (callouts, FAQ, stats, CTA card,
 * ranked table) work inside .the_content() output by adding the
 * relevant class via the Gutenberg "Custom HTML" block.
 * ──────────────────────────────────────────────────────────── */

.soeb-article{
    /* Editorial token scale — softer than v3.14.0, refined for the
     * v3.15.0 article redesign. Body/ink/muted move closer to slate
     * scale (#111827 / #374151 / #6b7280) for a calmer read.
     *
     * v3.19.5 — sitewide blue refinement. The bright Octopus-style
     * teal (#0097b2) was reading too "template" across category pills,
     * accents, callouts and CTAs. Moved to a muted editorial accent
     * scale: #377D94 lead, #2E6B7F hover, #EAF6F8 soft tint, #CFE6EC
     * accent border. Neutral surface tokens snapped to the slate-200
     * family (#E2E8F0 main border, #DCE7EF subtle border, #F8FAFC soft
     * surface) so cards/dividers/section bands sit on a single clean
     * neutral scale. Yellow/green/amber accents untouched. */
    --sa-ink:#111827;
    --sa-text:#374151;
    --sa-muted:#6b7280;
    --sa-line:#E2E8F0;
    --sa-line-soft:#DCE7EF;
    --sa-soft:#F8FAFC;
    --sa-blue:#377D94;
    --sa-blue-dark:#2E6B7F;
    --sa-blue-tint:#EAF6F8;
    --sa-blue-line:#CFE6EC;
    --sa-yellow:#f5a623;       /* warmer, less buttercup than v3.14 */
    --sa-yellow-soft:#fff8eb;
    --sa-yellow-line:#f7d99b;
    --sa-yellow-text:#7c5500;
    --sa-green:#006e5d;
    --sa-green-soft:#ebf8f3;
    --sa-green-line:#c0e7d8;
    --sa-amber:#b45309;
    --sa-amber-soft:#fff3e0;
    --sa-amber-line:#f9b878;
    --sa-amber-text:#7c3a00;
    --sa-shadow:0 20px 50px rgba(15,23,42,.06);
    --sa-shadow-soft:0 8px 22px rgba(15,23,42,.04);
    --sa-radius-card:22px;
    --sa-radius-small:16px;
    --sa-reading-w:800px;
    --sa-container-w:1256px;

    background:#fff;
    color:var(--sa-ink);
    line-height:1.65;
    overflow:hidden; /* contain side-card shadows from causing horizontal scroll */
}

/* Reset baseline so editor-output prose adopts the design tokens. */
.soeb-article :where(h1,h2,h3,h4){
    color:var(--sa-ink);
    letter-spacing:-.025em;
    line-height:1.15;
    font-weight:800;
    margin:0;
}

/* ── Hero ─────────────────────────────────────────────────── */
/* v3.17.0: hero is now a defined card-style panel. The card edges
 * sit flush with the header by filling the full .site-container
 * width — the previous --sa-container-w constraint on the inner
 * wrapper has been removed so it matches the header's content edges.
 * Breadcrumbs sit ABOVE the card in the .site-container (normal
 * flow); the card starts with the category badge. */
.soeb-article__hero{
    /* v3.17.4: bumped top padding 32 → 40px to give the breadcrumbs
     * + card a clearer breathing space above. */
    padding:40px 0 0;
    background:#fff;
}
.soeb-article__hero .site-container{
    max-width:var(--w-site);
}

/* Breadcrumbs — sit above the card, on the white page background.
 * margin-bottom creates the clear gap between the breadcrumb row
 * and the top edge of the card. */
.soeb-article__hero > .site-container > .soeb-article__crumbs{
    margin-bottom:22px;
}

/* The card itself: neutral off-white surface, soft cool grey-blue
 * border, premium long-throw shadow.
 * v3.19.4: replaced the v3.17.5 pale blue treatment (#f5f9fc / #d8e8ee
 * / 0 18px 50px rgba shadow). The earlier blue read slightly too
 * "template" against the dark navy header. The new neutral palette
 * (#F8FAFC surface, #DCE7EF hairline, longer/softer shadow) feels
 * cleaner and more editorial without changing any structure,
 * padding, radius, layout or typography. */
.soeb-article__hero-inner{
    background:#F8FAFC;
    border:1px solid #DCE7EF;
    border-radius:32px;
    box-shadow:0 24px 60px rgba(15,23,42,.08);
    padding:29px 34px;
}
/* v3.16.0: when a featured image is present, the hero is a 2-column
 * grid — text content on the left, featured image on the right.
 * v3.17.4: image column is now `minmax(420px, 0.9fr)` — it stays at
 * least 420px wide so the image reads confidently, but is slightly
 * narrower than the text column on wide viewports so the editorial
 * content remains the visual lead. */
.soeb-article__hero-inner--has-image{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
    gap:48px;
    align-items:center;
}
.soeb-article__hero-content{
    min-width:0; /* allow grid item to shrink so long words don't overflow */
}
.soeb-article__crumbs{
    font-size:.78rem; /* ~14px */
    color:var(--sa-muted);
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:18px;
    letter-spacing:.005em;
}
.soeb-article__crumbs a{
    color:var(--sa-muted);
    text-decoration:none;
    transition:color .15s ease;
}
.soeb-article__crumbs a:hover{color:var(--sa-blue-dark)}
.soeb-article__crumbs .sep{opacity:.45}
.soeb-article__crumbs-current{color:var(--sa-ink);font-weight:600}

.soeb-article__eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    /* On the blue-tinted card the eyebrow is more legible against
     * white than the same tint as the card itself. */
    border:1px solid rgba(55,125,148,.22);
    background:#fff;
    color:var(--sa-blue-dark);
    border-radius:999px;
    padding:6px 12px;
    font-size:.68rem; /* ~12px */
    font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;
    text-decoration:none;
    width:fit-content;
    margin-bottom:18px;
}
.soeb-article__eyebrow::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--sa-blue);
    flex-shrink:0;
}

.soeb-article__title{
    /* v3.17.4: scaled back to read as an article title rather than a
     * homepage hero — 38px floor, 3.3vw fluid mid, 52px ceiling, with
     * a 720px cap so it doesn't get wide on full-bleed viewports. */
    font-size:clamp(38px, 3.3vw, 52px);
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:800;
    color:var(--sa-ink);
    margin:0 0 16px;
    max-width:720px;
}
/* When there's no featured image, the hero is a single text column —
 * give the title back the larger original sizing it had pre-v3.16.0
 * so wide hero panels don't look sparse. */
.soeb-article__hero-inner:not(.soeb-article__hero-inner--has-image) .soeb-article__title{
    font-size:clamp(2.333rem, 5vw, 4rem);
    line-height:1.05;
    max-width:880px;
}
/* Optional inline highlight on a phrase within the H1 or H2. */
.soeb-article .soeb-highlight{
    background:linear-gradient(180deg,transparent 60%,var(--sa-yellow) 60%);
    padding-inline:4px;
    margin-inline:-4px;
}

/* v3.17.0: short accent line that sits between the H1 and the lead
 * paragraph. Matches the inline link / H2 accent colour so the whole
 * editorial system reads as one. */
.soeb-article__accent-line{
    display:block;
    width:64px;
    height:3px;
    border-radius:999px;
    background:var(--sa-blue);
    margin:0 0 20px;
}

.soeb-article__lead{
    /* v3.17.5: nudged down — 17 → 20px instead of 18 → 22px so the
     * lead sits a bit more subordinate to the H1. */
    font-size:clamp(17px, 1.3vw, 20px);
    line-height:1.55;
    color:var(--sa-text);
    font-weight:400;
    margin:0 0 20px;
    max-width:640px;
}

.soeb-article__meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    align-items:center;
    /* v3.17.4: more generous space above the divider; subtle 10%
     * slate rule. No bottom border so the card stays open at its
     * base edge.
     * v3.19.4: divider colour swapped to slate-200 (#E2E8F0) so it
     * reads cleanly against the new #F8FAFC card surface — subtle
     * but visible. */
    padding:20px 0 0;
    margin-top:24px;
    border-top:1px solid #E2E8F0;
    font-size:.83rem; /* ~15px */
    color:var(--sa-muted);
    font-weight:500;
    max-width:640px;
}
.soeb-article__meta-item{display:inline-flex;align-items:center;gap:8px}
.soeb-article__meta b{color:var(--sa-ink);font-weight:700}
.soeb-article__meta-dot{opacity:.4}
.soeb-article__avatar{
    width:26px;height:26px;border-radius:50%;
    background:var(--sa-blue-tint);
    color:var(--sa-blue-dark);
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:800;font-size:.7rem;letter-spacing:.02em;
}
.soeb-article__byline{color:var(--sa-ink);font-weight:600}

/* Featured image — v3.16.0: now lives inside the right column of the
 * hero grid. Fills its grid cell, keeps the rounded corners + soft
 * shadow. The legacy .soeb-article__featured wrapper (full-bleed band
 * below the hero) is no longer rendered by single.php / page.php but
 * the .soeb-article__featured-img class is reused inside the new
 * .soeb-article__hero-featured column. */
.soeb-article__hero-featured{
    min-width:0; /* allow shrinking inside the grid cell */
}
.soeb-article__featured-img{
    margin:0;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(15,23,42,.06);
}
.soeb-article__featured-img img{
    display:block;width:100%;height:auto;
}
/* v3.17.3: when the hero is in the 2-column grid (has-image variant),
 * give the featured image a fixed height + object-fit: cover so the
 * image column reads with equal visual weight to the text column.
 * v3.17.4: trimmed from 420 → 380px to keep the overall card from
 * feeling like a homepage hero. Reset back to natural aspect ratio
 * at the tablet breakpoint when the grid stacks (see the
 * max-width:1080px block below). */
.soeb-article__hero-inner--has-image .soeb-article__featured-img{
    height:380px;
}
.soeb-article__hero-inner--has-image .soeb-article__featured-img img{
    height:100%;
    object-fit:cover;
}
.soeb-article__featured-img figcaption{
    font-size:.78rem;color:var(--sa-muted);
    padding:12px 16px;
    background:var(--sa-soft);
    border-top:1px solid var(--sa-line);
    text-align:center;
}

/* ── Body layout (main + sidebar) ───────────────────────── */
.soeb-article__layout{
    display:grid;
    grid-template-columns:minmax(0,var(--sa-reading-w)) 300px;
    gap:80px;
    max-width:var(--sa-container-w);
    /* v3.17.4: 64px below the hero card per design spec — enough
     * separation to read as two distinct sections without making
     * the article feel disconnected from the header. */
    margin:64px auto 0;
    align-items:start;
}
.soeb-article__main{
    min-width:0; /* allow grid item to shrink so wide tables don't blow it out */
}
.soeb-article__body{
    max-width:var(--sa-reading-w);
    font-size:1rem; /* 18px @ html font-size:18px */
    line-height:1.75;
    color:var(--sa-text);
}
.soeb-article__sidebar{
    position:sticky;
    top:110px;
    align-self:start;
}

/* ── Tool feature section (v3.24.2) ─────────────────────────
 * Wider, centred wrapper used by tool pages (e.g. the Direct
 * Debit Calculator) for the first content block after the hero.
 * Breaks out of the .soeb-article__layout grid so a calculator
 * block can sit centred on the page with no TOC/sidebar, while
 * the explanatory copy below it stays in the normal reading
 * column. Activated by the page template (page.php) on a small
 * allow-list of pages — never global. */
.tool-feature-section{
    max-width:1140px;
    margin:64px auto 0;
    padding:0 24px;
}
.tool-feature-section > *{
    max-width:100%;
}
@media (max-width:900px){
    .tool-feature-section{
        margin:48px auto 0;
        padding:0 20px;
    }
}
@media (max-width:720px){
    .tool-feature-section{
        margin:36px auto 0;
        padding:0 16px;
    }
}

/* ── Prose: H2 with subtle blue vertical accent ─────────── */
.soeb-article__body h2{
    position:relative;
    /* 30px → 46px clamp — strong but controlled, not the old inflated H2. */
    font-size:clamp(1.667rem, 3.5vw, 2.556rem);
    line-height:1.12;
    letter-spacing:-.025em;
    font-weight:800;
    color:var(--sa-ink);
    margin:64px 0 22px;
    padding-left:22px;
    border:0;
    scroll-margin-top:110px;
}
.soeb-article__body h2::before{
    content:"";
    position:absolute;
    left:0;
    /* v3.17.0: bar now spans the full height of the heading. Replaced
     * fixed `height:34px` with top/bottom insets so multi-line H2s
     * get a bar that reaches both lines instead of being cropped at
     * the first line's cap height. The .18em insets mirror the
     * previous single-line proportions. */
    top:.18em;
    bottom:.18em;
    width:5px;
    border-radius:999px;
    /* v3.16.0: was --sa-yellow. Now matches the inline link colour
     * (--sa-blue-dark, #007f96) so the editorial accent and the link
     * colour read as one design system. */
    background:var(--sa-blue-dark);
}
.soeb-article__body h2:first-child{margin-top:8px}

/* H3 — calmer than v3.14 (no cyan left rule). */
.soeb-article__body h3{
    font-size:1.333rem; /* ~24px */
    line-height:1.25;
    letter-spacing:-.015em;
    font-weight:800;
    color:var(--sa-ink);
    margin:36px 0 14px;
    padding-left:0;
    border-left:0;
    scroll-margin-top:110px;
}
.soeb-article__body h4{
    font-size:1.111rem; /* ~20px */
    line-height:1.3;
    letter-spacing:-.01em;
    font-weight:700;
    color:var(--sa-ink);
    margin:28px 0 10px;
}

/* Paragraphs and inline links */
.soeb-article__body p{
    font-size:1rem;
    line-height:1.75;
    color:var(--sa-text);
    margin:0 0 1.45em;
}
.soeb-article__body p a,
.soeb-article__body li a,
.soeb-article__body blockquote a{
    color:var(--sa-blue-dark);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    font-weight:500;
    transition:text-decoration-thickness .15s ease, color .15s ease;
}
.soeb-article__body p a:hover,
.soeb-article__body li a:hover,
.soeb-article__body blockquote a:hover{
    color:var(--sa-blue);
    text-decoration-thickness:2px;
}
.soeb-article__body p a:focus-visible,
.soeb-article__body li a:focus-visible,
.soeb-article__body blockquote a:focus-visible{
    outline:2px solid var(--sa-blue);
    outline-offset:2px;
    border-radius:3px;
}
.soeb-article__body strong,
.soeb-article__body b{color:var(--sa-ink);font-weight:700}
.soeb-article__body em,
.soeb-article__body i{font-style:italic}

/* Lists — native markers in muted brand blue (was warm yellow in
 * v3.14 → v3.26; the yellow read as "template" rather than editorial
 * and clashed with the wider site palette). Comfortable item spacing
 * without huge gaps. Override the global `ul,ol{list-style:none}`
 * reset so editor-output bullets are visible. */
.soeb-article__body ul{
    list-style:disc;
    margin:1.2em 0 1.8em;
    padding-left:1.4em;
}
.soeb-article__body ul > li{
    margin:0 0 .65em;
    padding-left:.3em;
    font-size:1rem;
    line-height:1.7;
    color:var(--sa-text);
}
.soeb-article__body ul > li::marker{
    color:var(--sa-blue-dark);
}
.soeb-article__body ul ul{
    margin:.4em 0 .6em;
    list-style:circle;
}

.soeb-article__body ol{
    list-style:decimal;
    margin:1.2em 0 1.8em;
    padding-left:1.6em;
    counter-reset:none;
}
.soeb-article__body ol > li{
    margin:0 0 .65em;
    padding-left:.3em;
    font-size:1rem;
    line-height:1.7;
    color:var(--sa-text);
}
.soeb-article__body ol > li::marker{
    color:var(--sa-blue-dark);
    font-weight:700;
}
/* Reset old counter-based ::before bullets from v3.14 — they'd
 * double up with the native markers above. */
.soeb-article__body ul > li::before,
.soeb-article__body ol > li::before{
    content:none;
}

/* Blockquote / pull quote */
.soeb-article__body blockquote{
    background:var(--sa-soft);
    border-left:4px solid var(--sa-yellow);
    border-radius:14px;
    padding:22px 26px;
    margin:32px 0;
    position:relative;
}
.soeb-article__body blockquote p{
    font-size:1.083rem; /* ~19.5px */
    line-height:1.55;
    font-weight:500;
    color:var(--sa-ink);
    letter-spacing:-.01em;
    margin:0 0 8px;
}
.soeb-article__body blockquote p:last-child{margin-bottom:0}
.soeb-article__body blockquote cite{
    font-size:.78rem;
    color:var(--sa-muted);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-style:normal;
    display:block;
}

/* Horizontal rule */
.soeb-article__body hr{
    border:0;
    height:1px;
    background:var(--sa-line);
    margin:40px 0;
}

/* Inline figures and images */
.soeb-article__body figure,
.soeb-article__body img{margin:36px 0;max-width:100%}
.soeb-article__body figure img,
.soeb-article__body > img,
.soeb-article__body p > img{
    display:block;
    width:100%;
    height:auto;
    border-radius:18px;
}
.soeb-article__body figure figcaption,
.soeb-article__body .wp-caption-text{
    font-size:.78rem; /* ~14px */
    color:var(--sa-muted);
    margin-top:10px;
    text-align:center;
    font-style:normal;
    line-height:1.5;
}

/* ── Tables (auto styling for the_content() output) ──────── *
 * Soft editorial card look — used by every table inside an article
 * body, regardless of how the editor wrapped it. Three possible
 * outer-container shapes are handled:
 *
 *   1. <figure class="wp-block-table"><table>…</table></figure>
 *      (block-editor default)
 *   2. <div class="table-wrap"><table>…</table></div>
 *      (added by soeb_wrap_tables_in_content() in functions.php
 *       for bare <table> tags pasted into the editor)
 *   3. <figure class="wp-block-table"><div class="table-wrap">
 *        <table>…</table></div></figure>
 *      (block-editor table that's then been wrapped by the PHP
 *       filter — the most common case in practice)
 *
 * Whichever shape, the OUTER element gets the card chrome (border,
 * radius, soft shadow, white background). When both a figure and an
 * inner .table-wrap exist, the inner one collapses to transparent so
 * we don't double up.
 *
 * Cell rules use border-collapse:separate with bottom-only borders for
 * a clean editorial look (no vertical column rules). A 2px yellow
 * accent underlines the header row to echo the brand highlight used
 * in the article hero.
 *
 * v3.28.1: previous version's `.soeb-article__body > table` rule never
 * matched in production because the PHP filter wraps every bare table
 * in .table-wrap. .table-wrap is now in the wrapper selector list so
 * those tables pick up the card chrome correctly. */
.soeb-article__body .wp-block-table,
.soeb-article__body figure.wp-block-table,
.soeb-article__body .table-wrap,
.soeb-article__body .soeb-table{
    margin:32px 0;
    background:#fff;
    border:1px solid var(--sa-line);
    border-radius:18px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    box-shadow:var(--sa-shadow-soft);
    position:relative;
    max-width:100%;
}
/* Nested case: figure > .table-wrap — the figure already provides the
 * card chrome, so the inner wrapper goes transparent. */
.soeb-article__body figure.wp-block-table > .table-wrap{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    margin:0;
    overflow:visible;
}
/* Neutralise WP block-editor figure defaults that would otherwise leak
 * through (padding, dotted borders, etc). */
.soeb-article__body figure.wp-block-table{padding:0}

.soeb-article__body table,
.soeb-article__body .wp-block-table table,
.soeb-article__body .table-wrap table{
    width:100%;
    min-width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-family:var(--font);
    font-size:.92rem;
    margin:0;
    background:transparent;
    border:0;
}
/* Header row — light editorial style for the data-column headers.
 * The first column gets the dark navy treatment (see the first-column
 * rules below) so the table reads as a row-labelled matrix: dark
 * "spine" down the left, light data area to the right.
 *
 * v3.28.3: navy treatment moved from the entire header row to the
 * leftmost column only (both header and body). Yellow underline
 * removed — the navy spine is the visual anchor now. */
.soeb-article__body table thead th,
.soeb-article__body table thead td{
    text-align:left;
    padding:16px 18px;
    font-family:var(--font);
    font-size:.72rem; /* ~13px */
    font-weight:700;
    color:var(--sa-ink);
    text-transform:uppercase;
    letter-spacing:.04em;
    background:var(--sa-soft);
    border:0;
    border-bottom:1px solid var(--sa-line);
    vertical-align:top;
}
/* No-thead fallback: row 1 with <th> cells gets the same header look. */
.soeb-article__body table > tr:first-child > th,
.soeb-article__body table > tbody > tr:first-child > th{
    text-align:left;
    padding:16px 18px;
    font-family:var(--font);
    font-size:.72rem;
    font-weight:700;
    color:var(--sa-ink);
    text-transform:uppercase;
    letter-spacing:.04em;
    background:var(--sa-soft);
    border:0;
    border-bottom:1px solid var(--sa-line);
    vertical-align:top;
}
/* Body rows. */
.soeb-article__body table td{
    padding:16px 18px;
    color:var(--sa-text);
    background:transparent;
    border:0;
    border-bottom:1px solid var(--sa-line-soft);
    vertical-align:top;
    line-height:1.55;
    font-size:.92rem;
}
/* Row-header <th> (scope="row") in the body — picked up by the
 * first-column rules below, but if it's NOT the first cell (rare)
 * still keep it light/ink. */
.soeb-article__body table tbody th{
    padding:16px 18px;
    color:var(--sa-ink);
    background:transparent;
    border:0;
    border-bottom:1px solid var(--sa-line-soft);
    vertical-align:top;
    line-height:1.55;
    font-size:.92rem;
    font-weight:600;
    text-align:left;
}
/* Zebra striping — applied to non-first-column cells only so the
 * solid dark first-column spine isn't broken by the tint. */
.soeb-article__body table tbody tr:nth-child(even) td:not(:first-child){background:#fbfcfe}
.soeb-article__body table tbody tr:hover td:not(:first-child){background:#f4f8fb}
.soeb-article__body table tbody tr:last-child td{border-bottom:0}

/* ── First-column "spine" — the leftmost cell in every row (header
 * and body) gets the dark navy gradient and white text. Only the
 * top-left cell carries the radial teal glow; every other spine cell
 * is solid navy so the highlight reads as a single anchor point,
 * matching the .octo-card--dark treatment (where the glow appears
 * once in the corner, not repeated). */
.soeb-article__body table thead tr > th:first-child,
.soeb-article__body table thead tr > td:first-child,
.soeb-article__body table > tr:first-child > th:first-child,
.soeb-article__body table > tbody > tr:first-child > th:first-child,
.soeb-article__body table tbody tr td:first-child,
.soeb-article__body table tbody tr th:first-child{
    background:linear-gradient(140deg, #0c1a2b 0%, #15273d 50%, #0c1a2b 100%) !important;
    color:#fff !important;
    font-weight:600;
    border-bottom-color:rgba(255,255,255,.08);
}
/* Top-left cell only — add the radial teal glow on top of the navy
 * base. This is the single highlight anchor for the table. */
.soeb-article__body table thead tr:first-child > th:first-child,
.soeb-article__body table thead tr:first-child > td:first-child,
.soeb-article__body table > tr:first-child > th:first-child,
.soeb-article__body table > tbody > tr:first-child > th:first-child{
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(55,125,148,.45) 0%, rgba(55,125,148,0) 55%),
        linear-gradient(140deg, #0c1a2b 0%, #15273d 50%, #0c1a2b 100%) !important;
}
/* Header cell at the top-left keeps the uppercase label style but
 * inherits the navy + white treatment from the rule above. */
.soeb-article__body table thead tr > th:first-child,
.soeb-article__body table thead tr > td:first-child,
.soeb-article__body table > tr:first-child > th:first-child,
.soeb-article__body table > tbody > tr:first-child > th:first-child{
    font-weight:700;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}
/* Strong/bold inside the dark spine should stay white, not ink. */
.soeb-article__body table td:first-child strong,
.soeb-article__body table td:first-child b,
.soeb-article__body table th:first-child strong,
.soeb-article__body table th:first-child b{color:#fff}
.soeb-article__body table strong,
.soeb-article__body table b{color:var(--sa-ink)}
/* Link colours follow the new "dark spine" pattern:
 *   - Cells in the dark first column → yellow links (for contrast on navy)
 *   - All other cells (header data cells + body data cells) → teal blue
 *   - First-column body <b>/<strong> stays white (set in spine rule above) */
.soeb-article__body table a{
    color:var(--sa-blue);
    text-decoration:underline;
    text-underline-offset:2px;
    text-decoration-thickness:1px;
}
.soeb-article__body table a:hover{color:var(--sa-blue-dark)}
.soeb-article__body table td:first-child a,
.soeb-article__body table th:first-child a{
    color:var(--sa-yellow);
}
.soeb-article__body table td:first-child a:hover,
.soeb-article__body table th:first-child a:hover{color:#ffd27a}

/* Scroll-hint fade — a subtle white gradient on the right edge tells
 * readers a wide table can scroll. Hidden by default on desktop; the
 * mobile media query below shows it unconditionally. */
.soeb-article__body .wp-block-table::after,
.soeb-article__body figure.wp-block-table::after,
.soeb-article__body .table-wrap::after{
    content:'';
    position:absolute;
    top:0;right:0;bottom:0;
    width:32px;
    background:linear-gradient(to right,transparent,rgba(255,255,255,.95));
    pointer-events:none;
    opacity:0;
    transition:opacity var(--ease,180ms);
    border-radius:0 18px 18px 0;
}
.soeb-article__body .wp-block-table.is-scrollable::after,
.soeb-article__body figure.wp-block-table.is-scrollable::after,
.soeb-article__body .table-wrap.is-scrollable::after{opacity:1}
.soeb-article__body .wp-block-table.scrolled-end::after,
.soeb-article__body figure.wp-block-table.scrolled-end::after,
.soeb-article__body .table-wrap.scrolled-end::after{opacity:0}
/* If the figure wraps an inner .table-wrap, only the outer figure
 * should show the fade. */
.soeb-article__body figure.wp-block-table > .table-wrap::after{content:none}

/* Desktop wide-table break-out (v3.28.5).
 * Same opt-in pattern as .post-content. Article-body tables default to
 * staying within the article reading column (which is naturally narrow
 * for readability); only tables explicitly marked .is-wide-table or
 * .wide-table break out to a centred, viewport-anchored max-width.
 * main.js auto-adds .is-wide-table to tables with 4+ columns. */
@media(min-width:1025px){
    .soeb-article__body .table-wrap.is-wide-table,
    .soeb-article__body .table-wrap.wide-table,
    .soeb-article__body .wp-block-table.is-wide-table,
    .soeb-article__body .wp-block-table.wide-table,
    .soeb-article__body figure.wp-block-table.is-wide-table,
    .soeb-article__body figure.wp-block-table.wide-table,
    .soeb-article__body .table-wrap:has(> table.is-wide-table),
    .soeb-article__body .table-wrap:has(> table.wide-table),
    .soeb-article__body .wp-block-table:has(> table.is-wide-table),
    .soeb-article__body .wp-block-table:has(> table.wide-table),
    .soeb-article__body figure.wp-block-table:has(> table.is-wide-table),
    .soeb-article__body figure.wp-block-table:has(> table.wide-table),
    .soeb-article__body figure.wp-block-table:has(> .table-wrap > table.is-wide-table),
    .soeb-article__body figure.wp-block-table:has(> .table-wrap > table.wide-table){
        /* Left-aligned with the article text; extends rightward into
         * the sidebar's empty space. JS clamps via --soeb-wt-maxw on
         * narrow desktops. */
        width:var(--soeb-wt-maxw, min(1100px, 92vw));
        max-width:var(--soeb-wt-maxw, 92vw);
        margin-left:0;
    }
    .soeb-article__body figure.wp-block-table.is-wide-table .table-wrap,
    .soeb-article__body figure.wp-block-table.wide-table .table-wrap,
    .soeb-article__body figure.wp-block-table:has(> .table-wrap > table.is-wide-table) .table-wrap,
    .soeb-article__body figure.wp-block-table:has(> .table-wrap > table.wide-table) .table-wrap{
        width:100%;
        max-width:100%;
        margin-left:0;
    }
}

/* Mobile: stacked row-card layout (v3.28.5).
 * Replaces the prior min-width:560px forced-scroll pattern. Each
 * <tbody> row becomes a card; each <td> shows the matching column
 * header text as a label above its value (label is injected via
 * data-label by main.js). The dark navy spine and zebra striping are
 * stripped on mobile because they don't translate to vertical stacks
 * — each card already reads as a self-contained block. */
@media(max-width:768px){
    /* Wrapper: strip the outer card chrome — row cards carry their own. */
    .soeb-article__body .wp-block-table,
    .soeb-article__body figure.wp-block-table,
    .soeb-article__body .table-wrap,
    .soeb-article__body .soeb-table{
        margin:24px 0;
        overflow:visible;
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:0;
    }
    .soeb-article__body .wp-block-table::after,
    .soeb-article__body figure.wp-block-table::after,
    .soeb-article__body .table-wrap::after{content:none}

    /* Table: drop table semantics so children can stack as block elements. */
    .soeb-article__body .wp-block-table table,
    .soeb-article__body figure.wp-block-table table,
    .soeb-article__body .table-wrap table,
    .soeb-article__body > table{
        display:block;
        width:100%;
        min-width:0;
        background:transparent;
        font-size:.92rem;
    }
    /* Hide thead — labels are repeated per-cell via data-label. */
    .soeb-article__body .wp-block-table table thead,
    .soeb-article__body figure.wp-block-table table thead,
    .soeb-article__body .table-wrap table thead,
    .soeb-article__body > table thead{display:none}

    .soeb-article__body .wp-block-table table tbody,
    .soeb-article__body .wp-block-table table tfoot,
    .soeb-article__body figure.wp-block-table table tbody,
    .soeb-article__body figure.wp-block-table table tfoot,
    .soeb-article__body .table-wrap table tbody,
    .soeb-article__body .table-wrap table tfoot,
    .soeb-article__body > table tbody,
    .soeb-article__body > table tfoot{display:block}

    /* Each row → card. */
    .soeb-article__body .wp-block-table table tbody tr,
    .soeb-article__body .wp-block-table table tfoot tr,
    .soeb-article__body figure.wp-block-table table tbody tr,
    .soeb-article__body figure.wp-block-table table tfoot tr,
    .soeb-article__body .table-wrap table tbody tr,
    .soeb-article__body .table-wrap table tfoot tr,
    .soeb-article__body > table tbody tr,
    .soeb-article__body > table tfoot tr{
        display:block;
        background:#fff;
        border:1px solid var(--sa-line);
        border-radius:14px;
        box-shadow:var(--sa-shadow-soft);
        padding:6px 0;
        margin:0 0 14px;
        overflow:hidden;
    }
    .soeb-article__body .wp-block-table table tbody tr:last-child,
    .soeb-article__body figure.wp-block-table table tbody tr:last-child,
    .soeb-article__body .table-wrap table tbody tr:last-child,
    .soeb-article__body > table tbody tr:last-child{margin-bottom:0}

    /* Each cell → stacked label/value. */
    .soeb-article__body .wp-block-table table tbody td,
    .soeb-article__body .wp-block-table table tbody th,
    .soeb-article__body .wp-block-table table tfoot td,
    .soeb-article__body figure.wp-block-table table tbody td,
    .soeb-article__body figure.wp-block-table table tbody th,
    .soeb-article__body figure.wp-block-table table tfoot td,
    .soeb-article__body .table-wrap table tbody td,
    .soeb-article__body .table-wrap table tbody th,
    .soeb-article__body .table-wrap table tfoot td,
    .soeb-article__body > table tbody td,
    .soeb-article__body > table tbody th,
    .soeb-article__body > table tfoot td{
        display:block;
        width:100%;
        padding:10px 16px;
        border:0;
        border-bottom:1px solid var(--sa-line-soft);
        background:transparent !important;
        color:var(--sa-text) !important;
        text-align:left;
        font-weight:400;
        text-transform:none;
        letter-spacing:normal;
        font-size:.92rem;
        line-height:1.55;
    }
    .soeb-article__body .wp-block-table table tbody tr > *:last-child,
    .soeb-article__body figure.wp-block-table table tbody tr > *:last-child,
    .soeb-article__body .table-wrap table tbody tr > *:last-child,
    .soeb-article__body > table tbody tr > *:last-child{border-bottom:0}

    /* First cell — was the dark navy spine on desktop; on mobile it
     * becomes a soft tint so it still anchors the card visually
     * without the heavy navy bar. */
    .soeb-article__body .wp-block-table table tbody tr td:first-child,
    .soeb-article__body .wp-block-table table tbody tr th:first-child,
    .soeb-article__body figure.wp-block-table table tbody tr td:first-child,
    .soeb-article__body figure.wp-block-table table tbody tr th:first-child,
    .soeb-article__body .table-wrap table tbody tr td:first-child,
    .soeb-article__body .table-wrap table tbody tr th:first-child,
    .soeb-article__body > table tbody tr td:first-child,
    .soeb-article__body > table tbody tr th:first-child{
        background:var(--sa-soft) !important;
        color:var(--sa-ink) !important;
        font-weight:600;
    }
    .soeb-article__body table tbody td:first-child strong,
    .soeb-article__body table tbody td:first-child b,
    .soeb-article__body table tbody th:first-child strong,
    .soeb-article__body table tbody th:first-child b{color:var(--sa-ink) !important}
    /* Restore link colour in the first cell now that the navy bg is gone. */
    .soeb-article__body table tbody td:first-child a,
    .soeb-article__body table tbody th:first-child a{color:var(--sa-blue)}
    .soeb-article__body table tbody td:first-child a:hover,
    .soeb-article__body table tbody th:first-child a:hover{color:var(--sa-blue-dark)}

    /* The label, injected from data-label. */
    .soeb-article__body table tbody td[data-label]::before,
    .soeb-article__body table tfoot td[data-label]::before{
        content:attr(data-label);
        display:block;
        font-size:.66rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
        color:#64748B;
        margin-bottom:4px;
    }
    .soeb-article__body table tbody td:first-child:not([data-label])::before{content:none}

    /* Ranked-table winner tint — on mobile, paint the card itself, not
     * the individual td backgrounds (which are transparent now). */
    .soeb-article__body .soeb-table--ranked tr.soeb-table-winner,
    .soeb-article__body table.soeb-table--ranked tr.soeb-table-winner{
        background:linear-gradient(180deg,var(--sa-blue-tint) 0%,#fff 100%);
        border-color:rgba(55,125,148,.3);
    }
}

/* Ranked table modifier — adds winner-row tint and richer chrome.
 * Add `soeb-table--ranked` class to the table or its wrapper. The
 * featured row uses the `soeb-table-winner` class.
 * v3.28.2: tint applied to <td> cells (not the <tr>) so it overrides
 * the new td-level zebra-stripe rule. */
.soeb-article__body .soeb-table--ranked tr.soeb-table-winner td,
.soeb-article__body table.soeb-table--ranked tr.soeb-table-winner td{
    background:linear-gradient(180deg,var(--sa-blue-tint) 0%,#fff 100%);
}
.soeb-article__body .soeb-winner-pill{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--sa-yellow);
    border-radius:999px;
    padding:3px 9px;
    font-size:.62rem;
    font-weight:900;
    color:#1f2937;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-left:8px;
    vertical-align:middle;
}
.soeb-article__body .soeb-rating-chip{
    display:inline-block;
    background:var(--sa-soft);
    border:1px solid var(--sa-line);
    color:var(--sa-text);
    border-radius:999px;
    padding:5px 11px;
    font-size:.75rem;
    font-weight:800;
    line-height:1;
}
.soeb-article__body .soeb-rating-chip--gold{
    background:var(--sa-yellow-soft);
    border-color:var(--sa-yellow-line);
    color:var(--sa-yellow-text);
}
.soeb-article__body .soeb-rating-chip--green{
    background:var(--sa-green-soft);
    border-color:var(--sa-green-line);
    color:var(--sa-green);
}

/* ── Optional helper components (added via Custom HTML block) ─
 * Drop these snippets into a post via Gutenberg's "Custom HTML"
 * block. Class names are stable and won't change. */

/* ── Default reusable callouts ──────────────────────────── *
 * Generic class names suitable for any article. Use plain HTML:
 *   <div class="article-note"><strong>Note</strong> Useful info…</div>
 *   <div class="article-tip"><strong>Tip</strong> Something to try…</div>
 *   <div class="article-warning"><strong>Heads up</strong> Caution…</div>
 * These complement the heavier .soeb-callout variants below — pick
 * .article-* when you just need a clean inline note, .soeb-callout
 * when you want the labelled-icon chrome. */
.soeb-article__body .article-note,
.soeb-article__body .article-tip,
.soeb-article__body .article-warning{
    margin:32px 0;
    padding:18px 20px;
    border-radius:16px;
    border:1px solid var(--sa-line);
    background:#fff;
    color:var(--sa-text);
    font-size:.97rem;
    line-height:1.6;
}
.soeb-article__body .article-note > *:last-child,
.soeb-article__body .article-tip > *:last-child,
.soeb-article__body .article-warning > *:last-child{margin-bottom:0}
.soeb-article__body .article-note strong,
.soeb-article__body .article-tip strong,
.soeb-article__body .article-warning strong{
    color:var(--sa-ink);
    margin-right:.35em;
}
.soeb-article__body .article-note{
    background:var(--sa-yellow-soft);
    border-color:var(--sa-yellow-line);
    color:var(--sa-yellow-text);
}
.soeb-article__body .article-note strong{color:#5a3d00}
.soeb-article__body .article-tip{
    background:var(--sa-blue-tint);
    border-color:rgba(55,125,148,.2);
    color:var(--sa-ink);
}
.soeb-article__body .article-warning{
    background:var(--sa-amber-soft);
    border-color:var(--sa-amber-line);
    color:var(--sa-amber-text);
}

/* Callout box — info / tip / warning / takeaway. */
.soeb-article__body .soeb-callout{
    margin:24px 0;
    padding:18px 22px;
    border-radius:18px;
    border:1px solid var(--sa-line);
    background:#fff;
}
.soeb-article__body .soeb-callout > *:last-child{margin-bottom:0}
.soeb-article__body .soeb-callout .soeb-callout__label{
    display:inline-flex;align-items:center;gap:9px;
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 8px;
}
.soeb-article__body .soeb-callout .soeb-callout__label::before{
    content:"i";
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:8px;
    font-size:.78rem;font-weight:900;
    color:#fff;
}
.soeb-article__body .soeb-callout--info{
    background:var(--sa-blue-tint);
    border-color:rgba(55,125,148,.18);
}
.soeb-article__body .soeb-callout--info .soeb-callout__label{color:var(--sa-blue-dark)}
.soeb-article__body .soeb-callout--info .soeb-callout__label::before{background:var(--sa-blue)}
.soeb-article__body .soeb-callout--info p{color:var(--sa-text)}

.soeb-article__body .soeb-callout--tip{
    background:var(--sa-yellow-soft);
    border-color:var(--sa-yellow-line);
}
.soeb-article__body .soeb-callout--tip .soeb-callout__label{color:#8a5a00}
.soeb-article__body .soeb-callout--tip .soeb-callout__label::before{
    content:"\2605";
    background:var(--sa-yellow);
    color:#1f2937;
}
.soeb-article__body .soeb-callout--tip p{color:var(--sa-yellow-text)}

.soeb-article__body .soeb-callout--warning{
    background:var(--sa-amber-soft);
    border-color:var(--sa-amber-line);
}
.soeb-article__body .soeb-callout--warning .soeb-callout__label{color:var(--sa-amber-text)}
.soeb-article__body .soeb-callout--warning .soeb-callout__label::before{
    content:"!";
    background:var(--sa-amber);
}
.soeb-article__body .soeb-callout--warning p{color:#5a2900}

.soeb-article__body .soeb-callout--takeaway{
    background:var(--sa-green-soft);
    border-color:var(--sa-green-line);
}
.soeb-article__body .soeb-callout--takeaway .soeb-callout__label{color:#004d40}
.soeb-article__body .soeb-callout--takeaway .soeb-callout__label::before{
    content:"\2713";
    background:var(--sa-green);
}
.soeb-article__body .soeb-callout--takeaway p{color:#1a4a3f}

/* FAQ accordion — uses native <details>/<summary> so no JS needed
 * and content remains accessible even with scripts disabled. */
.soeb-article__body .soeb-faq{
    display:grid;
    gap:10px;
    margin:24px 0;
}
.soeb-article__body .soeb-faq details{
    background:#fff;
    border:1px solid var(--sa-line);
    border-radius:18px;
    box-shadow:var(--sa-shadow-soft);
    overflow:hidden;
    transition:border-color .2s ease;
}
.soeb-article__body .soeb-faq details[open]{
    border-color:rgba(55,125,148,.25);
}
.soeb-article__body .soeb-faq summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    font-size:1.02rem;
    font-weight:700;
    letter-spacing:-.015em;
    color:var(--sa-ink);
    cursor:pointer;
    list-style:none;
}
.soeb-article__body .soeb-faq summary::-webkit-details-marker{display:none}
.soeb-article__body .soeb-faq summary::after{
    content:"+";
    width:26px;height:26px;
    border-radius:9px;
    background:var(--sa-soft);
    border:1px solid var(--sa-line);
    color:var(--sa-text);
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:900;
    font-size:1rem;
    flex-shrink:0;
    line-height:1;
    transition:background .2s ease, color .2s ease, transform .2s ease;
}
.soeb-article__body .soeb-faq details[open] summary::after{
    content:"\2212";
    background:var(--sa-blue);
    color:#fff;
    border-color:transparent;
}
.soeb-article__body .soeb-faq details > *:not(summary){
    padding:0 22px 18px;
    color:var(--sa-text);
    line-height:1.65;
    font-size:.95rem;
}

/* Stats row — small inline metric grid. */
.soeb-article__body .soeb-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
    gap:10px;
    margin:24px 0;
}
.soeb-article__body .soeb-stats__item{
    background:var(--sa-soft);
    border:1px solid var(--sa-line);
    border-radius:14px;
    padding:14px 16px;
}
.soeb-article__body .soeb-stats__item small{
    display:block;
    color:var(--sa-muted);
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:900;
    margin-bottom:4px;
}
.soeb-article__body .soeb-stats__item strong{
    display:block;
    font-size:1.4rem;
    letter-spacing:-.04em;
    color:var(--sa-ink);
    font-weight:800;
    line-height:1.1;
}
.soeb-article__body .soeb-stats__item .soeb-stats__meta{
    display:block;
    color:var(--sa-blue-dark);
    font-size:.72rem;
    font-weight:800;
    margin-top:4px;
}

/* Inline CTA card — for mid-article conversions. */
.soeb-article__body .soeb-cta-card{
    background:linear-gradient(180deg,var(--sa-blue-tint) 0%,#fff 100%);
    border:1px solid rgba(55,125,148,.25);
    border-radius:var(--sa-radius-card);
    padding:22px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin:28px 0;
}
.soeb-article__body .soeb-cta-card > div{flex:1;min-width:220px}
.soeb-article__body .soeb-cta-card .soeb-cta-card__pill{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;
    border:1px solid rgba(55,125,148,.18);
    color:var(--sa-blue-dark);
    border-radius:999px;
    padding:5px 11px;
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:10px;
}
.soeb-article__body .soeb-cta-card .soeb-cta-card__pill::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--sa-blue);
}
.soeb-article__body .soeb-cta-card h4{
    font-size:1.15rem;
    letter-spacing:-.035em;
    font-weight:800;
    color:var(--sa-ink);
    margin:0 0 4px;
}
.soeb-article__body .soeb-cta-card p{font-size:.92rem;color:var(--sa-text);margin:0}
.soeb-article__body .soeb-cta-card .soeb-cta-card__btn,
.soeb-article__body a.soeb-cta-card__btn{
    background:var(--sa-blue);
    color:#fff !important;
    border-radius:999px;
    padding:12px 22px;
    font-weight:800;
    font-size:.9rem;
    text-decoration:none !important;
    white-space:nowrap;
    box-shadow:0 10px 22px rgba(55,125,148,.22);
    transition:background .15s ease, transform .15s ease;
}
.soeb-article__body .soeb-cta-card .soeb-cta-card__btn:hover,
.soeb-article__body a.soeb-cta-card__btn:hover{
    background:var(--sa-blue-dark);
    transform:translateY(-1px);
}

/* Key-takeaways callout — a richer variant for "what to know" boxes.
 * Drop this near the top of an article for a quick summary panel. */
.soeb-article__body .soeb-key-takeaways{
    background:linear-gradient(180deg,var(--sa-yellow-soft) 0%,#fffbea 100%);
    border:1px solid var(--sa-yellow-line);
    border-radius:var(--sa-radius-card);
    padding:22px 24px;
    margin:28px 0;
}
.soeb-article__body .soeb-key-takeaways__label{
    display:inline-flex;align-items:center;gap:10px;
    font-size:.72rem;
    color:#8a5a00;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 12px;
}
.soeb-article__body .soeb-key-takeaways__label::before{
    content:"\2605";
    width:30px;height:30px;border-radius:10px;
    background:var(--sa-yellow);color:#1f2937;
    display:grid;place-items:center;
    font-size:.95rem;font-weight:900;
}
.soeb-article__body .soeb-key-takeaways ul{margin:0}
.soeb-article__body .soeb-key-takeaways ul > li{color:var(--sa-yellow-text)}
.soeb-article__body .soeb-key-takeaways ul > li::before{background:var(--sa-amber)}
.soeb-article__body .soeb-key-takeaways ul > li strong{color:var(--sa-ink)}

/* ── Article footer (tags, author, related, newsletter) ─── */
.soeb-article__footer{
    background:#fff;
    padding:48px 0 0;
}
.soeb-article__footer-inner{
    max-width:1100px;
    margin:0 auto;
}

.soeb-article__tags{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:22px 0;
    border-top:1px solid var(--sa-line);
    max-width:var(--sa-reading-w);
}
.soeb-article__tags-label{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:900;
    color:var(--sa-muted);
}
.soeb-article__tag{
    display:inline-flex;align-items:center;
    background:var(--sa-blue-tint);
    color:var(--sa-blue-dark);
    border-radius:999px;
    padding:6px 12px;
    font-size:.78rem;
    font-weight:700;
    text-decoration:none;
    transition:background .15s ease;
}
.soeb-article__tag:hover{background:#d4f0f5}
.soeb-article__tag--soft{
    background:var(--sa-soft);
    color:var(--sa-text);
}
.soeb-article__tag--soft:hover{background:#ecf0f5}

/* Author card */
.soeb-article__author-card{
    display:flex;
    gap:18px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--sa-line);
    border-radius:var(--sa-radius-card);
    padding:22px 26px;
    margin:8px 0 36px;
    max-width:var(--sa-reading-w);
    box-shadow:var(--sa-shadow-soft);
}
.soeb-article__author-avatar{
    width:56px;height:56px;border-radius:50%;
    background:var(--sa-blue-tint);
    color:var(--sa-blue-dark);
    display:grid;place-items:center;
    font-weight:900;
    font-size:1.1rem;
    letter-spacing:.02em;
    flex-shrink:0;
}
.soeb-article__author-card small{
    display:block;
    color:var(--sa-muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:.66rem;
    margin-bottom:3px;
}
.soeb-article__author-card strong{
    display:block;
    font-size:1rem;
    color:var(--sa-ink);
    font-weight:700;
    margin-bottom:4px;
}
.soeb-article__author-card p{
    font-size:.88rem;
    color:var(--sa-text);
    line-height:1.55;
    margin:0;
}

/* Related posts grid */
.soeb-article__related{
    background:var(--sa-soft);
    margin-top:32px;
    padding:52px 0;
}
.soeb-article__related-head{
    text-align:center;
    margin-bottom:32px;
}
.soeb-article__related-head .soeb-article__eyebrow{
    margin:0 auto 14px;
}
.soeb-article__related-head h2{
    font-size:clamp(1.5rem,2.4vw,1.95rem);
    letter-spacing:-.04em;
    color:var(--sa-ink);
    margin:0;
}
.soeb-article__related-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.soeb-article__related-card{
    background:#fff;
    border:1px solid var(--sa-line);
    border-radius:20px;
    padding:0;
    box-shadow:var(--sa-shadow-soft);
    text-decoration:none;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease;
}
.soeb-article__related-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--sa-shadow);
}
.soeb-article__related-img{
    aspect-ratio:16/9;
    background:var(--sa-soft);
    overflow:hidden;
}
.soeb-article__related-img img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
}
.soeb-article__related-body{
    padding:16px 18px 18px;
    display:flex;flex-direction:column;gap:8px;
    flex:1;
}
.soeb-article__related-body small{
    display:block;
    color:var(--sa-muted);
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:900;
}
.soeb-article__related-body strong{
    display:block;
    font-size:.96rem;
    letter-spacing:-.02em;
    line-height:1.3;
    color:var(--sa-ink);
    font-weight:700;
    margin-bottom:auto;
}
.soeb-article__related-link{
    color:var(--sa-blue-dark);
    font-weight:900;
    font-size:.78rem;
    margin-top:6px;
}

/* Newsletter CTA at bottom — uses .octo-cta from the landing design
 * system. The .octo-cta selector references --octo-* custom properties
 * that are only defined inside .octo-page / .sat-page wrappers, so
 * without this scope the dark navy gradient (and all child colours)
 * silently fail back to defaults. v3.16.0 re-defines the variables and
 * the .octo-eyebrow + .octo-eyebrow--dark styles inside the article
 * newsletter scope so the panel renders with the same dark navy as the
 * /suppliers-and-tariffs/ hub newsletter. */
.soeb-article__newsletter{
    padding:48px 0 24px;
    background:#fff;

    /* v3.19.5 — kept in sync with the .sat-page tokens above so the
     * newsletter eyebrow inside posts/pages picks up the new muted
     * accent instead of the old #0097b2 Octopus turquoise. */
    --octo-ink:#172033;
    --octo-text:#3f4b5f;
    --octo-line:#E2E8F0;
    --octo-blue:#377D94;
    --octo-blue-dark:#2E6B7F;
    --octo-blue-tint:#EAF6F8;
    --octo-yellow:#f7c948;
}
.soeb-article__newsletter .octo-eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    border:1px solid rgba(55,125,148,.18);
    background:var(--octo-blue-tint);
    color:var(--octo-blue-dark);
    border-radius:999px;
    padding:8px 12px;
    font-size:.72rem;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;
    width:fit-content;
}
.soeb-article__newsletter .octo-eyebrow::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--octo-blue);
}
.soeb-article__newsletter .octo-eyebrow--dark{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.18);
    color:#fff;
}
.soeb-article__newsletter .octo-eyebrow--dark::before{
    background:var(--octo-yellow);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
    .soeb-article__layout{
        grid-template-columns:1fr;
        gap:0;
        margin:48px auto 0;
        padding:0 24px;
    }
    .soeb-article__sidebar{
        position:static;
        order:-1;
        margin-bottom:36px;
        max-width:var(--sa-reading-w);
    }
    /* v3.16.0: stack the 2-column hero on tablets — text first, image
     * below. Reduce vertical gap a touch so the stacked image doesn't
     * push the body content too far down the page.
     * v3.17.0: shrink card padding and radius slightly on narrower
     * screens so the card doesn't dominate the viewport.
     * v3.17.3: also reset the desktop fixed-height image so it
     * returns to natural aspect ratio when stacked.
     * v3.17.5: padding scaled down to match the tighter desktop
     * card. */
    .soeb-article__hero-inner{
        padding:24px 28px;
        border-radius:24px;
    }
    .soeb-article__hero-inner--has-image{
        grid-template-columns:1fr;
        gap:32px;
    }
    .soeb-article__hero-inner--has-image .soeb-article__featured-img{
        height:auto;
    }
    .soeb-article__hero-inner--has-image .soeb-article__featured-img img{
        height:auto;
        object-fit:initial;
    }
    .soeb-article__featured-img{
        border-radius:20px;
        margin:0 auto;
    }
    .soeb-article__related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
    .soeb-article__layout{padding:0 20px}
    .soeb-article__sidebar{margin-bottom:32px}
}
@media (max-width:720px){
    .soeb-article__hero{padding:24px 0 0}
    /* v3.17.0: tighter card padding + smaller radius on phones. */
    .soeb-article__hero-inner{
        padding:28px 22px;
        border-radius:20px;
    }
    .soeb-article__hero-inner--has-image{gap:24px}
    .soeb-article__title{font-size:2rem} /* 36px — leaves headroom for long titles in the narrower mobile column */
    .soeb-article__hero-inner:not(.soeb-article__hero-inner--has-image) .soeb-article__title{font-size:2.222rem} /* 40px */
    .soeb-article__lead{font-size:1.056rem;line-height:1.55} /* ~19px */
    .soeb-article__meta{gap:10px 14px;font-size:.78rem;padding:0}
    .soeb-article__meta-dot{display:none}
    .soeb-article__featured-img{
        border-radius:16px;
        margin:0 auto;
        box-shadow:0 12px 30px rgba(15,23,42,.06);
    }
    .soeb-article__layout{margin:36px auto 0}
    .soeb-article__body,
    .soeb-article__body p,
    .soeb-article__body ul > li,
    .soeb-article__body ol > li{font-size:.944rem;line-height:1.7} /* 17px */
    .soeb-article__body h2{
        font-size:1.556rem; /* ~28px */
        margin-top:48px;
        padding-left:18px;
    }
    .soeb-article__body h2::before{width:4px}
    .soeb-article__body h3{font-size:1.222rem;margin-top:32px} /* ~22px */
    .soeb-article__body blockquote{padding:18px 20px}
    .soeb-article__body blockquote p{font-size:1.025rem}
    .soeb-article__body figure,
    .soeb-article__body img{margin:28px 0}
    .soeb-article__body .article-note,
    .soeb-article__body .article-tip,
    .soeb-article__body .article-warning{padding:16px 18px;margin:24px 0}
    .soeb-article__body .soeb-faq summary{font-size:.95rem;padding:16px 18px}
    .soeb-article__body .soeb-cta-card{flex-direction:column;align-items:flex-start;padding:18px 20px}
    .soeb-article__body .soeb-cta-card .soeb-cta-card__btn{width:100%;text-align:center;justify-content:center}
    .soeb-article__related-grid{grid-template-columns:1fr}
    .soeb-article__author-card{flex-direction:column;gap:12px;padding:18px 20px}
    .soeb-article__author-avatar{width:48px;height:48px;font-size:.95rem}
}

/* ── Floating dark navy footer (v3.19.0) ─────────────────────────────────
   Companion to the floating header. Wider than the header so it feels
   grounded at the bottom of the page. Scoped under .site-footer--floating
   to win the cascade over the legacy footer rules above. */
.site-footer--floating{
    background:transparent;
    color:rgba(255,255,255,.88);
    font-size:1rem;
    margin:80px auto 32px;
    padding:0 32px;
}
.site-footer--floating .footer-shell{
    max-width:1480px;
    margin:0 auto;
    padding:56px 64px 40px;
    border-radius:32px;
    background:
        radial-gradient(circle at 20% 0%,rgba(255,255,255,.08),transparent 28%),
        linear-gradient(135deg,#071426 0%,#0b1b31 52%,#061325 100%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 22px 55px rgba(7,20,38,.26);
}

/* Top row: brand stack on left (logo + tagline) · subscribe CTA on right */
.site-footer--floating .footer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
}
.site-footer--floating .footer-brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    min-width:0;
}
.site-footer--floating .site-logo--footer .site-logo__img{
    height:44px;width:auto;max-width:260px;
    /* Invert the orange/black SOEB_Logo.png to white so it matches the header treatment.
       Keeps the yellow vertical bar consistent between header and footer (rendered white in both). */
    filter:brightness(0) invert(1);
}
.site-footer--floating .footer-tagline{
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:.95rem;
    line-height:1.5;
    max-width:420px;
}

/* Subscribe button — matches the header CTA (warm sun yellow) */
.site-footer--floating .footer-subscribe-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:14px;
    background:var(--c-sun);
    color:var(--c-charcoal);
    font-weight:600;
    font-size:.95rem;
    text-decoration:none;
    line-height:1;
    white-space:nowrap;
    transition:background var(--ease),transform var(--ease);
}
.site-footer--floating .footer-subscribe-button:hover,
.site-footer--floating .footer-subscribe-button:focus{
    background:#FFB434;
    color:var(--c-charcoal);
    transform:translateY(-1px);
    text-decoration:none;
}
.site-footer--floating .footer-subscribe-button:focus-visible{
    outline:2px solid #fff;outline-offset:3px;
}
.site-footer--floating .footer-subscribe-button__icon{flex-shrink:0}

/* Subtle dividers */
.site-footer--floating .footer-divider{
    height:1px;
    background:rgba(255,255,255,.12);
    margin:40px 0;
    border:0;
}

/* Three compact link columns */
.site-footer--floating .footer-links{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:64px;
}
.site-footer--floating .footer-column-title{
    /* v3.19.5 — was #7DD3FC (bright sky-blue). The new sitewide accent
     * is muted teal #377D94, but at section-label size on dark navy
     * it needs to lift to keep legibility. #A8CFDA is the same hue
     * family at ~74% lightness — reads cleanly against navy while
     * staying on-palette. */
    color:#A8CFDA;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
    margin:0 0 22px;
}
.site-footer--floating .footer-links ul{
    list-style:none;
    padding:0;
    margin:0;
}
.site-footer--floating .footer-links li{
    list-style:none;
    margin:0 0 10px;
    padding:0;
}
.site-footer--floating .footer-links li::before,
.site-footer--floating .footer-links li::marker{
    content:none;
    display:none;
}
.site-footer--floating .footer-links a{
    display:inline-block;
    color:rgba(255,255,255,.88);
    text-decoration:none;
    font-size:1rem;
    line-height:1.5;
    transition:color var(--ease);
}
.site-footer--floating .footer-links a:hover,
.site-footer--floating .footer-links a:focus{
    color:#fff;
    text-decoration:none;
}
.site-footer--floating .footer-links a:focus-visible{
    outline:2px solid #fff;outline-offset:3px;border-radius:3px;
}

/* Bottom row */
.site-footer--floating .footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:24px;
    color:rgba(255,255,255,.72);
    font-size:.88rem;
}

/* Tablet: stack the top row (logo/tagline above the button) */
@media(max-width:1024px){
    .site-footer--floating .footer-top{
        flex-direction:column;
        align-items:flex-start;
        gap:28px;
    }
    .site-footer--floating .footer-tagline{max-width:none}
    .site-footer--floating .footer-links{
        grid-template-columns:1fr 1fr;
        gap:40px 48px;
    }
}

/* Mobile: smaller padding, smaller radius, single column */
@media(max-width:768px){
    .site-footer--floating{
        margin:48px 16px 24px;
        padding:0;
    }
    .site-footer--floating .footer-shell{
        padding:32px 24px;
        border-radius:24px;
    }
    .site-footer--floating .footer-top,
    .site-footer--floating .footer-links,
    .site-footer--floating .footer-bottom{
        display:grid;
        grid-template-columns:1fr;
        gap:24px;
    }
    /* v3.19.3 — Subscribe button was overflowing the narrow mobile
       column at 14px/22px padding + .95rem text. Tighten it so it
       sits comfortably under the tagline without dominating. */
    .site-footer--floating .footer-subscribe-button{
        padding:11px 16px;
        font-size:.88rem;
        gap:8px;
        border-radius:12px;
        align-self:flex-start;
        justify-self:start;
    }
    .site-footer--floating .footer-subscribe-button__icon{
        width:16px;
        height:16px;
    }
    .site-footer--floating .footer-divider{margin:28px 0}
    .site-footer--floating .footer-bottom{
        gap:8px;
        font-size:.85rem;
    }
}

/* ─────────────────────────────────────────────────────────────
 * v3.25.0 — Solar hub (editorial). Originally scoped under
 * .sat-page--solar; v3.26.0 widened the shared visual patterns
 * (.octo-card--dark, .octo-cards--four spacing, .octo-cta
 * newsletter button override) to all .sat-page hubs so the bills,
 * suppliers & tariffs and Octopus Energy hubs share the same
 * "first card dark" treatment and matching subscribe button as
 * solar. v3.27.0 widened the journey-stage rhythm (.octo-journey-*,
 * .octo-route--persona, .octo-route--grid) to also include
 * .sat-page--heat-pumps because the new editorial Heat Pumps hub
 * uses the same 4-stage customer-journey structure as Solar
 * (decide → plan → cost → run). v3.27.3 widened them again to
 * include .sat-page--electric-vehicles for the new editorial EV
 * hub, which uses the same 4-stage journey (basics → tariff →
 * Octopus comparison → solar/home setup). The selectors below
 * now match all three hubs; other .sat-page hubs (bills, suppliers
 * & tariffs, Octopus Energy) are unaffected.
 *
 *   1. .octo-journey-section + .octo-journey-head — left-aligned
 *      section head with a numbered "stage badge" sitting above the
 *      H2. Solar-only. Gives the page a strong visual rhythm as the
 *      reader walks down the four customer-journey stages (basics →
 *      setup → quotes → export). The badge picks up the brand-blue
 *      cyan by default, and the --accent modifier swaps it to the
 *      yellow used elsewhere on the site so the final stage breaks
 *      the run of cyan and reads as "the reward bit".
 *
 *   2. .octo-card--dark — Ohme-inspired dark gradient card variant
 *      for the headline guide in each major hub section. Same
 *      .octo-card footprint and hover behaviour, but inverted
 *      colours and a small ribbon-style label at the top. The
 *      .octo-card--dark-warm modifier uses an ink → deep-blue
 *      gradient with a yellow ribbon (currently unused on the live
 *      hubs after the v3.25.2 cleanup; kept for future use).
 *
 *   3. .octo-route--persona — a tighter, link-style variant of the
 *      .octo-route used inside the "Choose your next step" decision
 *      block on the solar hub. Solar-only.
 *
 * Subscribe button consistency: the .octo-cta override below makes
 * the in-page newsletter CTA use the same warm-sun colour and 14px
 * rounded-rectangle shape as the header and footer subscribe buttons,
 * applied across every .sat-page hub.
 * ───────────────────────────────────────────────────────────── */

/* ── 1. Journey section head with numbered stage badge ───────── */
.sat-page--solar .octo-journey-head,
.sat-page--heat-pumps .octo-journey-head,
.sat-page--electric-vehicles .octo-journey-head{
    text-align:left;
    align-items:flex-start;
    margin-left:0;
    margin-right:auto;
    max-width:760px;
    position:relative;
}
.sat-page--solar .octo-journey-head h2,
.sat-page--heat-pumps .octo-journey-head h2,
.sat-page--electric-vehicles .octo-journey-head h2{
    font-size:clamp(1.7rem,3vw,2.2rem);
    letter-spacing:-.04em;
    line-height:1.15;
    margin-top:6px;
}
.sat-page--solar .octo-journey-head p,
.sat-page--heat-pumps .octo-journey-head p,
.sat-page--electric-vehicles .octo-journey-head p{
    font-size:1rem;
    color:var(--octo-text);
    max-width:680px;
    line-height:1.65;
    margin-top:14px;
}

/* The badge — a small pill sitting above the H2. Cyan tint by default. */
.sat-page--solar .octo-journey-badge,
.sat-page--heat-pumps .octo-journey-badge,
.sat-page--electric-vehicles .octo-journey-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid var(--octo-blue-line);
    border-radius:999px;
    padding:6px 14px 6px 6px;
    margin-bottom:18px;
    box-shadow:0 4px 14px rgba(23,32,51,.04);
}
.sat-page--solar .octo-journey-badge__num,
.sat-page--heat-pumps .octo-journey-badge__num,
.sat-page--electric-vehicles .octo-journey-badge__num{
    width:32px;height:32px;
    border-radius:999px;
    background:var(--octo-blue);
    color:#fff;
    font-weight:900;
    font-size:.95rem;
    display:grid;
    place-items:center;
    line-height:1;
    letter-spacing:0;
}
.sat-page--solar .octo-journey-badge__label,
.sat-page--heat-pumps .octo-journey-badge__label,
.sat-page--electric-vehicles .octo-journey-badge__label{
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--octo-blue-dark);
}
/* Yellow accent variant — used on the "Get paid" stage so the run of
 * cyan stages doesn't get monotonous. */
.sat-page--solar .octo-journey-badge--accent,
.sat-page--heat-pumps .octo-journey-badge--accent,
.sat-page--electric-vehicles .octo-journey-badge--accent{
    border-color:var(--octo-yellow-line);
    background:var(--octo-yellow-soft);
}
.sat-page--solar .octo-journey-badge--accent .octo-journey-badge__num,
.sat-page--heat-pumps .octo-journey-badge--accent .octo-journey-badge__num,
.sat-page--electric-vehicles .octo-journey-badge--accent .octo-journey-badge__num{
    background:var(--octo-yellow);
    color:#1f2937;
}
.sat-page--solar .octo-journey-badge--accent .octo-journey-badge__label,
.sat-page--heat-pumps .octo-journey-badge--accent .octo-journey-badge__label,
.sat-page--electric-vehicles .octo-journey-badge--accent .octo-journey-badge__label{
    color:var(--octo-yellow-text);
}

/* Subtle accent strip on the left edge of each journey section, giving
 * the reader a continuous visual cue that they're walking through a
 * single connected journey rather than browsing unrelated topics. */
.sat-page--solar .octo-journey-section,
.sat-page--heat-pumps .octo-journey-section,
.sat-page--electric-vehicles .octo-journey-section{
    position:relative;
}
.sat-page--solar .octo-journey-section::before,
.sat-page--heat-pumps .octo-journey-section::before,
.sat-page--electric-vehicles .octo-journey-section::before{
    content:"";
    position:absolute;
    left:0;top:48px;bottom:48px;
    width:3px;
    background:linear-gradient(180deg,
        rgba(55,125,148,.0) 0%,
        rgba(55,125,148,.22) 18%,
        rgba(55,125,148,.22) 82%,
        rgba(55,125,148,.0) 100%);
    border-radius:999px;
}
.sat-page--solar .octo-journey-section--accent::before,
.sat-page--heat-pumps .octo-journey-section--accent::before,
.sat-page--electric-vehicles .octo-journey-section--accent::before{
    background:linear-gradient(180deg,
        rgba(247,201,72,.0) 0%,
        rgba(247,201,72,.6) 18%,
        rgba(247,201,72,.6) 82%,
        rgba(247,201,72,.0) 100%);
}

/* 4-column card grid for stage 1 (already defined globally for .sat-page,
 * but we override the gap slightly so the four cards breathe a bit more
 * than the standard 3-up). */
.sat-page .octo-cards--four{gap:18px}

/* ── 2. Ohme-inspired dark featured card ─────────────────────── */
.sat-page .octo-card--dark{
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(55,125,148,.45) 0%, rgba(55,125,148,0) 55%),
        linear-gradient(140deg, #0c1a2b 0%, #15273d 50%, #0c1a2b 100%);
    border:1px solid rgba(55,125,148,.4);
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:28px;
    min-height:240px;
}
.sat-page .octo-card--dark::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(60% 40% at 90% 100%, rgba(55,125,148,.32) 0%, transparent 60%);
    pointer-events:none;
}
.sat-page .octo-card--dark > *{position:relative;z-index:1}
.sat-page .octo-card--dark h4{
    color:#fff;
    font-size:1.45rem;
    line-height:1.18;
    letter-spacing:-.045em;
    margin-bottom:12px;
    font-weight:800;
    max-width:90%;
}
.sat-page .octo-card--dark p{
    color:rgba(255,255,255,.78);
    font-size:.92rem;
    line-height:1.6;
    margin-bottom:22px;
}
.sat-page .octo-card--dark:hover{
    transform:translateY(-3px);
    border-color:rgba(55,125,148,.7);
    box-shadow:0 22px 50px rgba(7,20,38,.32);
    color:#fff;
    text-decoration:none;
}
.sat-page .octo-card--dark .octo-card__ribbon{
    display:inline-flex;
    align-self:flex-start;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:6px 12px;
    color:#fff;
    font-size:.65rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:16px;
}
.sat-page .octo-card--dark .octo-card__cta{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.14);
    color:var(--octo-yellow);
    font-size:.82rem;
    font-weight:900;
    letter-spacing:.01em;
    transition:gap .18s ease;
}
.sat-page .octo-card--dark:hover .octo-card__cta{
    gap:10px;
}

/* Warm variant — used on stage 4 so the headline card matches the yellow
 * stage badge. Ink + deep-blue gradient with a yellow ribbon. */
.sat-page .octo-card--dark.octo-card--dark-warm{
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(247,201,72,.18) 0%, rgba(247,201,72,0) 55%),
        linear-gradient(140deg, #0c1a2b 0%, #18283f 50%, #0c1a2b 100%);
    border-color:rgba(247,201,72,.28);
}
.sat-page .octo-card--dark.octo-card--dark-warm::after{
    background:radial-gradient(60% 40% at 90% 100%, rgba(247,201,72,.22) 0%, transparent 60%);
}
.sat-page .octo-card--dark.octo-card--dark-warm .octo-card__ribbon{
    background:rgba(247,201,72,.18);
    border-color:rgba(247,201,72,.4);
    color:var(--octo-yellow);
}
.sat-page .octo-card--dark.octo-card--dark-warm .octo-card__cta{
    color:var(--octo-yellow);
}
.sat-page .octo-card--dark.octo-card--dark-warm:hover{
    border-color:rgba(247,201,72,.55);
}

/* ── 3. Persona-prompt route list inside the decision block ──── */
.sat-page--solar .octo-route--persona,
.sat-page--heat-pumps .octo-route--persona,
.sat-page--electric-vehicles .octo-route--persona{
    gap:10px;
}
.sat-page--solar .octo-route--persona .octo-route__item,
.sat-page--heat-pumps .octo-route--persona .octo-route__item,
.sat-page--electric-vehicles .octo-route--persona .octo-route__item{
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:16px;
    padding:14px 18px;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
    box-shadow:0 4px 12px rgba(23,32,51,.04);
    cursor:pointer;
}
.sat-page--solar .octo-route--persona .octo-route__item:hover,
.sat-page--heat-pumps .octo-route--persona .octo-route__item:hover,
.sat-page--electric-vehicles .octo-route--persona .octo-route__item:hover{
    transform:translateX(3px);
    border-color:rgba(55,125,148,.35);
    box-shadow:0 8px 22px rgba(23,32,51,.06);
    text-decoration:none;
    color:inherit;
}
.sat-page--solar .octo-route--persona .octo-route__num,
.sat-page--heat-pumps .octo-route--persona .octo-route__num,
.sat-page--electric-vehicles .octo-route--persona .octo-route__num{
    width:38px;
    height:38px;
    border-radius:12px;
    background:
        linear-gradient(160deg, #2E6B7F 0%, #1f5267 55%, #172033 100%);
    color:#fff;
    font-size:.95rem;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 4px 10px rgba(23,32,51,.18),
        0 1px 2px rgba(23,32,51,.12);
    border:1px solid rgba(23,32,51,.35);
}
.sat-page--solar .octo-route--persona .octo-route__item strong,
.sat-page--heat-pumps .octo-route--persona .octo-route__item strong,
.sat-page--electric-vehicles .octo-route--persona .octo-route__item strong{
    color:var(--octo-ink);
    font-size:1rem;
    font-weight:800;
    letter-spacing:-.02em;
}
.sat-page--solar .octo-route--persona .octo-route__item span,
.sat-page--heat-pumps .octo-route--persona .octo-route__item span,
.sat-page--electric-vehicles .octo-route--persona .octo-route__item span{
    color:var(--octo-muted);
    font-size:.85rem;
    margin-top:2px;
}

/* 3×2 grid variant — used on the "One question, one guide" section so
 * the six route prompts sit beneath the intro paragraph rather than
 * to the right of it. Hover lifts the card vertically (instead of the
 * translateX nudge used when routes are stacked in a single column). */
.sat-page--solar .octo-route--grid,
.sat-page--heat-pumps .octo-route--grid,
.sat-page--electric-vehicles .octo-route--grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    max-width:1100px;
    margin:0 auto;
}
.sat-page--solar .octo-route--grid.octo-route--persona .octo-route__item,
.sat-page--heat-pumps .octo-route--grid.octo-route--persona .octo-route__item,
.sat-page--electric-vehicles .octo-route--grid.octo-route--persona .octo-route__item{
    padding:18px 20px;
}
.sat-page--solar .octo-route--grid.octo-route--persona .octo-route__item:hover,
.sat-page--heat-pumps .octo-route--grid.octo-route--persona .octo-route__item:hover,
.sat-page--electric-vehicles .octo-route--grid.octo-route--persona .octo-route__item:hover{
    transform:translateY(-3px);
}

/* ── 4. Newsletter CTA — match the header/footer subscribe button ─
 * The default .octo-btn--cta is lemon-yellow (#f7c948) and pill-shaped,
 * which clashes with the warm-sun (#F5A524), 14px-radius rounded
 * rectangle used by the .header-subscribe-button / .footer-subscribe-
 * button. On the solar hub we override the CTA button + eyebrow dot
 * inside the .octo-cta panel so all three "subscribe" entry points
 * across the page share one visual identity. Scoped to .sat-page--solar
 * so other hubs are untouched. */
.sat-page .octo-cta .octo-btn--cta{
    background:var(--c-sun);
    color:var(--c-charcoal);
    border-radius:14px;
    font-weight:600;
    padding:14px 22px;
}
.sat-page .octo-cta .octo-btn--cta:hover{
    background:#FFB434;
    color:var(--c-charcoal);
}
.sat-page .octo-cta .octo-eyebrow--dark::before{
    background:var(--c-sun);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width:960px){
    .sat-page .octo-cards--four{grid-template-columns:repeat(2,1fr)}
    .sat-page--solar .octo-route--grid,
    .sat-page--heat-pumps .octo-route--grid,
    .sat-page--electric-vehicles .octo-route--grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
    .sat-page .octo-cards--four{grid-template-columns:1fr}
    .sat-page--solar .octo-journey-section::before,
    .sat-page--heat-pumps .octo-journey-section::before,
    .sat-page--electric-vehicles .octo-journey-section::before{display:none}
    .sat-page--solar .octo-journey-head h2,
    .sat-page--heat-pumps .octo-journey-head h2,
    .sat-page--electric-vehicles .octo-journey-head h2{font-size:1.6rem}
    .sat-page .octo-card--dark{padding:22px;min-height:0}
    .sat-page .octo-card--dark h4{font-size:1.25rem;max-width:none}
    .sat-page--solar .octo-route--grid,
    .sat-page--heat-pumps .octo-route--grid,
    .sat-page--electric-vehicles .octo-route--grid{grid-template-columns:1fr}
}

/* ────────────────────────────────────────────────────────────────────
 * v3.28.0 — Tools hub + Newsletter landing aligned to editorial design
 * system.
 *
 * Both /tools/ and /newsletter/ now wrap their content in .sat-page and
 * use the shared .octo-hero--centred treatment, the .octo-section /
 * .octo-section-head rhythm, and (on /tools/) the .octo-card /
 * .octo-card--dark editorial card pattern.
 *
 * The previous bespoke .page-hero (tools) and .newsletter-lp__* hero
 * (newsletter) styles are no longer referenced by those templates, but
 * are intentionally left in the cascade above so any other pages that
 * still use them won't break.
 *
 * This block defines:
 *   1. .octo-newsletter-form — editorial card that wraps the Beehiiv
 *      iframe inside the newsletter hero. Soft white surface, brand
 *      border, gentle shadow. Sits between the hero lede and the meta
 *      row, centred at the same max-width as the lede.
 *   2. .sat-page--tools / .sat-page--newsletter — light identity hooks
 *      in case future tweaks need to scope to just these hubs.
 *   3. Small responsive tweaks: on the tools hub, single-tool category
 *      sections shouldn't render the .octo-cards grid as 3-up — the
 *      base .octo-cards already handles that (auto-fill not used; the
 *      grid is fixed at 3 cols), so we add an override that lets a
 *      lone .octo-card--dark stretch comfortably.
 * ─────────────────────────────────────────────────────────────────── */

/* ── Newsletter form inside hero ──────────────────────────────────── */
.sat-page--newsletter .octo-newsletter-form{
    width:100%;
    max-width:560px;
    margin:0 auto 30px;
    background:#fff;
    border:1px solid var(--octo-line);
    border-radius:18px;
    box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 24px -12px rgba(29,43,62,.12);
    padding:22px 22px 18px;
    text-align:center;
}
.sat-page--newsletter .octo-newsletter-form__embed{
    margin:0 auto;
}
.sat-page--newsletter .octo-newsletter-form__embed iframe{
    max-width:100%;
    width:100%!important;
    border:0;
    display:block;
    margin:0 auto;
}
/* Any inline Beehiiv-generated container (in case the iframe is wrapped
 * in a Custom HTML block with a wrapping div) inherits the same layout. */
.sat-page--newsletter .octo-newsletter-form__embed > div,
.sat-page--newsletter .octo-newsletter-form__embed > p:empty{
    margin:0 auto;
}
.sat-page--newsletter .octo-newsletter-form__meta{
    margin:14px 0 0;
    font-size:.82rem;
    color:var(--octo-muted);
    line-height:1.5;
}

/* Slightly tighter hero on the newsletter so the form sits closer to
 * the lede without a wide gap. */
.sat-page--newsletter .octo-hero--centred .octo-hero__lead{
    margin-bottom:22px;
}

@media (max-width:720px){
    .sat-page--newsletter .octo-newsletter-form{
        padding:18px 16px 14px;
        border-radius:14px;
    }
}

/* ── Tools hub — empty-category / lone-card sizing ────────────────── */
/* If a category contains only one tool, the lone dark card sits in the
 * first grid cell of a 3-column .octo-cards grid and stretches to that
 * cell's width. That looks fine, but on wider screens the card can feel
 * a bit narrow — let lone cards span 2 of 3 cols so they read as a
 * proper featured panel rather than a small card with empty space. */
.sat-page--tools .octo-cards > .octo-card--dark:only-child{
    grid-column: span 2;
}
@media (max-width:980px){
    .sat-page--tools .octo-cards > .octo-card--dark:only-child{
        grid-column: 1 / -1;
    }
}

/* Section heads on the tools hub are left-aligned, matching the
 * editorial Energy Bills hub's section rhythm (centred hero → left
 * section heads). The .octo-section-head--left modifier already does
 * this; this rule just enforces a consistent max-width so very long
 * paragraphs don't stretch to the full container width. */
.sat-page--tools .octo-section-head--left p{
    max-width:680px;
}

/* Small breathing room between the tools sections so each category
 * reads as a distinct block. */
.sat-page--tools .octo-section + .octo-section{
    padding-top:0;
}

/* ═════════════════════════════════════════════════════════════
 * v3.29.0 — Heat Pumps + Electric Vehicles hubs: dark, image-led,
 * LEFT-ALIGNED hero (Ohme-style).
 *
 * Brings the two hubs in line with the Solar hero's dark treatment
 * (v3.28.10) but with two deliberate differences from Solar:
 *   1. The hero text is LEFT-aligned (not centred).
 *   2. The navy overlay is darkest on the LEFT and fades right, so the
 *      photo stays visible on the right behind/around the text — a
 *      classic split image hero.
 *
 * SCOPE — this block only ever matches /heat-pumps/ and
 * /electric-vehicles/:
 *   • The shell mechanics live on .octo-hero-shell, a NEW class added
 *     ONLY to these two heroes' markup (hub-editorial-heat-pumps.php and
 *     hub-editorial-electric-vehicles.php). It is used nowhere else.
 *   • Every text / colour / alignment override is scoped under
 *     .sat-page--heat-pumps / .sat-page--electric-vehicles, so the SHARED
 *     .octo-hero--centred component (still used, centred + light, by the
 *     Energy Bills, Newsletter and — with its own dark variant — Solar
 *     hubs) is untouched. The Solar block above is also untouched.
 *
 * HOW THE IMAGE GETS BEHIND THE NAV (same proven approach as Solar):
 *   • .site-header is a TOP-LEVEL position:sticky element so it must stay
 *     pinned across the whole page; we do NOT move it into the hero. We
 *     leave the nav exactly as-is (markup, rounded navy pill, shadow,
 *     z-index:1000) and instead extend the image UP behind it.
 *   • The hero is wrapped in <section class="octo-hero-shell …"> whose
 *     absolutely-positioned .octo-hero-shell__media layer carries the
 *     image + navy gradient and is pulled up (top:-120px desktop /
 *     -92px mobile) to fill the strip behind + around the nav. Being
 *     absolute it introduces ZERO layout shift.
 *   • Layering is pure z-index in the root stacking context:
 *         media (z-index:0) < hero content (z-index:1) < nav (z-index:1000)
 *   • .sat-page sets overflow:hidden (to contain card shadows); that would
 *     clip the media's upward bleed, so — as for Solar — we switch these
 *     two pages to overflow-x:clip / overflow-y:visible (clip does not
 *     coerce the other axis to auto, so the vertical bleed is allowed and
 *     no scroll container is created).
 * ───────────────────────────────────────────────────────────── */

/* Let the media layer bleed up behind the nav while still containing
 * horizontal shadow overflow. */
.sat-page--heat-pumps,
.sat-page--electric-vehicles{
    overflow-x:clip;
    overflow-y:visible;
}

/* Positioning context for the image layer. No z-index here, so it does NOT
 * create a stacking context — the nav's z-index:1000 keeps winning. */
.octo-hero-shell{
    position:relative;
}

/* Shared media-layer mechanics. The image + gradient are set per-page
 * below; this just owns the position, the upward pull and the layering. */
.octo-hero-shell__media{
    position:absolute;
    left:0;
    right:0;
    top:-120px;            /* extend up behind the floating nav */
    bottom:0;
    z-index:0;
    pointer-events:none;
    background-color:#07172a;          /* fallback while the image loads */
    background-repeat:no-repeat;
}

/* Per-page image + layered navy overlay. Layer order (top → bottom):
 *   Layer 1: vertical vignette — darkens the very top (behind the nav) and
 *            the bottom (behind the meta/breadcrumb) so text never sits on
 *            a bright part of the photo.
 *   Layer 2: the horizontal navy gradient — darkest LEFT, fading right, so
 *            the left-aligned text stays readable and the photo shows on
 *            the right (Ohme-style split hero).
 *   Layer 3: the photo (referenced relative to style.css at the theme root). */
.octo-hero-shell--heat-pumps .octo-hero-shell__media{
    background-image:
        linear-gradient(180deg, rgba(7,23,42,.46) 0%, rgba(7,23,42,.12) 30%, rgba(7,23,42,.12) 62%, rgba(7,23,42,.52) 100%),
        linear-gradient(90deg, rgba(7,23,42,.95) 0%, rgba(7,23,42,.90) 28%, rgba(7,23,42,.62) 58%, rgba(7,23,42,.30) 100%),
        linear-gradient(to left, rgba(7,23,42,0) 0, rgba(7,23,42,0) 600px, rgba(7,23,42,.97) 1010px, #07172a 1140px),
        url('assets/images/heat-pumps-hero-bg.jpg');
    background-size:cover, cover, cover, auto 100%;
    background-position:center, center, right center, right center;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
}
.octo-hero-shell--electric-vehicles .octo-hero-shell__media{
    background-image:
        linear-gradient(180deg, rgba(7,23,42,.46) 0%, rgba(7,23,42,.12) 30%, rgba(7,23,42,.12) 62%, rgba(7,23,42,.52) 100%),
        linear-gradient(90deg, rgba(7,23,42,.95) 0%, rgba(7,23,42,.90) 28%, rgba(7,23,42,.62) 58%, rgba(7,23,42,.30) 100%),
        linear-gradient(to left, rgba(7,23,42,0) 0, rgba(7,23,42,0) 600px, rgba(7,23,42,.97) 1010px, #07172a 1140px),
        url('assets/images/electric-vehicles-hero-bg.jpg');
    background-size:cover, cover, cover, auto 100%;
    background-position:center, center, right center, right center;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Hero content sits ABOVE the image layer. Generous top padding = the gap
 * between the floating nav (~108px, in normal flow above the hero) and the
 * heading, so the layout stays spacious without pushing the H1 too high. */
.sat-page--heat-pumps .octo-hero--centred,
.sat-page--electric-vehicles .octo-hero--centred{
    position:relative;
    z-index:1;
    background:transparent;
    padding:66px 0 60px;
}

/* The light hero draws a 1px hairline divider along its bottom edge; on the
 * dark image that reads as a seam, so hide it here. */
.sat-page--heat-pumps .octo-hero--centred::after,
.sat-page--electric-vehicles .octo-hero--centred::after{display:none}

/* ── LEFT-ALIGN the inner column (overrides the shared centred spec) ── */
.sat-page--heat-pumps .octo-hero--centred .octo-hero__centred,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__centred{
    max-width:620px;
    margin:0;
    text-align:left;
    align-items:flex-start;
}
.sat-page--heat-pumps .octo-hero--centred .octo-hero__title,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__title{
    margin-left:0;
    margin-right:0;
    max-width:none;
    text-wrap:balance;
}
.sat-page--heat-pumps .octo-hero--centred .octo-hero__lead,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__lead{
    margin-left:0;
    margin-right:0;
    max-width:540px;
}
.sat-page--heat-pumps .octo-hero--centred .octo-hero__actions,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__actions{
    justify-content:flex-start;
}
.sat-page--heat-pumps .octo-hero--centred .octo-hero__meta,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__meta{
    justify-content:flex-start;
}
/* EV meta has a long third item ("Home charging & UK EV tariffs"); keep all
 * three on a single line by letting the row size to its content (overflowing
 * the 620px text column rightward onto the navy area, where it stays
 * readable) and tightening the inter-item padding a touch. */
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__meta{
    flex-wrap:nowrap;
    width:max-content;
    max-width:none;
}
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__meta-item{
    padding:0 16px;
    white-space:nowrap;
}
.sat-page--heat-pumps .octo-hero--centred .octo-breadcrumbs,
.sat-page--electric-vehicles .octo-hero--centred .octo-breadcrumbs{
    justify-content:flex-start;
    text-align:left;
}

/* ── Light-on-dark text treatment (mirrors the Solar hero) ── */

/* Category label — outlined "pill" with a teal dot, restyled for the dark
 * hero (the base .octo-eyebrow is a light-background pill). Matches the
 * mockup: faint teal tint, translucent teal border, light-teal text + dot.
 * SCOPED to the hero so the .octo-eyebrow pills used by section heads
 * further down each page are left exactly as-is. */
.sat-page--heat-pumps .octo-hero--centred .octo-eyebrow,
.sat-page--electric-vehicles .octo-hero--centred .octo-eyebrow{
    background:rgba(127,224,239,.08);
    border:1px solid rgba(127,224,239,.34);
    border-radius:999px;
    padding:7px 16px;
    color:#7fe0ef;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.sat-page--heat-pumps .octo-hero--centred .octo-eyebrow::before,
.sat-page--electric-vehicles .octo-hero--centred .octo-eyebrow::before{
    background:#7fe0ef;
}

/* H1 — white, with the accent phrase lifted to a lighter cyan for contrast. */
.sat-page--heat-pumps .octo-hero--centred .octo-hero__title,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__title{color:#fff}
.sat-page--heat-pumps .octo-hero--centred .octo-hero__title .octo-brand-blue,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__title .octo-brand-blue{color:#5fcbe0}

/* Lede — soft off-white. */
.sat-page--heat-pumps .octo-hero--centred .octo-hero__lead,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__lead{color:rgba(255,255,255,.86)}

/* Meta row — light text, light-teal icons, translucent dividers. */
.sat-page--heat-pumps .octo-hero--centred .octo-hero__meta-item,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__meta-item{
    color:rgba(255,255,255,.82);
    border-right-color:rgba(255,255,255,.24);
}
.sat-page--heat-pumps .octo-hero--centred .octo-hero__meta-icon,
.sat-page--electric-vehicles .octo-hero--centred .octo-hero__meta-icon{color:#7fe0ef}

/* Breadcrumbs — light and readable on the dark image. */
.sat-page--heat-pumps .octo-hero--centred .octo-breadcrumbs,
.sat-page--heat-pumps .octo-hero--centred .octo-breadcrumbs a,
.sat-page--electric-vehicles .octo-hero--centred .octo-breadcrumbs,
.sat-page--electric-vehicles .octo-hero--centred .octo-breadcrumbs a{color:rgba(255,255,255,.72)}
.sat-page--heat-pumps .octo-hero--centred .octo-breadcrumbs a:hover,
.sat-page--electric-vehicles .octo-hero--centred .octo-breadcrumbs a:hover{color:#fff;text-decoration:underline}
.sat-page--heat-pumps .octo-hero--centred .octo-breadcrumbs__current,
.sat-page--electric-vehicles .octo-hero--centred .octo-breadcrumbs__current{color:#fff;font-weight:600}

/* Secondary CTA — outlined / transparent so it reads on the dark panel.
 * The primary teal button already has ample contrast, so it is left as-is. */
.sat-page--heat-pumps .octo-hero--centred .octo-btn--secondary,
.sat-page--electric-vehicles .octo-hero--centred .octo-btn--secondary{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.55);
}
.sat-page--heat-pumps .octo-hero--centred .octo-btn--secondary:hover,
.sat-page--electric-vehicles .octo-hero--centred .octo-btn--secondary:hover{
    background:rgba(255,255,255,.08);
    border-color:#fff;
}

/* ── Mobile ── On a narrow screen the horizontal gradient does little, so
 * swap to a stronger, more even darkening so the white H1, off-white lede
 * and light meta stay readable over the busier, height-cropped image. The
 * media also needs less upward pull (the mobile header is ≈76px). Full-
 * width button stacking is already handled by the shared centred rules; we
 * just re-assert LEFT alignment for the meta column (the shared mobile rule
 * centres it). The image position favours each photo's subject. */
@media (max-width:720px){
    .octo-hero-shell__media{
        top:-92px;
    }
    .octo-hero-shell--heat-pumps .octo-hero-shell__media{
        background-image:
            linear-gradient(180deg, rgba(7,23,42,.86) 0%, rgba(7,23,42,.74) 50%, rgba(7,23,42,.88) 100%),
            url('assets/images/heat-pumps-hero-bg.jpg');
        background-size:cover, cover;
        background-position:center, center;
    }
    .octo-hero-shell--electric-vehicles .octo-hero-shell__media{
        background-image:
            linear-gradient(180deg, rgba(7,23,42,.86) 0%, rgba(7,23,42,.74) 50%, rgba(7,23,42,.88) 100%),
            url('assets/images/electric-vehicles-hero-bg.jpg');
        background-size:cover, cover;
        background-position:center, right 30%;
    }
    .sat-page--heat-pumps .octo-hero--centred,
    .sat-page--electric-vehicles .octo-hero--centred{
        padding:46px 0 46px;
    }
    /* Re-assert left alignment on mobile (shared centred rule centres these). */
    .sat-page--heat-pumps .octo-hero--centred .octo-hero__centred,
    .sat-page--electric-vehicles .octo-hero--centred .octo-hero__centred{
        align-items:flex-start;
        text-align:left;
    }
    .sat-page--heat-pumps .octo-hero--centred .octo-hero__meta,
    .sat-page--electric-vehicles .octo-hero--centred .octo-hero__meta{
        align-items:flex-start;
    }
}