@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#2a1a2e;--ink-soft:#5a4a58;--ink-muted:#9a8a98;
  --cream:#faf8f5;--cream-dark:#f0ece6;
  --berry:#8b3a7e;--berry-light:#f5e8f0;--berry-dark:#4a1a44;
  --orange:#e8905a;--orange-light:#fde8d4;--orange-dark:#7a3a10;
  --border:rgba(42,26,46,0.08);--border-med:rgba(42,26,46,0.14);
  --serif:'DM Serif Display',serif;--sans:'DM Sans',sans-serif;--radius:14px;
}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);font-size:15px;line-height:1.6;overflow-x:hidden;}

/* ── NAV ── */
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;border-bottom:1px solid var(--border);background:var(--cream);position:sticky;top:0;z-index:200;}
.logo{font-family:var(--serif);font-size:21px;letter-spacing:-0.3px;text-decoration:none;}
.logo-happy{color:var(--berry);font-style:italic;}
.logo-compound{color:var(--ink);}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center;}
.nav-links a{font-size:12px;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:7px 15px;border-radius:100px;transition:background 0.13s,color 0.13s;}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--cream-dark);}

/* ── SHARED BUTTONS ── */
.btn-berry{background:var(--berry);color:#fff;padding:13px 26px;border-radius:100px;font-size:14px;font-weight:500;cursor:pointer;border:none;display:inline-block;font-family:var(--sans);text-decoration:none;}
.btn-berry:hover{opacity:0.88;}
.btn-orange{background:var(--orange);color:var(--orange-dark);padding:13px 26px;border-radius:100px;font-size:14px;font-weight:500;cursor:pointer;border:none;display:inline-block;font-family:var(--sans);text-decoration:none;}
.btn-orange:hover{opacity:0.88;}
.fbtn{border:1px solid var(--border-med);background:var(--cream);color:var(--ink-soft);padding:7px 15px;border-radius:100px;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.12s;font-family:var(--sans);}
.fbtn:hover,.fbtn.on{background:var(--ink);color:var(--cream);border-color:var(--ink);}

/* ── SHARED SECTIONS ── */
.sec-eye{font-size:10px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;display:block;}
.sec-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.sec-header h2{font-family:var(--serif);font-size:28px;letter-spacing:-0.4px;line-height:1.16;}
.sec-header p{font-size:14px;color:var(--ink-soft);margin-top:5px;font-weight:300;}
.see-all{font-size:13px;font-weight:500;color:var(--berry);text-decoration:none;white-space:nowrap;flex-shrink:0;}
.see-all:hover{text-decoration:underline;}

/* ── PICK CARDS (referral bonuses) ── */
.picks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pick-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:border-color 0.15s,transform 0.15s;display:flex;flex-direction:column;}
.pick-card:hover{border-color:var(--berry);transform:translateY(-2px);}
.pick-cat{font-size:10px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;display:inline-block;padding:3px 10px;border-radius:100px;margin-bottom:12px;align-self:flex-start;}
.pick-name{font-size:16px;font-weight:500;margin-bottom:8px;line-height:1.25;}
.pick-desc{font-size:13px;color:var(--ink-soft);line-height:1.62;font-weight:300;flex:1;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pick-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;border-top:1px solid var(--border);}
.reward-pill{font-size:11px;font-weight:500;color:var(--orange-dark);background:var(--orange-light);padding:4px 12px;border-radius:12px;min-width:0;flex:1;line-height:1.5;}
.pick-arrow{font-size:14px;color:var(--ink-muted);flex-shrink:0;}

/* ── GOODIE CARDS ── */
.goodies-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.goodie-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color 0.15s,transform 0.15s;display:flex;flex-direction:column;}
.goodie-card:hover{border-color:var(--berry);transform:translateY(-2px);}
.goodie-img{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;flex-shrink:0;}
.g-icon{font-size:32px;opacity:0.28;}
.g-lbl{font-size:9px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);opacity:0.55;}
.goodie-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;}
.goodie-cat{font-size:10px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;display:inline-block;padding:2px 9px;border-radius:100px;margin-bottom:8px;align-self:flex-start;}
.goodie-name{font-size:14px;font-weight:500;margin-bottom:6px;line-height:1.3;}
.goodie-why{font-size:12px;color:var(--ink-soft);line-height:1.55;font-weight:300;flex:1;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.goodie-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border);}
.owned{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-muted);}
.owned-dot{width:5px;height:5px;border-radius:50%;background:var(--berry);flex-shrink:0;}
.price-pill{font-size:11px;font-weight:500;color:var(--orange-dark);background:var(--orange-light);padding:3px 9px;border-radius:100px;white-space:nowrap;}

/* ── VAULT / CAT GROUP ── */
.cat-group{margin-bottom:48px;}
.cat-group-header{display:flex;align-items:center;gap:14px;padding:16px 0 12px;border-bottom:1px solid var(--border);}
.cat-group-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.cat-group-title{font-size:13px;font-weight:500;}
.cat-group-count{font-size:11px;color:var(--ink-muted);}
.coming-soon{padding:28px 0;font-size:13px;color:var(--ink-muted);font-weight:300;font-style:italic;}

