@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap");

body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

/* keep the anchored contact block clear of the sticky header */
#contact {
  scroll-margin-top: 90px;
}

#wrehome {
  /* ---- theme tokens ---- */
  --background: #fdfaf7;
  --foreground: #2a1f1a;
  --card: #ffffff;
  --primary: #e8602a;
  --primary-rgb: 232, 96, 42;
  --secondary: #f08c1a;
  --secondary-rgb: 240, 140, 26;
  --muted: #f2ebe3;
  --muted-foreground: #6b5c52;
  --accent: #fff1e4;
  --destructive: #8b2e4a;
  --border: #e5d8cc;
  --ink-dark: #2c1a0e; /* announcement + trending chip */
  --ink-deep: #1c120c; /* footer */

  --wrap: 80rem; /* max content width */
  --radius: 1rem;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.09);

  font-family: var(--sans);
  color: var(--foreground);
  background: var(--background);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden) contains the hero's floating chips without turning
     #wrehome into a scroll container, which would break the sticky navbar. */
  overflow-x: clip;
}

#wrehome *,
#wrehome *::before,
#wrehome *::after {
  box-sizing: border-box;
}
#wrehome img {
  display: block;
  max-width: 100%;
}
#wrehome a {
  color: inherit;
  text-decoration: none;
}
#wrehome button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
#wrehome h1,
#wrehome h2,
#wrehome h3,
#wrehome h4 {
  margin: 0;
  font-weight: 700;
}
#wrehome p {
  margin: 0;
}
#wrehome .font-display {
  font-family: var(--serif);
}

/* ---- shared layout / helpers ---- */
#wrehome .wre-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}
#wrehome .wre-section {
  padding: 5rem 1.5rem;
}
#wrehome .bg-white {
  background: #fff;
}
#wrehome .bg-fade {
  background: linear-gradient(#fdfaf7, #fff);
}
#wrehome .wre-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.75rem;
}
#wrehome .wre-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 3.5rem;
}
#wrehome .wre-head h2 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--foreground);
  margin-bottom: 1rem;
}
/* only the section subtitle — not the .wre-eyebrow that also lives in .wre-head */
#wrehome .wre-head p:not(.wre-eyebrow) {
  color: var(--muted-foreground);
  font-size: 1.125rem;
}

/* ---- buttons ---- */
#wrehome .wre-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 1rem 2.25rem;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
#wrehome .wre-btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
#wrehome .wre-btn--primary:hover {
  background: rgba(var(--primary-rgb), 0.9);
  transform: scale(1.02);
}
#wrehome .wre-btn--secondary {
  background: var(--secondary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(var(--secondary-rgb), 0.2);
}
#wrehome .wre-btn--secondary:hover {
  background: rgba(var(--secondary-rgb), 0.9);
}
#wrehome .wre-btn--outline {
  border-color: var(--border);
  color: var(--foreground);
  font-weight: 500;
  background: #fff;
}
#wrehome .wre-btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
#wrehome .wre-btn--pline {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
  font-weight: 600;
}
#wrehome .wre-btn--pline:hover {
  background: var(--primary);
  color: #fff;
}
#wrehome .wre-btn--sm {
  padding: 0.625rem 2.5rem;
  font-size: 0.875rem;
}

/* ---- generic card ---- */
#wrehome .wre-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
#wrehome .wre-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-card-hover);
}

/* ---- pill badge (e.g. hero card "Save 40%") ---- */
#wrehome .wre-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex: none;
}
#wrehome .wre-pill--save {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.2);
}

/* ============================================================
   Announcement bar
   ============================================================ */
#wrehome .wre-announce {
  background: var(--ink-dark);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.625rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
#wrehome .wre-announce b {
  color: #fff;
  font-weight: 600;
}
#wrehome .wre-announce .muted {
  color: rgba(255, 255, 255, 0.7);
}
#wrehome .wre-announce a {
  color: #ffb085;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#wrehome .wre-announce a:hover {
  color: #fff;
}

/* ============================================================
   Sticky header
   ============================================================ */
