.calculators-page {
  min-height: 100vh;
  width: 100%;
  background: #f6f8fb;
  color: #0f172a;
  display: flex;
  flex-direction: column;
}

.calculators-main {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 2.5vw, 32px) 80px;
}

.calculator-page-intro {
  width: 100%;
  max-width: none;
  margin-bottom: 32px;
}

.calculator-page-intro h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: #0f172a;
}

.calculator-subtitle {
  font-size: 1.04rem;
  line-height: 1.55;
  color: #475569;
  max-width: 780px;
  margin: 0;
}

.calculator-card {
  width: 100%;
  max-width: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  margin-bottom: 32px;
}

.calculator-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0f172a;
}

.calculator-section-subtitle {
  margin: 0 0 18px;
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.5;
}

.calculator-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.calculator-warning code {
  background: rgba(124, 45, 18, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calculator-form-narrow {
  max-width: 720px;
  width: 100%;
}

.form-row {
  display: flex;
  flex-direction: column;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 20px;
  margin-bottom: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

.form-helper {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

.form-helper a {
  color: #114734;
  font-weight: 600;
}

.form-input {
  appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-input:focus,
.form-input:focus-visible {
  outline: none;
  border-color: #114734;
  box-shadow: 0 0 0 3px rgba(17, 71, 52, 0.15);
}

.form-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form-field-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #114734;
}

.segmented-control {
  display: flex;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}

.segment {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  flex: 1;
  white-space: nowrap;
}

.segment:hover {
  background: rgba(17, 71, 52, 0.08);
  color: #114734;
}

.segment.active {
  background: #114734;
  color: #ffffff;
}

.calculator-submit-btn {
  align-self: stretch;
  border: none;
  border-radius: 12px;
  padding: 16px 28px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, #114734 0%, #1f6b50 100%);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(17, 71, 52, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
  margin-top: 8px;
}

.calculator-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(17, 71, 52, 0.30);
}

.calculator-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(17, 71, 52, 0.22);
}

.calculator-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.92rem;
  font-weight: 600;
}

.calculator-result {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.result-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.result-value {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  color: #114734;
  letter-spacing: -0.02em;
  line-height: 1;
}

.result-unit {
  font-size: 1.1rem;
  font-weight: 600;
  color: #475569;
}

.result-subline {
  font-size: 1rem;
  color: #475569;
  margin: 0;
}

.le-estimate-note {
  margin: 12px 0 0;
  font-size: 0.92rem;
  color: #334155;
}

.calculator-divider {
  margin: 28px 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}

.claiming-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.96rem;
}

.claiming-table th,
.claiming-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid #e2e8f0;
}

.claiming-table th:first-child,
.claiming-table td:first-child {
  text-align: left;
}

.claiming-table thead th {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f8fafc;
}

.claiming-table tbody tr:hover {
  background: #f8fafc;
}

.breakeven-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.breakeven-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
}

.breakeven-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}

.breakeven-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #114734;
}

.calculator-content {
  width: 100%;
  max-width: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 36px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.calculator-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #0f172a;
}

.calculator-content h2:not(:first-child) {
  margin-top: 24px;
}

.calculator-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 18px 0 6px;
  color: #0f172a;
}

.calculator-content p,
.calculator-content li {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #334155;
  margin: 0 0 10px;
}

.calculator-content ul {
  padding-left: 22px;
  margin: 0 0 12px;
}

.calculator-cta {
  margin-top: 28px;
  padding: 22px;
  background: linear-gradient(135deg, #114734 0%, #1f6b50 100%);
  border-radius: 12px;
  color: #ffffff;
}

.calculator-cta h3 {
  color: #ffffff;
  margin-top: 0;
}

.calculator-cta p {
  color: rgba(255, 255, 255, 0.92);
}

.calculator-cta-btn {
  display: inline-block;
  margin-top: 8px;
  background: #ffffff;
  color: #114734;
  -webkit-text-fill-color: #114734;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid rgba(205, 173, 113, 0.55);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.calculator-cta-btn:visited,
.calculator-cta-btn:hover,
.calculator-cta-btn:focus,
.calculator-cta-btn:focus-visible {
  color: #114734;
  -webkit-text-fill-color: #114734;
}

.calculator-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.18);
}

/* Two-tier LE result (Most Likely + Just To Be Safe) */
.result-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.result-tier {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  background: #ffffff;
}

.result-tier-primary {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border-color: #86efac;
}

.result-tier-secondary {
  background: #f8fafc;
}

.result-tier-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  margin-bottom: 8px;
}

.result-tier-sub {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 6px 0 0;
}

