/* ───────────── How-it-works page ───────────── */
.how { padding-bottom: 96px; }

/* Hero */
.hw-hero {
  background: #fff;
  border-radius: 24px;
  padding: 44px 48px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px;
  align-items: center; margin-top: 24px; overflow: hidden;
}
.hw-title {
  font: 800 48px/1 'Fraunces', Georgia, serif;
  letter-spacing: -1.2px; margin: 0; color: var(--ink);
}
.hw-title em { color: var(--terra); }
.hw-lede {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2); margin: 18px 0 24px; max-width: 460px;
}
.hw-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-butter {
  background: var(--cream-2); color: var(--ink);
  border: 1px solid rgba(5,108,77,.12);
}

.hw-hero-art { 
  position: relative; min-height: 320px; border-radius: 18px;
  background:
    radial-gradient(circle at 30% 70%, #8db77a 0 90px, transparent 91px),
    radial-gradient(circle at 60% 60%, #4a6a3c 0 110px, transparent 111px),
    linear-gradient(135deg, #d6e9c5, #b3d896);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px;
}
.hw-hero-fallback {
  display: flex; gap: 20px; font-size: 56px; line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.15));
}
.hw-stats {
  position: absolute; right: 20px; top: 24px;
  background: #fff; border-radius: 16px; padding: 18px 20px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
}
.hw-stats-eyebrow {
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.hw-stats-big {
  font: 800 28px/1.05 'Fraunces', Georgia, serif;
  color: var(--terra);
}
.hw-stats-big span {
  display: block;
  font: 400 11px/1 'Inter', sans-serif;
  color: var(--ink-2); margin-top: 2px; margin-bottom: 10px;
}
.hw-stats-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.hw-stats-row > div { display: flex; flex-direction: column; }
.hw-stats-row strong { font: 700 14px/1 'Inter', sans-serif; color: var(--ink); }
.hw-stats-row span { font-size: 10px; color: var(--ink-2); margin-top: 2px; }

/* Hero image fade overlay */
.hw-hero .ab-hero-art {
  position: relative;
}
.hw-hero .ab-hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff 0%, transparent 55%);
  pointer-events: none;
}

/* Section title shared */
.hw-section-title {
  font: 700 26px/1.2 'Fraunces', Georgia, serif;
  margin: 40px 0 18px; color: var(--ink); letter-spacing: -.5px;
}
.hw-section-title em { color: var(--terra); font-style: italic; }

/* Steps */
.hw-steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hw-step {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 0 0 18px;
  display: flex; flex-direction: column; overflow: hidden;
}
.hw-step-art {
  position: relative;
  height: 160px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; line-height: 1;
}
.hw-step-img {
  width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px;
}
.hw-step-num {
  position: absolute; top: 10px; left: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--terra); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 'Inter', sans-serif;
}
.hw-step h3 {
  font: 700 15px/1.3 'Inter', sans-serif;
  margin: 16px 18px 8px; color: var(--ink);
}
.hw-step p { margin: 0 18px 10px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.hw-step .ab-bullets { margin: 8px 18px 0; }
.hw-step .ab-bullets li { font-size: 12.5px; }

/* Why */
.hw-why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.hw-why-card {
  background: #fff;
  border-radius: 16px; padding: 18px 20px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px;
  align-items: center;
}
.hw-why-icon { width: 56px; height: 56px; object-fit: contain; grid-row: 1 / 3; align-self: center; }
.hw-why-card strong { font: 700 14px/1.2 'Inter', sans-serif; color: var(--ink); }
.hw-why-card span { font-size: 12px; line-height: 1.5; color: var(--ink-2); }

/* FAQ */
.hw-faq-list { display: flex; flex-direction: column; gap: 10px; }
.hw-faq-item {
  background: #fff; border-radius: 12px;
  padding: 0; overflow: hidden;
}
.hw-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 16px 20px;
  font: 600 14px/1.3 'Inter', sans-serif; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.hw-faq-item summary::-webkit-details-marker { display: none; }
.hw-faq-chev {
  font-size: 14px; color: var(--ink-2);
  transition: transform .2s ease;
}
.hw-faq-item[open] .hw-faq-chev { transform: rotate(180deg); }
.hw-faq-body {
  padding: 0 20px 16px;
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}

/* Final */
.hw-final {
  margin-top: 32px;
  background-color: var(--sage);
  background-size: cover;
  background-position: center center;
  border-radius: 24px; overflow: hidden;
}
.hw-final-text { padding: 36px 40px; color: var(--ink); max-width: 40%; }
.hw-final-text h2 {
  font: 800 36px/1.05 'Fraunces', Georgia, serif;
  letter-spacing: -.8px; margin: 0 0 16px;
}
.hw-final-text h2 em { color: var(--terra); font-style: italic; }
.hw-final-text p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.hw-final-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 980px) {
  .hw-hero { grid-template-columns: 1fr; padding: 32px 24px; }
  .hw-title { font-size: 36px; }
  .hw-hero-art { flex-direction: column; align-items: center; justify-content: flex-end; }
  .hw-stats { position: static; margin-top: 16px; width: 100%; }
  .hw-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .hw-why-grid { grid-template-columns: repeat(2, 1fr); }
  .hw-final { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hw-hero { padding: 24px 20px; }
  .hw-hero-fallback { font-size: 40px; gap: 12px; }
  .hw-title { font-size: 30px; }
  .hw-steps-grid { grid-template-columns: 1fr; }
  .hw-why-grid { grid-template-columns: 1fr; }
  .hw-final-text h2 { font-size: 28px; }
}