/* Homepage — unified panel system */
:root{
  --sg-maroon:#7A1F3D;
  --sg-maroon-dark:#5C142D;
  --sg-gold:#B98A2F;
  --sg-cream:#FBF7F0;
  --sg-ink:#431832;
  --sg-panel-gap:.35rem;
  --sg-section-y:.55rem;
  --sg-grid-gap:1.25rem;
}

/* Buttons */
.bsf,.bfind,.bprof,.browse-go-btn{
  background:var(--sg-maroon);
  border-color:var(--sg-maroon);
}
.bsf:hover,.bfind:hover,.bprof:hover,.browse-go-btn:hover{
  background:var(--sg-maroon-dark);
  border-color:var(--sg-maroon-dark);
}
.bso{border-color:var(--sg-maroon);color:var(--sg-maroon)}
.bso:hover{background:var(--sg-maroon);color:#fff}

/* Section rhythm */
.home-page .sw{padding:var(--sg-section-y) 1.25rem}
.home-page .sw + .sw{padding-top:var(--sg-panel-gap)}
.home-page .slabel{margin-bottom:.15rem}
.home-page .stitle{margin-bottom:.85rem;line-height:1.2}
#why-section .stitle{margin-bottom:1.1rem}

.home-section-alt{background:var(--sg-cream)}
#why-section{background:var(--sg-cream)}

/* ── Why section: 6-tile grid (2×3, no icons) ── */
.why-tiles-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sg-grid-gap);
  max-width:920px;
  margin:1rem auto 0;
}
.why-tile{
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid rgba(185,138,47,.38);
  border-radius:14px;
  padding:1rem 1.2rem;
  box-shadow:0 2px 10px rgba(67,24,50,.05);
  min-height:56px;
}
.why-tile-title{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.35;
  color:var(--sg-ink);
}

/* Footer: brand column + Haku disclosure */
.home-page footer .ft{
  grid-template-columns:2.2fr repeat(6,minmax(0,1fr));
}
.footer-brand-col{max-width:280px}
.footer-haku-note{
  margin:.55rem 0 .75rem;
  font-size:.78rem;
  line-height:1.55;
  color:rgba(255,255,255,.55);
}
.footer-haku-note strong{color:var(--gold-light,#E8C875)}
.footer-brand-col .fct{margin-top:.15rem}
.footer-copy{
  margin-top:.75rem;
  font-size:.72rem;
  color:rgba(255,255,255,.28);
  line-height:1.45;
}
.footer-merchant-line{
  font-size:.74rem;
  line-height:1.5;
}
.footer-merchant-line strong{color:var(--gold-light,#E8C875)}

/* ── Unified panel card (text only, no icons) ── */
.home-panel{
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid rgba(185,138,47,.38);
  border-radius:14px;
  padding:1rem 1.2rem;
  box-shadow:0 2px 10px rgba(67,24,50,.05);
  overflow:hidden;
  min-height:56px;
}
.home-panel-title{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.35;
  color:var(--sg-ink);
}
.home-panel-title--lead{font-size:clamp(1.05rem,2.2vw,1.25rem)}

/* Panel grids */
.home-panels-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sg-grid-gap);
  max-width:920px;
  margin:1rem auto 0;
}
.home-panels-grid--1{grid-template-columns:1fr;max-width:720px}
.home-panels-grid--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:1100px;
  gap:var(--sg-grid-gap);
}
.home-panels-grid--plans{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:950px;
  gap:calc(var(--sg-grid-gap) + .15rem);
}
.home-panels-grid--stories{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:1100px;
  gap:var(--sg-grid-gap);
}

/* Stack variant (guidance) */
.home-panel--stack{align-items:flex-start;padding:1.05rem 1.2rem}
.home-panel--stack .home-panel-body{min-width:0}
.home-panel--stack .home-panel-title{margin-bottom:.35rem}
.home-panel--stack .sread{margin-top:0;font-size:.82rem}

/* Destiny single panel */
.home-panel--destiny{padding:1.05rem 1.25rem}

/* Plan panels — keep top accent */
.home-panel--plan::before,
.home-panel--featured::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--sg-maroon),var(--sg-gold));
}

/* Panel shell (browse, horoscope) */
.home-panel-shell{
  position:relative;
  max-width:720px;
  margin:.65rem auto 0;
  background:#fff;
  border:1px solid rgba(185,138,47,.18);
  border-radius:14px;
  padding:1rem 1.15rem;
  box-shadow:0 6px 22px rgba(67,24,50,.06);
  overflow:hidden;
}
.home-panel-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--sg-maroon),var(--sg-gold));
}
.home-panel-shell--wide{max-width:920px}