/* Survival chart */
.calculator-chart {
  margin: 28px 0 12px;
}

.calculator-chart h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0f172a;
}

.calculator-chart-note {
  font-size: 0.86rem;
  color: #64748b;
  margin: 0 0 12px;
}

/* SS hero cards (62 / FRA / 70 quick comparison) */
.claim-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.claim-hero-card {
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 16px;
  background: #ffffff;
}

.claim-hero-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.claim-hero-monthly {
  font-size: 1.7rem;
  font-weight: 800;
  color: #114734;
  margin: 10px 0 2px;
  line-height: 1;
}

.claim-hero-monthly-unit {
  font-size: 0.86rem;
  color: #64748b;
  font-weight: 600;
  margin-left: 4px;
}

.claim-hero-detail {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
  margin: 4px 0 0;
}

/* Plain-language summary callout */
.result-summary-callout {
  background: #ecfdf5;
  border-left: 4px solid #114734;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 20px 0;
  color: #0f172a;
  font-size: 0.98rem;
  line-height: 1.55;
}

.result-summary-callout strong {
  color: #114734;
}

.claiming-table tr.row-fra td:first-child::after {
  content: " (FRA)";
  color: #64748b;
  font-weight: 500;
  font-size: 0.88em;
}

/* Breakeven table */
.breakeven-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.94rem;
}

.breakeven-table th,
.breakeven-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.breakeven-table thead th {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f8fafc;
}

.breakeven-delayed-yes {
  color: #114734;
  font-weight: 700;
}

.breakeven-delayed-no {
  color: #64748b;
  font-weight: 600;
}

/* Sensitivity strip (LE-3, LE, LE+3) */
.sensitivity-headline {
  font-size: 1rem;
  margin: 24px 0 6px;
  color: #0f172a;
}

.sensitivity-headline strong {
  color: #114734;
}

.sensitivity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 16px;
}

.sensitivity-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  background: #ffffff;
}

.sensitivity-card.current {
  border-color: #114734;
  border-width: 2px;
  background: #f8fafc;
}

.sensitivity-le {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.sensitivity-claim {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0 2px;
}

.sensitivity-lifetime {
  font-size: 1.15rem;
  font-weight: 800;
  color: #114734;
}

/* Tax disclosure footnote */
.tax-disclosure {
  font-size: 0.86rem;
  font-style: italic;
  color: #64748b;
  margin: 18px 0 0;
  line-height: 1.5;
}

/* LE medical-data CTA (end of LE results) */
.le-medical-cta {
  margin-top: 28px;
  padding: 26px 26px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.le-medical-cta h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.le-medical-cta p {
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 72ch;
}

.medical-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 20px;
}

@media (max-width: 900px) {
  .medical-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stat tiles: condition on top, signed year range below. Direction is carried
   by the small arrow (long/short-arc accents shared with the landing page) plus
   the sign in the text; the value itself stays in ink. */
.impact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 0;
}

.impact-item strong {
  color: #475569;
  font-weight: 600;
  font-size: 0.83rem;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.impact-item .impact-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0f172a;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.impact-item .impact-range::before {
  font-size: 0.85em;
  line-height: 1;
}

.impact-item.impact-negative .impact-range::before {
  content: "▾";
  color: #c0793a;
}

.impact-item.impact-positive .impact-range::before {
  content: "▴";
  color: #1f7a57;
}

.le-medical-cta-btn {
  display: inline-block;
  background: #114734;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 10px;
  margin-top: 8px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.le-medical-cta-btn:hover,
.le-medical-cta-btn:focus,
.le-medical-cta-btn:focus-visible,
.le-medical-cta-btn:visited {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.le-medical-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(17, 71, 52, 0.28);
}

.le-medical-cta-subnote {
  font-size: 0.85rem;
  color: #64748b;
  margin: 10px 0 0;
}

@media (max-width: 720px) {
  .calculator-page-intro h1 {
    font-size: 1.5rem;
  }
  .result-tier-grid,
  .claim-hero-grid,
  .sensitivity-strip {
    grid-template-columns: 1fr;
  }
}

/* Phone tier — tighten chrome, single-column forms, scrollable data tables. */
@media (max-width: 560px) {
  .calculator-card {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .calculator-page-intro h1 {
    font-size: 1.3rem;
  }
  .calculator-subtitle {
    font-size: 0.96rem;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .result-value {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }
  /* Wide data tables scroll within their card instead of widening the page. */
  .claiming-table,
  .breakeven-table,
  .le-compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.86rem;
  }
  .claiming-table th,
  .claiming-table td,
  .breakeven-table th,
  .breakeven-table td,
  .le-compare-table th,
  .le-compare-table td {
    padding: 8px 10px;
  }
}

/* ============================================================
   LE calculator — "estimates are broken" marketing redesign
   Marketing surface: forest-green + gold tokens (see LandingPage.css).
   ============================================================ */

/* Shared section heads for the marketing blocks */
.le-block-head {
  margin-bottom: 22px;
}

.le-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a8842e;
  margin-bottom: 10px;
}

.le-kicker::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: #cdad71;
  vertical-align: middle;
  margin-right: 9px;
  transform: translateY(-2px);
}

.le-block-head h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0f172a;
  margin: 0 0 8px;
}

.le-block-head p {
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* "This isn't LifeARC" clarifier under the try-it form intro. Scoped under
   .le-block-head so it outranks `.le-block-head p` (which would otherwise force
   the larger page-intro size onto it). */
.le-block-head p.le-disclaimer {
  margin: 16px 0 0;
  padding: 11px 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #64748b;
  background: #f8fafc;
  border-left: 3px solid #cdad71;
  border-radius: 8px;
}

/* Identical-inputs demonstration */
.le-shared-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 20px;
}

.le-shared-inputs-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.le-shared-inputs-value {
  font-weight: 700;
  color: #0f172a;
}

.le-shared-inputs-arrow {
  color: #94a3b8;
  font-weight: 700;
}

.le-shared-inputs-answer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #114734;
  box-shadow: 0 4px 12px rgba(17, 71, 52, 0.22);
}

