:root {
  --ink: #10261f;
  --muted: #5b6f68;
  --forest: #073b32;
  --forest-2: #0d5547;
  --mint: #b8f0d6;
  --lime: #d9f99d;
  --cream: #f7f6ef;
  --paper: #ffffff;
  --line: #dce6e1;
  --orange: #f28b5b;
  --shadow: 0 28px 80px rgba(7, 59, 50, 0.14);
  --radius: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  letter-spacing: -0.035em;
  line-height: 1.08;
}

h1 {
  margin-bottom: 26px;
  /* The hero copy sits in the NARROWER grid track (0.92fr against a 520px-min visual), so the
     ceiling has to suit that column, not the viewport. At 5.8rem a word like "OpenSolar," ate most
     of the line and the headline broke into five lines with "and" and "sync." stranded alone. */
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  font-weight: 760;
  /* Distribute the words evenly across lines instead of filling greedily and orphaning the last
     one or two. Ignored by browsers that do not support it, which just get the old greedy wrap. */
  text-wrap: balance;
}

h1 em {
  /* Its own block so text-wrap balances this clause independently of the bold line above it.
     Left inline it inherited the bold line's wrapping and stranded the final word ("entry.")
     alone. The markup therefore has no <br> before it — this provides the break. */
  display: block;
  text-wrap: balance;
  color: var(--forest-2);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.35rem, 4.4vw, 4.35rem);
  font-weight: 730;
}

h3 {
  margin-bottom: 14px;
  font-size: 1.45rem;
}

.shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.narrow {
  max-width: 850px;
}

.centered {
  text-align: center;
}

.section {
  padding: 112px 0;
}

.section-lede {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  line-height: 1.75;
}

.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  color: var(--forest-2);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 28px;
  height: 2px;
  background: var(--orange);
}

.centered-eyebrow {
  justify-content: center;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  transform: translateY(-150%);
  border-radius: 8px;
  background: var(--ink);
  color: white;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(220, 230, 225, 0.85);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

.nav-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 34px;
  align-items: center;
  min-height: 82px;
}

.brand {
  width: 206px;
}

.brand img {
  width: 100%;
  height: auto;
}

nav {
  display: flex;
  gap: 32px;
}

nav a,
.footer-links a,
.text-link {
  text-decoration: none;
}

nav a {
  color: #334b43;
  font-size: 0.94rem;
  font-weight: 650;
}

nav a:hover,
nav a:focus-visible,
.footer-links a:hover,
.text-link:hover {
  color: var(--forest-2);
}

.button {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--forest);
  box-shadow: 0 10px 28px rgba(7, 59, 50, 0.18);
  color: white;
  font-weight: 750;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.button:hover,
.button:focus-visible {
  background: var(--forest-2);
  box-shadow: 0 14px 36px rgba(7, 59, 50, 0.25);
  transform: translateY(-2px);
}

.button-small {
  justify-self: end;
  min-height: 44px;
  padding-inline: 20px;
  font-size: 0.9rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 112px;
  background:
    radial-gradient(circle at 12% 12%, rgba(184, 240, 214, 0.45), transparent 26%),
    radial-gradient(circle at 88% 24%, rgba(217, 249, 157, 0.3), transparent 23%),
    var(--cream);
}

.hero::after {
  position: absolute;
  right: -160px;
  bottom: -300px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(7, 59, 50, 0.08);
  border-radius: 50%;
  content: "";
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: 64px;
  align-items: center;
}

.hero-lede {
  max-width: 640px;
  margin-bottom: 34px;
  color: #465f56;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-bottom: 28px;
}

.text-link {
  color: var(--forest);
  font-weight: 750;
}

.hero-notes {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  list-style: none;
}

.hero-notes li {
  position: relative;
}

.hero-notes li + li::before {
  position: absolute;
  left: -16px;
  content: "·";
}

.hero-visual {
  position: relative;
  overflow: visible;
  border: 8px solid white;
  border-radius: 21px;
  background: white;
  box-shadow: var(--shadow);
  transform: rotate(1.2deg);
}

.hero-shot-crop {
  overflow: hidden;
  aspect-ratio: 1386 / 720;
  border-radius: 0 0 13px 13px;
}

.hero-shot-crop img {
  width: 100%;
  height: auto;
}

.window-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.window-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c5d2cc;
}

.window-bar > span:first-child {
  background: var(--orange);
}

.window-bar p {
  margin: 0 0 0 8px;
  color: #70827a;
  font-size: 0.65rem;
}

