:root {
      --navy: #081f32;
      --navy-2: #0d3048;
      --blue: #0b83b8;
      --water: #42c2e8;
      --ice: #dff6fb;
      --amber: #ffb12b;
      --sand: #f4eee2;
      --paper: #fbfaf7;
      --white: #fff;
      --ink: #102536;
      --muted: #607581;
      --green: #2f8064;
      --red: #c84f46;
      --line: rgba(16, 37, 54, .14);
      --radius: 22px;
      --shadow: 0 22px 60px rgba(8,31,50,.12);
      --display: "Avenir Next", Avenir, "Century Gothic", Futura, sans-serif;
      --body: Inter, "Helvetica Neue", Arial, sans-serif;
      --data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    * { box-sizing: border-box; }
    html:not(.i18n-ready) body { visibility: hidden; }
    html { scroll-behavior: smooth; scroll-padding-top: 86px; background: var(--paper); }
    body {
      margin: 0;
      color: var(--ink);
      font-family: var(--body);
      line-height: 1.62;
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    button, a { font: inherit; }
    a { color: inherit; }
    button:focus-visible, a:focus-visible, summary:focus-visible {
      outline: 3px solid var(--amber);
      outline-offset: 3px;
    }
    .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
    .section { padding: clamp(76px, 9vw, 126px) 0; }
    .section.compact { padding: clamp(54px, 7vw, 88px) 0; }
    .section.dark { color: white; background: var(--navy); }
    .section.blue { color: white; background: linear-gradient(145deg, #082338, #0d4561); }
    .section.sand { background: var(--sand); }
    .section.ice { background: #eef9fb; }
    .section-head { max-width: 820px; margin-bottom: 42px; }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 18px;
      color: var(--blue);
      font: 700 12px/1 var(--data);
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .dark .eyebrow, .blue .eyebrow { color: var(--water); }
    .eyebrow::before { width: 34px; height: 2px; background: currentColor; content: ""; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { font-family: var(--display); }
    h1 {
      margin-bottom: 24px;
      font-size: clamp(52px, 7vw, 102px);
      line-height: .93;
      letter-spacing: -.055em;
      text-wrap: balance;
    }
    h2 {
      margin-bottom: 22px;
      font-size: clamp(38px, 5vw, 68px);
      line-height: 1;
      letter-spacing: -.045em;
      text-wrap: balance;
    }
    h3 {
      margin-bottom: 10px;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.1;
      letter-spacing: -.025em;
    }
    .lede {
      max-width: 800px;
      margin-bottom: 0;
      color: var(--muted);
      font-size: clamp(20px, 2.1vw, 29px);
      line-height: 1.42;
      text-wrap: balance;
    }
    .dark .lede, .blue .lede { color: rgba(255,255,255,.76); }
    .muted { color: var(--muted); }
    .dark .muted, .blue .muted { color: rgba(255,255,255,.66); }
    .water { color: var(--water); }
    .amber { color: var(--amber); }
    .green { color: var(--green); }
    .mini { font-size: 14px; line-height: 1.5; }
    .fineprint { color: var(--muted); font-size: 12px; line-height: 1.55; }
    .dark .fineprint, .blue .fineprint { color: rgba(255,255,255,.58); }
    .mono { font-family: var(--data); font-variant-numeric: tabular-nums; }

    .progress {
      position: fixed;
      z-index: 100;
      left: 0;
      top: 0;
      width: 6px;
      height: 100vh;
      background: rgba(66,194,232,.14);
    }
    .progress-fill {
      width: 100%;
      height: 0;
      background: linear-gradient(var(--water), var(--blue));
    }
    .progress-drop {
      position: absolute;
      left: 50%;
      top: 0;
      width: 16px;
      height: 16px;
      border-radius: 50% 50% 50% 0;
      background: var(--water);
      box-shadow: 0 0 0 5px rgba(66,194,232,.16);
      transform: translate(-50%,-50%) rotate(-45deg);
    }

    .site-header {
      position: sticky;
      z-index: 90;
      top: 0;
      height: 72px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      color: white;
      background: rgba(8,31,50,.91);
      backdrop-filter: blur(14px);
    }
    .header-inner {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      font: 750 15px/1 var(--display);
      letter-spacing: -.01em;
      white-space: nowrap;
    }
    .brand-drop {
      width: 18px;
      height: 18px;
      border-radius: 50% 50% 50% 0;
      background: var(--water);
      transform: rotate(-45deg);
    }
    .nav {
      display: flex;
      gap: 4px;
      align-items: center;
    }
    .nav a {
      padding: 9px 11px;
      border-radius: 999px;
      color: rgba(255,255,255,.66);
      text-decoration: none;
      font-size: 13px;
      transition: .2s ease;
    }
    .nav a:hover, .nav a.active { color: white; background: rgba(255,255,255,.10); }
    .print-button {
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 999px;
      color: white;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
    }
    .header-actions { display: flex; align-items: center; gap: 8px; }
    .language-switch {
      display: flex;
      padding: 3px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      background: rgba(255,255,255,.05);
    }
    .language-switch button {
      min-width: 35px;
      padding: 6px 9px;
      border: 0;
      border-radius: 999px;
      color: rgba(255,255,255,.62);
      background: transparent;
      cursor: pointer;
      font: 750 11px/1 var(--data);
    }
    .language-switch button.active {
      color: var(--navy);
      background: var(--water);
    }

    .hero {
      position: relative;
      min-height: calc(100vh - 72px);
      color: white;
      background:
        linear-gradient(90deg, rgba(8,31,50,.97) 0%, rgba(8,31,50,.84) 45%, rgba(8,31,50,.28) 75%, rgba(8,31,50,.08) 100%),
        url("/assets/roof-01.jpg") center/cover no-repeat;
      overflow: hidden;
    }
    .hero::after {
      position: absolute;
      inset: auto 0 0;
      height: 36%;
      background: linear-gradient(transparent, rgba(8,31,50,.72));
      content: "";
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      min-height: calc(100vh - 72px);
      padding: 84px 0 64px;
      flex-direction: column;
      justify-content: center;
    }
    .hero-copy { max-width: 850px; }
    .hero .lede { max-width: 700px; color: rgba(255,255,255,.82); }
    .hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
    .button {
      display: inline-flex;
      min-height: 46px;
      padding: 0 18px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.26);
      border-radius: 999px;
      color: white;
      background: rgba(8,31,50,.30);
      text-decoration: none;
      backdrop-filter: blur(8px);
    }
    .button.primary { border-color: var(--water); color: var(--navy); background: var(--water); font-weight: 750; }
    .hero-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 780px;
      gap: 1px;
      margin-top: 52px;
      border: 1px solid rgba(255,255,255,.20);
      border-radius: 20px;
      background: rgba(8,31,50,.42);
      overflow: hidden;
      backdrop-filter: blur(10px);
    }
    .hero-fact { padding: 17px 20px; border-right: 1px solid rgba(255,255,255,.16); }
    .hero-fact:last-child { border-right: 0; }
    .hero-fact strong { display: block; font: 750 25px/1 var(--display); }
    .hero-fact span { display: block; margin-top: 6px; color: rgba(255,255,255,.62); font-size: 12px; }

    .recommendation {
      position: relative;
      z-index: 3;
      margin-top: -34px;
    }
    .recommendation-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 22px 26px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: white;
      box-shadow: var(--shadow);
    }
    .recommendation-mark {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 50%;
      color: var(--navy);
      background: var(--water);
      font-weight: 800;
    }
    .recommendation p { margin: 0; }
    .recommendation a { color: var(--blue); font-weight: 700; text-decoration: none; white-space: nowrap; }

    .split {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(36px, 6vw, 86px);
      align-items: center;
    }
    .grid-2, .grid-3, .grid-4 { display: grid; gap: 18px; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .card {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.78);
      box-shadow: 0 14px 38px rgba(8,31,50,.06);
    }
    .dark .card, .blue .card {
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.075);
      box-shadow: none;
    }
    .card p:last-child { margin-bottom: 0; }
    .icon {
      display: grid;
      width: 48px;
      height: 48px;
      margin-bottom: 18px;
      place-items: center;
      border-radius: 15px;
      color: var(--navy);
      background: var(--ice);
    }
    .icon svg { width: 26px; height: 26px; }
    .number {
      display: block;
      font: 750 clamp(42px, 5vw, 72px)/.95 var(--display);
      letter-spacing: -.055em;
      font-variant-numeric: tabular-nums;
    }
    .number.small { font-size: clamp(31px, 3.6vw, 49px); }
    .label {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.4;
    }
    .dark .label, .blue .label { color: rgba(255,255,255,.64); }

    .gap-visual {
      position: relative;
      min-height: 440px;
      padding: 32px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 30px;
      background: rgba(255,255,255,.06);
      overflow: hidden;
    }
    .tower {
      position: absolute;
      right: 34px;
      bottom: 0;
      width: 44%;
      height: 88%;
      border: 1px solid rgba(255,255,255,.26);
      border-bottom: 0;
      background:
        repeating-linear-gradient(to bottom, transparent 0 32px, rgba(255,255,255,.13) 33px 34px),
        linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.11));
    }
    .tower::before {
      position: absolute;
      top: -28px;
      left: 15%;
      width: 70%;
      height: 28px;
      border: 1px solid rgba(255,255,255,.26);
      border-bottom: 0;
      background: rgba(255,255,255,.08);
      content: "";
    }
    .floors {
      position: absolute;
      right: calc(44% + 26px);
      top: 48px;
      color: var(--water);
      font: 700 12px/1 var(--data);
      letter-spacing: .1em;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }
    .pressure-break { position: absolute; left: 32px; bottom: 54px; width: 49%; }
    .pressure-line {
      position: relative;
      height: 8px;
      margin: 18px 0;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--water) 0 52%, transparent 52% 61%, var(--red) 61% 100%);
    }
    .pressure-line::after {
      position: absolute;
      left: 56%;
      top: 50%;
      width: 18px;
      height: 18px;
      border: 3px solid var(--red);
      border-radius: 50%;
      background: var(--navy);
      transform: translate(-50%,-50%);
      content: "";
    }
    .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
    .status-card { padding: 20px; border-radius: 16px; background: rgba(255,255,255,.08); }
    .status-card strong { display: block; margin-bottom: 6px; color: var(--water); font: 750 24px/1 var(--display); }
    .status-card.gap strong { color: var(--amber); }

    .flow {
      display: grid;
      grid-template-columns: 1fr 50px 1fr 50px 1fr;
      gap: 12px;
      align-items: stretch;
    }
    .flow-box {
      display: flex;
      min-height: 230px;
      padding: 24px;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 22px;
      background: rgba(255,255,255,.07);
    }
    .flow-box.highlight { border-color: rgba(66,194,232,.55); background: rgba(66,194,232,.12); }
    .flow-arrow { display: grid; place-items: center; color: var(--water); font-size: 32px; }
    .operation {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 22px;
    }
    .mode {
      padding: 18px 20px;
      border-left: 4px solid var(--green);
      border-radius: 0 14px 14px 0;
      background: rgba(255,255,255,.08);
    }
    .mode.outage { border-color: var(--amber); }
    .connection-choice {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 28px;
      align-items: center;
      margin-top: 24px;
      padding: 26px;
      border: 1px solid rgba(255,177,43,.42);
      border-radius: 22px;
      background: rgba(255,177,43,.09);
    }
    .constraint-tag {
      display: inline-flex;
      margin-bottom: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--navy);
      background: var(--amber);
      font: 800 10px/1 var(--data);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .circuit-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
    .circuit {
      padding: 14px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      color: rgba(255,255,255,.58);
      background: rgba(255,255,255,.05);
    }
    .circuit strong { display: block; color: white; }
    .circuit.selected { border-color: var(--water); color: rgba(255,255,255,.76); background: rgba(66,194,232,.14); }
    .circuit.selected strong { color: var(--water); }
    .circuit-state { display: block; margin-top: 5px; font: 700 10px/1 var(--data); text-transform: uppercase; }

    .offer-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
    .equipment { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .offer-total {
      padding: 30px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 26px;
      background: linear-gradient(140deg, rgba(66,194,232,.16), rgba(255,255,255,.04));
    }
    .cost-bars { margin-top: 22px; }
    .cost-row {
      display: grid;
      grid-template-columns: 142px 1fr 82px;
      gap: 13px;
      align-items: center;
      margin: 13px 0;
      font-size: 13px;
    }
    .track { height: 11px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
    .fill { height: 100%; border-radius: inherit; background: var(--water); }
    .cost-row:nth-child(2) .fill { background: var(--amber); }
    .cost-row:nth-child(3) .fill { background: #72d4aa; }
    .cost-row:nth-child(4) .fill { background: #9aaec0; }
    .cost-row:nth-child(5) .fill { background: #c1d1dc; }
    .cost-value { text-align: right; font: 700 12px/1 var(--data); }
    .exclusions {
      margin-top: 28px;
      padding: 18px 20px;
      border-left: 4px solid var(--amber);
      border-radius: 0 14px 14px 0;
      background: rgba(255,177,43,.11);
    }

    .meter-table { margin-top: 24px; }
    .meter-row {
      display: grid;
      grid-template-columns: 190px 1fr 100px 100px;
      gap: 14px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }
    .meter-row.head { color: var(--muted); font: 700 11px/1.2 var(--data); letter-spacing: .04em; text-transform: uppercase; }
    .meter-bar { height: 14px; border-radius: 99px; background: rgba(11,131,184,.12); overflow: hidden; }
    .meter-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--water)); }
    .supply-code { display: block; margin-top: 3px; color: var(--muted); font: 700 10px/1 var(--data); }
    .check-card { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow); }
    .unknowns { margin-top: 18px; padding: 18px 20px; border-left: 4px solid var(--amber); border-radius: 0 14px 14px 0; background: rgba(255,177,43,.12); }

    .energy-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
    .energy-ring {
      position: relative;
      display: grid;
      width: min(350px, 100%);
      aspect-ratio: 1;
      margin-inline: auto;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--water) 0 11.1%, rgba(255,255,255,.10) 11.1% 100%);
    }
    .energy-ring::before { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--navy-2); content: ""; }
    .energy-ring > div { position: relative; text-align: center; }
    .energy-ring .label { max-width: 170px; color: rgba(255,255,255,.7); }
    .energy-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
    .energy-stats .card { padding: 20px; }

    .economics-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 28px; align-items: start; }
    .scenario-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
    .scenario-tabs button {
      padding: 9px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: white;
      cursor: pointer;
      transition: .2s ease;
    }
    .scenario-tabs button:hover { border-color: var(--blue); color: var(--blue); }
    .scenario-tabs button.active { border-color: var(--navy); color: white; background: var(--navy); }
    .chart-wrap { padding: 18px 18px 8px; border: 1px solid var(--line); border-radius: 20px; background: white; }
    #cashChart { display: block; width: 100%; height: auto; }
    .scenario-output { display: grid; gap: 12px; }
    .scenario-output > div { padding: 18px; border-radius: 16px; background: rgba(11,131,184,.08); }
    .scenario-output strong { display: block; font: 750 32px/1 var(--display); }
    .scenario-output span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
    .assumption-box { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); }

    .owner-layout { display: grid; grid-template-columns: 1fr .85fr; gap: 50px; align-items: center; }
    .share-stack { display: grid; gap: 12px; }
    .share-row {
      display: grid;
      grid-template-columns: 100px 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 15px 18px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,255,255,.74);
    }
    .share-row.active { border-color: var(--blue); background: var(--ice); }
    .share-row strong { font: 750 21px/1 var(--display); }
    .battery-ticket {
      position: relative;
      padding: 34px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 26px;
      color: white;
      background: linear-gradient(145deg,var(--navy),var(--navy-2));
      overflow: hidden;
    }
    .battery-ticket::after { position: absolute; right: -50px; bottom: -70px; width: 210px; height: 210px; border: 28px solid rgba(66,194,232,.16); border-radius: 50%; content: ""; }
    .battery-ticket .number { color: var(--water); }
    .ticket-rule { margin: 24px 0; border: 0; border-top: 1px dashed rgba(255,255,255,.25); }

    .outcome { position: relative; min-height: 250px; overflow: hidden; }
    .outcome .ordinal { position: absolute; right: 16px; bottom: -24px; color: rgba(11,131,184,.08); font: 800 130px/1 var(--display); letter-spacing: -.08em; }
    .outcome p { position: relative; max-width: 29ch; }
    .framing { margin-top: 22px; padding: 22px 24px; border-left: 4px solid var(--amber); border-radius: 0 16px 16px 0; background: rgba(255,177,43,.12); }

    .gate-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
    .gate { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
    .gate-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--water); border-radius: 50%; color: var(--water); font: 700 12px/1 var(--data); }
    .gate strong { display: block; margin-bottom: 4px; }
    .gate span { color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.4; }
    .next-step {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      margin-top: 38px;
      padding: 28px 32px;
      border: 1px solid rgba(66,194,232,.38);
      border-radius: 22px;
      background: rgba(66,194,232,.10);
    }
    .next-step p { margin-bottom: 0; }
    .recommend-badge { padding: 12px 16px; border-radius: 999px; color: var(--navy); background: var(--water); font-weight: 800; white-space: nowrap; }

    details {
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255,255,255,.72);
      overflow: hidden;
    }
    details + details { margin-top: 12px; }
    summary {
      display: flex;
      padding: 19px 22px;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      cursor: pointer;
      list-style: none;
      font-weight: 750;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { color: var(--blue); content: "+"; font: 700 22px/1 var(--data); }
    details[open] summary::after { content: "−"; }
    .detail-body { padding: 0 22px 22px; color: var(--muted); font-size: 14px; }
    .source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; padding: 0; list-style: none; }
    .source-grid li { padding: 12px 0; border-bottom: 1px solid var(--line); }
    .source-grid strong { display: block; color: var(--ink); }

    footer { padding: 32px 0; color: rgba(255,255,255,.58); background: var(--navy); font-size: 12px; }
    .footer-inner { display: flex; justify-content: space-between; gap: 24px; }

    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    @media (max-width: 980px) {
      .nav a:nth-child(2), .nav a:nth-child(3) { display: none; }
      .split, .offer-summary, .energy-layout, .economics-layout, .owner-layout, .connection-choice { grid-template-columns: 1fr; }
      .flow { grid-template-columns: 1fr; }
      .flow-arrow { min-height: 30px; transform: rotate(90deg); }
      .flow-box { min-height: 170px; }
      .energy-ring { width: 270px; }
      .scenario-output { grid-template-columns: repeat(3,1fr); }
      .gate-list { grid-template-columns: 1fr; }
      .meter-row { grid-template-columns: 170px 1fr 90px; }
      .meter-row > :last-child { display: none; }
    }
    @media (max-width: 700px) {
      .shell { width: min(100% - 30px,1180px); }
      .section { padding: 72px 0; }
      h1 { font-size: 52px; }
      h2 { font-size: 39px; }
      .nav { display: none; }
      .print-button { display: none; }
      .header-actions { flex: 0 0 auto; }
      .hero-facts, .grid-2, .grid-3, .grid-4, .status-grid, .operation, .equipment, .energy-stats, .scenario-output, .source-grid { grid-template-columns: 1fr; }
      .hero-fact { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
      .hero-fact:last-child { border-bottom: 0; }
      .recommendation-inner { grid-template-columns: auto 1fr; }
      .recommendation a { grid-column: 2; }
      .gap-visual { min-height: 340px; }
      .pressure-break { width: 55%; }
      .cost-row { grid-template-columns: 105px 1fr 75px; }
      .meter-row { grid-template-columns: 120px 1fr 76px; gap: 9px; }
      .share-row { grid-template-columns: 86px 1fr auto; padding: 13px; }
      .next-step { grid-template-columns: 1fr; }
      .recommend-badge { justify-self: start; }
      .footer-inner { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { opacity: 1; transform: none; transition: none; }
    }
    @media print {
      .site-header, .progress, .hero-actions, .print-button { display: none !important; }
      .hero { min-height: 620px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
      .hero-inner { min-height: 620px; }
      .section { padding: 52px 0; break-inside: avoid; }
      .reveal { opacity: 1; transform: none; }
      details { break-inside: avoid; }
      details .detail-body { display: block; }
    }

    .margin-zero { margin: 0; }
    .margin-top-7 { margin: 7px 0 0; }
    .margin-top-8 { margin: 8px 0 0; }
    .margin-top-18 { margin-top: 18px; }
    .margin-18-top { margin: 18px 0 0; }
    .muted-on-dark { color: rgba(255,255,255,.68); }
    .fill-100 { width: 100%; }
    .fill-65-7 { width: 65.7%; }
    .fill-66-1 { width: 66.1%; }
    .fill-50-7 { width: 50.7%; }
    .fill-28-1 { width: 28.1%; }
    .fill-52-2 { width: 52.2%; }
    .fill-49-5 { width: 49.5%; }
    .fill-77-3 { width: 77.3%; }
    #progressFill { height: 100%; transform: scaleY(0); transform-origin: top; }
    #gain25.positive { color: #2f8064; }
    #gain25.negative { color: #c84f46; }