:root{
  --bg:#0e0b16; --bg2:#14101f; --panel:#1b1530; --line:#2c2342;
  --gold:#FDD28F; --gold-deep:#8d6a30; --cream:#efe8da; --muted:#9b91ab;
  --good:#7fd1a6;
  /* ===== gold-foil tokens (from her Task Tracker / brand-colors-fonts memo) ===== */
  --gold-foil: linear-gradient(135deg,#D6A329 0%,#FDD28F 28%,#BE8C44 62%,#8d6a30 100%);
  --gold-foil-text: linear-gradient(135deg,#E9B779 0%,#FDD28F 25%,#D6A329 50%,#FDD28F 75%,#BE8C44 100%);
  --gold-foil-line: linear-gradient(90deg,transparent 0%,#E9B779 18%,#FDD28F 50%,#E9B779 82%,transparent 100%);
  --on-gold:#1a1310;
}
/* hairline gold-foil frame at the very top of the viewport */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:var(--gold-foil-line);opacity:.85;pointer-events:none}
/* gold-foil text utility */
.foil-text,
.intro-h1, .section-h, .card-name, .offer-name, .door-name,
.brand-eyebrow, .offer-tag, .rank-eyebrow, .chip b, .read-block h3,
.read-date, .rank-name{
  background:var(--gold-foil-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
/* but text-gold inside a SOLID foil button stays dark ink */
.btn .chip b, .tab.active b, .offer-tag, .rank-chip .rank-eyebrow, .rank-chip .rank-name{
  background:none; -webkit-text-fill-color:initial; color:var(--on-gold); -webkit-background-clip:initial; background-clip:initial;
}
/* light theme override (for Earth Angel Wishes) */
body.light{ color-scheme: light; }
body.light input,
body.light select{ background:#fff; color:var(--cream); border-color:var(--line) }
body.light .card{ background:linear-gradient(180deg,#fff,#fbeae0) }
body.light .read-block{ background:#fff }
body.light .read-block.action-block{ background:#fdf3eb }
body.light .step{ background:#fff }
body.light .chip{ background:#fff }
body.light .bar{ background:#fff }
body.light .py-note{ background:#fff }
body.light .appnav{ background:#fff8f2cc; border-bottom-color:var(--line) }
body.light .appnav a{ color:#7a6a72 }
body.light .offer{ background:linear-gradient(180deg,#fff,#fbeae0) }
body.light .offer-includes li{ color:var(--cream) }
body.light .offer-price{ color:var(--cream) }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 600px at 50% -10%, #241a3d 0%, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--cream);
  font-family:"Cormorant Garamond","Georgia",serif;
  min-height:100vh; line-height:1.55;
}
.wrap{max-width:680px;margin:0 auto;padding:42px 22px 80px}
.center{text-align:center}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
a{color:var(--gold)}

/* header */
.brand{letter-spacing:.42em;text-transform:uppercase;font-size:12px;color:var(--gold-deep);font-family:"Helvetica Neue",sans-serif}
h1{font-size:44px;line-height:1.05;margin:14px 0 8px;font-weight:600}
.tagline{color:var(--muted);font-size:19px;margin:0 auto 28px;max-width:460px}
.rule{width:60px;height:1px;background:var(--gold-deep);margin:22px auto;opacity:.6}

/* form card */
.card{
  background:linear-gradient(180deg,var(--panel),#160f29);
  border:1px solid var(--line); border-radius:18px;
  padding:26px 24px; box-shadow:0 24px 60px -30px #000;
}
label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px;font-family:"Helvetica Neue",sans-serif}
input,select{
  width:100%;background:#0f0a1c;border:1px solid var(--line);border-radius:10px;
  color:var(--cream);padding:13px 14px;font-size:17px;font-family:inherit;
}
input::placeholder{color:#5f566f}
input:focus,select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px #b8924a22}

.btn{
  display:inline-block;width:100%;margin-top:22px;cursor:pointer;
  background:var(--gold-foil);
  color:var(--on-gold);border:none;border-radius:12px;padding:15px 18px;
  font-size:17px;font-weight:700;letter-spacing:.04em;
  font-family:"Helvetica Neue",sans-serif;transition:transform .12s ease,filter .12s ease;
  box-shadow:
    0 8px 22px -8px rgba(214,163,41,.55),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.20);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.ghost{background:transparent;border:1px solid #BE8C44;color:#E9B779;box-shadow:none}
.btn.small{width:auto;padding:11px 18px;margin-top:0;font-size:15px}
.err{color:#ff9d9d;font-size:14px;margin-top:12px;min-height:1em}
.hide{display:none!important}

/* the read */
.read-date{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--gold-deep);
  font-family:"Helvetica Neue",sans-serif;margin-bottom:6px}
.card-art{
  width:230px;aspect-ratio:5/7;margin:22px auto 8px;border-radius:16px;
  overflow:hidden;position:relative;
  box-shadow:0 30px 70px -26px #000, 0 0 26px -6px #e8c66b40, 0 0 0 1px #b8924a55;
  animation:cardrise .7s ease both;
}
.card-art svg{display:block;width:100%;height:100%}
@keyframes cardrise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.card-name{font-size:34px;margin:10px 0 2px;font-weight:600}
.card-tagline{color:var(--gold);font-size:19px;font-style:italic;margin:0 0 12px}
.py-note{display:inline-block;border:1px solid var(--gold-deep);border-radius:999px;
  padding:7px 16px;margin:0 auto 18px;color:var(--cream);font-size:14px;
  font-family:"Helvetica Neue",sans-serif;background:#130d24;letter-spacing:.02em}
.read-block{text-align:left;background:#130d24;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:14px 0}
.read-block h3{margin:0 0 6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);font-family:"Helvetica Neue",sans-serif}
.read-block p{margin:0;font-size:18px}
.action-block{border-color:var(--gold-deep);background:#1a1330}

/* the offer — peak / the buy */
.offer{
  margin:26px 0 8px;text-align:center;position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%, #2c2012 0%, transparent 60%),
    linear-gradient(180deg,#1f1733,#160f29);
  border:1px solid var(--gold);border-radius:18px;padding:24px 22px 26px;
  box-shadow:0 26px 60px -28px #000, 0 0 30px -10px #e8c66b55;
  animation:cardrise .6s ease both;
}
.offer-tag{display:inline-block;letter-spacing:.22em;text-transform:uppercase;font-size:11px;
  font-family:"Helvetica Neue",sans-serif;color:var(--on-gold);background:var(--gold-foil);
  padding:5px 14px;border-radius:999px;margin-bottom:14px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18)}
.offer-bridge{font-size:20px;line-height:1.4;color:var(--cream);margin:0 auto 16px;max-width:480px}
.offer-name{font-size:28px;font-weight:600;color:var(--gold);margin:0 0 4px}
.offer-tagline{color:var(--muted);font-size:17px;margin:0 0 14px}
.offer-includes{list-style:none;padding:0;margin:0 auto 16px;max-width:420px;text-align:left;display:inline-block}
.offer-includes li{position:relative;padding:6px 0 6px 26px;font-size:16px;color:var(--cream)}
.offer-includes li::before{content:"✦";position:absolute;left:4px;color:var(--gold)}
.offer-price{font-size:30px;font-weight:700;color:var(--cream);margin:6px 0 4px;font-family:"Helvetica Neue",sans-serif}
.offer-price s{color:#6b6280;font-size:20px;margin-right:10px;font-weight:400}
.btn.buy{max-width:360px;font-size:19px;padding:16px;box-shadow:0 0 24px -6px #e8c66b88}
.offer-urgency{color:#f5b66b;font-size:14px;margin:12px 0 0;font-family:"Helvetica Neue",sans-serif}
.offer-guarantee{color:var(--good);font-size:13px;margin:8px 0 0;font-family:"Helvetica Neue",sans-serif}
.offer code{color:var(--gold)}

/* ladder */
.ladder{margin-top:30px}
.ladder-intro{color:var(--muted);font-size:15px;font-style:italic;margin:0 auto 14px;max-width:440px}
.points-row{display:flex;gap:14px;justify-content:center;margin-bottom:6px}
.chip{background:#130d24;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14px;
  font-family:"Helvetica Neue",sans-serif}
.chip b{color:var(--gold)}
.bar{height:8px;background:#130d24;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:12px 0 4px}
.bar > i{display:block;height:100%;background:var(--gold-foil);width:0%}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:16px;margin:12px 0;text-align:left}
.step .num{flex:0 0 30px;height:30px;border-radius:50%;border:1px solid var(--gold-deep);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:"Helvetica Neue",sans-serif;font-size:14px}
.step.done{border-color:var(--good)}
.step.done .num{border-color:var(--good);color:var(--good)}
.step h4{margin:0 0 4px;font-size:19px}
.step p{margin:0 0 10px;color:var(--muted);font-size:15px}
.step .body{flex:1}
.social-btns{display:flex;flex-wrap:wrap;gap:8px}
.social-btns a{display:inline-block;border:1px solid var(--gold-deep);border-radius:999px;
  padding:8px 14px;text-decoration:none;font-size:14px;font-family:"Helvetica Neue",sans-serif}
.social-btns a.ph{opacity:.45}
.badge{font-size:12px;color:var(--good);font-family:"Helvetica Neue",sans-serif;letter-spacing:.1em}
.game{background:linear-gradient(160deg,#2a1f12,#1a1330);border-color:var(--gold)}
.note{font-size:12px;color:#6b6280;margin-top:6px;font-family:"Helvetica Neue",sans-serif}
.footer{margin-top:40px;text-align:center;color:#5f566f;font-size:13px;font-family:"Helvetica Neue",sans-serif}

/* app nav (Kavita's 5050+ convention) */
.appnav{position:fixed;top:0;left:0;right:0;background:#0b0814cc;backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);font-size:12px;font-family:"Helvetica Neue",sans-serif;z-index:50}
.appnav .inner{max-width:980px;margin:0 auto;padding:8px 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.appnav a{color:#8a80a0;text-decoration:none}
.appnav a:hover{color:var(--gold)}
.appnav b{color:var(--gold-deep);letter-spacing:.1em}

/* ===== TAB BAR (Intro / KST / EAW / AoO) ===== */
.tabbar{position:sticky;top:36px;left:0;right:0;background:transparent;z-index:40;
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 78%, transparent)}
.tabbar-inner{max-width:980px;margin:0 auto;padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tab{cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:9px 16px;border-radius:999px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-family:"Helvetica Neue",sans-serif;font-weight:600;transition:all .15s ease}
.tab:hover{color:var(--cream);border-color:var(--gold-deep)}
.tab.active{background:var(--gold-foil);color:var(--on-gold);border-color:transparent;
  box-shadow:0 0 22px -4px #D6A329, inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18)}
body.light .tab{color:#7a6a72;background:transparent}
body.light .tab.active{color:#fff}

/* ===== panel show/hide ===== */
.panel{display:none;animation:cardrise .5s ease both}
.panel.active{display:block}

/* ===== intro tab ===== */
.intro-h1{font-size:50px;margin:14px 0 6px}
.intro-blurb{font-size:18px;color:var(--muted);max-width:540px;margin:8px auto 0;line-height:1.55}
.brand-eyebrow{letter-spacing:.42em;text-transform:uppercase;font-size:12px;color:var(--gold-deep);
  font-family:"Helvetica Neue",sans-serif;margin-bottom:8px}
.brand-doors{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.door{cursor:pointer;text-align:left;background:linear-gradient(180deg,var(--panel),#160f29);
  border:1px solid var(--line);border-radius:18px;padding:20px 22px;color:var(--cream);
  display:flex;flex-direction:column;gap:4px;font-family:inherit;transition:transform .12s ease,border-color .2s ease;
  position:relative;overflow:hidden}
.door::before{content:"";position:absolute;inset:0;border-radius:18px;opacity:.15;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, var(--door-tint, #BE8C44), transparent 60%)}
.door:hover{transform:translateY(-2px);border-color:var(--gold-deep)}
.door-tag{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-family:"Helvetica Neue",sans-serif}
.door-name{font-size:28px;font-weight:600;margin-top:2px}
.door-line{color:var(--muted);font-size:16px;margin-top:2px}
.door-cta{margin-top:10px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-family:"Helvetica Neue",sans-serif}
.door-kst{--door-tint:#65254D}
.door-eaw{--door-tint:#EBD4CD}
.door-aoo{--door-tint:#0077A0}
.intro-foot{color:var(--muted);font-size:13px;margin-top:18px;text-align:center;font-family:"Helvetica Neue",sans-serif}

/* back row on reading stage */
.back-row{text-align:center;margin-top:20px}

/* ===== receipt prompt ===== */
.receipt-prompt{background:linear-gradient(180deg,#1a1330,#100a22);border:1px solid var(--gold);
  border-radius:14px;padding:16px 18px;margin:14px 0 8px;text-align:center;
  box-shadow:0 0 22px -10px var(--gold)}
.receipt-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
body.light .receipt-prompt{background:linear-gradient(180deg,#fff,#fdf3eb)}

/* ===== rank chip ===== */
.rank-wrap{margin:14px 0 6px;text-align:center}
.rank-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;
  background:var(--gold-foil);color:var(--on-gold);
  font-family:"Helvetica Neue",sans-serif;font-weight:700;letter-spacing:.06em;
  box-shadow:0 0 24px -6px #D6A329, inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18)}
.rank-eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.rank-name{font-size:18px}
.rank-bar{height:6px;width:80%;max-width:420px;margin:10px auto 6px;background:#130d24;
  border:1px solid var(--line);border-radius:999px;overflow:hidden}
.rank-bar > i{display:block;height:100%;background:var(--gold-foil);width:0%}
.rank-line{color:var(--muted);font-size:13px;font-family:"Helvetica Neue",sans-serif}
body.light .rank-bar{background:#fff}

/* ===== section header ===== */
.section-h{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  font-family:"Helvetica Neue",sans-serif;text-align:center;margin:30px 0 10px;font-weight:700}
.small-p{font-size:14px;text-align:center;margin:0 auto 14px;max-width:480px}

/* ===== deck collection ===== */
.collection{margin-top:18px}
.deck-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 4px}
.deck-slot{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.35;transition:all .2s ease}
.deck-slot.pulled{opacity:1}
.slot-orb{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%, var(--hue,#888), #1a1330 75%);
  border:1px solid var(--gold-deep);box-shadow:0 0 10px -2px var(--hue,#888)}
.deck-slot:not(.pulled) .slot-orb{background:#0f0a1c;box-shadow:none;border-color:#39314e}
.slot-label{font-size:9px;color:var(--muted);text-align:center;line-height:1.1;font-family:"Helvetica Neue",sans-serif;
  letter-spacing:.04em;min-height:11px}
body.light .slot-orb{background:radial-gradient(circle at 35% 30%, var(--hue,#888), #fdf3eb 75%)}
body.light .deck-slot:not(.pulled) .slot-orb{background:#fff}

/* ===== achievements / badges ===== */
.trophies{margin-top:8px}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 8px;border-radius:12px;
  border:1px solid var(--line);background:#130d24;opacity:.45;transition:all .2s ease}
.badge.on{opacity:1;border-color:var(--gold-deep);background:linear-gradient(180deg,#1f1733,#160f29);
  box-shadow:0 0 14px -6px var(--gold)}
.badge-dot{width:14px;height:14px;border-radius:50%;background:#39314e;margin-bottom:6px}
.badge.on .badge-dot{background:radial-gradient(circle at 35% 30%, var(--gold), var(--gold-deep))}
.badge-name{font-size:12px;color:var(--cream);font-family:"Helvetica Neue",sans-serif;letter-spacing:.04em}
body.light .badge{background:#fff;color:var(--cream)}

/* ===== money ledger ===== */
.ledger{margin-top:8px}
.ledger-row{display:flex;gap:8px;align-items:stretch}
.ledger-row input{flex:1}
.ledger-row .btn{margin:0;white-space:nowrap}
.ledger-totals{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}

/* ===== share & refer ===== */
.share-refer{margin-top:8px;text-align:center}
.share-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

@media(max-width:520px){
  .deck-grid{grid-template-columns:repeat(7,1fr)}
  .badge-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:520px){h1{font-size:34px}.appnav{display:none} .tabbar{top:0}}