/* ============================================================
   landing.css — the public landing page (guest view of /).
   Sherbet, rewards-led: the page argues the exchange rate —
   chores earn points, points buy treats, the grown-up holds
   the till — and the weekly table plays the supporting act.

   Standalone by design. It shares the app's palette so the page
   and the product look like one thing, but none of its layout:
   sherbet.css owns the signed-in shell, this owns the shop window.
   Light-only, like sherbet.css.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Sherbet — same values as sherbet.css */
  --coral:      #ff6b6b;
  --coral-deep: #d63c3c;
  --sun:        #ffb020;
  --sun-deep:   #e08600;
  --mint:       #2ec27e;
  --mint-deep:  #17915a;
  --grape:      #9b5de5;
  --grape-deep: #7431c4;
  --ink:        #2d2440;
  --ink-2:      #6f6785;
  --paper:      #fdf8f2;
  --card:       #ffffff;

  --r:      26px;
  --r-sm:   16px;
  --max:    1120px;
  --gutter: 18px;
  --shadow: 0 2px 10px rgba(45,36,64,.06);
  --shadow-lift: 0 14px 40px rgba(45,36,64,.2);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; border-radius: 6px; }

.lp-shell { max-width: var(--max); margin: 0 auto; }

/* Skip link — the page is long and mostly links. */
.lp-skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  font-size: 13px; font-weight: 700; z-index: 100;
}
.lp-skip:focus { left: 0; top: 0; }

