

.AboveFold {
  min-height: calc(100vh - 4.9em);
  display: grid;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-raised) 58%, #ffffff 100%);
  padding: var(--space-l) 0 var(--space-xl);
  overflow: hidden;
}

.AboveFold-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.AboveFold-kicker { color: var(--action-primary); display: block; margin-bottom: var(--space-xs); }

.AboveFold h1 { font-size: 2.35em; font-weight: 700; margin-bottom: var(--space-s); }
.AboveFold h1 em { font-style: normal; color: var(--action-primary); }

.AboveFold-badges {
  list-style: none;
  margin: var(--space-s) 0 var(--space-m);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}

.AboveFold-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 0.9em;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-secondary);
}

.AboveFold-badge svg { width: 1.05em; height: 1.05em; color: var(--action-primary); }

.PriceTag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.7em; margin-bottom: var(--space-s); }
.PriceTag-now { font-size: 2.1em; font-weight: 700; letter-spacing: -0.02em; }
.PriceTag-was { font-size: 1.05em; color: var(--text-muted); text-decoration: line-through; }
.PriceTag-cut {
  background: var(--signal-warm-soft);
  color: var(--signal-warm);
  font-weight: 700;
  font-size: 0.82em;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
}

.AboveFold-actions { display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center; }
.AboveFold-fine { font-size: 0.86em; color: var(--text-muted); margin: var(--space-xs) 0 0; }


.AboveFold-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-m);
  min-height: 22em;
}

.AboveFold-stage::before {
  content: "";
  position: absolute;
  inset: 8% 6% 4% 10%;
  background: var(--surface-sunken);
  border-radius: 2.4em 2.4em 2.4em 6em;
  transform: rotate(-4deg);
}

.AboveFold-stage::after {
  content: "";
  position: absolute;
  inset: 2% 14% 12% 2%;
  border: 1.5px solid rgba(21, 128, 61, 0.35);
  border-radius: 6em 2.4em 2.4em 2.4em;
  transform: rotate(3.5deg);
}

.AboveFold-shot {
  position: relative;
  z-index: 2;
  width: 84%;
  max-width: 24em;
  height: auto;
  display: block;
  filter: drop-shadow(0 1.4em 1.8em rgba(5, 46, 22, 0.22));
}

.AboveFold-chip {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 12%;
  background: var(--surface-ink);
  color: var(--text-inverse);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  border-radius: var(--radius-pill);
}


.FactStrip { background: var(--surface-ink); color: var(--text-inverse); padding: var(--space-m) 0; }
.FactStrip-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-l); }
.FactStrip-item { text-align: center; min-width: 8em; }
.FactStrip-value { display: block; font-size: 1.75em; font-weight: 700; color: #8fd6a8; line-height: 1.1; }
.FactStrip-label { display: block; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(241, 248, 241, 0.78); margin-top: 0.35em; }


.Framing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
.Framing-item { padding-left: var(--space-s); border-left: 0.22em solid var(--action-primary); }
.Framing-item h3 { margin-bottom: 0.4em; }
.Framing-item p { margin-bottom: 0; color: var(--text-secondary); }


.ValueProps-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-l); align-items: start; }
.ValueProps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.ValueProps-item {
  display: grid;
  grid-template-columns: 2.9em 1fr;
  gap: var(--space-s);
  align-items: start;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--line-soft);
}
.ValueProps-item:last-child { border-bottom: none; padding-bottom: 0; }
.ValueProps-mark {
  width: 2.9em; height: 2.9em;
  display: grid; place-items: center;
  border-radius: var(--radius-m);
  background: var(--surface-sunken);
  color: var(--action-primary);
}
.ValueProps-mark svg { width: 1.5em; height: 1.5em; }
.ValueProps-item h3 { margin-bottom: 0.25em; }
.ValueProps-item p { margin-bottom: 0; color: var(--text-secondary); font-size: 0.96em; }

