/* Household energy storage offer page. */
body.page-id-7736 {
  --hs-green: var(--asta-color-green);
  --hs-green-dark: #286b25;
  --hs-ink: var(--asta-color-ink-soft);
  --hs-copy: var(--asta-color-copy);
  --hs-line: #dfe7dd;
  --hs-surface: #f4f7f2;
  --hs-content: var(--asta-measure-content);
  --hs-gutter: clamp(20px, 4vw, 48px);
  --storage-green: var(--hs-green);
  --storage-green-dark: var(--hs-green-dark);
  --storage-ink: var(--hs-ink);
  --storage-copy: var(--hs-copy);
  --storage-line: var(--hs-line);
  --storage-surface: var(--hs-surface);
  --storage-content: var(--hs-content);
}

body.page-id-7736 .wp-block-post-content {
  min-width: 0;
  color: var(--hs-ink);
  background: var(--asta-color-white);
}

body.page-id-7736 .wp-block-post-content > .asta-layout.asta-layout {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  --wp--style--block-gap: 0px;
}

body.page-id-7736 .ae-home-storage-lp,
body.page-id-7736 .ae-home-storage-lp * {
  box-sizing: border-box;
}

body.page-id-7736 .wp-block-post-content > .asta-layout > .ae-business-lp.ae-home-storage-lp > :is(section.hs-section--surface, section.hs-process) {
  background: var(--hs-surface) !important;
}

body.page-id-7736 .hs-container > *,
body.page-id-7736 .hs-section-heading > * {
  min-width: 0;
}

body.page-id-7736 .hs-section-heading {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin: 0 0 clamp(28px, 3.1vw, 40px);
}

body.page-id-7736 .hs-title {
  max-width: 23ch;
}

body.page-id-7736 .hs-process > .hs-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-id-7736 .hs-process .hs-title { margin-bottom: 8px; }
body.page-id-7736 .hs-process .hs-lead { margin-bottom: 30px; }

body.page-id-7736 .hs-process .asta-process-steps {
  width: 100%;
  max-width: none;
}

/* Lift the process panel over the hero without shifting its nested layout wrapper. */
body.page-id-7736 .hs-process {
  position: relative;
  z-index: 2;
  top: -70px;
  width: min(calc(100% - 40px), 1260px);
  max-width: none;
  margin: 0 auto -70px;
  padding: clamp(48px, 4.4vw, 56px) clamp(22px, 3vw, 40px) 38px;
  border: 1px solid var(--hs-line);
  border-radius: 20px;
  background: var(--asta-color-surface-green) !important;
  box-shadow: 0 18px 44px rgb(32 38 45 / 10%);
}


body.page-id-7736 .hs-process + .hs-overview {
  background: var(--asta-color-white) !important;
}



/* Equal benefit cards with the integrated plus tab used across offer pages. */
body.page-id-7736 :is(.hs-benefit-grid, .hs-fit-grid, .hs-scenario-grid, .hs-economics-grid) {
  display: grid;
  min-width: 0;
  align-items: stretch;
  gap: 24px;
  margin: 0;
}

body.page-id-7736 .hs-benefit-grid,
body.page-id-7736 .hs-fit-grid,
body.page-id-7736 .hs-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body.page-id-7736 :is(.hs-benefit-grid, .hs-fit-grid) {
  row-gap: 54px;
  margin-top: 54px;
}

body.page-id-7736 .hs-economics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card, .hs-scenario-card, .hs-economics-card) {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 27px 26px 25px;
  border: 1px solid var(--hs-line);
  border-radius: 15px;
  background: var(--asta-color-white);
  box-shadow: 0 6px 20px rgb(32 38 45 / 4%);
  transition: border-color .22s ease, box-shadow .22s ease, filter .22s ease, opacity .22s ease, transform .22s ease;
}

body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card)::before {
  position: absolute;
  top: calc(var(--ae-benefit-tab-top, -32px) - 1px);
  left: var(--ae-benefit-tab-left, 24px);
  display: block;
  width: var(--ae-benefit-tab-width, 46px);
  height: var(--ae-benefit-tab-height, 32px);
  border: 1px solid var(--hs-line);
  border-bottom: 0;
  border-radius: var(--ae-benefit-tab-radius, 13px) var(--ae-benefit-tab-radius, 13px) 0 0;
  background: var(--asta-color-white);
  content: "";
}