#wrehome .wre-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition:
    padding 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;
}
#wrehome .wre-nav.is-scrolled {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.07);
}
#wrehome .wre-nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#wrehome .wre-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
/* Real Member Benefits logo (member.webp). Height-controlled, width auto. */
#wrehome .wre-logo {
  display: block;
  height: 40px;
  width: auto;
}
#wrehome .wre-logo--lg {
  height: 54px;
}
/* Footer sits on the dark brand ink; the logo has dark text, so place it
   on a small white chip for contrast/legibility. */
#wrehome .wre-foot-logo-chip {
  display: inline-flex;
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-foot-logo-chip img {
  display: block;
  height: 34px;
  width: auto;
}
#wrehome .wre-brand .name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
#wrehome .wre-brand sup {
  font-size: 0.6em;
  font-weight: 700;
}
#wrehome .wre-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
#wrehome .wre-nav-links a {
  color: var(--muted-foreground);
  transition: color 0.2s;
}
#wrehome .wre-nav-links a:hover {
  color: var(--foreground);
}
#wrehome .wre-nav-links a.is-active {
  color: var(--primary);
}
#wrehome .wre-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#wrehome .wre-nav-actions .wre-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}
#wrehome .wre-nav-actions .wre-btn--primary {
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.2);
}
/* mobile menu toggle: hidden on desktop, replaces inline links under 900px */
#wrehome .wre-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.5rem;
  color: var(--foreground);
}
#wrehome .wre-menu-btn:hover {
  background: var(--muted);
}
#wrehome .wre-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  max-width: var(--wrap);
  margin: 0.75rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
#wrehome .wre-mobile-nav a {
  padding: 0.625rem 0.25rem;
  color: var(--muted-foreground);
}
#wrehome .wre-mobile-nav a:hover {
  color: var(--foreground);
}
#wrehome .wre-mobile-nav a.is-active {
  color: var(--primary);
}

/* ============================================================
   Hero
   ============================================================ */
#wrehome .wre-hero {
  padding: 7rem 1.5rem;
  background: linear-gradient(
    135deg,
    #fdfaf7,
    #fff 50%,
    rgba(255, 247, 237, 0.5)
  );
}
#wrehome .wre-hero-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
#wrehome .wre-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
#wrehome .wre-hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 4.25rem);
  line-height: 1.05;
  color: var(--foreground);
  margin-bottom: 1.25rem;
}
#wrehome .wre-hero-copy h1 .accent {
  color: var(--primary);
}
#wrehome .wre-hero-copy .sub {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  font-weight: 500;
  line-height: 1.375;
  margin-bottom: 0.5rem;
}
#wrehome .wre-hero-copy .simple {
  font-size: 1.5rem;
  color: var(--primary);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 2.5rem;
}
#wrehome .wre-hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.25rem;
}
#wrehome .wre-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 2.5rem;
}
#wrehome .wre-hero-trust > div {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
#wrehome .wre-hero-trust .primary {
  color: var(--primary);
}
#wrehome .wre-hero-trust b {
  font-weight: 500;
  color: var(--foreground);
}
#wrehome .wre-hero-more {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
#wrehome .wre-hero-more .k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}
#wrehome .wre-hero-more .v {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Hero savings-dashboard mockup */
#wrehome .wre-mock-outer {
  position: relative;
  max-width: 28rem;
  margin: 0 auto;
}
#wrehome .wre-mock {
  background: #fff;
  border: 1px solid rgba(255, 237, 213, 0.7);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(232, 96, 42, 0.09),
    0 4px 16px rgba(0, 0, 0, 0.05);
}
#wrehome .wre-mock-head {
  padding: 1.5rem 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(229, 216, 204, 0.6);
}
#wrehome .wre-mock-head .lbl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foreground);
}
#wrehome .wre-mock-head .upd {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
}
#wrehome .wre-ping {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  display: inline-flex;
}
#wrehome .wre-ping .dot {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--primary);
}
#wrehome .wre-ping .pulse {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--primary);
  opacity: 0.6;
  animation: wrePing 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes wrePing {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

#wrehome .wre-mock-feat {
  padding: 1.25rem 1.5rem 1rem;
}
#wrehome .wre-mock-feat .inner {
  background: linear-gradient(
    135deg,
    #fffbeb,
    rgba(255, 247, 237, 0.7),
    rgba(255, 251, 235, 0.3)
  );
  border: 1px solid rgba(255, 237, 213, 0.6);
  border-radius: 1rem;
  padding: 1rem;
}
#wrehome .wre-mock-feat .row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
#wrehome .wre-mock-ic {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  background: #fff;
  border: 1px solid rgba(255, 237, 213, 0.6);
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  color: #d97706;
}
#wrehome .wre-mock-feat .cat {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 500;
  margin-bottom: 0.125rem;
}
#wrehome .wre-mock-feat .ttl {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.2;
}
#wrehome .wre-mock-feat .flex1 {
  flex: 1;
  min-width: 0;
}
#wrehome .wre-mock-feat .tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#wrehome .wre-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  white-space: nowrap;
}
#wrehome .wre-tag--white {
  background: #fff;
  border: 1px solid rgba(229, 216, 204, 0.8);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-tag--amber {
  background: #fef3c7;
  color: #b45309;
}
#wrehome .wre-tag--green {
  background: #f0fdf4;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#wrehome .wre-mock-list {
  padding: 0 1.5rem 1.25rem;
}
#wrehome .wre-mock-list .r {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(229, 216, 204, 0.5);
}
#wrehome .wre-mock-list .ic {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  background: var(--muted);
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
}
#wrehome .wre-mock-list .flex1 {
  flex: 1;
  min-width: 0;
}
#wrehome .wre-mock-list .cat {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.2;
}
#wrehome .wre-mock-list .desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
}
#wrehome .wre-mock-list .end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#wrehome .wre-mock-list .pct {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
#wrehome .tagc-rose {
  color: #e11d48;
  background: #fff1f2;
}
#wrehome .tagc-purple {
  color: #9333ea;
  background: #faf5ff;
}
#wrehome .tagc-blue {
  color: #2563eb;
  background: #eff6ff;
}

