/* ==============================================================================
   PV SOLAR SYSTEMS — PAGE-SPECIFIC STYLES (Layer 3)
   ==============================================================================

   Consolidated CSS for the PV Solar Systems page. Originally the source
   had EIGHT separate <style> blocks organised by component. Those have been
   merged here, with section markers preserved for readability:

     1. DESIGN TOKENS — local overrides (most now removed in favour of foundation)
     2. PAGE HERO — rotating 6-layer crossfade
     3. SHARED SECTION SCAFFOLDING
     4. PACKAGES GRID
     5. 5-STEP PROCESS TIMELINE
     6. FAQ ACCORDION
     7. QUOTE FORM (note: there's NO actual quote form on this page —
                   the CSS was carried over from a template but the markup
                   uses a simpler CTA. Worth pruning later if confirmed unused)
     8. TWO-COLUMN INTRO LAYOUT

   WORDPRESS PLACEMENT
   -------------------
   wp-content/themes/synergy/assets/css/pages/pv.css

   ENQUEUE (in functions.php):

       if ( is_page( 'pv-solar-systems' ) ) {
           wp_enqueue_style(
               'synergy-pv',
               get_template_directory_uri() . '/assets/css/pages/pv.css',
               array( 'synergy-foundation' ),
               filemtime( get_template_directory() . '/assets/css/pages/pv.css' )
           );
       }

   LAYER 2 CANDIDATES (defer consolidation — used on multiple pages)
   ------------------------------------------------------------------
     - .page-hero (also on About, Tesla, SigenStor, Victron, Comparison)
     - .trust-bar (5 pages so far)
     - .section, .section-alt, .section-head, .eyebrow, .lede
     - .closing-cta
     - .stats-ribbon (also on About)
     - .faq-list, .faq, .faq-answer
     - .packages-grid (similar pattern to Tesla and Victron pricing grids)

   PAGE-SPECIFIC (Layer 3)
   -----------------------
     - .process-timeline, .timeline-step    (5-step install process)
     - .two-col-intro, .info-card           (intro layout)
     - PV-specific package card variants

   CI COMPLIANCE
   -------------
   All colours updated to CI specification on 12 May 2026.

   ============================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS & FOUNDATION OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */

/* ─── RESET / BASE ──────────────────────────────────────────── */

/* ─── A11Y SKIP LINK ─────────────────────────────────────────── */

/* ─── LAYOUT CONTAINERS ──────────────────────────────────────── */

.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* ─── BUTTONS (used in nav CTA + page-wide) ─────────────────── */

/* ─── ANNOUNCEMENT BAR ──────────────────────────────────────── */

.announce a:hover { color: var(--brand-primary-light); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HERO (rotating 6-layer crossfade)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── PAGE HERO (rotating 6-layer crossfade) ─────────────────── */

.page-hero {
    position: relative;
    background: var(--ink);             /* fallback while images decode */
    color: #fff;
    padding: 90px 0 100px;
    overflow: hidden;
    isolation: isolate;
  }

/*
    6-layer rotating background: 36s loop, 6s per image, ~1.2s crossfade.
    Each layer's image is anchored RIGHT by default so the photographic
    subject sits in the right-hand visual zone (the text occupies the
    left). Per-layer overrides below let individual photos be nudged
    without touching JS.
  */

.hero-bg {
    position: absolute;
    inset: 0;
    background-position: var(--bg-pos, right center);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--ink);       /* fallback during decode */
    opacity: 0;
    z-index: 0;
    animation: hero-rotate 36s infinite;
    will-change: opacity;
  }

/* Per-layer animation timing — staggered every 6 seconds */

.hero-bg-1 { animation-delay:   0s; }

.hero-bg-2 { animation-delay:  -6s; }

.hero-bg-3 { animation-delay: -12s; }

.hero-bg-4 { animation-delay: -18s; }

.hero-bg-5 { animation-delay: -24s; }

.hero-bg-6 { animation-delay: -30s; }

/*
    Per-layer position overrides — all default to 'right center'.
    Tweak any individual layer here without touching the HTML.
    Examples: 'right center', '70% center', 'center', '30% center', 'left center'.
    Vertical: 'right top', 'right 30%', 'right bottom'.
  */

.hero-bg-1 { --bg-pos: right center; }

