/**
 * City Landing Page Styles
 * Figma: https://www.figma.com/design/8UCugT1JdZDalhzWuGjs9r/prp?node-id=20-2
 * All classes prefixed with cl- (City Landing)
 *
 * DESIGN SYSTEM:
 *   Headings: Oswald, 700 weight, letter-spaced
 *   Body: Roboto, 300/400/500/700 weights
 *   Cards: 32px radius, #f5f5f7 bg
 *   Section spacing: 112px top/bottom (128px for some)
 *   Container: max-width 1200px, 32px side padding
 *   Primary: #0a0a0a (near-black)
 *   Secondary: #01bf5a (green accent)
 *   Text: #52525b (zinc-600 body), #71717a (zinc-500 sub), #a1a1aa (zinc-400 muted)
 *   Dark text: #3f3f46 (zinc-700)
 *   Alt bg: #f5f5f7 (zinc-100)
 *   Border: #e4e4e7 (zinc-200)
 *   Stars: #ffc107 (amber)
 *   CTA bg: #0a0a0a
 */

/* ============================================
   0. Theme Variables & Base Resets
   ============================================ */

body.page-template-template-city-landing {
    --ff-primary: var(--font-roboto);
    --ff-header: var(--font-oswald);
    --ff-secondary: var(--font-oswald);
    --cl-primary: #0a0a0a;
    --cl-secondary: #01bf5a;
    --cl-text: #52525b;
    --cl-text-sub: #71717a;
    --cl-text-muted: #a1a1aa;
    --cl-text-dark: #3f3f46;
    --cl-bg: #ffffff;
    --cl-bg-alt: #f5f5f7;
    --cl-border: #e4e4e7;
    --cl-star: #ffc107;

    /* Accent palette — recycled from Figma node 20:78 "Smart Control".
       *-ink = pure accent (text + strokes)
       *-bg  = same accent at 20% alpha (hex #…33) for chip backgrounds. */
    --cl-accent-gold: #FFC107;
    --cl-accent-gold-ink: #FFC107;
    --cl-accent-gold-bg: #FFC10720;

    --cl-accent-green: #01BF5A;
    --cl-accent-green-ink: #01BF5A;
    --cl-accent-green-bg: #01BF5A20;

    --cl-accent-blue: #4A90E2;
    --cl-accent-blue-ink: #4A90E2;
    --cl-accent-blue-bg: #4A90E220;

    --cl-radius: 32px;
    --cl-radius-sm: 24px;
    --cl-radius-xs: 16px;
    --cl-radius-pill: 9999px;
}

/* Reset theme interference on city landing */
body.page-template-template-city-landing #main,
body.page-template-template-city-landing .site-content,
body.page-template-template-city-landing article,
body.page-template-template-city-landing .entry-content,
body.page-template-template-city-landing .post-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Prevent theme from adding unwanted backgrounds/padding to page wrapper */
body.page-template-template-city-landing .site-content,
body.page-template-template-city-landing #content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reset any theme typography inheritance on city landing sections */
body.page-template-template-city-landing [class*="cl-"] p,
body.page-template-template-city-landing [class*="cl-"] span,
body.page-template-template-city-landing [class*="cl-"] a {
    font-family: 'Roboto', sans-serif;
}
/* Spans inside headings, buttons, or cert/label containers get Oswald */
body.page-template-template-city-landing [class*="cl-"] h1 span,
body.page-template-template-city-landing [class*="cl-"] h2 span,
body.page-template-template-city-landing [class*="cl-"] h3 span,
body.page-template-template-city-landing [class*="cl-"] h4 span,
body.page-template-template-city-landing [class*="cl-"] [class*="question"] span,
body.page-template-template-city-landing [class*="cl-"] [class*="cert"] span,
body.page-template-template-city-landing [class*="cl-"] [class*="label"] span {
    font-family: 'Oswald', sans-serif;
}
/* Remove focus outlines on all inputs/selects in city-landing sections */
body.page-template-template-city-landing [class*="cl-"] input:focus,
body.page-template-template-city-landing [class*="cl-"] select:focus,
body.page-template-template-city-landing [class*="cl-"] textarea:focus,
body.page-template-template-city-landing [class*="cl-"] input:active,
body.page-template-template-city-landing [class*="cl-"] select:active,
body.page-template-template-city-landing [class*="cl-"] textarea:active {
    outline: none;
    border-color: transparent;
}
/* Oswald overrides — labels, headings, values, costs, totals win over span/p Roboto rule */
body.page-template-template-city-landing [class*="cl-"] h1,
body.page-template-template-city-landing [class*="cl-"] h2,
body.page-template-template-city-landing [class*="cl-"] h3,
body.page-template-template-city-landing [class*="cl-"] h4,
body.page-template-template-city-landing [class*="cl-"] [class*="label"],
body.page-template-template-city-landing [class*="cl-"] [class*="heading"],
body.page-template-template-city-landing [class*="cl-"] [class*="title"],
body.page-template-template-city-landing [class*="cl-"] [class*="value"],
body.page-template-template-city-landing [class*="cl-"] [class*="cost"],
body.page-template-template-city-landing [class*="cl-"] [class*="total"] {
    font-family: 'Oswald', sans-serif;
}

/* ============================================
   1. Container
   ============================================ */

.cl-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

/* ============================================
   2. Trust Strip
   Figma: bg white, padding 48px vertical, horizontal layout
   Certs: Oswald 20px 700, letter-spacing 0.4em, color #a1a1aa
   ============================================ */