.home-panel-note{
  max-width:920px;
  margin:.65rem auto 0;
  background:#fff;
  border:1px solid rgba(185,138,47,.18);
  border-left:4px solid var(--sg-gold);
  padding:.85rem 1rem;
  border-radius:10px;
  color:var(--gtxt,#555);
  font-size:.92rem;
  line-height:1.55;
  text-align:left;
  box-shadow:0 4px 16px rgba(67,24,50,.05);
}
.home-panel-note strong{color:var(--sg-maroon);font-weight:700}

/* Browse inside shell */
.home-panel-shell .browse-dropdowns{margin:0;max-width:none}
.browse-dropdowns{gap:var(--sg-panel-gap)}
.browse-dd{gap:.1rem}

/* Verify section */
.verify-usp-section .home-panels-grid{max-width:920px}

/* Profiles */
.home-gender-tabs{margin:var(--sg-panel-gap) auto}
.pg{gap:var(--sg-panel-gap);margin-top:var(--sg-panel-gap)}
.pcta{margin-top:var(--sg-panel-gap)}

/* Horoscope shell */
.horoscope-match-section .home-panel-shell .horoscope-card{
  padding:0;
  margin:0;
  border:none;
  box-shadow:none;
  background:transparent;
}
.horoscope-match-section .horo-card h2{margin-bottom:var(--sg-panel-gap)}
.horoscope-match-section .horo-grid{gap:var(--sg-panel-gap)}

/* Plan panels */
.home-panel--plan{
  flex-direction:column;
  align-items:stretch;
  text-align:center;
  padding:1.25rem 1.15rem 1.15rem;
  min-height:0;
}
.home-panel--plan .pl-n{margin-bottom:.35rem}
.home-panel--plan .pl-p{margin:.45rem 0}
.home-panel--plan .pl-per{margin-bottom:1rem}
.home-panel--plan .pl-f{margin-bottom:1.25rem}
.home-panel--plan .bpl{margin-top:auto}

.home-panel--featured{
  border-color:var(--sg-gold);
  background:linear-gradient(160deg,var(--sg-maroon) 0%,#2A0818 100%);
  box-shadow:0 12px 36px rgba(67,24,50,.18);
}
.home-panel--featured::before{
  background:linear-gradient(90deg,var(--sg-gold),#E8C875);
}
.home-panel--featured .pl-n{color:rgba(255,255,255,.65)}
.home-panel--featured .pl-p{color:#fff}
.home-panel--featured .pl-per{color:rgba(255,255,255,.55)}
.home-panel--featured .pl-f li{color:rgba(255,255,255,.78)}
.home-panel--featured .pl-f li::before{color:var(--sg-gold)}
.home-panel--featured .pl-badge{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
}

/* Trust stories in panel grid */
#stories-section .founder-note{margin:.45rem auto .65rem}
.home-panels-grid--stories .trust-card{
  border:1px solid rgba(185,138,47,.18);
  border-radius:14px;
  box-shadow:0 6px 22px rgba(67,24,50,.06);
  background:#fff;
}
.home-panels-grid--stories .trust-band{border-radius:12px 12px 0 0}
.trust-card .sbody{padding:1rem 1.1rem}
.trust-card .snames{margin-bottom:.35rem}
.trust-card .squote{line-height:1.55;margin-top:0}
.stories-cta{margin-top:var(--sg-panel-gap)}

/* ── Tablet / mobile ── */
@media(max-width:900px){
  .home-panels-grid--plans{grid-template-columns:1fr;max-width:420px}
  .home-panels-grid--3{grid-template-columns:1fr}
}

@media(max-width:768px){
  .home-page .sw{padding:.45rem .75rem}
  :root{
    --sg-section-y:.45rem;
    --sg-grid-gap:.9rem;
  }

  .why-tiles-grid{
    grid-template-columns:1fr;
    gap:var(--sg-grid-gap);
  }

  .home-panels-grid,
  .home-panels-grid--3,
  .home-panels-grid--stories{
    grid-template-columns:1fr;
    gap:var(--sg-grid-gap);
    margin-top:.85rem;
  }

  .home-panel{
    padding:.9rem 1rem;
    min-height:52px;
  }

  .home-panel-shell,
  .home-panel-shell--wide{
    padding:.85rem .9rem;
    border-radius:12px;
  }

  .home-panel--plan{padding:1.1rem 1rem}
  .home-panel--featured{transform:none}

  .browse-go-btn,
  .home-horo-form .horo-btn,
  .home-horo-form .horo-actions .horo-btn-primary,
  .home-horo-form .horo-actions .horo-btn-outline{
    width:100%;
    justify-content:center;
  }
  .home-horo-form .horo-actions{
    flex-direction:column;
    gap:.5rem;
  }

  .pg{grid-template-columns:1fr}
  .pcta .bprof{width:100%;max-width:320px}
  .stories-cta .bstories{display:block;width:100%;max-width:320px;margin:0 auto;text-align:center;box-sizing:border-box}

  .home-page footer .ft{grid-template-columns:1fr 1fr;gap:1rem}
}

@media(max-width:480px){
  .home-panel-title{font-size:.98rem}
  .home-panel-title--lead{font-size:1rem}
  .trust-card .sbody{padding:.85rem .9rem}
  .trust-card .squote{font-size:.82rem}
}
