/* ═══════════════════════════════════════════════════
   GiftSentry Design System · shared.css
   All pages import this for consistent tokens + nav
═══════════════════════════════════════════════════ */
:root{
  --forest: #0B1A10;
  --forest2:#0F2318;
  --green:  #1A3A2A;
  --greenmid:#2B5E40;
  --greenlt:#3D7A55;
  --cream:  #FAF8F4;
  --creammd:#F0EDE5;
  --creamdp:#E3DDD2;
  --gold:   #C09650;
  --goldlt: #D4AF6A;
  --text:   #1C1C1A;
  --muted:  #6B6B62;
  --faint:  #A8A89E;
  --bord:   rgba(26,58,42,0.14);
  --borddark:rgba(250,248,244,0.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:var(--cream);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── NAV ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;
  background:rgba(11,26,16,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--borddark);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-mark{width:32px;height:32px;background:var(--gold);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--forest)}
.nav-name{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;color:var(--cream);letter-spacing:-.3px}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{font-size:13px;font-weight:400;color:rgba(250,248,244,.55);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-links a.active{color:var(--cream)}
.nav-cta{background:var(--gold)!important;color:var(--forest)!important;padding:7px 20px;border-radius:6px;font-weight:600!important;font-size:12px!important;letter-spacing:.5px;transition:background .2s!important}
.nav-cta:hover{background:var(--goldlt)!important}

/* ── PAGE HERO (inner pages) ── */
.page-hero{
  padding:120px 52px 80px;
  background:var(--forest);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(192,150,80,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(192,150,80,.04) 1px,transparent 1px);
  background-size:52px 52px;pointer-events:none;
}
.page-hero-inner{position:relative;max-width:1200px;margin:0 auto}
.page-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.page-h{font-family:'Cormorant Garamond',serif;font-size:clamp(42px,5vw,68px);font-weight:400;line-height:1.05;color:var(--cream);letter-spacing:-1.5px;margin-bottom:20px}
.page-h em{font-style:italic;color:var(--goldlt)}
.page-sub{font-size:17px;font-weight:300;color:rgba(250,248,244,.55);line-height:1.75;max-width:580px}

/* ── SECTIONS ── */
.s{padding:100px 52px}
.container{max-width:1200px;margin:0 auto}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.eyebrow.dk{color:rgba(250,248,244,.4)}
h2.sh{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,3.5vw,50px);font-weight:400;line-height:1.1;color:var(--green);letter-spacing:-1px;margin-bottom:16px}
h2.sh em{font-style:italic;color:var(--greenmid)}
h2.sh.lt{color:var(--cream)}
h2.sh.lt em{color:var(--goldlt)}
.sec-sub{font-size:16px;font-weight:300;color:var(--muted);line-height:1.75;max-width:580px}
.sec-sub.lt{color:rgba(250,248,244,.5)}

/* ── DARK SECTION ── */
.dark-s{background:var(--forest);padding:100px 52px;position:relative;overflow:hidden}
.dark-s::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(250,248,244,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(250,248,244,.025) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}

/* ── BUTTONS ── */
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--forest);padding:13px 28px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;letter-spacing:.3px;transition:background .2s,transform .2s}
.btn-gold:hover{background:var(--goldlt);transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:rgba(250,248,244,.07);color:rgba(250,248,244,.7);border:1px solid rgba(250,248,244,.15);padding:12px 28px;border-radius:6px;font-size:14px;font-weight:400;text-decoration:none;transition:background .2s,border-color .2s}
.btn-outline:hover{background:rgba(250,248,244,.12);border-color:rgba(250,248,244,.25)}
.btn-green{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--cream);padding:13px 28px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,transform .2s}
.btn-green:hover{background:var(--greenmid);transform:translateY(-1px)}

/* ── CARDS ── */
.card{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:28px}
.card-dark{background:rgba(250,248,244,.04);border:1px solid rgba(250,248,244,.08);border-radius:12px;padding:28px}
.card-dark:hover{background:rgba(250,248,244,.07);border-color:rgba(192,150,80,.2)}

/* ── BADGES ── */
.badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.badge-green{background:rgba(45,95,64,.1);color:var(--greenmid)}
.badge-gold{background:rgba(192,150,80,.12);color:#8B6A28}
.badge-cream{background:rgba(250,248,244,.1);color:rgba(250,248,244,.6)}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}.reveal.d5{transition-delay:.5s}

/* ── FOOTER ── */
#footer{background:var(--forest);border-top:1px solid rgba(250,248,244,.07);padding:40px 52px}
.foot-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto auto;gap:48px;align-items:start}
.foot-logo{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:rgba(250,248,244,.6)}
.foot-tagline{font-size:12px;color:rgba(250,248,244,.3);margin-top:4px;font-weight:300}
.foot-col-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(250,248,244,.3);margin-bottom:14px}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-links a{font-size:13px;color:rgba(250,248,244,.38);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:rgba(250,248,244,.7)}
.foot-copy{margin-top:32px;padding-top:24px;border-top:1px solid rgba(250,248,244,.06);font-size:11px;color:rgba(250,248,244,.2);max-width:1200px;margin-left:auto;margin-right:auto}

/* ── CTA LAYOUT ── */
.cta-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:60px;
  align-items:center;
}
.cta-btns{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:220px;
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #nav{padding:0 24px}
  .nav-links{display:none}
  .page-hero,.s,.dark-s,#footer{padding-left:24px;padding-right:24px}
  .foot-inner{grid-template-columns:1fr;gap:24px}
  /* Inline footer grids on event pages */
  #footer [style*="grid-template-columns:1fr auto auto"]{
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
  }
}

@media(max-width:640px){
  /* Prevent any horizontal overflow */
  body{overflow-x:hidden}
  /* CTA section — stack vertically */
  .cta-inner{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .cta-btns{
    flex-direction:row;
    flex-wrap:wrap;
    min-width:0;
    gap:10px;
  }
  .cta-btns .btn-gold,
  .cta-btns .btn-outline,
  .cta-btns .btn-green{
    flex:1;
    justify-content:center;
    min-width:130px;
    text-align:center;
  }
  /* Feature lists — simple inline flow, no implicit columns */
  .feature-list li{
    display:block;
    padding-left:16px;
    position:relative;
  }
  .feature-list li::before{
    position:absolute;
    left:0;
    top:8px;
  }
  /* All inline footer grids collapse */
  [style*="grid-template-columns:1fr auto auto"]{
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
  }
  /* Inline 3-col grids in sections */
  [style*="grid-template-columns:repeat(3"]{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}