/* ── PANEL ── */
.overlay{position:fixed;inset:0;background:rgba(42,26,46,0.38);z-index:500;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.overlay.open{opacity:1;pointer-events:all;}
.panel{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:94vw;background:var(--cream);z-index:501;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.32,0,0.15,1);overflow-y:auto;display:flex;flex-direction:column;}
.panel.open{transform:translateX(0);}
.panel-head{padding:26px 28px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--cream);z-index:10;}
.panel-close{background:none;border:1px solid var(--border-med);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--sans);}
.panel-close:hover{border-color:var(--berry);color:var(--berry);}
.panel-cat-tag{font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;display:inline-block;padding:3px 10px;border-radius:100px;margin-bottom:10px;}
.panel-name{font-family:var(--serif);font-size:26px;letter-spacing:-0.4px;line-height:1.15;}
.panel-scroll{flex:1;overflow-y:auto;padding-bottom:16px;}
.psec{padding:20px 28px 0;}
.plabel{font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;display:block;}
.ptext{font-size:14px;color:var(--ink-soft);line-height:1.72;font-weight:300;}
.caveat-box{background:var(--cream-dark);border-radius:8px;padding:14px 16px;font-size:13px;color:var(--ink-soft);line-height:1.6;font-weight:300;border-left:3px solid var(--border-med);}
.reward-box{background:var(--orange-light);border-radius:8px;padding:16px 18px;}
.reward-lbl{font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange-dark);margin-bottom:6px;display:block;}
.reward-val{font-size:15px;font-weight:500;color:var(--orange-dark);line-height:1.4;}
.reward-detail{font-size:13px;color:var(--ink-soft);margin-top:6px;font-weight:300;line-height:1.6;}
.owned-box{background:var(--cream-dark);border-radius:8px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.owned-icon{font-size:20px;opacity:0.6;flex-shrink:0;}
.owned-strong{font-size:14px;font-weight:500;color:var(--ink);display:block;margin-bottom:2px;}
.owned-sub{font-size:12px;color:var(--ink-soft);font-weight:300;}
.goodie-info-box{background:var(--berry-light);border-radius:8px;padding:16px 18px;}
.goodie-lbl{font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--berry-dark);margin-bottom:6px;display:block;}
.goodie-val{font-size:15px;font-weight:500;color:var(--berry-dark);line-height:1.4;}
.goodie-detail{font-size:13px;color:var(--ink-soft);margin-top:6px;font-weight:300;line-height:1.6;}
.panel-cta{padding:16px 28px 24px;border-top:1px solid var(--border);background:var(--cream);}
.panel-cta-btn{display:block;width:100%;text-align:center;padding:13px;border-radius:100px;font-size:14px;font-weight:500;cursor:pointer;border:none;font-family:var(--sans);text-decoration:none;}
.panel-cta-btn:hover{opacity:0.86;}
.panel-cta-note{font-size:11px;color:var(--ink-muted);text-align:center;margin-top:8px;}

/* ── EMAIL BLOCK ── */
.email-wrap{background:var(--ink);padding:60px 48px;text-align:center;}
.email-inner{max-width:500px;margin:0 auto;}
.email-wrap h3{font-family:var(--serif);font-size:28px;letter-spacing:-0.4px;color:#faf8f5;margin-bottom:8px;line-height:1.2;}
.email-wrap h3 em{font-style:italic;color:var(--orange);}
.email-wrap p{font-size:14px;color:rgba(250,248,245,0.46);font-weight:300;margin-bottom:28px;}
.email-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.email-input{border:1px solid rgba(250,248,245,0.16);background:rgba(250,248,245,0.07);padding:12px 20px;border-radius:100px;font-size:14px;font-family:var(--sans);color:#faf8f5;outline:none;width:240px;}
.email-input::placeholder{color:rgba(250,248,245,0.3);}
.email-submit{background:var(--berry);color:#fff;border:none;padding:12px 24px;border-radius:100px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--sans);}
.email-submit:hover{opacity:0.88;}
.email-note{font-size:11px;color:rgba(250,248,245,0.26);margin-top:12px;}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:20px 48px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-muted);background:var(--cream);flex-wrap:wrap;gap:6px;}
.footer-logo{font-family:var(--serif);font-size:14px;}

/* ── LOADING STATE ── */
.loading-state{padding:24px;color:var(--ink-muted);font-size:13px;font-style:italic;}

.hidden{display:none!important;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav{padding:14px 20px;}
  .nav-links a{padding:6px 10px;font-size:11px;}
  .logo{font-size:18px;}
  .picks-grid{grid-template-columns:1fr;}
  .goodies-grid{grid-template-columns:repeat(2,1fr);}
  footer{padding:16px 20px;}
  .panel{width:100%;max-width:100%;}
  .email-wrap{padding:48px 20px;}
  .email-input{width:100%;}
  .email-row{flex-direction:column;align-items:stretch;}
  .email-submit{width:100%;}
}