.le-shared-inputs-answer-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}

.le-shared-inputs-answer-num {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

.le-persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.le-persona {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #e8eef0;
  border-radius: 18px;
  padding: 30px 26px 26px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

/* A whisper of color so each card leans its direction without shouting. */
.le-persona-up {
  background: linear-gradient(180deg, #f2f8f4 0%, #ffffff 42%);
}

.le-persona-down {
  background: linear-gradient(180deg, #fdf4f4 0%, #ffffff 42%);
}

.le-persona::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
}

.le-persona-up::before {
  background: #114734;
}

.le-persona-down::before {
  background: #b91c1c;
}

.le-persona-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #114734;
  background: #e3ebe7;
  padding: 4px 12px;
  border-radius: 999px;
}

.le-persona-down .le-persona-tag {
  color: #b91c1c;
  background: #fde8e8;
}

.le-persona-profile {
  max-width: 32ch;
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #64748b;
}

/* The diverging age is the hero of the card. */
.le-persona-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 18px 0 16px;
}

.le-persona-hero-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.le-persona-hero-num {
  font-size: clamp(4.5rem, 9vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.le-persona-up .le-persona-hero-num {
  color: #114734;
}

.le-persona-down .le-persona-hero-num {
  color: #b91c1c;
}

.le-persona-consequence {
  max-width: 32ch;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
}

.le-persona-consequence strong {
  color: #0f172a;
}

.le-identical-banner {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
  font-size: 1rem;
  line-height: 1.55;
}

.le-identical-banner strong {
  color: #b91c1c;
}

/* Financial-impact section */
.le-fin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.le-fin-card {
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 22px 22px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.le-fin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
}

.le-fin-up::before {
  background: #114734;
}

.le-fin-down::before {
  background: #b91c1c;
}

.le-fin-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 16px 0 12px;
}

.le-fin-amount {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #b91c1c;
}

.le-fin-amount-label {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.le-fin-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
  margin: 0;
}

.le-fin-text strong {
  color: #0f172a;
}

.le-fin-closing {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #e3ebe7;
  border-left: 4px solid #114734;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #0f172a;
}

.le-fin-closing strong {
  color: #114734;
}

.le-fin-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: #94a3b8;
  line-height: 1.45;
}

/* Result reframe: uncertainty band */
.le-result-lede {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 6px;
}

.le-band-caption {
  font-size: 0.96rem;
  line-height: 1.5;
  color: #475569;
  margin: 14px 0;
}

.le-band {
  margin: 0 0 22px;
}

.le-band-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #eef2f6;
  margin: 40px 0 12px;
}

/* Swept gradient fill — scaleX 0→1 from the left reveals the band. Scaling a
   transform keeps reduced-motion (MotionConfig) snapping it full instantly. */
.le-band-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, #b91c1c 0%, #cdad71 50%, #114734 100%);
}

.le-band-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.le-band-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.le-band-marker-label {
  position: absolute;
  bottom: 22px;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.le-band-ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: #64748b;
}

/* Generic vs LifeARC comparison */
.le-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.98rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.le-compare-table th,
.le-compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid #eef2f6;
}