.ValueProps-panel {
  background: var(--surface-base);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.ValueProps-panel img { width: 68%; max-width: 15em; height: auto; margin: 0 auto var(--space-s); display: block; }
.ValueProps-spec { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; text-align: left; font-size: 0.94em; }
.ValueProps-spec li { display: flex; justify-content: space-between; gap: var(--space-s); border-bottom: 1px dashed var(--line-soft); padding-bottom: 0.5em; }
.ValueProps-spec li:last-child { border-bottom: none; }
.ValueProps-spec b { font-weight: 700; }


.SimpleSteps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); counter-reset: step; }
.SimpleSteps-item { position: relative; padding-top: var(--space-m); }
.SimpleSteps-item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0; left: 0;
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1;
  color: rgba(21, 128, 61, 0.28);
}
.SimpleSteps-item h3 { margin-bottom: 0.35em; }
.SimpleSteps-item p { color: var(--text-secondary); margin-bottom: 0; }


.RiskFree-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s) var(--space-m); }
.RiskFree-item {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0.8em;
  align-items: start;
  background: var(--surface-base);
  border-radius: var(--radius-m);
  padding: var(--space-s);
  border: 1px solid var(--line-soft);
}
.RiskFree-item svg { width: 1.6em; height: 1.6em; color: var(--action-primary); }
.RiskFree-item p { margin: 0; font-size: 0.95em; color: var(--text-secondary); }
.RiskFree-item strong { display: block; color: var(--text-primary); }


.InstantAnswers-pills { display: flex; flex-wrap: wrap; gap: 0.6em; margin-bottom: var(--space-s); }
.InstantAnswers-pill {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: 0.55em 1.15em;
  background: var(--surface-base);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.92em;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tap), color var(--tap), border-color var(--tap), transform var(--tap);
}
.InstantAnswers-pill:hover { border-color: var(--action-primary); color: var(--action-primary); }
.InstantAnswers-pill:active { transform: scale(0.96); }
.InstantAnswers-pill.is-active { background: var(--action-primary); color: #ffffff; border-color: transparent; }

.InstantAnswers-panel {
  background: var(--surface-base);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  min-height: 8em;
  box-shadow: var(--shadow-soft);
}
.InstantAnswers-panel h3 { margin-bottom: 0.5em; }
.InstantAnswers-panel p { margin-bottom: 0; color: var(--text-secondary); }


.Prose { max-width: 44em; }
.Prose h2 { margin-top: var(--space-m); }
.Prose ul { color: var(--text-secondary); padding-left: 1.2em; }
.Prose li { margin-bottom: 0.5em; }
.Prose-meta { color: var(--text-muted); font-size: 0.9em; }
.Prose-card {
  background: var(--surface-raised);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  border-left: 0.25em solid var(--action-primary);
}
.Prose-card p:last-child { margin-bottom: 0; }
.Prose-seller {
  font-style: normal;
  display: block;
  line-height: 1.55;
  background: var(--surface-base);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
}

@media (max-width: 1024px) {
  .AboveFold h1 { font-size: 2em; }
  .ValueProps-grid { grid-template-columns: 1fr; }
  .Framing-grid { grid-template-columns: 1fr; gap: var(--space-s); }
}

@media (max-width: 768px) {
  .AboveFold { min-height: 0; padding: var(--space-m) 0 var(--space-l); }
  .AboveFold-split { grid-template-columns: 1fr; gap: var(--space-m); }
  .AboveFold-stage { order: -1; min-height: 15em; }
  .AboveFold h1 { font-size: 1.78em; }
  .FactStrip-row { gap: var(--space-s) var(--space-m); }
  .FactStrip-value { font-size: 1.45em; }
  .SimpleSteps-row { grid-template-columns: 1fr; gap: var(--space-s); }
  .RiskFree-grid { grid-template-columns: 1fr; }
}


.ValueStack { overflow: hidden; }
.Framing .Band-head { max-width: 30em; }
.ValueProps .Band-head { max-width: 36em; }
.SimpleSteps .Shell { position: relative; }
.RiskFree .Band-head { max-width: 32em; }
.LeadCapture { scroll-margin-top: 5em; }
.LeadCapture-body h3 { margin-bottom: var(--space-s); }
.LeadCapture-body h4 { margin-bottom: 0.3em; }
.InstantAnswers { scroll-margin-top: 5em; }
.Framing { position: relative; }
