/* Home page specific styles */

.hero {
  background: linear-gradient(180deg, var(--color-surface-offset) 0%, var(--color-bg) 65%);
  padding-block-start: clamp(var(--space-12), 8vw, var(--space-20));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}
.hero-title {
  font-size: var(--text-2xl);
  margin-block: var(--space-5) var(--space-5);
  max-width: 16ch;
}
.hero-actions {
  margin-top: var(--space-8);
}
.hero-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.bill-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 420px;
  margin-inline: auto;
}
.bill-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
}
.bill-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bill-lines li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.bill-lines li span:first-child {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bill-card-total {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.bill-card-total strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-success);
}

.section-head {
  max-width: 60ch;
  margin-bottom: var(--space-12);
}
.section-head h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-3);
}

.problem {
  background: var(--color-surface);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.stat {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.stat p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.stat p sup a {
  color: var(--color-text-faint);
}
.stat-footnotes {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.stat-footnotes a {
  color: var(--color-text-faint);
}
.stat-footnotes a:hover {
  color: var(--color-primary);
}

.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  counter-reset: step;
}
.how-step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-primary);
}
.how-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.how-step h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.how-step p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.compare-callout {
  background: var(--color-surface-offset);
}
.callout-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.callout-text h2 {
  font-size: var(--text-xl);
  margin-block: var(--space-3) var(--space-4);
}
.callout-figures {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.figure-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.figure-row--highlight {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.figure-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.figure-row--highlight .figure-label {
  color: color-mix(in oklab, var(--color-text-inverse) 80%, transparent);
}
.figure-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.figure-row--highlight .figure-value {
  color: var(--color-text-inverse);
}

.pricing-preview {
  background: var(--color-bg);
}
.preview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.preview-card {
  position: relative;
}
.preview-card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.preview-card .badge {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
}
.preview-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.preview-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.preview-price span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.final-cta-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-blue) 100%);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.final-cta-card h2 {
  color: var(--color-text-inverse);
  font-size: var(--text-xl);
}
.final-cta-card .lede {
  color: color-mix(in oklab, var(--color-text-inverse) 88%, transparent);
}
.final-cta-card .btn-primary {
  background: var(--color-text-inverse);
  color: var(--color-primary-active);
}
.final-cta-card .btn-primary:hover {
  background: color-mix(in oklab, var(--color-text-inverse) 90%, transparent);
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .hero-visual {
    order: -1;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .how-steps {
    grid-template-columns: 1fr;
  }
  .callout-card {
    grid-template-columns: 1fr;
  }
  .preview-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
  .hero-title {
    max-width: none;
  }
}