/* Snaplot — how-it-works page */

.snap-hiw { display: block; }

/* ===== HERO ===== */
.snap-hiw-hero {
  padding: 96px 0 64px;
  background: linear-gradient(180deg, var(--snap-ivory), var(--snap-cream));
  text-align: center;
}
.snap-hiw-hero h1 {
  font: 900 clamp(2.2rem, 4.5vw, 3.4rem)/1.1 var(--snap-font);
  letter-spacing: -.018em;
  margin: 0 0 20px;
  color: var(--snap-navy);
  max-width: 820px;
  margin-left: auto; margin-right: auto;
}
.snap-hiw-hero__sub {
  font-size: 19px;
  color: var(--snap-slate);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ===== STEPS (alternating bg) ===== */
.snap-hiw-step { padding: 80px 0; background: var(--snap-ivory); }
.snap-hiw-step--alt { background: var(--snap-cream); }
.snap-hiw-step__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.snap-hiw-step__inner--reverse > .snap-hiw-step__copy { order: 2; }
.snap-hiw-step__num {
  font: 700 13px/1 var(--snap-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--snap-amber-2);
  margin: 0 0 12px;
}
.snap-hiw-step__copy h2 {
  font: 800 clamp(2rem, 3.4vw, 2.6rem)/1.1 var(--snap-font);
  letter-spacing: -.015em;
  color: var(--snap-navy);
  margin: 0 0 20px;
}
.snap-hiw-step__copy > p {
  font-size: 17px; line-height: 1.6;
  color: var(--snap-slate);
  margin: 0 0 24px;
}
.snap-hiw-step__bullets {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.snap-hiw-step__bullets li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 16px; line-height: 1.5;
  color: var(--snap-navy);
}
.snap-hiw-step__bullets li::before {
  content: '✓';
  position: absolute; left: 0;
  width: 20px; height: 20px;
  background: var(--snap-amber);
  color: var(--snap-navy);
  border-radius: 50%;
  font: 800 11px/20px var(--snap-font);
  text-align: center;
  top: 9px;
}
.snap-hiw-step__tip {
  background: white;
  border-left: 4px solid var(--snap-amber);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 24px;
}
.snap-hiw-step__tip-title {
  margin: 0 0 4px;
  font: 700 12px/1 var(--snap-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--snap-amber-2);
}
.snap-hiw-step__tip p:last-child {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--snap-slate);
}
.snap-hiw-step__visual { display: flex; justify-content: center; }
.snap-hiw-step__svg {
  width: 100%; max-width: 320px; height: auto;
  border-radius: var(--snap-radius);
  filter: drop-shadow(0 16px 32px rgba(14, 42, 71, .12));
}
@media (max-width: 900px) {
  .snap-hiw-step { padding: 56px 0; }
  .snap-hiw-step__inner,
  .snap-hiw-step__inner--reverse { grid-template-columns: 1fr; gap: 32px; }
  .snap-hiw-step__inner--reverse > .snap-hiw-step__copy { order: initial; }
}

/* ===== TUNE GRID ===== */
.snap-hiw-tune { padding: 96px 0; background: var(--snap-ivory); }
.snap-hiw-tune h2 {
  font: 800 clamp(2rem, 3.4vw, 2.6rem)/1.1 var(--snap-font);
  text-align: center;
  margin: 0 0 56px;
  color: var(--snap-navy);
  letter-spacing: -.015em;
}
.snap-hiw-tune__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.snap-hiw-tune__grid > div {
  background: white;
  border: 1px solid var(--snap-line);
  border-radius: var(--snap-radius);
  padding: 24px;
}
.snap-hiw-tune__grid h3 {
  font: 700 16px/1.3 var(--snap-font);
  margin: 0 0 8px;
  color: var(--snap-navy);
}
.snap-hiw-tune__grid p {
  font-size: 14px; line-height: 1.55;
  color: var(--snap-slate);
  margin: 0;
}
@media (max-width: 900px) {
  .snap-hiw-tune__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .snap-hiw-tune__grid { grid-template-columns: 1fr; }
}

/* ===== HONEST ===== */
.snap-hiw-honest {
  padding: 96px 0;
  background: var(--snap-cream);
  text-align: center;
}
.snap-hiw-honest h2 {
  font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--snap-font);
  margin: 0 0 24px;
  color: var(--snap-navy);
}
.snap-hiw-honest p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--snap-slate);
  max-width: 720px;
  margin: 0 auto 16px;
}
@media (max-width: 720px) { .snap-hiw-honest { padding: 56px 0; } }

/* (final CTA band styles inherited from home.css — load order: _brand.css first, then page CSS, but home.css isn't loaded here. Re-declare here.) */
.snap-cta-band {
  padding: 80px 0;
  background: var(--snap-navy);
  color: var(--snap-ivory);
  text-align: center;
}
.snap-cta-band h2 {
  font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--snap-font);
  margin: 0 0 12px;
  letter-spacing: -.015em;
}
.snap-cta-band p {
  font-size: 17px;
  opacity: .85;
  margin: 0 0 28px;
}
.snap-cta-band__contact {
  font-size: 14px;
  opacity: .7;
  margin: 24px 0 0;
}
.snap-cta-band__contact a { color: var(--snap-amber); text-decoration: none; }
.snap-cta-band__contact a:hover { color: var(--snap-amber-2); }