.hero-bg-2 { --bg-pos: right center; }

.hero-bg-3 { --bg-pos: right center; }

.hero-bg-4 { --bg-pos: right center; }

.hero-bg-5 { --bg-pos: right center; }

.hero-bg-6 { --bg-pos: right center; }

/* On very wide screens, pull the subject inboard from the edge */

@media (min-width: 1600px) {
    .hero-bg { background-position: 80% center; }
    .hero-bg-1, .hero-bg-2, .hero-bg-3,
    .hero-bg-4, .hero-bg-5, .hero-bg-6 { --bg-pos: 80% center; }
  }

/* On mobile, narrow viewport hides the right-anchored subject — recentre */

@media (max-width: 760px) {
    .hero-bg { background-position: center top; }
    .hero-bg-1, .hero-bg-2, .hero-bg-3,
    .hero-bg-4, .hero-bg-5, .hero-bg-6 { --bg-pos: center top; }
  }

/* 6 layers × 6s each: fade in (3%), hold (13%), fade out (16%) */

@keyframes hero-rotate {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    13%  { opacity: 1; }
    16%  { opacity: 0; }
    100% { opacity: 0; }
  }

/* Olive-green gradient overlay sits ABOVE the rotating images */

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      rgba(167, 190, 57, 0.92) 0%,
      rgba(142, 162, 48, 0.78) 40%,
      rgba(45, 57, 64, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
  }

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 30px;
  }

/* Respect reduced-motion: stop the rotation, hold the first frame */

@media (prefers-reduced-motion: reduce) {
    .hero-bg { animation: none; }
    .hero-bg-1 { opacity: 1; }
  }

/* Hero typography */

.page-hero h1 {
    color: #fff;
    max-width: 880px;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
  }

.page-hero h1 strong {
    color: var(--accent-warn);
    font-weight: 800;
  }

.page-hero .hero-lede {
    max-width: 800px;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.95);
  }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--brand-primary);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 30px;
    margin-bottom: 22px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

/* Hero CTA group: primary white-fill + secondary white-outline */

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
  }

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--brand-primary-dark);
    border: 2px solid #fff;
    padding: 14px 30px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .98rem;
    letter-spacing: .02em;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }

.btn-hero-primary::after {
    content: "→";
    transition: transform .25s ease;
  }

.btn-hero-primary:hover {
    color: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  }

.btn-hero-primary:hover::after { transform: translateX(4px); }

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 14px 30px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: .02em;
    text-decoration: none;
    transition: all .25s ease;
  }

.btn-hero-secondary:hover {
    color: var(--brand-primary-dark);
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px);
  }

.btn-hero-secondary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

/* ─── TRUST BAR (under hero) ──────────────────────────────── */

.trust-bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
  }

.trust-bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-around;
    align-items: center;
  }

.trust-item {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
    text-align: center;
    flex: 1 1 160px;
  }

.trust-item strong {
    color: var(--brand-primary);
    display: block;
    font-size: 18px;
    margin-bottom: 2px;
    font-family: var(--font-display);
    font-weight: 700;
  }

/* Mobile hero spacing */

@media (max-width: 760px) {
    .page-hero { padding: 70px 0 80px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .btn-hero-primary,
    .btn-hero-secondary { justify-content: center; }
  }

@media (max-width: 600px) {
    .trust-bar-inner { gap: 20px; }
    .trust-item { flex: 1 1 100%; padding: 8px 0; border-bottom: 1px solid var(--line); }
    .trust-item:last-child { border-bottom: 0; }
  }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED SECTION SCAFFOLDING
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── SHARED SECTION SCAFFOLDING ──────────────────────────── */

section { padding: 72px 0; }

.section-alt { background: var(--bg-soft); }

.section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
  }

.section-header.left { text-align: left; margin-left: 0; }

.section-eyebrow {
    display: inline-block;
    color: var(--brand-primary);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

.section-header h2 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 0 0 .6em;
  }

.section-lede {
    font-size: 1.1rem;
    color: var(--muted);
    margin-top: 10px;
  }

/* ─── INTRO BODY COPY ─────────────────────────────────────── */

#intro-why h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 .6em;
  }

/* Inline callout box used inside intro and other sections */

