/* ══ Peaches design system v1 — tokens and rules in DESIGN.md ══
   Desktop IS the single 640px editorial column, centered. Intentional. */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --peach:#f2a97e; --peach-light:#fde8d8; --peach-deep:#e07a45;
  --sage:#8aab96; --ink:#1e1e1e; --ink-soft:#4a4a4a;
  --muted:#6f6f65; /* 4.5:1 floor on cream — never lighter */
  --cream:#fdfcfa; --warm:#f5f0e6; --border:#ebebeb;
  --err:#b0432a; --err-bg:#fbeae3;
  /* font token — Lora is provisional; swap here + the @font-face block only */
  --serif:'Lora',Georgia,'Noto Serif',serif;
}

/* Lora self-hosted (variable: covers 400–500). latin-ext carries ₹ (U+20B9). */
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('/fonts/lora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113; }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

body { background:var(--cream); color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.6; }
.wrap { max-width:640px; margin:0 auto; padding:0 20px; }

:focus-visible { outline:2px solid var(--peach-deep); outline-offset:2px; }

.wordmark { letter-spacing:3px; text-transform:uppercase; }

/* photo placeholders — production: WebP ≤150KB, width/height set, warm bg while loading */
.ph { background:repeating-linear-gradient(45deg,#eee6da,#eee6da 12px,#f5efe6 12px,#f5efe6 24px); display:flex; align-items:center; justify-content:center; color:#a08d76; font-style:italic; font-size:13px; text-align:center; padding:12px; }
img { max-width:100%; height:auto; background:var(--warm); }

/* ── HERO: one composition — brand, product, photo, CTA all above fold ── */
.hero { padding:26px 0 8px; }
.hero-brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.hero-brand a { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; }
.hero-brand .wordmark { font-size:17px; letter-spacing:4px; }
.hero-product-line { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--peach-deep); margin-bottom:10px; }
.hero-photo { aspect-ratio:16/9; margin:0 -20px; }
h1 { font-size:clamp(24px,6vw,34px); font-weight:normal; line-height:1.22; margin:16px 0 4px; }
h1 em { font-style:italic; color:var(--peach-deep); }

/* ── OFFER BLOCK: buy + fact row + verbatim refund line ── */
.offer { padding:16px 0 4px; }
.btn-buy { display:block; width:100%; background:var(--ink); color:var(--cream); border:none; padding:17px; font-family:inherit; font-size:14px; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; min-height:56px; text-align:center; text-decoration:none; }
.btn-buy:hover { background:var(--peach-deep); }
.offer-facts { display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:center; margin-top:10px; font-size:14px; color:var(--ink-soft); }
.offer-facts span::before { content:'·'; margin-right:14px; color:var(--peach); }
.offer-facts span:first-child::before { content:''; margin:0; }
.refund-line { margin-top:8px; text-align:center; font-size:14px; color:var(--muted); }

/* sticky buy bar — live state only, appears when hero CTA scrolled away */
.sticky-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--ink); display:none; align-items:center; justify-content:space-between; padding:12px 20px; gap:12px; }
.sticky-bar.show { display:flex; }
.sticky-price { color:var(--cream); font-size:15px; letter-spacing:.5px; }
.sticky-btn { background:var(--peach); color:#fff; border:none; padding:12px 22px; font-family:inherit; font-size:12px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; min-height:44px; text-decoration:none; display:inline-block; }

/* waitlist (coming-soon) — Tally embed, lazy-loaded, with always-visible fallback link */
.waitlist { padding:16px 0 4px; }
.waitlist .wl-label { display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.wl-embed { min-height:120px; }
.wl-embed iframe { width:100%; border:0; }
.wl-fallback { margin-top:8px; font-size:14px; }
.wl-fallback a { color:var(--peach-deep); }
.wl-note { margin-top:10px; font-size:14px; font-style:italic; color:var(--muted); }

/* payment-failed banner — shown on return with ?payment=failed */
.fail-banner { display:none; background:var(--err-bg); border:1px solid #e0b39c; padding:14px 16px; margin:16px 0 0; font-size:14.5px; color:#7a3b20; }
body.failed .fail-banner { display:block; }

section { padding:48px 0 0; }
.sec-label { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sec-label::after { content:''; flex:1; height:1px; background:var(--border); }
h2 { font-size:clamp(22px,5.5vw,30px); font-weight:normal; line-height:1.3; margin-bottom:10px; }
.why p { margin:14px 0; color:var(--ink-soft); }
.why p em { color:var(--peach-deep); }
.why .kicker { font-size:19px; line-height:1.55; }

.spread { margin:22px 0; }
.spread .ph, .spread img { aspect-ratio:4/3; width:calc(100% + 40px); margin:0 -20px; object-fit:cover; }
.spread figcaption { padding:10px 0 0; font-size:14px; font-style:italic; color:var(--muted); }
.spread figcaption b { color:var(--ink); font-style:normal; letter-spacing:1px; font-size:12px; text-transform:uppercase; font-weight:normal; }

/* specs strip — real values from the prototype */
.specs { display:flex; flex-wrap:wrap; gap:10px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0; margin-top:24px; }
.specs div { flex:1 1 50%; font-size:14px; color:var(--ink-soft); }
.specs div b { display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:normal; margin-bottom:2px; }

/* founder note */
.founder { background:var(--warm); margin:48px -20px 0; padding:40px 20px; }
.founder-inner { max-width:600px; margin:0 auto; }
.founder-photo { width:140px; height:140px; border-radius:50%; overflow:hidden; margin-bottom:18px; }
.founder p { margin:12px 0; color:var(--ink-soft); font-size:15.5px; }
.founder .sig { font-style:italic; font-size:17px; margin-top:14px; color:var(--ink); }
.founder .ig { font-size:13px; letter-spacing:1px; margin-top:6px; }
.founder .ig a { color:var(--peach-deep); }

/* honesty note — hairline border, warm tone, no colored edges, no icons */
.honest { border:1px solid var(--border); background:var(--warm); padding:22px 20px; margin-top:28px; }
.honest p { font-size:14.5px; color:var(--ink-soft); }
.honest p + p { margin-top:10px; }

/* sold-out note */
.soldout-note { background:var(--peach-light); border:1px solid var(--peach); padding:18px; font-size:15px; margin-top:16px; }

/* confirmation (confirm.html) — Prachi's voice */
.confirm { text-align:left; padding:56px 0; }
.confirm .big { font-size:clamp(26px,6vw,36px); line-height:1.25; margin:12px 0; }
.confirm .big em { font-style:normal; color:var(--peach-deep); }
.confirm p { margin:12px 0; color:var(--ink-soft); }

/* policy pages */
.policy { padding:8px 0 24px; }
.policy h1 { margin:24px 0 6px; }
.policy .updated { font-size:13px; font-style:italic; color:var(--muted); margin-bottom:8px; }
.policy h2 { font-size:19px; margin:28px 0 8px; }
.policy p, .policy li { color:var(--ink-soft); font-size:15.5px; margin:10px 0; }
.policy ul { padding-left:22px; }
.policy a { color:var(--peach-deep); }

footer { margin-top:64px; border-top:1px solid var(--border); background:var(--warm); padding:32px 20px 80px; }
.foot-inner { max-width:640px; margin:0 auto; }
.foot-links { display:flex; flex-wrap:wrap; gap:12px 22px; margin:12px 0 16px; }
.foot-links a { font-size:14px; font-style:italic; color:var(--muted); text-decoration:none; }
.foot-links a:visited { color:#8b7d6b; }
.foot-links a:hover { color:var(--peach-deep); }
.foot-copy { font-size:12px; color:var(--muted); font-style:italic; }

/* page states: default is set on <body data-state>; failed adds body.failed via JS */
.st { display:none; }
body[data-state="live"] .st-live,
body[data-state="coming"] .st-coming,
body[data-state="soldout"] .st-soldout { display:block; }

@media (min-width:641px) {
  .hero-photo, .founder { margin-left:0; margin-right:0; }
  .spread .ph, .spread img { width:100%; margin:0; }
  .founder { padding:40px 32px; }
}