#wrehome .wre-mock-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(229, 216, 204, 0.6);
}
#wrehome .wre-mock-stats > div {
  padding: 1rem 1.5rem;
}
#wrehome .wre-mock-stats .l {
  border-right: 1px solid rgba(229, 216, 204, 0.6);
}
#wrehome .wre-mock-stats .rt {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.05),
    rgba(var(--primary-rgb), 0.1)
  );
}
#wrehome .wre-mock-stats .k {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
#wrehome .wre-mock-stats .v {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--foreground);
}
#wrehome .wre-mock-stats .rt .v {
  color: var(--primary);
}
#wrehome .wre-mock-stats .v .plus {
  color: var(--primary);
}

#wrehome .wre-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  z-index: 4;
}
#wrehome .wre-chip--verified {
  top: -0.75rem;
  right: -0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--foreground);
}
#wrehome .wre-chip--verified .g {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: #4ade80;
}
#wrehome .wre-chip--trending {
  bottom: -0.75rem;
  left: -0.75rem;
  background: var(--ink-dark);
  color: #fff;
}

/* Hero savings card — 4 uniform deal rows (per the July 2026 reference) */
#wrehome .wre-mock-cards {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
#wrehome .wre-mcard {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(229, 216, 204, 0.7);
  border-radius: 0.875rem;
  background: #fff;
}
#wrehome .wre-mcard-ic {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
}
#wrehome .wre-mcard-ic.tile--tmobile {
  background: #e20074;
  color: #fff;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
}
#wrehome .wre-mcard-ic.tile--purple { background: #f3e8ff; color: #6b5b73; }
#wrehome .wre-mcard-ic.tile--blue { background: #e0f2fe; color: #3b82f6; }
#wrehome .wre-mcard-ic.tile--amber { background: #fef3c7; color: #92400e; }
#wrehome .wre-mcard-mid { flex: 1; min-width: 0; }
#wrehome .wre-mcard-mid .cat { font-size: 0.75rem; color: var(--muted-foreground); }
#wrehome .wre-mcard-mid .ttl {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.2;
  margin: 0.0625rem 0 0.5rem;
}
#wrehome .wre-mcard-mid .tags { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
#wrehome .wre-mcard-mid .tags .wre-tag { padding: 0.1875rem 0.5rem; font-size: 0.7rem; }
#wrehome .wre-mcard-mid .tags .wre-tag--green { gap: 0.1875rem; }
#wrehome .wre-mcard .wre-pill--save { align-self: center; padding: 0.375rem 0.875rem; }