.le-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.le-compare-table thead th {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.le-compare-table tbody td:first-child {
  color: #0f172a;
  font-weight: 600;
}

.le-compare-table tbody tr:nth-child(even) td {
  background: #fbfcfd;
}

.le-compare-cell {
  text-align: center;
  width: 20%;
}

/* LifeARC column emphasis (placed after zebra so it always wins) */
.le-compare-table td.le-compare-ours {
  background: rgba(17, 71, 52, 0.06);
}

.le-compare-table th.le-compare-ours {
  color: #114734;
  background: rgba(17, 71, 52, 0.12);
}

/* check / cross badges */
.le-check,
.le-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

.le-check {
  color: #ffffff;
  background: #114734;
}

.le-cross {
  color: #94a3b8;
  background: #eef2f6;
}

.le-compare-caption {
  margin: 16px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #475569;
}

/* Data + track-record advantage */
.le-edge {
  margin-top: 24px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 14px;
  background: linear-gradient(135deg, #f4f8f6 0%, #eef4f1 100%);
  border: 1px solid rgba(17, 71, 52, 0.14);
}

.le-edge-head {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  margin: 0 0 6px;
}

.le-edge-lede {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
}

.le-edge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.le-edge-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
}

.le-edge-stat {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #114734;
}

.le-edge-stat::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: #cdad71;
  margin-top: 8px;
}

.le-edge-item p {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
}

/* Conversion band */
.le-final-cta {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
  text-align: center;
  margin-bottom: 32px;
  color: #ffffff;
  background:
    radial-gradient(circle at 14% 18%, rgba(205, 173, 113, 0.24), transparent 46%),
    radial-gradient(circle at 86% 88%, rgba(163, 179, 172, 0.26), transparent 48%),
    linear-gradient(135deg, #0c3527 0%, #114734 48%, #1f6b50 100%);
  border: 1px solid rgba(205, 173, 113, 0.28);
  box-shadow: 0 24px 50px rgba(12, 53, 39, 0.34);
}

/* faint decorative arc — a lifespan is an arc, not a straight line */
.le-final-cta::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -200px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  border: 2px solid rgba(205, 173, 113, 0.16);
  pointer-events: none;
}

.le-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.le-final-cta-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #d8bd86;
}

.le-final-cta h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 14px;
}

.le-final-cta p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.le-final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 15px 34px;
  border-radius: 12px;
  background: linear-gradient(180deg, #dcc090 0%, #cdad71 100%);
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.le-final-cta-btn-arrow {
  transition: transform 160ms ease;
}

.le-final-cta-btn:visited,
.le-final-cta-btn:hover,
.le-final-cta-btn:focus,
.le-final-cta-btn:focus-visible {
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}

.le-final-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36);
}

.le-final-cta-btn:hover .le-final-cta-btn-arrow {
  transform: translateX(4px);
}

.le-final-cta-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 22px;
}

.le-final-cta-points span {
  position: relative;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  padding-left: 18px;
}

.le-final-cta-points span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #d8bd86;
  font-weight: 800;
}

/* Methodology collapsed */
.le-method-details > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  color: #114734;
  padding: 4px 0;
  list-style: none;
}

.le-method-details > summary::-webkit-details-marker {
  display: none;
}

.le-method-details > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 160ms ease;
}

.le-method-details[open] > summary::before {
  transform: rotate(90deg);
}