body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card)::after {
  position: absolute;
  top: calc(var(--ae-benefit-tab-top, -32px) + 1px);
  left: calc(var(--ae-benefit-tab-left, 24px) + 1px);
  display: grid;
  width: calc(var(--ae-benefit-tab-width, 46px) - 2px);
  height: calc(var(--ae-benefit-tab-height, 32px) - 2px);
  place-items: center;
  color: var(--hs-green);
  content: "+";
  font-size: var(--ae-benefit-tab-font-size, 1.75rem);
  font-weight: 500;
  line-height: 1;
}

body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card) > h3 {
  margin: 0;
  color: var(--hs-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
}

body.page-id-7736 .hs-benefit-card > .hs-benefit-visual {
  display: grid;
  width: min(100%, 230px);
  height: 154px;
  flex: 0 0 154px;
  place-items: center;
  align-self: center;
  margin: 0 auto 2px;
}

body.page-id-7736 .hs-benefit-card > .hs-benefit-visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  object-fit: contain;
  object-position: center;
}

body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card) > p {
  max-width: 62ch;
  margin: 0;
  color: var(--hs-copy);
  font-size: 16px;
  line-height: 1.62;
}

body.page-id-7736 .hs-benefit-grid:has(.hs-benefit-card:hover) .hs-benefit-card:not(:hover),
body.page-id-7736 .hs-fit-grid:has(.hs-fit-card:hover) .hs-fit-card:not(:hover) {
  filter: grayscale(.78);
  opacity: .58;
}

body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card):hover {
  z-index: 1;
  transform: translateY(-3px);
  border-color: #b9d7ad;
  box-shadow: 0 12px 28px rgb(32 70 23 / 9%);
}

/* Domestic use cases use transparent ASTA line art, contained rather than cropped. */
body.page-id-7736 .hs-scenario-card {
  gap: 14px;
  padding: 20px 22px 24px;
}

body.page-id-7736 .hs-scenario-card figure {
  display: grid;
  width: 100%;
  height: clamp(190px, 20vw, 250px);
  place-items: center;
  margin: 0 0 3px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--hs-surface);
}

body.page-id-7736 .hs-scenario-card figure img {
  display: block;
  width: 100%;
  height: clamp(190px, 20vw, 250px) !important;
  object-fit: contain;
  object-position: center;
}

body.page-id-7736 .hs-scenario-card h3 {
  margin: 0;
  color: var(--hs-ink);
  font-size: 20px;
  line-height: 1.28;
}

body.page-id-7736 .hs-scenario-card p {
  margin: 0;
  color: var(--hs-copy);
  font-size: 16px;
  line-height: 1.62;
}

/* Energy-flow schematic sits on the main grid without an extra decorative panel. */
body.page-id-7736 .hs-overview .hs-section-heading { margin-bottom: 30px; }
body.page-id-7736 .hs-flow-frame { margin: 0; }
body.page-id-7736 .hs-overview .ae-storage-flow { max-width: none; }

body.page-id-7736 .hs-fit-card { padding-top: 31px; }
body.page-id-7736 .hs-fit-card h3 { font-size: 19px; }
body.page-id-7736 .hs-fit-card .hs-fit-visual {
  display: grid;
  width: min(100%, 230px);
  height: 154px;
  flex: 0 0 154px;
  place-items: center;
  align-self: center;
  margin: 0 auto 2px;
}
body.page-id-7736 .hs-fit-card .hs-fit-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body.page-id-7736 .hs-system-intro {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  margin-bottom: 38px;
}

body.page-id-7736 .hs-system-visual {
  display: grid;
  min-width: 0;
  min-height: 320px;
  place-items: center;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--hs-line);
  border-radius: 18px;
  background: var(--hs-surface);
}

body.page-id-7736 .hs-system-visual figure,
body.page-id-7736 .hs-system-visual img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

body.page-id-7736 .hs-system-visual img {
  max-height: 340px;
  object-fit: contain;
}

body.page-id-7736 .hs-system-copy { display: grid; gap: 16px; margin: 0; }
body.page-id-7736 .hs-system-copy .hs-title { max-width: 18ch; }
body.page-id-7736 .hs-system-copy p { margin: 0; }

body.page-id-7736 .hs-economics-card {
  justify-content: flex-start;
  padding: 26px;
}