/* extra tag color variants used by the savings/deal cards */
#wrehome .wre-tag--rose { background: #ffe4e6; color: #e11d48; }
#wrehome .wre-tag--purple { background: #f3e8ff; color: #9333ea; }
#wrehome .wre-tag--blue { background: #dbeafe; color: #2563eb; }

/* featured-card save badge can hold longer text (e.g. "SAVE $6,000/yr") */
#wrehome .wre-feat .tag-tr span { white-space: nowrap; }
#wrehome .wre-pop .save { line-height: 1.05; }

/* ============================================================
   Section grids
   ============================================================ */
#wrehome .wre-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
#wrehome .wre-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
#wrehome .wre-cta-center {
  text-align: center;
  margin-top: 2.5rem;
}
#wrehome .wre-view-all {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* ---- benefit categories ---- */
#wrehome .wre-cat .art {
  height: 13rem;
  display: grid;
  place-items: center;
}
#wrehome .wre-cat .art svg {
  opacity: 0.55;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
#wrehome .wre-cat:hover .art svg {
  opacity: 0.8;
  transform: scale(1.1);
}
#wrehome .wre-cat .body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#wrehome .wre-cat h3 {
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
#wrehome .wre-cat p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
#wrehome .wre-cat .cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: auto;
  transition: opacity 0.2s;
}
#wrehome .wre-cat .cta:hover {
  opacity: 0.9;
}

/* gradient art fills + icon tints */
#wrehome .art--rose {
  background: linear-gradient(135deg, #fecdd3, #fce7f3, #fff1f2);
}
#wrehome .art--amber {
  background: linear-gradient(135deg, #fde68a, #ffedd5, #fffbeb);
}
#wrehome .art--stone {
  background: linear-gradient(135deg, #e7e5e4, #fffbeb, #f5f5f4);
}
#wrehome .art--purple {
  background: linear-gradient(135deg, #f3e8ff, #fdf2f8, #fdf4ff);
}
#wrehome .ic-rose500 {
  color: #f43f5e;
}
#wrehome .ic-amber600 {
  color: #d97706;
}
#wrehome .ic-stone500 {
  color: #78716c;
}
#wrehome .ic-purple400 {
  color: #c084fc;
}
#wrehome .ic-rose400 {
  color: #fb7185;
}
#wrehome .ic-sky400 {
  color: #38bdf8;
}
#wrehome .ic-emerald400 {
  color: #34d399;
}
#wrehome .cta--maroon {
  background: #8b2e4a;
}
#wrehome .cta--orange {
  background: #f08c1a;
}
#wrehome .cta--brown {
  background: #7a6040;
}
#wrehome .cta--plum {
  background: #9b4a6b;
}

/* ---- featured products ---- */
#wrehome .wre-feat .art {
  height: 12rem;
  display: grid;
  place-items: center;
  position: relative;
}
#wrehome .wre-feat .art svg {
  opacity: 0.45;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
#wrehome .wre-feat:hover .art svg {
  opacity: 0.65;
  transform: scale(1.1);
}
#wrehome .art--rose100 {
  background: linear-gradient(135deg, #ffe4e6, #fdf2f8);
}
#wrehome .art--sky100 {
  background: linear-gradient(135deg, #e0f2fe, #eff6ff);
}
#wrehome .art--emerald100 {
  background: linear-gradient(135deg, #d1fae5, #f0fdf4);
}
#wrehome .wre-feat .tag-tl {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
#wrehome .wre-feat .tag-tr {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
#wrehome .wre-feat .tag-tl span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-feat .tag-tr span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
}
#wrehome .wre-feat .body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#wrehome .wre-feat .micro {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
#wrehome .wre-feat h3 {
  font-size: 1.125rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}
#wrehome .wre-feat p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
#wrehome .wre-feat .body .wre-btn {
  width: 100%;
  margin-top: auto;
}

