/* ═══════════════════════════════════════════════════════════════════════
   GreenOps 101 — Base Component Styles
   Extracted from inline module CSS. Provides structural and component
   styling that polish.css then overrides for brand treatment.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --page-bg: #F7F9F1;
    --card-bg: #FFF;
    --section-alt: #E2E7DF;
    --text-primary: #243007;
    --text-secondary: #5A6A4F;
    --text-muted: #8A9A7E;
    --navy: #243007;
    --navy-mid: #243007;
    --navy-card: #243007;
    --navy-light: #2D3D0A;
    --teal: #93C01F;
    --teal-dark: #7BA019;
    --teal-muted: #DCE8B8;
    --teal-bg: rgba(147, 192, 31, 0.07);
    --teal-border: rgba(147, 192, 31, 0.25);
    --orange: #93C01F;
    --orange-light: #A8D020;
    --orange-bg: #F3F8E4;
    --orange-border: rgba(147, 192, 31, 0.25);
    --border: #D5DACE;
    --border-light: #E2E7DF;
    --track1: #93C01F;
    --track2: #A8D020;
    --track3: #93C01F;
    --correct: #16a34a;
    --wrong: #dc2626;
    --white: #FFF;
    --slate: #5A6A4F;
    --slate-mid: #8A9A7E;
    --slate-dim: #B7C4B1;
    --teal-light: #DCE8B8;
    --teal-glow: rgba(147, 192, 31, 0.15);
    --teal-subtle: rgba(147, 192, 31, 0.07);
    --grey-100: #F7F9F1;
    --grey-300: #D5DACE;
    --grey-500: #5A6A4F;
    --navy-raised: #2D3D0A;
    --navy-border: rgba(255, 255, 255, 0.07);
    --navy-mid-alt: #243007
    }

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
    }

html {
    scroll-behavior: smooth;
    font-size: 16px
    }

img, svg {
    display: block;
    max-width: 100%
    }

body {
    background: var(--page-bg);
    color: var(--text-primary);
    font-family: Inter, "Trebuchet MS", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
    }

.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFF;
    border-bottom: 1px solid rgba(147, 192, 31, 0.2);
    padding: 0 3rem;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 1rem
    }

.top-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #93C01F 0%, #A8D020 60%, #93C01F 100%)
    }

.nav-home {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(36, 48, 7, 0.7);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s;
    flex-shrink: 0
    }

.nav-home:hover {
    color: #243007
    }

.nav-sep {
    color: #5A6A4F
    }

.nav-module {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #243007;
    font-weight: 500
    }

.nav-track-pill {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 2px
    }

.track1-pill {
    background: rgba(147, 192, 31, 0.2);
    color: #DCE8B8
    }

.track2-pill {
    background: rgba(244, 162, 97, 0.2);
    color: #D5E3A8
    }

.track3-pill {
    background: rgba(147, 192, 31, 0.2);
    color: #D5E3A8
    }

.nav-progress {
    margin-left: auto;
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    color: #5A6A4F
    }

.module-hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 3rem 3rem;
    background: #243007;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
    }

.module-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(147, 192, 31, 0.08) 0%, transparent 65%);
    pointer-events: none
    }

.hero-num {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(5rem, 12vw, 10rem);
    color: rgba(255, 255, 255, 0.06);
    line-height: 1;
    position: absolute;
    right: 3rem;
    bottom: 0;
    font-weight: 400;
    user-select: none
    }

.module-eyebrow {
    font-family: Calibri, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #DCE8B8;
    margin-bottom: 0.75rem
    }

.module-title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.25rem
    }

.module-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 2rem
    }

.module-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap
    }

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem
    }

.meta-item .label {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6)
    }

.meta-item .value {
    font-size: 0.92rem;
    color: #FFF;
    font-weight: 500
    }

.complete-btn {
    font-family: Calibri, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.65rem 1.4rem;
    background: #93C01F;
    border: 2px solid #93C01F;
    color: #FFF;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 700
    }

.complete-btn:hover {
    background: var(--teal-dark);
    border-color: var(--teal-dark)
    }

.complete-btn.done {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: rgba(36, 48, 7, 0.7);
    cursor: default
    }

.objectives-strip {
    background: var(--section-alt);
    padding: 2.5rem 3rem
    }

.objectives-heading {
    font-family: Calibri, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #DCE8B8;
    margin-bottom: 1.5rem;
    font-weight: 700
    }

.objectives-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 0.85rem;
    max-width: 1160px
    }

.objectives-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 0.85rem 1rem;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--teal)
    }

.obj-num {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    color: #93C01F;
    font-weight: 700;
    letter-spacing: 0.1em;
    flex-shrink: 0;
    padding-top: 0.12rem
    }

.module-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem 2rem
    }

.content-section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--border-light)
    }

.content-section:last-child {
    border-bottom: none
    }

.section-label {
    font-family: Calibri, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: 0.65rem;
    display: block;
    font-weight: 700
    }

.section-title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem
    }

.section-intro {
    font-size: 1.12rem;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 780px;
    margin-bottom: 2rem
    }

.card-grid {
    display: grid;
    gap: 1px;
    background: var(--border)
    }

.card-grid-2 {
    grid-template-columns: 1fr 1fr
    }

.card-grid-3 {
    grid-template-columns: repeat(3, 1fr)
    }

.card-grid-4 {
    grid-template-columns: repeat(4, 1fr)
    }

.card-grid-auto {
    display: grid;
    gap: 1px;
    background: var(--border);
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr))
    }

.card {
    background: var(--card-bg);
    padding: 1.75rem;
    position: relative
    }

.card-title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.65rem
    }

.card-body {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.7
    }

.card-label {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block
    }

.card h4 {
    font-weight: 600;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.35
    }

.card p {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.65
    }

.card-accent-p {
    border-top: 3px solid var(--teal)
    }

.card-accent-o {
    border-top: 3px solid var(--orange-light)
    }

.card-accent-t {
    border-top: 3px solid var(--orange)
    }

.stat-strip {
    display: grid;
    gap: 1px;
    background: var(--border);
    margin: 2.25rem 0;
    border-radius: 3px;
    overflow: hidden
    }

.stat-strip.cols-3 {
    grid-template-columns: repeat(3, 1fr)
    }

.stat-strip.cols-4 {
    grid-template-columns: repeat(4, 1fr)
    }

.stat-cell {
    background: var(--card-bg);
    padding: 2rem 1.5rem;
    text-align: center;
    border-top: 3px solid var(--cell-accent, var(--teal))
    }

.stat-num {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    color: var(--cell-accent, var(--teal-dark));
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block
    }

.stat-label {
    font-family: Calibri, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.5;
    display: block
    }

.viz-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--teal);
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07)
    }

.viz-header {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--section-alt)
    }

.viz-header-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0
    }

.viz-title {
    font-family: Calibri, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-dark);
    font-weight: 700
    }

.viz-body {
    padding: 1.25rem 1.5rem 1rem
    }

.callout {
    padding: 1.35rem 1.75rem;
    margin: 1.75rem 0;
    border-left: 4px solid var(--teal);
    background: var(--teal-bg)
    }

.callout-warning {
    border-left-color: var(--orange);
    background: var(--orange-bg)
    }

.callout-key {
    border-left-color: var(--teal-dark);
    background: var(--teal-bg)
    }

.callout-title {
    font-family: Calibri, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7BA019;
    font-weight: 700;
    display: block;
    margin-bottom: 0.6rem
    }

.callout-warning .callout-title {
    color: #7BA019
    }

.callout p {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.72
    }

.pause-reflect {
    background: var(--section-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2rem 3rem
    }

.pause-label {
    font-family: Calibri, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block
    }

.pause-intro {
    font-size: 0.97rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    font-style: italic
    }

.pause-q {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.65;
    padding: 0.85rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--teal-dark);
    margin-bottom: 0.5rem
    }

.pause-q-num {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    color: var(--teal-dark);
    font-weight: 700;
    flex-shrink: 0;
    padding-top: 0.2rem;
    min-width: 1.4rem
    }

.kc-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 2.25rem;
    margin: 0.5rem 0
    }

.kc-label {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-dark);
    font-weight: 700;
    margin-bottom: 1rem
    }

.kc-q {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1.5rem
    }

.kc-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem
    }

.kc-option {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: var(--page-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: Inter, "Trebuchet MS", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.55;
    transition: all 0.15s
    }

.kc-option:hover {
    border-color: var(--teal);
    background: var(--teal-bg)
    }

.kc-option.selected-correct {
    background: rgba(22, 163, 74, 0.08);
    border-color: var(--correct)
    }

.kc-option.selected-wrong {
    background: rgba(220, 38, 38, 0.07);
    border-color: var(--wrong)
    }

.kc-opt-key {
    font-family: Calibri, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 1.2rem;
    padding-top: 0.1rem
    }

.kc-feedback {
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.7;
    border-left: 3px solid;
    display: none
    }

.kc-correct {
    background: rgba(22, 163, 74, 0.07);
    border-left-color: var(--correct);
    color: var(--text-primary)
    }

.kc-wrong {
    background: rgba(220, 38, 38, 0.06);
    border-left-color: var(--wrong);
    color: var(--text-primary)
    }

.kc-reveal {
    display: none;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    background: var(--teal-bg);
    border-left: 3px solid var(--teal-dark);
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.72
    }

.module-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    gap: 1rem;
    flex-wrap: wrap
    }

.nav-btn {
    display: inline-flex;
    flex-direction: column;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border);
    background: var(--page-bg);
    text-decoration: none;
    transition: all 0.15s;
    color: inherit
    }

.nav-btn:hover {
    border-color: var(--teal-dark);
    background: var(--teal-bg)
    }

.nav-btn.next {
    text-align: right
    }

.nav-btn-label {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block
    }

.nav-btn-title {
    font-size: 0.97rem;
    color: var(--text-primary);
    font-weight: 500;
    display: block;
    margin-top: 0.15rem
    }

.nav-btn.next .nav-btn-label, .nav-btn.next .nav-btn-title {
    color: var(--teal-dark)
    }

.takeaways {
    background: #243007;
    padding: 2.5rem 3rem
    }

.takeaways-heading {
    font-family: Calibri, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #DCE8B8;
    font-weight: 700;
    margin-bottom: 1.5rem
    }

.takeaway-list {
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    width: 100%
    }

.takeaway-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #243007;
    border-top: 2px solid rgba(147, 192, 31, 0.4);
    transition: background 0.15s
    }

.takeaway-item:hover {
    background: #2D3D0A
    }

.takeaway-icon {
    color: #93C01F;
    font-size: 0.65rem;
    flex-shrink: 0;
    padding-top: 0.4rem
    }

.takeaway-body strong {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 0.4rem;
    line-height: 1.35
    }

.takeaway-body p {
    font-size: 0.95rem;
    color: rgba(36, 48, 7, 0.75);
    line-height: 1.65
    }

.reveal {
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease
    }

.reveal.animate {
    opacity: 0;
    transform: translatey(12px)
    }

.reveal.animate.visible {
    opacity: 1;
    transform: none
    }

.tri-detail {
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border)
    }

.tri-detail-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--teal-dark);
    margin-bottom: 0.75rem
    }

.tradeoff-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    align-items: start
    }

.triangle-wrap {
    display: flex;
    align-items: center;
    justify-content: center
    }

.triangle-svg {
    width: 100%;
    max-width: 320px;
    height: auto
    }

.example {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.97rem;
    border-left: 3px solid var(--border);
    padding-left: 1rem;
    margin-top: 0.75rem
    }

.reg-tab {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    font-weight: 600;
    transition: all 0.15s
    }

.reg-tab:hover {
    border-color: var(--teal-dark);
    color: var(--teal-dark)
    }

.active-reg {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #243007 !important;
    font-weight: 700 !important
    }

.courage-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--teal);
    padding: 1.5rem
    }

.footer-brand {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted)
    }

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1px;
    background: var(--border);
    margin: 2rem 0
    }

.stat-block {
    background: var(--card-bg);
    padding: 1.75rem 1.5rem;
    border-top: 3px solid var(--teal)
    }

@media (max-width: 860px) {
    .module-content, .objectives-strip, .top-nav, .pause-reflect, .module-nav, .takeaways {
        padding-left: 1.5rem;
        padding-right: 1.5rem
        }
    .module-hero {
        padding: 2.5rem 1.5rem 2rem
        }
    .card-grid-3 {
        grid-template-columns: 1fr 1fr
        }
    .card-grid-4 {
        grid-template-columns: 1fr 1fr
        }
    .takeaway-list {
        grid-template-columns: 1fr !important
        }
    }

@media (max-width: 540px) {
    .card-grid-2, .card-grid-3, .card-grid-4 {
        grid-template-columns: 1fr
        }
    .stat-strip.cols-3, .stat-strip.cols-4 {
        grid-template-columns: 1fr
        }
    .module-title {
        font-size: 1.75rem
        }
    .tradeoff-container {
        grid-template-columns: 1fr
        }
    }

.takeaway-body {
    flex: 1
    }

.takeaway-body strong {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 0.4rem;
    line-height: 1.35
    }

.takeaway-body p {
    font-size: 0.95rem;
    color: rgba(36, 48, 7, 0.75);
    line-height: 1.65
    }

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin: 1.5rem 0
    }

.compare-table th {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.75rem 1rem;
    text-align: left;
    background: var(--section-alt);
    border-bottom: 2px solid var(--border);
    color: var(--text-primary)
    }

.compare-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
    line-height: 1.6;
    color: var(--text-secondary)
    }

.compare-table tr:last-child td {
    border-bottom: none
    }

.compare-table td:first-child {
    font-weight: 600;
    color: var(--text-primary)
    }

.compare-table tr:hover td {
    background: var(--section-alt)
    }

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.5rem 0
    }

.process-step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: none
    }

.process-step:first-child {
    border-top: 1px solid var(--border)
    }

.step-icon {
    font-family: Calibri, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: var(--teal);
    color: #243007;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    margin-top: 0.1rem
    }

.step-body {
    flex: 1
    }

.step-body strong {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem
    }

.step-body p {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0
    }

.callout-insight {
    padding: 1.35rem 1.75rem;
    margin: 1.75rem 0;
    border-left: 4px solid var(--teal);
    background: var(--teal-bg)
    }

.callout-insight .callout-title {
    font-family: Calibri, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7BA019;
    font-weight: 700;
    display: block;
    margin-bottom: 0.6rem
    }

.callout-insight p {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.72
    }

.pause-questions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem
    }

.pause-note {
    font-size: 0.92rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0.5rem
    }

.kc-reveal-label {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-dark);
    display: block;
    margin-bottom: 0.5rem
    }

.examples-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem
    }

.examples-row span {
    padding: 0.4rem 0.85rem;
    background: var(--section-alt);
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-left: 2px solid var(--teal-dark)
    }

.accred-strip {
    background: var(--section-alt);
    border-top: 3px solid var(--teal);
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin: 2rem 0
    }

.accred-icon {
    font-size: 2rem;
    flex-shrink: 0
    }

.accred-body h3 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem
    }

.accred-body p {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.65
    }

.accred-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--teal-bg);
    border: 1px solid var(--teal-border);
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-top: 1rem
    }

.all-tracks {
    display: grid;
    gap: 1px;
    background: var(--border)
    }

.all-track-col {
    background: var(--card-bg);
    padding: 1.5rem
    }

.all-track-header {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem
    }

.at-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    display: inline-block
    }

.at-module-link {
    display: block;
    padding: 0.65rem 1rem;
    background: var(--section-alt);
    border-left: 2px solid var(--teal-dark);
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 4px
    }

.at-module-link:hover {
    background: var(--teal-bg);
    color: var(--teal-dark)
    }

.at-num {
    font-family: Calibri, monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-right: 0.5rem
    }

.at-title {
    font-weight: 600;
    color: var(--text-primary)
    }

.at-label, .at-name {
    font-size: 0.9rem;
    color: var(--text-muted)
    }

.global-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1px;
    background: var(--border);
    margin: 1rem 0
    }

.gstat {
    background: var(--card-bg);
    padding: 1.5rem 1.25rem
    }

.gstat-num {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--teal-dark);
    line-height: 1;
    margin-bottom: 0.4rem
    }

.gstat-label {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55
    }

.scope-diagram {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.scope-box {
    background: var(--card-bg);
    cursor: pointer;
    border-left: 4px solid var(--border);
    transition: background 0.15s
    }

.scope-box.s1 {
    border-left-color: #7BA019
    }

.scope-box.s2 {
    border-left-color: #5A6A4F
    }

.scope-box.s3 {
    border-left-color: #7BA019
    }

.scope-box.s4 {
    border-left-color: #5A6A4F
    }

.scope-box:hover, .scope-box.open {
    background: var(--section-alt)
    }

.scope-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem
    }

.scope-num {
    font-family: Calibri, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    flex-shrink: 0;
    color: #fff
    }

.scope-box.s1 .scope-num {
    background: #7BA019
    }

.scope-box.s2 .scope-num {
    background: #5A6A4F
    }

.scope-box.s3 .scope-num {
    background: #7BA019
    }

.scope-box.s4 .scope-num {
    background: #5A6A4F
    }

.scope-name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1
    }

.scope-short {
    font-size: 0.88rem;
    color: var(--text-muted)
    }

.scope-size {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    color: var(--text-muted)
    }

.scope-detail {
    display: none;
    padding: 0 1.5rem 1.25rem 4.5rem
    }

.scope-box.open + .scope-detail {
    display: block
    }

.scope-detail p {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem
    }

.scope-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem
    }

.scope-example {
    padding: 0.35rem 0.75rem;
    background: var(--section-alt);
    font-size: 0.82rem;
    color: var(--text-secondary)
    }

.scope-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-family: Calibri, monospace;
    font-size: 0.65rem;
    background: var(--section-alt);
    color: var(--text-muted);
    margin: 0.15rem
    }

.waste-explorer {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--teal)
    }

.waste-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 2.5rem;
    overflow-x: auto;
    flex-wrap: wrap
    }

.waste-tab {
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    position: relative;
    bottom: -2px;
    white-space: nowrap;
    font-weight: 500
    }

.waste-tab.active {
    color: #fff;
    border-bottom-color: var(--teal);
    font-weight: 700;
    background: #243007
    }

.waste-tab:hover {
    background: rgba(36, 48, 7, 0.5);
    color: #fff
    }

.waste-panels {
    padding: 0
    }

.waste-panel {
    display: none;
    animation: fadeIn 0.4s ease-out forwards;
    padding: 1.75rem
    }

.waste-panel.active {
    display: block
    }

.waste-panel-stat {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--teal-dark)
    }

.action-model {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.action-level {
    background: var(--card-bg);
    cursor: pointer
    }

.action-level:hover, .action-level.open {
    background: var(--section-alt)
    }

.action-level-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem
    }

.action-level-num {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0
    }

.l1 .action-level-num {
    background: #7BA019
    }

.l2 .action-level-num {
    background: #5A6A4F
    }

.l3 .action-level-num {
    background: #7BA019
    }

.l4 .action-level-num {
    background: #5A6A4F
    }

.action-level-name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1
    }

.action-level-tagline {
    font-size: 0.88rem;
    color: var(--text-muted)
    }

.action-level-arrow {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform 0.2s;
    margin-left: auto
    }

.action-level.open .action-level-arrow {
    transform: rotate(180deg)
    }

.action-level-detail {
    display: none;
    padding: 0 1.5rem 1.25rem 4.5rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7
    }

.action-level.open .action-level-detail {
    display: block
    }

.dim-explorer {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--teal)
    }

.dim-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border)
    }

.dim-tab {
    padding: 1rem 1.25rem;
    background: var(--section-alt);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font-family: Inter, "Trebuchet MS", system-ui, sans-serif
    }

.dim-tab:hover {
    background: var(--teal-bg)
    }

.dim-tab.active {
    background: var(--card-bg);
    border-top: 2px solid var(--teal)
    }

.dim-tab-label {
    font-family: Calibri, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    display: block;
    margin-bottom: 0.25rem
    }

.dim-tab-name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    line-height: 1.2
    }

.dim-tab-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.2rem
    }

.dim-panels {
    padding: 0
    }

.dim-panel {
    display: none;
    padding: 2rem;
    gap: 2rem
    }

.dim-panel.active {
    display: grid;
    grid-template-columns: 1fr 1fr
    }

.dim-panel h4 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3
    }

.dim-panel p {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem
    }

.dim-examples {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem
    }

.dim-example {
    padding: 0.6rem 0.85rem;
    background: var(--section-alt);
    font-size: 0.9rem;
    color: var(--text-primary);
    border-left: 2px solid var(--teal-dark)
    }

.dim-status {
    padding: 1.25rem;
    font-size: 0.92rem;
    line-height: 1.6
    }

.status-established {
    background: rgba(147, 192, 31, 0.08);
    border-left: 3px solid var(--teal-dark);
    color: var(--text-primary)
    }

.status-emerging {
    background: rgba(244, 162, 97, 0.08);
    border-left: 3px solid #5A6A4F;
    color: var(--text-primary)
    }

.status-nascent {
    background: rgba(100, 116, 139, 0.08);
    border-left: 3px solid var(--text-muted);
    color: var(--text-primary)
    }

.dim-status strong {
    color: var(--text-primary)
    }

.sequence-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.seq-step {
    background: var(--card-bg);
    padding: 1.75rem 1.5rem;
    border-top: 3px solid var(--border)
    }

.seq-step.s1 {
    border-top-color: #7BA019
    }

.seq-step.s2 {
    border-top-color: #7BA019
    }

.seq-step.s3 {
    border-top-color: #5A6A4F
    }

.seq-step.s4 {
    border-top-color: #5A6A4F
    }

.seq-num {
    font-family: Calibri, monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--border);
    line-height: 1;
    margin-bottom: 0.5rem
    }

.seq-step.s1 .seq-num {
    color: #7BA019
    }

.seq-step.s2 .seq-num {
    color: #7BA019
    }

.seq-step.s3 .seq-num {
    color: #5A6A4F
    }

.seq-step.s4 .seq-num {
    color: #5A6A4F
    }

.seq-label {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem
    }

.seq-title {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem
    }

.seq-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem
    }

.seq-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.65
    }

.isnt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.isnt-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-top: 3px solid var(--border-light)
    }

.isnt-card.isnt {
    border-top-color: #7BA019
    }

.isnt-marker {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7BA019;
    display: block;
    margin-bottom: 0.6rem
    }

.isnt-card h4 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem
    }

.isnt-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65
    }

.method-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.method-col {
    background: var(--card-bg);
    padding: 1.75rem
    }

.method-col.activity {
    border-top: 3px solid #7BA019
    }

.method-col.spend {
    border-top: 3px solid #5A6A4F
    }

.method-name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.65rem
    }

.method-desc {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem
    }

.method-pros, .method-cons {
    margin-bottom: 1rem
    }

.method-pros-label, .method-cons-label {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--text-muted)
    }

.method-col.activity .method-pros-label {
    color: #7BA019
    }

.method-col.spend .method-pros-label {
    color: #5A6A4F
    }

.method-list {
    padding-left: 1rem;
    margin: 0
    }

.method-list li {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 0.3rem
    }

.role-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.role-metric-card {
    background: var(--card-bg);
    padding: 1.25rem
    }

.role-name {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block
    }

.metric-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem
    }

.metric-chip {
    padding: 0.3rem 0.7rem;
    background: var(--section-alt);
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    color: var(--text-secondary)
    }

.baseline-steps {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.baseline-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    background: var(--card-bg)
    }

.bs-num {
    font-family: Calibri, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: var(--teal);
    color: #243007;
    display: flex;
    align-items: center;
    justify-content: center
    }

.bs-body strong {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem
    }

.bs-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0
    }

.domain-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--border)
    }

.domain-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    background: var(--section-alt);
    border: 1px solid var(--border);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    min-width: 100px
    }

.domain-btn:hover {
    border-color: var(--teal-dark);
    background: var(--teal-bg)
    }

.domain-btn.active {
    background: var(--card-bg);
    border-color: var(--teal);
    border-top: 2px solid var(--teal)
    }

.domain-icon {
    font-size: 1.25rem
    }

.domain-label {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700
    }

.domain-btn.active .domain-label {
    color: var(--teal-dark)
    }

.domain-driver {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3
    }

.domain-panels {
    margin-top: 0
    }

.domain-panel {
    display: none;
    background: var(--card-bg);
    padding: 1.75rem;
    border: 1px solid var(--border)
    }

.domain-panel.active {
    display: block
    }

.dp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem
    }

.dp-list li, .dp-good, .dp-warn {
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    background: var(--section-alt);
    border-left: 2px solid var(--border)
    }

.dp-good {
    border-left-color: #7BA019
    }

.dp-warn {
    border-left-color: #7BA019
    }

.chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0.5rem;
    text-align: right
    }

.chart-y-label, .chart-x-label {
    font-family: Calibri, monospace;
    font-size: 0.65rem;
    color: var(--text-muted)
    }

.chart-x-labels {
    display: flex;
    justify-content: space-between;
    padding-top: 0.25rem
    }

.chart-x-title {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted)
    }

.chart-dot {
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s
    }

.chart-dot:hover {
    transform: scale(1.2)
    }

.dot-tooltip {
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10
    }

.measurement-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.meas-col {
    background: var(--card-bg);
    padding: 1.75rem
    }

.meas-col-label {
    font-family: Calibri, monospace;
    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block
    }

.meas-col h4 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem
    }

.shifting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
    margin: 1.5rem 0
    }

.shift-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--teal);
    padding: 1.5rem
    }

.shift-num {
    font-family: Calibri, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block
    }

.shift-name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3
    }

.shift-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65
    }

.shift-example {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem
    }

.shift-caveat {
    font-size: 0.82rem;
    color: #7BA019;
    margin-top: 0.5rem
    }

.rebound-chart {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.rc-svg {
    width: 100%;
    display: block
    }

.rc-label {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em
    }

.animate-line {
    transition: stroke-dashoffset 1s ease
    }

.tri-detail-cost, .tri-detail-carbon, .tri-detail-perf {
    color: var(--teal-dark)
    }

.bc-evidence-col {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 1.25rem
    }

.bc-evidence-col h4 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem
    }

.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin: 1.5rem 0
    }

.audience-card, .aud-entry {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--teal);
    padding: 1.25rem
    }

.aud-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem
    }

.aud-role {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-dark);
    font-weight: 700;
    margin-bottom: 0.35rem;
    display: block
    }

.accred-body h3 {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem
    }

.accred-body p {
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.65
    }

.lifecycle-bar {
    display: grid;
    grid-template-columns: 70fr 25fr 10fr;
    gap: 1px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin: 1.5rem 0
    }

.lc-phase {
    padding: 1.5rem 1.25rem;
    cursor: pointer;
    transition: filter 0.15s
    }

.lc-phase.manufacture {
    background: #7BA019;
    color: #fff
    }

.lc-phase.operate {
    background: #7BA019;
    color: #fff
    }

.lc-phase.eol {
    background: #5A6A4F;
    color: #fff
    }

.lc-phase:hover {
    filter: brightness(1.1)
    }

.lc-pct {
    font-family: Calibri, monospace;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem
    }

.lc-label {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85
    }

.lifecycle-detail {
    padding: 1.25rem 1.5rem;
    background: var(--section-alt);
    border-left: 3px solid var(--teal);
    font-size: 0.97rem;
    color: var(--text-primary);
    line-height: 1.7
    }

.bs-body {
    flex: 1
    }

.bs-body strong {
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem
    }

.bs-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0
    }

.stop-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    margin: 1.5rem 0
    }

.stop-col, .start-col {
    background: var(--card-bg);
    padding: 1.5rem
    }

.stop-col {
    border-top: 3px solid #7BA019
    }

.start-col {
    border-top: 3px solid #7BA019
    }

.ss-heading {
    font-family: Calibri, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block
    }

.stop-col .ss-heading {
    color: #7BA019
    }

.start-col .ss-heading {
    color: #7BA019
    }

.ss-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem
    }

.ss-list li {
    padding: 0.5rem 0.75rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    background: var(--section-alt)
    }

.pue-util-chart {
    position: relative;
    background: var(--section-alt);
    border: 1px solid var(--border)
    }

.tri-vertex {
    cursor: pointer
    }

.tri-vertex:hover circle {
    opacity: 0.8
    }

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(10px);
        } to {
        opacity: 1;
        transform: translateY(0);
        }
    }