/* ============================================
   Trust Strip — FE-009 redesign
   Single horizontal row: [avatars+stars+stat] | divider | [cert labels]
   White bg, no border-bottom, vertically centered ~48px content row
   ============================================ */

.cl-trust-strip {
    padding: 48px 0;
    background: #ffffff;
    border-bottom: 1px solid #E4E4E7;
}

.cl-trust-strip__inner {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Left zone: avatars stacked above stars+stat */
.cl-trust-strip__left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* Overlapping avatar circles */
.cl-trust-strip__badges {
    display: flex;
    align-items: center;
}

.cl-trust-strip__badge {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-left: -10px;
}

.cl-trust-strip__badge:first-child {
    margin-left: 0;
}

.cl-trust-strip__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stars + stat column */
.cl-trust-strip__stars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cl-trust-strip__stars svg {
    width: 16px;
    height: 14px;
    flex-shrink: 0;
}

.cl-trust-strip__stat {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #52525B;
    line-height: 20px;
    margin: 0;
    max-width: 220px;
}

/* Vertical divider */
.cl-trust-strip__divider {
    width: 1px;
    height: 48px;
    background: #E4E4E7;
    flex-shrink: 0;
}

/* Certification labels */
.cl-trust-strip__certs {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
    min-width: 0;
}

.cl-trust-strip__cert {
    flex-shrink: 0;
}

.cl-trust-strip__cert span {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    color: #A1A1AA;
    line-height: 28px;
    white-space: nowrap;
}

/* Responsive: stack on tablet */
@media (max-width: 768px) {
    .cl-trust-strip__inner {
        flex-direction: column;
        gap: 32px;
    }

    .cl-trust-strip__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cl-trust-strip__divider {
        width: 48px;
        height: 1px;
    }

    .cl-trust-strip__certs {
        flex-wrap: wrap;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .cl-trust-strip__certs {
        flex-direction: column;
        gap: 16px;
    }
}

/* ============================================
   3. Hero Section
   FE-008: Two absolute-positioned color blocks (left #4A6750, right #9E7F61)
   covering the full 800px height. No display:flex on .cl-hero — uses
   grid with height:100% on inner for vertical centering.
   Container: 1216px, columns: 568px each, height: 800px
   Badge: Roboto 700 12px, ls 1.2px, frosted glass (rgba 0.15 white + blur 4px)
   Heading: Oswald 700 72px, ls 1.44px, lh 72px, white, uppercase
   Subtext: Roboto 300 20px, lh 28px, white
   CTA: white pill 253×60, Roboto 500 18px, shadow 0 8px 10px + 0 20px 25px
   Service area: Roboto 400 14px, white, pin icon 11×14px
   Side image: 568×600, r=24px, shadow 0 25px 50px rgba(0,0,0,0.25)
   Float stat: 128×128 circle, Oswald 700 30px, Roboto 400 12px
   All vertical gaps between hero elements: 24px (via flex gap)
   ============================================ */

.cl-hero {
    position: relative;
    background: #4A6750;
    height: 800px;
    overflow: hidden;
}

/* Left color block — solid green, full height */
.cl-hero__bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #4A6750;
    z-index: 0;
}

/* Right color block — solid warm tan, full height */
.cl-hero__bg-right {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    background: #9E7F61;
    z-index: 0;
}

/* Single full-bleed background image (overrides the two color blocks when set) */
.cl-hero__bg-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Soft overlay keeps white hero text legible on any photo */
.cl-hero--has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.25) 55%, rgba(10, 10, 10, 0.15) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.35) 100%);
    z-index: 1;
    pointer-events: none;
}

.cl-hero--has-image .cl-hero__inner {
    position: relative;
    z-index: 2;
}

.cl-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1216px;
    display: grid;
    grid-template-columns: 568px 568px;
    gap: 80px;
    align-items: center;
    padding: 0 32px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.cl-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: center;
}

/* Badge — frosted glass pill */
.cl-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--cl-radius-pill);
    background: rgba(255, 255, 255, 0.15);
    width: fit-content;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cl-hero__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--cl-radius-pill);
    background: #01BF5A;
    flex-shrink: 0;
}

.cl-hero__badge span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #ffffff;
    text-transform: uppercase;
}

/* Heading */
.cl-hero__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 72px;
    letter-spacing: 1.44px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    max-width: 520px;
}

/* Subheading */
.cl-hero__subtext {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0;
    max-width: 512px;
}

