/* ============================================================
   Savings page
   Layered on top of home.css + wre-page.css — only the pieces
   unique to this page live here.
   ============================================================ */

/* ============================================================
   Hero mockup — savings categories card
   ============================================================ */
#wrehome .wre-sv-mock {
  background: #fff;
  border: 1px solid rgba(255, 237, 213, 0.7);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow:
    0 24px 64px rgba(232, 96, 42, 0.09),
    0 4px 16px rgba(0, 0, 0, 0.05);
}
#wrehome .wre-sv-mock-head,
#wrehome .wre-sv-mock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
#wrehome .wre-sv-mock-head {
  margin-bottom: 1.25rem;
}
#wrehome .wre-sv-mock-head .k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foreground);
}
#wrehome .wre-sv-mock-head .v,
#wrehome .wre-sv-mock-foot .k {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
#wrehome .wre-sv-mock-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
#wrehome .wre-sv-mock-foot .v {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
}
#wrehome .wre-sv-mock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
#wrehome .wre-sv-tile {
  background: linear-gradient(
    135deg,
    rgba(242, 235, 227, 0.6),
    rgba(255, 241, 228, 0.4)
  );
  border-radius: 1rem;
  padding: 0.875rem;
  text-align: center;
  transition: background 0.2s;
}
#wrehome .wre-sv-tile:hover {
  background: rgba(255, 241, 228, 0.6);
}
#wrehome .wre-sv-tile .ic {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.5rem;
  background: #fff;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-sv-tile .lb {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.125rem;
}
#wrehome .wre-sv-tile .pc {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

/* ============================================================
   Savings categories grid
   ============================================================ */
#wrehome .wre-sv-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
#wrehome .wre-sv-cat {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
#wrehome .wre-sv-cat:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-card-hover);
}
#wrehome .wre-sv-cat .ic {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-sv-cat .pc {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
#wrehome .wre-sv-cat h3 {
  font-size: 0.875rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}
#wrehome .wre-sv-cat p {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}
/* per-category gradient fills */
#wrehome .cat--blue {
  background: linear-gradient(135deg, #eff6ff, rgba(219, 234, 254, 0.6));
  border-color: rgba(219, 234, 254, 0.8);
}
#wrehome .cat--purple {
  background: linear-gradient(135deg, #faf5ff, rgba(243, 232, 255, 0.6));
  border-color: rgba(243, 232, 255, 0.8);
}
#wrehome .cat--amber {
  background: linear-gradient(135deg, #fffbeb, rgba(254, 243, 199, 0.6));
  border-color: rgba(254, 243, 199, 0.8);
}
#wrehome .cat--rose {
  background: linear-gradient(135deg, #fff1f2, rgba(255, 228, 230, 0.6));
  border-color: rgba(255, 228, 230, 0.8);
}
#wrehome .cat--orange {
  background: linear-gradient(135deg, #fff7ed, rgba(255, 237, 213, 0.6));
  border-color: rgba(255, 237, 213, 0.8);
}
#wrehome .cat--emerald {
  background: linear-gradient(135deg, #ecfdf5, rgba(209, 250, 229, 0.6));
  border-color: rgba(209, 250, 229, 0.8);
}
#wrehome .cat--stone {
  background: linear-gradient(135deg, #fafaf9, rgba(245, 245, 244, 0.6));
  border-color: rgba(245, 245, 244, 0.8);
}
#wrehome .wre-sv-cat--more {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.1),
    rgba(var(--primary-rgb), 0.05)
  );
  border-color: rgba(var(--primary-rgb), 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#wrehome .wre-sv-cat--more:hover {
  box-shadow: 0 8px 32px rgba(232, 96, 42, 0.12);
}
#wrehome .wre-sv-cat--more .plus {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
#wrehome .wre-sv-cat--more .t {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}
#wrehome .wre-sv-cat--more .s {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ============================================================
   Value proposition — stat grid
   ============================================================ */
#wrehome .wre-sv-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
#wrehome .wre-sv-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
}
#wrehome .wre-sv-stat .n {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.125rem;
}
#wrehome .wre-sv-stat .l {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* ============================================================
   How savings work
   ============================================================ */
#wrehome .wre-sv-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
#wrehome .wre-sv-step {
  text-align: center;
}
#wrehome .wre-sv-step .ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}
#wrehome .wre-sv-step .ring .num {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-sv-step .k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
#wrehome .wre-sv-step h3 {
  font-size: 1.25rem;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
#wrehome .wre-sv-step .d {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.625;
  max-width: 20rem;
  margin: 0 auto;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
  #wrehome .wre-sv-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  #wrehome .wre-sv-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  #wrehome .wre-sv-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  #wrehome .wre-sv-cat-grid {
    grid-template-columns: 1fr;
  }
}