/* ── Nav ── */
.lp-nav {
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--gutter);
}
.lp-logo { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.lp-nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.lp-signin {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  padding: 8px 12px; border-radius: 999px;
}
.lp-signin:hover { color: var(--ink); background: rgba(45,36,64,.05); }
.lp-nav-cta {
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 8px 15px; border-radius: 999px;
}
.lp-nav-cta:hover { background: #40355c; }

/* ── Hero ── */
.lp-hero {
  margin: 0 12px;
  padding: 30px 22px 28px;
  background: linear-gradient(135deg, var(--coral) 0%, #ff8e53 55%, var(--sun) 100%);
  border-radius: var(--r);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* The page sells rewards, so the watermark is the gift, not the trophy. */
.lp-hero::after {
  content: '🎁';
  position: absolute; right: -16px; bottom: -28px;
  font-size: 132px; opacity: .16;
  transform: rotate(-12deg);
  pointer-events: none;
}
.lp-hero-copy { position: relative; z-index: 1; }
.lp-tag {
  display: inline-block;
  background: rgba(255,255,255,.24);
  font-size: 11px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 14px;
}
.lp-hero h1 {
  font-size: clamp(32px, 7vw, 34px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  text-wrap: balance;
}
.lp-hero-sub {
  margin-top: 12px;
  font-size: 14.5px; font-weight: 500;
  opacity: .95; max-width: 42ch;
}
.lp-actions { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.lp-btn {
  background: #fff; color: var(--coral-deep);
  font-size: 13px; font-weight: 800;
  padding: 12px 19px; border-radius: 999px;
  transition: transform .12s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-ghost { background: rgba(255,255,255,.2); color: #fff; }

/* ── Hero object: the wallet, and what it can and can't buy yet ── */
.lp-wallet {
  background: var(--card);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--shadow-lift);
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}
.lp-wallet::after {
  content: '💰';
  position: absolute; right: -6px; top: -10px;
  font-size: 62px; opacity: .1;
  transform: rotate(10deg);
}
.lp-w-label {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2);
}
.lp-w-value {
  font-size: 40px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.lp-w-sub { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.lp-w-shop { display: flex; gap: 8px; margin-top: 14px; }
.lp-w-item { flex: 1; background: var(--paper); border-radius: 14px; padding: 10px; text-align: center; }
.lp-w-emoji { font-size: 24px; }
.lp-w-name { font-size: 11.5px; font-weight: 800; margin-top: 3px; }
.lp-w-btn {
  margin-top: 7px;
  font-size: 10.5px; font-weight: 800;
  border-radius: 999px; padding: 5px 0;
  color: #fff; background: var(--mint);
}
/* The app's own locked state: (cost − balance) + " pts to go!" */
.lp-w-btn.locked { background: rgba(45,36,64,.1); color: var(--ink-2); }

/* ── Sections ── */
.lp-sec { padding: 34px var(--gutter); }
.lp-sec-tight { padding-top: 0; }
.lp-sec h2 {
  font-size: clamp(24px, 5.5vw, 25px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  text-wrap: balance;
}
.lp-sec-sub { margin-top: 10px; font-size: 14px; color: var(--ink-2); max-width: 48ch; }

/* Beat 1 — earning */
.lp-chores { display: grid; gap: 8px; margin-top: 20px; }
.lp-chore {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border-radius: var(--r-sm);
  padding: 11px 14px; box-shadow: var(--shadow);
}
.lp-chore-e {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.lp-chore-n { flex: 1; font-size: 13.5px; font-weight: 700; }
.lp-chore-p { font-size: 14px; font-weight: 800; color: var(--mint); font-variant-numeric: tabular-nums; }
.lp-rates {
  margin-top: 14px; font-size: 12.5px; color: var(--ink-2);
  background: var(--card); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow);
}
.lp-rates b { color: var(--ink); }

/* Beat 2 — the shop */
.lp-tiers { display: grid; gap: 12px; margin-top: 20px; }
.lp-tier { background: var(--card); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.lp-tier-h { display: flex; align-items: baseline; gap: 8px; }
.lp-tier-n { font-size: 14.5px; font-weight: 800; }
.lp-tier-r { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-2); }
.lp-tier-p { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.lp-tier-items { display: flex; gap: 8px; margin-top: 12px; }
.lp-pill { flex: 1; border-radius: 12px; padding: 9px 4px; text-align: center; background: var(--paper); }
.lp-pill-e { font-size: 20px; }
.lp-pill-n { font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.lp-pill-c { font-size: 11px; font-weight: 800; margin-top: 3px; }
.lp-tier-quick .lp-pill-c { color: var(--mint-deep); }
.lp-tier-gold  .lp-pill-c { color: var(--sun-deep); }
.lp-progress { margin-top: 12px; }
.lp-progress-t {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 5px;
}
.lp-track { height: 8px; border-radius: 999px; background: rgba(45,36,64,.08); overflow: hidden; }
.lp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--grape), var(--grape-deep)); }

/* Beat 3 — the till */
.lp-till {
  background: var(--card); border-radius: 20px;
  padding: 16px; margin-top: 20px; box-shadow: var(--shadow);
}
.lp-till-h { font-size: 13px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.lp-till-c { background: rgba(45,36,64,.06); border-radius: 999px; font-size: 10.5px; padding: 1px 7px; font-weight: 800; }
.lp-req { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.lp-req + .lp-req { border-top: 1px solid rgba(45,36,64,.06); }
.lp-req-e {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.lp-req-b { flex: 1; min-width: 0; }
.lp-req-n { font-size: 12.5px; font-weight: 700; }
.lp-req-s { font-size: 10.5px; color: var(--ink-2); display: block; }
.lp-req-a { display: flex; gap: 5px; }
.lp-yes, .lp-no {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}
.lp-yes { background: var(--mint); }
.lp-no { background: rgba(45,36,64,.12); color: var(--ink-2); }
.lp-refund { margin-top: 12px; font-size: 12px; color: var(--ink-2); border-left: 2px solid var(--mint); padding-left: 9px; }

/* ── The supporting act: the weekly table ── */
.lp-race {
  margin: 0 12px;
  background: var(--ink);
  border-radius: var(--r);
  padding: 26px 22px;
  color: #fff;
}
.lp-race h2 { font-size: clamp(22px, 5vw, 22px); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.lp-race-sub { margin-top: 8px; font-size: 13.5px; opacity: .72; max-width: 44ch; }
.lp-race-card { background: rgba(255,255,255,.07); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 18px; }
.lp-race-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.lp-race-row + .lp-race-row { border-top: 1px solid rgba(255,255,255,.08); }
.lp-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 11px; flex-shrink: 0;
}
/* Same id → hue rule as the app's av-0…4 */
.lp-av-0 { background: linear-gradient(135deg, #3da9fc, #2276c9); }
.lp-av-1 { background: linear-gradient(135deg, #9b5de5, #7431c4); }
.lp-av-2 { background: linear-gradient(135deg, #ffb020, #f77f00); }
.lp-race-n { flex: 1; font-size: 12.5px; font-weight: 700; }
.lp-race-p { font-size: 13px; font-weight: 800; color: var(--sun); font-variant-numeric: tabular-nums; }

/* ── Close ── */
.lp-end {
  margin: 32px 12px 0;
  padding: 34px 22px;
  background: var(--card);
  border-radius: var(--r);
  text-align: center;
  box-shadow: var(--shadow);
}
.lp-end h2 { font-size: clamp(24px, 5.5vw, 25px); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.lp-end p { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }
.lp-end .lp-btn { display: inline-block; margin-top: 16px; background: var(--coral); color: #fff; }
.lp-foot {
  padding: 18px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-2);
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.lp-foot a:hover { color: var(--ink); }

/* ============================================================
   DESKTOP — 760px up. Earlier than the app's 900px break: this
   page is columns of prose and cards, not a sidebar shell, and
   it has room to spread well before the dashboard would.
   ============================================================ */
@media (min-width: 760px) {
  :root { --gutter: 34px; }

  .lp-nav { padding: 18px var(--gutter); }

  .lp-hero {
    margin: 0 24px;
    padding: 52px 44px 48px;
    border-radius: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 44px;
    align-items: center;
  }
  .lp-hero h1 { font-size: clamp(38px, 4.4vw, 52px); }
  .lp-hero-sub { font-size: 16px; }
  .lp-wallet { margin-top: 0; }

  .lp-sec { padding: 52px var(--gutter); }
  .lp-sec h2 { font-size: clamp(28px, 3.2vw, 36px); }
  .lp-sec-sub { font-size: 15px; }
  .lp-chores { grid-template-columns: repeat(2, 1fr); }
  .lp-tiers { grid-template-columns: repeat(3, 1fr); }
  .lp-till { max-width: 620px; }

  .lp-race {
    margin: 0 24px;
    padding: 44px;
    border-radius: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 44px;
    align-items: center;
  }
  .lp-race h2 { font-size: clamp(26px, 3vw, 32px); }
  .lp-race-card { margin-top: 0; }

  .lp-end { margin: 44px 24px 0; padding: 56px 44px; border-radius: 32px; }
  .lp-end h2 { font-size: clamp(28px, 3.2vw, 36px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}