.callout {
    background: var(--bg-panel);
    border-left: 4px solid var(--brand-primary);
    padding: 22px 26px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 28px 0;
  }

.callout h3 {
    margin-bottom: 8px;
    font-size: 1.05rem;
    color: var(--brand-primary-dark);
  }

.callout p { margin: 0; font-size: .95rem; }

/* Accreditation badge strip */

.members-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    padding: 32px 0 0;
  }

.member-badge {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 22px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }

.member-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary-light);
  }

/* ─── STATS RIBBON ────────────────────────────────────────── */

.stats-ribbon {
    background: var(--brand-gradient);
    color: #fff;
    padding: 56px 0;
  }

.stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    text-align: center;
  }

.stat-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -.01em;
  }

.stat-lbl {
    font-size: .92rem;
    color: rgba(255,255,255,0.92);
    font-family: var(--font-display);
    font-weight: 500;
  }

/* ─── SECTORS GRID (use-case feature cards) ──────────────── */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.feature-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex;
    flex-direction: column;
  }

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

.feature-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eee;
  }

.feature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
  }

.feature-card:hover .feature-card-img img { transform: scale(1.05); }

.feature-card-body {
    padding: 26px 28px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

.feature-card-body h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
  }

.feature-card-body p {
    color: var(--ink-soft);
    font-size: .95rem;
    margin-bottom: 16px;
    flex: 1;
  }

.feature-card-link {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--brand-primary);
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    text-decoration: none;
  }

.feature-card-link::after {
    content: "→";
    transition: transform .3s ease;
  }

.feature-card-link:hover { color: var(--brand-primary-dark); }

.feature-card-link:hover::after { transform: translateX(3px); }

/* Responsive */

@media (max-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 600px) {
    section { padding: 60px 0; }
    .section-header { margin-bottom: 40px; }
    .feature-grid { grid-template-columns: 1fr; }
    .stats-inner { grid-template-columns: 1fr; gap: 24px; }
    .members-strip { gap: 10px; }
    .member-badge { padding: 8px 16px; font-size: .82rem; }
  }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PACKAGES GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── PACKAGES GRID ───────────────────────────────────────── */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.package-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
  }

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

/* Dark navy header on each card — sets premium tone */

.package-header {
    background: linear-gradient(135deg, #1a2024 0%, #2d3940 100%);
    color: #fff;
    padding: 24px 26px 22px;
    position: relative;
  }

.package-tier {
    display: inline-block;
    background: rgba(180, 200, 87, 0.25);
    color: var(--brand-primary-light);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: var(--font-display);
    margin-bottom: 10px;
  }

.package-header h3 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
  }

.package-body {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

/* Spec list — dashed dividers between rows */

.package-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: .9rem;
  }

.package-specs li {
    padding: 7px 0;
    border-bottom: 1px dashed var(--line);
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

.package-specs li:last-child { border-bottom: 0; }

.package-specs li span { color: var(--muted); }

.package-specs li strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    text-align: right;
  }

/* Pricing block — tinted background */

.package-pricing {
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 6px 0 18px;
  }

.price-row {
    display: flex;
    justify-content: space-between;
    font-size: .88rem;
    padding: 3px 0;
  }

.price-row.total {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    font-family: var(--font-display);
  }

.price-row .lbl { color: var(--muted); }

.price-row .val { color: var(--ink); font-weight: 600; }

/* Savings panel — green accent */

.package-savings {
    background: rgba(167, 190, 57, 0.08);
    border-left: 3px solid var(--brand-primary);
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: .85rem;
  }

.package-savings .save-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
  }

.package-savings .save-row strong {
    color: var(--brand-primary-dark);
    font-family: var(--font-display);
  }

/* Example application footnote */

.package-case {
    font-size: .86rem;
    color: var(--ink-soft);
    padding: 14px 0 18px;
    border-top: 1px solid var(--line);
    margin-top: auto;
  }

.package-case-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 6px;
  }

.package-case p { margin: 0; line-height: 1.55; }

.package-cta { margin-top: 14px; }

.package-cta a {
    width: 100%;
    justify-content: center;
  }

/* ─── CUSTOM SIZING PANEL ────────────────────────────────── */

.sizing-panel {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }

.sizing-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(167, 190, 57, 0.14), transparent 70%);
    border-radius: 50%;
    transform: translate(40%, -40%);
    pointer-events: none;
  }

