/* ==========================================================================
   Seven homepage sections recreated from the "solar heat 01" UI reference:
   cost, bill (savings), wx (cloudy weather), why, pbk (payback + "Understand
   the Numbers") and abt (about). Only these namespaces are extracted, so no
   other section can be affected. Loaded on the root homepage only.
   ========================================================================== */
/* ---- from reference home-sections.css ---- */
.cost {padding: 7.5rem 0 0; }
.cost-inner {width: 78.75rem; max-width: calc(100% - 3rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 38.75rem; gap: 5rem; align-items: center; }
.cost-h {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.75rem; line-height: 4rem; letter-spacing: -0.08rem; color: var(--ink); }
.cost-h-em {display: inline-block; background-image: linear-gradient(87.3deg, #111111 70.6%, #e2fa5a 136.85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cost-p {margin: 2rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.cost-note {margin: 1.5rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.cost-cta {margin-top: 2.5rem; }
.cost-tray {border-radius: 0.75rem; background: var(--panel); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.cost-card {position: relative; border-radius: 0.75rem; padding: 2rem; }
.cost-card-h {margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 2.25rem; letter-spacing: -0.04rem; }
.cost-sheet {background: var(--white); }
.cost-sheet .cost-card-h {color: var(--ink); }
.cost-list {margin: 1.25rem 0 0; padding: 0; list-style: none; }
.cost-row {display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0; }
.cost-row + .cost-row {background-image: repeating-linear-gradient( to right, rgba(17, 17, 17, 0.16) 0 0.5rem, rgba(17, 17, 17, 0) 0.5rem 1rem ); background-size: 100% 0.0625rem; background-repeat: no-repeat; background-position: top left; }
.cost-row:last-child {padding-bottom: 0; }
.cost-idx {flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--accent); font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; line-height: 1; letter-spacing: -0.01rem; color: var(--ink); }
.cost-row-t {flex: 1 1 auto; min-width: 0; font-family: var(--font-sans); font-weight: 500; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.01rem; color: var(--ink); }
.cost-tick {flex: none; width: 1.5rem; height: 1.5rem; }
.cost-vat {background: var(--ink); overflow: hidden; isolation: isolate; }
.cost-vat::before {content: ""; position: absolute; z-index: -1; right: -7.5rem; top: -9rem; width: 20rem; height: 20rem; border-radius: 50%; background: radial-gradient(circle, rgba(226, 250, 90, 0.38) 0%, rgba(226, 250, 90, 0) 70%); pointer-events: none; }
.cost-vat .cost-card-h {color: var(--white); }
.cost-vat p {margin: 1rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01rem; color: rgba(255, 255, 255, 0.7); }
.cost-vat a {color: var(--white); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem; transition: color var(--dur-hover) var(--ease-premium), text-decoration-thickness var(--dur-hover) var(--ease-premium), text-underline-offset var(--dur-hover) var(--ease-premium); }
.cost-card {transition: box-shadow var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); }
.cost-card:hover {transform: translateY(-0.1875rem); box-shadow: 0 1.25rem 2.75rem -1.25rem rgba(17, 17, 17, 0.24); }
.cost-idx {transition: background-color var(--dur-hover) var(--ease-premium), color var(--dur-hover) var(--ease-premium); }
.cost-row:hover .cost-idx {background-color: var(--ink); color: var(--accent); }
.cost-vat::before {transition: transform var(--dur-zoom, 700ms) var(--ease-premium); }
.cost-vat:hover::before {transform: scale(1.25); }
.cost-vat a:hover {color: var(--accent); text-decoration-thickness: 0.125rem; text-underline-offset: 0.3125rem; }
.cost-vat a:focus-visible {outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; border-radius: 0.125rem; }
@media (prefers-reduced-motion: reduce) {
  .cost-card,
  .cost-vat::before {transition: none; }
  .cost-card:hover {transform: none; }
  .cost-vat:hover::before {transform: none; }
}
.bill {padding: 7.5rem 0 0; }
.bill-band {position: relative; width: 118.5rem; max-width: calc(100% - 1.5rem); margin: 0 auto; border-radius: 0.75rem; background: var(--ink); overflow: hidden; isolation: isolate; padding: 4.5rem 0; }
.bill-dots {position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='4' height='4' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 1.5rem 1.5rem; background-position: 1.375rem 1.25rem; pointer-events: none; }
.bill-glow {position: absolute; z-index: -1; right: -12rem; top: -18rem; width: 44rem; height: 32rem; border-radius: 50%; background: rgba(226, 250, 90, 0.22); filter: blur(7rem); pointer-events: none; }
.bill-inner {width: 78.75rem; max-width: calc(100% - 3rem); margin: 0 auto; }
.bill-top {display: grid; grid-template-columns: minmax(0, 1fr) 38.75rem; gap: 5rem; align-items: start; }
.bill-left {align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.bill-cta {position: relative; margin-top: auto; background: var(--accent); }
.bill-cta:hover {background: #eaff78; box-shadow: 0 1rem 2.125rem -1rem rgba(226, 250, 90, 0.55), inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.12); }
.bill-cta:active {box-shadow: 0 0.1875rem 0.625rem -0.375rem rgba(226, 250, 90, 0.5), inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.12); }
.bill-cta:hover .chip {box-shadow: 0 0 0 0.1875rem rgba(17, 17, 17, 0.18); }
.bill-cta:focus-visible {outline-color: var(--accent); }
.bill-cta .chip {background: var(--ink); }
.bill-h {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.75rem; line-height: 4rem; letter-spacing: -0.08rem; color: var(--white); }
.bill-h-em {display: inline-block; background-image: linear-gradient(87.32deg, #ffffff 0.14%, #e2fa5a 121.28%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.bill-p {margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.01rem; color: rgba(255, 255, 255, 0.7); }
.bill-note {margin: 1.5rem 0 0; padding-left: 1.25rem; border-left: 0.125rem solid var(--accent); font-family: var(--font-sans); font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01rem; color: rgba(255, 255, 255, 0.6); }
.bill-subrow {margin: 3rem 0 0; display: flex; align-items: center; gap: 2rem; }
.bill-sub {flex: none; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 2.5rem; letter-spacing: -0.04rem; color: var(--white); }
.bill-rule {flex: 1 1 auto; height: 0.125rem; background-image: repeating-linear-gradient( to right, var(--accent) 0 0.5rem, rgba(226, 250, 90, 0) 0.5rem 1rem ); -webkit-mask-image: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 100%); }
.bill-grid {margin: 1.5rem 0 0; padding: 0; list-style: none; position: relative; border-radius: 0.75rem; border: 0.0625rem solid rgba(255, 255, 255, 0.1); overflow: hidden; background: rgba(255, 255, 255, 0.1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.0625rem; }
.bill-grid::after {content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient( ellipse 60% 110% at 50% 115%, rgba(226, 250, 90, 0.16) 0%, rgba(226, 250, 90, 0) 70% ); pointer-events: none; }
.bill-tile {position: relative; isolation: isolate; overflow: hidden; min-height: 8.25rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; background-color: var(--ink); }
.bill-tile::before {content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 450ms var(--ease-premium); }
.bill-chip {position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.625rem; background: var(--accent); }
.bill-ico {width: 1.75rem; height: 1.75rem; background-color: var(--ink); -webkit-mask: var(--bill-ico) center / contain no-repeat; mask: var(--bill-ico) center / contain no-repeat; }
.bill-ico-roof {--bill-ico: url("/assets/img/bill-ico-roof.svg"); }
.bill-ico-shading {--bill-ico: url("/assets/img/bill-ico-shading.svg"); }
.bill-ico-size {--bill-ico: url("/assets/img/bill-ico-size.svg"); }
.bill-ico-consumption {--bill-ico: url("/assets/img/bill-ico-consumption.svg"); }
.bill-ico-battery {--bill-ico: url("/assets/img/bill-ico-battery.svg"); }
.bill-ico-import {--bill-ico: url("/assets/img/bill-ico-import.svg"); }
.bill-ico-export {--bill-ico: url("/assets/img/bill-ico-export.svg"); }
.bill-ico-daytime {--bill-ico: url("/assets/img/bill-ico-daytime.svg"); }
.bill-idx {position: absolute; top: 1.25rem; right: 1.25rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; line-height: 3rem; letter-spacing: 0.02rem; color: rgba(255, 255, 255, 0.3); pointer-events: none; }
.bill-tile-t {position: relative; z-index: 1; min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.04rem; color: var(--white); }
.bill-tile-t,
.bill-ico,
.bill-idx {transition: background-color var(--dur-hover) var(--ease-premium), color var(--dur-hover) var(--ease-premium); }
.bill-chip {transition: background-color var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); }
.bill-tile:hover::before {transform: scaleY(1); }
.bill-tile:hover .bill-tile-t {color: var(--ink); }
.bill-tile:hover .bill-chip {background-color: var(--ink); transform: scale(1.08); }
.bill-tile:hover .bill-ico {background-color: var(--accent); }
.bill-tile:hover .bill-idx {color: rgba(17, 17, 17, 0.5); }
.bill-ico {animation: 3.2s var(--ease-sheen) infinite both; }
.bill-ico-roof {animation-name: why-bob; }
.bill-ico-shading {animation-name: why-sway; animation-delay: -0.4s; }
.bill-ico-size {animation-name: why-tilt; animation-delay: -0.8s; }
.bill-ico-consumption {animation-name: why-flash; animation-delay: -1.2s; }
.bill-ico-battery {animation-name: bill-charge; animation-delay: -1.6s; }
.bill-ico-import {animation-name: bill-in; animation-delay: -2s; }
.bill-ico-export {animation-name: bill-out; animation-delay: -2.4s; }
.bill-ico-daytime {animation-name: why-ring; animation-delay: -2.8s; }
@keyframes bill-charge {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.6; }
}
@keyframes bill-in {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-0.1875rem); }
}
@keyframes bill-out {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.1875rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bill-ico {animation: none; }
  .bill-tile::before {transition: opacity var(--dur-hover) linear; transform: none; opacity: 0; }
  .bill-tile:hover::before {opacity: 1; }
  .bill-tile:hover .bill-chip {transform: none; }
}
.wx {padding: 7.5rem 0 0; }
.wx-inner {width: 78.75rem; max-width: calc(100% - 3rem); margin: 0 auto; display: grid; grid-template-columns: 40rem minmax(0, 1fr); gap: 2.5rem; align-items: stretch; }
.wx-left {display: flex; flex-direction: column; gap: 2.5rem; }
.wx-h {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.75rem; line-height: 4rem; letter-spacing: -0.08rem; color: var(--ink); }
.wx-h-em {display: inline-block; background-image: linear-gradient(86.84deg, #111111 70.6%, #e2fa5a 136.7%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.wx-art {position: relative; flex: 1 1 auto; min-height: 18.75rem; border-radius: 0.75rem; background: radial-gradient(circle at 65.3% 34%, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 32%), linear-gradient(155deg, #f0fd9e 0%, #e2fa5a 52%, #d3ee3c 100%); box-shadow: inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.06); overflow: hidden; isolation: isolate; }
.wx-art::before {content: ""; position: absolute; z-index: -1; left: 65.3%; top: 34%; width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%); animation: wx-bloom 3.6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes wx-bloom {
  from { opacity: 0.35; transform: scale(0.9); }
  to   { opacity: 1;    transform: scale(1.08); }
}
.wx-art-dots {position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='4' height='4' fill='%23111111' fill-opacity='.06'/%3E%3C/svg%3E"); background-size: 1.5rem 1.5rem; background-position: 1.375rem 1.25rem; }
.wx-art-img {position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.wx-card {border-radius: 0.75rem; background: var(--white); padding: 2.5rem; box-shadow: 0 0 0 0.0625rem rgba(17, 17, 17, 0.06), 0 1.5rem 3rem -1.75rem rgba(17, 17, 17, 0.18); }
.wx-p {margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.wx-yes {padding: 0 0.375rem; border-radius: 0.375rem; background: var(--accent); font-weight: 600; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wx-rule {display: block; height: 0.0625rem; margin: 1.75rem 0; background-image: repeating-linear-gradient( to right, rgba(17, 17, 17, 0.16) 0 0.5rem, rgba(17, 17, 17, 0) 0.5rem 1rem ); }
.wx-note {margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.wx-src {margin: 1.5rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.wx-src a {color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.125rem; transition: text-decoration-thickness var(--dur-hover) var(--ease-premium), text-underline-offset var(--dur-hover) var(--ease-premium); }
.wx-card {transition: box-shadow var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); }
.wx-card:hover {transform: translateY(-0.1875rem); box-shadow: 0 0 0 0.0625rem rgba(17, 17, 17, 0.08), 0 1.25rem 2.75rem -1.25rem rgba(17, 17, 17, 0.24); }
.wx-art-img {transition: transform var(--dur-zoom, 700ms) var(--ease-premium); }
.wx-art:hover .wx-art-img {transform: scale(1.06); }
.wx-src a:hover {text-decoration-thickness: 0.125rem; text-underline-offset: 0.25rem; }
.wx-src a:focus-visible {outline: 0.125rem solid var(--ink); outline-offset: 0.1875rem; border-radius: 0.125rem; }
@media (prefers-reduced-motion: reduce) {
  .wx-card,
  .wx-art-img,
  .wx-src a {transition: none; }
  .wx-art::before {animation: none; }
  .wx-card:hover,
  .wx-art:hover .wx-art-img {transform: none; }
}
.why {padding: 7.5rem 0; }
.why-inner {width: 78.75rem; max-width: calc(100% - 3rem); margin: 0 auto; }
.why-h {margin: 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.75rem; line-height: 4rem; letter-spacing: -0.08rem; color: var(--ink); }
.why-h-em {display: inline-block; background-image: linear-gradient(87.65deg, #111111 70.6%, #e2fa5a 136.96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.why-tray {position: relative; margin: 3rem 0 0; padding: 0.75rem; border-radius: 1rem; background: #f5f6f0; overflow: hidden; isolation: isolate; }
.why-dots {position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='4' height='4' fill='%23111111' fill-opacity='.05'/%3E%3C/svg%3E"); background-size: 1.5rem 1.5rem; background-position: 1.375rem 1.25rem; pointer-events: none; }
.why-glow {position: absolute; z-index: -1; right: -10rem; bottom: -14rem; width: 40rem; height: 28rem; border-radius: 50%; background: rgba(226, 250, 90, 0.55); filter: blur(6rem); pointer-events: none; }
.why-grid {margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.why-card {position: relative; overflow: hidden; padding: 2rem; border-radius: 0.75rem; background: var(--white); box-shadow: 0 0 0 0.0625rem rgba(17, 17, 17, 0.04); }
.why-chip {display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.625rem; background: var(--accent); }
.why-ico {width: 1.75rem; height: 1.75rem; background-color: var(--ink); -webkit-mask: var(--why-ico) center / contain no-repeat; mask: var(--why-ico) center / contain no-repeat; }
.why-ico-property {--why-ico: url("/assets/img/why-ico-property.svg"); }
.why-ico-certified {--why-ico: url("/assets/img/why-ico-certified.svg"); }
.why-ico-docs {--why-ico: url("/assets/img/why-ico-docs.svg"); }
.why-ico-brand {--why-ico: url("/assets/img/why-ico-brand.svg"); }
.why-ico-future {--why-ico: url("/assets/img/why-ico-future.svg"); }
.why-ico-support {--why-ico: url("/assets/img/why-ico-support.svg"); }
.why-idx {position: absolute; top: 2rem; right: 2rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; line-height: 3rem; letter-spacing: 0.02rem; color: var(--ink-60); /* was rgba(17,17,17,.3) = 1.99:1 on the white card; --ink-60 is 4.94:1 (WCAG AA) */ pointer-events: none; }
.why-card-t {margin: 1.5rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 2.25rem; letter-spacing: -0.04rem; color: var(--ink); }
.why-card-p {margin: 0.75rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.125rem; line-height: 1.75rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.why-card {transition: box-shadow var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); }
.why-chip {transition: transform var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium); }
.why-card:hover {transform: translateY(-0.1875rem); box-shadow: 0 1.125rem 2.5rem -1.25rem rgba(17, 17, 17, 0.22); }
.why-card:hover .why-chip {transform: scale(1.06); box-shadow: 0 0 0 0.25rem rgba(226, 250, 90, 0.35); }
.why-ico {animation: 3.2s var(--ease-sheen) infinite both; }
.why-ico-property {animation-name: why-bob; }
.why-ico-certified {animation-name: why-sway; animation-delay: -0.5s; }
.why-ico-docs {animation-name: why-tilt; animation-delay: -1s; }
.why-ico-brand {animation-name: why-shuffle; animation-delay: -1.5s; }
.why-ico-future {animation-name: why-flash; animation-delay: -2s; }
.why-ico-support {animation-name: why-ring; animation-delay: -2.5s; }
@keyframes why-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.1875rem); }
}
@keyframes why-sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}
@keyframes why-tilt {
  0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
  30%           { transform: rotate(-8deg) translateY(-0.125rem); }
}
@keyframes why-shuffle {
  0%, 35%   { transform: rotate(0deg); }
  65%, 100% { transform: rotate(180deg); }
}
@keyframes why-flash {
  0%, 40%, 100% { transform: scale(1); opacity: 1; }
  50%           { transform: scale(1.18); opacity: 0.55; }
  60%           { transform: scale(1); opacity: 1; }
}
@keyframes why-ring {
  0%, 50%, 100% { transform: rotate(0deg); }
  10%, 30%      { transform: rotate(-12deg); }
  20%, 40%      { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .why-card,
  .why-chip {transition: box-shadow var(--dur-hover) linear; }
  .why-card:hover,
  .why-card:hover .why-chip {transform: none; }
  .why-ico {animation: none; }
}
.pbk {padding: 7.5rem 0 0; }
.pbk-inner {width: 78.75rem; max-width: calc(100% - 3rem); margin: 0 auto; }
.pbk-top {display: grid; grid-template-columns: minmax(0, 1fr) 36.25rem; gap: 4rem; align-items: start; }
.pbk-h {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.75rem; line-height: 4rem; letter-spacing: -0.08rem; color: var(--ink); }
.pbk-h-em {display: inline-block; background-image: linear-gradient(86.92deg, #111111 70.6%, #e2fa5a 136.9%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pbk-lead {margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.375rem; line-height: 2.125rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.pbk-note {margin: 1.25rem 0 0; padding: 0 0 0 1rem; border-left: 0.125rem solid var(--accent); font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.75rem; letter-spacing: -0.01rem; color: var(--ink-60); }
.pbk-factors {margin: 3.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.pbk-factor {display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem 0.75rem 0.75rem; border-radius: 0.75rem; background: var(--white); box-shadow: 0 0 0 0.0625rem rgba(17, 17, 17, 0.06); transition: box-shadow var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); }
.pbk-fchip {flex: none; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.625rem; background: var(--accent); transition: transform var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium); }
.pbk-fico {width: 1.5rem; height: 1.5rem; background-color: var(--ink); -webkit-mask: var(--pbk-ico) center / contain no-repeat; mask: var(--pbk-ico) center / contain no-repeat; }
.pbk-fico-price {--pbk-ico: url("/assets/img/pbk-ico-price.svg"); }
.pbk-fico-sun {--pbk-ico: url("/assets/img/pbk-ico-sun.svg"); }
.pbk-fico-home {--pbk-ico: url("/assets/img/pbk-ico-home.svg"); }
.pbk-fico-battery {--pbk-ico: url("/assets/img/pbk-ico-battery.svg"); }
.pbk-fico-rate {--pbk-ico: url("/assets/img/pbk-ico-rate.svg"); }
.pbk-fico-export {--pbk-ico: url("/assets/img/pbk-ico-export.svg"); }
.pbk-ft {font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; letter-spacing: -0.03rem; color: var(--ink); }
.pbk-fico {animation: 3.2s var(--ease-sheen) infinite both; }
.pbk-fico-price {animation-name: why-sway; }
.pbk-fico-sun {animation-name: pbk-spin; animation-delay: -0.5s; }
.pbk-fico-home {animation-name: why-flash; animation-delay: -1s; }
.pbk-fico-battery {animation-name: pbk-charge; animation-delay: -1.5s; }
.pbk-fico-rate {animation-name: pbk-climb; animation-delay: -2s; }
.pbk-fico-export {animation-name: pbk-send; animation-delay: -2.5s; }
@keyframes pbk-spin {
  0%, 30%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(45deg); }
}
@keyframes pbk-charge {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  45%      { transform: scaleX(1.12); opacity: 0.6; }
}
@keyframes pbk-climb {
  0%, 60%, 100% { transform: translate(0, 0); }
  30%           { transform: translate(0.125rem, -0.1875rem); }
}
@keyframes pbk-send {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(0.1875rem); }
}
.pbk-factor:hover {transform: translateY(-0.1875rem); box-shadow: 0 1.125rem 2.5rem -1.25rem rgba(17, 17, 17, 0.22); }
.pbk-factor:hover .pbk-fchip {transform: scale(1.06); box-shadow: 0 0 0 0.25rem rgba(226, 250, 90, 0.35); }
.pbk-cta {position: relative; margin: 4rem 0 0; min-height: 33.75rem; border-radius: 1rem; background: var(--ink); overflow: hidden; isolation: isolate; }
.pbk-dots {position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='4' height='4' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"); background-size: 1.5rem 1.5rem; background-position: 1.375rem 1.25rem; pointer-events: none; }
.pbk-glow {position: absolute; z-index: -1; left: -12rem; bottom: -16rem; width: 40rem; height: 26rem; border-radius: 50%; background: rgba(226, 250, 90, 0.32); filter: blur(6rem); pointer-events: none; }
.pbk-shot {position: absolute; top: 0; right: 0; bottom: 0; width: 43.75rem; overflow: hidden; }
.pbk-shot img {display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 40% 50%; transition: transform var(--dur-zoom) var(--ease-premium); }
.pbk-shot::after {content: ""; position: absolute; inset: 0; background: linear-gradient(to right, #111111 0%, rgba(17, 17, 17, 0.85) 14%, rgba(17, 17, 17, 0) 48%), linear-gradient(to top, rgba(17, 17, 17, 0.7) 0%, rgba(17, 17, 17, 0) 40%); pointer-events: none; }
.pbk-cta:hover .pbk-shot img {transform: scale(1.06); }
.pbk-tags {position: absolute; z-index: 1; right: 2rem; bottom: 2rem; margin: 0; padding: 0; list-style: none; display: flex; gap: 0.5rem; }
.pbk-tag {display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem 0.5rem 0.75rem; border-radius: 6.25rem; background: rgba(17, 17, 17, 0.5); box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(0.625rem); backdrop-filter: blur(0.625rem); font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; color: var(--white); }
.pbk-tag::before {content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0.1875rem rgba(226, 250, 90, 0.22); }
.pbk-body {position: relative; z-index: 1; width: 42.5rem; padding: 5rem 0 5rem 5rem; }
.pbk-cta-h {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.25rem; line-height: 3.75rem; letter-spacing: -0.08rem; color: var(--white); }
.pbk-cta-em {display: inline-block; background-image: linear-gradient(86.5deg, #ffffff 0%, #e2fa5a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pbk-cta-p {margin: 1.5rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.25rem; line-height: 1.875rem; letter-spacing: -0.01rem; color: rgba(255, 255, 255, 0.72); }
.pbk-btn {margin-top: 2.5rem; background: var(--accent); }
.pbk-btn:hover {background: #eaff78; box-shadow: 0 1rem 2.125rem -1rem rgba(226, 250, 90, 0.55), inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.12); }
.pbk-btn:active {box-shadow: 0 0.1875rem 0.625rem -0.375rem rgba(226, 250, 90, 0.5), inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.12); }
.pbk-btn:hover .chip {box-shadow: 0 0 0 0.1875rem rgba(17, 17, 17, 0.18); }
.pbk-btn:focus-visible {outline-color: var(--accent); }
.pbk-btn .chip {background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .pbk-factor,
  .pbk-fchip,
  .pbk-shot img {transition: none; }
  .pbk-factor:hover,
  .pbk-factor:hover .pbk-fchip,
  .pbk-cta:hover .pbk-shot img {transform: none; }
  .pbk-fico {animation: none; }
}
.abt {padding: 7.5rem 0 0; }
.abt-inner {width: 78.75rem; max-width: calc(100% - 3rem); margin: 0 auto; }
.abt-intro {max-width: 51.25rem; margin: 0 auto; text-align: center; }
.abt-h {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.75rem; line-height: 4rem; letter-spacing: -0.08rem; color: var(--ink); }
.abt-h-em {display: inline-block; background-image: linear-gradient(85.1deg, #111111 70.6%, #e2fa5a 135.8%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.abt-p {margin: 1.5rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.375rem; line-height: 2.125rem; letter-spacing: -0.01rem; color: var(--ink-70); }
.abt-links {margin: 1.25rem 0 0; font-family: var(--font-sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.75rem; color: var(--ink-70); }
.abt-plain {font-weight: 500; color: var(--ink); }
.abt-link {font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.125rem; transition: text-decoration-thickness var(--dur-hover) var(--ease-premium), text-underline-offset var(--dur-hover) var(--ease-premium); }
.abt-link:hover {text-decoration-thickness: 0.125rem; text-underline-offset: 0.25rem; }
.abt-link:focus-visible {outline: 0.125rem solid var(--ink); outline-offset: 0.25rem; border-radius: 0.25rem; }
.abt-strip {position: relative; isolation: isolate; overflow: hidden; margin: 3.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 1rem; background: radial-gradient(60% 140% at 100% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%), var(--accent); box-shadow: 0 1.5rem 3rem -2rem rgba(17, 17, 17, 0.35); }
.abt-cell {position: relative; padding: 2.5rem 2rem; }
.abt-cell + .abt-cell::before {content: ""; position: absolute; left: 0; top: 2.5rem; bottom: 2.5rem; width: 0.0625rem; background-image: repeating-linear-gradient( to bottom, rgba(17, 17, 17, 0.28) 0 0.5rem, transparent 0.5rem 1rem ); }
.abt-num {margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 3.5rem; line-height: 3.5rem; letter-spacing: -0.14rem; color: var(--ink); }
.abt-seal {position: relative; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--white); }
.abt-seal img {width: 1.5rem; height: 1.5rem; }
.abt-logo {display: block; width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; object-fit: cover; box-shadow: 0 0.5rem 1.25rem -0.75rem rgba(17, 17, 17, 0.45); }
.abt-badge {display: inline-flex; align-items: center; height: 3.5rem; padding: 0 1rem; border-radius: 0.75rem; background: var(--ink); box-shadow: 0 0.5rem 1.25rem -0.75rem rgba(17, 17, 17, 0.45); }
.abt-badge img {display: block; width: auto; height: 1.75rem; }
.abt-seal::before {content: ""; position: absolute; inset: -0.375rem; border-radius: 50%; border: 0.0625rem dashed rgba(17, 17, 17, 0.4); animation: abt-turn 16s linear infinite; }
@keyframes abt-turn {
  to { transform: rotate(360deg); }
}
.abt-t {margin: 1.25rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.875rem; letter-spacing: -0.03rem; color: var(--ink); }
.abt-s {margin: 0.375rem 0 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5rem; color: var(--ink-70); }
.abt-fine {margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abt-col {padding: 0 2rem; }
.abt-col + .abt-col {box-shadow: inset 0.0625rem 0 0 rgba(17, 17, 17, 0.1); }
.abt-dt {font-family: var(--font-ui); font-weight: 600; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.06rem; text-transform: uppercase; color: var(--ink-60); }
.abt-dd {margin: 0.5rem 0 0; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; line-height: 1.5rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .abt-seal::before {animation: none; }
  .abt-link {transition: none; }
}

/* ---- from reference home-mobile.css ---- */
@media (max-width: 767.98px) {
  .cost {padding: 2.5rem 0 0; }
  .cost-inner {width: auto; max-width: none; margin: 0 1.25rem; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cost-h {font-size: 2.5rem; line-height: 3rem; }
  .cost-h-em {background-image: linear-gradient(86.9deg, #111111 70.6%, #e2fa5a 136.5%); }
  .cost-p {margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.75rem; }
  .cost-note {margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
  .cost-cta {margin-top: 2rem; }
  .cost-card {padding: 1.5rem; }
  .cost-card-h {font-size: 1.5rem; line-height: 2rem; }
  .cost-row {gap: 0.75rem; }
  .cost-row-t {font-size: 1rem; line-height: 1.375rem; }
  .bill {padding: 2.5rem 0 0; }
  .bill-band {width: auto; max-width: none; margin: 0 1.25rem; padding: 2.5rem 0; }
  .bill-inner {width: auto; max-width: none; margin: 0 1.25rem; }
  .bill-top {grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .bill-cta {display: none; }
  .bill-h {font-size: 2.5rem; line-height: 3rem; }
  .bill-h-em {background-image: linear-gradient(86.89deg, #ffffff 0.14%, #e2fa5a 121.28%); }
  .bill-p {font-size: 1.25rem; line-height: 1.75rem; }
  .bill-note {margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
  .bill-subrow {margin-top: 2.5rem; gap: 1rem; }
  .bill-sub {font-size: 1.5rem; line-height: 2rem; }
  .bill-grid {margin-top: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bill-tile {min-height: 8.5rem; padding: 1rem; gap: 1rem; }
  .bill-chip {width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; }
  .bill-ico {width: 1.5rem; height: 1.5rem; }
  .bill-idx {top: 1rem; right: 1rem; font-size: 0.75rem; line-height: 2.5rem; }
  .bill-tile-t {font-size: 1rem; line-height: 1.375rem; }
  .wx {padding: 2.5rem 0 0; }
  .wx-inner {width: auto; max-width: none; margin: 0 1.25rem; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .wx-left {gap: 1.5rem; }
  .wx-h {font-size: 2.5rem; line-height: 3rem; }
  .wx-h-em {background-image: linear-gradient(86.38deg, #111111 70.6%, #e2fa5a 136.4%); }
  .wx-art {flex: none; min-height: 0; height: 12.5rem; }
  .wx-card {padding: 1.5rem; }
  .wx-p {font-size: 1.25rem; line-height: 1.75rem; }
  .wx-rule {margin: 1.25rem 0; }
  .wx-note {font-size: 1rem; line-height: 1.5rem; }
  .wx-src {margin-top: 1rem; font-size: 0.875rem; line-height: 1.375rem; }
  .why {padding: 2.5rem 0; }
  .why-inner {width: auto; max-width: none; margin: 0 1.25rem; }
  .why-h {font-size: 2.5rem; line-height: 3rem; }
  .why-h-em {background-image: linear-gradient(87.29deg, #111111 70.6%, #e2fa5a 136.8%); }
  .why-tray {margin-top: 1.5rem; padding: 0.5rem; border-radius: 0.875rem; }
  .why-grid {grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .why-card {padding: 1.5rem; }
  .why-idx {top: 1.5rem; right: 1.5rem; }
  .why-card-t {margin-top: 1.25rem; font-size: 1.375rem; line-height: 1.875rem; }
  .why-card-p {margin-top: 0.5rem; font-size: 1rem; line-height: 1.5rem; }
  .why-glow {right: -12rem; bottom: -10rem; width: 26rem; height: 22rem; }
  .pbk {padding: 2.5rem 0 0; }
  .pbk-inner {width: auto; max-width: none; margin: 0 1.25rem; }
  .pbk-top {grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .pbk-h {font-size: 2.5rem; line-height: 3rem; }
  .pbk-lead {font-size: 1.125rem; line-height: 1.75rem; }
  .pbk-note {font-size: 1rem; line-height: 1.5rem; }
  .pbk-factors {margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .pbk-ft {font-size: 1.125rem; line-height: 1.5rem; }
  .pbk-cta {margin-top: 2rem; min-height: 0; display: flex; flex-direction: column; }
  .pbk-shot {position: relative; width: auto; height: 15rem; }
  .pbk-shot::after {bottom: -0.0625rem; background: linear-gradient(to top, #111111 0%, rgba(17, 17, 17, 0) 55%); }
  .pbk-tags {left: 1rem; right: 1rem; bottom: 0.75rem; gap: 0.375rem; }
  .pbk-tag {gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; padding: 0.375rem 0.625rem 0.375rem 0.5rem; }
  .pbk-body {width: auto; padding: 1.5rem 1.5rem 2rem; }
  .pbk-cta-h {font-size: 2rem; line-height: 2.5rem; }
  .pbk-cta-p {margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
  .pbk-btn {margin-top: 1.75rem; }
  .pbk-glow {left: -10rem; bottom: -10rem; width: 26rem; height: 20rem; }
  .abt {padding: 2.5rem 0 0; }
  .abt-inner {width: auto; max-width: none; margin: 0 1.25rem; }
  .abt-h {font-size: 2.5rem; line-height: 3rem; }
  .abt-p {margin-top: 1rem; font-size: 1.125rem; line-height: 1.75rem; }
  .abt-links {margin-top: 1rem; font-size: 1rem; line-height: 1.625rem; }
  .abt-strip {margin-top: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 0.875rem; }
  .abt-cell {padding: 1.5rem 1.25rem; }
  .abt-cell + .abt-cell::before {top: 1.5rem; bottom: 1.5rem; }
  .abt-cell:nth-child(3)::before {top: 0; bottom: auto; left: 1.25rem; right: 1.25rem; width: auto; height: 0.0625rem; background-image: repeating-linear-gradient( to right, rgba(17, 17, 17, 0.28) 0 0.5rem, transparent 0.5rem 1rem ); }
  .abt-cell:nth-child(4)::after {content: ""; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 0.0625rem; background-image: repeating-linear-gradient( to right, rgba(17, 17, 17, 0.28) 0 0.5rem, transparent 0.5rem 1rem ); }
  .abt-cell:nth-child(4)::before {top: 1.5rem; }
  .abt-num {font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.08rem; }
  .abt-seal {width: 2.5rem; height: 2.5rem; }
  .abt-seal img {width: 1.125rem; height: 1.125rem; }
  .abt-seal::before {inset: -0.3125rem; }
  .abt-badge {height: 2.5rem; padding: 0 0.625rem; border-radius: 0.5rem; }
  .abt-badge img {height: 1.25rem; }
  .abt-logo {width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; }
  .abt-t {margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.375rem; }
  .abt-s {margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; }
  .abt-fine {margin-top: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .abt-col {padding: 0 1rem 0 0; }
  .abt-col + .abt-col {box-shadow: none; }
  .abt-dd {font-size: 0.9375rem; line-height: 1.375rem; }
}

/* Off-screen pause for the looping marks above. PauseOffscreenAnimations.tsx
   sets [data-offscreen] on a section only while it is more than 200px outside
   the viewport, and clears it before the section scrolls into view — so no
   loop is ever seen paused. A whole section pauses and resumes together, which
   keeps the staggered `animation-delay` phases between its icons intact. */
[data-offscreen] .bill-ico,
[data-offscreen] .why-ico,
[data-offscreen] .pbk-fico,
[data-offscreen] .wx-art::before,
[data-offscreen] .abt-seal::before { animation-play-state: paused; }