/* ============================================================
   Homepage — page-only warm/premium theme
   Same pattern as .pricing-main / .why-main: shared design tokens
   are re-declared inside a page-only wrapper class so every existing
   component that already consumes var(--ink), var(--line) etc.
   re-themes automatically. .home-main only exists on index.html, so
   nothing here can reach any other page. The cart drawer / cookie
   banner sit outside <main> in the DOM, so they are unaffected too.
   ============================================================ */

.home-main {
  --ink:     #171717;
  --body:    #686866;
  --muted:   #686866;
  --muted-2: #686866;
  --line:    #D8D6CF;
  --line-2:  #D8D6CF;
  --accent:  #203D68;

  /* tones with no existing token slot */
  --wr-bone:  #F5F2EA;
  --wr-grey:  #ECEBE7;
  --wr-card:  #FCFBF7;
  --wr-dark:  #111211;

  /* spacing rhythm — desktop ~80px between bands, ~32px inside groups */
  --wr-gap:   clamp(56px, 7vw, 80px);
  --wr-group: clamp(24px, 3.5vw, 32px);
}
@media (max-width: 620px) {
  .home-main { --wr-gap: clamp(48px, 12vw, 56px); --wr-group: 20px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--wr-bone); }
.hero .container { padding-block: clamp(48px, 6vw, 84px); }
.home-main .eyebrow { color: var(--accent); }
.home-main .hero-lead { color: var(--body); }

.home-main .btn--primary { color: var(--wr-card); }
.home-main .btn--ghost { background: var(--wr-card); border-color: var(--line); color: var(--ink); }
.home-main .btn--ghost:hover { background: var(--wr-bone); border-color: var(--ink); }

/* ---------- Hero benefits — a de-boxed row below the hero, not cards
   beside the product shot. Content unchanged, just relocated. ---------- */
.hero-benefits { background: var(--wr-bone); padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 5vw, 56px); }
.hero-benefits__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.hero-benefits__row li { display: flex; gap: .9rem; align-items: flex-start; }
.hero-benefits__ic { flex: none; width: 22px; height: 22px; color: var(--accent); }
.hero-benefits__row strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .97rem; margin-bottom: .2rem; }
.hero-benefits__row span { color: var(--body); font-size: .89rem; line-height: 1.5; }

/* ---------- How it works (preview) — two equal cards, one per side of
   the exchange. Deliberately distinct from the line-divided 3-column
   layout the full /how-it-works.html page uses, so the two pages don't
   repeat. Navy/blue below are a deliberate one-off accent for this
   section only — scoped to .hiw-preview, not the shared token set. ---------- */
.hiw-preview {
  background: var(--wr-card); padding-block: var(--wr-gap);
  --hiw-navy: #1E365A; --hiw-blue: #1A73E8;
}
/* left-aligned by design — a deliberate break from the centered rhythm
   everywhere else on the page (hero-benefits, cats, final are centered) */
.hiw-preview .section-head { margin-bottom: calc(var(--wr-group) + 12px); text-align: left; margin-inline: 0; max-width: 640px; }
.hiw-preview .section-title { color: var(--hiw-navy); }

.hiw-preview__cards {
  --hiw-gap: clamp(1.5rem, 6vw, 3rem);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--hiw-gap);
  max-width: 900px; margin-inline: auto;
}
/* a single faint hairline between the two columns, not a box around either — at every width */
.hiw-preview__card:first-child { position: relative; }
.hiw-preview__card:first-child::after {
  content: ""; position: absolute; top: .15rem; bottom: .15rem;
  right: calc(var(--hiw-gap) / -2);
  width: .5px; background: var(--line);
}
.hiw-preview__ic { width: 24px; height: 24px; color: var(--hiw-blue); margin-bottom: 1.3rem; }
.hiw-preview__card h3 { font-size: 1.15rem; font-weight: 600; color: var(--hiw-navy); margin-bottom: .6rem; }
.hiw-preview__card p { color: var(--muted); font-size: .96rem; font-weight: 400; line-height: 1.6; }

.hiw-preview__link {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: var(--wr-group); min-height: 44px; padding-inline: .75rem;
  font-family: var(--font-display); font-weight: 600; color: var(--hiw-blue); font-size: .96rem;
}
.hiw-preview__link svg { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.hiw-preview__link:hover svg { transform: translateX(3px); }

@media (max-width: 480px) {
  .hiw-preview__card h3 { font-size: 1.02rem; }
  .hiw-preview__card p { font-size: .87rem; }
}

/* ---------- Categories ---------- */
.cats { background: var(--wr-bone); border-color: var(--line); }
.home-main .cats-pill { background: var(--wr-card); border-color: var(--line); color: var(--body); }

/* ---------- Final CTA ---------- */
.home-main .final { background: var(--wr-dark); padding-block: clamp(56px, 7vw, 88px); }
.home-main .final .container { max-width: 640px; }
.home-main .final h2 { color: var(--wr-card); }
.home-main .btn--yellow { background: var(--wr-card); }

@media (max-width: 880px) {
  .hero-benefits__row { grid-template-columns: 1fr; gap: 1.4rem; max-width: 420px; margin-inline: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .hero-visual { margin-top: .4rem; gap: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-main .hiw-preview__link svg { transition: none; }
}