.sizing-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
  }

.sizing-features {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: .93rem;
  }

.sizing-features li {
    padding-left: 26px;
    position: relative;
  }

.sizing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-primary);
    font-weight: 800;
  }

.sizing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

.sizing-img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    aspect-ratio: 5 / 6;
    object-fit: cover;
    width: 100%;
  }

/* Secondary button — outlined olive */

.btn-secondary::after {
    content: "→";
    transition: transform .25s ease;
  }

.btn-secondary:hover::after { transform: translateX(4px); }

/* ─── COMPARISON TABLE ───────────────────────────────────── */

table.compare {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: .92rem;
  }

table.compare caption {
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
    padding: 0 0 12px;
    color: var(--ink);
  }

table.compare thead {
    background: var(--brand-gradient);
    color: #fff;
  }

table.compare th,
  table.compare td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }

table.compare th {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
  }

table.compare tbody tr:nth-child(even) { background: var(--bg-soft); }

table.compare tbody tr:last-child td { border-bottom: 0; }

table.compare td strong {
    color: var(--ink);
    font-family: var(--font-display);
  }

/* Highlight the recommended column */

table.compare th:nth-child(3),
  table.compare td:nth-child(3) {
    background: rgba(167, 190, 57, 0.06);
    border-left: 2px solid var(--brand-primary);
    border-right: 2px solid var(--brand-primary);
  }

table.compare thead th:nth-child(3) {
    background: rgba(167, 190, 57, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
  }

/* Responsive */

@media (max-width: 1024px) {
    .packages-grid { grid-template-columns: repeat(2, 1fr); }
    .sizing-inner { grid-template-columns: 1fr; }
    .sizing-img { max-width: 480px; margin: 0 auto; }
  }

@media (max-width: 760px) {
    .sizing-panel { padding: 32px 24px; }
    .sizing-features { grid-template-columns: 1fr; }
    table.compare { font-size: .82rem; }
    table.compare th,
    table.compare td { padding: 10px 12px; }
  }

@media (max-width: 600px) {
    .packages-grid { grid-template-columns: 1fr; }
    .sizing-cta-row { flex-direction: column; align-items: stretch; }
    .sizing-cta-row .btn,
    .sizing-cta-row .btn-secondary { justify-content: center; }
    /* Make the comparison table horizontally scrollable on phones */
    .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.compare { min-width: 600px; }
  }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5-STEP PROCESS TIMELINE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── 5-STEP PROCESS TIMELINE ─────────────────────────────── */

.process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    position: relative;
  }

/* Connecting line behind the numbered circles */

.process::before {
    content: "";
    position: absolute;
    top: 54px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--brand-primary-light) 8%,
      var(--brand-primary-light) 92%,
      transparent 100%);
    z-index: 0;
    opacity: .35;
  }

.process-step {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 26px 22px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform .3s ease, box-shadow .3s ease;
  }

.process-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

.process-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 auto 16px;
    box-shadow: 0 6px 16px rgba(167, 190, 57, 0.35);
  }

.process-step h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
  }

.process-step p {
    font-size: .88rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.55;
  }

/* ─── WHY SYNERGY (6-grid) ────────────────────────────────── */

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.why-item {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 30px 28px;
    box-shadow: var(--shadow-sm);
    position: relative;
    border-top: 4px solid var(--brand-primary);
    transition: transform .3s ease, box-shadow .3s ease;
  }

.why-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

.why-num {
    position: absolute;
    top: -18px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: var(--brand-gradient);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(167, 190, 57, 0.3);
  }

.why-item h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.3;
  }

.why-item p {
    font-size: .93rem;
    color: var(--ink-soft);
    margin: 0;
  }

/* ─── TARIFF OPTIMISATION DIFFERENTIATOR ─────────────────── */

/* This is the section other commercial-solar pages don't have.
     Wider container and richer typography for a long-form read. */

#tariff-optimisation .container-narrow h3 {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 36px 0 14px;
    line-height: 1.3;
  }

#tariff-optimisation .container-narrow p {
    margin: 0 0 1em;
    line-height: 1.75;
  }

#tariff-optimisation .container-narrow p strong {
    color: var(--ink);
    font-weight: 700;
  }