/* CTA Button — fluid pill that sizes to its label */
.cl-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60px;
    padding: 14px 32px;
    border-radius: var(--cl-radius-pill);
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1), 0 20px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cl-hero__cta {
    color: #0a0a0a;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cl-hero__cta:hover,
.cl-hero__cta:focus,
.cl-hero__cta:active {
    text-decoration: none;
}

.cl-hero__cta:hover {
    transform: translateY(-2px);
    background: var(--cl-secondary);
    color: #ffffff;
    box-shadow: 0 8px 10px rgba(1, 191, 90, 0.18), 0 20px 25px rgba(1, 191, 90, 0.22);
}

.cl-hero__cta span {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: inherit;
}

.cl-hero__cta svg {
    width: 16px;
    height: 14px;
    flex-shrink: 0;
}

.cl-hero__cta svg path {
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

/* Service area */
.cl-hero__service-area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cl-hero__service-area svg {
    width: 11px;
    height: 14px;
    flex-shrink: 0;
}

.cl-hero__service-area span {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
}

/* Hero side image */
.cl-hero__image-wrap {
    position: relative;
    width: 568px;
    max-width: 100%;
}

.cl-hero__image {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.cl-hero__image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: cover;
}

/* Floating stat card — 128×128 circle */
.cl-hero__float-stat {
    position: absolute;
    bottom: 24px;
    right: -20px;
    width: 128px;
    height: 128px;
    background: #ffffff;
    border-radius: var(--cl-radius-pill);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cl-hero__float-stat-number {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #0a0a0a;
    line-height: 36px;
}

.cl-hero__float-stat-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #71717a;
    line-height: 15px;
    text-align: center;
}

/* ============================================
   4. Energy Management Grid (Feature Grid)
   FE-014: Complete redo — "SMART ⚡ CONTROL"
   Left: dark dashboard with frosted glass overlays
   Right: Time-Based Control + Storm Watch cards
   Figma: node 20:78, 1440×1088, white bg
   ============================================ */

/* Section container */
.cl-feature-grid {
    padding: 112px 0;
    background: #fff;
}

/* Header — NO badge pill, inline heading */
.cl-feature-grid__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.cl-feature-grid__heading {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 72px;
    line-height: 72px;
    letter-spacing: -1.80px;
    color: #0A0A0A;
    margin: 0 0 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.cl-feature-grid__bolt {
    width: 63px;
    height: 72px;
    flex-shrink: 0;
}

.cl-feature-grid__description {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #52525B;
    max-width: 600px;
    margin: 0 auto;
}

/* Main 2-column layout */
.cl-feature-grid__main {
    display: grid;
    grid-template-columns: 1fr 389px;
    gap: 24px;
    align-items: stretch;
}

/* Left column: Dashboard */
.cl-feature-grid__dashboard {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    min-height: 600px;
}

/* Dashboard background — ACF image via <img> tag, absolutely positioned */
.cl-feature-grid__dashboard-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Dark overlay gradient — no image (image is now an <img> tag) */
.cl-feature-grid__dashboard::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(8, 13, 10, 0.92) 0%, rgba(10, 14, 20, 0.88) 40%, rgba(8, 10, 16, 0.92) 100%);
    z-index: 0;
}

/* Overlay container — positioned over the dashboard bg */
.cl-feature-grid__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
    height: 100%;
    min-height: 600px;
}

/* Integration pill — frosted glass */
.cl-feature-grid__pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #ffffff;
}

/* Overlay heading */
.cl-feature-grid__overlay-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.72px;
    color: #ffffff;
    margin: 0;
}

/* Overlay description */
.cl-feature-grid__overlay-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 29px;
    color: #ffffff;
    margin: 0;
    max-width: 576px;
}

/* Three stat cards — pushed to bottom */
.cl-feature-grid__stats {
    display: flex;
    gap: 24px;
    margin-top: auto;
}

.cl-feature-grid__stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 225px;
    min-width: 180px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cl-feature-grid__stat-card svg {
    flex-shrink: 0;
    width: auto;
    height: 24px;
}

.cl-feature-grid__stat-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #ffffff;
}

.cl-feature-grid__stat-value {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.60px;
    color: #ffffff;
    line-height: 36px;
}

/* CTA button — frosted glass pill, VISIBLE */
.cl-feature-grid__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 13px 24px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.70px;
    color: #ffffff;
    text-decoration: none;
    transition: background 0.2s;
    margin-top: 8px;
}

.cl-feature-grid__cta:hover {
    background: rgba(0, 0, 0, 0.8);
}

.cl-feature-grid__cta svg {
    width: 12px;
    height: 14px;
    flex-shrink: 0;
}

/* Right column: sidebar with stacked cards */
.cl-feature-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Feature card (shared base) */
.cl-feature-grid__feature-card {
    flex: 1;
    padding: 32px;
    border-radius: 32px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Heading + icon row (side by side) */
.cl-feature-grid__feature-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Feature icon circle */
.cl-feature-grid__feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Named variants — palette pulled from Figma node 20:78 ("Smart Control") */
.cl-feature-grid__feature-icon--gold {
    background: var(--cl-accent-gold-bg);
    color: var(--cl-accent-gold-ink);
}

.cl-feature-grid__feature-icon--green {
    background: var(--cl-accent-green-bg);
    color: var(--cl-accent-green-ink);
}

.cl-feature-grid__feature-icon--blue {
    background: var(--cl-accent-blue-bg);
    color: var(--cl-accent-blue-ink);
}

/* Side-card rotation — aligned to token palette (green → gold → blue).
   Each card keeps its own accent color for icon chip + CTA, while the card
   background retains the Figma "soft → dark → soft" rhythm from node 20:78.
   Guarded by :not([class*="feature-card--"]) so legacy --time / --storm cards
   stay on their hand-tuned styling. */

/* Card backgrounds — soft → dark → soft */
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+1) {
    background: linear-gradient(143.5deg, rgba(1, 191, 90, 0.10) 0%, rgba(74, 144, 226, 0.08) 100%);
    border: 1px solid rgba(1, 191, 90, 0.20);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) {
    background: linear-gradient(143.5deg, #0A0A0A 0%, #272728 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+3) {
    background: linear-gradient(143.5deg, rgba(74, 144, 226, 0.10) 0%, rgba(1, 191, 90, 0.06) 100%);
    border: 1px solid rgba(74, 144, 226, 0.20);
}

/* Icon chip rotation — green → gold → blue (uses the new #…33 tokens) */
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+1) .cl-feature-grid__feature-icon:not([class*="feature-icon--"]) {
    background: var(--cl-accent-green-bg);
    color: var(--cl-accent-green-ink);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) .cl-feature-grid__feature-icon:not([class*="feature-icon--"]) {
    background: var(--cl-accent-gold-bg);
    color: var(--cl-accent-gold-ink);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+3) .cl-feature-grid__feature-icon:not([class*="feature-icon--"]) {
    background: var(--cl-accent-blue-bg);
    color: var(--cl-accent-blue-ink);
}