.sync-pulse {
  position: absolute;
  right: -30px;
  bottom: -27px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  border: 1px solid #d8e7df;
  border-radius: 14px;
  background: white;
  box-shadow: 0 18px 45px rgba(7, 59, 50, 0.18);
  transform: rotate(-1.2deg);
}

.sync-pulse i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--forest);
  font-style: normal;
  font-weight: 900;
}

.sync-pulse span,
.sync-pulse strong {
  display: block;
}

.sync-pulse span {
  color: var(--muted);
  font-size: 0.72rem;
}

.sync-pulse strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.proof-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.proof-grid p {
  display: flex;
  flex-direction: column;
  min-height: 118px;
  margin: 0;
  padding: 30px;
  border-left: 1px solid var(--line);
}

.proof-grid p:last-child {
  border-right: 1px solid var(--line);
}

.proof-grid strong {
  font-size: 1rem;
}

.proof-grid span {
  color: var(--muted);
  font-size: 0.82rem;
}

.problem {
  background: white;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 0.75fr;
  gap: 18px;
  margin-top: 66px;
}

.feature-card {
  min-height: 330px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfa;
}

.feature-card:first-child {
  grid-row: span 2;
  min-height: 678px;
}

.feature-card:last-child {
  grid-column: 2 / 4;
}

.feature-card p {
  color: var(--muted);
}

.feature-card-dark {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 90% 10%, rgba(184, 240, 214, 0.18), transparent 30%),
    var(--forest);
  color: white;
}

.feature-card-dark > p {
  color: #c4d6cf;
  font-size: 1.08rem;
}

.feature-number,
.feature-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 60px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--forest);
  font-size: 1.15rem;
  font-weight: 800;
}

.feature-number {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: var(--mint);
}

.mapping {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

.mapping p {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 16px 12px;
  color: white;
  font-size: 0.85rem;
}

.mapping p + p {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.mapping b {
  color: var(--mint);
}

.how {
  background: var(--cream);
}

.split-heading {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 90px;
  align-items: end;
}

.split-heading > p {
  max-width: 400px;
  margin-bottom: 28px;
  color: var(--muted);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 50px 0 0;
  padding: 0;
  border-top: 1px solid #ccd9d3;
  list-style: none;
}

.steps li {
  position: relative;
  padding: 42px 38px 0 0;
}

.steps li::before {
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  content: "";
}

.steps li > span {
  color: var(--forest-2);
  font-family: Georgia, serif;
  font-size: 2.4rem;
}

.steps p {
  color: var(--muted);
}

.product-shot {
  overflow: hidden;
}

.product-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.product-grid figure {
  position: relative;
  margin: 0;
  padding: 58px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(184, 240, 214, 0.9), rgba(217, 249, 157, 0.65));
}

.product-grid figure::before {
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(7, 59, 50, 0.12);
  border-radius: 25px;
  content: "";
}

.card-shot-crop {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 474 / 205;
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(7, 59, 50, 0.2);
}

.product-grid figure img {
  width: 100%;
  height: auto;
}

.product-grid figcaption {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: #496159;
  font-size: 0.75rem;
  text-align: center;
}

.check-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding: 13px 0 13px 32px;
  border-bottom: 1px solid var(--line);
  font-weight: 650;
}

.check-list li::before {
  position: absolute;
  left: 0;
  color: var(--forest-2);
  content: "✓";
  font-weight: 900;
}

.trust {
  background: var(--forest);
  color: white;
}

.trust .eyebrow,
.eyebrow-light {
  color: var(--mint);
}

.trust-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 100px;
}