#tariff-optimisation .container-narrow em {
    color: var(--brand-primary-dark);
    font-style: normal;
    font-weight: 600;
  }

/* Honest-admission callout — orange accent variant */

.callout-warn {
    background: #fff8ed;
    border-left: 4px solid var(--accent-warn);
    padding: 22px 26px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 32px 0 0;
  }

.callout-warn h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-family: var(--font-display);
    color: var(--accent-warn);
  }

.callout-warn p {
    margin: 0;
    font-size: .95rem;
  }

/* The 4-step audit callout — branded green variant with
     a tiny visual flourish on the heading */

.audit-callout {
    background: var(--bg-panel);
    border-left: 4px solid var(--brand-primary);
    padding: 26px 30px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 28px 0;
    box-shadow: var(--shadow-sm);
  }

.audit-callout h3 {
    margin: 0 0 14px;
    font-size: 1.1rem;
    color: var(--brand-primary-dark);
    font-family: var(--font-display);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
  }

.audit-callout h3::before {
    content: "✓";
    width: 28px;
    height: 28px;
    background: var(--brand-gradient);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    flex-shrink: 0;
  }

.audit-callout p {
    margin: 0 0 12px;
    font-size: .95rem;
    line-height: 1.7;
  }

.audit-callout p:last-child { margin-bottom: 0; }

.audit-callout p strong {
    color: var(--brand-primary-dark);
    font-family: var(--font-display);
    font-weight: 700;
  }

/* Responsive */

@media (max-width: 1024px) {
    .process { grid-template-columns: repeat(3, 1fr); }
    .process::before { display: none; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 600px) {
    .process { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .audit-callout { padding: 22px 20px; }
  }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ ACCORDION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── FAQ ACCORDION ──────────────────────────────────────── */

.faq-list {
    max-width: 860px;
    margin: 0 auto;
  }

details.faq {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .25s, border-color .25s;
  }

details.faq[open] {
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-primary-light);
  }

details.faq summary {
    cursor: pointer;
    padding: 18px 24px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 1rem;
    line-height: 1.4;
    transition: background .2s ease;
  }

details.faq summary:hover {
    background: rgba(167, 190, 57, 0.04);
  }

/* Hide default disclosure triangle on Safari/Chrome */

details.faq summary::-webkit-details-marker { display: none; }

details.faq summary::-moz-list-bullet { list-style-type: none; }

/* Custom +/− indicator */

details.faq summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--brand-primary);
    font-weight: 300;
    transition: transform .25s;
    flex-shrink: 0;
    line-height: 1;
  }

details.faq[open] summary::after {
    content: "−";
    transform: rotate(0);
  }

details.faq .faq-body {
    padding: 0 24px 22px;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.7;
  }

details.faq .faq-body p { margin: 0 0 .9em; }

details.faq .faq-body p:last-child { margin-bottom: 0; }

/* ─── COVERAGE / BRANCH CARDS ────────────────────────────── */

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

.coverage-card {
    background: #fff;
    padding: 28px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }

.coverage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary-light);
  }

.coverage-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--brand-primary-dark);
  }

.coverage-card address {
    font-style: normal;
    font-size: .93rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0 0 14px;
  }

.coverage-card address a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
  }

.coverage-card address a:hover {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
  }

.coverage-card address strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
  }

.coverage-cities {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.65;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    margin: 0;
  }

.coverage-cities strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
    color: var(--brand-primary);
  }

/* ─── CLOSING CTA BANNER ─────────────────────────────────── */

.cta-banner {
    background: var(--brand-gradient);
    color: #fff;
    padding: 72px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

/* Soft radial highlights to break up the flat gradient */

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12), transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08), transparent 50%);
    pointer-events: none;
  }

.cta-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
  }

.cta-banner h2 {
    color: #fff;
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.8vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
  }

.cta-banner p {
    color: rgba(255, 255, 255, 0.95);
    margin: 0 auto 32px;
    font-size: 1.08rem;
    line-height: 1.65;
  }

.cta-banner-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }

/* White-on-gradient button (primary) */

.btn-cta-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--brand-primary-dark);
    border: 2px solid #fff;
    padding: 14px 30px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }

.btn-cta-white::after {
    content: "→";
    transition: transform .25s ease;
  }