/* Dark middle card: flip heading + body copy for legibility */
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) .cl-feature-grid__feature-heading {
    color: #ffffff;
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) .cl-feature-grid__feature-desc,
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) .cl-feature-grid__feature-desc p {
    color: rgba(255, 255, 255, 0.70);
}

/* CTA pill per position — borrow the card's accent */
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+1) .cl-feature-grid__feature-cta {
    color: var(--cl-accent-green);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+1) .cl-feature-grid__feature-cta:hover {
    background: var(--cl-accent-green);
    color: #ffffff;
    border-color: var(--cl-accent-green);
    box-shadow: 0 6px 16px rgba(1, 191, 90, 0.28);
}

.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) .cl-feature-grid__feature-cta {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--cl-accent-gold);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+2) .cl-feature-grid__feature-cta:hover {
    background: var(--cl-accent-gold);
    color: #0a0a0a;
    border-color: var(--cl-accent-gold);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.30);
}

.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+3) .cl-feature-grid__feature-cta {
    color: var(--cl-accent-blue);
}
.cl-feature-grid__feature-card:not([class*="feature-card--"]):nth-child(3n+3) .cl-feature-grid__feature-cta:hover {
    background: var(--cl-accent-blue);
    color: #ffffff;
    border-color: var(--cl-accent-blue);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.28);
}

/* Stat-card icons on city landings (Redmond et al): cycle orange → green → blue.
   ACF stores raw SVGs with hardcoded colors, so we force all stroked/filled
   elements (but NOT decorative fill="none"/stroke="none") to currentColor and
   drive the hue per card position. */
.cl-feature-grid__stat-card {
    color: var(--cl-accent-green);
}
.cl-feature-grid__stats .cl-feature-grid__stat-card:nth-child(3n+1) {
    color: var(--cl-accent-gold);
}
.cl-feature-grid__stats .cl-feature-grid__stat-card:nth-child(3n+2) {
    color: var(--cl-accent-green);
}
.cl-feature-grid__stats .cl-feature-grid__stat-card:nth-child(3n+3) {
    color: var(--cl-accent-blue);
}
/* Many ACF-stored SVGs (e.g. Font Awesome) ship paths with NO fill attribute,
   which defaults to black. Force shape primitives to currentColor and restore
   fill:none only for elements that were explicitly decorative. */
.cl-feature-grid__stat-card svg path,
.cl-feature-grid__stat-card svg circle,
.cl-feature-grid__stat-card svg rect,
.cl-feature-grid__stat-card svg polygon,
.cl-feature-grid__stat-card svg polyline,
.cl-feature-grid__stat-card svg ellipse,
.cl-feature-grid__stat-card svg line,
.cl-feature-grid__stat-card svg g {
    fill: currentColor !important;
}
.cl-feature-grid__stat-card svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}
.cl-feature-grid__stat-card svg [fill="none"] {
    fill: none !important;
}

.cl-feature-grid__feature-icon svg {
    width: 20px;
    height: 20px;
    color: currentColor;
    path{fill: currentColor;}
}

/* Feature card heading */
.cl-feature-grid__feature-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.48px;
    color: #0A0A0A;
    margin: 0;
}

/* Feature card description */
.cl-feature-grid__feature-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #3F3F46;
    margin: 0;
    flex: 1;
}

.cl-feature-grid__feature-desc p {
    margin: 0 0 8px 0;
}

.cl-feature-grid__feature-desc p:last-child {
    margin-bottom: 0;
}

/* Side-card CTA — inherits the nth-child accent color via currentColor */
.cl-feature-grid__feature-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin-top: 4px;
    border-radius: var(--cl-radius-pill);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid currentColor;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cl-feature-grid__feature-cta svg {
    width: 12px;
    height: 14px;
    flex-shrink: 0;
}

.cl-feature-grid__feature-card:nth-child(3n+1) .cl-feature-grid__feature-cta {
    color: var(--cl-accent-gold-ink);
}
.cl-feature-grid__feature-card:nth-child(3n+2) .cl-feature-grid__feature-cta {
    color: var(--cl-accent-green-ink);
}
.cl-feature-grid__feature-card:nth-child(3n+3) .cl-feature-grid__feature-cta {
    color: var(--cl-accent-blue-ink);
}

.cl-feature-grid__feature-card:nth-child(3n+1) .cl-feature-grid__feature-cta:hover {
    background: var(--cl-accent-gold);
    color: #0a0a0a;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.28);
    text-decoration: none;
}
.cl-feature-grid__feature-card:nth-child(3n+2) .cl-feature-grid__feature-cta:hover {
    background: var(--cl-accent-green);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(1, 191, 90, 0.28);
    text-decoration: none;
}
.cl-feature-grid__feature-card:nth-child(3n+3) .cl-feature-grid__feature-cta:hover {
    background: var(--cl-accent-blue);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.28);
    text-decoration: none;
}

/* --- Time-Based Control card --- */
.cl-feature-grid__feature-card--time {
    background: linear-gradient(180deg, rgba(1, 191, 90, 0.10) 0%, rgba(74, 226, 255, 0.10) 100%);
    border: none;
}

/* Progress bar (Time-Based Control) */
.cl-feature-grid__progress {
    margin-top: auto;
}

.cl-feature-grid__progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cl-feature-grid__progress-labels span:first-child {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #52525B;
}

.cl-feature-grid__progress-status {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #01BF5A;
}

