/* ===========================================================
   Home (marketing landing) — page-only styles. Shared tokens,
   base type, nav, footer, buttons and section rhythm live in
   ../site.css; this file is the hero, the how-it-works band,
   the gives band, the beta CTA and the phone-mockup hero
   visual.

   .phone-mockup is a real interface fragment (a scaled-down
   preview of the Wishie app), not a decorative card: flat
   surfaces, no gradients, no emoji — initials stand in for
   product photography that does not exist for this build.
   =========================================================== */

.homepage {
  display: none;
  background: var(--bg-canvas);
  color: var(--text-primary);
  min-height: 100svh;
}

/* ===================== HERO ===================== */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: var(--gutter);
  align-items: center; max-width: 1180px; margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--margin) clamp(3rem, 6vw, 5rem);
}
.home-hero-copy h1 { font-size: var(--step-display); line-height: 1.04; letter-spacing: -0.015em; color: var(--text-primary); max-width: 13ch; }
.home-hero-copy .lead { font: 400 var(--step-lead)/1.5 var(--font-body); color: var(--text-secondary); margin-top: 18px; max-width: 42ch; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.home-hero-note { margin-top: 16px; font: 500 var(--step-small)/1.4 var(--font-body); color: var(--text-muted); }

.home-hero-visual { display: flex; justify-content: center; }
.phone-mockup {
  width: 280px; background: var(--bg-card); border-radius: 36px; overflow: clip;
  box-shadow: 0 0 0 2px var(--spruce-950), 0 0 0 7px var(--border-strong), 0 30px 60px color-mix(in srgb, var(--spruce-950) 28%, transparent); /* device bezel depth */
}
.phone-screen { display: flex; flex-direction: column; }
.phone-app-header { padding: 24px 20px 14px; }
.phone-app-title { font: 400 22px/1.1 var(--font-display); color: var(--text-primary); }
.phone-app-subtitle { font: 500 var(--step-small)/1.3 var(--font-body); color: var(--text-muted); margin-top: 4px; }
.phone-list { padding: 0 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.phone-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--border-soft); border-radius: var(--radius-md); }
.phone-item-mark { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--font-body); flex-shrink: 0; background: var(--surface-brand-soft); color: var(--text-brand); }
.phone-item-mark--warm { background: var(--persimmon-50); color: var(--persimmon-700); }
.phone-item-mark--gold { background: var(--brass-50); color: var(--brass-700); }
@media (prefers-color-scheme: dark) {
  .phone-item-mark--warm { background: color-mix(in srgb, var(--persimmon-400) 22%, var(--bg-card)); color: var(--persimmon-100); }
  .phone-item-mark--gold { background: color-mix(in srgb, var(--brass-500) 22%, var(--bg-card)); color: var(--brass-200); }
}
.phone-item-info { flex: 1; min-width: 0; }
.phone-item-name { font: 600 var(--step-small)/1.3 var(--font-body); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-item-store { font: 500 var(--step-small)/1.3 var(--font-body); color: var(--text-muted); margin-top: 2px; }
.phone-item-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; }
.phone-item-check.checked { background: var(--spruce-700); border-color: var(--spruce-700); }


@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .home-hero-visual { margin-top: 8px; }
  .phone-mockup { width: 240px; }
}

/* ===================== HOW IT WORKS ===================== */
.home-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: 4px; }
.home-how-step { background: var(--spruce-900); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 30px) clamp(22px, 3vw, 26px); }
.home-how-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--spruce-800); color: var(--spruce-200); font: 700 16px/1 var(--font-body); }
.home-how-step--accent .home-how-num { background: var(--spruce-200); color: var(--spruce-950); }
.home-how-step h3 { font: 400 var(--step-title)/1.2 var(--font-display); color: var(--paper-1); margin: 16px 0 8px; }
.home-how-step p { font: 400 var(--step-body)/1.55 var(--font-body); color: var(--spruce-200); }
@media (max-width: 760px) { .home-how-grid { grid-template-columns: 1fr; } }

/* ===================== WISHIE GIVES BAND ===================== */
.home-gives-grid { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.home-gives .link-row { margin-top: 12px; }
.home-gives .link-row a { display: inline-flex; align-items: center; min-height: 44px; }
.home-causes { background: var(--bg-card); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 34px); overflow: clip; }
.home-causes-photo { width: calc(100% + clamp(52px, 6vw, 68px)); margin: calc(-1 * clamp(26px, 3vw, 34px)) calc(-1 * clamp(26px, 3vw, 34px)) clamp(22px, 3vw, 28px); max-width: none; height: clamp(160px, 22vw, 220px); object-fit: cover; object-position: 50% 35%; }
.home-causes-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.home-causes-list li { font: 600 var(--step-small)/1.4 var(--font-body); color: var(--text-secondary); padding-left: 16px; position: relative; }
.home-causes-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-brand); }
.home-causes-note { margin-top: 20px; padding-top: 18px; border-top: 4px solid var(--border-soft); font: 500 var(--step-small)/1.4 var(--font-body); color: var(--text-muted); }
@media (max-width: 760px) { .home-gives-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .home-causes-list { grid-template-columns: 1fr; } }

/* ===================== BETA CTA ===================== */
.home-cta { background: var(--spruce-950); }
.home-cta-inner { max-width: 640px; margin-inline: auto; text-align: center; }
.home-cta-inner h2 { font-size: var(--step-title); color: var(--paper-1); }
.home-cta-inner p { font: 400 var(--step-lead)/1.5 var(--font-body); color: var(--spruce-200); margin: 14px auto 0; max-width: 46ch; }
.home-cta-stores { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.home-store-badge { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--radius-md); transition: transform var(--t-press) var(--ease-out); }
.home-store-badge:active { transform: scale(0.97); }
.home-store-badge img { height: 40px; width: auto; }
/* Google's artwork carries ~1/6 transparent padding top and bottom: scale it up and trim so both badges read 40px tall (measured on the rendered pixels) */
.home-store-badge--play img { height: 58px; margin-block: -9px; }
.home-cta-note { margin-top: 18px; font: 500 var(--step-small)/1.4 var(--font-body); color: var(--spruce-300); }
.footer .credits { margin-top: 14px; }