body.page-id-7736 .hs-economics-card::before {
  width: 42px;
  height: 3px;
  margin-bottom: 5px;
  border-radius: 999px;
  background: var(--hs-green);
  content: "";
}

body.page-id-7736 .hs-economics-card h3 {
  margin: 0;
  color: var(--hs-ink);
  font-size: 19px;
  line-height: 1.3;
}

body.page-id-7736 .hs-economics-card p { margin: 0; }

body.page-id-7736 .hs-economics-note {
  margin-top: 22px;
  padding: 19px 22px;
  border-left: 3px solid var(--hs-green);
  border-radius: 0 12px 12px 0;
  background: #eaf2e5;
}

body.page-id-7736 .hs-economics-note p {
  max-width: 95ch;
  color: #465348;
  font-size: 15px;
}

body.page-id-7736 .hs-prepare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: stretch;
  gap: 24px;
}

body.page-id-7736 .hs-prepare-copy,
body.page-id-7736 .hs-prepare-cta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid var(--hs-line);
  border-radius: 18px;
  background: var(--asta-color-white);
}

body.page-id-7736 .hs-prepare-copy { gap: 14px; }
body.page-id-7736 .hs-prepare-copy .hs-lead { margin-bottom: 2px; }
body.page-id-7736 .hs-prepare-copy ul { display: grid; gap: 11px; margin: 0; padding-left: 21px; color: var(--hs-copy); line-height: 1.55; }
body.page-id-7736 .hs-prepare-copy li::marker { color: var(--hs-green); }

body.page-id-7736 .hs-prepare-cta {
  position: relative;
  isolation: isolate;
  align-items: flex-start;
  gap: 14px;
  overflow: hidden;
  border-color: var(--hs-line);
  background: var(--asta-color-white);
  box-shadow: 0 9px 26px rgb(31 36 44 / 5%);
}

body.page-id-7736 .hs-prepare-cta::before {
  position: absolute;
  z-index: 0;
  inset: -18px -8px -88px auto;
  width: min(94%, 460px);
  background: url('/wp-content/uploads/2026/10/asta-home-pv-thinking-lineart.webp') right center / contain no-repeat;
  opacity: .32;
  transform: translateY(12px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--asta-color-black) 44%, var(--asta-color-black) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--asta-color-black) 44%, var(--asta-color-black) 100%);
  content: '';
  pointer-events: none;
}

body.page-id-7736 .hs-prepare-cta > * { position: relative; z-index: 1; }
body.page-id-7736 .hs-prepare-cta h3 { color: var(--hs-ink); }
body.page-id-7736 .hs-prepare-cta h3 { margin: 0; font-size: 25px; line-height: 1.22; }
body.page-id-7736 .hs-prepare-cta p { margin: 0; color: var(--hs-copy); }

body.page-id-7736 .hs-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 11px 23px;
  border: 1px solid var(--asta-color-action);
  border-radius: 9px;
  background: var(--asta-color-action);
  color: var(--asta-color-white);
  font-weight: 700;
  text-decoration: none;
}