/* ---- popular deals ---- */
#wrehome .wre-pop .body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
#wrehome .wre-pop .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
#wrehome .wre-pop .badge {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.75rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffedd5, #fff7ed);
  color: var(--primary);
}
#wrehome .wre-pop .save {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
#wrehome .wre-pop h3 {
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.375rem;
}
#wrehome .wre-pop p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: 1rem;
}
#wrehome .wre-pop .users {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}
#wrehome .wre-pop .users b {
  font-weight: 600;
  color: var(--foreground);
}
#wrehome .wre-pop .wre-btn {
  width: 100%;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  margin-top: auto;
}
#wrehome .tag--amber {
  background: #fef3c7;
  color: #b45309;
}
#wrehome .tag--rose {
  background: #ffe4e6;
  color: #be123c;
}
#wrehome .tag--emerald {
  background: #d1fae5;
  color: #047857;
}
#wrehome .tag--blue {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ---- how it works ---- */
#wrehome .wre-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
#wrehome .wre-step {
  text-align: center;
}
#wrehome .wre-step .circle-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}
#wrehome .wre-step .circle {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  background: rgba(var(--primary-rgb), 0.1);
  display: grid;
  place-items: center;
  color: var(--primary);
}
#wrehome .wre-step .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-step .stepno {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
}
#wrehome .wre-step h3 {
  font-size: 1.25rem;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}
#wrehome .wre-step p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  max-width: 18rem;
  margin: 0 auto;
}

/* ---- why join ---- */
#wrehome .wre-why {
  text-align: center;
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.3s;
}
#wrehome .wre-why:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(255, 241, 228, 0.5);
  transform: translateY(-0.25rem);
}
#wrehome .wre-why .ic {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: rgba(var(--primary-rgb), 0.1);
  display: grid;
  place-items: center;
  margin: 0 auto 1.25rem;
  color: var(--primary);
}
#wrehome .wre-why h3 {
  font-size: 1.125rem;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}
#wrehome .wre-why p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}
#wrehome .wre-why-cta {
  text-align: center;
  margin: 3.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  max-width: 48rem;
}
#wrehome .wre-why-cta p {
  font-size: 1rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}
#wrehome .wre-why-cta b {
  font-weight: 700;
  color: var(--foreground);
}

/* ============================================================
   Testimonials carousel
   ============================================================ */
#wrehome .wre-tsection {
  padding: 6rem 1.5rem;
}
#wrehome .wre-carousel {
  max-width: 72rem;
  margin: 0 auto;
  position: relative;
  padding: 0 2.5rem 4rem;
}
#wrehome .wre-tviewport {
  overflow: hidden;
}
#wrehome .wre-ttrack {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#wrehome .wre-tslide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 0.75rem;
}
#wrehome .wre-tcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  height: 100%;
  transition:
    box-shadow 0.3s,
    border-color 0.3s;
}
#wrehome .wre-tcard:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
  border-color: rgba(var(--primary-rgb), 0.2);
}
#wrehome .wre-tstars {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 1.25rem;
  color: #fbbf24;
}
#wrehome .wre-tquote {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: rgba(var(--primary-rgb), 0.2);
  margin-bottom: 0.75rem;
  user-select: none;
}
#wrehome .wre-tcard .quote {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1.75rem;
  min-height: 5.5rem;
}
#wrehome .wre-tcard .who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
#wrehome .wre-tcard .av {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.2),
    rgba(var(--primary-rgb), 0.08)
  );
  color: var(--primary);
  font-weight: 700;
  font-size: 0.875rem;
}
#wrehome .wre-tcard .who b {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}
#wrehome .wre-tcard .who small {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
#wrehome .wre-tarrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--foreground);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  transition: all 0.2s;
}
#wrehome .wre-tarrow:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
#wrehome .wre-tarrow--prev {
  left: 0;
  margin-left: -1.25rem;
}
#wrehome .wre-tarrow--next {
  right: 0;
  margin-right: -1.25rem;
}
#wrehome .wre-tdots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
#wrehome .wre-tdot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--primary);
  opacity: 0.3;
  transition:
    opacity 0.25s,
    width 0.25s;
}
#wrehome .wre-tdot.is-active {
  opacity: 1;
  width: 1.75rem;
}

/* ============================================================
   Growth starts here
   ============================================================ */