.cl-feature-grid__progress-track {
    width: 100%;
    height: 12px;
    border-radius: 9999px;
    background: #E4E4E7;
    overflow: hidden;
}

.cl-feature-grid__progress-fill {
    height: 100%;
    width: 75%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #01BF5A 0%, #4AE2FF 100%);
}

/* --- Storm Watch card --- */
.cl-feature-grid__feature-card--storm {
    background: linear-gradient(160deg, #0A0A0A 0%, #272728 100%);
    border: none;
}

.cl-feature-grid__feature-card--storm .cl-feature-grid__feature-heading {
    color: #ffffff;
}

.cl-feature-grid__feature-card--storm .cl-feature-grid__feature-desc {
    color: #ffffff;
}

/* Storm Watch status indicator */
.cl-feature-grid__storm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.cl-feature-grid__storm-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #FFC107;
    flex-shrink: 0;
}

.cl-feature-grid__storm-status span:last-child {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFC107;
}

/* ============================================
   4b. Feature Grid — Responsive (mobile)
   ============================================ */

@media (max-width: 1024px) {
    .cl-feature-grid__main {
        grid-template-columns: 1fr;
    }

    .cl-feature-grid__heading {
        font-size: 48px;
        line-height: 48px;
    }

    .cl-feature-grid__bolt {
        width: 42px;
        height: 48px;
    }

    .cl-feature-grid__dashboard {
        min-height: 400px;
    }

    .cl-feature-grid__overlay {
        min-height: 400px;
        padding: 24px;
    }

    .cl-feature-grid__stats {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cl-feature-grid__stat-card {
        width: calc(50% - 6px);
        min-width: 140px;
    }
}

@media (max-width: 640px) {
    .cl-feature-grid {
        padding: 64px 0;
    }

    .cl-feature-grid__header {
        margin-bottom: 48px;
    }

    .cl-feature-grid__heading {
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -0.90px;
        gap: 10px;
    }

    .cl-feature-grid__bolt {
        width: 32px;
        height: 36px;
    }

    .cl-feature-grid__overlay-heading {
        font-size: 24px;
        line-height: 28px;
    }

    .cl-feature-grid__overlay-desc {
        font-size: 16px;
        line-height: 26px;
    }

    .cl-feature-grid__stat-card {
        width: 100%;
    }

    .cl-feature-grid__sidebar {
        flex-direction: column;
    }

    .cl-feature-grid__feature-card {
        padding: 24px;
    }
}

/* ============================================
   5. Power Sharing (Feature List)
   FE-010: EV charging distribution — 2-column layout
   Left: text content with badge, heading, description, features, CTA
   Right: image placeholder with frosted glass circuit load overlay
   Figma: node 20:169, 1440×856, white bg
   ============================================ */

.cl-feature-list {
    padding: 112px 0;
    background: #fff;
}

.cl-feature-list__grid {
    display: grid;
    grid-template-columns: 1fr 576px;
    gap: 64px;
    align-items: center;
}

/* Left column: text content */
.cl-feature-list__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Badge */
.cl-feature-list__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
}

.cl-feature-list__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--cl-radius-pill);
    background: #01BF5A;
    flex-shrink: 0;
}

.cl-feature-list__badge span {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.40px;
    color: #71717A;
}

/* Heading */
.cl-feature-list__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 1.20px;
    color: #0A0A0A;
    margin: 0;
}

/* Description — green left border per Figma */
.cl-feature-list__description {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #52525B;
    margin: 0;
    border-left: 3px solid #01BF5A;
    padding-left: 20px;
}

/* Feature items list */
.cl-feature-list__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cl-feature-list__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Green circle icon — light bg, green check per Figma */
.cl-feature-list__item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--cl-radius-pill);
    background: rgba(1, 191, 90, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.cl-feature-list__item-icon svg {
    width: 12px;
    height: 14px;
}

.cl-feature-list__item-text {
    flex: 1;
}

.cl-feature-list__item-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.36px;
    color: #0A0A0A;
    margin: 0 0 4px;
}

.cl-feature-list__item-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #52525B;
    margin: 0;
}

/* CTA — ghost outline pill that fills on hover */
.cl-feature-list__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 24px;
    border-radius: var(--cl-radius-pill);
    background: transparent;
    border: 1.5px solid #0A0A0A;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0A0A0A;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-feature-list__cta:hover,
.cl-feature-list__cta:focus,
.cl-feature-list__cta:active {
    text-decoration: none;
}

.cl-feature-list__cta:hover {
    background: var(--cl-accent-green);
    border-color: var(--cl-accent-green);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(1, 191, 90, 0.26);
}

.cl-feature-list__cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(1, 191, 90, 0.22);
}

.cl-feature-list__cta:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(1, 191, 90, 0.32),
        0 10px 24px rgba(1, 191, 90, 0.20);
}

.cl-feature-list__cta svg {
    width: 14px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cl-feature-list__cta:hover svg {
    transform: translateX(4px);
}

/* Right column: image area */
.cl-feature-list__image-wrap {
    position: relative;
}

.cl-feature-list__image {
    border-radius: 48px;
    overflow: hidden;
    height: 600px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
}

.cl-feature-list__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.cl-feature-list__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating circuit load card */
.cl-feature-list__float-card {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    padding: 20px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cl-feature-list__float-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cl-feature-list__float-card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #ffffff;
}

.cl-feature-list__float-card-value {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #01BF5A;
}

/* Progress bars */
.cl-feature-list__float-card-bars {
    display: flex;
    gap: 12px;
}

.cl-feature-list__bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cl-feature-list__bar-label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    line-height: 14px;
}