body.page-id-7736 .hs-button:hover { background: #398a0e; color: var(--asta-color-white); }

/* Trust, customer reviews and FAQ follow the established offer-page order. */
/* Overrides the transparent !important section background in migrated/post-7736.css. */
body.page-id-7736 .wp-block-post-content > .asta-layout > .ae-business-lp.ae-home-storage-lp > section.ae-trust-section {
  overflow: hidden;
  background: #f3f6f1 !important;
}

body.page-id-7736 .ae-trust-section > .ae-container > .ae-title {
  max-width: none;
  margin: 0 0 12px;
  color: var(--hs-ink);
  line-height: 1.14;
  text-align: left;
}

body.page-id-7736 .ae-trust-section .ae-trust-showcase { margin-top: 22px; }

body.page-id-7736 .hs-faq .hs-title { margin-bottom: 14px; }
body.page-id-7736 .hs-faq .hs-lead { margin-bottom: 28px; }

body.page-id-7736 .hs-faq .asta-faq-list {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}

body.page-id-7736 .hs-faq .asta-faq-list > details {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--hs-line);
  border-radius: 14px;
  background: var(--asta-color-white);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.page-id-7736 .hs-faq .asta-faq-list > details > summary {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  color: var(--hs-ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

body.page-id-7736 .hs-faq .asta-faq-list > details > summary::after {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border: 1px solid #dce8d5;
  border-radius: 50%;
  color: var(--hs-green);
  content: "+";
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

body.page-id-7736 .hs-faq .asta-faq-list > details[open] > summary::after {
  transform: rotate(45deg);
  border-color: var(--asta-color-action);
  background: var(--asta-color-action);
  color: var(--asta-color-white);
}

body.page-id-7736 .hs-faq .asta-faq-list > details > :not(summary) {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--hs-copy);
  font-size: 16px;
  line-height: 1.65;
}

body.page-id-7736 :is(#proces-magazynu-dom, #jak-dziala-magazyn-dom, #korzysci-magazynu-dom, #zastosowanie-magazynu-dom, #analiza-domu, #dobor-magazynu, #oplacalnosc-magazynu, #opinie-i-doswiadczenie) {
  scroll-margin-top: 92px;
}

@media (max-width: 1000px) {
  body.page-id-7736 .hs-process .asta-process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 38px; }
  body.page-id-7736 .hs-economics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body.page-id-7736 .hs-section { padding-block: 50px; }
  body.page-id-7736 .hs-process {
    top: -46px;
    width: calc(100% - 28px);
    margin-bottom: -46px;
    padding: 28px 20px;
    border-radius: 18px;
  }
  body.page-id-7736 .hs-process .asta-process-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 20px; }
  body.page-id-7736 :is(.hs-benefit-grid, .hs-fit-grid, .hs-scenario-grid, .hs-economics-grid) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body.page-id-7736 :is(.hs-benefit-grid, .hs-fit-grid) { row-gap: 54px; margin-top: 50px; }
  body.page-id-7736 :is(.hs-benefit-card, .hs-fit-card) { padding: 24px 21px 22px; }
  body.page-id-7736 .hs-benefit-card > .hs-benefit-visual { width: min(100%, 210px); height: 140px; flex-basis: 140px; }
  body.page-id-7736 .hs-system-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.page-id-7736 .hs-system-visual { min-height: 240px; }
  body.page-id-7736 .hs-prepare-grid { grid-template-columns: minmax(0, 1fr); }
  body.page-id-7736 .hs-prepare-copy,
  body.page-id-7736 .hs-prepare-cta { padding: 24px 21px; }
  body.page-id-7736 .hs-prepare-cta::before {
    inset: -10px -8px -58px auto;
    width: 88%;
    opacity: .24;
    background-position: right bottom;
    transform: translateY(8px);
  }
  body.page-id-7736 .hs-section-heading { gap: 11px; margin-bottom: 25px; }
  body.page-id-7736 .hs-scenario-card figure { height: 220px; }
  body.page-id-7736 .hs-scenario-card figure img { height: 220px !important; }
  body.page-id-7736 .hs-faq .asta-faq-list > details > summary { min-height: 60px; padding: 15px 16px; font-size: 15px; }
  body.page-id-7736 .hs-faq .asta-faq-list > details > :not(summary) { padding: 0 16px 17px; font-size: 15px; }
}

@media (max-width: 420px) {
  body.page-id-7736 .hs-flow-frame { margin-inline: calc(-1 * (var(--hs-gutter) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-7736 *,
  body.page-id-7736 *::before,
  body.page-id-7736 *::after { scroll-behavior: auto !important; }
}


/* Responsive household energy flow diagram based on the shared storage schematic. */
/* Shared flow diagram: assets/components/storage-flow.css (registered as asta-storage-flow). */

/* A recognizable home-storage image remains visible through the subdued hero video. */
body.page-id-7736 .asta-hero-video {
  background-image: url("/wp-content/uploads/2026/06/magazyny-energii-pila-1536x864.webp");
  background-position: center 54%;
  background-size: cover;
}

body.page-id-7736 .asta-hero-video__media { opacity: .24; }

/* Three key household outcomes fit the desktop grid and stack cleanly on smaller screens. */
body.page-id-7736 .hs-benefit-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-id-7736 .hs-benefit-grid--three > .hs-benefit-card { min-height: 100%; }

body.page-id-7736 .hs-fit-section .hs-system-intro { margin-bottom: 22px; }
body.page-id-7736 .hs-fit-section .hs-system-visual { min-height: 260px; }
body.page-id-7736 .hs-fit-section .hs-system-visual img { max-height: 280px; }
body.page-id-7736 .hs-fit-section .hs-fit-grid { margin-top: 26px; }
body.page-id-7736 .hs-fit-section .hs-fit-card { min-height: 100%; }

body.page-id-7736 .hs-overview .hs-flow-frame { margin-top: 28px; }
body.page-id-7736 .hs-flow-simple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
}

body.page-id-7736 .hs-flow-node {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 280px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 19px 20px 22px;
  border: 1px solid var(--hs-line);
  border-radius: 16px;
  background: var(--asta-color-white);
  box-shadow: 0 8px 22px rgb(31 45 34 / 4%);
  text-align: center;
}

body.page-id-7736 .hs-flow-node:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -22px;
  z-index: 1;
  color: var(--hs-green);
  content: "→";
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-50%);
}

body.page-id-7736 .hs-flow-node figure {
  display: grid;
  width: 100%;
  height: 150px;
  place-items: center;
  margin: 0;
}

body.page-id-7736 .hs-flow-node figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 150px !important;
  max-height: 150px !important;
  object-fit: contain;
}