.trust-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.trust-points article {
  min-height: 230px;
  padding: 14px 30px 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.trust-points article:nth-child(n + 3) {
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.trust-points span {
  display: block;
  margin-bottom: 38px;
  color: var(--mint);
  font-size: 0.75rem;
  font-weight: 800;
}

.trust-points p {
  color: #bed0c9;
  font-size: 0.9rem;
}

.trust-points a {
  color: white;
}

.pricing {
  background: var(--cream);
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 110px;
  align-items: center;
}

.price-card {
  padding: 42px;
  border: 1px solid #cadbd2;
  border-radius: 30px;
  background: white;
  box-shadow: 0 24px 65px rgba(7, 59, 50, 0.1);
}

.plan-name {
  color: var(--forest-2);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price {
  margin-bottom: 5px;
  font-size: 4.8rem;
  font-weight: 760;
  letter-spacing: -0.07em;
  line-height: 1;
}

.price sup {
  position: relative;
  top: -1.8rem;
  margin-right: 5px;
  font-size: 1.5rem;
}

.price span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 550;
  letter-spacing: 0;
}

.trial-line {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--forest);
  font-size: 0.75rem;
  font-weight: 800;
}

.price-card .check-list {
  margin-bottom: 30px;
}

.button-full {
  width: 100%;
}

.price-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.price-note a {
  color: var(--forest-2);
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 100px;
}

.faq-grid > div:first-child > p:last-child {
  color: var(--muted);
}

.faq-grid > div:first-child a {
  color: var(--forest-2);
}

.faq-list {
  border-top: 1px solid var(--line);
}

details {
  border-bottom: 1px solid var(--line);
}

summary {
  position: relative;
  padding: 24px 45px 24px 0;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 750;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  position: absolute;
  top: 24px;
  right: 4px;
  color: var(--forest-2);
  content: "+";
  font-size: 1.4rem;
}

details[open] summary::after {
  content: "−";
}

details p {
  max-width: 700px;
  padding: 0 35px 23px 0;
  color: var(--muted);
}

.final-cta {
  padding: 28px 20px 90px;
}

.final-cta-inner {
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 65px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 20%, rgba(184, 240, 214, 0.2), transparent 30%),
    var(--forest);
  color: white;
}

.final-cta h2 {
  max-width: 700px;
  margin-bottom: 0;
}

.button-light {
  flex: 0 0 auto;
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: none;
  color: var(--forest);
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--lime);
  color: var(--forest);
}

footer {
  padding: 20px 0 50px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
  padding-top: 35px;
  border-top: 1px solid var(--line);
}

.footer-grid img {
  width: 180px;
  height: auto;
}

.footer-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.footer-links {
  display: flex;
  gap: 24px;
  font-size: 0.84rem;
  font-weight: 650;
}

.copyright {
  grid-column: 1 / -1;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

@media (max-width: 1020px) {
  .nav-wrap {
    grid-template-columns: 1fr auto;
  }

  nav {
    display: none;
  }

  .hero {
    padding-top: 75px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-visual {
    width: min(760px, 100%);
    margin-inline: auto;
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 570px;
  }

  .feature-card:last-child {
    grid-column: auto;
  }

  .product-grid,
  .trust-grid,
  .pricing-grid,
  .faq-grid {
    gap: 60px;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 28px, 620px);
  }

  .section {
    padding: 78px 0;
  }

  h1 {
    /* 14vw put the headline at ~56px on a 400px phone, which wrapped to seven lines. */
    font-size: clamp(2rem, 9.5vw, 2.8rem);
  }

  h2 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }

  .site-header {
    position: relative;
  }

  .nav-wrap {
    min-height: 72px;
  }

  .brand {
    width: 160px;
  }

  .button-small {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 0.78rem;
  }

  .hero {
    padding: 64px 0 82px;
  }

  .hero-grid {
    gap: 54px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-notes {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .hero-notes li + li::before {
    display: none;
  }

  .sync-pulse {
    right: 9px;
    bottom: -38px;
  }

  .proof-grid {
    grid-template-columns: 1fr 1fr;
  }

  .proof-grid p:nth-child(odd) {
    border-left: 1px solid var(--line);
  }

  .proof-grid p {
    min-height: 100px;
    padding: 22px;
    border-bottom: 1px solid var(--line);
  }

  .feature-grid,
  .steps,
  .product-grid,
  .pricing-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .feature-card:first-child {
    grid-column: auto;
    min-height: auto;
  }

  .feature-card:first-child {
    min-height: 540px;
  }

  .feature-icon {
    margin-bottom: 40px;
  }

  .split-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .steps {
    border-top: 0;
  }

  .steps li {
    padding: 28px 0;
    border-top: 1px solid #ccd9d3;
  }

  .steps li::before {
    top: -5px;
  }

  .product-grid {
    gap: 48px;
  }

  .product-grid figure {
    padding: 38px 24px;
  }

  .trust-points {
    grid-template-columns: 1fr;
  }

  .trust-points article,
  .trust-points article:nth-child(n + 3) {
    min-height: auto;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .trust-points span {
    margin-bottom: 24px;
  }

  .price-card {
    padding: 32px 24px;
  }

  .final-cta {
    padding-inline: 0;
  }

  .final-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 42px 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .copyright {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}