.cl-feature-list__bar-track {
    height: 8px;
    border-radius: var(--cl-radius-pill);
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.cl-feature-list__bar-fill {
    height: 100%;
    border-radius: var(--cl-radius-pill);
    background: #01BF5A;
    transition: width 0.6s ease;
}

.cl-feature-list__bar-fill--low {
    background: rgba(1, 191, 90, 0.5);
}

/* ============================================
   6. Calculator — FE-011 Figma-matched (node 20:221)
   Section bg: #F5F5F7, container 1280px max
   Form card: white, r:32, shadow, Oswald labels
   Results card: dark gradient bg, white text
   Investment card: white bg, green tax credit
   ============================================ */

.cl-calculator {
    padding: 112px 0;
    background: #F5F5F7;
}

.cl-calculator__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.cl-calculator__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 1.20px;
    color: #0A0A0A;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.cl-calculator__description {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #52525B;
}

.cl-calculator__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Form Card ── */
.cl-calculator__form {
    background: #ffffff;
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cl-calculator__form-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.48px;
    color: #0A0A0A;
    margin: 0 0 32px;
    text-transform: uppercase;
}

.cl-calculator__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Labels — Oswald 700 14px ── */
.cl-calculator__label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.28px;
    color: #3F3F46;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* ── Monthly Bill Input ── */
.cl-calculator__input-wrap {
    display: flex;
    align-items: center;
    height: 64px;
    background: #ffffff;
    border: 2px solid #E4E4E7;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.cl-calculator__input-wrap:focus-within {
    border-color: #01BF5A;
}

.cl-calculator__input-prefix {
    padding: 0 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #A1A1AA;
    user-select: none;
    flex-shrink: 0;
}

.cl-calculator__input {
    flex: 1;
    border: none;
    padding: 0 16px 0 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    background: transparent;
    outline: none;
    -moz-appearance: textfield;
}

.cl-calculator__input::-webkit-inner-spin-button,
.cl-calculator__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── System Size Slider ── */
.cl-calculator__slider-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-calculator__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: #E4E4E7;
    outline: none;
    cursor: pointer;
}

.cl-calculator__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #01BF5A;
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

.cl-calculator__slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.cl-calculator__slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #01BF5A;
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cl-calculator__slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

.cl-calculator__slider-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #71717A;
    cursor: pointer;
    transition: color 0.2s, font-weight 0.2s;
}

.cl-calculator__slider-label.active {
    font-weight: 700;
    color: #01BF5A;
}

/* ── Powerwall Toggle (Yes/No buttons) ── */
.cl-calculator__toggle-group {
    display: flex;
    gap: 16px;
}

.cl-calculator__toggle-btn {
    flex: 1;
    height: 52px;
    border: 2px solid #E4E4E7;
    border-radius: 12px;
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #52525B;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cl-calculator__toggle-btn:hover {
    border-color: #01BF5A;
}

.cl-calculator__toggle-btn.active {
    background: #01BF5A;
    border-color: #01BF5A;
    color: #ffffff;
}

/* ── Results Side ── */
.cl-calculator__results-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Estimated Savings Card (green-to-blue gradient per Figma) ── */
.cl-calculator__results {
    background: linear-gradient(165deg, #01BF5A 0%, #4A90E2 100%);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.10), 0 20px 25px rgba(0, 0, 0, 0.10);
}

.cl-calculator__results-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.cl-calculator__results-icon {
    flex-shrink: 0;
}

.cl-calculator__results-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.48px;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
}

.cl-calculator__result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.cl-calculator__result--bordered {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.cl-calculator__result-label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

.cl-calculator__result-value {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #ffffff;
    line-height: 36px;
    letter-spacing: 0.60px;
    font-size: 30px;
}

.cl-calculator__result-value--lg {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0.72px;
}

/* ── Investment Card (white bg) ── */
.cl-calculator__investment {
    background: #ffffff;
    border-radius: 32px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cl-calculator__investment-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0A0A0A;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.cl-calculator__investment-items {
    display: flex;
    flex-direction: column;
}

.cl-calculator__investment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #E4E4E7;
}

.cl-calculator__investment-item--credit {
    border-bottom: none;
}

.cl-calculator__investment-item--credit .cl-calculator__investment-name,
.cl-calculator__investment-item--credit .cl-calculator__investment-cost {
    color: #01BF5A;
}

.cl-calculator__investment-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #52525B;
}

.cl-calculator__investment-cost {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
}

/* Net Investment total row */
.cl-calculator__investment-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0;
    border-top: 1px solid #E4E4E7;
    margin-top: 4px;
}

.cl-calculator__investment-total-label {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.36px;
    color: #0A0A0A;
}

.cl-calculator__investment-total-value {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.36px;
    color: #0A0A0A;
}

/* Payback Period footer */
.cl-calculator__investment-footer {
    text-align: center;
    margin-top: 16px;
}

.cl-calculator__investment-footer span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #71717A;
}

/* ============================================
   7. Local Projects — FE-012 Figma-matched (node 20:312)
   Section: white bg, 128px vertical padding, 1280px container / 1216px inner
   Heading: Oswald 700 48px, lh:48, ls:0.96px, centered, #0A0A0A
   Subheading: Roboto 400 18px, lh:28, #52525B
   Cards: 384×404, r:32, bg #F5F5F7, shadow 0 1px 2px rgba(0,0,0,0.05)
     Top half: image 384×192, top-rounded only (r:32 top, r:0 bottom)
     Bottom half: content 384×212, padding 32px
       Location: Roboto 700 12px, lh:16, ls:0.60px, #01BF5A, uppercase
       System: Roboto 400 14px, lh:20, #71717A
       Title: Oswald 700 20px, lh:28, ls:0.40px, #0A0A0A
       Desc: Roboto 400 14px, lh:20, #52525B, 2-line clamp
       Stat: Roboto 500 14px, lh:20, #0A0A0A + green check SVG 16×14
   ============================================ */