body.page-id-7736 .hs-flow-node h3 {
  margin: 0;
  color: var(--hs-ink);
  font-size: 19px;
  line-height: 1.28;
}

body.page-id-7736 .hs-flow-node p {
  max-width: 38ch;
  margin: 0;
  color: var(--hs-copy);
  font-size: 15px;
  line-height: 1.55;
}

body.page-id-7736 .hs-flow-caveat {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--hs-line);
  border-radius: 12px;
  background: #f7f9f5;
}

body.page-id-7736 .hs-flow-caveat::before {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #a9d093;
  border-radius: 50%;
  background: var(--asta-color-white);
  color: var(--hs-green-dark);
  content: "i";
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

body.page-id-7736 .hs-flow-caveat p {
  margin: 0;
  color: var(--hs-copy);
  font-size: 15px;
  line-height: 1.6;
}

body.page-id-7736 .hs-flow-caveat strong {
  color: var(--hs-ink);
  font-weight: 700;
}

body.page-id-7736 .ae-trust-section + .hs-faq { background: var(--asta-color-white) !important; }

@media (max-width: 1000px) {
  body.page-id-7736 .hs-benefit-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-id-7736 .hs-benefit-grid--three > .hs-benefit-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 760px) {
  body.page-id-7736 .hs-flow-caveat {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 15px;
  }



  body.page-id-7736 .hs-benefit-grid--three { grid-template-columns: minmax(0, 1fr); }
  body.page-id-7736 .hs-benefit-grid--three > .hs-benefit-card:last-child { grid-column: auto; width: 100%; }
  body.page-id-7736 .hs-fit-section .hs-system-intro { gap: 18px; }
  body.page-id-7736 .hs-fit-section .hs-system-copy { order: 1; }
  body.page-id-7736 .hs-fit-section .hs-system-visual { order: 2; min-height: 210px; }
  body.page-id-7736 .hs-fit-section .hs-system-visual img { max-height: 220px; }
  body.page-id-7736 .hs-flow-simple { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  body.page-id-7736 .hs-flow-node { min-height: 0; padding: 18px 20px 20px; }
  body.page-id-7736 .hs-flow-node figure { height: 128px; }
  body.page-id-7736 .hs-flow-node figure img { height: 128px !important; max-height: 128px !important; }
  body.page-id-7736 .hs-flow-node:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* A looping day cycle links PV production, battery charge and household use. */
body.page-id-7736 .hs-daily-cycle {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--hs-line);
}

body.page-id-7736 .hs-daily-cycle > h3 {
  margin: 0 0 8px;
  color: var(--hs-ink);
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.25;
}

body.page-id-7736 .hs-daily-cycle__intro {
  max-width: 70ch;
  margin: 0;
  color: var(--hs-copy);
  font-size: 16px;
  line-height: 1.55;
}

body.page-id-7736 .hs-daily-cycle__visual {
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  padding: 28px 24px 22px;
  overflow: hidden;
  border: 1px solid var(--hs-line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: var(--asta-color-white);
}

body.page-id-7736 .hs-sky-simulation {
  position: relative;
  width: 100%;
  aspect-ratio: 3.7 / 1;
  flex: 0 0 auto;
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid var(--hs-line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #eef3eb;
}

body.page-id-7736 .hs-sky-simulation__frame {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  object-position: center 60%;
  transition: opacity .65s ease;
}

body.page-id-7736 .hs-daily-cycle[data-phase="morning"] .hs-sky-simulation__frame--morning,
body.page-id-7736 .hs-daily-cycle[data-phase="midday"] .hs-sky-simulation__frame--midday,
body.page-id-7736 .hs-daily-cycle[data-phase="evening"] .hs-sky-simulation__frame--evening,
body.page-id-7736 .hs-daily-cycle[data-phase="night"] .hs-sky-simulation__frame--night {
  opacity: 1;
}

body.page-id-7736 .hs-daily-cycle__svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  max-height: 310px;
  overflow: visible;
}

body.page-id-7736 .hs-daily-cycle__wire {
  fill: none;
  stroke: #dce5d9;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-id-7736 .hs-daily-cycle__flow {
  fill: none;
  stroke: #54a832;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 11 11;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: hs-storage-cycle-flow 1.1s linear infinite;
  transition: opacity .35s ease;
}

@keyframes hs-storage-cycle-flow {
  to { stroke-dashoffset: -44; }
}

body.page-id-7736 .hs-daily-cycle__visual[data-phase="morning"] .hs-daily-cycle__flow--direct,
body.page-id-7736 .hs-daily-cycle__visual[data-phase="midday"] .hs-daily-cycle__flow--direct { opacity: .95; }
body.page-id-7736 .hs-daily-cycle__visual[data-phase="morning"] .hs-daily-cycle__flow--charge { opacity: .45; }
body.page-id-7736 .hs-daily-cycle__visual[data-phase="midday"] .hs-daily-cycle__flow--charge { opacity: .95; }
body.page-id-7736 .hs-daily-cycle__visual[data-phase="evening"] .hs-daily-cycle__flow--discharge,
body.page-id-7736 .hs-daily-cycle__visual[data-phase="night"] .hs-daily-cycle__flow--discharge { opacity: .95; }

body.page-id-7736 .hs-daily-cycle__flow-arrow {
  fill: #54a832;
  opacity: 0;
  transition: opacity .35s ease;
}

body.page-id-7736 .hs-daily-cycle__visual[data-phase="morning"] .hs-daily-cycle__flow-arrow--direct,
body.page-id-7736 .hs-daily-cycle__visual[data-phase="midday"] .hs-daily-cycle__flow-arrow--direct,
body.page-id-7736 .hs-daily-cycle__visual[data-phase="midday"] .hs-daily-cycle__flow-arrow--charge,
body.page-id-7736 .hs-daily-cycle__visual[data-phase="evening"] .hs-daily-cycle__flow-arrow--discharge,
body.page-id-7736 .hs-daily-cycle__visual[data-phase="night"] .hs-daily-cycle__flow-arrow--discharge { opacity: .95; }
body.page-id-7736 .hs-daily-cycle__visual[data-phase="morning"] .hs-daily-cycle__flow-arrow--charge { opacity: .45; }

body.page-id-7736 .hs-daily-cycle__battery-fill {
  fill: #d8edcd;
  transform: scaleY(.38);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 1.1s cubic-bezier(.22, .7, .25, 1);
}

body.page-id-7736 .hs-daily-cycle__visual[data-phase="midday"] .hs-daily-cycle__battery-fill { transform: scaleY(.9); }
body.page-id-7736 .hs-daily-cycle__visual[data-phase="evening"] .hs-daily-cycle__battery-fill { transform: scaleY(.5); }
body.page-id-7736 .hs-daily-cycle__visual[data-phase="night"] .hs-daily-cycle__battery-fill { transform: scaleY(.24); }

body.page-id-7736 .hs-daily-cycle__device-labels {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: -3px;
  color: var(--hs-copy);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

body.page-id-7736 .hs-daily-cycle__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

body.page-id-7736 .hs-daily-cycle__steps li {
  min-width: 0;
  margin: 0;
  padding: 14px 15px 16px;
  border: 1px solid var(--hs-line);
  border-radius: 12px;
  background: var(--asta-color-white);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

body.page-id-7736 .hs-daily-cycle__steps li[aria-current="step"] {
  border-color: #a9d093;
  background: #f1f8ed;
  box-shadow: 0 5px 14px rgb(47 100 34 / 6%);
}

body.page-id-7736 .hs-daily-cycle__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  padding: 5px 9px;
  border: 1px solid #dce9d5;
  border-radius: 999px;
  background: #f3f8ef;
  color: var(--hs-green-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}

body.page-id-7736 .hs-daily-cycle__time svg {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body.page-id-7736 .hs-daily-cycle__steps h4 {
  margin: 0 0 6px;
  color: var(--hs-ink);
  font-size: 16px;
  line-height: 1.3;
}

body.page-id-7736 .hs-daily-cycle__steps p {
  margin: 0;
  color: var(--hs-copy);
  font-size: 14px;
  line-height: 1.5;
}

body.page-id-7736 .hs-daily-cycle__note {
  margin: 14px 0 0;
  color: var(--hs-copy);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 920px) {
  body.page-id-7736 .hs-daily-cycle__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-id-7736 .hs-daily-cycle__visual { min-height: 330px; }
}

@media (max-width: 760px) {
  body.page-id-7736 .hs-daily-cycle { margin-top: 28px; padding-top: 24px; }
  body.page-id-7736 .hs-daily-cycle__visual { min-height: 0; padding: 14px 12px 10px; }
  body.page-id-7736 .hs-sky-simulation { aspect-ratio: 2.7 / 1; }
  body.page-id-7736 .hs-daily-cycle__steps { gap: 9px; }
  body.page-id-7736 .hs-daily-cycle__steps li { padding: 12px 12px 14px; }
}

@media (max-width: 360px) {
  body.page-id-7736 .hs-daily-cycle__steps { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-7736 .hs-daily-cycle__flow { animation: none; }
  body.page-id-7736 .hs-sky-simulation__frame { transition: none; }
  body.page-id-7736 .hs-daily-cycle__battery-fill,
  body.page-id-7736 .hs-daily-cycle__steps li { transition: none; }
}

/* The battery-system drawing spans the selection section as a subtle backdrop. */
body.page-id-7736 .hs-fit-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.page-id-7736 .hs-fit-section > .hs-container { position: relative; }

body.page-id-7736 .hs-fit-section .hs-system-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: .22;
  pointer-events: none;
}

body.page-id-7736 .hs-fit-section .hs-system-visual figure,
body.page-id-7736 .hs-fit-section .hs-system-visual img {
  width: 100%;
  height: 100%;
  max-height: none;
}

body.page-id-7736 .hs-fit-section .hs-system-visual figure {
  display: grid;
  place-items: start;
}

body.page-id-7736 .hs-fit-section .hs-system-visual img {
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: min(78%, 680px);
  object-fit: contain;
  object-position: center;
}

body.page-id-7736 .hs-fit-section .hs-system-copy,
body.page-id-7736 .hs-fit-section .hs-fit-grid {
  position: relative;
  z-index: 1;
}

body.page-id-7736 .hs-fit-section .hs-system-copy > .hs-copy:last-child {
  margin-bottom: 44px;
}

@media (min-width: 761px) {
  body.page-id-7736 .hs-fit-section .hs-system-copy { grid-column: 2; }
  body.page-id-7736 .hs-fit-section .hs-system-visual img {
    transform: translateX(-130px) scale(1.16);
    transform-origin: top left;
  }
}

@media (max-width: 760px) {
  body.page-id-7736 .hs-fit-section .hs-system-visual img {
    max-width: 92%;
    max-height: min(55%, 480px);
    transform: none;
  }
  body.page-id-7736 .hs-fit-section .hs-system-copy { grid-column: 1; }
}

@media (min-width: 1001px) {
  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(250px, 1fr));
    column-gap: 36px;
    row-gap: 58px;
    align-items: stretch;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    gap: 16px;
    padding: 30px 32px;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(1) > .hs-benefit-visual {
    width: min(100%, 340px);
    height: 220px;
    flex-basis: 220px;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(1) > h3 {
    font-size: 24px;
    line-height: 1.24;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(1) > p {
    font-size: 17px;
    line-height: 1.62;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(n + 2) {
    display: grid;
    grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 22px;
    row-gap: 12px;
    align-items: center;
    padding: 24px 26px;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(n + 2) > .hs-benefit-visual {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 150px;
    height: 126px;
    flex: none;
    align-self: center;
    margin: 0;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(n + 2) > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 19px;
  }

  body.page-id-7736 #korzysci-magazynu-dom .hs-benefit-card:nth-child(n + 2) > p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 16px;
    line-height: 1.55;
  }
}