/* ============================================================
   MORNINGPROMO - "First Light"
   Deliberately unlike FannyDeals: light warm paper instead of the dark
   Midnight Neon, editorial serif instead of geometric sans, a numbered
   vertical board instead of a card grid, no bottom tab bar.
   ============================================================ */

:root{
  /* paper + ink */
  --paper:#FFFBF5;
  --paper-2:#FBF3E8;
  --card:#FFFFFF;
  --ink:#14110E;
  --ink-2:#3E362E;
  --muted:#7A6F63;
  --line:#EBE0D2;
  --line-2:#DACBB6;

  /* sunrise */
  --pine:#0F5C57;        /* dominant */
  --pine-2:#0A4541;
  --amber:#F2A03D;       /* accent */
  --amber-soft:#FDEBD0;
  --coral:#D9544D;       /* urgency only */
  --success:#1B7A4E;

  --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,17,14,.04), 0 12px 34px rgba(20,17,14,.07);
  --shadow-lift:0 2px 6px rgba(20,17,14,.06), 0 22px 50px rgba(20,17,14,.12);
  --ease:cubic-bezier(.22,.85,.3,1);
  --wrap:1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px; line-height:1.6; letter-spacing:-.005em;
  /* soft sunrise wash, keeps the paper from reading flat */
  background-image:
    radial-gradient(900px 420px at 82% -8%, rgba(242,160,61,.16), transparent 62%),
    radial-gradient(760px 380px at 6% 2%, rgba(15,92,87,.08), transparent 60%);
  background-repeat:no-repeat;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

h1,h2,h3{ font-family:"Fraunces","Iowan Old Style",Georgia,serif; font-weight:600;
  letter-spacing:-.02em; line-height:1.1; margin:0; }
h1{ font-size:clamp(2.3rem,5.4vw,3.9rem); }
h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); }
h3{ font-size:1.12rem; letter-spacing:-.01em; }
p{ margin:.6rem 0; }

.eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pine); display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--amber); border-radius:2px; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60; background:rgba(255,251,245,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .row{ display:flex; align-items:center; gap:1rem; height:64px; }
.logo{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:700;
  font-family:"Fraunces",Georgia,serif; font-size:1.22rem; letter-spacing:-.02em; }
.logo .sun{ width:26px; height:26px; border-radius:50%; flex:none;
  background:conic-gradient(from 210deg,var(--amber),#FFD9A0,var(--amber));
  box-shadow:0 0 0 4px rgba(242,160,61,.16); }
.spacer{ flex:1; }
.langs{ display:inline-flex; gap:.15rem; border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.2rem; }
.langs a,.langs span{ padding:.24rem .6rem; border-radius:var(--r-pill); text-decoration:none;
  font-size:.76rem; font-weight:700; letter-spacing:.06em; color:var(--muted); }
.langs .on{ background:var(--pine); color:#fff; }
.langs a:hover{ color:var(--ink); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; cursor:pointer; text-decoration:none; font-weight:700; font-size:.92rem;
  padding:.72rem 1.15rem; border-radius:var(--r-pill); transition:transform .18s var(--ease), box-shadow .18s, background .18s; }
.btn-primary{ background:var(--pine); color:#fff; box-shadow:0 8px 20px rgba(15,92,87,.24); }
.btn-primary:hover{ background:var(--pine-2); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--pine); color:var(--pine); }
.btn-amber{ background:var(--amber); color:#3B2708; box-shadow:0 8px 20px rgba(242,160,61,.3); }
.btn-amber:hover{ transform:translateY(-1px); }
.btn-sm{ padding:.5rem .9rem; font-size:.84rem; }

/* ---------- hero ---------- */
.hero{ padding:clamp(2.6rem,7vw,4.6rem) 0 clamp(1.6rem,3vw,2.4rem); }
.hero .stamp{ font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:.55rem; }
.hero .stamp .dot{ width:7px; height:7px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 4px rgba(27,122,78,.14); }
.hero h1 em{ font-style:normal; color:var(--pine); position:relative; white-space:nowrap; }
.hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.28em;
  background:var(--amber); opacity:.32; border-radius:3px; z-index:-1; }
.hero .lede{ font-size:1.08rem; color:var(--ink-2); max-width:56ch; margin-top:1rem; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem; }
.trustline{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.2rem;
  padding-top:1.4rem; border-top:1px solid var(--line); }
.trustline div{ font-size:.86rem; color:var(--muted); }
.trustline b{ display:block; font-family:"Fraunces",Georgia,serif; font-size:1.45rem;
  color:var(--ink); font-weight:600; letter-spacing:-.02em; }

/* ---------- the board (numbered editorial list, not a card grid) ---------- */
.board{ padding:clamp(1.6rem,4vw,2.6rem) 0; }
.board-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.board-list{ border-top:1px solid var(--line); }
.deal{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem; align-items:center;
  padding:1.5rem .3rem; border-bottom:1px solid var(--line); position:relative;
}
.deal:hover{ background:linear-gradient(90deg,rgba(242,160,61,.06),transparent 55%); }
.deal .rank{ font-family:"Fraunces",Georgia,serif; font-size:1.7rem; font-weight:600;
  color:var(--line-2); min-width:2.1rem; text-align:center; letter-spacing:-.03em; }
.deal .body{ min-width:0; }
.deal .badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.tag{ font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.24rem .55rem; border-radius:6px; }
.tag-hot{ background:var(--coral); color:#fff; }
.tag-new{ background:var(--amber-soft); color:#8A5A11; }
.tag-store{ background:var(--pine); color:#fff; }
.deal h3{ margin:0 0 .3rem; }
.deal .desc{ color:var(--muted); font-size:.93rem; margin:0; }
.deal .meta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.6rem; font-size:.79rem; color:var(--muted); }
.deal .meta b{ color:var(--ink-2); }
.deal .act{ text-align:right; }
.deal .off{ font-family:"Fraunces",Georgia,serif; font-size:1.85rem; font-weight:600;
  color:var(--pine); letter-spacing:-.03em; line-height:1; margin-bottom:.6rem; display:block; }
.nocode{ font-size:.74rem; color:var(--success); font-weight:700; margin-top:.5rem; display:block; }

/* ---------- steps ---------- */
.steps{ background:var(--pine); color:#F4EFE7; padding:clamp(2.2rem,5vw,3.4rem) 0; margin:2.4rem 0; }
.steps h2{ color:#fff; }
.steps .eyebrow{ color:var(--amber); }
.steps .eyebrow::before{ background:var(--amber); }
.step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1.8rem; }
.step{ border-top:2px solid rgba(255,255,255,.22); padding-top:1rem; }
.step .n{ font-family:"Fraunces",Georgia,serif; font-size:1.05rem; color:var(--amber); font-weight:600; }
.step h3{ margin:.35rem 0 .3rem; color:#fff; }
.step p{ margin:0; font-size:.9rem; color:rgba(244,239,231,.78); }

/* ---------- spotlight ---------- */
.spot{ padding:clamp(1.6rem,4vw,2.6rem) 0; }
.spot-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.4vw,2.4rem); box-shadow:var(--shadow); display:grid;
  grid-template-columns:1fr auto; gap:1.6rem; align-items:center; }
.spot-card .mark{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:1.1rem; letter-spacing:.02em; margin-bottom:.9rem; }

/* ---------- faq ---------- */
.faq{ padding:clamp(1.6rem,4vw,2.6rem) 0; }
.faq details{ border-bottom:1px solid var(--line); padding:1.05rem .2rem; }
.faq summary{ cursor:pointer; font-weight:600; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:1rem; font-size:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--pine); font-size:1.3rem; line-height:1; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq .a{ color:var(--muted); font-size:.94rem; margin-top:.6rem; }

/* ---------- newsletter ---------- */
.news{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.4vw,2.3rem); margin:2rem 0; display:grid;
  grid-template-columns:1.2fr 1fr; gap:1.6rem; align-items:center; }
.news form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.news input{ flex:1; min-width:190px; padding:.72rem .9rem; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:#fff; font:inherit; font-size:.92rem; color:var(--ink); }
.news input:focus{ outline:2px solid rgba(15,92,87,.3); outline-offset:1px; }
.news .fine{ font-size:.76rem; color:var(--muted); margin-top:.6rem; }

/* ---------- prose (legal pages) ---------- */
.prose{ max-width:74ch; padding:2.4rem 0 1rem; }
.prose h2{ margin-top:2rem; font-size:1.35rem; }
.prose p,.prose li{ color:var(--ink-2); font-size:.98rem; }
.prose ul{ padding-left:1.1rem; }
.prose a{ color:var(--pine); text-underline-offset:3px; }

/* ---------- footer ---------- */
footer.site{ border-top:1px solid var(--line); margin-top:2.6rem; padding:2.4rem 0 6.5rem;
  background:var(--paper-2); }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:1.6rem; margin:1.4rem 0 1.8rem; }
.foot-grid h4{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .7rem; }
.foot-grid ul{ list-style:none; margin:0; padding:0; }
.foot-grid li{ margin-bottom:.42rem; }
.foot-grid a{ text-decoration:none; color:var(--ink-2); font-size:.9rem; }
.foot-grid a:hover{ color:var(--pine); }
.blurb{ color:var(--muted); font-size:.9rem; max-width:40ch; }
.foot-bottom{ border-top:1px solid var(--line); padding-top:1.2rem; font-size:.79rem; color:var(--muted); }

/* ---------- sticky mobile CTA (replaces FannyDeals' icon tab bar) ---------- */
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,251,245,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); }
.stickybar .btn{ width:100%; }

/* ---------- toast ---------- */
.toast{ position:fixed; left:50%; transform:translate(-50%,140%); bottom:5.4rem; z-index:90;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-pill);
  font-size:.86rem; transition:transform .3s var(--ease); box-shadow:var(--shadow-lift); }
.toast.show{ transform:translate(-50%,0); }

/* ---------- reveal ---------- */
.fx{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.fx.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .fx{ opacity:1; transform:none; transition:none; } }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .step-grid{ grid-template-columns:1fr; gap:1.1rem; }
  .news{ grid-template-columns:1fr; }
  .spot-card{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:759px){
  body{ font-size:16px; }
  .stickybar{ display:block; }
  .deal{ grid-template-columns:auto 1fr; row-gap:.9rem; padding:1.25rem .1rem; }
  .deal .rank{ font-size:1.3rem; min-width:1.6rem; }
  .deal .act{ grid-column:1 / -1; text-align:left; display:flex; align-items:center;
    justify-content:space-between; gap:1rem; }
  .deal .off{ margin-bottom:0; font-size:1.5rem; }
  .trustline{ gap:1rem; }
  .hero .cta-row .btn{ width:100%; }
}