.cl-projects {
    padding: 128px 0;
    background: #fff;
}

.cl-projects__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 80px;
}

.cl-projects__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.96px;
    color: #0A0A0A;
    margin: 0 0 24px;
}

.cl-projects__description {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #52525B;
    margin: 0;
}

.cl-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 384px);
    gap: 32px;
    justify-content: center;
}

.cl-projects__card {
    width: 384px;
    height: 404px;
    background: #F5F5F7;
    border-radius: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.cl-projects__card:hover {
    transform: translateY(-4px);
}

.cl-projects__card-image {
    width: 100%;
    height: 192px;
    overflow: hidden;
    border-radius: 32px 32px 0 0;
}

.cl-projects__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cl-projects__card-body {
    padding: 24px 32px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cl-projects__card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.cl-projects__card-location {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.60px;
    color: #01BF5A;
    text-transform: uppercase;
}

.cl-projects__card-system {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #71717A;
}

.cl-projects__card-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.40px;
    color: #0A0A0A;
    margin: 0 0 4px;
}

.cl-projects__card-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #52525B;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-projects__card-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.cl-projects__card-stat svg {
    width: 16px;
    height: 14px;
    flex-shrink: 0;
}

.cl-projects__card-stat span {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #0A0A0A;
}

/* ============================================
   8. Testimonials
   Figma: #f5f5f7 bg, padding 128px
   Heading: Oswald 48px 700, ls 0.96em
   Cards: white bg, 32px radius, 32px padding
   Stars: 5x amber stars (4px gap)
   Quote: Roboto 16px 400, lh 26px, color #3f3f46
   Author: image + name + location
   ============================================ */

.cl-testimonials {
    padding: 128px 0;
    background: var(--cl-bg-alt);
}

.cl-testimonials__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.96px;
    color: var(--cl-primary);
    text-align: center;
    margin: 0 0 64px;
}

.cl-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1216px;
    margin: 0 auto;
}

.cl-testimonials__card {
    background: #fff;
    border-radius: 32px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 272px;
}

.cl-testimonials__stars {
    display: flex;
    gap: 4px;
}

.cl-testimonials__stars svg {
    width: 18px;
    height: 16px;
    flex-shrink: 0;
}

.cl-testimonials__quote {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #3F3F46;
    margin: 0;
    border: none;
    padding: 0;
    font-style: normal;
    flex: 1;
}

.cl-testimonials__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.cl-testimonials__author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: var(--cl-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--cl-primary);
    flex-shrink: 0;
}

.cl-testimonials__author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-testimonials__author-name {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #0A0A0A;
}

.cl-testimonials__author-location {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #71717A;
}

/* ============================================
   9. FAQ
   Figma: white bg, padding 128px, 2-col grid (text left, accordion right)
   Badge: black dot, 14px Roboto 700, ls 1.4em, color #71717a
   Heading: Oswald 48px 700, ls 0.96em
   Accordion: #f5f5f7 bg, 24px radius
   Question: Oswald 20px 700, ls 0.4em, color #0a0a0a
   ============================================ */

.cl-faq {
    padding: 112px 0;
    background: #fff;
}

.cl-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.cl-faq__header {
    max-width: 576px;
}

.cl-faq__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.cl-faq__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #01BF5A;
    flex-shrink: 0;
}

.cl-faq__badge span {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #71717A;
}

.cl-faq__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.96px;
    color: #0A0A0A;
    margin: 0 0 24px;
}

.cl-faq__description {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--cl-text);
}

.cl-faq__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cl-faq__item {
    background: var(--cl-bg-alt);
    border-radius: var(--cl-radius-sm);
    overflow: hidden;
}

/* Animate using grid-template-rows 0fr → 1fr so the answer expands to its
   natural content height — no max-height cap truncating long answers. */
.cl-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0 32px;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.cl-faq__item.is-open .cl-faq__answer {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 0 32px 32px;
}

.cl-faq__answer-inner {
    min-height: 0;          /* required for grid-row collapse to reach 0 */
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: var(--cl-text);
}

.cl-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 32px;
    border: none;
    background: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #0A0A0A;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.cl-faq__question:focus,
.cl-faq__question:active {
    outline: none;
}

.cl-faq__question:hover {
    background: rgba(0, 0, 0, 0.02);
}

.cl-faq__question-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 9999px;
    transition: transform 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cl-faq__question-icon svg {
    width: 16px;
    height: 16px;
}

.cl-faq__item.is-open .cl-faq__question-icon {
    transform: rotate(180deg);
}

/* ============================================
   10. Final CTA
   Figma: #0a0a0a bg, padding 96px top/bottom, 272px side for image
   Heading: Oswald 60px 700, ls 1.2em, white
   Desc: Roboto 20px 300, color #a1a1aa
   Input: white/0.1 bg, pill radius, 24px pad, #a1a1aa placeholder
   Button: #01bf5a bg, Oswald 14px 700, ls 0.7em, white text
   Footer: Roboto 14px 400, color #71717a
   ============================================ */

.cl-cta {
    position: relative;
    background-color: var(--cl-primary);
    padding: 96px 0;
    overflow: hidden;
}

.cl-cta__bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cl-cta__bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
}

.cl-cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 896px;
    margin: 0 auto;
}