.btn-cta-white:hover {
    color: var(--brand-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  }

.btn-cta-white:hover::after { transform: translateX(4px); }

/* Outlined-white button (secondary, for the phone CTA) */

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 14px 30px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    transition: all .25s ease;
  }

.btn-cta-outline:hover {
    color: var(--brand-primary-dark);
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px);
  }

.btn-cta-outline svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

/* Responsive */

@media (max-width: 1024px) {
    .coverage-grid { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 760px) {
    details.faq summary {
      padding: 16px 18px;
      font-size: .95rem;
    }
    details.faq .faq-body { padding: 0 18px 18px; }
  }

@media (max-width: 600px) {
    .coverage-grid { grid-template-columns: 1fr; }
    .cta-banner { padding: 56px 0; }
    .cta-banner-buttons { flex-direction: column; align-items: stretch; }
    .btn-cta-white,
    .btn-cta-outline { justify-content: center; }
  }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   QUOTE FORM (only used here? Or repeated CSS? Investigate)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── QUOTE FORM ─────────────────────────────────────────── */

/* The form is rendered inside the closing-CTA banner. We
     override the banner's text-align: center for the form area
     so labels sit left-aligned, but keep the headline centered. */

.cta-banner .quote-form-wrap,
  .cta-banner .quote-form-success {
    text-align: left;
  }

.quote-form-wrap {
    max-width: 760px;
    margin: 36px auto 0;
    background: #fff;
    border-radius: 14px;
    padding: 40px 44px 36px;
    box-shadow:
      0 24px 60px rgba(20, 28, 32, 0.32),
      0 8px 18px rgba(20, 28, 32, 0.18);
    color: var(--ink-soft);
    position: relative;
    z-index: 2;
  }

.quote-form-header {
    text-align: center;
    margin-bottom: 30px;
  }

.quote-form-header .quote-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 10px;
  }

.quote-form-header h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.25;
  }

.quote-form-header p {
    font-size: .92rem;
    color: var(--ink-soft);
    margin: 0;
  }

/* Field grid */

.quote-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

.quote-form-grid .full-row { grid-column: 1 / -1; }

.quote-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

.quote-field label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .3px;
  }

.quote-field label .req {
    color: var(--brand-primary);
    margin-left: 2px;
  }

.quote-field input[type="text"],
  .quote-field input[type="tel"],
  .quote-field input[type="email"],
  .quote-field textarea {
    width: 100%;
    padding: 11px 14px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--bg-panel);
    border: 1.5px solid var(--line);
    border-radius: 7px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    font-family: var(--font-body);
  }

.quote-field textarea {
    min-height: 90px;
    resize: vertical;
  }

.quote-field input:focus,
  .quote-field textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(167, 190, 57, 0.15);
  }

.quote-field input[aria-invalid="true"],
  .quote-field textarea[aria-invalid="true"] {
    border-color: #c0392b;
    background: #fdf3f1;
  }

.quote-field .field-error {
    font-size: 12px;
    color: #c0392b;
    margin-top: 2px;
    min-height: 16px;
  }

/* Radio "pill" groups (bill range / system size / sector) */

.quote-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

.quote-radio-group .quote-radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

.quote-radio-options label {
    flex: 1 1 auto;
    min-width: 130px;
    padding: 10px 14px;
    background: var(--bg-panel);
    border: 1.5px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: center;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .2px;
    position: relative;
  }

.quote-radio-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

/* Highlight the selected pill */

.quote-radio-options label:has(input[type="radio"]:checked) {
    background: linear-gradient(135deg, rgba(180, 200, 87, 0.18) 0%, rgba(167, 190, 57, 0.12) 100%);
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
    box-shadow: 0 0 0 1px var(--brand-primary);
  }

.quote-radio-options label:hover {
    border-color: var(--brand-primary);
    color: var(--ink);
  }

/* Focus ring for keyboard users */

.quote-radio-options input[type="radio"]:focus-visible + .radio-pill {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: 5px;
  }

/* Consent checkbox row */

.quote-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
    cursor: pointer;
  }

.quote-consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--brand-primary);
    margin-top: 2px;
    flex-shrink: 0;
  }

.quote-consent[aria-invalid="true"] {
    color: #c0392b;
  }

.quote-consent a {
    color: var(--brand-primary-dark);
    font-weight: 600;
  }

