/* ─────────────────────────────────────────────────────────────────────────────
   Marketing site styles — house2home.co
   Builds on top of the universal token sheet (styles.css).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero {
  padding: var(--space-24) 0 var(--space-20);
  text-align: center;
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
}

.hero__headline {
  margin-bottom: var(--space-6);
}

.hero__subhead {
  font-size  : var(--font-size-lg);
  color      : var(--color-text-muted);
  max-width  : 620px;
  margin     : 0 auto var(--space-10);
  line-height: var(--line-height-relaxed);
}

.hero__ctas {
  display  : flex;
  gap      : var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Social proof ──────────────────────────────────────────────────────────── */

.proof__label {
  text-align: center;
  font-size : var(--font-size-sm);
  color     : var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-8);
}

.proof__stats {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : var(--space-6);
  text-align           : center;
}

@media (max-width: 768px) {
  .proof__stats { grid-template-columns: repeat(2, 1fr); }
}

.proof__number {
  display    : block;
  font-family: var(--font-serif);
  font-size  : var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color      : var(--color-primary);
  line-height: 1;
}

.proof__desc {
  display    : block;
  font-size  : var(--font-size-sm);
  color      : var(--color-text-muted);
  margin-top : var(--space-2);
}

/* ── Steps ─────────────────────────────────────────────────────────────────── */

.step {
  text-align: center;
  padding: var(--space-8);
}

.step__num {
  display      : inline-flex;
  align-items  : center;
  justify-content: center;
  width        : 48px;
  height       : 48px;
  border-radius: var(--radius-full);
  background   : var(--color-primary);
  color        : #fff;
  font-weight  : var(--font-weight-bold);
  font-size    : var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.step h3 {
  margin-bottom: var(--space-3);
}

/* ── Value split ───────────────────────────────────────────────────────────── */

.value-split__side {
  padding: var(--space-8);
}

@media (max-width: 768px) {
  .value-split__side {
    text-align: center;
  }
  .value-split__side .btn {
    display: inline-flex;
  }
}

/* ── Testimonials ──────────────────────────────────────────────────────────── */

.testimonial__stars {
  color         : var(--color-primary);
  font-size     : var(--font-size-md);
  margin-bottom : var(--space-4);
  letter-spacing: 2px;
}

.testimonial__quote {
  font-size  : var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color      : var(--color-text);
  margin-bottom: var(--space-5);
  font-style : italic;
}

.testimonial__author {
  display  : flex;
  flex-direction: column;
  gap      : 2px;
  font-size: var(--font-size-sm);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.footer {
  background   : var(--color-dark);
  color        : var(--color-text-inverse);
  padding      : var(--space-16) 0 var(--space-8);
}

.footer__top {
  display               : grid;
  grid-template-columns : 1fr 2fr;
  gap                   : var(--space-16);
  padding-bottom        : var(--space-12);
  border-bottom         : 1px solid rgba(255,255,255,0.1);
  margin-bottom         : var(--space-8);
}

@media (max-width: 768px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-10); }
}

.footer__links {
  display               : grid;
  grid-template-columns : repeat(3, 1fr);
  gap                   : var(--space-8);
}

@media (max-width: 640px) {
  .footer__links { grid-template-columns: 1fr 1fr; }
}

.footer__col {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-3);
}

.footer__col strong {
  font-size  : var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color      : #fff;
  margin-bottom: var(--space-1);
}

.footer__col a {
  font-size      : var(--font-size-sm);
  color          : rgba(255,255,255,0.6);
  text-decoration: none;
  transition     : color var(--transition-fast);
}

.footer__col a:hover { color: #fff; }

.footer__bottom {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : var(--space-4);
}

.footer__bottom .text-muted { color: rgba(255,255,255,0.5); }

.app-badge {
  display       : inline-block;
  padding       : 6px 14px;
  border        : 1px solid rgba(255,255,255,0.25);
  border-radius : var(--radius-md);
  font-size     : var(--font-size-xs);
  color         : rgba(255,255,255,0.7);
  text-decoration: none;
  transition    : border-color var(--transition-fast), color var(--transition-fast);
}

.app-badge:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ── For-Agents page ────────────────────────────────────────────────────────── */

.agents-hero {
  background : var(--color-dark);
  padding    : var(--space-24) 0 var(--space-20);
  text-align : center;
}

.agents-hero h1 { color: #fff; }
.agents-hero p  { color: rgba(255,255,255,0.7); }

.stat-card {
  background   : var(--color-surface);
  border       : 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding      : var(--space-8);
  text-align   : center;
}

.stat-card__number {
  font-family: var(--font-serif);
  font-size  : var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color      : var(--color-primary);
  display    : block;
  line-height: 1;
}

.stat-card__label {
  font-size : var(--font-size-sm);
  color     : var(--color-text-muted);
  margin-top: var(--space-2);
  display   : block;
}

/* ── Pricing page ───────────────────────────────────────────────────────────── */

.pricing-toggle {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-4);
  margin-bottom  : var(--space-12);
}

.toggle {
  width           : 48px;
  height          : 26px;
  background      : var(--color-border);
  border-radius   : var(--radius-full);
  position        : relative;
  cursor          : pointer;
  transition      : background var(--transition-base);
  border          : none;
}

.toggle.active { background: var(--color-primary); }

.toggle::after {
  content       : '';
  position      : absolute;
  width         : 20px;
  height        : 20px;
  background    : #fff;
  border-radius : var(--radius-full);
  top           : 3px;
  left          : 3px;
  transition    : left var(--transition-base);
  box-shadow    : var(--shadow-sm);
}

.toggle.active::after { left: 25px; }

.pricing-card {
  background   : var(--color-surface);
  border       : 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding      : var(--space-8);
  position     : relative;
}

.pricing-card--featured {
  border-color : var(--color-primary);
  box-shadow   : 0 0 0 3px rgba(168,80,48,0.1);
}

.pricing-card__badge {
  position     : absolute;
  top          : -12px;
  left         : 50%;
  transform    : translateX(-50%);
  background   : var(--color-primary);
  color        : #fff;
  font-size    : var(--font-size-xs);
  font-weight  : var(--font-weight-semibold);
  padding      : 4px 16px;
  border-radius: var(--radius-full);
  white-space  : nowrap;
}

.pricing-price {
  display    : flex;
  align-items: baseline;
  gap        : 4px;
  margin     : var(--space-4) 0 var(--space-6);
}

.pricing-price__amount {
  font-family: var(--font-serif);
  font-size  : var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.pricing-price__period {
  font-size : var(--font-size-sm);
  color     : var(--color-text-muted);
}

.pricing-features {
  list-style : none;
  margin     : 0 0 var(--space-8);
}

.pricing-features li {
  display    : flex;
  gap        : var(--space-3);
  padding    : var(--space-3) 0;
  border-top : 1px solid var(--color-border);
  font-size  : var(--font-size-sm);
}

.pricing-features li::before {
  content    : '✓';
  color      : var(--color-primary);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}