/* Key-Party public page theme, v2 (2026-09-23)
   Matches the Key-Party member area layout with the homepage black and gold accents:
     white header with the black logo, soft blue/lavender page wash,
     white rounded cards, black feature cards with gold links, cream highlight cards,
     rounded dark hero banner (same shape as the lobby promo banner),
     light grey footer with pipe separated links.
     Buttons follow the homepage: gold "Free to Join", dark "Login" with gold text.
   Works on the existing city pages without markup changes. */

:root{
  --gold:#EFBF04;
  --gold-dark:#D9AD03;
  --gold-soft:#FFF4CC;
  --cream:#FFF8E7;
  --black:#000000;
  --panel:#141414;
  --ink:#121212;
  --body:#2B2B2B;
  --muted:#6B7280;
  --line:#E6E7EE;
  --footer:#E8E8E8;
  --radius:8px;
  --card-radius:18px;
  --banner-radius:24px;
  --card-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05);
  --header-shadow:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.06);
  --glow:0 8px 28px rgba(239,191,4,.35);
  --banner:linear-gradient(100deg,#000000 0%,#0d0a09 45%,#271B17 100%);
  --wash:linear-gradient(180deg,#F7F9FC 0%,#EAF3FF 35%,#F1EEFF 70%,#F7F9FC 100%);
}
*{box-sizing:border-box}
html{background:#F7F9FC}
body{margin:0;font-family:'Raleway',sans-serif;font-weight:500;color:var(--body);background:var(--wash);background-attachment:fixed;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:#000;text-decoration-color:var(--gold-dark)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.2}

/* ---------- header: white, like the member area ---------- */
header.site-header{background:#fff;box-shadow:var(--header-shadow);position:sticky;top:0;z-index:30}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px}
.logo{text-decoration:none;flex:0 0 auto}
.logo img{height:64px;width:auto}
nav.primary-nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;align-items:flex-end}
nav.primary-nav a{color:var(--ink);font-weight:600;font-size:16px;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px}
nav.primary-nav a:hover{color:#000}
/* optional icon bubble above a nav label (same as Keys / Messages / Approvals) */
.nav-icon{width:52px;height:52px;border-radius:9999px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.nav-icon svg{width:24px;height:24px;stroke:var(--gold-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.primary-nav a:hover .nav-icon{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.nav-cta{display:flex;gap:12px;align-items:center;padding-left:24px;border-left:1px solid var(--line);align-self:stretch}

/* ---------- buttons: homepage style ---------- */
.btn{display:inline-block;padding:13px 26px;border-radius:var(--radius);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;text-align:center;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:#000;box-shadow:var(--glow)}
.btn-primary:hover{background:var(--gold-dark);color:#000}
.btn-ghost{background:var(--panel);color:var(--gold);border:1px solid #262626}
.btn-ghost:hover{background:#000;color:var(--gold)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-outline:hover{border-color:var(--gold);color:#000}
.mobile-toggle{display:none}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-size:14px;color:var(--muted);padding-top:18px;padding-bottom:4px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:#000}
.breadcrumb span{margin:0 6px}

/* ---------- hero: rounded dark banner, like the lobby promo banner ---------- */
section.hero{background:none;padding:18px 0 8px;text-align:center}
section.hero > .wrap{background:var(--banner);border-radius:var(--banner-radius);padding:64px 40px 56px;color:#fff;position:relative;overflow:hidden}
section.hero > .wrap::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(239,191,4,.18),rgba(239,191,4,0) 70%);pointer-events:none}
.hero .eyebrow{display:block;color:var(--gold);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.hero h1{font-size:44px;margin:0 0 16px;color:#fff}
.hero .accent{color:var(--gold)}
.hero p.lede{max-width:720px;margin:0 auto 30px;color:#dcdcdc;font-size:18px}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.badge-row{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:14px;font-weight:600;position:relative;z-index:1}
.badge-row span{color:#eee;background:rgba(255,255,255,.06);border:1px solid rgba(239,191,4,.4);padding:7px 15px;border-radius:9999px}

/* ---------- content sections become cards on the page wash ---------- */
main section{padding:14px 0}
main section:not(.hero):not(.cta-band) > .wrap{background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:44px 48px}
/* .alt = black feature card (like "Latest Forum Posts") */
main section.alt:not(.hero):not(.cta-band) > .wrap{background:var(--black);border-color:#000;color:#d6d6d6}
section.alt h2,section.alt h3,section.alt h4{color:#fff}
section.alt a{color:var(--gold);text-decoration-color:rgba(239,191,4,.5)}
section.alt .two-col ul,section.alt p,section.alt li{color:#d0d0d0}
section.alt .faq-item{border-color:#2a2a2a}
section.alt .faq-item p{color:#c9c9c9}
/* .warm = cream highlight card (like the Birthdays card) */
main section.warm:not(.hero):not(.cta-band) > .wrap{background:var(--cream);border-color:#F4E7C2}

h2{font-size:30px;margin:0 0 14px}
h2.center{text-align:center}
h3{font-size:19px;margin:0 0 10px}
p{margin:0 0 18px}
p.section-sub{color:var(--muted);max-width:680px;margin:0 auto 32px;text-align:center;font-size:17px}
section.alt p.section-sub{color:#bdbdbd}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.card-head h2{margin:0}
.card-head a{font-weight:600;text-decoration:none;color:var(--gold-dark)}
section.alt .card-head{border-color:#2a2a2a}
section.alt .card-head a{color:var(--gold)}
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > .definition,.prose > .table-scroll,.prose > figure{max-width:860px}
.prose p,.prose li{font-size:17px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:10px}

/* ---------- inner cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff}
.card h3{font-size:18px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .icon{width:44px;height:44px;border-radius:9999px;background:var(--black);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px}
section.alt .card{background:#111;border-color:#2a2a2a}
section.alt .card p{color:#bdbdbd}
.icon-bubble{width:48px;height:48px;border-radius:9999px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.icon-bubble svg{width:22px;height:22px;stroke:var(--gold-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.two-col ul{padding-left:20px;color:var(--muted)}
.two-col li{margin-bottom:10px}

/* feature list with icons, mirrors the member sidebar */
.feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.feature-list li{display:flex;gap:14px;align-items:flex-start;margin:0}
.feature-list svg{flex:0 0 26px;width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.feature-list strong{display:block;color:var(--ink)}
.feature-list span{color:var(--muted);font-size:15px}

.definition{background:var(--cream);border:1px solid #F4E7C2;border-left:4px solid var(--gold);border-radius:14px;padding:22px 26px;margin:0 0 26px}
.definition p{margin:0}
.definition strong{color:#000}

.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{counter-increment:step;position:relative;padding:0 0 18px 58px;margin:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:9999px;background:var(--black);color:var(--gold);font-weight:800;display:flex;align-items:center;justify-content:center}
.steps strong{color:var(--ink)}
section.alt .steps strong{color:#fff}
section.alt .steps li::before{background:var(--gold);color:#000}

.compare{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15px}
.compare th{background:var(--black);color:var(--gold);text-align:left;padding:12px 14px;font-weight:700}
.compare th:first-child{border-top-left-radius:10px}
.compare th:last-child{border-top-right-radius:10px}
.compare td{border-bottom:1px solid var(--line);padding:12px 14px;vertical-align:top}
.compare tr:nth-child(even) td{background:#FAFAFC}
.table-scroll{overflow-x:auto}

figure.inline-img{margin:6px 0 26px}
figure.inline-img img{border-radius:14px;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cream)}
figure.inline-img figcaption{font-size:13px;color:var(--muted);margin-top:8px}

.link-cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.link-cluster a{display:block;padding:15px 18px;border:1px solid var(--line);border-radius:12px;font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.link-cluster a:hover{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
section.alt .link-cluster a{background:#111;border-color:#2a2a2a;color:#fff}

.faq{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-item:last-child{border-bottom:0}
.faq-item h3{font-size:18px;margin:0 0 8px}
.faq-item p{margin:0;color:var(--muted)}
.card-head + .faq{max-width:none;margin:0}

/* ---------- CTA: dark rounded banner ---------- */
section.cta-band{background:none;padding:14px 0 40px;text-align:center}
section.cta-band > .wrap{background:var(--banner);border-radius:var(--banner-radius);padding:52px 32px;color:#fff}
.cta-band .cta-panel{background:none;padding:0}
.cta-band h2{color:#fff}
.cta-band p{color:#d0d0d0;max-width:620px;margin:0 auto 26px}

/* ---------- footer: member area footer ---------- */
footer.site-footer,footer.kp-footer{background:var(--footer);color:var(--ink);padding:34px 0 30px;font-size:16px;margin-top:10px}
.kp-footer-row{display:flex;align-items:center;gap:40px}
.kp-footer-row .footer-logo img{height:84px;width:auto}
.kp-footer-links{flex:1;text-align:center}
.kp-footer-links nav{display:flex;flex-wrap:wrap;justify-content:center;row-gap:14px;margin-bottom:18px}
.kp-footer-links nav a{color:var(--ink);text-decoration:none;padding:0 22px;border-right:2px solid var(--ink);line-height:1.1}
.kp-footer-links nav a:last-child{border-right:0}
.kp-footer-links nav a:hover{color:#000;text-decoration:underline;text-decoration-color:var(--gold)}
.kp-footer-links .copy{margin:0}
.kp-footer-links .age{margin:6px 0 0;font-size:13px;color:var(--muted)}
/* legacy footer markup on the first three city pages */
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:24px}
.footer-grid h4{color:var(--ink);font-size:14px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.04em}
.footer-grid p{color:var(--muted) !important}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:var(--ink);text-decoration:none}
.footer-grid a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.footer-bottom{border-top:1px solid #cfcfcf;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  nav.primary-nav ul{gap:20px}
  .nav-icon{width:44px;height:44px}
}
@media (max-width:860px){
  nav.primary-nav{display:none}
  .nav-cta{border-left:0;padding-left:0}
  .logo img{height:48px}
  .btn{padding:11px 18px;font-size:15px}
  section.hero > .wrap{padding:44px 22px 40px;border-radius:18px}
  .hero h1{font-size:31px}
  h2{font-size:25px}
  main section:not(.hero):not(.cta-band) > .wrap{padding:28px 22px;border-radius:16px}
  .wrap{padding:0 14px}
  .card-grid,.two-col,.feature-list{grid-template-columns:1fr}
  .link-cluster{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .kp-footer-row{flex-direction:column;gap:18px}
  .kp-footer-links nav a{padding:0 12px}
}
@media (max-width:420px){
  .nav-cta .btn-ghost{display:none}
  .link-cluster{grid-template-columns:1fr}
}