/* Submit + trust line */

.quote-form-footer {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

.quote-submit {
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 50%, var(--brand-primary-dark) 100%);
    color: #fff;
    border: 0;
    padding: 14px 38px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    cursor: pointer;
    box-shadow:
      0 6px 18px rgba(167, 190, 57, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform .18s, box-shadow .18s;
    min-width: 240px;
  }

.quote-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
      0 10px 24px rgba(167, 190, 57, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

.quote-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
  }

.quote-form-trust {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0;
  }

/* Honeypot — hidden from real users; bots fill it */

.quote-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

/* Form-wide error banner */

.quote-form-error {
    display: none;
    background: #fdf3f1;
    border: 1px solid #f5c6c1;
    color: #c0392b;
    padding: 12px 16px;
    border-radius: 7px;
    font-size: 13.5px;
    margin-bottom: 18px;
    text-align: center;
  }

.quote-form-error.is-visible { display: block; }

/* Success state — replaces the form on submit */

.quote-form-success {
    display: none;
    text-align: center;
    padding: 50px 30px;
  }

.quote-form-success.is-visible { display: block; }

.quote-form-success .success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(167, 190, 57, 0.35);
  }

.quote-form-success .success-icon svg {
    width: 36px;
    height: 36px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.quote-form-success h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
  }

.quote-form-success p {
    font-size: .95rem;
    color: var(--ink-soft);
    max-width: 460px;
    margin: 0 auto 8px;
    line-height: 1.7;
  }

.quote-form-success .success-meta {
    font-size: .85rem;
    color: var(--ink-soft);
    margin-top: 18px;
  }

.quote-form-success .success-meta a {
    color: var(--brand-primary-dark);
    font-weight: 600;
  }

/* "Prefer to talk now?" footer line under the form */

.quote-alt {
    text-align: center;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    position: relative;
    z-index: 2;
  }

.quote-alt strong { color: #fff; }

.quote-alt a {
    color: #fff;
    font-weight: 700;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
    padding-bottom: 1px;
    text-decoration: none;
  }

.quote-alt a:hover {
    border-bottom-color: #fff;
    color: #fff;
  }

/* ─── FLOATING MOBILE CTA ────────────────────────────────── */

.float-cta {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    background: var(--brand-primary);
    color: #fff;
    padding: 14px 22px;
    border-radius: 50px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: none;
    transition: background .2s, transform .2s, box-shadow .2s;
  }

.float-cta:hover {
    background: var(--brand-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  }

/* Only show on mobile/tablet, after scroll */

@media (max-width: 980px) {
    .float-cta.visible { display: inline-flex; }
  }

/* Form responsive */

@media (max-width: 760px) {
    .quote-form-wrap { padding: 30px 20px 26px; }
    .quote-form-grid { grid-template-columns: 1fr; gap: 14px; }
    .quote-radio-options label { min-width: 0; }
    .quote-form-header h3 { font-size: 1.2rem; }
    .quote-submit { width: 100%; }
  }

@media (max-width: 600px) {
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TWO-COLUMN INTRO LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Two-column intro layout: prose left, info card right */

.system-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 32px;
  }

@media (max-width: 900px) {
    .system-grid { grid-template-columns: 1fr; gap: 32px; }
  }

/* Best-for tag — pill above the section heading */

.best-for-tag {
    display: inline-block;
    background: var(--brand-primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .85rem;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    letter-spacing: .01em;
  }

.best-for-tag.is-warn { background: var(--accent-warn); }

.best-for-tag.is-muted { background: var(--muted); }

/* Info card — sits in the right column with figure + price-line */

.system-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

.section-alt .system-card { background: #fff; }

.system-card figure { margin: 0; }

.system-card figure img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
  }

.system-card figcaption {
    padding: 16px 22px;
    font-size: .9rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    line-height: 1.5;
  }

.system-card .price-line {
    padding: 18px 22px;
    background: var(--bg-soft);
    font-size: .95rem;
    color: var(--ink);
  }

.system-card .price-line strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-primary-dark);
    font-size: 1.05rem;
    margin-bottom: 4px;
  }

.section-alt .system-card .price-line { background: var(--bg-soft); }

/* Pros & Cons split */

.proscons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 36px 0 28px;
  }

