.home-story-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: inherit;
  font-weight: 800;
}

.solar-story {
  width: min(1180px, calc(100vw - 28px));
  height: min(820px, calc(100dvh - 28px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  overflow: hidden;
  background: #0b1210;
  color: #f4f7f2;
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
}

.solar-story::backdrop {
  background: rgba(2,8,6,.78);
  backdrop-filter: blur(12px);
}

.solar-story-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  background:
    radial-gradient(circle at 80% 12%, rgba(200,255,87,.12), transparent 28%),
    radial-gradient(circle at 10% 80%, rgba(84,207,194,.09), transparent 30%),
    linear-gradient(155deg, #0c1412, #101c18 58%, #0a110f);
}

.solar-story-topbar,
.solar-story-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border-color: rgba(255,255,255,.08);
}

.solar-story-topbar { border-bottom: 1px solid rgba(255,255,255,.08); }
.solar-story-controls { border-top: 1px solid rgba(255,255,255,.08); }
.solar-story-topbar > div:first-child { display: grid; gap: 2px; }
.solar-story-topbar .eyebrow { color: #98aaa1; font-size: .68rem; letter-spacing: .13em; }

.solar-story-progress { display: flex; gap: 7px; }
.solar-story-progress span {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: background .2s ease, width .2s ease;
}
.solar-story-progress span[data-state="current"] { width: 42px; background: #c8ff57; }

.solar-story-close {
  justify-self: end;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 1.5rem;
}

.solar-story-track {
  display: flex;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.solar-story-track::-webkit-scrollbar { display: none; }

.solar-story-chapter {
  flex: 0 0 100%;
  min-width: 0;
  overflow-y: auto;
  scroll-snap-align: start;
  padding: clamp(26px, 5vw, 64px);
}

.solar-story-cover {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  grid-template-rows: 1fr auto;
  gap: 32px 42px;
  align-items: center;
}

.solar-story-cover-copy { display: grid; gap: 14px; align-content: center; }
.solar-story-cover-copy .eyebrow,
.solar-story-section-copy .eyebrow { color: #a9b8b0; letter-spacing: .14em; font-size: .72rem; }
.solar-story-cover h1,
.solar-story-section-copy h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 6.2rem);
  line-height: .92;
  letter-spacing: -.055em;
}
.solar-story-cover h1 em { color: #c8ff57; font-style: normal; }
.solar-story-cover-copy > p { margin: 0; color: #b8c7c0; font-size: 1.02rem; }

.solar-story-recommendation {
  display: grid;
  gap: 5px;
  max-width: 620px;
  padding: 18px 20px;
  border: 1px solid rgba(200,255,87,.2);
  border-radius: 18px;
  background: rgba(200,255,87,.07);
}
.solar-story-recommendation small { color: #b6c6bd; text-transform: uppercase; letter-spacing: .1em; }
.solar-story-recommendation strong { color: #f3ffd9; font-size: 1.2rem; }
.solar-story-recommendation span { color: #c8d3cd; line-height: 1.5; }

.solar-story-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.story-orbit {
  position: absolute;
  border: 1px solid rgba(200,255,87,.2);
  border-radius: 50%;
  animation: story-spin 18s linear infinite;
}
.story-orbit-one { inset: 9%; }
.story-orbit-two { inset: 22%; border-color: rgba(84,207,194,.24); animation-direction: reverse; animation-duration: 13s; }
.story-orbit::after {
  content: "";
  position: absolute;
  top: 3%; left: 48%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #c8ff57;
  box-shadow: 0 0 24px rgba(200,255,87,.8);
}
.solar-story-visual > i {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
}
.solar-story-visual > i:nth-of-type(1) { top: 16%; left: 22%; }
.solar-story-visual > i:nth-of-type(2) { right: 17%; top: 36%; }
.solar-story-visual > i:nth-of-type(3) { left: 24%; bottom: 17%; }
.story-core {
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,255,87,.2), rgba(200,255,87,.05) 55%, transparent 56%);
  border: 1px solid rgba(200,255,87,.24);
}
.story-core span { font-size: clamp(2.2rem, 4vw, 4.2rem); font-weight: 900; letter-spacing: -.05em; }
.story-core small { margin-top: -22px; color: #b8c7c0; }

.solar-story-hero-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
}
.solar-story-hero-metrics div { display: grid; gap: 6px; padding: 18px 20px; background: rgba(11,18,16,.92); }
.solar-story-hero-metrics dt { color: #91a29a; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.solar-story-hero-metrics dd { margin: 0; font-size: 1.35rem; font-weight: 900; }

.solar-story-section-copy { display: grid; gap: 16px; max-width: 900px; margin-bottom: 38px; }
.solar-story-section-copy h2 { font-size: clamp(2.4rem, 5vw, 5rem); }
.solar-story-section-copy p { max-width: 720px; margin: 0; color: #b6c6be; font-size: 1.05rem; line-height: 1.6; }

.solar-story-site-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.solar-story-site-grid article,
.solar-story-selected {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
}
.solar-story-site-grid small,
.solar-story-selected small { color: #9baca4; text-transform: uppercase; letter-spacing: .09em; }
.solar-story-site-grid strong { display: block; margin: 12px 0; color: #eef8f2; font-size: clamp(2.4rem, 5vw, 4.8rem); letter-spacing: -.05em; }
.solar-story-site-grid p,
.solar-story-selected p { color: #b8c7c0; line-height: 1.55; }
.solar-story-deep-link { display: inline-flex; margin-top: 22px; color: #dfff94; font-weight: 850; text-decoration: none; }

.solar-story-compare-head,
.solar-story-option {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(100px, .7fr));
  gap: 12px;
  align-items: center;
}
.solar-story-compare-head { padding: 0 18px 8px; color: #84958d; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.solar-story-options { display: grid; gap: 8px; }
.solar-story-option {
  width: 100%;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  color: #e9f1ed;
  text-align: left;
}
.solar-story-option > span:first-child { display: grid; gap: 3px; }
.solar-story-option small { color: #c8ff57; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.solar-story-option[aria-pressed="true"] { border-color: rgba(200,255,87,.4); background: rgba(200,255,87,.09); box-shadow: inset 3px 0 #c8ff57; }
.solar-story-selected { margin-top: 18px; }
.solar-story-selected strong { display: block; margin: 8px 0 0; font-size: 1.35rem; }

.solar-story-readiness { display: grid; gap: 8px; max-width: 840px; padding: 0; list-style: none; }
.solar-story-readiness li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.solar-story-readiness li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.06); font-weight: 900; }
.solar-story-readiness li[data-story-readiness="ready"] > span { background: rgba(200,255,87,.14); color: #dfff94; }
.solar-story-readiness li div { display: grid; gap: 2px; }
.solar-story-readiness li small { color: #8ea097; }
.solar-story-readiness li a { color: #dfff94; text-decoration: none; font-weight: 800; }
.solar-story-final-actions { display: flex; gap: 14px; align-items: center; margin-top: 26px; }
.solar-story-final-actions > a:not(.primary) { color: #dfff94; text-decoration: none; font-weight: 800; }

.solar-story-controls button {
  min-width: 120px;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #eaf1ed;
}
.solar-story-controls button:last-child { justify-self: end; }
.solar-story-controls span { color: #91a29a; font-size: .78rem; }

@keyframes story-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .solar-story { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .solar-story-topbar,
  .solar-story-controls { padding: 14px 16px; }
  .solar-story-progress { display: none; }
  .solar-story-topbar { grid-template-columns: 1fr auto; }
  .solar-story-topbar > .solar-story-progress { display: none; }
  .solar-story-cover { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .solar-story-visual { max-width: 300px; }
  .solar-story-hero-metrics,
  .solar-story-site-grid { grid-template-columns: 1fr; }
  .solar-story-compare-head { display: none; }
  .solar-story-option { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .solar-story-option > span:first-child { grid-column: 1 / -1; }
  .solar-story-controls { grid-template-columns: 1fr auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .story-orbit { animation: none; }
  .solar-story-progress span { transition: none; }
  .solar-story-track { scroll-behavior: auto; }
}