/* ---- Scroll walkthrough: sticky step rail ---- */
.le-rail {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.le-rail-step {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.le-rail-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #114734;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.le-rail-step:hover .le-rail-label,
.le-rail-step.active .le-rail-label {
  opacity: 1;
  transform: none;
}

.le-rail-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.le-rail-step:hover .le-rail-dot {
  border-color: #114734;
}

.le-rail-step.active .le-rail-dot {
  border-color: #114734;
  background: #114734;
  transform: scale(1.3);
}

@media (max-width: 1180px) {
  .le-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .le-rail-label,
  .le-rail-dot {
    transition: none;
  }
}

@media (max-width: 720px) {
  .le-persona-grid,
  .le-fin-grid,
  .le-edge-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Phase 2-4 — pinned cinematic "stakes" scene
   Only mounted on wide viewports without reduced-motion (useIsCinematic),
   so it needs no small-screen rules — StaticStakes handles those.
   ============================================================ */
.le-scene {
  position: relative;
  height: 220vh;
  /* Pull the scene up to absorb the reveal's empty bottom (the reveal stays tall
     so its content sits below the fold and only shows on scroll; this reclaims
     the space below it). Doesn't move the pinned rest position. */
  margin-top: -10vh;
  margin-bottom: 32px;
}

/* Zero-size depth markers the step rail observes so it still tracks both beats. */
.le-scene-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.le-scene-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  /* Rest the beat in the vertical middle of the viewport while pinned. */
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 48px) 0;
}

/* Decorative arc that draws on scroll — sits behind the beats. */
.le-scene-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

.le-scene-stage {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

/* Both beats share one grid cell and cross-fade as the scene scrolls. */
.le-beat {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
}

.le-scene-title {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 20px;
}

.le-shared-inputs-center {
  justify-content: center;
}

/* Closing line sits inside the cost beat, right under the money cards. */
.le-beat .le-fin-closing {
  margin-top: 20px;
}

/* Continuous "lifespan arc" spine drawn down the whole story (cinematic only).
   Sits behind the content (opaque cards hide it; it shows through the open
   stretches — the reveal, the scene's center gap, the section gaps). */
.le-story {
  position: relative;
}

.le-story-content {
  position: relative;
  z-index: 1;
}

.le-throughline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* faint full-length track hinting at the path still to come */
.le-throughline-track {
  opacity: 0.07;
}

/* the scroll-drawn portion — subtle, lets content stay the star */
.le-throughline-draw {
  opacity: 0.4;
}

/* The moving line: a short bright segment that rides the draw head down the
   story. Part of the spine SVG, so it sits behind the content. Kept subtle with a
   soft glow so it reads as a highlight tracing the line. */
.le-throughline-comet {
  opacity: 0.03;
  filter: drop-shadow(0 0 8px rgba(31, 107, 80, 0.08));
}

@media (prefers-reduced-motion: reduce) {
  .le-throughline {
    display: none;
  }
}

/* Result reveal — the scroll "reward" stage; the number pops in as it enters.
   Kept compact and bottom-weighted so it flows straight into the problem beat
   rather than reading as a separate screen. */
.le-reveal {
  /* Tall enough that the centered content sits below the fold on Calculate, so
     it only reveals on scroll. The empty space this leaves below the content is
     absorbed by the scene's negative top margin, so it costs no extra scroll. */
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh clamp(16px, 4vw, 40px) 0;
  margin-bottom: 0;
}

.le-reveal-inner {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

.le-reveal .le-result-lede {
  font-size: 0.82rem;
}

.le-reveal-headline {
  justify-content: center;
  margin: 6px 0 4px;
}

.le-reveal-headline .result-value {
  font-size: clamp(3.2rem, 11vw, 5.5rem);
}

.le-reveal .le-band {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Transitional hook that bridges the result into the problem beat. */
.le-reveal-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.le-reveal-lead p {
  max-width: 480px;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: #334155;
}

.le-reveal-lead-arrow {
  font-size: 2.75rem;
  line-height: 1;
  color: #114734;
  animation: le-cue-bob 1.6s ease-in-out infinite;
}

/* Rolling number wheel for the persona realities (problem beat). */
.le-reel-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* Pull the reel up under the label: the 1.6em window has empty headroom above
     the centered digits, which otherwise reads as a large gap below the label. */
  margin-top: -0.2em;
}

.le-reel {
  display: inline-block;
  height: 1.6em;
  line-height: 1;
  overflow: hidden;
  vertical-align: middle;
  /* The centered number fills the middle 1em (18.75%–81.25%); the neighbours sit
     entirely in the outer bands. Keep those bands fully transparent so no sliver
     of the previous/next number shows at rest, while the soft ramp into the
     centre still reads as a wheel mid-roll. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, #000 30%, #000 70%, transparent 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, #000 30%, #000 70%, transparent 82%, transparent 100%);
}

/* Underline marking the landed number — sits on the wrapper (outside the reel's
   fade mask). Its opacity is driven by scroll: 0 while rolling, fades in on settle.
   Dropped lower than the number's box bottom so it reads as a deliberate marker
   with breathing room rather than a text underline hugging the digits. */
.le-reel-underline {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0.1em;
  height: 0.07em;
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
}

.le-reel-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.le-reel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .le-reveal-lead-arrow {
    animation: none;
  }
}

/* Fixed "keep scrolling" cue — fades in on result, fades out on first scroll. */
.le-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.le-scroll-cue.visible {
  opacity: 1;
}

.le-scroll-cue-text {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #114734;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

.le-scroll-cue-arrow {
  font-size: 1.5rem;
  line-height: 0.6;
  color: #114734;
  animation: le-cue-bob 1.6s ease-in-out infinite;
}

@keyframes le-cue-bob {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.65;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .le-scroll-cue-arrow {
    animation: none;
  }
}