@media (max-width: 700px) { .proscons { grid-template-columns: 1fr; } }

.proscons-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px 26px;
    box-shadow: var(--shadow-sm);
  }

.proscons-block h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-primary);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
  }

.proscons-block h4::before {
    content: "✓";
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
  }

.proscons-block.cons h4 { border-bottom-color: var(--accent-warn); }

.proscons-block.cons h4::before {
    content: "✕";
    background: var(--accent-warn);
  }

.proscons-block ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
  }

.proscons-block ul li {
    position: relative;
    padding: 6px 0 6px 4px;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }

.proscons-block ul li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
  }

.proscons-block.cons ul li::before { background: var(--accent-warn); }

/* Mobile sequencing helper — moves card under prose on small screens */

@media (max-width: 900px) {
    .system-grid > .system-card { order: 2; }
    .system-grid > .system-prose { order: 1; }
  }

/* Option-block — for comparative sections with multiple sub-options
     (e.g. "Backup systems" lists 3 distinct configurations).
     Each block is a numbered h4 + descriptive prose. */

.option-block {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    margin: 18px 0;
    box-shadow: var(--shadow-sm);
  }

.section-alt .option-block { background: #fff; }

.option-block h4 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
  }

.option-block h4 .option-num {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    flex-shrink: 0;
  }

.option-block p { margin: 0 0 8px; font-size: .95rem; }

.option-block p:last-child { margin-bottom: 0; }

.option-block.is-secondary { border-left-color: var(--brand-primary-light); }

.option-block.is-secondary h4 .option-num { background: var(--brand-primary-light); }

.option-block.is-warn { border-left-color: var(--accent-warn); }

.option-block.is-warn h4 .option-num { background: var(--accent-warn); }

/* Decision-guide grid — text-only "If X, choose Y" cards */

.decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

@media (max-width: 1024px) {
    .decision-grid { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 640px) {
    .decision-grid { grid-template-columns: 1fr; }
  }

.decision-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 26px 26px 22px;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--brand-primary);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
  }

.decision-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

.decision-trigger {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand-primary-dark);
    margin-bottom: 10px;
  }

.decision-card h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin: 0 0 10px;
  }

.decision-card p {
    font-size: .92rem;
    color: var(--ink-soft);
    margin: 0 0 16px;
    line-height: 1.55;
    flex-grow: 1;
  }

.decision-card a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--brand-primary);
    align-self: flex-start;
    transition: color .25s ease, transform .25s ease;
  }

.decision-card a::after {
    content: " →";
    display: inline-block;
    transition: transform .25s ease;
  }

.decision-card a:hover { color: var(--brand-primary-dark); }

.decision-card a:hover::after { transform: translateX(3px); }

/* CTA variant — the "Still not sure?" card stands out as the
     conversion lane, not just another recommendation */

.decision-card.is-cta {
    background: var(--brand-gradient);
    border-top: 0;
    color: #fff;
  }

.decision-card.is-cta .decision-trigger { color: rgba(255,255,255,0.85); }

.decision-card.is-cta h4 { color: #fff; }

.decision-card.is-cta p { color: rgba(255,255,255,0.92); }

.decision-card.is-cta a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
  }

.decision-card.is-cta a:hover { color: #fff; }

/* Brand handoff — compact 4-up routing tiles for the
     "now pick a brand" step. Each card links to that brand's hub. */

.brand-handoff {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

@media (max-width: 900px) {
    .brand-handoff { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 520px) {
    .brand-handoff { grid-template-columns: 1fr; }
  }

.brand-handoff-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }

.brand-handoff-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-primary-light);
  }

.brand-handoff-card h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.25;
  }

.brand-pos {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.45;
    flex-grow: 1;
  }

.brand-handoff-card a {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--brand-primary);
    align-self: flex-start;
    transition: color .25s ease;
  }

.brand-handoff-card a::after {
    content: " →";
    display: inline-block;
    transition: transform .25s ease;
  }

.brand-handoff-card a:hover { color: var(--brand-primary-dark); }

.brand-handoff-card a:hover::after { transform: translateX(3px); }

/* Centred button row — used after grids/strips for a closing CTA.
     Preferable to inline style="text-align:center" on a <p>. */

.btn-row-centered {
    text-align: center;
    margin-top: 36px;
  }