#wrehome .wre-growth-wrap {
  max-width: 64rem;
  margin: 0 auto;
}
#wrehome .wre-growth {
  text-align: center;
  padding: 4rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 237, 213, 0.8);
  background: linear-gradient(
    135deg,
    #fdfaf7,
    rgba(255, 247, 237, 0.6),
    rgba(255, 251, 235, 0.4)
  );
  box-shadow: 0 4px 40px rgba(232, 96, 42, 0.07);
}
#wrehome .wre-growth .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
#wrehome .wre-growth .logo .name {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--foreground);
}
#wrehome .wre-growth h3 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--foreground);
  margin-bottom: 1.25rem;
}
#wrehome .wre-growth .lede {
  font-size: 1rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  max-width: 42rem;
  margin: 0 auto 3.5rem;
}
#wrehome .wre-growth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid #ffedd5;
  border-bottom: 1px solid #ffedd5;
}
#wrehome .wre-gstat .ic {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255, 237, 213, 0.6);
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  color: var(--primary);
}
#wrehome .wre-gstat .v {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  line-height: 1.15;
}
#wrehome .wre-gstat .l {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.125rem;
}
#wrehome .wre-gstat .s {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ============================================================
   Footer
   ============================================================ */
#wrehome .wre-foot {
  padding: 4rem 1.5rem;
  background: var(--ink-deep);
  color: #fff;
}
#wrehome .wre-foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
}
#wrehome .wre-foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
#wrehome .wre-foot .brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
#wrehome .wre-foot .brand .name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
}
#wrehome .wre-foot .about {
  font-size: 0.875rem;
  opacity: 0.6;
  line-height: 1.6;
  margin-bottom: 1rem;
}
#wrehome .wre-foot .since {
  font-size: 0.75rem;
  opacity: 0.4;
  margin-bottom: 1.5rem;
}
#wrehome .wre-foot .socials {
  display: flex;
  gap: 0.625rem;
}
#wrehome .wre-foot .socials span {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.2s;
  cursor: pointer;
}
#wrehome .wre-foot .socials span:hover {
  background: var(--primary);
}
#wrehome .wre-foot h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 1.25rem;
}
#wrehome .wre-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#wrehome .wre-foot ul a {
  font-size: 0.875rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
#wrehome .wre-foot ul a:hover {
  opacity: 1;
}
#wrehome .wre-foot .contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#wrehome .wre-foot .contact .row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
#wrehome .wre-foot .contact svg {
  margin-top: 0.125rem;
  color: var(--primary);
  flex: none;
}
#wrehome .wre-foot .contact .k {
  font-size: 0.75rem;
  opacity: 0.4;
  margin-bottom: 0.125rem;
}
#wrehome .wre-foot .contact .v {
  font-size: 0.875rem;
  opacity: 0.6;
  line-height: 1.6;
}
#wrehome .wre-foot-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#wrehome .wre-foot-bottom .cr {
  font-size: 0.75rem;
  opacity: 0.4;
}
#wrehome .wre-foot-bottom .links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.75rem;
}
#wrehome .wre-foot-bottom .links a {
  opacity: 0.4;
  transition: opacity 0.2s;
}
#wrehome .wre-foot-bottom .links a:hover {
  opacity: 0.7;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  #wrehome .wre-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  #wrehome .wre-tslide {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media (max-width: 900px) {
  #wrehome .wre-hero {
    padding: 5rem 1.5rem;
  }
  #wrehome .wre-hero-grid {
    grid-template-columns: 1fr;
  }
  #wrehome .wre-hero-media {
    order: 2;
  }
  #wrehome .wre-hero-copy {
    order: 1;
  }
  #wrehome .wre-grid-3,
  #wrehome .wre-steps,
  #wrehome .wre-growth-stats,
  #wrehome .wre-foot-cols {
    grid-template-columns: 1fr;
  }
  #wrehome .wre-nav-links {
    display: none;
  }
  #wrehome .wre-menu-btn {
    display: inline-flex;
  }
  #wrehome .wre-nav.is-open .wre-mobile-nav {
    display: flex;
  }
}
@media (max-width: 640px) {
  #wrehome .wre-grid-4 {
    grid-template-columns: 1fr;
  }
  #wrehome .wre-tslide {
    flex-basis: 100%;
    max-width: 100%;
  }
  #wrehome .wre-hero-actions {
    flex-direction: column;
  }
  #wrehome .wre-growth {
    padding: 2.5rem 1.5rem;
  }
  #wrehome .wre-foot-bottom {
    flex-direction: column;
  }
}