.cl-cta__heading {
    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 1.2px;
    color: #fff;
    margin: 0;
}

.cl-cta__description {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    color: #A1A1AA;
    margin: 0;
}

.cl-cta__actions {
    display: flex;
    justify-content: center;
    max-width: 520px;
    margin: 16px auto 0;
}

.cl-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    padding: 0 32px;
    white-space: nowrap;
    border-radius: 9999px;
    background: var(--cl-accent-green);
    color: #fff;
    border: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.30), 0 10px 15px rgba(0, 0, 0, 0.30);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.cl-cta__button:hover,
.cl-cta__button:focus,
.cl-cta__button:active {
    text-decoration: none;
    color: #fff;
}

.cl-cta__button:hover {
    transform: translateY(-2px);
    background: #00A34D;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.32), 0 16px 24px rgba(1, 191, 90, 0.28);
}

.cl-cta__button:active {
    transform: translateY(0);
}

.cl-cta__footer {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #71717A;
    margin: 8px 0 0;
}

/* ============================================
   11. Responsive
   ============================================ */

@media (max-width: 1024px) {
    .cl-hero {
        height: auto;
        min-height: 600px;
        padding: 80px 0;
    }

    .cl-hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .cl-hero__bg-left {
        display: none;
    }

    .cl-hero__bg-right {
        left: 0;
        width: 100%;
    }

    .cl-hero__image-wrap {
        width: 100%;
        max-width: 568px;
        justify-self: center;
    }

    .cl-hero__heading {
        font-size: 48px;
        letter-spacing: 1.44px;
        line-height: 52px;
    }

    .cl-feature-grid__main {
        grid-template-columns: 1fr;
    }

    .cl-feature-grid__dashboard {
        min-height: 480px;
    }

    .cl-feature-grid__sidebar {
        flex-direction: row;
    }

    .cl-feature-grid__stats {
        flex-wrap: wrap;
    }

    .cl-feature-grid__stat-card {
        min-width: 140px;
    }

    .cl-feature-list__grid {
        grid-template-columns: 1fr;
    }

    .cl-feature-list__image {
        height: 400px;
    }

    .cl-calculator__grid {
        grid-template-columns: 1fr;
    }

    .cl-faq__grid {
        grid-template-columns: 1fr;
    }

    .cl-projects__grid {
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }

    .cl-projects__card {
        width: 100%;
        height: auto;
    }

    .cl-testimonials__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .cl-hero {
        height: auto;
        min-height: 500px;
        padding: 60px 0;
    }

    .cl-hero__heading {
        font-size: 36px;
        letter-spacing: 1.44px;
        line-height: 40px;
    }

    .cl-hero__cta {
        padding: 12px 24px;
        min-height: 52px;
    }

    .cl-feature-grid__heading {
        font-size: 48px;
        letter-spacing: -1.20px;
        line-height: 48px;
    }

    .cl-feature-grid__overlay-heading {
        font-size: 28px;
        line-height: 32px;
    }

    .cl-feature-grid__overlay-desc {
        font-size: 16px;
        line-height: 24px;
    }

    .cl-feature-grid__stat-card {
        min-width: 100px;
    }

    .cl-feature-grid__stat-value {
        font-size: 24px;
    }

    .cl-feature-grid__sidebar {
        flex-direction: column;
    }

    .cl-feature-list__heading {
        font-size: 36px;
        letter-spacing: 0.72px;
        line-height: 36px;
    }
    .cl-calculator__heading,
    .cl-cta__heading {
        font-size: 36px;
        letter-spacing: 0.72px;
        line-height: 36px;
    }

    .cl-projects__heading,
    .cl-testimonials__heading,
    .cl-faq__heading {
        font-size: 32px;
        letter-spacing: 0.64px;
        line-height: 32px;
    }

    .cl-projects__grid {
        grid-template-columns: 1fr;
    }

    .cl-projects__card {
        width: 100%;
        height: auto;
    }

    .cl-testimonials__grid {
        grid-template-columns: 1fr;
    }

    .cl-cta__actions {
        max-width: 100%;
    }

    .cl-container {
        padding: 0 20px;
    }

    .cl-calculator__select-group {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .cl-container {
        padding: 0 16px;
    }

    .cl-hero__float-stat {
        right: 0;
        bottom: -16px;
    }

    .cl-hero__float-stat-number {
        font-size: 24px;
        line-height: 28px;
    }
}

/* ============================================
   12. Compatibility — classes used by PHP partials
   These support existing HTML in section partials
   ============================================ */

/* Buttons */
.cl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--cl-radius-pill);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cl-btn--primary {
    background: var(--cl-primary);
    color: #fff;
}

.cl-btn--primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.cl-btn__arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cl-btn:hover .cl-btn__arrow {
    transform: translateX(4px);
}


/* CTA form input (variant class) */
.cl-cta__form-input {
    flex: 1;
    padding: 0 24px;
    height: 58px;
    border: none;
    border-radius: 9999px;
    background: #fff;
    color: #0A0A0A;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    outline: none;
}

.cl-cta__form-input::placeholder {
    color: #A1A1AA;
}

/* Feature List - item text (retained from Power Sharing section) */
.cl-feature-list__item-text {
    flex: 1;
}

/* Calculator - slider track fill (Webkit progressive) */
.cl-calculator__slider {
    background: #E4E4E7;
}

/* Local Projects - meta (duplicated from Section 7 for specificity) */
/* Styles are now defined inline in Section 7 above */

/* FAQ question text spans — Oswald (has cl- class, must override global span rule) */
.cl-faq__question-text {
    font-family: 'Oswald', sans-serif;
    flex: 1;
}