/* Clearer energy components and refreshed blue action controls. */
.energy-component-label {
    position:absolute; left:56%; top:3%; transform:translateX(-50%);
    padding:4px 9px; border:1px solid #f4d4bb; border-radius:7px;
    background:#fffaf5; color:#934513; font-size:clamp(9px,1vw,12px);
    font-weight:600; line-height:1.3; white-space:nowrap;
}
.energy-layout-note {
    margin:4px 24px 16px; color:#526477; font-size:11px; line-height:1.5;
    text-align:center;
}
.energy-junction {
    border-color:#bed2ed; border-radius:12px; background:linear-gradient(150deg,#fff,#edf4ff);
    box-shadow:0 5px 16px #183e7112,inset 0 1px 0 #fff;
}

/* Keep existing labels, click handlers and loading/disabled behaviour. */
.primary-cta-btn, #analyzeBtn, #b2cStepDashboard .primary-cta-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:14px;
    min-height:56px; padding:13px 22px; border:1px solid #1752ac; border-radius:14px;
    background:linear-gradient(130deg,#123f87 0%,#1b5fc8 65%,#246bd7 100%);
    color:#fff; font-size:15px; font-weight:600; line-height:1.5; text-transform:none;
    text-decoration:none; box-shadow:0 7px 17px #1859b724,inset 0 1px 0 #ffffff38;
    transition:background .18s ease,box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
#analyzeBtn #analyseButtonArrow,
.landing-guide .primary-cta-btn > span[aria-hidden] {
    display:inline-flex; flex-shrink:0; align-items:center; justify-content:center;
    width:30px; height:30px; margin:0; border-radius:9px; border:1px solid #ffffff30;
    background:#ffffff15; font-size:20px; font-weight:400; line-height:1;
}
#analyzeBtn #analyseButtonArrow[hidden] { display:none; }
.primary-cta-btn:not(#analyzeBtn):not(.landing-guide .primary-cta-btn)::after {
    content:""; flex-shrink:0; display:block; width:28px; height:28px; border-radius:8px;
    border:1px solid #ffffff30; background-color:#ffffff15;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
    background-size:19px; background-position:center; background-repeat:no-repeat;
}
.primary-cta-btn:disabled::after { display:none; }
.secondary-btn, .q-btn, .q-card a.q-btn, .q-card.recommended .q-btn {
    min-height:50px; padding:13px 20px; border:1px solid #becfe4; border-radius:13px;
    background:linear-gradient(155deg,#fff,#eef4fc); color:#204d88; font-size:14px;
    line-height:1.5; font-weight:600; text-transform:none;
    box-shadow:0 3px 9px #163f7210,inset 0 1px 0 #fff;
    transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease,background .18s ease;
}

/* Scenario choices look and behave like a set of selectable controls. */
.energy-scenes {
    gap:7px; padding:7px; border:1px solid #e0e8f2; border-radius:16px;
    background:linear-gradient(145deg,#f3f7fc,#edf2f8);
}
.energy-scenes button {
    min-height:50px; padding:10px 9px; border:1px solid #d9e3f0; border-radius:10px;
    background:linear-gradient(165deg,#fff,#f6f9fd); color:#344b66;
    font-size:12px; font-weight:600; line-height:1.45;
    box-shadow:0 2px 4px #1c3e6410,inset 0 1px 0 #fff;
    transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.energy-scenes button[aria-pressed=true] {
    border-color:#1859b7; background:linear-gradient(135deg,#174d9e,#286acf); color:#fff;
    box-shadow:0 4px 10px #1859b72b,inset 0 1px 0 #ffffff30;
}
.hero-energy .energy-scenes button:last-child { grid-column:1/-1; }
.energy-scenes button[data-scene]::before {
    content:""; display:inline-block; width:6px; height:6px; margin:0 7px 1px 0;
    border:1.5px solid currentColor; border-radius:50%; vertical-align:middle;
}
.energy-scenes button[data-scene][aria-pressed=true]::before {
    background:#fff; box-shadow:0 0 0 3px #ffffff20;
}
.energy-event-buttons button small { font-size:10px; opacity:.85; }
.energy-motion, .energy-tour-play {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    min-height:44px; padding:10px 14px; border:1px solid #bfcee1; border-radius:11px;
    background:linear-gradient(160deg,#fff,#f0f5fc); color:#2c527f;
    font-size:12px; line-height:1.4; font-weight:600; text-decoration:none;
    box-shadow:0 2px 5px #1539660b;
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.energy-motion::before, .energy-tour-play::before {
    content:""; display:block; width:10px; height:12px; flex-shrink:0;
    background:linear-gradient(90deg,currentColor 0 30%,transparent 30% 70%,currentColor 70%);
}
.energy-motion[aria-pressed=true]::before, .energy-tour-play[aria-pressed=false]::before {
    background:currentColor; clip-path:polygon(10% 0,100% 50%,10% 100%);
}
.energy-motion:disabled::before, .energy-tour-play:disabled::before { display:none; }
.energy-motion:disabled, .energy-tour-play:disabled, .energy-scenes button:disabled {
    color:#647489; border-color:#dce4ee; background:#f1f4f8; box-shadow:none;
    opacity:1; cursor:default;
}
.primary-cta-btn:disabled, #analyzeBtn:disabled, #b2cStepDashboard .primary-cta-btn:disabled,
.secondary-btn:disabled, .q-btn:disabled {
    background:#637d9f; border-color:#637d9f; color:#fff; box-shadow:none;
    transform:none; opacity:1; cursor:wait;
}
:is(.primary-cta-btn,.secondary-btn,.q-btn,.energy-scenes button,.energy-motion,.energy-tour-play):focus-visible {
    outline:3px solid #174b97; outline-offset:4px;
}
@media (hover:hover) and (pointer:fine) {
    .primary-cta-btn:not(:disabled):hover, #analyzeBtn:not(:disabled):hover,
    #b2cStepDashboard .primary-cta-btn:not(:disabled):hover {
        background:linear-gradient(130deg,#123a7b,#1b58b6 65%,#2468cd);
        border-color:#103f88; transform:translateY(-2px);
        box-shadow:0 11px 23px #1859b731,inset 0 1px 0 #ffffff40;
    }
    .secondary-btn:not(:disabled):hover, .q-btn:not(:disabled):hover,
    .q-card:hover .q-btn:not(:disabled), .q-card.recommended:hover .q-btn:not(:disabled) {
        background:linear-gradient(155deg,#fff,#e6effc); border-color:#7198cc; color:#163f76;
        transform:translateY(-1px); box-shadow:0 5px 12px #163f721a;
    }
    .energy-scenes button:not(:disabled):not([aria-pressed=true]):hover,
    .energy-motion:not(:disabled):hover, .energy-tour-play:not(:disabled):hover {
        background:#e7effb; border-color:#97b3d8; color:#234e85;
        box-shadow:0 3px 7px #1c3e6415;
    }
}
.primary-cta-btn:not(:disabled):active, #analyzeBtn:not(:disabled):active,
#b2cStepDashboard .primary-cta-btn:not(:disabled):active {
    transform:translateY(0); box-shadow:0 2px 5px #1859b728,inset 0 2px 4px #09295724;
}
@media(max-width:600px) {
    .energy-layout-note { margin:4px 16px 14px; font-size:10px; }
    .energy-component-label { padding:3px 6px; }
    .energy-motion { margin-left:0; padding-left:14px; }
}
@media(max-width:400px) {
    .hero-energy .energy-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .energy-modes button { font-size:11px; }
    .primary-cta-btn, #analyzeBtn, #b2cStepDashboard .primary-cta-btn { font-size:14px; gap:10px; padding:13px 16px; }
}
@media(prefers-reduced-motion:reduce) {
    .primary-cta-btn, #analyzeBtn, #b2cStepDashboard .primary-cta-btn,
    .secondary-btn, .q-btn, .energy-scenes button, .energy-motion, .energy-tour-play { transition:none; }
    .primary-cta-btn:not(:disabled):hover, #analyzeBtn:not(:disabled):hover,
    #b2cStepDashboard .primary-cta-btn:not(:disabled):hover,
    .secondary-btn:not(:disabled):hover, .q-btn:not(:disabled):hover,
    .q-card:hover .q-btn:not(:disabled), .q-card.recommended:hover .q-btn:not(:disabled) { transform:none; }
}

/* Make the guide hub easy to find beside the SolarIQ wordmark. */
.brand-header { justify-content:flex-start; flex-wrap:wrap; gap:12px 24px; }
.brand-header .wordmark { flex-shrink:0; white-space:nowrap; }
.brand-header .header-note { margin-left:auto; }
.header-nav { display:flex; align-items:center; }
.header-guide-link {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:44px; padding:8px 16px; border:1px solid #b6cdea; border-radius:10px;
    background:#e9f1fd; color:#174b97; font-size:14px; font-weight:600;
    line-height:1.5; white-space:nowrap; text-decoration:none;
}
.header-guide-link:hover { background:#dce9fc; border-color:#799fd1; }
.header-guide-link:focus-visible { outline:3px solid #174b97; outline-offset:4px; }
@media(max-width:600px) {
    .brand-header { gap:12px; }
    .brand-header .header-note { display:none; }
    .header-guide-link { padding-inline:12px; }
}

/* Place the installer mark below the original SolarIQ header divider. */
.brand-installer {
    display:flex; align-items:center; gap:12px; width:max-content;
    margin-top:16px; color:#1859b7; text-decoration:none;
}
.brand-installer + .hero-content { padding-top:24px; }
/* Trim only the asset's empty canvas in the layout; keep the visible mark at its existing size. */
.brand-installer-art { display:block; flex:0 0 112px; width:112px; height:112px; overflow:hidden; }
.brand-installer-art img {
    display:block; width:160px; height:160px; max-width:none; object-fit:contain;
    transform:translate(-24px,-24px);
}
.brand-installer-caption { font-size:12px; line-height:1.5; }
.brand-installer-caption strong { display:block; font-size:14px; font-weight:700; }
.brand-installer:focus-visible { outline:3px solid #174b97; outline-offset:5px; }
.brand-installer:hover strong { text-decoration:underline; text-underline-offset:3px; }